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

chore: Select component refactoring - ColorSchemeControl - Iteration 5 (#15555)

Browse Source 
* Enhance Select

* Transition Select to Antd

* Update test

* Fix Cypress

* Change name to aria-label

* Update Cypress search val

* Test Cypress selection
This commit is contained in:
Geido
2021-07-19 08:07:40 +02:00
committed by GitHub
parent 5cc4f3c4b9
commit 45c3ae0bf9
3 changed files with 23 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts
View File

@@ -73,13 +73,12 @@ describe('Visualization > Line', () => {
it('should allow type to search color schemes', () => { it('should allow type to search color schemes', () => {
cy.get('#controlSections-tab-display').click(); cy.get('#controlSections-tab-display').click();
cy.get('.Control[data-test="color_scheme"]').scrollIntoView(); cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="text"]') cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus() .focus()
.type('air{enter}'); .type('bnbColors{enter}');
cy.get('input[name="select-color_scheme"]').should( cy.get(
'have.value', '.Control[data-test="color_scheme"] .ant-select-selection-item > ul[data-test="bnbColors"]',
'bnbColors', ).should('exist');
);
}); });
it('should work with adhoc metric', () => { it('should work with adhoc metric', () => {

4
superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx
View File

@@ -18,7 +18,7 @@
*/ */
/* eslint-disable no-unused-expressions */ /* eslint-disable no-unused-expressions */
import React from 'react'; import React from 'react';
import { Select } from 'src/components/Select'; import { Select } from 'src/components';
import { getCategoricalSchemeRegistry } from '@superset-ui/core'; import { getCategoricalSchemeRegistry } from '@superset-ui/core';
import { styledMount as mount } from 'spec/helpers/theming'; import { styledMount as mount } from 'spec/helpers/theming';
import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeControl'; import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeControl';
@@ -37,7 +37,7 @@ describe('ColorSchemeControl', () => {
wrapper = mount(<ColorSchemeControl {...defaultProps} />); wrapper = mount(<ColorSchemeControl {...defaultProps} />);
}); });
it('renders a Creatable', () => { it('renders a Select', () => {
expect(wrapper.find(Select)).toExist(); expect(wrapper.find(Select)).toExist();
}); });
}); });

39
superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx
View File

@@ -19,7 +19,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { isFunction } from 'lodash'; import { isFunction } from 'lodash';
import { Select } from 'src/components/Select'; import { Select } from 'src/components';
import { Tooltip } from 'src/components/Tooltip'; import { Tooltip } from 'src/components/Tooltip';
import ControlHeader from '../ControlHeader'; import ControlHeader from '../ControlHeader';
@@ -54,14 +54,13 @@ export default class ColorSchemeControl extends React.PureComponent {
this.renderOption = this.renderOption.bind(this); this.renderOption = this.renderOption.bind(this);
} }
onChange(option) { onChange(value) {
const optionValue = option ? option.value : null; this.props.onChange(value);
this.props.onChange(optionValue);
} }
renderOption(key) { renderOption(value) {
const { isLinear } = this.props; const { isLinear } = this.props;
const currentScheme = this.schemes[key.value]; const currentScheme = this.schemes[value];
// For categorical scheme, display all the colors // For categorical scheme, display all the colors
// For sequential scheme, show 10 or interpolate to 10. // For sequential scheme, show 10 or interpolate to 10.
@@ -106,34 +105,28 @@ export default class ColorSchemeControl extends React.PureComponent {
} }
render() { render() {
const { schemes, choices, labelMargin = 0 } = this.props; const { schemes, choices } = this.props;
// save parsed schemes for later // save parsed schemes for later
this.schemes = isFunction(schemes) ? schemes() : schemes; this.schemes = isFunction(schemes) ? schemes() : schemes;
const options = (isFunction(choices) ? choices() : choices).map( const options = (isFunction(choices) ? choices() : choices).map(
([value, label]) => ({ ([value]) => ({
value, value,
// use scheme label if available label: this.renderOption(value),
label: this.schemes[value]?.label || label,
}), }),
); );
const selectProps = { const selectProps = {
multi: false, allowClear: this.props.clearable,
defaultValue: this.props.default,
name: `select-${this.props.name}`, name: `select-${this.props.name}`,
placeholder: `Select (${options.length})`,
default: this.props.default,
options,
value: this.props.value,
autosize: false,
clearable: this.props.clearable,
onChange: this.onChange, onChange: this.onChange,
optionRenderer: this.renderOption, options,
valueRenderer: this.renderOption, placeholder: `Select (${options.length})`,
showSearch: true,
value: this.props.value,
}; };
return ( return (
<div> <Select header={<ControlHeader {...this.props} />} {...selectProps} />
<ControlHeader {...this.props} />
<Select {...selectProps} css={{ marginTop: labelMargin }} />
</div>
); );
} }
} }