DataViews: extract search from filters (#55722)

packages/edit-site/src/components/dataviews/README.md

@@ -9,7 +9,6 @@ This file documents the DataViews UI component, which provides an API to render
 	view={ view }
 	onChangeView={ onChangeView }
 	fields={ fields }
-	filters={ filters }
 	actions={ [ trashPostAction ] }
 	paginationInfo={ { totalItems, totalPages } }
 />
@@ -43,12 +42,12 @@ Example:
 		field: 'date',
 		direction: 'desc',
 	},
+	search: '',
 	filters: {
-		search: '',
 		author: 2,
 		status: 'publish, draft'
 	},
-	visibleFilters: [ 'search', 'author', 'status' ],
+	visibleFilters: [ 'author', 'status' ],
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
 }
@@ -59,6 +58,7 @@ Example:
 - `page`: the page that is visible.
 - `sort.field`: field used for sorting the dataset.
 - `sort.direction`: the direction to use for sorting, one of `asc` or `desc`.
+- `search`: the text search applied to the dataset.
 - `filters`: the filters applied to the dataset. See filters section.
 - `visibleFilters`: the `id` of the filters that are visible in the UI.
 - `hiddenFields`: the `id` of the fields that are hidden in the UI.
@@ -82,6 +82,7 @@ function MyCustomPageList() {
 			page: view.page,
 			order: view.sort?.direction,
 			orderby: view.sort?.field
+			search: view.search,
 			...view.filters
 		} ),
 		[ view ]
@@ -133,10 +134,7 @@ Example:
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
 		]
-		filters: [
-			'enumeration'
-			{ id: 'author_search', type: 'search', name: __( 'Search by author' ) }
-		],
+		filters: [ 'enumeration' ],
 	}
 ]
 ```
@@ -150,34 +148,26 @@ Example:
 
 ## Filters
 
-Filters describe the conditions a record should match to be listed as part of the dataset.
-
-Filters can be provided globally, as a property of the `DataViews` component, or per field, should they be considered part of a fields' description.
+Filters describe the conditions a record should match to be listed as part of the dataset. Filters are provided per field.
 
 ```js
 const field = [
 	{
 		id: 'author',
-		filters: [
-			'enumeration'
-			{ id: 'author_search', type: 'search', name: __( 'Search by author' ) }
-		],
+		filters: [ 'enumeration' ],
 	}
 ];
 
 <DataViews
 	fields={ fields }
-	filters={ [
-		{ id: 'search', type: 'search', name: __( 'Filter list' ) }
-	] }
 />
 ```
 
 A filter is an object that may contain the following properties:
 
 - `id`: unique identifier for the filter. Matches the entity query param. Field filters may omit it, in which case the field's `id` will be used.
 - `name`: nice looking name for the filter. Field filters may omit it, in which case the field's `header` will be used.
-- `type`: the type of filter. One of `search` or `enumeration`.
+- `type`: the type of filter. Only `enumeration` is supported at the moment.
 - `elements`: for filters of type `enumeration`, the list of options to show. A one-dimensional array of object with value/label keys, as in `[ { value: 1, label: "Value name" } ]`.
 	- `value`: what's serialized into the view's filters.
 	- `label`: nice-looking name for users.

packages/edit-site/src/components/dataviews/dataviews.js

@@ -14,13 +14,15 @@ import ViewList from './view-list';
 import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
+import TextFilter from './text-filter';
 import { ViewGrid } from './view-grid';
 
 export default function DataViews( {
 	view,
 	onChangeView,
 	fields,
-	filters,
+	search = true,
+	searchLabel = undefined,
 	actions,
 	data,
 	isLoading = false,
@@ -38,8 +40,14 @@ export default function DataViews( {
 			<VStack spacing={ 4 } justify="flex-start">
 				<HStack>
 					<HStack justify="start">
+						{ search && (
+							<TextFilter
+								label={ searchLabel }
+								view={ view }
+								onChangeView={ onChangeView }
+							/>
+						) }
 						<Filters
-							filters={ filters }
 							fields={ fields }
 							view={ view }
 							onChangeView={ onChangeView }

packages/edit-site/src/components/dataviews/filters.js

@@ -6,19 +6,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TextFilter from './text-filter';
 import InFilter from './in-filter';
 
-export default function Filters( { filters, fields, view, onChangeView } ) {
+export default function 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;
@@ -67,16 +58,6 @@ export default function Filters( { filters, fields, view, onChangeView } ) {
 				return null;
 			}
 
-			if ( filter.type === 'search' ) {
-				return (
-					<TextFilter
-						key={ filterName }
-						filter={ filter }
-						view={ view }
-						onChangeView={ onChangeView }
-					/>
-				);
-			}
 			if ( filter.type === 'enumeration' ) {
 				return (
 					<InFilter

packages/edit-site/src/components/dataviews/provider.js

@@ -28,8 +28,8 @@ export const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All s
 const DEFAULT_VIEWS = {
 	page: {
 		type: 'list',
+		search: '',
 		filters: {
-			search: '',
 			status: DEFAULT_STATUSES,
 		},
 		page: 1,
@@ -38,7 +38,7 @@ const DEFAULT_VIEWS = {
 			field: 'date',
 			direction: 'desc',
 		},
-		visibleFilters: [ 'search', 'author', 'status' ],
+		visibleFilters: [ 'author', 'status' ],
 		// All fields are visible by default, so it's
 		// better to keep track of the hidden ones.
 		hiddenFields: [ 'date', 'featured-image' ],

packages/edit-site/src/components/dataviews/text-filter.js

@@ -10,12 +10,12 @@ import { SearchControl } from '@wordpress/components';
  */
 import useDebouncedInput from '../../utils/use-debounced-input';
 
-export default function TextFilter( { filter, view, onChangeView } ) {
+export default function TextFilter( { label, view, onChangeView } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
-		view.filters[ filter.id ]
+		view.search
 	);
 	useEffect( () => {
-		setSearch( view.filters[ filter.id ] );
+		setSearch( view.search );
 	}, [ view ] );
 	const onChangeViewRef = useRef( onChangeView );
 	useEffect( () => {
@@ -25,13 +25,10 @@ export default function TextFilter( { filter, view, onChangeView } ) {
 		onChangeViewRef.current( ( currentView ) => ( {
 			...currentView,
 			page: 1,
-			filters: {
-				...currentView.filters,
-				[ filter.id ]: debouncedSearch,
-			},
+			search: debouncedSearch,
 		} ) );
 	}, [ debouncedSearch ] );
-	const searchLabel = filter?.name || __( 'Filter list' );
+	const searchLabel = label || __( 'Filter list' );
 	return (
 		<SearchControl
 			onChange={ setSearch }

packages/edit-site/src/components/page-pages/index.js

@@ -83,6 +83,7 @@ export default function PagePages() {
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
+			search: view.search,
 			...view.filters,
 		} ),
 		[ view ]
@@ -206,10 +207,6 @@ export default function PagePages() {
 		[ statuses, authors ]
 	);
 
-	const filters = useMemo( () => [
-		{ id: 'search', type: 'search', name: __( 'Filter list' ) },
-	] );
-
 	const trashPostAction = useTrashPostAction();
 	const editPostAction = useEditPostAction();
 	const actions = useMemo(
@@ -247,7 +244,6 @@ export default function PagePages() {
 			<DataViews
 				paginationInfo={ paginationInfo }
 				fields={ fields }
-				filters={ filters }
 				actions={ actions }
 				data={ pages || EMPTY_ARRAY }
 				isLoading={ isLoadingPages }