AdvancedFilters: Create workable defaults for Reports that don't have them (https://github.com/woocommerce/woocommerce-admin/pull/7186)

* on Filter update, keep all queries

* update _x translator instructions

* fix revenue filters

* better default advFilter

* fix stock filters

* revert readme changelog

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 import { dispatch } from '@wordpress/data';
 
@@ -44,73 +44,86 @@ export const charts = applyFilters( CATEGORY_REPORT_CHARTS_FILTER, [
 	},
 ] );
 
+export const advancedFilters = applyFilters(
+	CATEGORY_REPORT_ADVANCED_FILTERS_FILTER,
+	{
+		filters: {},
+		title: _x(
+			'Categories Match {{select /}} Filters',
+			'A sentence describing filters for Categories. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
+			'woocommerce-admin'
+		),
+	}
+);
+
+const filterValues = [
+	{
+		label: __( 'All Categories', 'woocommerce-admin' ),
+		value: 'all',
+	},
+	{
+		label: __( 'Single Category', 'woocommerce-admin' ),
+		value: 'select_category',
+		chartMode: 'item-comparison',
+		subFilters: [
+			{
+				component: 'Search',
+				value: 'single_category',
+				chartMode: 'item-comparison',
+				path: [ 'select_category' ],
+				settings: {
+					type: 'categories',
+					param: 'categories',
+					getLabels: getCategoryLabels,
+					labels: {
+						placeholder: __(
+							'Type to search for a category',
+							'woocommerce-admin'
+						),
+						button: __( 'Single Category', 'woocommerce-admin' ),
+					},
+				},
+			},
+		],
+	},
+	{
+		label: __( 'Comparison', 'woocommerce-admin' ),
+		value: 'compare-categories',
+		chartMode: 'item-comparison',
+		settings: {
+			type: 'categories',
+			param: 'categories',
+			getLabels: getCategoryLabels,
+			labels: {
+				helpText: __(
+					'Check at least two categories below to compare',
+					'woocommerce-admin'
+				),
+				placeholder: __(
+					'Search for categories to compare',
+					'woocommerce-admin'
+				),
+				title: __( 'Compare Categories', 'woocommerce-admin' ),
+				update: __( 'Compare', 'woocommerce-admin' ),
+			},
+			onClick: addCesSurveyForAnalytics,
+		},
+	},
+];
+
+if ( Object.keys( advancedFilters.filters ).length ) {
+	filterValues.push( {
+		label: __( 'Advanced Filters', 'woocommerce-admin' ),
+		value: 'advanced',
+	} );
+}
+
 export const filters = applyFilters( CATEGORY_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
 		staticParams: [ 'chartType', 'paged', 'per_page' ],
 		param: 'filter',
 		showFilters: () => true,
-		filters: [
+		filters: filterValues,
-			{
-				label: __( 'All Categories', 'woocommerce-admin' ),
-				value: 'all',
-			},
-			{
-				label: __( 'Single Category', 'woocommerce-admin' ),
-				value: 'select_category',
-				chartMode: 'item-comparison',
-				subFilters: [
-					{
-						component: 'Search',
-						value: 'single_category',
-						chartMode: 'item-comparison',
-						path: [ 'select_category' ],
-						settings: {
-							type: 'categories',
-							param: 'categories',
-							getLabels: getCategoryLabels,
-							labels: {
-								placeholder: __(
-									'Type to search for a category',
-									'woocommerce-admin'
-								),
-								button: __(
-									'Single Category',
-									'woocommerce-admin'
-								),
-							},
-						},
-					},
-				],
-			},
-			{
-				label: __( 'Comparison', 'woocommerce-admin' ),
-				value: 'compare-categories',
-				chartMode: 'item-comparison',
-				settings: {
-					type: 'categories',
-					param: 'categories',
-					getLabels: getCategoryLabels,
-					labels: {
-						helpText: __(
-							'Check at least two categories below to compare',
-							'woocommerce-admin'
-						),
-						placeholder: __(
-							'Search for categories to compare',
-							'woocommerce-admin'
-						),
-						title: __( 'Compare Categories', 'woocommerce-admin' ),
-						update: __( 'Compare', 'woocommerce-admin' ),
-					},
-					onClick: addCesSurveyForAnalytics,
-				},
-			},
-		],
 	},
 ] );
-
-export const advancedFilters = applyFilters(
-	CATEGORY_REPORT_ADVANCED_FILTERS_FILTER,
-	{}
-);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 import { dispatch } from '@wordpress/data';
 
@@ -35,68 +35,78 @@ export const charts = applyFilters( COUPON_REPORT_CHARTS_FILTER, [
 	},
 ] );
 
+export const advancedFilters = applyFilters(
+	COUPON_REPORT_ADVANCED_FILTERS_FILTER,
+	{
+		filters: {},
+		title: _x(
+			'Coupons Match {{select /}} Filters',
+			'A sentence describing filters for Coupons. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
+			'woocommerce-admin'
+		),
+	}
+);
+
+const filterValues = [
+	{ label: __( 'All Coupons', 'woocommerce-admin' ), value: 'all' },
+	{
+		label: __( 'Single Coupon', 'woocommerce-admin' ),
+		value: 'select_coupon',
+		chartMode: 'item-comparison',
+		subFilters: [
+			{
+				component: 'Search',
+				value: 'single_coupon',
+				chartMode: 'item-comparison',
+				path: [ 'select_coupon' ],
+				settings: {
+					type: 'coupons',
+					param: 'coupons',
+					getLabels: getCouponLabels,
+					labels: {
+						placeholder: __(
+							'Type to search for a coupon',
+							'woocommerce-admin'
+						),
+						button: __( 'Single Coupon', 'woocommerce-admin' ),
+					},
+				},
+			},
+		],
+	},
+	{
+		label: __( 'Comparison', 'woocommerce-admin' ),
+		value: 'compare-coupons',
+		settings: {
+			type: 'coupons',
+			param: 'coupons',
+			getLabels: getCouponLabels,
+			labels: {
+				title: __( 'Compare Coupon Codes', 'woocommerce-admin' ),
+				update: __( 'Compare', 'woocommerce-admin' ),
+				helpText: __(
+					'Check at least two coupon codes below to compare',
+					'woocommerce-admin'
+				),
+			},
+			onClick: addCesSurveyForAnalytics,
+		},
+	},
+];
+
+if ( Object.keys( advancedFilters.filters ).length ) {
+	filterValues.push( {
+		label: __( 'Advanced Filters', 'woocommerce-admin' ),
+		value: 'advanced',
+	} );
+}
+
 export const filters = applyFilters( COUPON_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
 		staticParams: [ 'chartType', 'paged', 'per_page' ],
 		param: 'filter',
 		showFilters: () => true,
-		filters: [
+		filters: filterValues,
-			{ label: __( 'All Coupons', 'woocommerce-admin' ), value: 'all' },
-			{
-				label: __( 'Single Coupon', 'woocommerce-admin' ),
-				value: 'select_coupon',
-				chartMode: 'item-comparison',
-				subFilters: [
-					{
-						component: 'Search',
-						value: 'single_coupon',
-						chartMode: 'item-comparison',
-						path: [ 'select_coupon' ],
-						settings: {
-							type: 'coupons',
-							param: 'coupons',
-							getLabels: getCouponLabels,
-							labels: {
-								placeholder: __(
-									'Type to search for a coupon',
-									'woocommerce-admin'
-								),
-								button: __(
-									'Single Coupon',
-									'woocommerce-admin'
-								),
-							},
-						},
-					},
-				],
-			},
-			{
-				label: __( 'Comparison', 'woocommerce-admin' ),
-				value: 'compare-coupons',
-				settings: {
-					type: 'coupons',
-					param: 'coupons',
-					getLabels: getCouponLabels,
-					labels: {
-						title: __(
-							'Compare Coupon Codes',
-							'woocommerce-admin'
-						),
-						update: __( 'Compare', 'woocommerce-admin' ),
-						helpText: __(
-							'Check at least two coupon codes below to compare',
-							'woocommerce-admin'
-						),
-					},
-					onClick: addCesSurveyForAnalytics,
-				},
-			},
-		],
 	},
 ] );
-
-export const advancedFilters = applyFilters(
-	COUPON_REPORT_ADVANCED_FILTERS_FILTER,
-	{}
-);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 import { dispatch } from '@wordpress/data';
 
@@ -169,12 +169,30 @@ const variationsConfig = {
 	],
 };
 
+export const advancedFilters = applyFilters(
+	PRODUCTS_REPORT_ADVANCED_FILTERS_FILTER,
+	{
+		filters: {},
+		title: _x(
+			'Products Match {{select /}} Filters',
+			'A sentence describing filters for Products. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
+			'woocommerce-admin'
+		),
+	}
+);
+
+if ( Object.keys( advancedFilters.filters ).length ) {
+	filterConfig.filters.push( {
+		label: __( 'Advanced Filters', 'woocommerce-admin' ),
+		value: 'advanced',
+	} );
+	variationsConfig.filters.push( {
+		label: __( 'Advanced Filters', 'woocommerce-admin' ),
+		value: 'advanced',
+	} );
+}
+
 export const filters = applyFilters( PRODUCTS_REPORT_FILTERS_FILTER, [
 	filterConfig,
 	variationsConfig,
 ] );
-
-export const advancedFilters = applyFilters(
-	PRODUCTS_REPORT_ADVANCED_FILTERS_FILTER,
-	{}
-);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 
 const REVENUE_REPORT_CHARTS_FILTER = 'woocommerce_admin_revenue_report_charts';
@@ -60,8 +60,37 @@ export const charts = applyFilters( REVENUE_REPORT_CHARTS_FILTER, [
 	},
 ] );
 
-export const filters = applyFilters( REVENUE_REPORT_FILTERS_FILTER, [] );
 export const advancedFilters = applyFilters(
 	REVENUE_REPORT_ADVANCED_FILTERS_FILTER,
-	{}
+	{
+		filters: {},
+		title: _x(
+			'Revenue Matches {{select /}} Filters',
+			'A sentence describing filters for Revenue. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
+			'woocommerce-admin'
+		),
+	}
 );
+
+const filterValues = [];
+
+if ( Object.keys( advancedFilters.filters ).length ) {
+	filterValues.push( {
+		label: __( 'All Revenue', 'woocommerce-admin' ),
+		value: 'all',
+	} );
+	filterValues.push( {
+		label: __( 'Advanced Filters', 'woocommerce-admin' ),
+		value: 'advanced',
+	} );
+}
+
+export const filters = applyFilters( REVENUE_REPORT_FILTERS_FILTER, [
+	{
+		label: __( 'Show', 'woocommerce-admin' ),
+		staticParams: [ 'chartType', 'paged', 'per_page' ],
+		param: 'filter',
+		showFilters: () => filterValues.length > 0,
+		filters: filterValues,
+	},
+] );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 
 const STOCK_REPORT_FILTERS_FILTER = 'woocommerce_admin_stock_report_filters';
@@ -10,6 +10,18 @@ const STOCK_REPORT_ADVANCED_FILTERS_FILTER =
 
 export const showDatePicker = false;
 
+export const advancedFilters = applyFilters(
+	STOCK_REPORT_ADVANCED_FILTERS_FILTER,
+	{
+		filters: {},
+		title: _x(
+			'Products Match {{select /}} Filters',
+			'A sentence describing filters for Products. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
+			'woocommerce-admin'
+		),
+	}
+);
+
 export const filters = applyFilters( STOCK_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
@@ -33,9 +45,17 @@ export const filters = applyFilters( STOCK_REPORT_FILTERS_FILTER, [
 			},
 		],
 	},
+	{
+		label: __( 'Filter by', 'woocommerce-admin' ),
+		staticParams: [ 'paged', 'per_page' ],
+		param: 'filter',
+		showFilters: () => Object.keys( advancedFilters.filters ).length,
+		filters: [
+			{ label: __( 'All Products', 'woocommerce-admin' ), value: 'all' },
+			{
+				label: __( 'Advanced Filters', 'woocommerce-admin' ),
+				value: 'advanced',
+			},
+		],
+	},
 ] );
-
-export const advancedFilters = applyFilters(
-	STOCK_REPORT_ADVANCED_FILTERS_FILTER,
-	{}
-);

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { applyFilters } from '@wordpress/hooks';
 import { NAMESPACE } from '@woocommerce/data';
 import { dispatch } from '@wordpress/data';
@@ -51,49 +51,65 @@ export const charts = applyFilters( TAXES_REPORT_CHARTS_FILTER, [
 	},
 ] );
 
+export const advancedFilters = applyFilters(
+	TAXES_REPORT_ADVANCED_FILTERS_FILTER,
+	{
+		filters: {},
+		title: _x(
+			'Taxes Match {{select /}} Filters',
+			'A sentence describing filters for Taxes. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
+			'woocommerce-admin'
+		),
+	}
+);
+
+const filterValues = [
+	{ label: __( 'All Taxes', 'woocommerce-admin' ), value: 'all' },
+	{
+		label: __( 'Comparison', 'woocommerce-admin' ),
+		value: 'compare-taxes',
+		chartMode: 'item-comparison',
+		settings: {
+			type: 'taxes',
+			param: 'taxes',
+			getLabels: getRequestByIdString(
+				NAMESPACE + '/taxes',
+				( tax ) => ( {
+					id: tax.id,
+					key: tax.id,
+					label: getTaxCode( tax ),
+				} )
+			),
+			labels: {
+				helpText: __(
+					'Check at least two tax codes below to compare',
+					'woocommerce-admin'
+				),
+				placeholder: __(
+					'Search for tax codes to compare',
+					'woocommerce-admin'
+				),
+				title: __( 'Compare Tax Codes', 'woocommerce-admin' ),
+				update: __( 'Compare', 'woocommerce-admin' ),
+			},
+			onClick: addCesSurveyForAnalytics,
+		},
+	},
+];
+
+if ( Object.keys( advancedFilters.filters ).length ) {
+	filterValues.push( {
+		label: __( 'Advanced Filters', 'woocommerce-admin' ),
+		value: 'advanced',
+	} );
+}
+
 export const filters = applyFilters( TAXES_REPORT_FILTERS_FILTER, [
 	{
 		label: __( 'Show', 'woocommerce-admin' ),
 		staticParams: [ 'chartType', 'paged', 'per_page' ],
 		param: 'filter',
 		showFilters: () => true,
-		filters: [
+		filters: filterValues,
-			{ label: __( 'All Taxes', 'woocommerce-admin' ), value: 'all' },
-			{
-				label: __( 'Comparison', 'woocommerce-admin' ),
-				value: 'compare-taxes',
-				chartMode: 'item-comparison',
-				settings: {
-					type: 'taxes',
-					param: 'taxes',
-					getLabels: getRequestByIdString(
-						NAMESPACE + '/taxes',
-						( tax ) => ( {
-							id: tax.id,
-							key: tax.id,
-							label: getTaxCode( tax ),
-						} )
-					),
-					labels: {
-						helpText: __(
-							'Check at least two tax codes below to compare',
-							'woocommerce-admin'
-						),
-						placeholder: __(
-							'Search for tax codes to compare',
-							'woocommerce-admin'
-						),
-						title: __( 'Compare Tax Codes', 'woocommerce-admin' ),
-						update: __( 'Compare', 'woocommerce-admin' ),
-					},
-					onClick: addCesSurveyForAnalytics,
-				},
-			},
-		],
 	},
 ] );
-
-export const advancedFilters = applyFilters(
-	TAXES_REPORT_ADVANCED_FILTERS_FILTER,
-	{}
-);

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,6 +1,7 @@
 # 7.1.0
 
 -   Add rowKey prop to Table and TableCard component. #7196
+-   AdvancedFilters: Create workable defaults for Reports that don't have them #7186
 -   Filters: On update respect all other queries, not just persistedQueries #7155
 -   Fix non-string query prop warning in SelectControl component. #7046
 -   Fix WordPress 5.8 compatibility UI fixes #7255

plugins/woocommerce-admin/packages/components/src/filters/index.js

@@ -224,7 +224,10 @@ ReportFilters.propTypes = {
 
 ReportFilters.defaultProps = {
 	siteLocale: 'en_US',
-	advancedFilters: {},
+	advancedFilters: {
+		title: '',
+		filters: {},
+	},
 	filters: [],
 	query: {},
 	showDatePicker: true,