From e50aabe77c228b02c2d8b02cb1be4454db370cbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 8 Nov 2023 15:11:58 +0100
Subject: [PATCH] DataViews: add control to reset all filters at once (#55955)

* Add reset filters button

* Set proper spacing/alignment for control

* Fix lint

* Also reset search

* Disable reset button if no filters active

* Properly manage keys

* Managed undefined visibleFilters
---
 .../src/components/dataviews/filters.js       | 58 ++++++++++++-------
 .../src/components/dataviews/reset-filters.js | 26 +++++++++
 2 files changed, 63 insertions(+), 21 deletions(-)
 create mode 100644 packages/edit-site/src/components/dataviews/reset-filters.js

diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
index 655bd83732293..e34ba84040a95 100644
--- a/packages/edit-site/src/components/dataviews/filters.js
+++ b/packages/edit-site/src/components/dataviews/filters.js
@@ -7,6 +7,8 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { default as InFilter, OPERATOR_IN } from './in-filter';
+import ResetFilters from './reset-filters';
+
 const VALID_OPERATORS = [ OPERATOR_IN ];
 
 export default function Filters( { fields, view, onChangeView } ) {
@@ -34,27 +36,41 @@ export default function Filters( { fields, view, onChangeView } ) {
 		} );
 	} );
 
-	return view.visibleFilters?.map( ( fieldName ) => {
-		const visibleFiltersForField = filtersRegistered.filter(
-			( f ) => f.field === fieldName
-		);
+	const visibleFilters = view.visibleFilters
+		?.map( ( fieldName ) => {
+			const visibleFiltersForField = filtersRegistered.filter(
+				( f ) => f.field === fieldName
+			);
 
-		if ( visibleFiltersForField.length === 0 ) {
-			return null;
-		}
-
-		return visibleFiltersForField.map( ( filter ) => {
-			if ( OPERATOR_IN === filter.operator ) {
-				return (
-					<InFilter
-						key={ fieldName }
-						filter={ visibleFiltersForField[ 0 ] }
-						view={ view }
-						onChangeView={ onChangeView }
-					/>
-				);
+			if ( visibleFiltersForField.length === 0 ) {
+				return null;
 			}
-			return null;
-		} );
-	} );
+
+			return visibleFiltersForField.map( ( filter ) => {
+				if ( OPERATOR_IN === filter.operator ) {
+					return (
+						<InFilter
+							key={ fieldName + '.' + filter.operator }
+							filter={ visibleFiltersForField[ 0 ] }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					);
+				}
+				return null;
+			} );
+		} )
+		.filter( Boolean );
+
+	if ( visibleFilters?.length > 0 ) {
+		visibleFilters.push(
+			<ResetFilters
+				key="reset-filters"
+				view={ view }
+				onChangeView={ onChangeView }
+			/>
+		);
+	}
+
+	return visibleFilters;
 }
diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/edit-site/src/components/dataviews/reset-filters.js
new file mode 100644
index 0000000000000..68b5c17590c97
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews/reset-filters.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default ( { view, onChangeView } ) => {
+	return (
+		<BaseControl>
+			<Button
+				disabled={ view.search === '' && view.filters?.length === 0 }
+				variant="tertiary"
+				onClick={ () => {
+					onChangeView( ( currentView ) => ( {
+						...currentView,
+						page: 1,
+						search: '',
+						filters: [],
+					} ) );
+				} }
+			>
+				{ __( 'Reset filters' ) }
+			</Button>
+		</BaseControl>
+	);
+};