@elementor/editor-site-navigation 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.14.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.13.0...@elementor/editor-site-navigation@0.14.0) (2023-07-27)
+
+
+### Features
+
+* **site-navigation:** add duplicate action to pages panel [ED-10867] ([#95](https://github.com/elementor/elementor-packages/issues/95)) ([2fd8b3c](https://github.com/elementor/elementor-packages/commit/2fd8b3cc88feb525adc4dfebe75ea14189876075))
+
+
+
+
+
+# [0.13.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.12.0...@elementor/editor-site-navigation@0.13.0) (2023-07-26)
+
+
+### Features
+
+* added view page action to pages panel [ED-10869] ([#66](https://github.com/elementor/elementor-packages/issues/66)) ([dfefd2f](https://github.com/elementor/elementor-packages/commit/dfefd2f90435c8ecf45c897c4329bd9c5a262a6c))
+
+
+
+
+
 # [0.12.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.11.0...@elementor/editor-site-navigation@0.12.0) (2023-07-24)
 
 

package/dist/index.js

@@ -249,7 +249,7 @@ function RecentlyEdited() {
 // src/init.ts
 var import_editor_app_bar = require("@elementor/editor-app-bar");
 
-// src/hooks/useToggleButtonProps.ts
+// src/hooks/use-toggle-button-props.ts
 var import_i18n14 = require("@wordpress/i18n");
 var import_icons15 = require("@elementor/icons");
 
@@ -318,6 +318,17 @@ var deleteRequest = (postTypeSlug, postId) => {
     method: "DELETE"
   });
 };
+var duplicateRequest = (originalPost) => {
+  const path = `/elementor/v1/site-navigation/duplicate-post`;
+  return (0, import_api_fetch3.default)({
+    path,
+    method: "POST",
+    data: {
+      post_id: originalPost.id,
+      title: originalPost.title
+    }
+  });
+};
 
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
@@ -423,10 +434,15 @@ function usePostActions(postTypeSlug) {
     (postId) => deleteRequest(postTypeSlug, postId),
     { onSuccess }
   );
+  const duplicatePost = (0, import_query2.useMutation)(
+    (originalPost) => duplicateRequest(originalPost),
+    { onSuccess }
+  );
   return {
     createPost,
     updatePost,
-    deletePost
+    deletePost,
+    duplicatePost
   };
 }
 function useInvalidatePosts(postTypeSlug) {
@@ -550,23 +566,23 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 var React11 = __toESM(require("react"));
 var import_i18n6 = require("@wordpress/i18n");
-function ListItemDuplicate() {
+function ListItemDuplicate({ post }) {
   const { type, editMode, resetEditMode } = usePostListContext();
-  const { createPost } = usePostActions(type);
+  const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
     return null;
   }
   const duplicatePostCallback = (inputValue) => {
-    createPost.mutateAsync({
-      title: inputValue,
-      status: "draft"
+    duplicatePost.mutateAsync({
+      id: post.id,
+      title: inputValue
     }, {
       onSuccess: () => {
         resetEditMode();
       }
     });
   };
-  return /* @__PURE__ */ React11.createElement(EditModeTemplate, { postTitle: `${editMode.details.title} ${(0, import_i18n6.__)("copy", "elementor")}`, isLoading: createPost.isLoading, callback: duplicatePostCallback });
+  return /* @__PURE__ */ React11.createElement(EditModeTemplate, { postTitle: `${editMode.details.title} ${(0, import_i18n6.__)("copy", "elementor")}`, isLoading: duplicatePost.isLoading, callback: duplicatePostCallback });
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
@@ -724,7 +740,7 @@ function View({ post }) {
       title,
       icon: import_icons10.EyeIcon,
       onClick: () => {
-        console.log(post);
+        window.open(post.link, "_blank");
       }
     }
   );
@@ -817,8 +833,8 @@ function PostListItem2({ post }) {
   if ("create" === editMode.mode && !post) {
     return /* @__PURE__ */ React21.createElement(ListItemCreate, null);
   }
-  if ("duplicate" === editMode.mode && !post) {
-    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, null);
+  if ("duplicate" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
+    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, { post });
   }
   if (!post) {
     return null;
@@ -891,7 +907,7 @@ var {
   component: shell_default
 });
 
-// src/hooks/useToggleButtonProps.ts
+// src/hooks/use-toggle-button-props.ts
 function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();

package/dist/index.mjs

@@ -231,7 +231,7 @@ function RecentlyEdited() {
 // src/init.ts
 import { injectIntoPageIndication, toolsMenu } from "@elementor/editor-app-bar";
 
-// src/hooks/useToggleButtonProps.ts
+// src/hooks/use-toggle-button-props.ts
 import { __ as __14 } from "@wordpress/i18n";
 import { PagesIcon } from "@elementor/icons";
 
@@ -300,6 +300,17 @@ var deleteRequest = (postTypeSlug, postId) => {
     method: "DELETE"
   });
 };
+var duplicateRequest = (originalPost) => {
+  const path = `/elementor/v1/site-navigation/duplicate-post`;
+  return apiFetch3({
+    path,
+    method: "POST",
+    data: {
+      post_id: originalPost.id,
+      title: originalPost.title
+    }
+  });
+};
 
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
@@ -405,10 +416,15 @@ function usePostActions(postTypeSlug) {
     (postId) => deleteRequest(postTypeSlug, postId),
     { onSuccess }
   );
+  const duplicatePost = useMutation(
+    (originalPost) => duplicateRequest(originalPost),
+    { onSuccess }
+  );
   return {
     createPost,
     updatePost,
-    deletePost
+    deletePost,
+    duplicatePost
   };
 }
 function useInvalidatePosts(postTypeSlug) {
@@ -539,23 +555,23 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 import * as React11 from "react";
 import { __ as __6 } from "@wordpress/i18n";
-function ListItemDuplicate() {
+function ListItemDuplicate({ post }) {
   const { type, editMode, resetEditMode } = usePostListContext();
-  const { createPost } = usePostActions(type);
+  const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
     return null;
   }
   const duplicatePostCallback = (inputValue) => {
-    createPost.mutateAsync({
-      title: inputValue,
-      status: "draft"
+    duplicatePost.mutateAsync({
+      id: post.id,
+      title: inputValue
     }, {
       onSuccess: () => {
         resetEditMode();
       }
     });
   };
-  return /* @__PURE__ */ React11.createElement(EditModeTemplate, { postTitle: `${editMode.details.title} ${__6("copy", "elementor")}`, isLoading: createPost.isLoading, callback: duplicatePostCallback });
+  return /* @__PURE__ */ React11.createElement(EditModeTemplate, { postTitle: `${editMode.details.title} ${__6("copy", "elementor")}`, isLoading: duplicatePost.isLoading, callback: duplicatePostCallback });
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
@@ -724,7 +740,7 @@ function View({ post }) {
       title,
       icon: EyeIcon,
       onClick: () => {
-        console.log(post);
+        window.open(post.link, "_blank");
       }
     }
   );
@@ -817,8 +833,8 @@ function PostListItem2({ post }) {
   if ("create" === editMode.mode && !post) {
     return /* @__PURE__ */ React21.createElement(ListItemCreate, null);
   }
-  if ("duplicate" === editMode.mode && !post) {
-    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, null);
+  if ("duplicate" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
+    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, { post });
   }
   if (!post) {
     return null;
@@ -891,7 +907,7 @@ var {
   component: shell_default
 });
 
-// src/hooks/useToggleButtonProps.ts
+// src/hooks/use-toggle-button-props.ts
 function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.12.0",
+	"version": "0.14.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -49,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "e8add4d4645e1c8f62a11ddac8d26d50341b6ed2"
+	"gitHead": "025f7ec0942da99205377c41e713afe1e8f7898d"
 }

package/src/api/post.ts

@@ -70,3 +70,16 @@ export const deleteRequest = ( postTypeSlug: Slug, postId: number ) => {
 		method: 'DELETE',
 	} );
 };
+
+export const duplicateRequest = ( originalPost: UpdatePost ) => {
+	const path = `/elementor/v1/site-navigation/duplicate-post`;
+
+	return apiFetch( {
+		path,
+		method: 'POST',
+		data: {
+			post_id: originalPost.id,
+			title: originalPost.title,
+		},
+	} );
+};

package/src/components/panel/actions-menu/actions/__tests__/view.test.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import View from '../view';
+import { Post } from '../../../../../types';
+
+describe( '@elementor/editor-site-navigation - View', () => {
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should open page in a different tab', () => {
+		// Arrange.
+		const spy = jest.spyOn( window, 'open' );
+		spy.mockImplementation( () => null );
+		const page: Post = {
+			id: 1,
+			title: { rendered: 'Page Title' },
+			link: 'mocklink',
+			status: 'publish',
+			type: 'page',
+		};
+
+		// Act.
+		render( <View post={ page } /> );
+		const button = screen.getByRole( 'button' );
+
+		act( () => {
+			// Open menu
+			button.click();
+		} );
+
+		// Assert.
+		expect( spy ).toHaveBeenCalledTimes( 1 );
+		expect( spy ).toHaveBeenCalledWith( 'mocklink', '_blank' );
+	} );
+} );

package/src/components/panel/actions-menu/actions/view.tsx

@@ -17,8 +17,7 @@ export default function View( { post }: { post: Post } ) {
 			title={ title }
 			icon={ EyeIcon }
 			onClick={ () => {
-				// eslint-disable-next-line no-console
-				console.log( post );
+				window.open( post.link, '_blank' );
 			} }
 		/>
 	);

package/src/components/panel/posts-list/list-items/list-item-duplicate.tsx

@@ -3,19 +3,24 @@ import { __ } from '@wordpress/i18n';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import { usePostActions } from '../../../../hooks/use-posts-actions';
 import EditModeTemplate from './edit-mode-template';
+import { Post } from '../../../../types';
 
-export default function ListItemDuplicate() {
+type Props = {
+	post: Post,
+}
+
+export default function ListItemDuplicate( { post }: Props ) {
 	const { type, editMode, resetEditMode } = usePostListContext();
-	const { createPost } = usePostActions( type );
+	const { duplicatePost } = usePostActions( type );
 
 	if ( 'duplicate' !== editMode.mode ) {
 		return null;
 	}
 
 	const duplicatePostCallback = ( inputValue: string ) => {
-		createPost.mutateAsync( {
+		duplicatePost.mutateAsync( {
+			id: post.id,
 			title: inputValue,
-			status: 'draft',
 		}, {
 			onSuccess: () => {
 				resetEditMode();
@@ -24,6 +29,6 @@ export default function ListItemDuplicate() {
 	};
 
 	return (
-		<EditModeTemplate postTitle={ `${ editMode.details.title } ${ __( 'copy', 'elementor' ) }` } isLoading={ createPost.isLoading } callback={ duplicatePostCallback } />
+		<EditModeTemplate postTitle={ `${ editMode.details.title } ${ __( 'copy', 'elementor' ) }` } isLoading={ duplicatePost.isLoading } callback={ duplicatePostCallback } />
 	);
 }

package/src/components/panel/posts-list/post-list-item.tsx

@@ -17,8 +17,8 @@ export default function PostListItem( { post }: { post?: Post } ) {
 		return <ListItemCreate />;
 	}
 
-	if ( 'duplicate' === editMode.mode && ! post ) {
-		return <ListItemDuplicate />;
+	if ( 'duplicate' === editMode.mode && post?.id && post?.id === editMode.details.postId ) {
+		return <ListItemDuplicate post={ post } />;
 	}
 
 	if ( ! post ) {

package/src/hooks/use-posts-actions.ts

@@ -1,5 +1,5 @@
 import { useQueryClient, useMutation } from '@elementor/query';
-import { createRequest, deleteRequest, updateRequest, NewPost, Slug, UpdatePost } from '../api/post';
+import { createRequest, deleteRequest, updateRequest, duplicateRequest, NewPost, Slug, UpdatePost } from '../api/post';
 import { postsQueryKey } from './use-posts';
 
 export function usePostActions( postTypeSlug: Slug ) {
@@ -22,10 +22,16 @@ export function usePostActions( postTypeSlug: Slug ) {
 		{ onSuccess }
 	);
 
+	const duplicatePost = useMutation(
+		( originalPost: UpdatePost ) => duplicateRequest( originalPost ),
+		{ onSuccess }
+	);
+
 	return {
 		createPost,
 		updatePost,
 		deletePost,
+		duplicatePost,
 	};
 }
 

package/src/init.ts

@@ -1,6 +1,6 @@
 import RecentlyEdited from './components/top-bar/recently-edited';
 import { injectIntoPageIndication, toolsMenu } from '@elementor/editor-app-bar';
-import { useToggleButtonProps } from './hooks/useToggleButtonProps';
+import { useToggleButtonProps } from './hooks/use-toggle-button-props';
 import { registerPanel } from '@elementor/editor-panels';
 import { panel } from './components/panel/panel';
 import { env } from './env';

package/src/types.ts

@@ -7,7 +7,7 @@ export type Post = {
 	title: {
 		rendered: string;
 	}
-}
+};
 
 export type PostType = {
 	name: string;