This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 45c3ae0 chore: Select component refactoring - ColorSchemeControl -
Iteration 5 (#15555)
45c3ae0 is described below
commit 45c3ae0bf910e55a3e591dcdc5c8fb30f90c18af
Author: Geido <[email protected]>
AuthorDate: Mon Jul 19 08:07:40 2021 +0200
chore: Select component refactoring - ColorSchemeControl - Iteration 5
(#15555)
* Enhance Select
* Transition Select to Antd
* Update test
* Fix Cypress
* Change name to aria-label
* Update Cypress search val
* Test Cypress selection
---
.../explore/visualizations/line.test.ts | 11 +++----
.../explore/components/ColorScheme_spec.jsx | 4 +--
.../components/controls/ColorSchemeControl.jsx | 37 +++++++++-------------
3 files changed, 22 insertions(+), 30 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 26660bc..f75fe77 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
@@ -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', () => {
diff --git
a/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx
b/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx
index ab776da..565c4f9 100644
--- a/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/ColorScheme_spec.jsx
@@ -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';
@@ -37,7 +37,7 @@ describe('ColorSchemeControl', () => {
wrapper = mount(<ColorSchemeControl {...defaultProps} />);
});
- it('renders a Creatable', () => {
+ it('renders a Select', () => {
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 d26e91f..cf1d425 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 { Select } from 'src/components/Select';
+import { Select } from 'src/components';
import { Tooltip } from 'src/components/Tooltip';
import ControlHeader from '../ControlHeader';
@@ -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.
@@ -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} />
);
}
}
