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
This commit is contained in:
Jesse Yang
2020-05-19 16:59:49 -07:00
committed by GitHub
parent 68832d2fa5
commit 81ab8dd8b4
97 changed files with 2027 additions and 1234 deletions

View File

@@ -20,14 +20,16 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import VirtualizedSelect from 'react-virtualized-select';
import Select, { Creatable } from 'react-select';
import OnPasteSelect from 'src/components/OnPasteSelect';
import {
Select,
AsyncSelect,
OnPasteSelect,
CreatableSelect,
} from 'src/components/Select';
const defaultProps = {
onChange: sinon.spy(),
multi: true,
isMulti: true,
isValidNewOption: sinon.spy(s => !!s.label),
value: [],
options: [
@@ -60,17 +62,16 @@ describe('OnPasteSelect', () => {
});
it('renders the supplied selectWrap component', () => {
const select = wrapper.find(Select);
const select = wrapper.findWhere(x => x.type() === Select);
expect(select).toHaveLength(1);
});
it('renders custom selectWrap components', () => {
props.selectWrap = Creatable;
props.selectWrap = CreatableSelect;
wrapper = shallow(<OnPasteSelect {...props} />);
expect(wrapper.find(Creatable)).toHaveLength(1);
props.selectWrap = VirtualizedSelect;
wrapper = shallow(<OnPasteSelect {...props} />);
expect(wrapper.find(VirtualizedSelect)).toHaveLength(1);
expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength(
1,
);
});
describe('onPaste', () => {