DataViews: implement multiple selection in filters

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

@@ -174,6 +174,8 @@ Example:
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 
+TODO: how to disable multiselection?
+
 ## Actions
 
 Array of operations that can be performed upon each record. Each action is an object with the following properties:

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

@@ -90,7 +90,7 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 											{
 												field: filter.field,
 												operator: OPERATOR_IN,
-												value: element.value,
+												value: [ element.value ],
 											},
 										],
 									} ) );

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

@@ -22,23 +22,30 @@ const {
 
 export default ( { filter, view, onChangeView } ) => {
 	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
-	const activeElement = filter.elements.find(
-		( element ) => element.value === filterInView?.value
-	);
+	const activeElementLabels = filter.elements
+		.filter( ( element ) => filterInView?.value?.includes( element.value ) )
+		.map( ( element ) => element.label );
 
 	return (
 		<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 }
+					{ activeElementLabels.length === 0 && filter.name }
+					{ activeElementLabels.length === 1 &&
+						sprintf(
+							/* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */
+							__( '%1$s is %2$s' ),
+							filter.name,
+							activeElementLabels[ 0 ]
+						) }
+					{ activeElementLabels.length > 1 &&
+						sprintf(
+							/* translators: 1: Filter name. 2: filter value. e.g.: "Author in Admin, Editor". */
+							__( '%1$s in %2$s' ),
+							filter.name,
+							activeElementLabels.join( ',' )
+						) }
 					<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
 				</Button>
 			}
@@ -48,8 +55,11 @@ export default ( { filter, view, onChangeView } ) => {
 					<DropdownMenuCheckboxItem
 						key={ element.value }
 						value={ element.value }
-						checked={ activeElement?.value === element.value }
-						onSelect={ () =>
+						checked={ activeElementLabels.includes(
+							element.label
+						) }
+						onSelect={ ( event ) => {
+							event.preventDefault();
 							onChangeView( ( currentView ) => ( {
 								...currentView,
 								page: 1,
@@ -60,15 +70,21 @@ export default ( { filter, view, onChangeView } ) => {
 									{
 										field: filter.field,
 										operator: OPERATOR_IN,
-										value:
-											activeElement?.value ===
+										value: filterInView.value.includes(
 											element.value
-												? undefined
-												: element.value,
+										)
+											? filterInView.value.filter(
+													( value ) =>
+														value !== element.value
+											  )
+											: [
+													...filterInView.value,
+													element.value,
+											  ],
 									},
 								],
-							} ) )
-						}
+							} ) );
+						} }
 					>
 						{ element.label }
 					</DropdownMenuCheckboxItem>

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

@@ -165,7 +165,11 @@ function HeaderMenu( { dataView, header } ) {
 										Object.values( columnFilter )[ 0 ];
 									// Intentionally use loose comparison, so it does type conversion.
 									// This covers the case where a top-level filter for the same field converts a number into a string.
-									isActive = element.value == value; // eslint-disable-line eqeqeq
+									/* eslint-disable eqeqeq */
+									isActive = value.some(
+										( v ) => element.value == v
+									);
+									/* eslint-enable eqeqeq */
 								}
 
 								return (
@@ -193,14 +197,27 @@ function HeaderMenu( { dataView, header } ) {
 														);
 													}
 												);
+											const currentValues =
+												( columnFilter &&
+													Object.values(
+														columnFilter
+													)[ 0 ] ) ||
+												[];
 
 											dataView.setColumnFilters( [
 												...otherFilters,
 												{
 													[ filter.field + ':in' ]:
 														isActive
-															? undefined
-															: element.value,
+															? currentValues.filter(
+																	( v ) =>
+																		v !==
+																		element.value
+															  )
+															: [
+																	...currentValues,
+																	element.value,
+															  ],
 												},
 											] );
 										} }

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

@@ -125,7 +125,7 @@ export default function PagePages() {
 				filter.field === 'status' &&
 				filter.operator === OPERATOR_IN
 			) {
-				filters.status = filter.value;
+				filters.status = filter.value.join( ',' );
 			}
 			if (
 				filter.field === 'author' &&

packages/edit-site/src/components/sidebar-dataviews/default-views.js

@@ -38,7 +38,11 @@ const DEFAULT_VIEWS = {
 			view: {
 				...DEFAULT_PAGE_BASE,
 				filters: [
-					{ field: 'status', operator: OPERATOR_IN, value: 'draft' },
+					{
+						field: 'status',
+						operator: OPERATOR_IN,
+						value: [ 'draft' ],
+					},
 				],
 			},
 		},
@@ -49,7 +53,11 @@ const DEFAULT_VIEWS = {
 			view: {
 				...DEFAULT_PAGE_BASE,
 				filters: [
-					{ field: 'status', operator: OPERATOR_IN, value: 'trash' },
+					{
+						field: 'status',
+						operator: OPERATOR_IN,
+						value: [ 'trash' ],
+					},
 				],
 			},
 		},