From a2c135722034f2f0087eb32782d87aa33c02f3fd Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 12 Oct 2023 12:24:48 +0300
Subject: [PATCH] [Data Views]: Add drop down with action in headers

---
 .../src/components/dataviews/list-view.js     | 73 +++++++++++++++----
 .../src/components/dataviews/view-actions.js  | 64 ++++++++--------
 2 files changed, 88 insertions(+), 49 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/list-view.js b/packages/edit-site/src/components/dataviews/list-view.js
index 55a871d3df8c9b..df417d75f32915 100644
--- a/packages/edit-site/src/components/dataviews/list-view.js
+++ b/packages/edit-site/src/components/dataviews/list-view.js
@@ -8,12 +8,29 @@ import { flexRender } from '@tanstack/react-table';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import { chevronDown, chevronUp, unseen } from '@wordpress/icons';
+import {
+	Button,
+	Icon,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { FieldSortingItems } from './view-actions';
+
+const {
+	DropdownMenuV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	DropdownMenuSeparatorV2,
+} = unlock( componentsPrivateApis );
+
 const sortIcons = { asc: chevronUp, desc: chevronDown };
-function Header( { header } ) {
+function HeaderMenu( { dataView, header } ) {
 	if ( header.isPlaceholder ) {
 		return null;
 	}
@@ -21,21 +38,46 @@ function Header( { header } ) {
 		header.column.columnDef.header,
 		header.getContext()
 	);
-	if ( ! header.column.getCanSort() ) {
+	const isSortable = !! header.column.getCanSort();
+	const isHidable = !! header.column.getCanHide();
+	if ( ! isSortable && ! isHidable ) {
 		return text;
 	}
-	const sortDirection = header.column.getIsSorted();
 	return (
-		<Button
-			onClick={ header.column.getToggleSortingHandler() }
-			icon={ sortIcons[ sortDirection ] }
-			iconPosition="right"
-			text={ text }
-			style={ { padding: 0 } }
-		/>
+		<DropdownMenuV2
+			align="start"
+			trigger={
+				<Button
+					icon={ sortIcons[ header.column.getIsSorted() ] }
+					iconPosition="right"
+					text={ text }
+					style={ { padding: 0 } }
+				/>
+			}
+		>
+			{ isSortable && (
+				<DropdownMenuGroupV2>
+					<FieldSortingItems
+						field={ header.column }
+						dataView={ dataView }
+					/>
+				</DropdownMenuGroupV2>
+			) }
+			{ isSortable && isHidable && <DropdownMenuSeparatorV2 /> }
+			{ isHidable && (
+				<DropdownMenuItemV2
+					prefix={ <Icon icon={ unseen } /> }
+					onSelect={ ( event ) => {
+						event.preventDefault();
+						header.column.getToggleVisibilityHandler()( event );
+					} }
+				>
+					{ __( 'Hide' ) }
+				</DropdownMenuItemV2>
+			) }
+		</DropdownMenuV2>
 	);
 }
-
 function ListView( { dataView, className, isLoading = false }, ref ) {
 	const { rows } = dataView.getRowModel();
 	const hasRows = !! rows?.length;
@@ -66,7 +108,10 @@ function ListView( { dataView, className, isLoading = false }, ref ) {
 													.maxWidth || undefined,
 										} }
 									>
-										<Header header={ header } />
+										<HeaderMenu
+											dataView={ dataView }
+											header={ header }
+										/>
 									</th>
 								) ) }
 							</tr>
diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
index ab9f3be88c2006..1f90ce1402a143 100644
--- a/packages/edit-site/src/components/dataviews/view-actions.js
+++ b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -144,6 +144,31 @@ const sortingItemsInfo = {
 	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
 	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
 };
+export function FieldSortingItems( { field, dataView } ) {
+	const sortedDirection = field.getIsSorted();
+	return 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: field.id,
+							desc: direction === 'desc',
+						},
+					] );
+				}
+			} }
+		>
+			{ info.label }
+		</DropdownMenuItemV2>
+	) );
+}
 function SortMenu( { dataView } ) {
 	const sortableFields = dataView
 		.getAllColumns()
@@ -170,7 +195,6 @@ function SortMenu( { dataView } ) {
 			}
 		>
 			{ sortableFields?.map( ( field ) => {
-				const sortedDirection = field.getIsSorted();
 				return (
 					<DropdownSubMenuV2
 						key={ field.id }
@@ -183,40 +207,10 @@ function SortMenu( { dataView } ) {
 						}
 						side="left"
 					>
-						{ Object.entries( sortingItemsInfo ).map(
-							( [ direction, info ] ) => {
-								return (
-									<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: field.id,
-														desc:
-															direction ===
-															'desc',
-													},
-												] );
-											}
-										} }
-									>
-										{ info.label }
-									</DropdownMenuItemV2>
-								);
-							}
-						) }
+						<FieldSortingItems
+							field={ field }
+							dataView={ dataView }
+						/>
 					</DropdownSubMenuV2>
 				);
 			} ) }