Product Collection: fix "Reset All" button in Editor filters (#46226)

* Add deselect callabck to attribute filter

* Add deselect callabck to created filter

* Add deselect callabck to featured filter

* Add deselect callabck to handpicked filter

* Cleanup deselect callabck to keyword filter

* Add deselect callabck to on salefilter

* Add deselect callabck to order by option

* Add deselect callabck to stock status filter

* Add deselect callabck to price range filter

* Add deselect callabck to price taxonomies filter

* Call all the reset filer callbacks on reset

* Add changelog

* Remove unused variable

* Replace hardcoded default filter values with the DEFAULT_FILTERS constant

plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts

@@ -94,15 +94,25 @@ export const getDefaultSettings = (
 	query: getDefaultQuery( currentAttributes.query ),
 } );
 
-export const DEFAULT_FILTERS: Partial< ProductCollectionQuery > = {
+export const DEFAULT_FILTERS: Pick<
+	ProductCollectionQuery,
+	| 'woocommerceOnSale'
+	| 'woocommerceStockStatus'
+	| 'woocommerceAttributes'
+	| 'woocommerceHandPickedProducts'
+	| 'taxQuery'
+	| 'featured'
+	| 'timeFrame'
+	| 'priceRange'
+> = {
 	woocommerceOnSale: DEFAULT_QUERY.woocommerceOnSale,
-	woocommerceStockStatus: getDefaultStockStatuses(),
+	woocommerceStockStatus: DEFAULT_QUERY.woocommerceStockStatus,
-	woocommerceAttributes: [],
+	woocommerceAttributes: DEFAULT_QUERY.woocommerceAttributes,
+	woocommerceHandPickedProducts: DEFAULT_QUERY.woocommerceHandPickedProducts,
 	taxQuery: DEFAULT_QUERY.taxQuery,
-	woocommerceHandPickedProducts: [],
 	featured: DEFAULT_QUERY.featured,
-	timeFrame: undefined,
+	timeFrame: DEFAULT_QUERY.timeFrame,
-	priceRange: undefined,
+	priceRange: DEFAULT_QUERY.priceRange,
 };
 
 /**

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx

@@ -16,6 +16,7 @@ import {
  * Internal dependencies
  */
 import { QueryControlProps } from '../../types';
+import { DEFAULT_FILTERS } from '../../constants';
 
 const EDIT_ATTRIBUTES_URL = `${ ADMIN_URL }edit.php?post_type=product&page=product_attributes`;
 
@@ -30,10 +31,18 @@ const AttributesControl = ( {
 		} )
 	);
 
+	const deselectCallback = () => {
+		setQueryAttribute( {
+			woocommerceAttributes: DEFAULT_FILTERS.woocommerceAttributes,
+		} );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Product Attributes', 'woocommerce' ) }
 			hasValue={ () => !! woocommerceAttributes?.length }
+			onDeselect={ deselectCallback }
+			resetAllFilter={ deselectCallback }
 		>
 			<ProductAttributeTermControl
 				messages={ {

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx

@@ -23,20 +23,24 @@ import {
  * Internal dependencies
  */
 import { ETimeFrameOperator, QueryControlProps } from '../../types';
+import { DEFAULT_FILTERS } from '../../constants';
 
 const CreatedControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;
 	const { timeFrame } = query;
 
+	const deselectCallback = () => {
+		setQueryAttribute( {
+			timeFrame: DEFAULT_FILTERS.timeFrame,
+		} );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Created', 'woocommerce' ) }
 			hasValue={ () => timeFrame?.operator && timeFrame?.value }
-			onDeselect={ () => {
+			onDeselect={ deselectCallback }
-				setQueryAttribute( {
+			resetAllFilter={ deselectCallback }
-					timeFrame: undefined,
-				} );
-			} }
 		>
 			<Flex direction="column" gap={ 3 }>
 				<FlexItem>

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx

@@ -14,19 +14,23 @@ import {
  * Internal dependencies
  */
 import { QueryControlProps } from '../../types';
+import { DEFAULT_FILTERS } from '../../constants';
 
 const FeaturedProductsControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;
 
+	const deselectCallback = () => {
+		setQueryAttribute( {
+			featured: DEFAULT_FILTERS.featured,
+		} );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Featured', 'woocommerce' ) }
 			hasValue={ () => query.featured === true }
-			onDeselect={ () => {
+			onDeselect={ deselectCallback }
-				setQueryAttribute( {
+			resetAllFilter={ deselectCallback }
-					featured: false,
-				} );
-			} }
 		>
 			<BaseControl
 				id="product-collection-featured-products-control"

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx

@@ -17,6 +17,7 @@ import {
  * Internal dependencies
  */
 import { QueryControlProps } from '../../types';
+import { DEFAULT_FILTERS } from '../../constants';
 
 /**
  * Returns:
@@ -115,15 +116,19 @@ const HandPickedProductsControl = ( {
 		return decodeEntities( product?.name ) || '';
 	};
 
+	const deselectCallback = () => {
+		setQueryAttribute( {
+			woocommerceHandPickedProducts:
+				DEFAULT_FILTERS.woocommerceHandPickedProducts,
+		} );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Hand-picked Products', 'woocommerce' ) }
 			hasValue={ () => !! selectedProductIds?.length }
-			onDeselect={ () => {
+			onDeselect={ deselectCallback }
-				setQueryAttribute( {
+			resetAllFilter={ deselectCallback }
-					woocommerceHandPickedProducts: [],
-				} );
-			} }
 		>
 			<FormTokenField
 				disabled={ ! productsMap.size }

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx

@@ -31,7 +31,7 @@ import {
 	FilterName,
 } from '../../types';
 import { setQueryAttribute } from '../../utils';
-import { DEFAULT_FILTERS, getDefaultSettings } from '../../constants';
+import { getDefaultSettings } from '../../constants';
 import UpgradeNotice from './upgrade-notice';
 import ColumnsControl from './columns-control';
 import InheritQueryControl from './inherit-query-control';
@@ -107,10 +107,9 @@ const ProductCollectionInspectorControls = (
 				<ToolsPanel
 					label={ __( 'Filters', 'woocommerce' ) }
 					resetAll={ ( resetAllFilters: ( () => void )[] ) => {
-						setQueryAttribute( props, DEFAULT_FILTERS );
+						resetAllFilters.forEach( ( resetFilter ) => {
-						resetAllFilters.forEach( ( resetFilter ) =>
+							resetFilter();
-							resetFilter()
+						} );
-						);
 					} }
 					className="wc-block-editor-product-collection-inspector-toolspanel__filters"
 				>

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx

@@ -33,12 +33,16 @@ const KeywordControl = ( props: QueryControlProps ) => {
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
 
+	const deselectCallback = () => {
+		setQuerySearch( '' );
+	};
+
 	return (
 		<ToolsPanelItem
 			hasValue={ () => !! querySearch }
 			label={ __( 'Keyword', 'woocommerce' ) }
-			onDeselect={ () => setQuerySearch( '' ) }
+			onDeselect={ deselectCallback }
-			resetAllFilter={ () => setQuerySearch( '' ) }
+			resetAllFilter={ deselectCallback }
 		>
 			<TextControl
 				label={ __( 'Keyword', 'woocommerce' ) }

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx

@@ -13,20 +13,24 @@ import {
  * Internal dependencies
  */
 import { QueryControlProps } from '../../types';
+import { DEFAULT_FILTERS } from '../../constants';
 
 const OnSaleControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;
 
+	const deselectCallback = () => {
+		setQueryAttribute( {
+			woocommerceOnSale: DEFAULT_FILTERS.woocommerceOnSale,
+		} );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'On Sale', 'woocommerce' ) }
 			hasValue={ () => query.woocommerceOnSale === true }
 			isShownByDefault
-			onDeselect={ () => {
+			onDeselect={ deselectCallback }
-				setQueryAttribute( {
+			resetAllFilter={ deselectCallback }
-					woocommerceOnSale: false,
-				} );
-			} }
 		>
 			<ToggleControl
 				label={ __( 'Show only products on sale', 'woocommerce' ) }

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/order-by-control.tsx

@@ -51,6 +51,10 @@ const OrderByControl = ( props: QueryControlProps ) => {
 	const { order, orderBy } = query;
 	const defaultQuery = getDefaultQuery( query );
 
+	const deselectCallback = () => {
+		setQueryAttribute( { orderBy: defaultQuery.orderBy } );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Order by', 'woocommerce' ) }
@@ -59,9 +63,8 @@ const OrderByControl = ( props: QueryControlProps ) => {
 				orderBy !== defaultQuery?.orderBy
 			}
 			isShownByDefault
-			onDeselect={ () => {
+			onDeselect={ deselectCallback }
-				setQueryAttribute( defaultQuery );
+			resetAllFilter={ deselectCallback }
-			} }
 		>
 			<SelectControl
 				value={ `${ orderBy }/${ order }` }

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/price-range-control/index.tsx

@@ -15,6 +15,7 @@ import {
  * Internal dependencies
  */
 import { QueryControlProps } from '../../../types';
+import { DEFAULT_FILTERS } from '../../../constants';
 import PriceTextField from './PriceTextField';
 
 const PriceRangeControl = ( props: QueryControlProps ) => {
@@ -22,15 +23,18 @@ const PriceRangeControl = ( props: QueryControlProps ) => {
 
 	const value = query.priceRange;
 
+	const deselectCallback = () => {
+		setQueryAttribute( { priceRange: DEFAULT_FILTERS.priceRange } );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Price Range', 'woocommerce' ) }
 			hasValue={ () => {
 				return value?.min !== undefined || value?.max !== undefined;
 			} }
-			onDeselect={ () => {
+			onDeselect={ deselectCallback }
-				setQueryAttribute( { priceRange: undefined } );
+			resetAllFilter={ deselectCallback }
-			} }
 			className="wc-block-product-price-range-control"
 		>
 			<BaseControl.VisualLabel>

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx

@@ -14,7 +14,11 @@ import {
  * Internal dependencies
  */
 import { QueryControlProps } from '../../types';
-import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../../constants';
+import {
+	STOCK_STATUS_OPTIONS,
+	DEFAULT_FILTERS,
+	getDefaultStockStatuses,
+} from '../../constants';
 
 /**
  * Gets the id of a specific stock status from its text label
@@ -36,6 +40,12 @@ function getStockStatusIdByLabel( statusLabel: FormTokenField.Value ) {
 const StockStatusControl = ( props: QueryControlProps ) => {
 	const { query, setQueryAttribute } = props;
 
+	const deselectCallback = () => {
+		setQueryAttribute( {
+			woocommerceStockStatus: DEFAULT_FILTERS.woocommerceStockStatus,
+		} );
+	};
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Stock status', 'woocommerce' ) }
@@ -45,11 +55,8 @@ const StockStatusControl = ( props: QueryControlProps ) => {
 					getDefaultStockStatuses()
 				)
 			}
-			onDeselect={ () => {
+			onDeselect={ deselectCallback }
-				setQueryAttribute( {
+			resetAllFilter={ deselectCallback }
-					woocommerceStockStatus: getDefaultStockStatuses(),
-				} );
-			} }
 			isShownByDefault
 		>
 			<FormTokenField

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/index.tsx

@@ -17,6 +17,7 @@ import {
  */
 import TaxonomyItem from './taxonomy-item';
 import { ProductCollectionQuery } from '../../../types';
+import { DEFAULT_FILTERS } from '../../../constants';
 
 interface TaxonomyControlProps {
 	query: ProductCollectionQuery;
@@ -53,6 +54,9 @@ function TaxonomyControls( {
 		return null;
 	}
 
+	const deselectCallback = () =>
+		setQueryAttribute( { taxQuery: DEFAULT_FILTERS.taxQuery } );
+
 	return (
 		<ToolsPanelItem
 			label={ __( 'Taxonomies', 'woocommerce' ) }
@@ -61,7 +65,8 @@ function TaxonomyControls( {
 					( terms ) => !! terms.length
 				)
 			}
-			onDeselect={ () => setQueryAttribute( { taxQuery: {} } ) }
+			onDeselect={ deselectCallback }
+			resetAllFilter={ deselectCallback }
 		>
 			{ taxonomies.map( ( taxonomy: Taxonomy ) => {
 				const termIds = taxQuery?.[ taxonomy.slug ] || [];

plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts

@@ -81,11 +81,11 @@ export interface ProductCollectionQuery {
 	 * ),
 	 * ```
 	 */
-	woocommerceStockStatus?: string[];
+	woocommerceStockStatus: string[];
-	woocommerceAttributes?: AttributeMetadata[];
+	woocommerceAttributes: AttributeMetadata[];
-	isProductCollectionBlock?: boolean;
+	isProductCollectionBlock: boolean;
-	woocommerceHandPickedProducts?: string[];
+	woocommerceHandPickedProducts: string[];
-	priceRange?: undefined | PriceRange;
+	priceRange: undefined | PriceRange;
 }
 
 export type ProductCollectionEditComponentProps =

plugins/woocommerce/changelog/46156-product-collection-reset-all-resets-also-the-collection-filters

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Collection: Fix the "Reset All" funtionality in Editor filters