From 55c6a2cb31265f42860399cf294b93d5e19e4c1f Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 11 Dec 2023 14:44:15 +0200
Subject: [PATCH] DataViews: Experiment with field types and inline editing

---
 package-lock.json                             |  2 +
 packages/dataviews/package.json               |  1 +
 packages/dataviews/src/dataviews.js           |  7 +-
 .../dataviews/src/field-types/date-field.js   | 12 +++
 .../src/field-types/enumeration-field.js      | 42 +++++++++
 packages/dataviews/src/field-types/index.js   | 16 ++++
 .../dataviews/src/field-types/string-field.js | 27 ++++++
 packages/dataviews/src/style.scss             | 12 +++
 packages/dataviews/src/view-grid.js           | 10 +-
 packages/dataviews/src/view-table.js          | 94 ++++++++++++++++---
 .../src/components/page-pages/index.js        | 53 ++++++++---
 .../sidebar-dataviews/default-views.js        |  2 +-
 12 files changed, 244 insertions(+), 34 deletions(-)
 create mode 100644 packages/dataviews/src/field-types/date-field.js
 create mode 100644 packages/dataviews/src/field-types/enumeration-field.js
 create mode 100644 packages/dataviews/src/field-types/index.js
 create mode 100644 packages/dataviews/src/field-types/string-field.js

diff --git a/package-lock.json b/package-lock.json
index ded852521693f..a5fc8fac6886d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55032,6 +55032,7 @@
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
+				"@wordpress/date": "file:../date",
 				"@wordpress/element": "file:../element",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
@@ -70377,6 +70378,7 @@
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
+				"@wordpress/date": "file:../date",
 				"@wordpress/element": "file:../element",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index 1872480d759c3..b1ce415618c5c 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -31,6 +31,7 @@
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index 9e7b45d04ef87..54bd536b42dc8 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -15,6 +15,7 @@ import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
 import { VIEW_LAYOUTS } from './constants';
+import { FIELD_TYPES } from './field-types';
 
 export default function DataViews( {
 	view,
@@ -44,7 +45,11 @@ export default function DataViews( {
 	const _fields = useMemo( () => {
 		return fields.map( ( field ) => ( {
 			...field,
-			render: field.render || field.getValue,
+			render:
+				field.render ||
+				FIELD_TYPES[ field.fieldType ]?.render ||
+				field.getValue,
+			edit: field.edit || FIELD_TYPES[ field.fieldType ]?.edit,
 		} ) );
 	}, [ fields ] );
 	return (
diff --git a/packages/dataviews/src/field-types/date-field.js b/packages/dataviews/src/field-types/date-field.js
new file mode 100644
index 0000000000000..a8592eadd5bbc
--- /dev/null
+++ b/packages/dataviews/src/field-types/date-field.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+
+export function DateField( { item, field } ) {
+	const formattedDate = dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( field.getValue( { item } ) )
+	);
+	return <time>{ formattedDate }</time>;
+}
diff --git a/packages/dataviews/src/field-types/enumeration-field.js b/packages/dataviews/src/field-types/enumeration-field.js
new file mode 100644
index 0000000000000..a3b924c785494
--- /dev/null
+++ b/packages/dataviews/src/field-types/enumeration-field.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalVStack as VStack } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+
+export function EnumerationFieldEdit( { item, field } ) {
+	const currentValue = field.getValue( { item } );
+	return (
+		<VStack
+			spacing={ 2 }
+			justify="flex-start"
+			className="enumeration-field-edit-wrapper"
+		>
+			{ ( field.editElements || field.elements ).map( ( element ) => {
+				return (
+					<Button
+						key={ element.value.toString() }
+						className="enumeration-field-edit-item"
+						onClick={ () => {
+							if ( element.value !== currentValue ) {
+								field.setValue( {
+									value: element.value,
+									item,
+								} );
+							}
+						} }
+						icon={
+							element.value === currentValue ? check : undefined
+						}
+						style={ {
+							backgroundColor: element.color || undefined,
+						} }
+						disabled={ element.value === currentValue }
+					>
+						{ element.label }
+					</Button>
+				);
+			} ) }
+		</VStack>
+	);
+}
diff --git a/packages/dataviews/src/field-types/index.js b/packages/dataviews/src/field-types/index.js
new file mode 100644
index 0000000000000..f8c126ece8b6c
--- /dev/null
+++ b/packages/dataviews/src/field-types/index.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { DateField } from './date-field';
+import { StringFieldEdit } from './string-field';
+import { EnumerationFieldEdit } from './enumeration-field';
+
+export const FIELD_TYPES = {
+	date: {
+		render: DateField,
+	},
+	string: {
+		edit: StringFieldEdit,
+	},
+	enumeration: { edit: EnumerationFieldEdit },
+};
diff --git a/packages/dataviews/src/field-types/string-field.js b/packages/dataviews/src/field-types/string-field.js
new file mode 100644
index 0000000000000..2d2db275f9681
--- /dev/null
+++ b/packages/dataviews/src/field-types/string-field.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+export function StringFieldEdit( { item, field } ) {
+	const [ value, setValue ] = useState( field.getValue( { item } ) );
+	return (
+		<form
+			onSubmit={ ( event ) => {
+				event.preventDefault();
+				field.setValue( { value, item } );
+			} }
+		>
+			<TextControl
+				__nextHasNoMarginBottom
+				label={ field.header }
+				hideLabelFromVision
+				value={ value }
+				onChange={ setValue }
+				size="__unstable-large"
+				style={ { margin: 0 } }
+			/>
+		</form>
+	);
+}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index ab6c052e3a898..f89249ad3a2c1 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -242,3 +242,15 @@
 .dataviews-loading {
 	padding: 0 $grid-unit-40;
 }
+
+
+// TODO: change names/tidy
+.edit-field-popover {
+	.components-popover__content {
+		// TODO: check if this the best way to do it..
+		width: max-content;
+	}
+	.enumeration-field-edit-wrapper {
+		padding: $grid-unit-15;
+	}
+}
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index e2c34ba6749fa..f2df9b04ceb06 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -51,14 +51,17 @@ export default function ViewGrid( {
 					className="dataviews-view-grid__card"
 				>
 					<div className="dataviews-view-grid__media">
-						{ mediaField?.render( { item } ) }
+						{ mediaField?.render( { item, field: mediaField } ) }
 					</div>
 					<HStack
 						className="dataviews-view-grid__primary-field"
 						justify="space-between"
 					>
 						<FlexBlock>
-							{ primaryField?.render( { item } ) }
+							{ primaryField?.render( {
+								item,
+								field: primaryField,
+							} ) }
 						</FlexBlock>
 						<ItemActions
 							item={ item }
@@ -73,6 +76,7 @@ export default function ViewGrid( {
 						{ visibleFields.map( ( field ) => {
 							const renderedValue = field.render( {
 								item,
+								field,
 							} );
 							if ( ! renderedValue ) {
 								return null;
@@ -87,7 +91,7 @@ export default function ViewGrid( {
 										{ field.header }
 									</div>
 									<div className="dataviews-view-grid__field-value">
-										{ field.render( { item } ) }
+										{ renderedValue }
 									</div>
 								</VStack>
 							);
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index e34d99008657b..ca163470b8c51 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -12,13 +12,17 @@ import {
 	arrowDown,
 	chevronRightSmall,
 	funnel,
+	edit,
 } from '@wordpress/icons';
 import {
+	Popover,
 	Button,
 	Icon,
+	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
+	FlexBlock,
 } from '@wordpress/components';
-import { Children, Fragment } from '@wordpress/element';
+import { useState, useRef, Children, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -396,20 +400,11 @@ function ViewTable( {
 						{ usedData.map( ( item, index ) => (
 							<tr key={ getItemId?.( item ) || index }>
 								{ visibleFields.map( ( field ) => (
-									<td
+									<SingleCell
 										key={ field.id }
-										style={ {
-											width: field.width || undefined,
-											minWidth:
-												field.minWidth || undefined,
-											maxWidth:
-												field.maxWidth || undefined,
-										} }
-									>
-										{ field.render( {
-											item,
-										} ) }
-									</td>
+										field={ field }
+										item={ item }
+									/>
 								) ) }
 								{ !! actions?.length && (
 									<td>
@@ -433,4 +428,75 @@ function ViewTable( {
 	);
 }
 
+function SingleCell( { item, field } ) {
+	const ref = useRef();
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ isViewMode, setIsViewMode ] = useState( true );
+	// TODO: we probably need an `isEligible` function too..
+	// TODO: we need an `edit` function and a `setValue` function.. Can we simplify/combine?
+	const isEditable = !! field.edit;
+	return (
+		<td
+			style={ {
+				width: field.width || undefined,
+				minWidth: field.minWidth || undefined,
+				maxWidth: field.maxWidth || undefined,
+			} }
+			onMouseLeave={ () => setIsHovered( false ) }
+			onMouseEnter={ () => setIsHovered( true ) }
+		>
+			<>
+				<HStack>
+					<FlexBlock ref={ ref }>
+						{ field.render( { item, field } ) }
+					</FlexBlock>
+					<Button
+						icon={ edit }
+						onClick={ () => isViewMode && setIsViewMode( false ) }
+						style={ {
+							padding: 0,
+							visibility:
+								( isEditable && isHovered ) || ! isViewMode
+									? 'visible'
+									: 'hidden',
+						} }
+						disabled={ ! isViewMode }
+						size="compact"
+					/>
+				</HStack>
+				<EditPopover
+					field={ field }
+					item={ item }
+					isViewMode={ isViewMode }
+					setIsViewMode={ setIsViewMode }
+					fieldRef={ ref }
+				/>
+			</>
+		</td>
+	);
+}
+
+function EditPopover( { field, item, isViewMode, setIsViewMode, fieldRef } ) {
+	return (
+		<>
+			{ ! isViewMode && (
+				<Popover
+					placement="bottom-start"
+					className="edit-field-popover"
+					role="dialog"
+					// TODO: check
+					// The anchor element should be stored in local state rather than a plain React ref to ensure reactive updating when it changes.
+					anchor={ fieldRef?.current }
+					onFocusOutside={ () => {
+						setIsViewMode( true );
+					} }
+					animate={ false }
+				>
+					{ field.edit( { item, field } ) }
+				</Popover>
+			) }
+		</>
+	);
+}
+
 export default ViewTable;
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index c92ce35ebe46d..3ca368a205e13 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews';
@@ -117,12 +116,12 @@ function useView( type ) {
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
 const STATUSES = [
-	{ value: 'draft', label: __( 'Draft' ) },
-	{ value: 'future', label: __( 'Scheduled' ) },
-	{ value: 'pending', label: __( 'Pending Review' ) },
-	{ value: 'private', label: __( 'Private' ) },
-	{ value: 'publish', label: __( 'Published' ) },
-	{ value: 'trash', label: __( 'Trash' ) },
+	{ value: 'draft', label: __( 'Draft' ), color: 'white' },
+	{ value: 'future', label: __( 'Scheduled' ), color: '#60a45b' },
+	{ value: 'pending', label: __( 'Pending Review' ), color: '#dbb124' },
+	{ value: 'private', label: __( 'Private' ), color: 'gray' },
+	{ value: 'publish', label: __( 'Published' ), color: '#5b96a4' },
+	{ value: 'trash', label: __( 'Trash' ), color: 'red' },
 ];
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
@@ -130,6 +129,8 @@ export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
 	const [ pageId, setPageId ] = useState( null );
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
 
 	const onSelectionChange = ( items ) =>
 		setPageId( items?.length === 1 ? items[ 0 ].id : null );
@@ -212,7 +213,14 @@ export default function PagePages() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
+				fieldType: 'string',
 				getValue: ( { item } ) => item.title?.rendered || item.slug,
+				setValue: ( { value, item } ) => {
+					editEntityRecord( 'postType', 'page', item.id, {
+						title: value,
+					} );
+					saveEditedEntityRecord( 'postType', 'page', item.id );
+				},
 				render: ( { item } ) => {
 					return (
 						<VStack spacing={ 1 }>
@@ -257,11 +265,25 @@ export default function PagePages() {
 			{
 				header: __( 'Status' ),
 				id: 'status',
-				getValue: ( { item } ) =>
+				fieldType: ENUMERATION_TYPE,
+				// TODO: we need to clarify what `getValue` returns.
+				// Probably it should just return the raw data connection with the item,
+				// So in `author` probably return the `userId`..
+				getValue: ( { item } ) => item.status,
+				setValue: ( { value, item } ) => {
+					editEntityRecord( 'postType', 'page', item.id, {
+						status: value,
+					} );
+					saveEditedEntityRecord( 'postType', 'page', item.id );
+				},
+				render: ( { item } ) =>
 					STATUSES.find( ( { value } ) => value === item.status )
 						?.label ?? item.status,
 				type: ENUMERATION_TYPE,
 				elements: STATUSES,
+				editElements: STATUSES.filter( ( { value } ) =>
+					[ 'pending', 'draft', 'publish' ].includes( value )
+				),
 				enableSorting: false,
 				filterBy: {
 					operators: [ OPERATOR_IN ],
@@ -271,13 +293,14 @@ export default function PagePages() {
 				header: __( 'Date' ),
 				id: 'date',
 				getValue: ( { item } ) => item.date,
-				render: ( { item } ) => {
-					const formattedDate = dateI18n(
-						getSettings().formats.datetimeAbbreviated,
-						getDate( item.date )
-					);
-					return <time>{ formattedDate }</time>;
-				},
+				fieldType: 'date',
+			},
+			{
+				header: __( 'Modified' ),
+				id: 'modified-date',
+				getValue: ( { item } ) => item.modified,
+				fieldType: 'date',
+				enableSorting: false,
 			},
 		],
 		[ authors, view ]
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index 11652286e62d8..d8c20694e6ba5 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -21,7 +21,7 @@ const DEFAULT_PAGE_BASE = {
 	},
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
-	hiddenFields: [ 'date', 'featured-image' ],
+	hiddenFields: [ 'date', 'modified-date', 'featured-image' ],
 	layout: {},
 };