DataViews: centralize the view definition and rename (#56693)

- `list` to `table` and update the table icon to `blockTable` - `side-by-side` to `list`
WordPress · Dec 1, 2023 · e6559fd · e6559fd
1 parent 6a793de
commit e6559fd
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 89 deletions.
diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md
@@ -36,7 +36,7 @@ Example:
 
 ```js
 {
-	type: 'list',
+	type: LAYOUT_TABLE,
 	perPage: 5,
 	page: 1,
 	sort: {
@@ -53,7 +53,7 @@ Example:
 }
 ```
 
--   `type`: view type, one of `list` or `grid`.
+-   `type`: view type, one of `table`, `grid`, or `side-by-side`.
 -   `perPage`: number of records to show per page.
 -   `page`: the page that is visible.
 -   `sort.field`: field used for sorting the dataset.
@@ -75,9 +75,9 @@ The view is a representation of the visible state of the dataset. Note, however,
 The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider.
 
 ```js
-function MyCustomPageList() {
+function MyCustomPageTable() {
 	const [ view, setView ] = useState( {
-		type: 'list',
+		type: TABLE_LAYOUT,
 		perPage: 5,
 		page: 1,
 		sort: {

diff --git a/packages/edit-site/src/components/dataviews/constants.js b/packages/edit-site/src/components/dataviews/constants.js
@@ -1,5 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { blockTable, category, drawerLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewList from './view-list';
+import ViewGrid from './view-grid';
+import ViewSideBySide from './view-side-by-side';
+
 // Field types.
 export const ENUMERATION_TYPE = 'enumeration';
 
 // Filter operators.
 export const OPERATOR_IN = 'in';
+
+// View layouts.
+export const LAYOUT_TABLE = 'table';
+export const LAYOUT_GRID = 'grid';
+export const LAYOUT_LIST = 'list';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewList,
+		icon: blockTable,
+		supports: {
+			preview: false,
+		},
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+		supports: {
+			preview: false,
+		},
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewSideBySide,
+		icon: drawerLeft,
+		supports: {
+			preview: true,
+		},
+	},
+];
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -14,24 +14,7 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
-import ViewList from './view-list';
-import ViewGrid from './view-grid';
-import ViewSideBySide from './view-side-by-side';
-
-// To do: convert to view type registry.
-export const viewTypeSupportsMap = {
-	list: {},
-	grid: {},
-	'side-by-side': {
-		preview: true,
-	},
-};
-
-const viewTypeMap = {
-	list: ViewList,
-	grid: ViewGrid,
-	'side-by-side': ViewSideBySide,
-};
+import { VIEW_LAYOUTS } from './constants';
 
 export default function DataViews( {
 	view,
@@ -46,7 +29,9 @@ export default function DataViews( {
 	paginationInfo,
 	supportedLayouts,
 } ) {
-	const ViewComponent = viewTypeMap[ view.type ];
+	const ViewComponent = VIEW_LAYOUTS.find(
+		( v ) => v.type === view.type
+	).component;
 	const _fields = useMemo( () => {
 		return fields.map( ( field ) => ( {
 			...field,

diff --git a/packages/edit-site/src/components/dataviews/index.js b/packages/edit-site/src/components/dataviews/index.js
@@ -1 +1,9 @@
-export { default as DataViews, viewTypeSupportsMap } from './dataviews';
+export { default as DataViews } from './dataviews';
+export {
+	VIEW_LAYOUTS,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	LAYOUT_LIST,
+	ENUMERATION_TYPE,
+	OPERATOR_IN,
+} from './constants';
diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
@@ -22,7 +22,7 @@
 	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
-.dataviews-list-view {
+.dataviews-table-view {
 	width: 100%;
 	text-indent: 0;
 	border-color: inherit;

diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -6,21 +6,14 @@ import {
 	Icon,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import {
-	chevronRightSmall,
-	check,
-	formatListBullets,
-	arrowUp,
-	arrowDown,
-	category,
-	columns,
-} from '@wordpress/icons';
+import { chevronRightSmall, check, arrowUp, arrowDown } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -30,32 +23,17 @@ const {
 	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
 } = unlock( componentsPrivateApis );
 
-const availableViews = [
-	{
-		id: 'list',
-		label: __( 'List' ),
-	},
-	{
-		id: 'grid',
-		label: __( 'Grid' ),
-	},
-	{
-		id: 'side-by-side',
-		label: __( 'Side by side' ),
-	},
-];
-
 function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
-	let _availableViews = availableViews;
+	let _availableViews = VIEW_LAYOUTS;
 	if ( supportedLayouts ) {
 		_availableViews = _availableViews.filter( ( _view ) =>
-			supportedLayouts.includes( _view.id )
+			supportedLayouts.includes( _view.type )
 		);
 	}
 	if ( _availableViews.length === 1 ) {
 		return null;
 	}
-	const activeView = _availableViews.find( ( v ) => view.type === v.id );
+	const activeView = _availableViews.find( ( v ) => view.type === v.type );
 	return (
 		<DropdownSubMenu
 			trigger={
@@ -74,16 +52,19 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 			{ _availableViews.map( ( availableView ) => {
 				return (
 					<DropdownMenuItem
-						key={ availableView.id }
+						key={ availableView.type }
 						prefix={
-							availableView.id === view.type && (
+							availableView.type === view.type && (
 								<Icon icon={ check } />
 							)
 						}
 						onSelect={ ( event ) => {
 							// We need to handle this on DropDown component probably..
 							event.preventDefault();
-							onChangeView( { ...view, type: availableView.id } );
+							onChangeView( {
+								...view,
+								type: availableView.type,
+							} );
 						} }
 						// TODO: check about role and a11y.
 						role="menuitemcheckbox"
@@ -276,12 +257,6 @@ function SortMenu( { fields, view, onChangeView } ) {
 	);
 }
 
-const VIEW_TYPE_ICONS = {
-	list: formatListBullets,
-	grid: category,
-	'side-by-side': columns,
-};
-
 export default function ViewActions( {
 	fields,
 	view,
@@ -295,7 +270,10 @@ export default function ViewActions( {
 					variant="tertiary"
 					size="compact"
 					icon={
-						VIEW_TYPE_ICONS[ view.type ] || VIEW_TYPE_ICONS.list
+						VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+							?.icon ||
+						VIEW_LAYOUTS.find( ( v ) => v.type === LAYOUT_TABLE )
+							.icon
 					}
 					label={ __( 'View options' ) }
 				/>

diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
@@ -443,9 +443,9 @@ function ViewList( {
 		return <h3>{ __( 'Loading' ) }</h3>;
 	}
 	return (
-		<div className="dataviews-list-view-wrapper">
+		<div className="dataviews-table-view-wrapper">
 			{ hasRows && (
-				<table className="dataviews-list-view">
+				<table className="dataviews-table-view">
 					<thead>
 						{ dataView.getHeaderGroups().map( ( headerGroup ) => (
 							<tr key={ headerGroup.id }>

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -18,7 +18,14 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews, viewTypeSupportsMap } from '../dataviews';
+import {
+	DataViews,
+	VIEW_LAYOUTS,
+	ENUMERATION_TYPE,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	OPERATOR_IN,
+} from '../dataviews';
 import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
 import {
 	trashPostAction,
@@ -31,13 +38,12 @@ import {
 import SideEditor from './side-editor';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
-import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
 const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 const defaultConfigPerViewType = {
-	list: {},
-	grid: {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {
 		mediaField: 'featured-image',
 		primaryField: 'title',
 	},
@@ -205,7 +211,9 @@ export default function PagePages() {
 									} }
 									onClick={ ( event ) => {
 										if (
-											viewTypeSupportsMap[ type ].preview
+											VIEW_LAYOUTS.find(
+												( v ) => v.type === type
+											)?.supports?.preview
 										) {
 											event.preventDefault();
 											setSelection( [ item.id ] );
@@ -309,7 +317,8 @@ export default function PagePages() {
 					onChangeView={ onChangeView }
 				/>
 			</Page>
-			{ viewTypeSupportsMap[ view.type ].preview && (
+			{ VIEW_LAYOUTS.find( ( v ) => v.type === view.type )?.supports
+				?.preview && (
 				<Page>
 					<div className="edit-site-page-pages-preview">
 						{ selection.length === 1 && (

diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -31,8 +31,13 @@ import Page from '../page';
 import Link from '../routes/link';
 import { useAddedBy, AvatarImage } from '../list/added-by';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-import { DataViews } from '../dataviews';
-import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
+import {
+	DataViews,
+	ENUMERATION_TYPE,
+	OPERATOR_IN,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+} from '../dataviews';
 import {
 	useResetTemplateAction,
 	deleteTemplateAction,
@@ -48,15 +53,15 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 const EMPTY_ARRAY = [];
 
 const defaultConfigPerViewType = {
-	list: {},
-	grid: {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {
 		mediaField: 'preview',
 		primaryField: 'title',
 	},
 };
 
 const DEFAULT_VIEW = {
-	type: 'list',
+	type: LAYOUT_TABLE,
 	search: '',
 	page: 1,
 	perPage: 20,
@@ -338,7 +343,7 @@ export default function DataviewsTemplates() {
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				supportedLayouts={ [ 'list', 'grid' ] }
+				supportedLayouts={ [ LAYOUT_TABLE, LAYOUT_GRID ] }
 			/>
 		</Page>
 	);

diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { formatListBullets, category, drawerLeft } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 
@@ -16,17 +15,9 @@ import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import { unlock } from '../../lock-unlock';
+import { VIEW_LAYOUTS } from '../dataviews';
 const { useLocation } = unlock( routerPrivateApis );
 
-function getDataViewIcon( type ) {
-	const icons = {
-		list: formatListBullets,
-		grid: category,
-		'side-by-side': drawerLeft,
-	};
-	return icons[ type ];
-}
-
 export default function DataViewItem( {
 	title,
 	slug,
@@ -41,7 +32,8 @@ export default function DataViewItem( {
 		params: { path },
 	} = useLocation();
 
-	const iconToUse = icon || getDataViewIcon( type );
+	const iconToUse =
+		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
 	const linkInfo = useLink( {
 		path,