From 1e3bfc26a3f80591e8c239e4aef47be9dfdbd9cb Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Fri, 10 Nov 2023 11:22:14 +0200
Subject: [PATCH] [Data views]: Update actions API (#56026)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [Data views]: Update actions API

* Update packages/edit-site/src/components/dataviews/README.md

Co-authored-by: André <583546+oandregal@users.noreply.github.com>

---------

Co-authored-by: André <583546+oandregal@users.noreply.github.com>
---
 .../edit-site/src/components/actions/index.js | 12 ++--
 .../src/components/dataviews/README.md        | 64 ++++++++++---------
 .../src/components/dataviews/item-actions.js  |  6 +-
 .../page-templates/template-actions.js        |  2 +-
 4 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/packages/edit-site/src/components/actions/index.js b/packages/edit-site/src/components/actions/index.js
index 6cbe94fc6cd654..c90ffde135a01d 100644
--- a/packages/edit-site/src/components/actions/index.js
+++ b/packages/edit-site/src/components/actions/index.js
@@ -31,7 +31,7 @@ export function useTrashPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
-			async perform( post ) {
+			async callback( post ) {
 				try {
 					await deleteEntityRecord(
 						'postType',
@@ -81,7 +81,7 @@ export function usePermanentlyDeletePostAction() {
 			isEligible( { status } ) {
 				return status === 'trash';
 			},
-			async perform( post ) {
+			async callback( post ) {
 				try {
 					await deleteEntityRecord(
 						'postType',
@@ -132,7 +132,7 @@ export function useRestorePostAction() {
 			isEligible( { status } ) {
 				return status === 'trash';
 			},
-			async perform( post ) {
+			async callback( post ) {
 				await editEntityRecord( 'postType', post.type, post.id, {
 					status: 'draft',
 				} );
@@ -183,7 +183,7 @@ export const viewPostAction = {
 	isEligible( post ) {
 		return post.status !== 'trash';
 	},
-	perform( post ) {
+	callback( post ) {
 		document.location.href = post.link;
 	},
 };
@@ -197,7 +197,7 @@ export function useEditPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
-			perform( post ) {
+			callback( post ) {
 				history.push( {
 					postId: post.id,
 					postType: post.type,
@@ -222,7 +222,7 @@ export const postRevisionsAction = {
 			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 		return lastRevisionId && revisionsCount > 1;
 	},
-	perform( post ) {
+	callback( post ) {
 		const href = addQueryArgs( 'revision.php', {
 			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
 		} );
diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md
index ab077b2c6c30f6..5502165f0cfdc5 100644
--- a/packages/edit-site/src/components/dataviews/README.md
+++ b/packages/edit-site/src/components/dataviews/README.md
@@ -5,7 +5,7 @@ This file documents the DataViews UI component, which provides an API to render
 ```js
 <DataViews
 	data={ pages }
-	isLoading= { isLoadingPages }
+	isLoading={ isLoadingPages }
 	view={ view }
 	onChangeView={ onChangeView }
 	fields={ fields }
@@ -16,7 +16,7 @@ This file documents the DataViews UI component, which provides an API to render
 
 ## Data
 
-The dataset to work with, represented as a one-dimensional array. 
+The dataset to work with, represented as a one-dimensional array.
 
 Example:
 
@@ -53,19 +53,19 @@ Example:
 }
 ```
 
-- `type`: view type, one of `list` or `grid`.
-- `perPage`: number of records to show per page.
-- `page`: the page that is visible.
-- `sort.field`: field used for sorting the dataset.
-- `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
-- `search`: the text search applied to the dataset.
-- `filters`: the filters applied to the dataset. Each item describes:
-	- `field`: which field this filter is bound to.
-	- `operator`: which type of filter it is. Only `in` available at the moment.
-	- `vaule`: the actual value selected by the user.
-- `visibleFilters`: the `id` of the filters that are visible in the UI.
-- `hiddenFields`: the `id` of the fields that are hidden in the UI.
-- `layout`: ...
+-   `type`: view type, one of `list` or `grid`.
+-   `perPage`: number of records to show per page.
+-   `page`: the page that is visible.
+-   `sort.field`: field used for sorting the dataset.
+-   `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
+-   `search`: the text search applied to the dataset.
+-   `filters`: the filters applied to the dataset. Each item describes:
+    -   `field`: which field this filter is bound to.
+    -   `operator`: which type of filter it is. Only `in` available at the moment.
+    -   `vaule`: the actual value selected by the user.
+-   `visibleFilters`: the `id` of the filters that are visible in the UI.
+-   `hiddenFields`: the `id` of the fields that are hidden in the UI.
+-   `layout`: ...
 
 ### View <=> data
 
@@ -74,7 +74,7 @@ The view is a representation of the visible state of the dataset. Note, however,
 The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider.
 
 ```js
-function MyCustomPageList() { 
+function MyCustomPageList() {
 	const [ view, setView ] = useState( {
 		type: 'list',
 		perPage: 5,
@@ -167,23 +167,25 @@ Example:
 ]
 ```
 
-- `id`: identifier for the field. Unique.
-- `header`: the field's name to be shown in the UI.
-- `getValue`: function that returns the value of the field.
-- `render`: function that renders the field.
-- `elements`: the set of valid values for the field's value.
-- `filters`: what filter operators are available for the user to use over this field. Only `in` available at the moment.
-- `enableSorting`: whether the data can be sorted by the given field. True by default.
-- `enableHiding`: whether the field can be hidden. True by default.
+-   `id`: identifier for the field. Unique.
+-   `header`: the field's name to be shown in the UI.
+-   `getValue`: function that returns the value of the field.
+-   `render`: function that renders the field.
+-   `elements`: the set of valid values for the field's value.
+-   `filters`: what filter operators are available for the user to use over this field. Only `in` available at the moment.
+-   `enableSorting`: whether the data can be sorted by the given field. True by default.
+-   `enableHiding`: whether the field can be hidden. True by default.
 
 ## Actions
 
 Array of operations that can be performed upon each record. Each action is an object with the following properties:
 
-- `id`: string, required. Unique identifier of the action. For example, `move-to-trash`.
-- `label`: string, required. User facing description of the action. For example, `Move to Trash`.
-- `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary).
-- `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary.
-- `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input.
-- `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color.
-- `perform`: function, required. Function that takes the record as input and performs the required action.
+-   `id`: string, required. Unique identifier of the action. For example, `move-to-trash`.
+-   `label`: string, required. User facing description of the action. For example, `Move to Trash`.
+-   `isPrimary`: boolean, optional. Whether the action should be listed inline (primary) or in hidden in the more actions menu (secondary).
+-   `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary.
+-   `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input.
+-   `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color.
+-   `callback`: function, required. Callback function that takes the record as input and performs the required action.
+-   `RenderModal`: ReactElement, optional. If an action requires to render contents in a modal, can provide a component which takes as input the record and a `closeModal` function. If this prop is provided, the `callback` property would be ignored.
+-   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.
diff --git a/packages/edit-site/src/components/dataviews/item-actions.js b/packages/edit-site/src/components/dataviews/item-actions.js
index e406de286d4b04..777244e0396a70 100644
--- a/packages/edit-site/src/components/dataviews/item-actions.js
+++ b/packages/edit-site/src/components/dataviews/item-actions.js
@@ -103,7 +103,7 @@ export default function ItemActions( { item, actions } ) {
 							key={ action.id }
 							action={ action }
 							item={ item }
-							onClick={ () => action.perform( item ) }
+							onClick={ () => action.callback( item ) }
 						/>
 					);
 				} ) }
@@ -129,7 +129,9 @@ export default function ItemActions( { item, actions } ) {
 										key={ action.id }
 										action={ action }
 										item={ item }
-										onClick={ () => action.perform( item ) }
+										onClick={ () =>
+											action.callback( item )
+										}
 									/>
 								);
 							} ) }
diff --git a/packages/edit-site/src/components/page-templates/template-actions.js b/packages/edit-site/src/components/page-templates/template-actions.js
index 9538f91e09ebd8..9f5897e31fb93e 100644
--- a/packages/edit-site/src/components/page-templates/template-actions.js
+++ b/packages/edit-site/src/components/page-templates/template-actions.js
@@ -36,7 +36,7 @@ export function useResetTemplateAction() {
 			isPrimary: true,
 			icon: backup,
 			isEligible: isTemplateRevertable,
-			async perform( template ) {
+			async callback( template ) {
 				try {
 					await revertTemplate( template, { allowUndo: false } );
 					await saveEditedEntityRecord(