@elementor/editor-site-navigation 0.19.11 → 0.20.0

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

@@ -36,6 +36,10 @@ describe( '@elementor/editor-site-navigation - PostListItem', () => {
 			status: 'publish',
 			type: 'page',
 			link: 'https://example.local/test-page',
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.
@@ -59,6 +63,10 @@ describe( '@elementor/editor-site-navigation - PostListItem', () => {
 			status: 'draft',
 			type: 'page',
 			link: 'https://example.local/test-page',
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.
@@ -79,6 +87,10 @@ describe( '@elementor/editor-site-navigation - PostListItem', () => {
 			status: 'publish',
 			type: 'page',
 			link: 'https://example.local/test-Page',
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		const actions = [ 'View Page', 'Rename', 'Duplicate', 'Delete', 'Set as homepage' ];
@@ -117,6 +129,10 @@ describe( '@elementor/editor-site-navigation - PostListItem', () => {
 			status: 'publish',
 			type: 'page',
 			link: 'https://example.local/test-page',
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		// Act.
@@ -144,6 +160,10 @@ describe( '@elementor/editor-site-navigation - PostListItem', () => {
 			status: 'publish',
 			type: 'page',
 			link: 'https://example.local/test-page',
+			user_can: {
+				edit: true,
+				delete: true,
+			},
 		};
 
 		renderWithQuery(

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

@@ -24,8 +24,8 @@ jest.mock( '../../../../hooks/use-posts', () => ( {
 	usePosts: jest.fn( () => ( {
 		isLoading: false,
 		data: [
-			{ 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' },
+			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true } },
+			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true } },
 		],
 	} ) ),
 } ) );
@@ -34,10 +34,7 @@ jest.mock( '../../../../hooks/use-homepage', () => ( {
 	__esModule: true,
 	useHomepage: jest.fn( () => ( {
 		isLoading: false,
-		data: {
-			show_on_front: 'page',
-			page_on_front: 1,
-		},
+		data: 1,
 	} ) ),
 } ) );
 
@@ -46,6 +43,15 @@ jest.mock( '@elementor/editor-documents', () => ( {
 	__useNavigateToDocument: jest.fn(),
 } ) );
 
+jest.mock( '../../../../hooks/use-user', () => (
+	{
+		default: jest.fn( () => ( { isLoading: false, data: { capabilities: {
+			edit_pages: true,
+		} } } ) ),
+		__esModule: true,
+	}
+) );
+
 describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 	beforeEach( () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( ( {

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

@@ -8,6 +8,8 @@ import {
 	ListItemButton,
 	ListItemText,
 	Menu,
+	Tooltip,
+	Typography,
 	usePopupState,
 } from '@elementor/ui';
 import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
@@ -21,6 +23,23 @@ import SetHome from '../../actions-menu/actions/set-home';
 import { Post } from '../../../../types';
 import { __ } from '@wordpress/i18n';
 
+const DisabledPostTooltip = ( { children, isDisabled }: {children: React.ReactNode, isDisabled: boolean} ) => {
+	if ( isDisabled ) {
+		const title = <Typography variant="caption">You cannot edit this page.<br />To edit it directly, contact the site owner</Typography>;
+
+		return <Tooltip
+			title={ title }
+			placement="bottom"
+			arrow={ false }
+		>
+			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
+			{ children }
+		</Tooltip>;
+	}
+
+	return <>{ children }</>;
+};
+
 export default function ListItemView( { post }: { post: Post } ) {
 	const activeDocument = useActiveDocument();
 	const navigateToDocument = useNavigateToDocument();
@@ -34,40 +53,42 @@ export default function ListItemView( { post }: { post: Post } ) {
 	const isActive = activeDocument?.id === post.id;
 	const status = isActive ? activeDocument?.status.value : post.status;
 	const title = isActive ? activeDocument?.title : post.title.rendered;
+	const isDisabled = ! post.user_can.edit;
 
 	return (
 		<>
-			<ListItem
-				disablePadding
-				secondaryAction={
-					<IconButton
-						value
-						size="small"
-						{ ...bindTrigger( popupState ) }
-					>
-						<DotsVerticalIcon fontSize="small" />
-					</IconButton>
-				}
-			>
-				<ListItemButton
-					selected={ isActive }
-					onClick={ () => {
-						if ( ! isActive ) {
-							navigateToDocument( post.id );
-						}
-					} }
-					dense
+			<DisabledPostTooltip isDisabled={ isDisabled }>
+				<ListItem
+					disablePadding
+					secondaryAction={
+						<IconButton
+							value
+							size="small"
+							{ ...bindTrigger( popupState ) }
+						>
+							<DotsVerticalIcon fontSize="small" />
+						</IconButton>
+					}
 				>
-					<ListItemText
-						disableTypography={ true }
+					<ListItemButton
+						selected={ isActive }
+						disabled={ isDisabled }
+						onClick={ () => {
+							if ( ! isActive ) {
+								navigateToDocument( post.id );
+							}
+						} }
+						dense
 					>
-						<PageTitleAndStatus title={ title } status={ status } />
-					</ListItemText>
-					{ post.isHome &&
-					<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />
-					}
-				</ListItemButton>
-			</ListItem>
+						<ListItemText disableTypography={ true }>
+							<PageTitleAndStatus title={ title } status={ status } />
+						</ListItemText>
+						{ post.isHome &&
+						<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />
+						}
+					</ListItemButton>
+				</ListItem>
+			</DisabledPostTooltip>
 			<Menu
 				PaperProps={ { sx: { mt: 2, width: 200 } } }
 				MenuListProps={ { dense: true } }

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

@@ -17,7 +17,7 @@ type Props = {
 export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
 	const { type, editMode } = usePostListContext();
 	const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts( type );
-	const { data: homepageSettings } = useHomepage();
+	const { data: homepageId } = useHomepage();
 
 	if ( postsError ) {
 		return <ErrorState />;
@@ -45,9 +45,6 @@ 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;
-
 	const mappedPosts = posts.map( ( post ) => {
 		if ( post.id === homepageId ) {
 			return { ...post, isHome: true };

package/src/components/top-bar/__tests__/add-new-page.test.tsx

@@ -6,6 +6,7 @@ import { createMockDocument } from 'test-utils';
 import useRecentPosts from '../../../hooks/use-recent-posts';
 import useCreatePage from '../../../hooks/use-create-page';
 import { RecentPost } from '../../../types';
+import useUser from '../../../hooks/use-user';
 
 jest.mock( '@elementor/editor-documents', () => ( {
 	__useActiveDocument: jest.fn(),
@@ -23,11 +24,24 @@ jest.mock( '../../../hooks/use-create-page', () => ( {
 	default: jest.fn( () => ( { create: jest.fn(), isLoading: false } ) ),
 } ) );
 
+jest.mock( '../../../hooks/use-user', () => (
+	{
+		default: jest.fn( () => ( { isLoading: false, data: { capabilities: {
+			edit_pages: true,
+		} } } ) ),
+		__esModule: true,
+	}
+) );
+
 describe( '@elementor/recently-edited - Top bar add new page', () => {
 	beforeEach( () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument() );
 	} );
 
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
 	it( 'should render add new page button', () => {
 		// Arrange.
 		const isLoading = false;
@@ -73,4 +87,26 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 
 		expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
 	} );
+
+	it( 'should be disabled if user does not have edit_posts capability', () => {
+		// Arrange.
+		jest.mocked( useUser ).mockReturnValue( { isLoading: false, data: { capabilities: {
+			edit_pages: false,
+		} } } as unknown as ReturnType<typeof useUser> );
+
+		const isLoading = false;
+		const recentPosts: RecentPost[] = [];
+
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
+
+		render( <RecentlyEdited /> );
+
+		// Act.
+		const buttons = screen.getAllByRole( 'button' );
+		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
+
+		// Assert.
+		const addNewPage = screen.getByRole( 'menuitem', { name: /Add new page/i }, );
+		expect( addNewPage ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
 } );

package/src/components/top-bar/__tests__/recently-edited.test.tsx

@@ -19,6 +19,15 @@ jest.mock( '../../../hooks/use-recent-posts', () => (
 	}
 ) );
 
+jest.mock( '../../../hooks/use-user', () => (
+	{
+		default: jest.fn( () => ( { isLoading: false, data: { capabilities: {
+			edit_posts: true,
+		} } } ) ),
+		__esModule: true,
+	}
+) );
+
 describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 	it( 'should show the title of the active document without its status when the document is published', async () => {
 		// Arrange.
@@ -155,6 +164,9 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 				label: 'Post',
 			},
 			date_modified: 123,
+			user_can: {
+				edit: true,
+			},
 		} ];
 
 		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
@@ -198,6 +210,9 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 					label: 'Post',
 				},
 				date_modified: 123,
+				user_can: {
+					edit: true,
+				},
 			},
 			{
 				id: 3,
@@ -209,6 +224,9 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 					label: 'Post',
 				},
 				date_modified: 123,
+				user_can: {
+					edit: true,
+				},
 			},
 			{
 				id: 2,
@@ -220,6 +238,9 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 					label: 'Post 2',
 				},
 				date_modified: 1234,
+				user_can: {
+					edit: true,
+				},
 			},
 		];
 
@@ -241,6 +262,11 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should navigate to document on click', () => {
 		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Test',
+		} ) );
+
 		const navigateToDocument = jest.fn();
 
 		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
@@ -257,6 +283,9 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 					label: 'Post',
 				},
 				date_modified: 123,
+				user_can: {
+					edit: true,
+				},
 			} ],
 		} as ReturnType<typeof useRecentPosts> );
 
@@ -272,4 +301,43 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
 		expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
 	} );
+
+	it( 'should be disabled when user cant edit post', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Test',
+		} ) );
+
+		const navigateToDocument = jest.fn();
+
+		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
+
+		jest.mocked( useRecentPosts ).mockReturnValue( {
+			isLoading: false,
+			data: [ {
+				id: 123,
+				title: 'Test post',
+				edit_url: 'some_url',
+				type: {
+					post_type: 'post',
+					doc_type: 'wp-post',
+					label: 'Post',
+				},
+				date_modified: 123,
+				user_can: {
+					edit: false,
+				},
+			} ],
+		} as ReturnType<typeof useRecentPosts> );
+
+		render( <RecentlyEdited /> );
+
+		// Open the posts list.
+		fireEvent.click( screen.getByRole( 'button' ) );
+
+		// Assert.
+		const listItem = screen.getAllByRole( 'menuitem' )[ 0 ];
+		expect( listItem ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
 } );

package/src/components/top-bar/create-post-list-item.tsx

@@ -4,6 +4,7 @@ import useCreatePage from '../../hooks/use-create-page';
 import { PlusIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 import { __useNavigateToDocument as useNavigateToDocument } from '@elementor/editor-documents';
+import useUser from '../../hooks/use-user';
 
 type Props = MenuItemProps & {
 	closePopup: () => void;
@@ -12,12 +13,13 @@ type Props = MenuItemProps & {
 export function CreatePostListItem( { closePopup, ...props }: Props ) {
 	const { create, isLoading } = useCreatePage();
 	const navigateToDocument = useNavigateToDocument();
+	const { data: user } = useUser();
 
 	return (
 		<MenuItem
+			disabled={ isLoading || ! user?.capabilities?.edit_pages }
 			onClick={ async () => {
 				const { id } = await create();
-
 				closePopup();
 				await navigateToDocument( id );
 			} }

package/src/components/top-bar/post-list-item.tsx

@@ -16,6 +16,7 @@ export function PostListItem( { post, closePopup, ...props }: Props ) {
 
 	return (
 		<MenuItem
+			disabled={ ! post.user_can.edit }
 			onClick={ async () => {
 				closePopup();
 				await navigateToDocument( post.id );

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

@@ -26,7 +26,7 @@ describe( '@elementor/site-settings/use-homepage', () => {
 		const { component } = renderHookWithQuery( () => useHomepage() );
 
 		// Assert.
-		const expectedPath = `/wp/v2/settings?_fields=${ encodeURIComponent( 'show_on_front,page_on_front' ) }`;
+		const expectedPath = '/elementor/v1/site-navigation/homepage';
 
 		expect( apiFetch ).toHaveBeenCalledWith( {
 			path: expectedPath,

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

@@ -27,7 +27,7 @@ describe( '@elementor/site-settings/use-posts', () => {
 		const { component } = renderHookWithQuery( () => usePosts( 'page' ) );
 
 		// Assert.
-		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&order=asc&_fields=${ encodeURIComponent( 'id,type,title,link,status' ) }`;
+		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&order=asc&_fields=${ encodeURIComponent( 'id,type,title,link,status,user_can' ) }`;
 
 		expect( apiFetch ).toHaveBeenCalledWith( {
 			path: expectedPath,

package/src/hooks/use-user.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@elementor/query';
+import { getUser } from '../api/user';
+
+export const userQueryKey = () => [ 'site-navigation', 'user' ];
+
+export default function useUser( ) {
+	return useQuery( {
+		queryKey: userQueryKey(),
+		queryFn: () => getUser(),
+	} );
+}

package/src/types.ts

@@ -6,7 +6,11 @@ export type Post = {
 	type: string;
 	title: {
 		rendered: string;
-	}
+	};
+	user_can: {
+		edit: boolean;
+		delete: boolean;
+	};
 };
 
 export type RecentPost = {
@@ -19,4 +23,7 @@ export type RecentPost = {
 		label: string,
 	},
 	date_modified: number,
+	user_can: {
+		edit: boolean,
+	},
 }