From 24a747ec4fef050bbf555cbd2e1ab41c25bf5f53 Mon Sep 17 00:00:00 2001 From: Talyor Chen Date: Tue, 15 Mar 2022 13:17:24 -0400 Subject: [PATCH 1/2] fix(select): make to consider the case sensitive in case of d3 format selector --- .../src/shared-controls/index.tsx | 2 ++ superset-frontend/src/components/Select/Select.tsx | 14 ++++++++++++-- .../explore/components/controls/SelectControl.jsx | 3 +++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx index 81cd563c807bb..d13ccb6958475 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx @@ -438,6 +438,7 @@ const y_axis_format: SharedControlConfig<'SelectControl'> = { default: DEFAULT_NUMBER_FORMAT, choices: D3_FORMAT_OPTIONS, description: D3_FORMAT_DOCS, + caseSensitive: true, mapStateToProps: state => { const showWarning = state.controls?.comparison_type?.value === 'percentage'; return { @@ -460,6 +461,7 @@ const x_axis_time_format: SharedControlConfig<'SelectControl'> = { default: DEFAULT_TIME_FORMAT, choices: D3_TIME_FORMAT_OPTIONS, description: D3_TIME_FORMAT_DOCS, + caseSensitive: true, }; const adhoc_filters: SharedControlConfig<'AdhocFilterControl'> = { diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx index e910f38ee6657..6545300d17a23 100644 --- a/superset-frontend/src/components/Select/Select.tsx +++ b/superset-frontend/src/components/Select/Select.tsx @@ -150,6 +150,13 @@ export interface SelectProps extends PickedSelectProps { * Undefined by default. */ fetchOnlyOnSearch?: boolean; + /** + * It determines that filterOption consider the case sensitive or insensitive. in case of d3 format selector, case sensitive. + * If True, case sensitive + * If False, case insensitive + * False by default + */ + caseSensitive?: boolean; /** * It provides a callback function when an error * is generated after a request is fired. @@ -311,6 +318,7 @@ const Select = ( showSearch = true, sortComparator = DEFAULT_SORT_COMPARATOR, value, + caseSensitive, ...props }: SelectProps, ref: RefObject, @@ -556,11 +564,13 @@ const Select = ( } if (filterOption) { - const searchValue = search.trim().toLowerCase(); + const searchValue = caseSensitive ? search : search.trim().toLowerCase(); if (optionFilterProps && optionFilterProps.length) { return optionFilterProps.some(prop => { const optionProp = option?.[prop] - ? String(option[prop]).trim().toLowerCase() + ? caseSensitive + ? String(option[prop]) + : String(option[prop]).trim().toLowerCase() : ''; return optionProp.includes(searchValue); }); diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx index f8ad181b7e136..3f1eb351bd647 100644 --- a/superset-frontend/src/explore/components/controls/SelectControl.jsx +++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx @@ -64,6 +64,7 @@ const propTypes = { tooltipOnClick: PropTypes.func, warning: PropTypes.string, danger: PropTypes.string, + caseSensitive: PropTypes.bool, }; const defaultProps = { @@ -188,6 +189,7 @@ export default class SelectControl extends React.PureComponent { tooltipOnClick, warning, danger, + caseSensitive, } = this.props; const headerProps = { @@ -226,6 +228,7 @@ export default class SelectControl extends React.PureComponent { ariaLabel: ariaLabel || (typeof label === 'string' ? label : t('Select ...')), allowClear: clearable, + caseSensitive, disabled, filterOption: filterOption && typeof filterOption === 'function' From 96fbe51ee3b133c98ce6bdc9df0a2887b022440d Mon Sep 17 00:00:00 2001 From: Talyor Chen Date: Tue, 15 Mar 2022 16:10:50 -0400 Subject: [PATCH 2/2] fix(select): make to pass filterOption instead of new config option --- .../src/shared-controls/index.tsx | 62 +++++++++++-------- .../src/components/Select/Select.tsx | 14 +---- .../components/controls/SelectControl.jsx | 3 - 3 files changed, 39 insertions(+), 40 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx index d13ccb6958475..a5de8eff91f71 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx @@ -94,6 +94,11 @@ type Control = { default?: unknown; }; +type SelectDefaultOption = { + label: string; + value: string; +}; + const groupByControl: SharedControlConfig<'SelectControl', ColumnMeta> = { type: 'SelectControl', label: t('Group by'), @@ -430,30 +435,36 @@ const size: SharedControlConfig<'MetricsControl'> = { default: null, }; -const y_axis_format: SharedControlConfig<'SelectControl'> = { - type: 'SelectControl', - freeForm: true, - label: t('Y Axis Format'), - renderTrigger: true, - default: DEFAULT_NUMBER_FORMAT, - choices: D3_FORMAT_OPTIONS, - description: D3_FORMAT_DOCS, - caseSensitive: true, - mapStateToProps: state => { - const showWarning = state.controls?.comparison_type?.value === 'percentage'; - return { - warning: showWarning - ? t( - 'When `Calculation type` is set to "Percentage change", the Y ' + - 'Axis Format is forced to `.1%`', - ) - : null, - disabled: showWarning, - }; - }, -}; - -const x_axis_time_format: SharedControlConfig<'SelectControl'> = { +const y_axis_format: SharedControlConfig<'SelectControl', SelectDefaultOption> = + { + type: 'SelectControl', + freeForm: true, + label: t('Y Axis Format'), + renderTrigger: true, + default: DEFAULT_NUMBER_FORMAT, + choices: D3_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + filterOption: ({ data: option }, search) => + option.label.includes(search) || option.value.includes(search), + mapStateToProps: state => { + const showWarning = + state.controls?.comparison_type?.value === 'percentage'; + return { + warning: showWarning + ? t( + 'When `Calculation type` is set to "Percentage change", the Y ' + + 'Axis Format is forced to `.1%`', + ) + : null, + disabled: showWarning, + }; + }, + }; + +const x_axis_time_format: SharedControlConfig< + 'SelectControl', + SelectDefaultOption +> = { type: 'SelectControl', freeForm: true, label: t('Time format'), @@ -461,7 +472,8 @@ const x_axis_time_format: SharedControlConfig<'SelectControl'> = { default: DEFAULT_TIME_FORMAT, choices: D3_TIME_FORMAT_OPTIONS, description: D3_TIME_FORMAT_DOCS, - caseSensitive: true, + filterOption: ({ data: option }, search) => + option.label.includes(search) || option.value.includes(search), }; const adhoc_filters: SharedControlConfig<'AdhocFilterControl'> = { diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx index 6545300d17a23..e910f38ee6657 100644 --- a/superset-frontend/src/components/Select/Select.tsx +++ b/superset-frontend/src/components/Select/Select.tsx @@ -150,13 +150,6 @@ export interface SelectProps extends PickedSelectProps { * Undefined by default. */ fetchOnlyOnSearch?: boolean; - /** - * It determines that filterOption consider the case sensitive or insensitive. in case of d3 format selector, case sensitive. - * If True, case sensitive - * If False, case insensitive - * False by default - */ - caseSensitive?: boolean; /** * It provides a callback function when an error * is generated after a request is fired. @@ -318,7 +311,6 @@ const Select = ( showSearch = true, sortComparator = DEFAULT_SORT_COMPARATOR, value, - caseSensitive, ...props }: SelectProps, ref: RefObject, @@ -564,13 +556,11 @@ const Select = ( } if (filterOption) { - const searchValue = caseSensitive ? search : search.trim().toLowerCase(); + const searchValue = search.trim().toLowerCase(); if (optionFilterProps && optionFilterProps.length) { return optionFilterProps.some(prop => { const optionProp = option?.[prop] - ? caseSensitive - ? String(option[prop]) - : String(option[prop]).trim().toLowerCase() + ? String(option[prop]).trim().toLowerCase() : ''; return optionProp.includes(searchValue); }); diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx index 3f1eb351bd647..f8ad181b7e136 100644 --- a/superset-frontend/src/explore/components/controls/SelectControl.jsx +++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx @@ -64,7 +64,6 @@ const propTypes = { tooltipOnClick: PropTypes.func, warning: PropTypes.string, danger: PropTypes.string, - caseSensitive: PropTypes.bool, }; const defaultProps = { @@ -189,7 +188,6 @@ export default class SelectControl extends React.PureComponent { tooltipOnClick, warning, danger, - caseSensitive, } = this.props; const headerProps = { @@ -228,7 +226,6 @@ export default class SelectControl extends React.PureComponent { ariaLabel: ariaLabel || (typeof label === 'string' ? label : t('Select ...')), allowClear: clearable, - caseSensitive, disabled, filterOption: filterOption && typeof filterOption === 'function'