@elementor/editor-site-navigation 0.15.0 → 0.17.0

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

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import SetHome from '../set-home';
+import * as React from 'react';
+import { Post } from '../../../../../types';
+
+const mockMutateAsync = jest.fn();
+jest.mock( '../../../../../hooks/use-homepage-actions', () => ( {
+	__esModule: true,
+	useHomepageActions: jest.fn( () => ( {
+		updateSettingsMutation: {
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		},
+	} ) ),
+} ) );
+
+describe( '@elementor/editor-site-navigation - SetHome', () => {
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render Set as homepage', () => {
+		// Arrange.
+		const post: Post = {
+			id: 1,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'publish',
+			type: 'page',
+			link: 'https://example.local/test-page',
+			isHome: false,
+		};
+
+		// Act.
+		render( <SetHome post={ post } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'button' );
+		expect( button ).not.toHaveAttribute( 'aria-disabled' );
+
+		fireEvent.click( button );
+
+		expect( mockMutateAsync ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should render Set as homepage disabled when the page status is draft', () => {
+		// Arrange.
+		const post: Post = {
+			id: 1,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'draft',
+			type: 'page',
+			link: 'https://example.local/test-page',
+			isHome: false,
+		};
+
+		// Act.
+		render( <SetHome post={ post } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'button' );
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+} );

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

@@ -1,21 +1,94 @@
 import * as React from 'react';
 import { TrashIcon } from '@elementor/icons';
 import { Post } from '../../../../types';
-import { useActiveDocument } from '@elementor/editor-documents';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import ActionMenuItem from '../action-menu-item';
+import { usePostActions } from '../../../../hooks/use-posts-actions';
+import {
+	Button,
+	CircularProgress,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	Divider,
+} from '@elementor/ui';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+import { useState } from 'react';
+import { useActiveDocument } from '@elementor/editor-documents';
 
 export default function Delete( { post }: { post: Post } ) {
+	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 	const activeDocument = useActiveDocument();
 
-	const isActive = activeDocument?.id === post.id;
+	const isPostActive = activeDocument?.id === post.id;
+
+	return (
+		<>
+			<ActionMenuItem
+				title={ __( 'Delete', 'elementor' ) }
+				icon={ TrashIcon }
+				ListItemButtonProps={
+					{
+						disabled: post.isHome || isPostActive,
+						onClick: () => setIsDialogOpen( true ),
+						sx: { '&:hover': { color: 'error.main' } },
+					}
+				}
+			/>
+
+			{
+				isDialogOpen && (
+					<DeleteDialog post={ post } setIsDialogOpen={ setIsDialogOpen } />
+				)
+			}
+		</>
+	);
+}
+
+function DeleteDialog( { post, setIsDialogOpen }: { post: Post, setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>> } ) {
+	const { type } = usePostListContext();
+	const { deletePost } = usePostActions( type );
+
+	/* translators: %s: Post title. */
+	const dialogTitle = sprintf( __( 'Delete “%s”?', 'elementor' ), post.title.rendered );
+
+	const deletePage = async () => {
+		await deletePost.mutateAsync( post.id );
+	};
+
+	const handleCancel = () => {
+		if ( deletePost.isLoading ) {
+			return;
+		}
+
+		setIsDialogOpen( false );
+	};
 
 	return (
-		<ActionMenuItem
-			title={ __( 'Delete', 'elementor' ) }
-			icon={ TrashIcon }
-			disabled={ post.isHome || isActive }
-			onClick={ () => null }
-		/>
+		<Dialog
+			open={ true }
+			onClose={ handleCancel }
+			aria-labelledby="delete-dialog"
+		>
+			<DialogTitle>
+				{ dialogTitle }
+			</DialogTitle>
+			<Divider />
+			<DialogContent>
+				<DialogContentText>
+					{ __( 'The page and its content will be deleted forever and we won’t be able to recover them.', 'elementor' ) }
+				</DialogContentText>
+			</DialogContent>
+			<DialogActions>
+				<Button variant="contained" color="secondary" onClick={ handleCancel } disabled={ deletePost.isLoading }>
+					{ __( 'Cancel', 'elementor' ) }
+				</Button>
+				<Button variant="contained" color="error" onClick={ deletePage } disabled={ deletePost.isLoading } >
+					{ ! deletePost.isLoading ? __( 'Delete', 'elementor' ) : <CircularProgress /> }
+				</Button>
+			</DialogActions>
+		</Dialog>
 	);
 }

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

@@ -9,21 +9,27 @@ import { Post } from '../../../../types';
 export default function Duplicate( { post, popupState }: { post: Post, popupState: PopupState } ) {
 	const { setEditMode } = usePostListContext();
 
+	const onClick = () => {
+		popupState.close();
+
+		setEditMode( {
+			mode: 'duplicate',
+			details: {
+				postId: post.id,
+				title: post.title.rendered,
+			},
+		} );
+	};
+
 	return (
 		<ActionMenuItem
 			title={ __( 'Duplicate', 'elementor' ) }
 			icon={ CopyIcon }
-			onClick={ () => {
-				popupState.close();
-
-				setEditMode( {
-					mode: 'duplicate',
-					details: {
-						postId: post.id,
-						title: post.title.rendered,
-					},
-				} );
-			} }
+			ListItemButtonProps={
+				{
+					onClick,
+				}
+			}
 		/>
 	);
 }

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

@@ -12,14 +12,18 @@ export default function Rename( { post }: { post: Post } ) {
 		<ActionMenuItem
 			title={ __( 'Rename', 'elementor' ) }
 			icon={ EraseIcon }
-			onClick={ () => {
-				setEditMode( {
-					mode: 'rename',
-					details: {
-						postId: post.id,
+			ListItemButtonProps={
+				{
+					onClick: () => {
+						setEditMode( {
+							mode: 'rename',
+							details: {
+								postId: post.id,
+							},
+						} );
 					},
-				} );
-			} }
+				}
+			}
 		/>
 	);
 }

package/src/components/panel/actions-menu/actions/set-home.tsx

@@ -3,14 +3,26 @@ import { Post } from '../../../../types';
 import { HomeIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 import ActionMenuItem from '../action-menu-item';
+import { useHomepageActions } from '../../../../hooks/use-homepage-actions';
+import { CircularProgress } from '@elementor/ui';
 
 export default function SetHome( { post }: { post: Post } ) {
+	const { updateSettingsMutation } = useHomepageActions();
+
+	const handleClick = () => {
+		updateSettingsMutation.mutateAsync( { show_on_front: 'page', page_on_front: post.id } );
+	};
+
 	return (
 		<ActionMenuItem
 			title={ __( 'Set as homepage', 'elementor' ) }
-			icon={ HomeIcon }
-			disabled={ !! post.isHome }
-			onClick={ () => null }
+			icon={ ! updateSettingsMutation.isLoading ? HomeIcon : CircularProgress }
+			ListItemButtonProps={
+				{
+					disabled: !! post.isHome || post.status !== 'publish' || updateSettingsMutation.isLoading,
+					onClick: handleClick,
+				}
+			}
 		/>
 	);
 }

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

@@ -16,9 +16,11 @@ export default function View( { post }: { post: Post } ) {
 		<ActionMenuItem
 			title={ title }
 			icon={ EyeIcon }
-			onClick={ () => {
-				window.open( post.link, '_blank' );
-			} }
+			ListItemButtonProps={
+				{
+					onClick: () => window.open( post.link, '_blank' ),
+				}
+			}
 		/>
 	);
 }

package/src/components/panel/posts-list/__tests__/posts-collapsible-list.test.tsx

@@ -8,13 +8,23 @@ jest.mock( '../../../../hooks/use-posts', () => ( {
 	usePosts: jest.fn( () => ( {
 		isLoading: false,
 		data: [
-			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
-			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
-			{ id: 3, type: 'page', title: { rendered: 'Services' }, status: 'publish', link: 'www.test.demo', isHome: true },
+			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo' },
+			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo' },
 		],
 	} ) ),
 } ) );
 
+jest.mock( '../../../../hooks/use-homepage', () => ( {
+	__esModule: true,
+	useHomepage: jest.fn( () => ( {
+		isLoading: false,
+		data: {
+			show_on_front: 'page',
+			page_on_front: 1,
+		},
+	} ) ),
+} ) );
+
 jest.mock( '@elementor/editor-documents', () => ( {
 	__esModule: true,
 	useActiveDocument: jest.fn( () => ( {
@@ -33,22 +43,27 @@ describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ false } /> );
 
 		// Assert.
-		const label = screen.getByText( `Pages (3)` );
+		const label = screen.getByText( `Pages (2)` );
 		expect( label ).toBeInTheDocument();
 
-		const postInList = screen.queryByText( 'Services' );
+		const postInList = screen.queryByText( 'Home' );
 		expect( postInList ).not.toBeInTheDocument();
 	} );
 
-	it( 'should render open list', () => {
+	it( 'should render open list with home icon and page status', () => {
 		// Act.
 		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ true } /> );
 
 		// Assert.
-		const label = screen.getByText( `Pages (3)` );
-		expect( label ).toBeInTheDocument();
+		const items = screen.getAllByRole( 'listitem' );
+
+		expect( items.length ).toBe( 3 );
 
-		const postInList = screen.getByText( 'Services' );
-		expect( postInList ).toBeInTheDocument();
+		// First item is the list title.
+		expect( items[ 0 ] ).toHaveTextContent( `Pages (2)` );
+		expect( items[ 1 ] ).toHaveTextContent( 'Home' );
+		expect( items[ 1 ] ).toHaveTextContent( 'Homepage' ); // Home icon.
+		expect( items[ 2 ] ).toHaveTextContent( 'About' );
+		expect( items[ 2 ] ).toHaveTextContent( '(draft)' );
 	} );
 } );

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

@@ -20,6 +20,7 @@ import Delete from '../../actions-menu/actions/delete';
 import View from '../../actions-menu/actions/view';
 import SetHome from '../../actions-menu/actions/set-home';
 import { Post } from '../../../../types';
+import { __ } from '@wordpress/i18n';
 
 export default function ListItemView( { post }: { post: Post } ) {
 	const activeDocument = useActiveDocument();
@@ -65,7 +66,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 					</ListItemText>
 					{ post.isHome &&
 						<ListItemIcon>
-							<HomeIcon color="disabled" />
+							<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />
 						</ListItemIcon>
 					}
 				</ListItemButton>

package/src/components/panel/posts-list/posts-collapsible-list.tsx

@@ -6,6 +6,7 @@ import { usePostListContext } from '../../../contexts/post-list-context';
 import { postTypesMap } from '../../../api/post';
 import CollapsibleList from './collapsible-list';
 import PostListItem from './post-list-item';
+import { useHomepage } from '../../../hooks/use-homepage';
 
 type Props = {
 	isOpenByDefault?: boolean,
@@ -14,6 +15,7 @@ type Props = {
 export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
 	const { type, editMode } = usePostListContext();
 	const { data: posts, isLoading: postsLoading } = usePosts( type );
+	const { data: homepageSettings } = useHomepage();
 
 	if ( ! posts || postsLoading ) {
 		return (
@@ -26,6 +28,9 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 
 	const label = `${ postTypesMap[ type ].labels.plural_name } (${ posts.length.toString() })`;
 
+	const isHomepageSet = homepageSettings?.show_on_front === 'page' && !! homepageSettings?.page_on_front;
+	const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
+
 	return (
 		<List dense>
 			<CollapsibleList
@@ -33,7 +38,10 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 				Icon={ PageTypeIcon }
 				isOpenByDefault={ isOpenByDefault || false }
 			>
-				{ posts.map( ( post ) => <PostListItem key={ post.id } post={ post } /> ) }
+				{ posts.map( ( post ) => {
+					post = { ...post, isHome: post.id === homepageId };
+					return <PostListItem key={ post.id } post={ post } />;
+				} ) }
 				{
 					[ 'duplicate', 'create' ].includes( editMode.mode ) &&
 						<PostListItem />

package/src/hooks/__tests__/use-homepage-actions.test.ts

@@ -0,0 +1,43 @@
+import apiFetch from '@wordpress/api-fetch';
+import { renderHookWithQuery } from 'test-utils';
+import { useHomepageActions } from '../use-homepage-actions';
+import { settingsQueryKey } from '../use-homepage';
+
+jest.mock( '@wordpress/api-fetch' );
+
+describe( '@elementor/site-settings/use-homepage-actions', () => {
+	beforeEach( () => {
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( {} ) );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should run updateSettings from useHomepageActions hook', async () => {
+		// Arrange.
+		const { component, queryClient } = renderHookWithQuery( () => useHomepageActions() );
+		const { updateSettingsMutation } = component.result.current;
+
+		const queryKey = settingsQueryKey();
+		await queryClient.setQueryData( queryKey, {
+			show_on_front: '',
+			page_on_front: 0,
+		} );
+
+		// Act.
+		await updateSettingsMutation.mutateAsync( { show_on_front: 'page', page_on_front: 1 } );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data: {
+				show_on_front: 'page',
+				page_on_front: 1,
+			},
+		} );
+
+		expect( queryClient.getQueryState( queryKey )?.isInvalidated ).toBe( true );
+	} );
+} );

package/src/hooks/__tests__/use-homepage.test.ts

@@ -0,0 +1,42 @@
+import { waitFor } from '@testing-library/react';
+import apiFetch from '@wordpress/api-fetch';
+import { useHomepage } from '../use-homepage';
+import { renderHookWithQuery } from 'test-utils';
+
+jest.mock( '@wordpress/api-fetch' );
+
+describe( '@elementor/site-settings/use-homepage', () => {
+	beforeEach( () => {
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'useHomepage hook should return homepage settings', async () => {
+		// Arrange.
+		const settings = {
+			show_on_front: 'page',
+			page_on_front: 1,
+		};
+		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( settings ) );
+
+		// Act.
+		const { component } = renderHookWithQuery( () => useHomepage() );
+
+		// Assert.
+		const expectedPath = `/wp/v2/settings?_fields=${ encodeURIComponent( 'show_on_front,page_on_front' ) }`;
+
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: expectedPath,
+		} );
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+
+		await waitFor( () => {
+			return component.result.current.isSuccess;
+		} );
+
+		expect( component.result.current.data ).toBe( settings );
+	} );
+} );

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

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from '@elementor/query';
+import { Settings, updateSettings } from '../api/settings';
+import { settingsQueryKey } from './use-homepage';
+
+export function useHomepageActions() {
+	const invalidateSettings = useInvalidateSettings();
+
+	const onSuccess = async () => invalidateSettings( { exact: true } );
+
+	const updateSettingsMutation = useMutation(
+		( settings: Settings ) => updateSettings( settings ),
+		{ onSuccess }
+	);
+
+	return { updateSettingsMutation };
+}
+
+function useInvalidateSettings() {
+	const queryClient = useQueryClient();
+
+	return ( options = {} ) => {
+		const queryKey = settingsQueryKey();
+
+		return queryClient.invalidateQueries( queryKey, options );
+	};
+}

package/src/hooks/use-homepage.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@elementor/query';
+import { getSettings } from '../api/settings';
+
+export const settingsQueryKey = () => [ 'site-navigation', 'homepage' ];
+
+export function useHomepage( ) {
+	return useQuery( {
+		queryKey: settingsQueryKey(),
+		queryFn: () => getSettings(),
+	} );
+}

package/src/types.ts

@@ -8,13 +8,3 @@ export type Post = {
 		rendered: string;
 	}
 };
-
-export type PostType = {
-	name: string;
-	slug: string;
-	labels: Record<string, string>;
-	rest_base: string;
-	rest_namespace: string;
-}
-
-export type NonNullableQueryResponse<T> = T extends { data: infer U } ? T & { data: NonNullable<U> } : T;

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { ComponentType } from 'react';
-import { ListItemButton, ListItemIcon, ListItemText } from '@elementor/ui';
-import { Post } from '../../../types';
-
-export type Props = {
-	title: string;
-	icon: ComponentType;
-	disabled?: boolean;
-	onClick: ( post: Post ) => void;
-}
-
-export default function ActionListItem( { title, icon: Icon, disabled, onClick }: Props ) {
-	return (
-		<ListItemButton
-			disabled={ disabled }
-			onClick={ onClick }
-		>
-			<ListItemIcon>
-				<Icon />
-			</ListItemIcon>
-			<ListItemText>
-				{ title }
-			</ListItemText>
-		</ListItemButton>
-	);
-}