DataViews: pass search filter as global, unattached from fields (#5…

…5475)
WordPress · Oct 19, 2023 · 8f65e35 · 8f65e35
1 parent fba216c
commit 8f65e35
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -20,6 +20,7 @@ export default function DataViews( {
 	view,
 	onChangeView,
 	fields,
+	filters,
 	actions,
 	data,
 	isLoading = false,
@@ -38,6 +39,7 @@ export default function DataViews( {
 				<HStack>
 					<HStack justify="start">
 						<Filters
+							filters={ filters }
 							fields={ fields }
 							view={ view }
 							onChangeView={ onChangeView }

diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
@@ -9,8 +9,16 @@ import { __ } from '@wordpress/i18n';
 import TextFilter from './text-filter';
 import InFilter from './in-filter';
 
-export default function Filters( { fields, view, onChangeView } ) {
-	const filters = {};
+export default function Filters( { filters, fields, view, onChangeView } ) {
+	const filterIndex = {};
+	filters.forEach( ( filter ) => {
+		if ( 'object' !== typeof filter || ! filter?.id || ! filter?.type ) {
+			return;
+		}
+
+		filterIndex[ filter.id ] = filter;
+	} );
+
 	fields.forEach( ( field ) => {
 		if ( ! field.filters ) {
 			return;
@@ -19,7 +27,7 @@ export default function Filters( { fields, view, onChangeView } ) {
 		field.filters.forEach( ( filter ) => {
 			let id = field.id;
 			if ( 'string' === typeof filter ) {
-				filters[ id ] = {
+				filterIndex[ id ] = {
 					id,
 					name: field.header,
 					type: filter,
@@ -28,23 +36,23 @@ export default function Filters( { fields, view, onChangeView } ) {
 
 			if ( 'object' === typeof filter ) {
 				id = filter.id || field.id;
-				filters[ id ] = {
+				filterIndex[ id ] = {
 					id,
 					name: filter.name || field.header,
 					type: filter.type,
 				};
 			}
 
-			if ( 'enumeration' === filters[ id ]?.type ) {
+			if ( 'enumeration' === filterIndex[ id ]?.type ) {
 				const elements = [
 					{
 						value: filter.resetValue || '',
 						label: filter.resetLabel || __( 'All' ),
 					},
 					...( field.elements || [] ),
 				];
-				filters[ id ] = {
-					...filters[ id ],
+				filterIndex[ id ] = {
+					...filterIndex[ id ],
 					elements,
 				};
 			}
@@ -53,7 +61,7 @@ export default function Filters( { fields, view, onChangeView } ) {
 
 	return (
 		view.visibleFilters?.map( ( filterName ) => {
-			const filter = filters[ filterName ];
+			const filter = filterIndex[ filterName ];
 
 			if ( ! filter ) {
 				return null;

diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js
@@ -28,7 +28,7 @@ export default function TextFilter( { filter, view, onChangeView } ) {
 			},
 		} ) );
 	}, [ debouncedSearch ] );
-	const searchLabel = __( 'Filter list' );
+	const searchLabel = filter?.name || __( 'Filter list' );
 	return (
 		<SearchControl
 			onChange={ setSearch }

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -157,9 +157,6 @@ export default function PagePages() {
 						</VStack>
 					);
 				},
-				filters: [
-					{ id: 'search', type: 'search', name: __( 'Search' ) },
-				],
 				maxWidth: 400,
 				sortingFn: 'alphanumeric',
 				enableHiding: false,
@@ -219,6 +216,10 @@ export default function PagePages() {
 		[ statuses, authors ]
 	);
 
+	const filters = useMemo( () => [
+		{ id: 'search', type: 'search', name: __( 'Filter list' ) },
+	] );
+
 	const trashPostAction = useTrashPostAction();
 	const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
 	const onChangeView = useCallback(
@@ -247,6 +248,7 @@ export default function PagePages() {
 			<DataViews
 				paginationInfo={ paginationInfo }
 				fields={ fields }
+				filters={ filters }
 				actions={ actions }
 				data={ pages || EMPTY_ARRAY }
 				isLoading={ isLoadingPages }