QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-12 20:57:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

81
superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx
View File

@@ -18,12 +18,10 @@
*/
/* eslint-disable no-unused-expressions */
import React from 'react';
import Select, { Creatable } from 'react-select';
import VirtualizedSelect from 'react-virtualized-select';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import OnPasteSelect from 'src/components/OnPasteSelect';
import VirtualizedRendererWrap from 'src/components/VirtualizedRendererWrap';
import { Select, CreatableSelect } from 'src/components/Select';
import OnPasteSelect from 'src/components/Select/OnPasteSelect';
import SelectControl from 'src/explore/components/controls/SelectControl';
const defaultProps = {
@@ -47,16 +45,42 @@ describe('SelectControl', () => {
beforeEach(() => {
wrapper = shallow(<SelectControl {...defaultProps} />);
wrapper.setProps(defaultProps);
});
it('renders an OnPasteSelect', () => {
it('renders with Select by default', () => {
expect(wrapper.find(OnPasteSelect)).toHaveLength(0);
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(1);
});
it('renders with OnPasteSelect when multi', () => {
wrapper.setProps({ multi: true });
expect(wrapper.find(OnPasteSelect)).toHaveLength(1);
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(0);
});
it('calls onChange when toggled', () => {
it('renders with Creatable when freeForm', () => {
wrapper.setProps({ freeForm: true });
expect(wrapper.find(OnPasteSelect)).toHaveLength(0);
expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength(
1,
);
});
it('uses Select in onPasteSelect when freeForm=false', () => {
wrapper = shallow(<SelectControl {...defaultProps} multi />);
const select = wrapper.find(OnPasteSelect);
select.simulate('change', { value: 50 });
expect(select.props().selectWrap).toBe(Select);
});
it('uses Creatable in onPasteSelect when freeForm=true', () => {
wrapper = shallow(<SelectControl {...defaultProps} multi freeForm />);
const select = wrapper.find(OnPasteSelect);
expect(select.props().selectWrap).toBe(CreatableSelect);
});
it('calls props.onChange when select', () => {
const select = wrapper.instance();
select.onChange({ value: 50 });
expect(defaultProps.onChange.calledWith(50)).toBe(true);
});
@@ -72,36 +96,10 @@ describe('SelectControl', () => {
onChange: sinon.spy(),
};
wrapper.setProps(selectAllProps);
const select = wrapper.find(OnPasteSelect);
select.simulate('change', [{ meta: true, value: 'Select All' }]);
wrapper.instance().onChange([{ meta: true, value: 'Select All' }]);
expect(selectAllProps.onChange.calledWith(expectedValues)).toBe(true);
});
it('passes VirtualizedSelect as selectWrap', () => {
const select = wrapper.find(OnPasteSelect);
expect(select.props().selectWrap).toBe(VirtualizedSelect);
});
it('passes Creatable as selectComponent when freeForm=true', () => {
wrapper = shallow(<SelectControl {...defaultProps} freeForm />);
const select = wrapper.find(OnPasteSelect);
expect(select.props().selectComponent).toBe(Creatable);
});
it('passes Select as selectComponent when freeForm=false', () => {
const select = wrapper.find(OnPasteSelect);
expect(select.props().selectComponent).toBe(Select);
});
it('wraps optionRenderer in a VirtualizedRendererWrap', () => {
const select = wrapper.find(OnPasteSelect);
const defaultOptionRenderer = SelectControl.defaultProps.optionRenderer;
const wrappedRenderer = VirtualizedRendererWrap(defaultOptionRenderer);
expect(typeof select.props().optionRenderer).toBe('function');
// different instances of wrapper with same inner renderer are unequal
expect(select.props().optionRenderer.name).toBe(wrappedRenderer.name);
});
describe('getOptions', () => {
it('returns the correct options', () => {
wrapper.setProps(defaultProps);
@@ -132,15 +130,18 @@ describe('SelectControl', () => {
value: ['one', 'two'],
name: 'row_limit',
label: 'Row Limit',
valueKey: 'value',
valueKey: 'custom_value_key',
onChange: sinon.spy(),
};
const newOptions = [
{ value: 'one', label: 'one' },
{ value: 'two', label: 'two' },
// the last added option is at the top
const expectedNewOptions = [
{ custom_value_key: 'two', label: 'two' },
{ custom_value_key: 'one', label: 'one' },
];
wrapper.setProps(freeFormProps);
expect(wrapper.instance().getOptions(freeFormProps)).toEqual(newOptions);
expect(wrapper.instance().getOptions(freeFormProps)).toEqual(
expectedNewOptions,
);
});
});