QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-18 23:55:00 +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

3
superset-frontend/spec/javascripts/components/AsyncSelect_spec.jsx
View File

@@ -17,10 +17,9 @@
* under the License.
*/
import React from 'react';
import Select from 'react-select';
import { shallow } from 'enzyme';
import fetchMock from 'fetch-mock';
import Select from 'src/components/Select';
import AsyncSelect from 'src/components/AsyncSelect';
describe('AsyncSelect', () => {

2
superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx
View File

@@ -20,7 +20,7 @@ import React from 'react';
import { mount, shallow } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { MenuItem, Pagination } from 'react-bootstrap';
import Select from 'react-select';
import Select from 'src/components/Select';
import { QueryParamProvider } from 'use-query-params';
import ListView from 'src/components/ListView/ListView';

23
superset-frontend/spec/javascripts/components/OnPasteSelect_spec.jsx
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', () => {

120
superset-frontend/spec/javascripts/components/VirtualizedRendererWrap_spec.jsx
View File

@@ -1,120 +0,0 @@
/**
* 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.
*/
/* eslint-disable no-unused-expressions */
import React from 'react';
import sinon from 'sinon';
import PropTypes from 'prop-types';
import { shallow } from 'enzyme';
import VirtualizedRendererWrap from 'src/components/VirtualizedRendererWrap';
const defaultProps = {
focusedOption: { label: 'focusedOn', value: 'focusedOn' },
focusOption: sinon.spy(),
key: 'key1',
option: { label: 'option1', value: 'option1' },
selectValue: sinon.spy(),
valueArray: [],
};
function TestOption({ option }) {
return <span>{option.label}</span>;
}
TestOption.propTypes = {
option: PropTypes.object.isRequired,
};
const defaultRenderer = opt => <TestOption option={opt} />;
const RendererWrap = VirtualizedRendererWrap(defaultRenderer);
describe('VirtualizedRendererWrap', () => {
let wrapper;
let props;
beforeEach(() => {
wrapper = shallow(<RendererWrap {...defaultProps} />);
props = { ...defaultProps };
});
it('uses the provided renderer', () => {
const option = wrapper.find(TestOption);
expect(option).toHaveLength(1);
});
it('renders nothing when no option is provided', () => {
props.option = null;
wrapper = shallow(<RendererWrap {...props} />);
const option = wrapper.find(TestOption);
expect(option).toHaveLength(0);
});
it('renders unfocused, unselected options with the default class', () => {
const optionDiv = wrapper.find('div');
expect(optionDiv).toHaveLength(1);
expect(optionDiv.props().className).toBe('VirtualizedSelectOption');
});
it('renders focused option with the correct class', () => {
props.option = props.focusedOption;
wrapper = shallow(<RendererWrap {...props} />);
const optionDiv = wrapper.find('div');
expect(optionDiv.props().className).toBe(
'VirtualizedSelectOption VirtualizedSelectFocusedOption',
);
});
it('renders disabled option with the correct class', () => {
props.option.disabled = true;
wrapper = shallow(<RendererWrap {...props} />);
const optionDiv = wrapper.find('div');
expect(optionDiv.props().className).toBe(
'VirtualizedSelectOption VirtualizedSelectDisabledOption',
);
props.option.disabled = false;
});
it('renders selected option with the correct class', () => {
props.valueArray = [props.option, props.focusedOption];
wrapper = shallow(<RendererWrap {...props} />);
const optionDiv = wrapper.find('div');
expect(optionDiv.props().className).toBe(
'VirtualizedSelectOption VirtualizedSelectSelectedOption',
);
});
it('renders options with custom classes', () => {
props.option.className = 'CustomClass';
wrapper = shallow(<RendererWrap {...props} />);
const optionDiv = wrapper.find('div');
expect(optionDiv.props().className).toBe(
'VirtualizedSelectOption CustomClass',
);
});
it('calls focusedOption on its own option onMouseEnter', () => {
const optionDiv = wrapper.find('div');
optionDiv.simulate('mouseEnter');
expect(props.focusOption.calledWith(props.option)).toBe(true);
});
it('calls selectValue on its own option onClick', () => {
const optionDiv = wrapper.find('div');
optionDiv.simulate('click');
expect(props.selectValue.calledWith(props.option)).toBe(true);
});
});