This is an automated email from the ASF dual-hosted git repository. villebro pushed a commit to branch 0.37 in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 30efcc964d9beb43846d9b369ea88504fd7d9e91 Author: Jesse Yang <[email protected]> AuthorDate: Tue Sep 8 18:38:50 2020 -0700 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 --- .../explore/visualizations/line.test.ts | 12 ++++++++++ .../explore/components/ColorScheme_spec.jsx | 6 +++-- .../components/controls/ColorSchemeControl.jsx | 26 ++++++++++++---------- 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts index 76a9086..34f80f2 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts @@ -52,6 +52,18 @@ describe('Visualization > Line', () => { 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)); diff --git a/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx b/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx index 4cf618b..b778519 100644 --- a/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx +++ b/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx @@ -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)).toHaveLength(1); + expect(wrapper.find(Select)).toExist(); }); }); diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx index a9e285a..5e7e486 100644 --- a/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx +++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx @@ -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'; @@ -50,7 +50,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); } @@ -62,9 +61,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. @@ -97,12 +95,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}`, @@ -119,7 +121,7 @@ export default class ColorSchemeControl extends React.PureComponent { return ( <div> <ControlHeader {...this.props} /> - <CreatableSelect {...selectProps} /> + <Select {...selectProps} /> </div> ); }
