DataViews: add support for NOT IN operator in filter

packages/dataviews/README.md

@@ -185,6 +185,8 @@ Example:
 -   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment.
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
+-   `filterBy`: configuration for the filters.
+    - `operators`: the list of operators supported by the field.
 
 ## Actions
 

packages/dataviews/src/add-filter.js

@@ -36,8 +36,7 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 					name: field.header,
 					elements: field.elements || [],
 					isVisible: view.filters.some(
-						( f ) =>
-							f.field === field.id && f.operator === OPERATOR_IN
+						( f ) => f.field === field.id
 					),
 				} );
 		}

packages/dataviews/src/constants.js

@@ -16,6 +16,7 @@ export const ENUMERATION_TYPE = 'enumeration';
 
 // Filter operators.
 export const OPERATOR_IN = 'in';
+export const OPERATOR_NOT_IN = 'notIn';
 
 // View layouts.
 export const LAYOUT_TABLE = 'table';

packages/dataviews/src/filter-summary.js

@@ -6,20 +6,72 @@ import {
 	privateApis as componentsPrivateApis,
 	Icon,
 } from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
+import { chevronDown, chevronRightSmall, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
+import { Children, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { OPERATOR_IN } from './constants';
+import { OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
 import { unlock } from './lock-unlock';
 
 const {
 	DropdownMenuV2: DropdownMenu,
-	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
 } = unlock( componentsPrivateApis );
 
+const FilterText = ( { activeElement, filterInView, filter } ) => {
+	if ( activeElement === undefined ) {
+		return filter.name;
+	}
+
+	if (
+		activeElement !== undefined &&
+		filterInView?.operator === OPERATOR_IN
+	) {
+		return sprintf(
+			/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is Admin". */
+			__( '%1$s is %2$s' ),
+			filter.name,
+			activeElement.label
+		);
+	}
+
+	if (
+		activeElement !== undefined &&
+		filterInView?.operator === OPERATOR_NOT_IN
+	) {
+		return sprintf(
+			/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not Admin". */
+			__( '%1$s is not %2$s' ),
+			filter.name,
+			activeElement.label
+		);
+	}
+
+	return sprintf(
+		/* translators: 1: Filter name e.g.: "Unknown status for Author". */
+		__( 'Unknown status for %1$s' ),
+		filter.name
+	);
+};
+
+function WithSeparators( { children } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <DropdownMenuSeparator /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
 export default function FilterSummary( { filter, view, onChangeView } ) {
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
 	const activeElement = filter.elements.find(
@@ -31,49 +83,139 @@ export default function FilterSummary( { filter, view, onChangeView } ) {
 			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 }
+					<FilterText
+						activeElement={ activeElement }
+						filterInView={ filterInView }
+						filter={ filter }
+					/>
 					<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
 				</Button>
 			}
 		>
-			{ 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,
-									},
-								],
-							} ) )
+			<WithSeparators>
+				<DropdownMenuGroup>
+					{ filter.elements.map( ( element ) => {
+						return (
+							<DropdownMenuItem
+								key={ element.value }
+								role="menuitemradio"
+								aria-checked={
+									activeElement?.value === element.value
+								}
+								prefix={
+									activeElement?.value === element.value && (
+										<Icon icon={ check } />
+									)
+								}
+								onSelect={ () =>
+									onChangeView( ( currentView ) => ( {
+										...currentView,
+										page: 1,
+										filters: [
+											...view.filters.filter(
+												( f ) =>
+													f.field !== filter.field
+											),
+											{
+												field: filter.field,
+												operator:
+													filterInView?.operator ||
+													filter.operators[ 0 ],
+												value:
+													activeElement?.value ===
+													element.value
+														? undefined
+														: element.value,
+											},
+										],
+									} ) )
+								}
+							>
+								{ element.label }
+							</DropdownMenuItem>
+						);
+					} ) }
+				</DropdownMenuGroup>
+				{ filter.operators.length > 1 && (
+					<DropdownSubMenu
+						trigger={
+							<DropdownSubMenuTrigger
+								suffix={
+									<>
+										{ filterInView.operator === OPERATOR_IN
+											? __( 'Is' )
+											: __( 'Is not' ) }
+										<Icon icon={ chevronRightSmall } />{ ' ' }
+									</>
+								}
+							>
+								{ __( 'Conditions' ) }
+							</DropdownSubMenuTrigger>
 						}
 					>
-						{ element.label }
-					</DropdownMenuCheckboxItem>
-				);
-			} ) }
+						<DropdownMenuItem
+							key="in-filter"
+							role="menuitemradio"
+							aria-checked={
+								filterInView?.operator === OPERATOR_IN
+							}
+							prefix={
+								filterInView?.operator === OPERATOR_IN && (
+									<Icon icon={ check } />
+								)
+							}
+							onSelect={ () =>
+								onChangeView( ( currentView ) => ( {
+									...currentView,
+									page: 1,
+									filters: [
+										...view.filters.filter(
+											( f ) => f.field !== filter.field
+										),
+										{
+											field: filter.field,
+											operator: OPERATOR_IN,
+											value: filterInView?.value,
+										},
+									],
+								} ) )
+							}
+						>
+							{ __( 'Is' ) }
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							key="not-in-filter"
+							role="menuitemradio"
+							aria-checked={
+								filterInView?.operator === OPERATOR_NOT_IN
+							}
+							prefix={
+								filterInView?.operator === OPERATOR_NOT_IN && (
+									<Icon icon={ check } />
+								)
+							}
+							onSelect={ () =>
+								onChangeView( ( currentView ) => ( {
+									...currentView,
+									page: 1,
+									filters: [
+										...view.filters.filter(
+											( f ) => f.field !== filter.field
+										),
+										{
+											field: filter.field,
+											operator: OPERATOR_NOT_IN,
+											value: filterInView?.value,
+										},
+									],
+								} ) )
+							}
+						>
+							{ __( 'Is not' ) }
+						</DropdownMenuItem>
+					</DropdownSubMenu>
+				) }
+			</WithSeparators>
 		</DropdownMenu>
 	);
 }

packages/dataviews/src/filters.js

@@ -4,7 +4,17 @@
 import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
-import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
+import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+
+const operatorsFromField = ( field ) => {
+	let operators = field.filterBy?.operators;
+	if ( ! operators || ! Array.isArray( operators ) ) {
+		operators = [ OPERATOR_IN, OPERATOR_NOT_IN ];
+	}
+	return operators.filter( ( operator ) =>
+		[ OPERATOR_IN, OPERATOR_NOT_IN ].includes( operator )
+	);
+};
 
 export default function Filters( { fields, view, onChangeView } ) {
 	const filters = [];
@@ -13,15 +23,24 @@ export default function Filters( { fields, view, onChangeView } ) {
 			return;
 		}
 
+		const operators = operatorsFromField( field );
+		if ( operators.length === 0 ) {
+			return;
+		}
+
 		switch ( field.type ) {
 			case ENUMERATION_TYPE:
 				filters.push( {
 					field: field.id,
 					name: field.header,
 					elements: field.elements || [],
+					operators,
 					isVisible: view.filters.some(
 						( f ) =>
-							f.field === field.id && f.operator === OPERATOR_IN
+							f.field === field.id &&
+							[ OPERATOR_IN, OPERATOR_NOT_IN ].includes(
+								f.operator
+							)
 					),
 				} );
 		}

packages/dataviews/src/index.js

@@ -6,4 +6,5 @@ export {
 	LAYOUT_LIST,
 	ENUMERATION_TYPE,
 	OPERATOR_IN,
+	OPERATOR_NOT_IN,
 } from './constants';