[Data Views]: Remove separator in item actions (WordPress#59822)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: mcsf <mcsf@git.wordpress.org>
carstingaxion · Mar 27, 2024 · e295c75 · e295c75
1 parent 510ae03
commit e295c75
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 73 deletions.
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
@@ -33,7 +33,7 @@ export default function DataViews( {
 	fields,
 	search = true,
 	searchLabel = undefined,
-	actions,
+	actions = [],
 	data,
 	getItemId = defaultGetItemId,
 	isLoading = false,

diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.js
@@ -15,7 +15,6 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { unlock } from './lock-unlock';
-import { WithDropDownMenuSeparators } from './utils';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -106,32 +105,22 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 }
 
 export default function ItemActions( { item, actions, isCompact } ) {
-	const { primaryActions, secondaryActions } = useMemo( () => {
-		return actions.reduce(
-			( accumulator, action ) => {
-				// If an action is eligible for all items, doesn't need
-				// to provide the `isEligible` function.
-				if ( action.isEligible && ! action.isEligible( item ) ) {
-					return accumulator;
-				}
-				if ( action.isPrimary && !! action.icon ) {
-					accumulator.primaryActions.push( action );
-				} else {
-					accumulator.secondaryActions.push( action );
-				}
-				return accumulator;
-			},
-			{ primaryActions: [], secondaryActions: [] }
+	const { primaryActions, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
 		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
+		);
+		return {
+			primaryActions: _primaryActions,
+			eligibleActions: _eligibleActions,
+		};
 	}, [ actions, item ] );
 	if ( isCompact ) {
-		return (
-			<CompactItemActions
-				item={ item }
-				primaryActions={ primaryActions }
-				secondaryActions={ secondaryActions }
-			/>
-		);
+		return <CompactItemActions item={ item } actions={ eligibleActions } />;
 	}
 	return (
 		<HStack
@@ -163,45 +152,26 @@ export default function ItemActions( { item, actions, isCompact } ) {
 						/>
 					);
 				} ) }
-			<CompactItemActions
-				item={ item }
-				primaryActions={ primaryActions }
-				secondaryActions={ secondaryActions }
-			/>
+			<CompactItemActions item={ item } actions={ eligibleActions } />
 		</HStack>
 	);
 }
 
-function CompactItemActions( { item, primaryActions, secondaryActions } ) {
+function CompactItemActions( { item, actions } ) {
 	return (
 		<DropdownMenu
 			trigger={
 				<Button
 					size="compact"
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
-					disabled={
-						! primaryActions.length && ! secondaryActions.length
-					}
+					disabled={ ! actions.length }
 					className="dataviews-all-actions-button"
 				/>
 			}
 			placement="bottom-end"
 		>
-			<WithDropDownMenuSeparators>
-				{ !! primaryActions.length && (
-					<ActionsDropdownMenuGroup
-						actions={ primaryActions }
-						item={ item }
-					/>
-				) }
-				{ !! secondaryActions.length && (
-					<ActionsDropdownMenuGroup
-						actions={ secondaryActions }
-						item={ item }
-					/>
-				) }
-			</WithDropDownMenuSeparators>
+			<ActionsDropdownMenuGroup actions={ actions } item={ item } />
 		</DropdownMenu>
 	);
 }
diff --git a/packages/dataviews/src/utils.js b/packages/dataviews/src/utils.js
@@ -1,9 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { Children, Fragment } from '@wordpress/element';
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
@@ -14,11 +8,6 @@ import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
 } from './constants';
-import { unlock } from './lock-unlock';
-
-const { DropdownMenuSeparatorV2: DropdownMenuSeparator } = unlock(
-	componentsPrivateApis
-);
 
 /**
  * Helper util to sort data by text fields, when sorting is done client side.
@@ -109,14 +98,3 @@ export const sanitizeOperators = ( field ) => {
 
 	return operators;
 };
-
-export function WithDropDownMenuSeparators( { children } ) {
-	return Children.toArray( children )
-		.filter( Boolean )
-		.map( ( child, i ) => (
-			<Fragment key={ i }>
-				{ i > 0 && <DropdownMenuSeparator /> }
-				{ child }
-			</Fragment>
-		) );
-}
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -23,6 +23,8 @@ import {
 	useRef,
 	useState,
 	useMemo,
+	Children,
+	Fragment,
 } from '@wordpress/element';
 
 /**
@@ -31,7 +33,7 @@ import {
 import SingleSelectionCheckbox from './single-selection-checkbox';
 import { unlock } from './lock-unlock';
 import ItemActions from './item-actions';
-import { sanitizeOperators, WithDropDownMenuSeparators } from './utils';
+import { sanitizeOperators } from './utils';
 import { ENUMERATION_TYPE, SORTING_DIRECTIONS } from './constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
@@ -44,8 +46,20 @@ const {
 	DropdownMenuItemV2: DropdownMenuItem,
 	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
 } = unlock( componentsPrivateApis );
 
+function WithDropDownMenuSeparators( { children } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparator /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
 const sortArrows = { asc: '↑', desc: '↓' };
 
 const HeaderMenu = forwardRef( function HeaderMenu(

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -355,11 +355,11 @@ export default function PagePages() {
 	const actions = useMemo(
 		() => [
 			viewPostAction,
-			trashPostAction,
 			restorePostAction,
 			permanentlyDeletePostAction,
 			editPostAction,
 			postRevisionsAction,
+			trashPostAction,
 		],
 		[ permanentlyDeletePostAction, restorePostAction, editPostAction ]
 	);

diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js
@@ -415,9 +415,9 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 	const actions = useMemo(
 		() => [
 			resetTemplateAction,
-			deleteTemplateAction,
 			renameTemplateAction,
 			postRevisionsAction,
+			deleteTemplateAction,
 		],
 		[ resetTemplateAction ]
 	);