iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "fix: keep placeholder in multivalue select when a value exists (#11181)" (#11270) 

This reverts commit 31cc4155b7.
This commit is contained in:
Erik Ritter 2020-10-14 12:58:58 -07:00 committed by GitHub
parent 9caf875263
commit fc74b5d4a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx
View File

@ -19,7 +19,7 @@
/* eslint-disable no-unused-expressions */
import React from 'react';
import sinon from 'sinon';
import { shallow, mount } from 'enzyme';
import { shallow } from 'enzyme';
import { Select, CreatableSelect } from 'src/components/Select';
import OnPasteSelect from 'src/components/Select/OnPasteSelect';
import SelectControl from 'src/explore/components/controls/SelectControl';
@ -47,6 +47,25 @@ describe('SelectControl', () => {
wrapper = shallow(<SelectControl {...defaultProps} />);
});
it('renders with Select by default', () => {
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(1);
});
it('renders with OnPasteSelect when multi', () => {
wrapper.setProps({ multi: true });
expect(wrapper.find(OnPasteSelect)).toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(0);
});
it('renders with Creatable when freeForm', () => {
wrapper.setProps({ freeForm: true });
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength(
1,
);
});
it('uses Select in onPasteSelect when freeForm=false', () => {
wrapper = shallow(<SelectControl {...defaultProps} multi />);
const select = wrapper.find(OnPasteSelect);
@ -81,52 +100,6 @@ describe('SelectControl', () => {
expect(selectAllProps.onChange.calledWith(expectedValues)).toBe(true);
});
describe('render', () => {
it('renders with Select by default', () => {
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(1);
});
it('renders with OnPasteSelect when multi', () => {
wrapper.setProps({ multi: true });
expect(wrapper.find(OnPasteSelect)).toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(0);
});
it('renders with Creatable when freeForm', () => {
wrapper.setProps({ freeForm: true });
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength(
1,
);
});
describe('when select is multi', () => {
it('renders the placeholder when a selection has been made', () => {
wrapper = mount(
<SelectControl
{...defaultProps}
multi
value={50}
placeholder="add something"
/>,
);
expect(wrapper.html()).toContain('add something');
});
});
describe('when select is single', () => {
it('does not render the placeholder when a selection has been made', () => {
wrapper = mount(
<SelectControl
{...defaultProps}
value={50}
placeholder="add something"
/>,
);
expect(wrapper.html()).not.toContain('add something');
});
});
});
describe('getOptions', () => {
it('returns the correct options', () => {
wrapper.setProps(defaultProps);

44
superset-frontend/src/components/Select/styles.tsx
View File

@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { CSSProperties, ComponentType } from 'react';
import React, { CSSProperties } from 'react';
import { css, SerializedStyles, ClassNames } from '@emotion/core';
import { supersetTheme } from '@superset-ui/core';
import {
@ -241,39 +241,9 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
}),
};
const multiInputSpanStyle = css`
color: '#879399',
position: 'absolute',
top: '2px',
left: '4px',
width: '100vw',
`;
const { ClearIndicator, DropdownIndicator, Option } = defaultComponents;
const { ClearIndicator, DropdownIndicator, Option, Input } = defaultComponents;
type SelectComponentsType = SelectComponentsConfig<any> & {
Input: ComponentType<InputProps>;
};
// react-select is missing selectProps from their props type
// so overwriting it here to avoid errors
type InputProps = {
selectProps: {
isMulti: boolean;
value: {
length: number;
};
placeholder: string;
};
cx: (a: string | null, b: any, c: string) => string | void;
innerRef: (element: React.Ref<any>) => void;
isHidden: boolean;
isDisabled?: boolean | undefined;
className?: string | undefined;
getStyles: any;
};
export const DEFAULT_COMPONENTS: SelectComponentsType = {
export const DEFAULT_COMPONENTS: SelectComponentsConfig<any> = {
Option: ({ children, innerProps, data, ...props }) => (
<ClassNames>
{({ css }) => (
@ -302,14 +272,6 @@ export const DEFAULT_COMPONENTS: SelectComponentsType = {
/>
</DropdownIndicator>
),
Input: (props: InputProps) => (
<div style={{ position: 'relative' }}>
<Input {...props} />
{!!(props.selectProps.isMulti && props.selectProps.value.length) && (
<span css={multiInputSpanStyle}>{props.selectProps.placeholder}</span>
)}
</div>
),
};
export const VALUE_LABELED_STYLES: PartialStylesConfig = {

2
superset-frontend/src/explore/components/controls/AdhocFilterControl.jsx
View File

@ -267,7 +267,7 @@ export default class AdhocFilterControl extends React.Component {
<OnPasteSelect
isMulti
name={`select-${this.props.name}`}
placeholder={t('choose one or more column or metric')}
placeholder={t('choose a column or metric')}
options={this.state.options}
value={this.state.values}
labelKey="label"

6
superset-frontend/src/explore/components/controls/MetricsControl.jsx
View File

@ -337,11 +337,7 @@ export default class MetricsControl extends React.PureComponent {
<OnPasteSelect
isMulti={this.props.multi}
name={`select-${this.props.name}`}
placeholder={
this.props.multi
? t('choose one or more column or aggregate function')
: t('choose a column or aggregate function')
}
placeholder={t('choose a column or aggregate function')}
options={this.state.options}
value={this.state.value}
labelKey="label"