[DataViews]: Update the view config to include fields visibility (#55247

)

* [DataViews]: Update the view config to include fields visibility

* fix typo

* use array instead of Set for `hidden`

* use `hiddenFields` top level prop

packages/edit-site/src/components/dataviews/dataviews.js

@@ -32,6 +32,8 @@ import ViewActions from './view-actions';
 import TextFilter from './text-filter';
 import { moreVertical } from '@wordpress/icons';
 
+const EMPTY_OBJECT = {};
+
 export default function DataViews( {
 	actions,
 	data,
@@ -44,7 +46,7 @@ export default function DataViews( {
 } ) {
 	const columns = useMemo( () => {
 		const _columns = [ ...fields ];
-		if ( actions && actions.length ) {
+		if ( actions?.length ) {
 			_columns.push( {
 				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
 				id: 'actions',
@@ -83,6 +85,19 @@ export default function DataViews( {
 		return _columns;
 	}, [ fields, actions ] );
 
+	const columnVisibility = useMemo( () => {
+		if ( ! view.hiddenFields?.length ) {
+			return;
+		}
+		return view.hiddenFields.reduce(
+			( accumulator, fieldId ) => ( {
+				...accumulator,
+				[ fieldId ]: false,
+			} ),
+			{}
+		);
+	}, [ view.hiddenFields ] );
+
 	const dataView = useReactTable( {
 		data,
 		columns,
@@ -104,6 +119,7 @@ export default function DataViews( {
 				pageIndex: view.page,
 				pageSize: view.perPage,
 			},
+			columnVisibility: columnVisibility ?? EMPTY_OBJECT,
 		},
 		onSortingChange: ( sortingUpdater ) => {
 			onChangeView( ( currentView ) => {
@@ -135,6 +151,27 @@ export default function DataViews( {
 				};
 			} );
 		},
+		onColumnVisibilityChange: ( columnVisibilityUpdater ) => {
+			onChangeView( ( currentView ) => {
+				const hiddenFields = Object.entries(
+					columnVisibilityUpdater()
+				).reduce(
+					( accumulator, [ fieldId, value ] ) => {
+						if ( value ) {
+							return accumulator.filter(
+								( id ) => id !== fieldId
+							);
+						}
+						return [ ...accumulator, fieldId ];
+					},
+					[ ...( currentView.hiddenFields || [] ) ]
+				);
+				return {
+					...currentView,
+					hiddenFields,
+				};
+			} );
+		},
 		onGlobalFilterChange: ( value ) => {
 			onChangeView( { ...view, search: value, page: 0 } );
 		},

packages/edit-site/src/components/dataviews/view-actions.js

@@ -102,10 +102,10 @@ function PageSizeMenu( { dataView } ) {
 }
 
 function FieldsVisibilityMenu( { dataView } ) {
-	const hideableFields = dataView
+	const hidableFields = dataView
 		.getAllColumns()
 		.filter( ( columnn ) => columnn.getCanHide() );
-	if ( ! hideableFields?.length ) {
+	if ( ! hidableFields?.length ) {
 		return null;
 	}
 	return (
@@ -118,7 +118,7 @@ function FieldsVisibilityMenu( { dataView } ) {
 				</DropdownSubMenuTriggerV2>
 			}
 		>
-			{ hideableFields?.map( ( field ) => {
+			{ hidableFields?.map( ( field ) => {
 				return (
 					<DropdownMenuItemV2
 						key={ field.id }

packages/edit-site/src/components/page-pages/index.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useMemo } from '@wordpress/element';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -31,6 +32,9 @@ export default function PagePages() {
 			field: 'date',
 			direction: 'desc',
 		},
+		// All fields are visible by default, so it's
+		// better to keep track of the hidden ones.
+		hiddenFields: [ 'date' ],
 	} );
 	// Request post statuses to get the proper labels.
 	const { records: statuses } = useEntityRecords( 'root', 'status' );
@@ -117,6 +121,18 @@ export default function PagePages() {
 					postStatuses[ page.status ] ?? page.status,
 				enableSorting: false,
 			},
+			{
+				header: 'Date',
+				id: 'date',
+				cell: ( props ) => {
+					const formattedDate = dateI18n(
+						getSettings().formats.datetimeAbbreviated,
+						getDate( props.row.original.date )
+					);
+					return <time>{ formattedDate }</time>;
+				},
+				enableSorting: false,
+			},
 		],
 		[ postStatuses ]
 	);