From 99ed6531260f98750d9b1348d4fc01ea285cdf2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Thu, 19 Oct 2023 09:04:27 +0200
Subject: [PATCH] Pass search as a global filter, unattached from fields

---
 .../src/components/dataviews/dataviews.js     |  2 ++
 .../src/components/dataviews/filters.js       | 24 ++++++++++++-------
 .../src/components/page-pages/index.js        |  6 ++---
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index b488836a91f3eb..cf3515f9947c4f 100644
--- 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
index e30b3c9ca71bdf..7ce1cc8792fd06 100644
--- 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,14 +36,14 @@ 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 || '',
@@ -43,8 +51,8 @@ export default function Filters( { fields, view, onChangeView } ) {
 					},
 					...( 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/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index e2e3636903972a..66cea2ad21829d 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -133,9 +133,6 @@ export default function PagePages() {
 						</VStack>
 					);
 				},
-				filters: [
-					{ id: 'search', type: 'search', name: __( 'Search' ) },
-				],
 				maxWidth: 400,
 				sortingFn: 'alphanumeric',
 				enableHiding: false,
@@ -200,6 +197,8 @@ export default function PagePages() {
 		[ postStatuses, authors ]
 	);
 
+	const filters = useMemo( () => [ { id: 'search', type: 'search' } ] );
+
 	const trashPostAction = useTrashPostAction();
 	const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
 	const onChangeView = useCallback(
@@ -228,6 +227,7 @@ export default function PagePages() {
 			<DataViews
 				paginationInfo={ paginationInfo }
 				fields={ fields }
+				filters={ filters }
 				actions={ actions }
 				data={ pages || EMPTY_ARRAY }
 				isLoading={ isLoadingPages }