From a49fe20081f48630d169a534fa1dd58e0ea447c3 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 6 May 2024 11:34:46 +0100
Subject: [PATCH 1/4] DataViews: Type the ItemActions component

---
 .../src/{item-actions.js => item-actions.tsx} | 79 ++++++++++++++++---
 packages/dataviews/src/types.ts               | 78 ++++++++++++++++++
 2 files changed, 146 insertions(+), 11 deletions(-)
 rename packages/dataviews/src/{item-actions.js => item-actions.tsx} (72%)

diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.tsx
similarity index 72%
rename from packages/dataviews/src/item-actions.js
rename to packages/dataviews/src/item-actions.tsx
index 60a120a2b5c60d..a4563a00d317cc 100644
--- a/packages/dataviews/src/item-actions.js
+++ b/packages/dataviews/src/item-actions.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -15,6 +20,7 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
+import type { Action, ActionModal as ActionModalType, Item } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -24,7 +30,48 @@ const {
 	kebabCase,
 } = unlock( componentsPrivateApis );
 
-function ButtonTrigger( { action, onClick } ) {
+interface ButtonTriggerProps {
+	action: Action;
+	onClick: MouseEventHandler;
+}
+
+interface DropdownMenuItemTriggerProps {
+	action: Action;
+	onClick: MouseEventHandler;
+}
+
+interface ActionModalProps {
+	action: ActionModalType;
+	items: Item[];
+	closeModal?: () => void;
+	onActionStart?: ( items: Item[] ) => void;
+	onActionPerformed?: ( items: Item[] ) => void;
+}
+
+interface ActionWithModalProps extends ActionModalProps {
+	ActionTrigger: (
+		props: ButtonTriggerProps | DropdownMenuItemTriggerProps
+	) => JSX.Element;
+	isBusy?: boolean;
+}
+
+interface ActionsDropdownMenuGroupProps {
+	actions: Action[];
+	item: Item;
+}
+
+interface ItemActionsProps {
+	item: Item;
+	actions: Action[];
+	isCompact: boolean;
+}
+
+interface CompactItemActionsProps {
+	item: Item;
+	actions: Action[];
+}
+
+function ButtonTrigger( { action, onClick }: ButtonTriggerProps ) {
 	return (
 		<Button
 			label={ action.label }
@@ -36,11 +83,14 @@ function ButtonTrigger( { action, onClick } ) {
 	);
 }
 
-function DropdownMenuItemTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger( {
+	action,
+	onClick,
+}: DropdownMenuItemTriggerProps ) {
 	return (
 		<DropdownMenuItem
 			onClick={ onClick }
-			hideOnClick={ ! action.RenderModal }
+			hideOnClick={ 'RenderModal' in action }
 		>
 			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>
@@ -53,12 +103,12 @@ export function ActionModal( {
 	closeModal,
 	onActionStart,
 	onActionPerformed,
-} ) {
+}: ActionModalProps ) {
 	return (
 		<Modal
 			title={ action.modalHeader || action.label }
 			__experimentalHideHeader={ !! action.hideModalHeader }
-			onRequestClose={ closeModal }
+			onRequestClose={ closeModal ?? ( () => {} ) }
 			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
 				action.id
 			) }` }
@@ -80,7 +130,7 @@ export function ActionWithModal( {
 	onActionStart,
 	onActionPerformed,
 	isBusy,
-} ) {
+}: ActionWithModalProps ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const actionTriggerProps = {
 		action,
@@ -106,11 +156,14 @@ export function ActionWithModal( {
 	);
 }
 
-export function ActionsDropdownMenuGroup( { actions, item } ) {
+export function ActionsDropdownMenuGroup( {
+	actions,
+	item,
+}: ActionsDropdownMenuGroupProps ) {
 	return (
 		<DropdownMenuGroup>
 			{ actions.map( ( action ) => {
-				if ( !! action.RenderModal ) {
+				if ( 'RenderModal' in action ) {
 					return (
 						<ActionWithModal
 							key={ action.id }
@@ -132,7 +185,11 @@ export function ActionsDropdownMenuGroup( { actions, item } ) {
 	);
 }
 
-export default function ItemActions( { item, actions, isCompact } ) {
+export default function ItemActions( {
+	item,
+	actions,
+	isCompact,
+}: ItemActionsProps ) {
 	const { primaryActions, eligibleActions } = useMemo( () => {
 		// If an action is eligible for all items, doesn't need
 		// to provide the `isEligible` function.
@@ -162,7 +219,7 @@ export default function ItemActions( { item, actions, isCompact } ) {
 		>
 			{ !! primaryActions.length &&
 				primaryActions.map( ( action ) => {
-					if ( !! action.RenderModal ) {
+					if ( 'RenderModal' in action ) {
 						return (
 							<ActionWithModal
 								key={ action.id }
@@ -185,7 +242,7 @@ export default function ItemActions( { item, actions, isCompact } ) {
 	);
 }
 
-function CompactItemActions( { item, actions } ) {
+function CompactItemActions( { item, actions }: CompactItemActionsProps ) {
 	return (
 		<DropdownMenu
 			trigger={
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 8244992a1f5f87..580b9b11ccb3f1 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import type { IconType } from '@wordpress/components';
+
 /**
  * External dependencies
  */
@@ -164,3 +169,76 @@ export interface ViewList extends ViewBase {
 }
 
 export type View = ViewList | ViewBase;
+
+interface ActionBase {
+	/**
+	 * The unique identifier of the action.
+	 */
+	id: string;
+
+	/**
+	 * The label of the action.
+	 */
+	label: string;
+
+	/**
+	 * The icon of the action. (Either a string or an SVG element)
+	 */
+	icon?: IconType;
+
+	/**
+	 * Whether the action is disabled.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Whether the action is destructive.
+	 */
+	isDestructive?: boolean;
+
+	/**
+	 * Whether the action is a primary action.
+	 */
+	isPrimary?: boolean;
+
+	/**
+	 * Whether the item passed as an argument supports the current action.
+	 */
+	isEligible?: ( item: Item ) => boolean;
+}
+
+export interface ActionModal extends ActionBase {
+	/**
+	 * Modal to render when the action is triggered.
+	 */
+	RenderModal: ( {
+		items,
+		closeModal,
+		onActionStart,
+		onActionPerformed,
+	}: {
+		items: Item[];
+		closeModal?: () => void;
+		onActionStart?: ( items: Item[] ) => void;
+		onActionPerformed?: ( items: Item[] ) => void;
+	} ) => JSX.Element;
+
+	/**
+	 * Whether to hide the modal header.
+	 */
+	hideModalHeader?: boolean;
+
+	/**
+	 * The header of the modal.
+	 */
+	modalHeader?: string;
+}
+
+export interface ActionButton extends ActionBase {
+	/**
+	 * The callback to execute when the action is triggered.
+	 */
+	callback: ( items: Item[] ) => void;
+}
+
+export type Action = ActionModal | ActionButton;

From 376004551c1a60b45630ab920332a838d32b866c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 6 May 2024 13:04:35 +0100
Subject: [PATCH 2/4] Use ReactElement

---
 packages/dataviews/src/item-actions.tsx | 4 ++--
 packages/dataviews/src/types.ts         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/item-actions.tsx b/packages/dataviews/src/item-actions.tsx
index a4563a00d317cc..9cd0d54d126bc3 100644
--- a/packages/dataviews/src/item-actions.tsx
+++ b/packages/dataviews/src/item-actions.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ interface ActionModalProps {
 interface ActionWithModalProps extends ActionModalProps {
 	ActionTrigger: (
 		props: ButtonTriggerProps | DropdownMenuItemTriggerProps
-	) => JSX.Element;
+	) => ReactElement;
 	isBusy?: boolean;
 }
 
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 580b9b11ccb3f1..b46c8b89b2f441 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -6,7 +6,7 @@ import type { IconType } from '@wordpress/components';
 /**
  * External dependencies
  */
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 interface Option {
 	value: any;
@@ -221,7 +221,7 @@ export interface ActionModal extends ActionBase {
 		closeModal?: () => void;
 		onActionStart?: ( items: Item[] ) => void;
 		onActionPerformed?: ( items: Item[] ) => void;
-	} ) => JSX.Element;
+	} ) => ReactElement;
 
 	/**
 	 * Whether to hide the modal header.

From 3f3f018690a9a39d6a32026f36155384423c7bd6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 7 May 2024 09:23:16 +0100
Subject: [PATCH 3/4] Fix condition

---
 packages/dataviews/src/item-actions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/item-actions.tsx b/packages/dataviews/src/item-actions.tsx
index 9cd0d54d126bc3..580ecaa6b2c534 100644
--- a/packages/dataviews/src/item-actions.tsx
+++ b/packages/dataviews/src/item-actions.tsx
@@ -90,7 +90,7 @@ function DropdownMenuItemTrigger( {
 	return (
 		<DropdownMenuItem
 			onClick={ onClick }
-			hideOnClick={ 'RenderModal' in action }
+			hideOnClick={ ! ( 'RenderModal' in action ) }
 		>
 			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
 		</DropdownMenuItem>

From 7e30226983612ea052ce68834b972ffead5e24de Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 14 May 2024 10:37:03 +0100
Subject: [PATCH 4/4] Align action types

---
 packages/dataviews/src/types.ts      |  9 ++---
 packages/dataviews/src/view-list.tsx | 60 ++++++++++++----------------
 2 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index b46c8b89b2f441..065deaac687e6f 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import type { IconType } from '@wordpress/components';
-
 /**
  * External dependencies
  */
@@ -183,8 +178,10 @@ interface ActionBase {
 
 	/**
 	 * The icon of the action. (Either a string or an SVG element)
+	 * This should be IconType from the components package
+	 * but that import is breaking typescript build for the moment.
 	 */
-	icon?: IconType;
+	icon?: any;
 
 	/**
 	 * Whether the action is disabled.
diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
index 022e2a7222f770..203707e0c3ccf1 100644
--- a/packages/dataviews/src/view-list.tsx
+++ b/packages/dataviews/src/view-list.tsx
@@ -33,6 +33,7 @@ import { moreVertical } from '@wordpress/icons';
  */
 import { unlock } from './lock-unlock';
 import type {
+	Action,
 	Data,
 	Item,
 	NormalizedField,
@@ -41,18 +42,6 @@ import type {
 
 import { ActionsDropdownMenuGroup, ActionModal } from './item-actions';
 
-interface Action {
-	callback: ( items: Item[] ) => void;
-	icon: any;
-	id: string;
-	isDestructive: boolean | undefined;
-	isEligible: ( item: Item ) => boolean | undefined;
-	isPrimary: boolean | undefined;
-	label: string;
-	modalHeader: string;
-	RenderModal: ( props: any ) => JSX.Element;
-}
-
 interface ListViewProps {
 	actions: Action[];
 	data: Data;
@@ -215,7 +204,7 @@ function ListItem( {
 							width: 'auto',
 						} }
 					>
-						{ primaryAction && !! primaryAction.RenderModal && (
+						{ primaryAction && 'RenderModal' in primaryAction && (
 							<div role="gridcell">
 								<CompositeItem
 									store={ store }
@@ -247,28 +236,29 @@ function ListItem( {
 								</CompositeItem>
 							</div>
 						) }
-						{ primaryAction && ! primaryAction.RenderModal && (
-							<div role="gridcell" key={ primaryAction.id }>
-								<CompositeItem
-									store={ store }
-									render={
-										<Button
-											label={ primaryAction.label }
-											icon={ primaryAction.icon }
-											isDestructive={
-												primaryAction.isDestructive
-											}
-											size="compact"
-											onClick={ () =>
-												primaryAction.callback( [
-													item,
-												] )
-											}
-										/>
-									}
-								/>
-							</div>
-						) }
+						{ primaryAction &&
+							! ( 'RenderModal' in primaryAction ) && (
+								<div role="gridcell" key={ primaryAction.id }>
+									<CompositeItem
+										store={ store }
+										render={
+											<Button
+												label={ primaryAction.label }
+												icon={ primaryAction.icon }
+												isDestructive={
+													primaryAction.isDestructive
+												}
+												size="compact"
+												onClick={ () =>
+													primaryAction.callback( [
+														item,
+													] )
+												}
+											/>
+										}
+									/>
+								</div>
+							) }
 						<div role="gridcell">
 							<DropdownMenu
 								trigger={