DataViews: introduce locked filters

packages/dataviews/CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### Features
 
+- Introduce locked filters, as filters that cannot be edited by the user. [#71075](https://github.com/WordPress/gutenberg/pull/71075)
 - Add "groupBy" support to the table layout. [#71055](https://github.com/WordPress/gutenberg/pull/71055)
 - Elements in the Field API can now provide an empty value that will be used instead of the default. [#70894](https://github.com/WordPress/gutenberg/pull/70894)
 - Support Ctrl + Click / Cmd + Click for multiselecting rows in the Table layout ([#70891](https://github.com/WordPress/gutenberg/pull/70891)).

packages/dataviews/README.md

@@ -193,6 +193,7 @@ Properties:
     -   `field`: which field this filter is bound to.
     -   `operator`: which type of filter it is. See "Operator types".
     -   `value`: the actual value selected by the user.
+    -   `isLocked`: whether the filter is locked (cannot be edited by the user).
 -   `perPage`: number of records to show per page.
 -   `page`: the page that is visible.
 -   `sort`:

packages/dataviews/src/components/dataviews-filters/filter.tsx

@@ -497,8 +497,9 @@ export default function Filter( {
 	}
 
 	const isPrimary = filter.isPrimary;
-	const hasValues = filterInView?.value !== undefined;
-	const canResetOrRemove = ! isPrimary || hasValues;
+	const isLocked = filterInView?.isLocked;
+	const hasValues = ! isLocked && filterInView?.value !== undefined;
+	const canResetOrRemove = ! isLocked && ( ! isPrimary || hasValues );
 	return (
 		<Dropdown
 			defaultOpen={ openedFilter === filter.field }
@@ -523,17 +524,26 @@ export default function Filter( {
 								{
 									'has-reset': canResetOrRemove,
 									'has-values': hasValues,
+									'is-not-clickable': isLocked,
 								}
 							) }
 							role="button"
-							tabIndex={ 0 }
-							onClick={ onToggle }
+							tabIndex={ isLocked ? -1 : 0 }
+							onClick={ () => {
+								if ( ! isLocked ) {
+									onToggle();
+								}
+							} }
 							onKeyDown={ ( event ) => {
-								if ( [ ENTER, SPACE ].includes( event.key ) ) {
+								if (
+									! isLocked &&
+									[ ENTER, SPACE ].includes( event.key )
+								) {
 									onToggle();
 									event.preventDefault();
 								}
 							} }
+							aria-disabled={ isLocked }
 							aria-pressed={ isOpen }
 							aria-expanded={ isOpen }
 							ref={ toggleRef }

packages/dataviews/src/components/dataviews-filters/index.tsx

@@ -36,6 +36,10 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 
 			const operators = field.filterBy.operators;
 			const isPrimary = !! field.filterBy?.isPrimary;
+			const isLocked =
+				view.filters?.some(
+					( f ) => f.field === field.id && !! f.isLocked
+				) ?? false;
 			filters.push( {
 				field: field.id,
 				name: field.label,
@@ -45,18 +49,29 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 				),
 				operators,
 				isVisible:
+					isLocked ||
 					isPrimary ||
 					!! view.filters?.some(
 						( f ) =>
 							f.field === field.id &&
 							ALL_OPERATORS.includes( f.operator )
 					),
 				isPrimary,
+				isLocked,
 			} );
 		} );
-		// Sort filters by primary property. We need the primary filters to be first.
-		// Then we sort by name.
+
+		// Sort filters by:
+		// - locked filters go first
+		// - primary filters go next
+		// - then, sort by name
 		filters.sort( ( a, b ) => {
+			if ( a.isLocked && ! b.isLocked ) {
+				return -1;
+			}
+			if ( ! a.isLocked && b.isLocked ) {
+				return 1;
+			}
 			if ( a.isPrimary && ! b.isPrimary ) {
 				return -1;
 			}

packages/dataviews/src/components/dataviews-filters/reset-filters.tsx

@@ -28,7 +28,8 @@ export default function ResetFilter( {
 		! view.search &&
 		! view.filters?.some(
 			( _filter ) =>
-				_filter.value !== undefined || ! isPrimary( _filter.field )
+				! _filter.isLocked &&
+				( _filter.value !== undefined || ! isPrimary( _filter.field ) )
 		);
 	return (
 		<Button
@@ -42,7 +43,8 @@ export default function ResetFilter( {
 					...view,
 					page: 1,
 					search: '',
-					filters: [],
+					filters:
+						view.filters?.filter( ( f ) => !! f.isLocked ) || [],
 				} );
 			} }
 		>

packages/dataviews/src/components/dataviews-filters/style.scss

@@ -80,11 +80,15 @@
 		align-items: center;
 		box-sizing: border-box;
 
+		&.is-not-clickable {
+			cursor: default;
+		}
+
 		&.has-reset {
 			padding-inline-end: $button-size-small + $grid-unit-05;
 		}
 
-		&:hover,
+		&:hover:not(&.is-not-clickable),
 		&:focus-visible,
 		&[aria-expanded="true"] {
 			background: $gray-200;

packages/dataviews/src/components/dataviews/index.tsx

@@ -7,7 +7,13 @@ import type { ReactNode, ComponentProps, ReactElement } from 'react';
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useContext, useMemo, useRef, useState } from '@wordpress/element';
+import {
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+	useEffect,
+} from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
 /**
@@ -170,10 +176,23 @@ function DataViews< Item >( {
 	}, [ selection, data, getItemId ] );
 
 	const filters = useFilters( _fields, view );
-	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>
-		( filters || [] ).some( ( filter ) => filter.isPrimary )
+	const hasPrimaryOrLockedFilters = useMemo(
+		() =>
+			( filters || [] ).some(
+				( filter ) => filter.isPrimary || filter.isLocked
+			),
+		[ filters ]
+	);
+	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >(
+		hasPrimaryOrLockedFilters
 	);
 
+	useEffect( () => {
+		if ( hasPrimaryOrLockedFilters && ! isShowingFilter ) {
+			setIsShowingFilter( true );
+		}
+	}, [ hasPrimaryOrLockedFilters, isShowingFilter ] );
+
 	return (
 		<DataViewsContext.Provider
 			value={ {

packages/dataviews/src/types.ts

@@ -309,6 +309,11 @@ export interface Filter {
 	 * The value to filter by.
 	 */
 	value: any;
+
+	/**
+	 * Whether the filter can be edited by the user.
+	 */
+	isLocked?: boolean;
 }
 
 export interface NormalizedFilter {
@@ -346,6 +351,11 @@ export interface NormalizedFilter {
 	 * Whether it is a primary filter.
 	 */
 	isPrimary: boolean;
+
+	/**
+	 * Whether the filter can be edited by the user.
+	 */
+	isLocked: boolean;
 }
 
 interface ViewBase {

packages/edit-site/src/components/post-list/index.js

@@ -223,26 +223,10 @@ export default function PostList( { postType } ) {
 		},
 		[ location.path, location.query.isCustom, history ]
 	);
-	const getActiveViewFilters = ( views, match ) => {
-		const found = views.find( ( { slug } ) => slug === match );
-		return found?.filters ?? [];
-	};
 
-	const { isLoading: isLoadingFields, fields: _fields } = usePostFields( {
+	const { isLoading: isLoadingFields, fields: fields } = usePostFields( {
 		postType,
 	} );
-	const fields = useMemo( () => {
-		const activeViewFilters = getActiveViewFilters(
-			defaultViews,
-			activeView
-		).map( ( { field } ) => field );
-		return _fields.map( ( field ) => ( {
-			...field,
-			...( activeViewFilters.includes( field.id )
-				? { filterBy: false }
-				: {} ),
-		} ) );
-	}, [ _fields, defaultViews, activeView ] );
 
 	const queryArgs = useMemo( () => {
 		const filters = {};
@@ -266,31 +250,6 @@ export default function PostList( { postType } ) {
 			}
 		} );
 
-		// The bundled views want data filtered without displaying the filter.
-		const activeViewFilters = getActiveViewFilters(
-			defaultViews,
-			activeView
-		);
-		activeViewFilters.forEach( ( filter ) => {
-			if (
-				filter.field === 'status' &&
-				filter.operator === OPERATOR_IS_ANY
-			) {
-				filters.status = filter.value;
-			}
-			if (
-				filter.field === 'author' &&
-				filter.operator === OPERATOR_IS_ANY
-			) {
-				filters.author = filter.value;
-			} else if (
-				filter.field === 'author' &&
-				filter.operator === OPERATOR_IS_NONE
-			) {
-				filters.author_exclude = filter.value;
-			}
-		} );
-
 		// We want to provide a different default item for the status filter
 		// than the REST API provides.
 		if ( ! filters.status || filters.status === '' ) {