DataViews: Allow actions to be provided declaratively as a prop (#55192)

* DataViews: Allow actions to be provided declaratively as a prop * Restore PageActions component * Rename variable * Fix typo
WordPress · Oct 11, 2023 · 8a9cb70 · 8a9cb70
1 parent f29a96b
commit 8a9cb70
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 20 deletions.
diff --git a/packages/edit-site/src/components/actions/trash-post.js b/packages/edit-site/src/components/actions/trash-post.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+
+export default function useMoveToTrashAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'move-to-trash',
+			label: __( 'Move to Trash' ),
+			async perform( post ) {
+				try {
+					await deleteEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{},
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The page's title. */
+							__( '"%s" moved to the Trash.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-page-trashed',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while moving the page to the trash.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+			isDesctructive: true,
+		} ),
+		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
+	);
+}
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -15,7 +15,13 @@ import {
 import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
+	VisuallyHidden,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -24,8 +30,10 @@ import ListView from './list-view';
 import { Pagination } from './pagination';
 import ViewActions from './view-actions';
 import TextFilter from './text-filter';
+import { moreVertical } from '@wordpress/icons';
 
 export default function DataViews( {
+	actions,
 	data,
 	fields,
 	view,
@@ -34,9 +42,50 @@ export default function DataViews( {
 	paginationInfo,
 	options: { pageCount },
 } ) {
+	const columns = useMemo( () => {
+		const _columns = [ ...fields ];
+		if ( actions && actions.length ) {
+			_columns.push( {
+				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+				id: 'actions',
+				cell: ( props ) => {
+					return (
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+						>
+							{ () => (
+								<MenuGroup>
+									{ actions.map( ( action ) => (
+										<MenuItem
+											key={ action.id }
+											onClick={ () =>
+												action.perform(
+													props.row.original
+												)
+											}
+											isDestructive={
+												action.isDesctructive
+											}
+										>
+											{ action.label }
+										</MenuItem>
+									) ) }
+								</MenuGroup>
+							) }
+						</DropdownMenu>
+					);
+				},
+				enableHiding: false,
+			} );
+		}
+
+		return _columns;
+	}, [ fields, actions ] );
+
 	const dataView = useReactTable( {
 		data,
-		columns: fields,
+		columns,
 		manualSorting: true,
 		manualFiltering: true,
 		manualPagination: true,

diff --git a/packages/edit-site/src/components/page-actions/index.js b/packages/edit-site/src/components/page-actions/index.js
@@ -10,17 +10,11 @@ import { moreVertical } from '@wordpress/icons';
  */
 import TrashPageMenuItem from './trash-page-menu-item';
 
-export default function PageActions( {
-	postId,
-	className,
-	toggleProps,
-	onRemove,
-} ) {
+export default function PageActions( { postId, toggleProps, onRemove } ) {
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
 			label={ __( 'Actions' ) }
-			className={ className }
 			toggleProps={ toggleProps }
 		>
 			{ () => (

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import {
-	VisuallyHidden,
 	__experimentalHeading as Heading,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -16,8 +15,8 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import Page from '../page';
 import Link from '../routes/link';
-import PageActions from '../page-actions';
 import { DataViews } from '../dataviews';
+import useTrashPostAction from '../actions/trash-post';
 
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
@@ -118,27 +117,22 @@ export default function PagePages() {
 					postStatuses[ page.status ] ?? page.status,
 				enableSorting: false,
 			},
-			{
-				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
-				id: 'actions',
-				cell: ( props ) => {
-					const page = props.row.original;
-					return <PageActions postId={ page.id } />;
-				},
-				enableHiding: false,
-			},
 		],
 		[ postStatuses ]
 	);
 
+	const trashPostAction = useTrashPostAction();
+	const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
+
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (
 		<Page title={ __( 'Pages' ) }>
 			<DataViews
 				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
 				data={ pages || EMPTY_ARRAY }
 				isLoading={ isLoadingPages }
-				fields={ fields }
 				view={ view }
 				onChangeView={ setView }
 				options={ {