DataViews List: Automatically insert header menu separators (#55412)

In HeaderMenu, avoid the very error-prone logic involved in manually adding separators in between top-level items, and instead rely on an introspective component (WithSeparators) to do that task reliably.
WordPress · Oct 17, 2023 · 023c66f · 023c66f
1 parent 3ba5852
commit 023c66f
Showing 1 changed file with 57 additions and 44 deletions.
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
@@ -28,7 +28,7 @@ import {
 	privateApis as componentsPrivateApis,
 	VisuallyHidden,
 } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { useMemo, Children, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -75,53 +75,66 @@ function HeaderMenu( { dataView, header } ) {
 				/>
 			}
 		>
-			{ isSortable && (
-				<DropdownMenuGroupV2>
-					{ Object.entries( sortingItemsInfo ).map(
-						( [ direction, info ] ) => (
-							<DropdownMenuItemV2
-								key={ direction }
-								prefix={ <Icon icon={ info.icon } /> }
-								suffix={
-									sortedDirection === direction && (
-										<Icon icon={ check } />
-									)
-								}
-								onSelect={ ( event ) => {
-									event.preventDefault();
-									if ( sortedDirection === direction ) {
-										dataView.resetSorting();
-									} else {
-										dataView.setSorting( [
-											{
-												id: header.column.id,
-												desc: direction === 'desc',
-											},
-										] );
+			<WithSeparators>
+				{ isSortable && (
+					<DropdownMenuGroupV2>
+						{ Object.entries( sortingItemsInfo ).map(
+							( [ direction, info ] ) => (
+								<DropdownMenuItemV2
+									key={ direction }
+									prefix={ <Icon icon={ info.icon } /> }
+									suffix={
+										sortedDirection === direction && (
+											<Icon icon={ check } />
+										)
 									}
-								} }
-							>
-								{ info.label }
-							</DropdownMenuItemV2>
-						)
-					) }
-				</DropdownMenuGroupV2>
-			) }
-			{ isSortable && isHidable && <DropdownMenuSeparatorV2 /> }
-			{ isHidable && (
-				<DropdownMenuItemV2
-					prefix={ <Icon icon={ unseen } /> }
-					onSelect={ ( event ) => {
-						event.preventDefault();
-						header.column.getToggleVisibilityHandler()( event );
-					} }
-				>
-					{ __( 'Hide' ) }
-				</DropdownMenuItemV2>
-			) }
+									onSelect={ ( event ) => {
+										event.preventDefault();
+										if ( sortedDirection === direction ) {
+											dataView.resetSorting();
+										} else {
+											dataView.setSorting( [
+												{
+													id: header.column.id,
+													desc: direction === 'desc',
+												},
+											] );
+										}
+									} }
+								>
+									{ info.label }
+								</DropdownMenuItemV2>
+							)
+						) }
+					</DropdownMenuGroupV2>
+				) }
+				{ isHidable && (
+					<DropdownMenuItemV2
+						prefix={ <Icon icon={ unseen } /> }
+						onSelect={ ( event ) => {
+							event.preventDefault();
+							header.column.getToggleVisibilityHandler()( event );
+						} }
+					>
+						{ __( 'Hide' ) }
+					</DropdownMenuItemV2>
+				) }
+			</WithSeparators>
 		</DropdownMenuV2>
 	);
 }
+
+function WithSeparators( { children } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparatorV2 /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
 function ViewList( {
 	view,
 	onChangeView,