DataViews: update field API to generate filters based on type (#55996)

WordPress · Nov 17, 2023 · cc426ad · cc426ad
1 parent 903778c
commit cc426ad
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 41 deletions.
diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md
@@ -154,11 +154,11 @@ Example:
 				<a href="...">{ item.author }</a>
 			);
 		},
+		type: 'enumeration',
 		elements: [
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
 		]
-		filters: [ 'in' ],
 		enableSorting: false
 	}
 ]
@@ -169,7 +169,7 @@ Example:
 -   `getValue`: function that returns the value of the field.
 -   `render`: function that renders the field.
 -   `elements`: the set of valid values for the field's value.
--   `filters`: what filter operators are available for the user to use over this field. Only `in` available at the moment.
+-   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment.
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 

diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js
@@ -22,28 +22,28 @@ const {
 	DropdownMenuItemV2,
 } = unlock( componentsPrivateApis );
 
-const VALID_OPERATORS = [ OPERATOR_IN ];
+// TODO: find a place where these constants can be shared across components.
+const ENUMERATION_TYPE = 'enumeration';
 
 export default function AddFilter( { fields, view, onChangeView } ) {
 	const filters = [];
 	fields.forEach( ( field ) => {
-		if ( ! field.filters ) {
+		if ( ! field.type ) {
 			return;
 		}
 
-		field.filters.forEach( ( filter ) => {
-			if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+		switch ( field.type ) {
+			case ENUMERATION_TYPE:
 				filters.push( {
 					field: field.id,
 					name: field.header,
-					operator: filter,
 					elements: field.elements || [],
 					isVisible: view.filters.some(
-						( f ) => f.field === field.id && f.operator === filter
+						( f ) =>
+							f.field === field.id && f.operator === OPERATOR_IN
 					),
 				} );
-			}
-		} );
+		}
 	} );
 
 	if ( filters.length === 0 ) {
@@ -92,7 +92,7 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 											...currentView.filters,
 											{
 												field: filter.field,
-												operator: 'in',
+												operator: OPERATOR_IN,
 												value: element.value,
 											},
 										],

diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
@@ -10,21 +10,20 @@ import { default as InFilter, OPERATOR_IN } from './in-filter';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 
-const VALID_OPERATORS = [ OPERATOR_IN ];
+const ENUMERATION_TYPE = 'enumeration';
 
 export default function Filters( { fields, view, onChangeView } ) {
 	const filters = [];
 	fields.forEach( ( field ) => {
-		if ( ! field.filters ) {
+		if ( ! field.type ) {
 			return;
 		}
 
-		field.filters.forEach( ( filter ) => {
-			if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+		switch ( field.type ) {
+			case ENUMERATION_TYPE:
 				filters.push( {
 					field: field.id,
 					name: field.header,
-					operator: filter,
 					elements: [
 						{
 							value: '',
@@ -33,30 +32,26 @@ export default function Filters( { fields, view, onChangeView } ) {
 						...( field.elements || [] ),
 					],
 					isVisible: view.filters.some(
-						( f ) => f.field === field.id && f.operator === filter
+						( f ) =>
+							f.field === field.id && f.operator === OPERATOR_IN
 					),
 				} );
-			}
-		} );
+		}
 	} );
 
-	const filterComponents = filters?.map( ( filter ) => {
+	const filterComponents = filters.map( ( filter ) => {
 		if ( ! filter.isVisible ) {
 			return null;
 		}
 
-		if ( OPERATOR_IN === filter.operator ) {
-			return (
-				<InFilter
-					key={ filter.field + '.' + filter.operator }
-					filter={ filter }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-			);
-		}
-
-		return null;
+		return (
+			<InFilter
+				key={ filter.field + '.' + filter.operator }
+				filter={ filter }
+				view={ view }
+				onChangeView={ onChangeView }
+			/>
+		);
 	} );
 
 	filterComponents.push(

diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -7,6 +7,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
+// TODO: find a place where these constants can be shared across components.
 export const OPERATOR_IN = 'in';
 
 export default ( { filter, view, onChangeView } ) => {

diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
@@ -52,6 +52,11 @@ const sortingItemsInfo = {
 	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
 };
 const sortIcons = { asc: chevronUp, desc: chevronDown };
+
+// TODO: find a place where these constants can be shared across components.
+const ENUMERATION_TYPE = 'enumeration';
+const OPERATOR_IN = 'in';
+
 function HeaderMenu( { dataView, header } ) {
 	if ( header.isPlaceholder ) {
 		return null;
@@ -68,12 +73,7 @@ function HeaderMenu( { dataView, header } ) {
 	const sortedDirection = header.column.getIsSorted();
 
 	let filter;
-	if (
-		header.column.columnDef.filters?.length > 0 &&
-		header.column.columnDef.filters.some(
-			( f ) => 'string' === typeof f && f === 'in'
-		)
-	) {
+	if ( header.column.columnDef.type === ENUMERATION_TYPE ) {
 		filter = {
 			field: header.column.columnDef.id,
 			elements: [
@@ -202,7 +202,8 @@ function HeaderMenu( { dataView, header } ) {
 														return (
 															field !==
 																filter.field ||
-															operator !== 'in'
+															operator !==
+																OPERATOR_IN
 														);
 													}
 												);

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -227,7 +227,7 @@ export default function PagePages() {
 						</a>
 					);
 				},
-				filters: [ 'in' ],
+				type: 'enumeration',
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
@@ -240,7 +240,7 @@ export default function PagePages() {
 				getValue: ( { item } ) =>
 					STATUSES.find( ( { value } ) => value === item.status )
 						?.label ?? item.status,
-				filters: [ 'in' ],
+				type: 'enumeration',
 				elements: STATUSES,
 				enableSorting: false,
 			},