Fix reselecting advanced filters in the customer list (https://github.com/woocommerce/woocommerce-admin/pull/4650)

* Add advanced args to configured static args so it is persistent

* Make sure unique keys are set in loaded labels

* Simplify the key selection because javascript

* Smarten up the filter picker so it only navigates if the selected button has changed

* Add static params for advanced order filters

* Add static param to product comparison config

* Add static param to category comparison config

* Add static param to coupon comparison config

* Add static param to taxes comparison config

* Add static params to downloads comparison config

Co-authored-by: Rebecca Scott <me@becdetat.com>

plugins/woocommerce-admin/client/analytics/report/categories/config.js

@@ -43,7 +43,7 @@ export const charts = applyFilters( CATEGORY_REPORT_CHARTS_FILTER, [
 export const filters = applyFilters( CATEGORY_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
-		staticParams: [ 'chartType', 'paged', 'per_page' ],
+		staticParams: [ 'chartType', 'paged', 'per_page', 'categories' ],
 		param: 'filter',
 		showFilters: () => true,
 		filters: [

plugins/woocommerce-admin/client/analytics/report/coupons/config.js

@@ -34,7 +34,7 @@ export const charts = applyFilters( COUPON_REPORT_CHARTS_FILTER, [
 export const filters = applyFilters( COUPON_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
-		staticParams: [ 'chartType', 'paged', 'per_page' ],
+		staticParams: [ 'chartType', 'paged', 'per_page', 'coupons' ],
 		param: 'filter',
 		showFilters: () => true,
 		filters: [

plugins/woocommerce-admin/client/analytics/report/customers/config.js

@@ -22,7 +22,33 @@ const CUSTOMERS_REPORT_ADVANCED_FILTERS_FILTER =
 export const filters = applyFilters( CUSTOMERS_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
-		staticParams: [ 'paged', 'per_page' ],
+		staticParams: [
+			'paged',
+			'per_page',
+			'name_includes',
+			'name_excludes',
+			'country_includes',
+			'country_excludes',
+			'username_includes',
+			'username_excludes',
+			'email_includes',
+			'email_excludes',
+			'orders_count_min',
+			'orders_count_max',
+			'orders_count_between',
+			'total_spend_min',
+			'total_spend_max',
+			'total_spend_between',
+			'avg_order_value_min',
+			'avg_order_value_max',
+			'avg_order_value_between',
+			'registered_before',
+			'registered_after',
+			'registered_between',
+			'last_active_before',
+			'last_active_after',
+			'last_active_between',
+		],
 		param: 'filter',
 		showFilters: () => true,
 		filters: [

plugins/woocommerce-admin/client/analytics/report/downloads/config.js

@@ -27,7 +27,19 @@ export const charts = applyFilters( DOWLOADS_REPORT_CHARTS_FILTER, [
 export const filters = applyFilters( DOWLOADS_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
-		staticParams: [ 'chartType', 'paged', 'per_page' ],
+		staticParams: [
+			'chartType',
+			'paged',
+			'per_page',
+			'product_includes',
+			'product_excludes',
+			'customer_includes',
+			'customer_excludes',
+			'order_includes',
+			'order_excludes',
+			'ip_address_includes',
+			'ip_address_excludes',
+		],
 		param: 'filter',
 		showFilters: () => true,
 		filters: [

plugins/woocommerce-admin/client/analytics/report/orders/config.js

@@ -49,7 +49,21 @@ export const charts = applyFilters( ORDERS_REPORT_CHARTS_FILTER, [
 export const filters = applyFilters( ORDERS_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
-		staticParams: [ 'chartType', 'paged', 'per_page' ],
+		staticParams: [
+			'chartType',
+			'paged',
+			'per_page',
+			'product_includes',
+			'product_excludes',
+			'status_is',
+			'status_is_not',
+			'coupon_includes',
+			'coupon_excludes',
+			'refunds',
+			'tax_rate_includes',
+			'tax_rate_excludes',
+			'customer_type',
+		],
 		param: 'filter',
 		showFilters: () => true,
 		filters: [

plugins/woocommerce-admin/client/analytics/report/products/config.js

@@ -42,7 +42,7 @@ export const charts = applyFilters( PRODUCTS_REPORT_CHARTS_FILTER, [
 
 const filterConfig = {
 	label: __( 'Show', 'woocommerce-admin' ),
-	staticParams: [ 'chartType', 'paged', 'per_page' ],
+	staticParams: [ 'chartType', 'paged', 'per_page', 'products' ],
 	param: 'filter',
 	showFilters: () => true,
 	filters: [

plugins/woocommerce-admin/client/analytics/report/taxes/config.js

@@ -50,7 +50,7 @@ export const charts = applyFilters( TAXES_REPORT_CHARTS_FILTER, [
 export const filters = applyFilters( TAXES_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
-		staticParams: [ 'chartType', 'paged', 'per_page' ],
+		staticParams: [ 'chartType', 'paged', 'per_page', 'taxes' ],
 		param: 'filter',
 		showFilters: () => true,
 		filters: [

plugins/woocommerce-admin/packages/components/src/advanced-filters/search-filter.js

@@ -28,7 +28,14 @@ class SearchFilter extends Component {
 		if ( filter.value.length ) {
 			config.input
 				.getLabels( filter.value, query )
-				.then( this.updateLabels );
+				.then( ( selected ) => {
+					const selectedWithKeys = selected.map( ( s ) => ( {
+						key: s.id,
+						...s,
+					} ) );
+
+					this.updateLabels( selectedWithKeys );
+				} );
 		}
 	}
 

plugins/woocommerce-admin/packages/components/src/filter-picker/index.js

@@ -198,11 +198,30 @@ class FilterPicker extends Component {
 		};
 
 		const selectSubFilter = partial( this.selectSubFilter, filter.value );
+		const selectedFilter = this.getFilter();
+		const buttonIsSelected =
+			selectedFilter.value === filter.value ||
+			( selectedFilter.path &&
+				includes( selectedFilter.path, filter.value ) );
+		const onClick = ( event ) => {
+			if ( buttonIsSelected ) {
+				// Don't navigate if the button is already selected.
+				onClose( event );
+				return;
+			}
+
+			if ( filter.subFilters ) {
+				selectSubFilter( event );
+				return;
+			}
+
+			selectFilter( event );
+		};
 
 		return (
 			<Button
 				className="woocommerce-filters-filter__button"
-				onClick={ filter.subFilters ? selectSubFilter : selectFilter }
+				onClick={ onClick }
 			>
 				{ filter.label }
 			</Button>