refactor: Moves the DeprecatedSelect to its own folder (#21445)

superset-frontend/src/SqlLab/components/AceEditorWrapper/AceEditorWrapper.test.tsx

@@ -34,7 +34,7 @@ import { AsyncAceEditorProps } from 'src/components/AsyncAceEditor';
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 
-jest.mock('src/components/Select', () => () => (
+jest.mock('src/components/DeprecatedSelect', () => () => (
   <div data-test="mock-deprecated-select" />
 ));
 jest.mock('src/components/Select/Select', () => () => (

superset-frontend/src/SqlLab/components/EstimateQueryCostButton/EstimateQueryCostButton.test.tsx

@@ -30,7 +30,7 @@ import EstimateQueryCostButton, {
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 
-jest.mock('src/components/Select', () => () => (
+jest.mock('src/components/DeprecatedSelect', () => () => (
   <div data-test="mock-deprecated-select" />
 ));
 jest.mock('src/components/Select/Select', () => () => (

superset-frontend/src/SqlLab/components/QueryLimitSelect/QueryLimitSelect.test.tsx

@@ -33,7 +33,7 @@ import QueryLimitSelect, {
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 
-jest.mock('src/components/Select', () => () => (
+jest.mock('src/components/DeprecatedSelect', () => () => (
   <div data-test="mock-deprecated-select" />
 ));
 jest.mock('src/components/Select/Select', () => () => (

superset-frontend/src/SqlLab/components/QuerySearch/index.tsx

@@ -18,7 +18,7 @@
  */
 import React, { useState, useEffect } from 'react';
 import Button from 'src/components/Button';
-import Select from 'src/components/Select';
+import Select from 'src/components/DeprecatedSelect';
 import { styled, t, SupersetClient, QueryResponse } from '@superset-ui/core';
 import { debounce } from 'lodash';
 import Loading from 'src/components/Loading';

superset-frontend/src/SqlLab/components/RunQueryActionButton/RunQueryActionButton.test.tsx

@@ -30,7 +30,7 @@ import RunQueryActionButton, {
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 
-jest.mock('src/components/Select', () => () => (
+jest.mock('src/components/DeprecatedSelect', () => () => (
   <div data-test="mock-deprecated-select" />
 ));
 jest.mock('src/components/Select/Select', () => () => (

superset-frontend/src/SqlLab/components/SqlEditorTabHeader/SqlEditorTabHeader.test.tsx

@@ -42,7 +42,7 @@ import {
 } from 'src/SqlLab/actions/sqlLab';
 import SqlEditorTabHeader from 'src/SqlLab/components/SqlEditorTabHeader';
 
-jest.mock('src/components/Select', () => () => (
+jest.mock('src/components/DeprecatedSelect', () => () => (
   <div data-test="mock-deprecated-select" />
 ));
 jest.mock('src/components/Select/Select', () => () => (

superset-frontend/src/SqlLab/components/TemplateParamsEditor/TemplateParamsEditor.test.tsx

@@ -33,7 +33,7 @@ import TemplateParamsEditor, {
   Props,
 } from 'src/SqlLab/components/TemplateParamsEditor';
 
-jest.mock('src/components/Select', () => () => (
+jest.mock('src/components/DeprecatedSelect', () => () => (
   <div data-test="mock-deprecated-select" />
 ));
 jest.mock('src/components/Select/Select', () => () => (

superset-frontend/src/components/AsyncSelect/AsyncSelect.test.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import fetchMock from 'fetch-mock';
-import Select from 'src/components/Select';
+import Select from 'src/components/DeprecatedSelect';
 import AsyncSelect from 'src/components/AsyncSelect';
 
 describe('AsyncSelect', () => {

superset-frontend/src/components/AsyncSelect/index.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // TODO: refactor this with `import { AsyncSelect } from src/components/Select`
-import { Select } from 'src/components/Select';
+import { Select } from 'src/components/DeprecatedSelect';
 import { t, SupersetClient } from '@superset-ui/core';
 import { getClientErrorObject } from '../../utils/getClientErrorObject';
 

superset-frontend/src/components/DeprecatedSelect/DeprecatedSelect.tsx

@@ -40,6 +40,7 @@ import {
 } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 import { useTheme } from '@superset-ui/core';
+import { findValue } from './utils';
 import {
   WindowedSelectComponentType,
   WindowedSelectProps,
@@ -59,7 +60,6 @@ import {
   InputProps,
   defaultTheme,
 } from './styles';
-import { findValue } from './utils';
 
 type AnyReactSelect<OptionType extends OptionTypeBase> =
   | BasicSelect<OptionType>

superset-frontend/src/components/DeprecatedSelect/OnPasteSelect.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Select } from 'src/components/Select';
+import { Select } from 'src/components/DeprecatedSelect';
 
 export default class OnPasteSelect extends React.Component {
   constructor(props) {

superset-frontend/src/components/DeprecatedSelect/OnPasteSelect.test.jsx

@@ -20,7 +20,11 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Select, OnPasteSelect, CreatableSelect } from 'src/components/Select';
+import {
+  Select,
+  OnPasteSelect,
+  CreatableSelect,
+} from 'src/components/DeprecatedSelect';
 
 const defaultProps = {
   onChange: sinon.spy(),

superset-frontend/src/components/DeprecatedSelect/WindowedSelect/WindowedMenuList.tsx

@@ -55,7 +55,7 @@ export type WindowedMenuListProps = {
  * grouped options just yet.
  */
 
-type MenuListPropsChildren<OptionType> =
+type MenuListPropsChildren<OptionType extends OptionTypeBase> =
   | Component<OptionProps<OptionType>>[]
   | ReactElement[];
 

superset-frontend/src/components/DeprecatedSelect/utils.ts

@@ -0,0 +1,59 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+  OptionTypeBase,
+  ValueType,
+  OptionsType,
+  GroupedOptionsType,
+} from 'react-select';
+
+/**
+ * Find Option value that matches a possibly string value.
+ *
+ * Translate possible string values to `OptionType` objects, fallback to value
+ * itself if cannot be found in the options list.
+ *
+ * Always returns an array.
+ */
+export function findValue<OptionType extends OptionTypeBase>(
+  value: ValueType<OptionType> | string,
+  options: GroupedOptionsType<OptionType> | OptionsType<OptionType> = [],
+  valueKey = 'value',
+): OptionType[] {
+  if (value === null || value === undefined || value === '') {
+    return [];
+  }
+  const isGroup = Array.isArray((options[0] || {}).options);
+  const flatOptions = isGroup
+    ? (options as GroupedOptionsType<OptionType>).flatMap(x => x.options || [])
+    : (options as OptionsType<OptionType>);
+
+  const find = (val: OptionType) => {
+    const realVal = (value || {}).hasOwnProperty(valueKey)
+      ? val[valueKey]
+      : val;
+    return (
+      flatOptions.find(x => x === realVal || x[valueKey] === realVal) || val
+    );
+  };
+
+  // If value is a single string, must return an Array so `cleanValue` won't be
+  // empty: https://github.com/JedWatson/react-select/blob/32ad5c040bdd96cd1ca71010c2558842d684629c/packages/react-select/src/utils.js#L64
+  return (Array.isArray(value) ? value : [value]).map(find);
+}

superset-frontend/src/components/ListView/utils.ts

@@ -35,7 +35,7 @@ import {
 
 import rison from 'rison';
 import { isEqual } from 'lodash';
-import { PartialStylesConfig } from 'src/components/Select';
+import { PartialStylesConfig } from 'src/components/DeprecatedSelect';
 import {
   FetchDataConfig,
   Filter,

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx

@@ -52,10 +52,10 @@ jest.mock('src/components/ResizableSidebar/useStoredSidebarWidth');
 jest.mock('src/components/Icons/Icon', () => () => (
   <div data-test="mock-icon" />
 ));
-jest.mock('src/components/Select/WindowedSelect', () => () => (
+jest.mock('src/components/DeprecatedSelect/WindowedSelect', () => () => (
   <div data-test="mock-windowed-select" />
 ));
-jest.mock('src/components/Select', () => () => (
+jest.mock('src/components/DeprecatedSelect', () => () => (
   <div data-test="mock-deprecated-select" />
 ));
 jest.mock('src/components/Select/Select', () => () => (

superset-frontend/src/visualizations/FilterBox/FilterBox.jsx

@@ -20,7 +20,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { max as d3Max } from 'd3-array';
-import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
+import {
+  AsyncCreatableSelect,
+  CreatableSelect,
+} from 'src/components/DeprecatedSelect';
 import Button from 'src/components/Button';
 import {
   css,
@@ -43,7 +46,7 @@ import ControlRow from 'src/explore/components/ControlRow';
 import Control from 'src/explore/components/Control';
 import { controls } from 'src/explore/controls';
 import { getExploreUrl } from 'src/explore/exploreUtils';
-import OnPasteSelect from 'src/components/Select/OnPasteSelect';
+import OnPasteSelect from 'src/components/DeprecatedSelect/OnPasteSelect';
 import {
   FILTER_CONFIG_ATTRIBUTES,
   FILTER_OPTIONS_LIMIT,