diff --git a/plugins/woocommerce-admin/client/analytics/report/categories/config.js b/plugins/woocommerce-admin/client/analytics/report/categories/config.js index b15de0d6748..258db5dce9c 100644 --- a/plugins/woocommerce-admin/client/analytics/report/categories/config.js +++ b/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: [ - { - 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, - }, - }, - ], + filters: filterValues, }, ] ); - -export const advancedFilters = applyFilters( - CATEGORY_REPORT_ADVANCED_FILTERS_FILTER, - {} -); diff --git a/plugins/woocommerce-admin/client/analytics/report/coupons/config.js b/plugins/woocommerce-admin/client/analytics/report/coupons/config.js index 20f1f075e99..cc08bd78fd2 100644 --- a/plugins/woocommerce-admin/client/analytics/report/coupons/config.js +++ b/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: [ - { 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, - }, - }, - ], + filters: filterValues, }, ] ); - -export const advancedFilters = applyFilters( - COUPON_REPORT_ADVANCED_FILTERS_FILTER, - {} -); diff --git a/plugins/woocommerce-admin/client/analytics/report/products/config.js b/plugins/woocommerce-admin/client/analytics/report/products/config.js index 01002e94178..a116145a3d8 100644 --- a/plugins/woocommerce-admin/client/analytics/report/products/config.js +++ b/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, - {} -); diff --git a/plugins/woocommerce-admin/client/analytics/report/revenue/config.js b/plugins/woocommerce-admin/client/analytics/report/revenue/config.js index 27c078fe860..9daef613f75 100644 --- a/plugins/woocommerce-admin/client/analytics/report/revenue/config.js +++ b/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, + }, +] ); diff --git a/plugins/woocommerce-admin/client/analytics/report/stock/config.js b/plugins/woocommerce-admin/client/analytics/report/stock/config.js index 406d357801d..0e55564fc66 100644 --- a/plugins/woocommerce-admin/client/analytics/report/stock/config.js +++ b/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, - {} -); diff --git a/plugins/woocommerce-admin/client/analytics/report/taxes/config.js b/plugins/woocommerce-admin/client/analytics/report/taxes/config.js index 007bc47a4e5..1ae2c745dba 100644 --- a/plugins/woocommerce-admin/client/analytics/report/taxes/config.js +++ b/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: [ - { 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, - }, - }, - ], + filters: filterValues, }, ] ); - -export const advancedFilters = applyFilters( - TAXES_REPORT_ADVANCED_FILTERS_FILTER, - {} -); diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 4e20cf54ed0..a7cdd6aac95 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/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 diff --git a/plugins/woocommerce-admin/packages/components/src/filters/index.js b/plugins/woocommerce-admin/packages/components/src/filters/index.js index 958ab447282..ec785c0457b 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/index.js +++ b/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,