chore: Select component refactoring - ColorSchemeControl - Iteration 5 (#15555)

* Enhance Select

* Transition Select to Antd

* Update test

* Fix Cypress

* Change name to aria-label

* Update Cypress search val

* Test Cypress selection

superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts

@@ -73,13 +73,12 @@ describe('Visualization > Line', () => {
   it('should allow type to search color schemes', () => {
     cy.get('#controlSections-tab-display').click();
     cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
-    cy.get('.Control[data-test="color_scheme"] input[type="text"]')
+    cy.get('.Control[data-test="color_scheme"] input[type="search"]')
       .focus()
-      .type('air{enter}');
-    cy.get('input[name="select-color_scheme"]').should(
-      'have.value',
-      'bnbColors',
-    );
+      .type('bnbColors{enter}');
+    cy.get(
+      '.Control[data-test="color_scheme"] .ant-select-selection-item > ul[data-test="bnbColors"]',
+    ).should('exist');
   });
 
   it('should work with adhoc metric', () => {

superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx

@@ -18,7 +18,7 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { Select } from 'src/components/Select';
+import { Select } from 'src/components';
 import { getCategoricalSchemeRegistry } from '@superset-ui/core';
 import { styledMount as mount } from 'spec/helpers/theming';
 import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeControl';
@@ -37,7 +37,7 @@ describe('ColorSchemeControl', () => {
     wrapper = mount(<ColorSchemeControl {...defaultProps} />);
   });
 
-  it('renders a Creatable', () => {
+  it('renders a Select', () => {
     expect(wrapper.find(Select)).toExist();
   });
 });

superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isFunction } from 'lodash';
-import { Select } from 'src/components/Select';
+import { Select } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
 import ControlHeader from '../ControlHeader';
 
@@ -54,14 +54,13 @@ export default class ColorSchemeControl extends React.PureComponent {
     this.renderOption = this.renderOption.bind(this);
   }
 
-  onChange(option) {
-    const optionValue = option ? option.value : null;
-    this.props.onChange(optionValue);
+  onChange(value) {
+    this.props.onChange(value);
   }
 
-  renderOption(key) {
+  renderOption(value) {
     const { isLinear } = this.props;
-    const currentScheme = this.schemes[key.value];
+    const currentScheme = this.schemes[value];
 
     // For categorical scheme, display all the colors
     // For sequential scheme, show 10 or interpolate to 10.
@@ -106,34 +105,28 @@ export default class ColorSchemeControl extends React.PureComponent {
   }
 
   render() {
-    const { schemes, choices, labelMargin = 0 } = this.props;
+    const { schemes, choices } = this.props;
     // save parsed schemes for later
     this.schemes = isFunction(schemes) ? schemes() : schemes;
+
     const options = (isFunction(choices) ? choices() : choices).map(
-      ([value, label]) => ({
+      ([value]) => ({
         value,
-        // use scheme label if available
-        label: this.schemes[value]?.label || label,
+        label: this.renderOption(value),
       }),
     );
     const selectProps = {
-      multi: false,
+      allowClear: this.props.clearable,
+      defaultValue: this.props.default,
       name: `select-${this.props.name}`,
-      placeholder: `Select (${options.length})`,
-      default: this.props.default,
-      options,
-      value: this.props.value,
-      autosize: false,
-      clearable: this.props.clearable,
       onChange: this.onChange,
-      optionRenderer: this.renderOption,
-      valueRenderer: this.renderOption,
+      options,
+      placeholder: `Select (${options.length})`,
+      showSearch: true,
+      value: this.props.value,
     };
     return (
-      <div>
-        <ControlHeader {...this.props} />
-        <Select {...selectProps} css={{ marginTop: labelMargin }} />
-      </div>
+      <Select header={<ControlHeader {...this.props} />} {...selectProps} />
     );
   }
 }