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/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} />
     );
   }
 }