@elementor/editor-site-navigation 0.10.3 → 0.12.0

package/package.json

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

package/src/api/post.ts

@@ -1,5 +1,6 @@
 import apiFetch from '@wordpress/api-fetch';
 import { Post } from '../types';
+import { __ } from '@wordpress/i18n';
 
 export type NewPost = {
 	title: string,
@@ -13,18 +14,25 @@ export type UpdatePost = {
 
 export type Slug = keyof typeof postTypesMap;
 
-const postTypesMap = {
-	page: 'pages',
+export const postTypesMap = {
+	page: {
+		labels: {
+			singular_name: __( 'Page', 'elementor' ),
+			plural_name: __( 'Pages', 'elementor' ),
+		},
+		rest_base: 'pages',
+	},
 };
 
 export const getRequest = ( postTypeSlug: Slug ) => {
-	const baseUri = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+	const baseUri = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
 	const keys: Array<keyof Post> = [ 'id', 'type', 'title', 'link', 'status' ];
 
 	const queryParams = new URLSearchParams( {
 		status: 'any',
 		per_page: '-1',
+		order: 'asc',
 		_fields: keys.join( ',' ),
 	} );
 
@@ -34,7 +42,7 @@ export const getRequest = ( postTypeSlug: Slug ) => {
 };
 
 export const createRequest = ( postTypeSlug: Slug, newPost: NewPost ) => {
-	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
 	return apiFetch( {
 		path,
@@ -44,7 +52,7 @@ export const createRequest = ( postTypeSlug: Slug, newPost: NewPost ) => {
 };
 
 export const updateRequest = ( postTypeSlug: Slug, updatedPost: UpdatePost ) => {
-	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 	const { id, ...data } = updatedPost;
 
 	return apiFetch( {
@@ -55,7 +63,7 @@ export const updateRequest = ( postTypeSlug: Slug, updatedPost: UpdatePost ) =>
 };
 
 export const deleteRequest = ( postTypeSlug: Slug, postId: number ) => {
-	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ] }`;
+	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
 	return apiFetch( {
 		path: `${ path }/${ postId }`,

package/src/components/panel/actions-menu/action-list-item.tsx

@@ -7,7 +7,7 @@ export type Props = {
 	title: string;
 	icon: ComponentType;
 	disabled?: boolean;
-	onClick: ( page: Post ) => void;
+	onClick: ( post: Post ) => void;
 }
 
 export default function ActionListItem( { title, icon: Icon, disabled, onClick }: Props ) {

package/src/components/panel/{pages-actions → actions-menu/actions}/delete.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { TrashIcon } from '@elementor/icons';
-import { Post } from '../../../types';
+import { Post } from '../../../../types';
 import { useActiveDocument } from '@elementor/editor-documents';
 import { __ } from '@wordpress/i18n';
-import ActionMenuItem from '../actions-menu/action-menu-item';
+import ActionMenuItem from '../action-menu-item';
 
-export default function Delete( { page }: { page: Post } ) {
+export default function Delete( { post }: { post: Post } ) {
 	const activeDocument = useActiveDocument();
 
-	const isActive = activeDocument?.id === page.id;
+	const isActive = activeDocument?.id === post.id;
 
 	return (
 		<ActionMenuItem
 			title={ __( 'Delete', 'elementor' ) }
 			icon={ TrashIcon }
-			disabled={ page.isHome || isActive }
+			disabled={ post.isHome || isActive }
 			onClick={ () => null }
 		/>
 	);

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PopupState } from '@elementor/ui';
+import { CopyIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../action-menu-item';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+import { Post } from '../../../../types';
+
+export default function Duplicate( { post, popupState }: { post: Post, popupState: PopupState } ) {
+	const { setEditMode } = usePostListContext();
+
+	return (
+		<ActionMenuItem
+			title={ __( 'Duplicate', 'elementor' ) }
+			icon={ CopyIcon }
+			onClick={ () => {
+				popupState.close();
+
+				setEditMode( {
+					mode: 'duplicate',
+					details: {
+						postId: post.id,
+						title: post.title.rendered,
+					},
+				} );
+			} }
+		/>
+	);
+}

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { EraseIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../action-menu-item';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+import { Post } from '../../../../types';
+
+export default function Rename( { post }: { post: Post } ) {
+	const { setEditMode } = usePostListContext();
+
+	return (
+		<ActionMenuItem
+			title={ __( 'Rename', 'elementor' ) }
+			icon={ EraseIcon }
+			onClick={ () => {
+				setEditMode( {
+					mode: 'rename',
+					details: {
+						postId: post.id,
+					},
+				} );
+			} }
+		/>
+	);
+}

package/src/components/panel/{pages-actions → actions-menu/actions}/set-home.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Post } from '../../../types';
+import { Post } from '../../../../types';
 import { HomeIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
-import ActionMenuItem from '../actions-menu/action-menu-item';
+import ActionMenuItem from '../action-menu-item';
 
-export default function SetHome( { page }: { page: Post } ) {
+export default function SetHome( { post }: { post: Post } ) {
 	return (
 		<ActionMenuItem
 			title={ __( 'Set as homepage', 'elementor' ) }
 			icon={ HomeIcon }
-			disabled={ !! page.isHome }
+			disabled={ !! post.isHome }
 			onClick={ () => null }
 		/>
 	);

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { EyeIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../action-menu-item';
+import { Post } from '../../../../types';
+import { postTypesMap } from '../../../../api/post';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+
+export default function View( { post }: { post: Post } ) {
+	const { type } = usePostListContext();
+
+	// translators: %s: Post type (e.g. Page, Post, etc.)
+	const title = __( 'View %s', 'elementor' ).replace( '%s', postTypesMap[ type ].labels.singular_name );
+
+	return (
+		<ActionMenuItem
+			title={ title }
+			icon={ EyeIcon }
+			onClick={ () => {
+				// eslint-disable-next-line no-console
+				console.log( post );
+			} }
+		/>
+	);
+}

package/src/components/panel/add-new-button.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Button } from '@elementor/ui';
+import { PlusIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { usePostListContext } from '../../contexts/post-list-context';
+
+export default function AddNewButton() {
+	const { setEditMode } = usePostListContext();
+
+	return (
+		<Button
+			size={ 'small' }
+			sx={ { mt: 4, mb: 4, mr: 5 } }
+			startIcon={ <PlusIcon /> }
+			onClick={ () => {
+				setEditMode( { mode: 'create', details: {} } );
+			} }
+		>
+			{ __( 'Add New', 'elementor' ) }
+		</Button>
+	);
+}

package/src/components/panel/{pages-list/__tests__/page-list-item.test.tsx → posts-list/__tests__/post-list-item.test.tsx}

@@ -1,22 +1,23 @@
 import * as React from 'react';
-import { act, render } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import { Post } from '../../../../types';
-import PageListItem from '../page-list-item';
+import PostListItem from '../post-list-item';
 import { useNavigateToDocument } from '@elementor/editor-documents';
+import { renderWithQuery } from 'test-utils';
 
 jest.mock( '@elementor/editor-documents', () => ( {
 	useActiveDocument: jest.fn(),
 	useNavigateToDocument: jest.fn(),
 } ) );
 
-describe( '@elementor/editor-site-navigation - PageListItem', () => {
+describe( '@elementor/editor-site-navigation - PostListItem', () => {
 	afterAll( () => {
 		jest.clearAllMocks();
 	} );
 
 	it( 'should render a published page', () => {
 		// Arrange.
-		const page: Post = {
+		const post: Post = {
 			id: 1,
 			title: {
 				rendered: 'Test Page',
@@ -27,19 +28,19 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 		};
 
 		// Act.
-		const { getByText, queryByText } = render( <PageListItem page={ page } /> );
+		renderWithQuery( <PostListItem post={ post } /> );
 
 		// Assert.
-		const label = getByText( 'Test Page' );
-		const publishedLabel = queryByText( 'publish', { exact: false } );
+		const label = screen.getByText( 'Test Page' );
+		const publishedLabel = screen.queryByText( 'publish', { exact: false } );
 
 		expect( label ).toBeInTheDocument();
-		expect( publishedLabel ).toBeNull();
+		expect( publishedLabel ).not.toBeInTheDocument();
 	} );
 
 	it( 'should show the page status for non-published pages', () => {
 		// Arrange.
-		const page: Post = {
+		const post: Post = {
 			id: 1,
 			title: {
 				rendered: 'Test Page',
@@ -50,16 +51,16 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 		};
 
 		// Act.
-		const { getByText } = render( <PageListItem page={ page } /> );
+		renderWithQuery( <PostListItem post={ post } /> );
 
 		// Assert.
-		const label = getByText( 'draft', { exact: false } );
+		const label = screen.getByText( 'draft', { exact: false } );
 		expect( label ).toBeInTheDocument();
 	} );
 
 	it( 'should render actions menu', () => {
 		// Arrange.
-		const page: Post = {
+		const post: Post = {
 			id: 1,
 			title: {
 				rendered: 'Test Page',
@@ -72,8 +73,9 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 		const actions = [ 'View Page', 'Rename', 'Duplicate', 'Delete', 'Set as homepage' ];
 
 		// Act.
-		const { getByText, getAllByRole } = render( <PageListItem page={ page } /> );
-		const buttons = getAllByRole( 'button' );
+		renderWithQuery( <PostListItem post={ post } /> );
+
+		const buttons = screen.getAllByRole( 'button' );
 		// Button to open menu
 		const button = buttons[ 1 ];
 
@@ -84,7 +86,7 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 
 		// Assert.
 		actions.forEach( ( action ) => {
-			const label = getByText( action );
+			const label = screen.getByText( action );
 			expect( label ).toBeInTheDocument();
 		} );
 	} );
@@ -96,7 +98,7 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 
 		const id = 10;
 
-		const page: Post = {
+		const post: Post = {
 			id,
 			title: {
 				rendered: 'Test Page',
@@ -107,8 +109,9 @@ describe( '@elementor/editor-site-navigation - PageListItem', () => {
 		};
 
 		// Act.
-		const { getAllByRole } = render( <PageListItem page={ page } /> );
-		const buttons = getAllByRole( 'button' );
+		renderWithQuery( <PostListItem post={ post } /> );
+
+		const buttons = screen.getAllByRole( 'button' );
 		const button = buttons[ 0 ];
 
 		act( () => {

package/src/components/panel/{pages-list/__tests__/pages-collapsible-list.test.tsx → posts-list/__tests__/posts-collapsible-list.test.tsx}

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import PagesCollapsibleList from '../pages-collapsible-list';
+import { screen } from '@testing-library/react';
+import PostsCollapsibleList from '../posts-collapsible-list';
+import { renderWithQuery } from 'test-utils';
 
 jest.mock( '../../../../hooks/use-posts', () => ( {
 	__esModule: true,
@@ -22,36 +23,32 @@ jest.mock( '@elementor/editor-documents', () => ( {
 	useNavigateToDocument: jest.fn(),
 } ) );
 
-describe( '@elementor/editor-site-navigation - PagesCollapsibleList', () => {
+describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );
 
 	it( 'should render closed list', () => {
 		// Act.
-		const { getByText, queryByText } = render(
-			<PagesCollapsibleList isOpenByDefault={ false } />,
-		);
+		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ false } /> );
 
 		// Assert.
-		const label = getByText( `Pages (3)` );
+		const label = screen.getByText( `Pages (3)` );
 		expect( label ).toBeInTheDocument();
 
-		const postInList = queryByText( 'Services' );
-		expect( postInList ).toBeNull();
+		const postInList = screen.queryByText( 'Services' );
+		expect( postInList ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render open list', () => {
 		// Act.
-		const { getByText } = render(
-			<PagesCollapsibleList isOpenByDefault={ true } />,
-		);
+		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ true } /> );
 
 		// Assert.
-		const label = getByText( `Pages (3)` );
+		const label = screen.getByText( `Pages (3)` );
 		expect( label ).toBeInTheDocument();
 
-		const postInList = getByText( 'Services' );
+		const postInList = screen.getByText( 'Services' );
 		expect( postInList ).toBeInTheDocument();
 	} );
 } );

package/src/components/panel/{pages-list → posts-list}/collapsible-list.tsx

@@ -4,13 +4,13 @@ import { Collapse, IconButton, List, ListItem, ListItemIcon, ListItemText, style
 import { ChevronDownIcon } from '@elementor/icons';
 
 type Props = {
-	label: string
-	Icon: ComponentType;
-	isOpenByDefault?: boolean;
+	label: string,
+	Icon: ComponentType,
+	isOpenByDefault?: boolean,
 }
 
 interface RotateIconProps extends SvgIconProps {
-	isOpen: boolean;
+	isOpen: boolean,
 }
 
 // TODO 21/06/2023 : Should replace this with future Rotate component that will be implemented in elementor-ui

package/src/components/panel/posts-list/list-items/edit-mode-template.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { useState, useRef, FormEvent, MutableRefObject, FocusEvent } from 'react';
+import {
+	Box,
+	ListItem,
+	ListItemIcon,
+	TextField,
+	IconButton,
+	CircularProgress,
+} from '@elementor/ui';
+import { XIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+
+type Props = {
+	postTitle: string,
+	isLoading: boolean,
+	callback: ( inputValue: string ) => void,
+}
+
+export default function EditModeTemplate( { postTitle, isLoading, callback }: Props ) {
+	const inputRef = useRef<HTMLInputElement>();
+	const [ inputError, setInputError ] = useState( '' );
+	const closeButton = useRef<HTMLButtonElement>();
+
+	const onBlur = ( e: FocusEvent ) => {
+		if ( closeButton.current === e.relatedTarget ) {
+			return;
+		}
+
+		runCallback();
+	};
+
+	const onFormSubmit = ( e: FormEvent<HTMLFormElement> ) => {
+		e.preventDefault();
+		runCallback();
+	};
+
+	const validateInput = () => {
+		let isValid = true;
+
+		if ( inputRef.current?.value === '' ) {
+			isValid = false;
+			setInputError( __( 'Name is required', 'elementor' ) );
+		}
+
+		return isValid;
+	};
+
+	const runCallback = () => {
+		if ( ! validateInput() ) {
+			return;
+		}
+
+		callback( inputRef.current?.value || '' );
+	};
+
+	return (
+		<ListItem
+			selected={ true }
+			disablePadding
+			secondaryAction={ <CloseButton isLoading={ isLoading } closeButton={ closeButton } /> }
+		>
+			<ListItemIcon />
+			<Box component="form" onSubmit={ onFormSubmit }>
+				<TextField
+					autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+					ref={ inputRef }
+					defaultValue={ postTitle }
+					disabled={ isLoading }
+					error={ !! inputError }
+					onBlur={ onBlur }
+					variant="outlined"
+					size="small"
+				/>
+			</Box>
+		</ListItem>
+	);
+}
+
+type CloseButtonProps = {
+	isLoading: boolean,
+	closeButton: MutableRefObject<HTMLButtonElement | undefined>,
+}
+
+function CloseButton( { isLoading, closeButton }: CloseButtonProps ) {
+	const { resetEditMode } = usePostListContext();
+
+	return (
+		<IconButton
+			size="small"
+			onClick={ resetEditMode }
+			ref={ closeButton }
+			disabled={ isLoading }
+		>
+			{
+				isLoading
+					? <CircularProgress />
+					: <XIcon fontSize="small" />
+			}
+		</IconButton>
+	);
+}

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+import { usePostActions } from '../../../../hooks/use-posts-actions';
+import EditModeTemplate from './edit-mode-template';
+
+export default function ListItemCreate() {
+	const { type, resetEditMode } = usePostListContext();
+	const { createPost } = usePostActions( type );
+
+	const createPostCallback = ( inputValue: string ) => {
+		createPost.mutateAsync( {
+			title: inputValue,
+			status: 'draft',
+		}, {
+			onSuccess: () => {
+				resetEditMode();
+			},
+		} );
+	};
+
+	return (
+		<EditModeTemplate postTitle={ __( 'New Page', 'elementor' ) } isLoading={ createPost.isLoading } callback={ createPostCallback } />
+	);
+}

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

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

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+import { usePostActions } from '../../../../hooks/use-posts-actions';
+import { Post } from '../../../../types';
+import EditModeTemplate from './edit-mode-template';
+
+type Props = {
+	post: Post,
+}
+
+export default function ListItemRename( { post }: Props ) {
+	const { type, resetEditMode } = usePostListContext();
+	const { updatePost } = usePostActions( type );
+
+	const renamePostCallback = ( inputValue: string ) => {
+		if ( inputValue === post.title.rendered ) {
+			resetEditMode();
+		}
+
+		updatePost.mutateAsync( {
+			id: post.id,
+			title: inputValue,
+		}, {
+			onSuccess: () => {
+				resetEditMode();
+			},
+		} );
+	};
+
+	return (
+		<EditModeTemplate postTitle={ post.title.rendered } isLoading={ updatePost.isLoading } callback={ renamePostCallback } />
+	);
+}