From e7355b9610d1371d1d3fca51c17d1999ca3ecef3 Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Fri, 18 Mar 2022 10:39:26 -0400
Subject: [PATCH] =?UTF-8?q?fix(explore=20comma):=20make=20that=20the=20com?=
 =?UTF-8?q?ma=20can=20be=20added=20by=20removing=20it=20from=20token=20sep?=
 =?UTF-8?q?arators=E2=80=A6=20(#18926)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* make that the comma can be added by removing it from token separators in select component.

* fix(explore comma): add the allowTokenSeperators props into Select

* fix(explore comma): make to allow to customize the token separators in Select.

* fix(explore comma): make to add the unit test and story book.

* fix(explore comma): make to fix the lint

* fix(explore comma): make to fix the spell  & add tokenSeparatprs props to PickedSelectProps

* Update Select.tsx

* fix(explore comma): make to run lint fix
---
 .../src/shared-controls/index.tsx                         | 1 +
 .../src/components/Select/Select.stories.tsx              | 1 +
 superset-frontend/src/components/Select/Select.tsx        | 4 +++-
 .../src/explore/components/controls/SelectControl.jsx     | 3 +++
 .../explore/components/controls/SelectControl.test.jsx    | 8 ++++++++
 5 files changed, 16 insertions(+), 1 deletion(-)

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 0419c55ed3..aee3717938 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
@@ -448,6 +448,7 @@ const y_axis_format: SharedControlConfig<'SelectControl', SelectDefaultOption> =
     default: DEFAULT_NUMBER_FORMAT,
     choices: D3_FORMAT_OPTIONS,
     description: D3_FORMAT_DOCS,
+    tokenSeparators: ['\n', '\t', ';'],
     filterOption: ({ data: option }, search) =>
       option.label.includes(search) || option.value.includes(search),
     mapStateToProps: state => {
diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/Select.stories.tsx
index ed27f6a3fb..5526c2fc2a 100644
--- a/superset-frontend/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/src/components/Select/Select.stories.tsx
@@ -495,6 +495,7 @@ AsyncSelect.args = {
   pageSize: 10,
   withError: false,
   withInitialValue: false,
+  tokenSeparators: ['\n', '\t', ';'],
 };
 
 AsyncSelect.argTypes = {
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index e910f38ee6..92e0ec8b33 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -64,6 +64,7 @@ type PickedSelectProps = Pick<
   | 'onDropdownVisibleChange'
   | 'placeholder'
   | 'showSearch'
+  | 'tokenSeparators'
   | 'value'
 >;
 
@@ -310,6 +311,7 @@ const Select = (
     placeholder = t('Select ...'),
     showSearch = true,
     sortComparator = DEFAULT_SORT_COMPARATOR,
+    tokenSeparators,
     value,
     ...props
   }: SelectProps,
@@ -706,7 +708,7 @@ const Select = (
         placeholder={placeholder}
         showSearch={shouldShowSearch}
         showArrow
-        tokenSeparators={TOKEN_SEPARATORS}
+        tokenSeparators={tokenSeparators || TOKEN_SEPARATORS}
         value={selectValue}
         suffixIcon={getSuffixIcon()}
         menuItemSelectedIcon={
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index f8ad181b7e..53b7440cb4 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -52,6 +52,7 @@ const propTypes = {
   options: PropTypes.array,
   placeholder: PropTypes.string,
   filterOption: PropTypes.func,
+  tokenSeparators: PropTypes.arrayOf(PropTypes.string),
 
   // ControlHeader props
   label: PropTypes.string,
@@ -177,6 +178,7 @@ export default class SelectControl extends React.PureComponent {
       optionRenderer,
       showHeader,
       value,
+      tokenSeparators,
       // ControlHeader props
       description,
       renderTrigger,
@@ -242,6 +244,7 @@ export default class SelectControl extends React.PureComponent {
       placeholder,
       sortComparator: this.props.sortComparator,
       value: getValue(),
+      tokenSeparators,
     };
 
     return (
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
index 6c95f10fb8..1a004ee71a 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.test.jsx
@@ -78,6 +78,14 @@ describe('SelectControl', () => {
       expect(wrapper.find(SelectComponent).prop('allowNewOptions')).toBe(false);
     });
 
+    it('renders with tokenSeparators', () => {
+      wrapper.setProps({ tokenSeparators: ['\n', '\t', ';'] });
+      expect(wrapper.find(SelectComponent)).toExist();
+      expect(wrapper.find(SelectComponent).prop('tokenSeparators')).toEqual(
+        expect.arrayContaining([expect.any(String)]),
+      );
+    });
+
     describe('empty placeholder', () => {
       describe('withMulti', () => {
         it('does not show a placeholder if there are no choices', () => {