mirror of https://github.com/apache/superset.git
fix: ColorSchemeControl should not use CreatableSelect (#10814)
* fix: ColorSchemeControl should not be CreatableSelect Currently if you type to search in ColorSchemeControl it crashes the whole page. * Make it possible to filter by label * Fix ColorSchemeControl unit test
This commit is contained in:
parent
3ae80d3b98
commit
cda232bf15
|
@ -46,12 +46,24 @@ describe('Visualization > Line', () => {
|
|||
});
|
||||
|
||||
it('should allow negative values in Y bounds', () => {
|
||||
cy.get('#controlSections-tab-display').click().wait(1000);
|
||||
cy.get('#controlSections-tab-display').click();
|
||||
cy.get('span').contains('Y Axis Bounds').scrollIntoView();
|
||||
cy.get('input[placeholder="Min"]').type('-0.1', { delay: 100 }).wait(1000);
|
||||
cy.get('input[placeholder="Min"]').type('-0.1', { delay: 100 });
|
||||
cy.get('.alert-warning').should('not.exist');
|
||||
});
|
||||
|
||||
it('should allow type to search color schemes', () => {
|
||||
cy.get('#controlSections-tab-display').click();
|
||||
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
|
||||
cy.get('.Control[data-test="color_scheme"] input[type="text"]')
|
||||
.focus()
|
||||
.type('air{enter}');
|
||||
cy.get('input[name="select-color_scheme"]').should(
|
||||
'have.value',
|
||||
'bnbColors',
|
||||
);
|
||||
});
|
||||
|
||||
it('should work with adhoc metric', () => {
|
||||
const formData = { ...LINE_CHART_DEFAULTS, metrics: [NUM_METRIC] };
|
||||
cy.visitChartByParams(JSON.stringify(formData));
|
||||
|
|
|
@ -19,12 +19,14 @@
|
|||
/* eslint-disable no-unused-expressions */
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Creatable from 'react-select/creatable';
|
||||
import { Select } from 'src/components/Select';
|
||||
import { getCategoricalSchemeRegistry } from '@superset-ui/color';
|
||||
|
||||
import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeControl';
|
||||
|
||||
const defaultProps = {
|
||||
name: 'color_scheme',
|
||||
label: 'Color Scheme',
|
||||
options: getCategoricalSchemeRegistry()
|
||||
.keys()
|
||||
.map(s => [s, s]),
|
||||
|
@ -37,6 +39,6 @@ describe('ColorSchemeControl', () => {
|
|||
});
|
||||
|
||||
it('renders a Creatable', () => {
|
||||
expect(wrapper.find(Creatable)).toExist();
|
||||
expect(wrapper.find(Select)).toExist();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isFunction } from 'lodash';
|
||||
import { CreatableSelect } from 'src/components/Select';
|
||||
import { Select } from 'src/components/Select';
|
||||
import ControlHeader from '../ControlHeader';
|
||||
import TooltipWrapper from '../../../components/TooltipWrapper';
|
||||
import './ColorSchemeControl.less';
|
||||
|
@ -53,7 +53,6 @@ export default class ColorSchemeControl extends React.PureComponent {
|
|||
this.state = {
|
||||
scheme: this.props.value,
|
||||
};
|
||||
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.renderOption = this.renderOption.bind(this);
|
||||
}
|
||||
|
@ -65,9 +64,8 @@ export default class ColorSchemeControl extends React.PureComponent {
|
|||
}
|
||||
|
||||
renderOption(key) {
|
||||
const { isLinear, schemes } = this.props;
|
||||
const schemeLookup = isFunction(schemes) ? schemes() : schemes;
|
||||
const currentScheme = schemeLookup[key.value || defaultProps.value];
|
||||
const { isLinear } = this.props;
|
||||
const currentScheme = this.schemes[key.value];
|
||||
|
||||
// For categorical scheme, display all the colors
|
||||
// For sequential scheme, show 10 or interpolate to 10.
|
||||
|
@ -100,12 +98,16 @@ export default class ColorSchemeControl extends React.PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { choices } = this.props;
|
||||
const options = (isFunction(choices) ? choices() : choices).map(choice => ({
|
||||
value: choice[0],
|
||||
label: choice[1],
|
||||
}));
|
||||
|
||||
const { schemes, choices } = this.props;
|
||||
// save parsed schemes for later
|
||||
this.schemes = isFunction(schemes) ? schemes() : schemes;
|
||||
const options = (isFunction(choices) ? choices() : choices).map(
|
||||
([value, label]) => ({
|
||||
value,
|
||||
// use scheme label if available
|
||||
label: this.schemes[value]?.label || label,
|
||||
}),
|
||||
);
|
||||
const selectProps = {
|
||||
multi: false,
|
||||
name: `select-${this.props.name}`,
|
||||
|
@ -122,7 +124,7 @@ export default class ColorSchemeControl extends React.PureComponent {
|
|||
return (
|
||||
<div>
|
||||
<ControlHeader {...this.props} />
|
||||
<CreatableSelect {...selectProps} />
|
||||
<Select {...selectProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue