mirror of https://github.com/apache/superset.git
parent
9b0e6d0cc0
commit
75f927b9eb
|
@ -35,13 +35,9 @@ describe('Advanced analytics', () => {
|
||||||
.find('input[type=text]')
|
.find('input[type=text]')
|
||||||
.type('28 days{enter}');
|
.type('28 days{enter}');
|
||||||
|
|
||||||
cy.get('[data-test=time_compare]').find('.Select__control').click();
|
|
||||||
cy.get('[data-test=time_compare]')
|
cy.get('[data-test=time_compare]')
|
||||||
.find('input[type=text]')
|
.find('input[type=text]')
|
||||||
.type('364 days{enter}');
|
.type('1 year{enter}');
|
||||||
cy.get('[data-test=time_compare]')
|
|
||||||
.find('.Select__multi-value__label')
|
|
||||||
.contains('364 days');
|
|
||||||
|
|
||||||
cy.get('button[data-test="run-query-button"]').click();
|
cy.get('button[data-test="run-query-button"]').click();
|
||||||
cy.wait('@postJson');
|
cy.wait('@postJson');
|
||||||
|
@ -51,10 +47,13 @@ describe('Advanced analytics', () => {
|
||||||
chartSelector: 'svg',
|
chartSelector: 'svg',
|
||||||
});
|
});
|
||||||
|
|
||||||
cy.get('[data-test=time_compare]').within(() => {
|
cy.get('.panel-title').contains('Advanced Analytics').click();
|
||||||
cy.get('.Select__multi-value__label').contains('364 days');
|
cy.get('[data-test=time_compare]')
|
||||||
cy.get('.Select__multi-value__label').contains('28 days');
|
.find('.Select__multi-value__label')
|
||||||
});
|
.contains('28 days');
|
||||||
|
cy.get('[data-test=time_compare]')
|
||||||
|
.find('.Select__multi-value__label')
|
||||||
|
.contains('1 year');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -112,7 +112,7 @@ describe('SelectControl', () => {
|
||||||
placeholder="add something"
|
placeholder="add something"
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
expect(withMulti.html()).not.toContain('placeholder=');
|
expect(withMulti.html()).not.toContain('option(s');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
describe('withSingleChoice', () => {
|
describe('withSingleChoice', () => {
|
||||||
|
@ -125,7 +125,7 @@ describe('SelectControl', () => {
|
||||||
placeholder="add something"
|
placeholder="add something"
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
expect(singleChoice.html()).not.toContain('placeholder=');
|
expect(singleChoice.html()).not.toContain('option(s');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
describe('default placeholder', () => {
|
describe('default placeholder', () => {
|
||||||
|
@ -133,7 +133,7 @@ describe('SelectControl', () => {
|
||||||
const defaultPlaceholder = mount(
|
const defaultPlaceholder = mount(
|
||||||
<SelectControl {...defaultProps} choices={[]} multi />,
|
<SelectControl {...defaultProps} choices={[]} multi />,
|
||||||
);
|
);
|
||||||
expect(defaultPlaceholder.html()).not.toContain('placeholder=');
|
expect(defaultPlaceholder.html()).not.toContain('option(s');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
describe('all choices selected', () => {
|
describe('all choices selected', () => {
|
||||||
|
@ -145,12 +145,12 @@ describe('SelectControl', () => {
|
||||||
value={['today', '1 year ago']}
|
value={['today', '1 year ago']}
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
expect(allChoicesSelected.html()).toContain('placeholder=""');
|
expect(allChoicesSelected.html()).not.toContain('option(s');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
describe('when select is multi', () => {
|
describe('when select is multi', () => {
|
||||||
it('renders the placeholder when a selection has been made', () => {
|
it('does not render the placeholder when a selection has been made', () => {
|
||||||
wrapper = mount(
|
wrapper = mount(
|
||||||
<SelectControl
|
<SelectControl
|
||||||
{...defaultProps}
|
{...defaultProps}
|
||||||
|
@ -159,7 +159,7 @@ describe('SelectControl', () => {
|
||||||
placeholder="add something"
|
placeholder="add something"
|
||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
expect(wrapper.html()).toContain('add something');
|
expect(wrapper.html()).not.toContain('add something');
|
||||||
});
|
});
|
||||||
it('shows numbers of options as a placeholder by default', () => {
|
it('shows numbers of options as a placeholder by default', () => {
|
||||||
wrapper = mount(<SelectControl {...defaultProps} multi />);
|
wrapper = mount(<SelectControl {...defaultProps} multi />);
|
||||||
|
|
|
@ -93,7 +93,7 @@ const SupersetLabel = styled(BootstrapLabel)`
|
||||||
background-color: ${({ theme }) => theme.colors.grayscale.light3};
|
background-color: ${({ theme }) => theme.colors.grayscale.light3};
|
||||||
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
||||||
border-color: ${({ theme, onClick }) =>
|
border-color: ${({ theme, onClick }) =>
|
||||||
onClick ? theme.colors.grayscale.light1 : 'transparent'};
|
onClick ? theme.colors.grayscale.light2 : 'transparent'};
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${({ theme, onClick }) =>
|
background-color: ${({ theme, onClick }) =>
|
||||||
onClick ? theme.colors.primary.light2 : theme.colors.grayscale.light3};
|
onClick ? theme.colors.primary.light2 : theme.colors.grayscale.light3};
|
||||||
|
|
|
@ -76,6 +76,7 @@ export type SupersetStyledSelectProps<
|
||||||
// additional props for easier usage or backward compatibility
|
// additional props for easier usage or backward compatibility
|
||||||
labelKey?: string;
|
labelKey?: string;
|
||||||
valueKey?: string;
|
valueKey?: string;
|
||||||
|
assistiveText?: string;
|
||||||
multi?: boolean;
|
multi?: boolean;
|
||||||
clearable?: boolean;
|
clearable?: boolean;
|
||||||
sortable?: boolean;
|
sortable?: boolean;
|
||||||
|
|
|
@ -98,7 +98,7 @@ export const defaultTheme: (
|
||||||
spacing: {
|
spacing: {
|
||||||
baseUnit: 3,
|
baseUnit: 3,
|
||||||
menuGutter: 0,
|
menuGutter: 0,
|
||||||
controlHeight: 28,
|
controlHeight: 34,
|
||||||
lineHeight: 19,
|
lineHeight: 19,
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
minWidth: '7.5em', // just enough to display 'No options'
|
minWidth: '7.5em', // just enough to display 'No options'
|
||||||
|
@ -160,9 +160,9 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
|
||||||
{ isFocused, menuIsOpen, theme: { borderRadius, colors } },
|
{ isFocused, menuIsOpen, theme: { borderRadius, colors } },
|
||||||
) => {
|
) => {
|
||||||
const isPseudoFocused = isFocused && !menuIsOpen;
|
const isPseudoFocused = isFocused && !menuIsOpen;
|
||||||
let borderColor = '#ccc';
|
let borderColor = colors.grayBorder;
|
||||||
if (isPseudoFocused) {
|
if (isPseudoFocused) {
|
||||||
borderColor = '#000';
|
borderColor = colors.grayBorderDark;
|
||||||
} else if (menuIsOpen) {
|
} else if (menuIsOpen) {
|
||||||
borderColor = `${colors.grayBorderDark} ${colors.grayBorder} ${colors.grayBorderLight}`;
|
borderColor = `${colors.grayBorderDark} ${colors.grayBorder} ${colors.grayBorderLight}`;
|
||||||
}
|
}
|
||||||
|
@ -181,6 +181,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
|
||||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
padding-left: 1px;
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
@ -312,9 +313,31 @@ const {
|
||||||
DropdownIndicator,
|
DropdownIndicator,
|
||||||
Option,
|
Option,
|
||||||
Input,
|
Input,
|
||||||
|
SelectContainer,
|
||||||
} = defaultComponents as Required<DeepNonNullable<SelectComponentsType>>;
|
} = defaultComponents as Required<DeepNonNullable<SelectComponentsType>>;
|
||||||
|
|
||||||
export const DEFAULT_COMPONENTS: SelectComponentsType = {
|
export const DEFAULT_COMPONENTS: SelectComponentsType = {
|
||||||
|
SelectContainer: ({ children, ...props }) => {
|
||||||
|
const {
|
||||||
|
selectProps: { assistiveText },
|
||||||
|
} = props;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SelectContainer {...props}>{children}</SelectContainer>
|
||||||
|
{assistiveText && (
|
||||||
|
<span
|
||||||
|
css={(theme: SupersetTheme) => ({
|
||||||
|
marginLeft: 3,
|
||||||
|
fontSize: theme.typography.sizes.s,
|
||||||
|
color: theme.colors.grayscale.light1,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{assistiveText}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
Option: ({ children, innerProps, data, ...props }) => (
|
Option: ({ children, innerProps, data, ...props }) => (
|
||||||
<ClassNames>
|
<ClassNames>
|
||||||
{({ css }) => (
|
{({ css }) => (
|
||||||
|
@ -344,22 +367,13 @@ export const DEFAULT_COMPONENTS: SelectComponentsType = {
|
||||||
</DropdownIndicator>
|
</DropdownIndicator>
|
||||||
),
|
),
|
||||||
Input: (props: InputProps) => {
|
Input: (props: InputProps) => {
|
||||||
const {
|
const { getStyles } = props;
|
||||||
selectProps: { isMulti, value, placeholder },
|
|
||||||
getStyles,
|
|
||||||
} = props;
|
|
||||||
const isMultiWithValue = isMulti && Array.isArray(value) && !!value.length;
|
|
||||||
return (
|
return (
|
||||||
<Input
|
<Input
|
||||||
{...props}
|
{...props}
|
||||||
placeholder={isMultiWithValue ? placeholder : undefined}
|
|
||||||
css={getStyles('input', props)}
|
css={getStyles('input', props)}
|
||||||
autoComplete="chrome-off"
|
autoComplete="chrome-off"
|
||||||
inputStyle={
|
inputStyle={INPUT_TAG_BASE_STYLES}
|
||||||
isMultiWithValue
|
|
||||||
? { ...INPUT_TAG_BASE_STYLES, width: '100%' }
|
|
||||||
: INPUT_TAG_BASE_STYLES
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
@ -90,9 +90,6 @@ const DatasourceContainer = styled.div`
|
||||||
padding-left: ${({ theme }) => theme.gridUnit * 2}px;
|
padding-left: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
}
|
}
|
||||||
.form-control.input-sm {
|
|
||||||
margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
|
|
||||||
}
|
|
||||||
.ant-collapse-item {
|
.ant-collapse-item {
|
||||||
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
||||||
.anticon.anticon-right.ant-collapse-arrow > svg {
|
.anticon.anticon-right.ant-collapse-arrow > svg {
|
||||||
|
@ -130,8 +127,8 @@ const DatasourceContainer = styled.div`
|
||||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
color: ${({ theme }) => theme.colors.grayscale.light1};
|
color: ${({ theme }) => theme.colors.grayscale.light1};
|
||||||
}
|
}
|
||||||
.form-control.input-sm {
|
.form-control.input-md {
|
||||||
width: calc(100% - ${({ theme }) => theme.gridUnit * 2}px);
|
width: calc(100% - ${({ theme }) => theme.gridUnit * 4}px);
|
||||||
margin: ${({ theme }) => theme.gridUnit * 2}px auto;
|
margin: ${({ theme }) => theme.gridUnit * 2}px auto;
|
||||||
}
|
}
|
||||||
.type-label {
|
.type-label {
|
||||||
|
@ -186,7 +183,7 @@ const DataSourcePanel = ({
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
onChange={search}
|
onChange={search}
|
||||||
className="form-control input-sm"
|
className="form-control input-md"
|
||||||
placeholder={t('Search Metrics & Columns')}
|
placeholder={t('Search Metrics & Columns')}
|
||||||
/>
|
/>
|
||||||
<div className="field-selections">
|
<div className="field-selections">
|
||||||
|
|
|
@ -81,10 +81,10 @@ const Styles = styled.div`
|
||||||
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
.explore-column {
|
.explore-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0 0 ${({ theme }) => theme.gridUnit * 80}px;
|
flex: 0 0 ${({ theme }) => theme.gridUnit * 95}px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
|
padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
|
||||||
max-width: ${({ theme }) => theme.gridUnit * 80}px;
|
max-width: ${({ theme }) => theme.gridUnit * 95}px;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
.data-source-selection {
|
.data-source-selection {
|
||||||
|
|
|
@ -87,7 +87,7 @@ export const HeaderContainer = styled.div`
|
||||||
export const LabelsContainer = styled.div`
|
export const LabelsContainer = styled.div`
|
||||||
padding: ${({ theme }) => theme.gridUnit}px;
|
padding: ${({ theme }) => theme.gridUnit}px;
|
||||||
border: solid 1px ${({ theme }) => theme.colors.grayscale.light2};
|
border: solid 1px ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
border-radius: 3px;
|
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const AddControlLabel = styled.div`
|
export const AddControlLabel = styled.div`
|
||||||
|
@ -99,7 +99,7 @@ export const AddControlLabel = styled.div`
|
||||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
color: ${({ theme }) => theme.colors.grayscale.light1};
|
color: ${({ theme }) => theme.colors.grayscale.light1};
|
||||||
border: dashed 1px ${({ theme }) => theme.colors.grayscale.light2};
|
border: dashed 1px ${({ theme }) => theme.colors.grayscale.light2};
|
||||||
border-radius: 3px;
|
border-radius: ${({ theme }) => theme.gridUnit}px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
|
|
|
@ -203,13 +203,6 @@ export default class SelectControl extends React.PureComponent {
|
||||||
return remainingOptions;
|
return remainingOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
createPlaceholder() {
|
|
||||||
const optionsRemaining = this.optionsRemaining();
|
|
||||||
const placeholder =
|
|
||||||
this.props.placeholder || t('%s option(s)', optionsRemaining);
|
|
||||||
return optionsRemaining ? placeholder : '';
|
|
||||||
}
|
|
||||||
|
|
||||||
createMetaSelectAllOption() {
|
createMetaSelectAllOption() {
|
||||||
const option = { label: 'Select All', meta: true };
|
const option = { label: 'Select All', meta: true };
|
||||||
option[this.props.valueKey] = 'Select All';
|
option[this.props.valueKey] = 'Select All';
|
||||||
|
@ -235,9 +228,19 @@ export default class SelectControl extends React.PureComponent {
|
||||||
valueKey,
|
valueKey,
|
||||||
valueRenderer,
|
valueRenderer,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const placeholder = this.createPlaceholder();
|
|
||||||
|
const optionsRemaining = this.optionsRemaining();
|
||||||
|
const optionRemaingText = optionsRemaining
|
||||||
|
? t('%s option(s)', optionsRemaining)
|
||||||
|
: '';
|
||||||
|
const placeholder = this.props.placeholder || optionRemaingText;
|
||||||
const isMulti = this.props.isMulti || this.props.multi;
|
const isMulti = this.props.isMulti || this.props.multi;
|
||||||
|
|
||||||
|
let assistiveText;
|
||||||
|
if (isMulti && optionsRemaining && Array.isArray(value) && !!value.length) {
|
||||||
|
assistiveText = optionRemaingText;
|
||||||
|
}
|
||||||
|
|
||||||
const selectProps = {
|
const selectProps = {
|
||||||
autoFocus,
|
autoFocus,
|
||||||
clearable,
|
clearable,
|
||||||
|
@ -257,6 +260,7 @@ export default class SelectControl extends React.PureComponent {
|
||||||
optionRenderer,
|
optionRenderer,
|
||||||
options: this.state.options,
|
options: this.state.options,
|
||||||
placeholder,
|
placeholder,
|
||||||
|
assistiveText,
|
||||||
promptTextCreator,
|
promptTextCreator,
|
||||||
selectRef: this.getSelectRef,
|
selectRef: this.getSelectRef,
|
||||||
value,
|
value,
|
||||||
|
|
|
@ -107,7 +107,7 @@ export default class TextControl extends React.Component<
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ControlHeader {...this.props} />
|
<ControlHeader {...this.props} />
|
||||||
<FormGroup controlId={this.state.controlId} bsSize="small">
|
<FormGroup controlId={this.state.controlId} bsSize="medium">
|
||||||
<FormControl
|
<FormControl
|
||||||
type="text"
|
type="text"
|
||||||
data-test="inline-name"
|
data-test="inline-name"
|
||||||
|
|
|
@ -148,6 +148,10 @@ table,
|
||||||
|
|
||||||
// Forms ======================================================================
|
// Forms ======================================================================
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
.has-warning {
|
.has-warning {
|
||||||
.help-block,
|
.help-block,
|
||||||
.control-label,
|
.control-label,
|
||||||
|
@ -395,6 +399,11 @@ label {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-group-item {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
a.list-group-item {
|
a.list-group-item {
|
||||||
&-success {
|
&-success {
|
||||||
&.active {
|
&.active {
|
||||||
|
|
|
@ -91,7 +91,7 @@
|
||||||
//
|
//
|
||||||
// ## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
// ## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||||
|
|
||||||
@padding-base-vertical: 10px;
|
@padding-base-vertical: 6.5px;
|
||||||
@padding-base-horizontal: 18px;
|
@padding-base-horizontal: 18px;
|
||||||
|
|
||||||
@padding-large-vertical: 18px;
|
@padding-large-vertical: 18px;
|
||||||
|
@ -152,7 +152,7 @@
|
||||||
|
|
||||||
@btn-default-color: @bs-gray;
|
@btn-default-color: @bs-gray;
|
||||||
@btn-default-bg: @lightest;
|
@btn-default-bg: @lightest;
|
||||||
@btn-default-border: @bs-gray-light;
|
@btn-default-border: @gray-light;
|
||||||
|
|
||||||
@btn-success-color: @btn-primary-color;
|
@btn-success-color: @btn-primary-color;
|
||||||
@btn-success-bg: @brand-success;
|
@btn-success-bg: @brand-success;
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
@almost-black: #263238;
|
@almost-black: #263238;
|
||||||
@gray-dark: #484848;
|
@gray-dark: #484848;
|
||||||
@gray-light: #cfd8dc;
|
@gray-light: #e0e0e0;
|
||||||
@gray: #879399;
|
@gray: #879399;
|
||||||
@gray-bg: #f7f7f7;
|
@gray-bg: #f7f7f7;
|
||||||
@gray-heading: #a3a3a3;
|
@gray-heading: #a3a3a3;
|
||||||
|
|
Loading…
Reference in New Issue