fix(explore comma): make that the comma can be added by removing it from token separators… (#18926)

* 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

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 => {

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 = {

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={

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 (

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', () => {