DataViews: update filter component

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

@@ -54,10 +54,10 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 				<Button
 					disabled={ filters.length === view.filters?.length }
 					__experimentalIsFocusable
-					icon={ plus }
 					variant="tertiary"
 					size="compact"
 				>
+					<Icon icon={ plus } style={ { flexShrink: 0 } } />
 					{ __( 'Add filter' ) }
 				</Button>
 			}

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

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
@@ -23,13 +18,7 @@ export default function Filters( { fields, view, onChangeView } ) {
 				filters.push( {
 					field: field.id,
 					name: field.header,
-					elements: [
-						{
-							value: '',
-							label: __( 'All' ),
-						},
-						...( field.elements || [] ),
-					],
+					elements: field.elements || [],
 					isVisible: view.filters.some(
 						( f ) =>
 							f.field === field.id && f.operator === OPERATOR_IN

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

@@ -2,65 +2,78 @@
  * WordPress dependencies
  */
 import {
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
-	SelectControl,
+	Button,
+	privateApis as componentsPrivateApis,
+	Icon,
 } from '@wordpress/components';
+import { chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { OPERATOR_IN } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
+} = unlock( componentsPrivateApis );
 
 export default ( { filter, view, onChangeView } ) => {
-	const valueFound = view.filters.find(
-		( f ) => f.field === filter.field && f.operator === OPERATOR_IN
+	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const activeElement = filter.elements.find(
+		( element ) => element.value === filterInView?.value
 	);
 
-	const activeValue =
-		! valueFound || ! valueFound.hasOwnProperty( 'value' )
-			? ''
-			: valueFound.value;
-
-	const id = `dataviews__filters-in-${ filter.field }`;
-
 	return (
-		<SelectControl
-			id={ id }
-			__nextHasNoMarginBottom
-			value={ activeValue }
-			prefix={
-				<InputControlPrefixWrapper
-					as="label"
-					htmlFor={ id }
-					className="dataviews__select-control-prefix"
-				>
-					{ sprintf(
-						/* translators: filter name. */
-						__( '%s:' ),
-						filter.name
-					) }
-				</InputControlPrefixWrapper>
+		<DropdownMenu
+			key={ filter.field }
+			trigger={
+				<Button variant="tertiary" size="compact" label={ filter.name }>
+					{ activeElement !== undefined
+						? sprintf(
+								/* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */
+								__( '%1$s is %2$s' ),
+								filter.name,
+								activeElement.label
+						  )
+						: filter.name }
+					<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
+				</Button>
 			}
-			options={ filter.elements }
-			onChange={ ( value ) => {
-				const filters = view.filters.filter(
-					( f ) =>
-						f.field !== filter.field || f.operator !== OPERATOR_IN
+		>
+			{ filter.elements.map( ( element ) => {
+				return (
+					<DropdownMenuCheckboxItem
+						key={ element.value }
+						value={ element.value }
+						checked={ activeElement?.value === element.value }
+						onSelect={ () =>
+							onChangeView( ( currentView ) => ( {
+								...currentView,
+								page: 1,
+								filters: [
+									...view.filters.filter(
+										( f ) => f.field !== filter.field
+									),
+									{
+										field: filter.field,
+										operator: OPERATOR_IN,
+										value:
+											activeElement?.value ===
+											element.value
+												? undefined
+												: element.value,
+									},
+								],
+							} ) )
+						}
+					>
+						{ element.label }
+					</DropdownMenuCheckboxItem>
 				);
-
-				filters.push( {
-					field: filter.field,
-					operator: OPERATOR_IN,
-					value,
-				} );
-
-				onChangeView( ( currentView ) => ( {
-					...currentView,
-					page: 1,
-					filters,
-				} ) );
-			} }
-		/>
+			} ) }
+		</DropdownMenu>
 	);
 };

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

@@ -73,13 +73,7 @@ function HeaderMenu( { dataView, header } ) {
 	if ( header.column.columnDef.type === ENUMERATION_TYPE ) {
 		filter = {
 			field: header.column.columnDef.id,
-			elements: [
-				{
-					value: '',
-					label: __( 'All' ),
-				},
-				...( header.column.columnDef.elements || [] ),
-			],
+			elements: header.column.columnDef.elements || [],
 		};
 	}
 	const isFilterable = !! filter;
@@ -166,11 +160,6 @@ function HeaderMenu( { dataView, header } ) {
 										)[ 0 ] === filter.field
 								);
 
-								// Set the empty item as active if the filter is not set.
-								if ( ! columnFilter && element.value === '' ) {
-									isActive = true;
-								}
-
 								if ( columnFilter ) {
 									const value =
 										Object.values( columnFilter )[ 0 ];
@@ -205,19 +194,15 @@ function HeaderMenu( { dataView, header } ) {
 													}
 												);
 
-											if ( element.value === '' ) {
-												dataView.setColumnFilters(
-													otherFilters
-												);
-											} else {
-												dataView.setColumnFilters( [
-													...otherFilters,
-													{
-														[ filter.field +
-														':in' ]: element.value,
-													},
-												] );
-											}
+											dataView.setColumnFilters( [
+												...otherFilters,
+												{
+													[ filter.field + ':in' ]:
+														isActive
+															? undefined
+															: element.value,
+												},
+											] );
 										} }
 									>
 										{ element.label }