Skip to content

Commit

Permalink
chore: Select component refactoring - ColorSchemeControl - Iteration 5 (
Browse files Browse the repository at this point in the history
#15555)

* Enhance Select

* Transition Select to Antd

* Update test

* Fix Cypress

* Change name to aria-label

* Update Cypress search val

* Test Cypress selection
  • Loading branch information
geido committed Jul 19, 2021
1 parent 5cc4f3c commit 45c3ae0
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,12 @@ describe('Visualization > Line', () => {
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"]')
cy.get('.Control[data-test="color_scheme"] input[type="search"]')
.focus()
.type('air{enter}');
cy.get('input[name="select-color_scheme"]').should(
'have.value',
'bnbColors',
);
.type('bnbColors{enter}');
cy.get(
'.Control[data-test="color_scheme"] .ant-select-selection-item > ul[data-test="bnbColors"]',
).should('exist');
});

it('should work with adhoc metric', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/
/* eslint-disable no-unused-expressions */
import React from 'react';
import { Select } from 'src/components/Select';
import { Select } from 'src/components';
import { getCategoricalSchemeRegistry } from '@superset-ui/core';
import { styledMount as mount } from 'spec/helpers/theming';
import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeControl';
Expand All @@ -37,7 +37,7 @@ describe('ColorSchemeControl', () => {
wrapper = mount(<ColorSchemeControl {...defaultProps} />);
});

it('renders a Creatable', () => {
it('renders a Select', () => {
expect(wrapper.find(Select)).toExist();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { isFunction } from 'lodash';
import { Select } from 'src/components/Select';
import { Select } from 'src/components';
import { Tooltip } from 'src/components/Tooltip';
import ControlHeader from '../ControlHeader';

Expand Down Expand Up @@ -54,14 +54,13 @@ export default class ColorSchemeControl extends React.PureComponent {
this.renderOption = this.renderOption.bind(this);
}

onChange(option) {
const optionValue = option ? option.value : null;
this.props.onChange(optionValue);
onChange(value) {
this.props.onChange(value);
}

renderOption(key) {
renderOption(value) {
const { isLinear } = this.props;
const currentScheme = this.schemes[key.value];
const currentScheme = this.schemes[value];

// For categorical scheme, display all the colors
// For sequential scheme, show 10 or interpolate to 10.
Expand Down Expand Up @@ -106,34 +105,28 @@ export default class ColorSchemeControl extends React.PureComponent {
}

render() {
const { schemes, choices, labelMargin = 0 } = this.props;
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]) => ({
value,
// use scheme label if available
label: this.schemes[value]?.label || label,
label: this.renderOption(value),
}),
);
const selectProps = {
multi: false,
allowClear: this.props.clearable,
defaultValue: this.props.default,
name: `select-${this.props.name}`,
placeholder: `Select (${options.length})`,
default: this.props.default,
onChange: this.onChange,
options,
placeholder: `Select (${options.length})`,
showSearch: true,
value: this.props.value,
autosize: false,
clearable: this.props.clearable,
onChange: this.onChange,
optionRenderer: this.renderOption,
valueRenderer: this.renderOption,
};
return (
<div>
<ControlHeader {...this.props} />
<Select {...selectProps} css={{ marginTop: labelMargin }} />
</div>
<Select header={<ControlHeader {...this.props} />} {...selectProps} />
);
}
}
Expand Down

0 comments on commit 45c3ae0

Please sign in to comment.