@elementor/editor-site-navigation 0.10.3 → 0.12.0

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

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import {
+	bindMenu,
+	bindTrigger,
+	Divider,
+	ListItem,
+	ListItemButton,
+	ListItemIcon,
+	ListItemText,
+	Menu,
+	ToggleButton,
+	usePopupState,
+} from '@elementor/ui';
+import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
+import { useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
+import PageTitleAndStatus from '../../../shared/page-title-and-status';
+import Rename from '../../actions-menu/actions/rename';
+import Duplicate from '../../actions-menu/actions/duplicate';
+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';
+
+export default function ListItemView( { post }: { post: Post } ) {
+	const activeDocument = useActiveDocument();
+	const navigateToDocument = useNavigateToDocument();
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'post-actions',
+		disableAutoFocus: true,
+	} );
+
+	const isActive = activeDocument?.id === post.id;
+
+	return (
+		<>
+			<ListItem
+				disablePadding
+				secondaryAction={
+					<ToggleButton
+						value
+						size="small"
+						selected={ popupState.isOpen }
+						{ ...bindTrigger( popupState ) }
+					>
+						<DotsVerticalIcon fontSize="small" />
+					</ToggleButton>
+				}
+			>
+				<ListItemButton
+					selected={ isActive }
+					onClick={ () => {
+						if ( ! isActive ) {
+							navigateToDocument( post.id );
+						}
+					} }
+					dense
+				>
+					<ListItemIcon />
+					<ListItemText
+						disableTypography={ true }
+					>
+						<PageTitleAndStatus page={ post } />
+					</ListItemText>
+					{ post.isHome &&
+						<ListItemIcon>
+							<HomeIcon color="disabled" />
+						</ListItemIcon>
+					}
+				</ListItemButton>
+			</ListItem>
+			<Menu
+				PaperProps={ { sx: { mt: 4, width: 200 } } }
+				MenuListProps={ { dense: true } }
+				{ ...bindMenu( popupState ) }
+			>
+				<Rename post={ post } />
+				<Duplicate post={ post } popupState={ popupState } />
+				<Delete post={ post } />
+				<View post={ post } />
+				<Divider />
+				<SetHome post={ post } />
+			</Menu>
+		</>
+	);
+}

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Post } from '../../../types';
+import ListItemRename from './list-items/list-item-rename';
+import ListItemCreate from './list-items/list-item-create';
+import ListItemDuplicate from './list-items/list-item-duplicate';
+import ListItemView from './list-items/list-item-view';
+import { usePostListContext } from '../../../contexts/post-list-context';
+
+export default function PostListItem( { post }: { post?: Post } ) {
+	const { editMode } = usePostListContext();
+
+	if ( 'rename' === editMode.mode && post?.id && post?.id === editMode.details.postId ) {
+		return <ListItemRename post={ post } />;
+	}
+
+	if ( 'create' === editMode.mode && ! post ) {
+		return <ListItemCreate />;
+	}
+
+	if ( 'duplicate' === editMode.mode && ! post ) {
+		return <ListItemDuplicate />;
+	}
+
+	if ( ! post ) {
+		return null;
+	}
+
+	return <ListItemView post={ post } />;
+}

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { PageTypeIcon } from '@elementor/icons';
+import { Skeleton, Box, List } from '@elementor/ui';
+import { usePosts } from '../../../hooks/use-posts';
+import { usePostListContext } from '../../../contexts/post-list-context';
+import { postTypesMap } from '../../../api/post';
+import CollapsibleList from './collapsible-list';
+import PostListItem from './post-list-item';
+
+type Props = {
+	isOpenByDefault?: boolean,
+}
+
+export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
+	const { type, editMode } = usePostListContext();
+	const { data: posts, isLoading: postsLoading } = usePosts( type );
+
+	if ( ! posts || postsLoading ) {
+		return (
+			<Box spacing={ 4 } sx={ { px: 6 } }>
+				<Skeleton variant="text" sx={ { fontSize: '2rem' } } />
+				<Skeleton variant="rounded" width="100%" height="48" />
+			</Box>
+		);
+	}
+
+	const label = `${ postTypesMap[ type ].labels.plural_name } (${ posts.length.toString() })`;
+
+	return (
+		<List dense>
+			<CollapsibleList
+				label={ label }
+				Icon={ PageTypeIcon }
+				isOpenByDefault={ isOpenByDefault || false }
+			>
+				{ posts.map( ( post ) => <PostListItem key={ post.id } post={ post } /> ) }
+				{
+					[ 'duplicate', 'create' ].includes( editMode.mode ) &&
+						<PostListItem />
+				}
+			</CollapsibleList>
+		</List>
+	);
+}

package/src/components/panel/shell.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Box, List } from '@elementor/ui';
+import { Box } from '@elementor/ui';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import PagesCollapsibleList from './pages-list/pages-collapsible-list';
 import { __ } from '@wordpress/i18n';
-import AddNewPageButton from './add-new-page-button';
+import PostsCollapsibleList from './posts-list/posts-collapsible-list';
+import { PostListContextProvider } from '../../contexts/post-list-context';
+import AddNewButton from './add-new-button';
 
 const Shell = () => {
 	return (
@@ -12,16 +13,16 @@ const Shell = () => {
 				<PanelHeaderTitle>{ __( 'Pages', 'elementor' ) }</PanelHeaderTitle>
 			</PanelHeader>
 			<PanelBody>
-				<Box
-					display="flex"
-					justifyContent="flex-end"
-					alignItems="center"
-				>
-					<AddNewPageButton />
-				</Box>
-				<List dense>
-					<PagesCollapsibleList isOpenByDefault={ true } />
-				</List>
+				<PostListContextProvider type={ 'page' }>
+					<Box
+						display="flex"
+						justifyContent="flex-end"
+						alignItems="center"
+					>
+						<AddNewButton />
+					</Box>
+					<PostsCollapsibleList isOpenByDefault={ true } />
+				</PostListContextProvider>
 			</PanelBody>
 		</Panel>
 	);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { useHostDocument, useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
@@ -45,14 +45,14 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 
 		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
 
-		const { getByText, getAllByRole } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Act.
-		const buttons = getAllByRole( 'button' );
+		const buttons = screen.getAllByRole( 'button' );
 		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
 
 		// Assert.
-		const label = getByText( 'Add new page', { exact: false } );
+		const label = screen.getByText( 'Add new page', { exact: false } );
 		expect( label ).toBeInTheDocument();
 	} );
 
@@ -69,22 +69,21 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 		jest.mocked( useCreatePage ).mockReturnValue( { isLoading, create } );
 		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
 
-		const { getByText, getAllByRole } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Act.
-		const buttons = getAllByRole( 'button' );
+		const buttons = screen.getAllByRole( 'button' );
 		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
 
-		const addNewPage = getByText( 'Add new page', { exact: false } );
+		const addNewPage = screen.getByText( 'Add new page', { exact: false } );
 		fireEvent.click( addNewPage );
 
 		// Assert.
-		await waitFor( () => {
-			expect( create ).toHaveBeenCalledTimes( 1 );
+		expect( create ).toHaveBeenCalledTimes( 1 );
 
-			expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
-			expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
-		} );
+		await waitFor( () => expect( navigateToDocument ).toHaveBeenCalledTimes( 1 ) );
+
+		expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
 	} );
 } );
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { useHostDocument, useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
@@ -31,11 +31,11 @@ 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 () => {
 		// Act.
-		const { queryByText } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Assert.
-		expect( queryByText( 'Active Document' ) ).toBeTruthy();
-		expect( queryByText( '(publish)' ) ).not.toBeTruthy();
+		expect( screen.getByText( 'Active Document' ) ).toBeInTheDocument();
+		expect( screen.queryByText( '(publish)' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should show the title of the active document with its status when the document is not published', async () => {
@@ -52,11 +52,11 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		);
 
 		// Act.
-		const { queryByText } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Assert.
-		expect( queryByText( 'Active Document' ) ).toBeTruthy();
-		expect( queryByText( '(Draft)' ) ).toBeTruthy();
+		expect( screen.getByText( 'Active Document' ) ).toBeInTheDocument();
+		expect( screen.getByText( '(Draft)' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should show the title of the host document when there is no active document', () => {
@@ -64,10 +64,10 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		jest.mocked( useActiveDocument ).mockImplementation( () => null );
 
 		// Act.
-		const { queryByText } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Assert.
-		expect( queryByText( 'Host Document' ) ).toBeTruthy();
+		expect( screen.getByText( 'Host Document' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should show the title of the host document when the active document is kit', () => {
@@ -85,10 +85,10 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		);
 
 		// Act.
-		const { queryByText } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Assert.
-		expect( queryByText( 'Host Document' ) ).toBeTruthy();
+		expect( screen.getByText( 'Host Document' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should show nothing if there are no documents', () => {
@@ -97,11 +97,11 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		jest.mocked( useHostDocument ).mockImplementation( () => null );
 
 		// Act.
-		const { queryByText } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Assert.
-		expect( queryByText( 'Host Document' ) ).not.toBeTruthy();
-		expect( queryByText( 'Active Document' ) ).not.toBeTruthy();
+		expect( screen.queryByText( 'Host Document' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Active Document' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should show empty state', () => {
@@ -122,14 +122,14 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
 
-		const { getByText, getAllByRole } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Act.
-		const buttons = getAllByRole( 'button' );
+		const buttons = screen.getAllByRole( 'button' );
 		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
 
 		// Assert.
-		const label = getByText( 'There are no other pages or templates on this site yet', { exact: false } );
+		const label = screen.getByText( 'There are no other pages or templates on this site yet', { exact: false } );
 		expect( label ).toBeInTheDocument();
 	} );
 
@@ -161,20 +161,20 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
 
-		const { getByText, getByRole, getAllByRole } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Act.
-		const buttons = getAllByRole( 'button' );
+		const buttons = screen.getAllByRole( 'button' );
 		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
 
 		// Assert.
-		const menu = getByRole( 'menu' );
+		const menu = screen.getByRole( 'menu' );
 		expect( menu ).toBeInTheDocument();
 
-		const label = getByText( 'Recent' );
+		const label = screen.getByText( 'Recent' );
 		expect( label ).toBeInTheDocument();
 
-		expect( getByText( 'Test post' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Test post' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should render titles with HTML entities', () => {
@@ -219,17 +219,17 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
 
 		// Act.
-		const { getByText, getByRole } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Assert - the document title should be rendered with the HTML entity.
-		expect( getByText( 'Header title with special char ¥' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Header title with special char ¥' ) ).toBeInTheDocument();
 
 		// Open the posts list.
-		fireEvent.click( getByRole( 'button' ) );
+		fireEvent.click( screen.getByRole( 'button' ) );
 
 		// Assert - the post title should be rendered with the HTML entity.
-		expect( getByText( 'Post title with <h1>HTML</h1>' ) ).toBeInTheDocument();
-		expect( getByText( 'Post title with <HTML entities>' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Post title with <h1>HTML</h1>' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Post title with <HTML entities>' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should navigate to document on click', () => {
@@ -253,13 +253,13 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 			} ],
 		} );
 
-		const { getByText, getByRole } = render( <RecentlyEdited /> );
+		render( <RecentlyEdited /> );
 
 		// Open the posts list.
-		fireEvent.click( getByRole( 'button' ) );
+		fireEvent.click( screen.getByRole( 'button' ) );
 
 		// Act.
-		fireEvent.click( getByText( 'Test post' ) );
+		fireEvent.click( screen.getByText( 'Test post' ) );
 
 		// Assert.
 		expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );

package/src/contexts/post-list-context.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useState, useContext, createContext, Dispatch, SetStateAction, ReactNode } from 'react';
+import { Slug } from '../api/post';
+
+export type EditMode = {
+	mode: 'rename',
+	details: {
+		postId: number,
+	},
+} | {
+	mode: 'create',
+	details: Record<string, never>,
+} | {
+	mode: 'duplicate',
+	details: {
+		postId: number,
+		title: string,
+	},
+} | {
+	mode: 'none',
+	details: Record<string, never>,
+};
+
+type ContextType = {
+	type: Slug,
+	editMode: EditMode,
+	setEditMode: Dispatch<SetStateAction<EditMode>>,
+	resetEditMode: () => void,
+};
+
+const defaultValues: ContextType = {
+	type: 'page',
+	editMode: { mode: 'none', details: {} },
+	setEditMode: () => null,
+	resetEditMode: () => null,
+};
+
+export const PostListContext = createContext<ContextType>( defaultValues );
+
+export const PostListContextProvider = ( {
+	type,
+	children,
+}: {
+	type: ContextType[ 'type' ],
+	children: ReactNode,
+} ) => {
+	const [ editMode, setEditMode ] = useState( defaultValues.editMode );
+
+	const resetEditMode = () => {
+		setEditMode( defaultValues.editMode );
+	};
+
+	return (
+		<PostListContext.Provider value={ {
+			type,
+			editMode,
+			setEditMode,
+			resetEditMode,
+		} }>
+			{ children }
+		</PostListContext.Provider>
+	);
+};
+
+export function usePostListContext() {
+	const context = useContext( PostListContext );
+
+	if ( ! context ) {
+		throw new Error( 'The `usePostListContext()` hook must be used within an `<PostListContextProvider />`' );
+	}
+
+	return context;
+}

package/src/env.ts

@@ -1,9 +1,9 @@
 import { parseEnv } from '@elementor/env';
 
 export const { env, validateEnv } = parseEnv<{
-	is_panel_active: boolean;
+	is_pages_panel_active: boolean;
 }>( '@elementor/editor-site-navigation', ( envData ) => {
 	return envData as {
-		is_panel_active: boolean;
+		is_pages_panel_active: boolean;
 	};
 } );

package/src/hooks/__tests__/use-create-page.test.ts

@@ -1,4 +1,4 @@
-import { waitFor, renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import apiFetch from '@wordpress/api-fetch';
 import useCreatePage, { endpointPath } from '../use-create-page';
 
@@ -29,13 +29,11 @@ describe( '@elementor/recently-edited/use-page', () => {
 		create();
 
 		// Assert.
-		await waitFor( () => {
-			expect( apiFetch ).toHaveBeenCalledWith( {
-				data: { post_type: 'page' },
-				method: 'POST',
-				path: endpointPath,
-			} );
-			expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			data: { post_type: 'page' },
+			method: 'POST',
+			path: endpointPath,
 		} );
 	} );
 } );

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

@@ -27,14 +27,12 @@ describe( '@elementor/site-settings/use-posts', () => {
 		const { component } = renderHookWithQuery( () => usePosts( 'page' ) );
 
 		// Assert.
-		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&_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' ) }`;
 
-		await waitFor( () => {
-			expect( apiFetch ).toHaveBeenCalledWith( {
-				path: expectedPath,
-			} );
-			expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: expectedPath,
 		} );
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 
 		await waitFor( () => {
 			return component.result.current.isSuccess;

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

@@ -30,11 +30,11 @@ describe( 'useRecentPosts', () => {
 
 		const { result } = renderHook( () => useRecentPosts( 1 ) );
 
-		await waitFor( () => {
-			expect( apiFetch ).toHaveBeenCalledWith( {
-				path: endpointPath + '?posts_per_page=5&post__not_in=1',
-			} );
+		expect( apiFetch ).toHaveBeenCalledWith( {
+			path: endpointPath + '?posts_per_page=5&post__not_in=1',
+		} );
 
+		await waitFor( () => {
 			expect( result.current.recentPosts ).toBe( posts );
 		} );
 	} );

package/src/init.ts

@@ -8,7 +8,7 @@ import { env } from './env';
 export default function init() {
 	registerTopBarMenuItems();
 	// TODO 06/06/2023 :  remove if when we are production ready
-	if ( env.is_panel_active ) {
+	if ( env.is_pages_panel_active ) {
 		registerPanel( panel );
 		registerButton();
 	}

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

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Divider, Menu, MenuProps } from '@elementor/ui';
-import Rename from '../pages-actions/rename';
-import Duplicate from '../pages-actions/duplicate';
-import Delete from '../pages-actions/delete';
-import { Post } from '../../../types';
-import View from '../pages-actions/view';
-import SetHome from '../pages-actions/set-home';
-
-type Props = MenuProps & {
-	page: Post
-};
-
-export default function PageActionsMenu( { page, ...props }: Props ) {
-	return (
-		<Menu
-			PaperProps={ { sx: { mt: 4, width: 200 } } }
-			MenuListProps={ { dense: true } }
-			{ ...props }
-		>
-			<Rename />
-			<Duplicate />
-			<Delete page={ page } />
-			<View />
-			<Divider />
-			<SetHome page={ page } />
-		</Menu>
-	);
-}

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

@@ -1,15 +0,0 @@
-import { Button } from '@elementor/ui';
-import { PlusIcon } from '@elementor/icons';
-import * as React from 'react';
-
-export default function AddNewPageButton() {
-	return (
-		<Button
-			sx={ { mt: 4, mb: 4, mr: 5 } }
-			startIcon={ <PlusIcon /> }
-			onClick={ () => null }
-		>
-			Add New
-		</Button>
-	);
-}

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { CopyIcon } from '@elementor/icons';
-import ActionMenuItem from '../actions-menu/action-menu-item';
-
-export default function Duplicate() {
-	return (
-		<ActionMenuItem
-			title={ __( 'Duplicate', 'elementor' ) }
-			icon={ CopyIcon }
-			onClick={ () => null }
-		/>
-	);
-}

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { EraseIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-import ActionMenuItem from '../actions-menu/action-menu-item';
-
-export default function Rename() {
-	return (
-		<ActionMenuItem
-			title={ __( 'Rename', 'elementor' ) }
-			icon={ EraseIcon }
-			onClick={ () => null }
-		/>
-	);
-}

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { EyeIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-import ActionMenuItem from '../actions-menu/action-menu-item';
-
-export default function View() {
-	return (
-		<ActionMenuItem
-			title={ __( 'View Page', 'elementor' ) } // TODO 21/06/2023 : post label should come from post type
-			icon={ EyeIcon }
-			onClick={ () => null }
-		/>
-	);
-}