feat: upgrade react-select and make multi-select sortable (#9628)

* feat: upgrade react-select v1.3.0 to v3.1.0

Upgrade `react-select`, replace `react-virtualized-select` with a custom
solution implemented with `react-window`.

Future plans include deprecate `react-virtualized` used in other places, too.

Migrate all react-select related components to `src/Components/Select`.

* Fix new list view

* Fix tests

* Address PR comments

* Fix a flacky Cypress test

* Adjust styles for Select in CRUD ListView

* Fix loadOptions for owners select in chart PropertiesModal

TODO: add typing support for AsyncSelect props.

* Address PR comments; allow isMulti in SelectControl, too

* Clean up NaN in table filter values

* Fix flacky test

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

@@ -23,7 +23,7 @@ import { shallow } from 'enzyme';
 
 import MetricsControl from 'src/explore/components/controls/MetricsControl';
 import { AGGREGATES } from 'src/explore/constants';
-import OnPasteSelect from 'src/components/OnPasteSelect';
+import OnPasteSelect from 'src/components/Select/OnPasteSelect';
 import AdhocMetric, { EXPRESSION_TYPES } from 'src/explore/AdhocMetric';
 
 const defaultProps = {
@@ -138,11 +138,11 @@ describe('MetricsControl', () => {
           expressionType: EXPRESSION_TYPES.SIMPLE,
           column: { type: 'double', column_name: 'value' },
           aggregate: AGGREGATES.SUM,
-          fromFormData: true,
           label: 'SUM(value)',
           hasCustomLabel: false,
           optionName: 'blahblahblah',
           sqlExpression: null,
+          isNew: false,
         },
         'avg__value',
       ]);
@@ -163,7 +163,8 @@ describe('MetricsControl', () => {
       select.simulate('change', [valueColumn]);
 
       const adhocMetric = onChange.lastCall.args[0][0];
-      expect(adhocMetric instanceof AdhocMetric).toBe(true);
+      expect(adhocMetric).toBeInstanceOf(AdhocMetric);
+      expect(adhocMetric.isNew).toBe(true);
       expect(onChange.lastCall.args).toEqual([
         [
           {
@@ -171,35 +172,46 @@ describe('MetricsControl', () => {
             column: valueColumn,
             aggregate: AGGREGATES.SUM,
             label: 'SUM(value)',
-            fromFormData: false,
             hasCustomLabel: false,
             optionName: adhocMetric.optionName,
             sqlExpression: null,
+            isNew: true,
           },
         ],
       ]);
     });
 
-    it('handles aggregates being selected', () => {
+    it('handles aggregates being selected', done => {
       const { wrapper, onChange } = setup();
       const select = wrapper.find(OnPasteSelect);
 
       // mock out the Select ref
-      const setInputSpy = sinon.spy();
-      const handleInputSpy = sinon.spy();
-      wrapper.instance().select = {
-        setInputValue: setInputSpy,
-        handleInputChange: handleInputSpy,
-        input: { input: {} },
-      };
+      const instance = wrapper.instance();
+      const handleInputChangeSpy = jest.fn();
+      const focusInputSpy = jest.fn();
+      // simulate react-select StateManager
+      instance.selectRef({
+        select: {
+          handleInputChange: handleInputChangeSpy,
+          inputRef: { value: '' },
+          focusInput: focusInputSpy,
+        },
+      });
 
       select.simulate('change', [{ aggregate_name: 'SUM', optionName: 'SUM' }]);
 
-      expect(setInputSpy.calledWith('SUM()')).toBe(true);
-      expect(handleInputSpy.calledWith({ target: { value: 'SUM()' } })).toBe(
-        true,
-      );
-      expect(onChange.lastCall.args).toEqual([[]]);
+      expect(instance.select.inputRef.value).toBe('SUM()');
+      expect(handleInputChangeSpy).toHaveBeenCalledWith({
+        currentTarget: { value: 'SUM()' },
+      });
+      expect(onChange.calledOnceWith([])).toBe(true);
+      expect(focusInputSpy).toHaveBeenCalledTimes(0);
+      setTimeout(() => {
+        expect(focusInputSpy).toHaveBeenCalledTimes(1);
+        expect(instance.select.inputRef.selectionStart).toBe(4);
+        expect(instance.select.inputRef.selectionEnd).toBe(4);
+        done();
+      });
     });
 
     it('preserves existing selected AdhocMetrics', () => {
@@ -255,9 +267,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            metric_name: 'a_metric',
-            optionName: 'a_metric',
-            expression: 'SUM(FANCY(metric))',
+            data: {
+              metric_name: 'a_metric',
+              optionName: 'a_metric',
+              expression: 'SUM(FANCY(metric))',
+            },
           },
           'a',
         ),
@@ -270,9 +284,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            metric_name: 'avg__metric',
-            optionName: 'avg__metric',
-            expression: 'AVG(metric)',
+            data: {
+              metric_name: 'avg__metric',
+              optionName: 'avg__metric',
+              expression: 'AVG(metric)',
+            },
           },
           'a',
         ),
@@ -285,9 +301,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            type: 'VARCHAR(255)',
-            column_name: 'source',
-            optionName: '_col_source',
+            data: {
+              type: 'VARCHAR(255)',
+              column_name: 'source',
+              optionName: '_col_source',
+            },
           },
           'sou',
         ),
@@ -297,7 +315,7 @@ describe('MetricsControl', () => {
         !!wrapper
           .instance()
           .selectFilterOption(
-            { aggregate_name: 'AVG', optionName: '_aggregate_AVG' },
+            { data: { aggregate_name: 'AVG', optionName: '_aggregate_AVG' } },
             'av',
           ),
       ).toBe(true);
@@ -309,9 +327,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            metric_name: 'sum__num',
-            verbose_name: 'babies',
-            optionName: '_col_sum_num',
+            data: {
+              metric_name: 'sum__num',
+              verbose_name: 'babies',
+              optionName: '_col_sum_num',
+            },
           },
           'bab',
         ),
@@ -324,9 +344,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            metric_name: 'avg__metric',
-            optionName: 'avg__metric',
-            expression: 'AVG(metric)',
+            data: {
+              metric_name: 'avg__metric',
+              optionName: 'avg__metric',
+              expression: 'AVG(metric)',
+            },
           },
           'a',
         ),
@@ -339,9 +361,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            metric_name: 'my_fancy_sum_metric',
-            optionName: 'my_fancy_sum_metric',
-            expression: 'SUM(value)',
+            data: {
+              metric_name: 'my_fancy_sum_metric',
+              optionName: 'my_fancy_sum_metric',
+              expression: 'SUM(value)',
+            },
           },
           'sum',
         ),
@@ -354,9 +378,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            metric_name: 'sum__value',
-            optionName: 'sum__value',
-            expression: 'SUM(value)',
+            data: {
+              metric_name: 'sum__value',
+              optionName: 'sum__value',
+              expression: 'SUM(value)',
+            },
           },
           'sum',
         ),
@@ -365,9 +391,11 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper.instance().selectFilterOption(
           {
-            metric_name: 'sum__value',
-            optionName: 'sum__value',
-            expression: 'SUM("table"."value")',
+            data: {
+              metric_name: 'sum__value',
+              optionName: 'sum__value',
+              expression: 'SUM("table"."value")',
+            },
           },
           'sum',
         ),
@@ -379,12 +407,12 @@ describe('MetricsControl', () => {
       wrapper.setState({ aggregateInInput: true });
 
       expect(
-        !!wrapper
-          .instance()
-          .selectFilterOption(
-            { metric_name: 'metric', expression: 'SUM(FANCY(metric))' },
-            'SUM(',
-          ),
+        !!wrapper.instance().selectFilterOption(
+          {
+            data: { metric_name: 'metric', expression: 'SUM(FANCY(metric))' },
+          },
+          'SUM(',
+        ),
       ).toBe(false);
     });
 
@@ -395,7 +423,10 @@ describe('MetricsControl', () => {
       expect(
         !!wrapper
           .instance()
-          .selectFilterOption({ type: 'DOUBLE', column_name: 'value' }, 'SUM('),
+          .selectFilterOption(
+            { data: { type: 'DOUBLE', column_name: 'value' } },
+            'SUM(',
+          ),
       ).toBe(true);
     });