mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
fix: Enlarged select filter value (#15373)
* fix: Enlarged select filter value * fix: Makes the label take the whole width * fix: Moves the required icon before the cascade icon * fix: Fixes the cascading icon overlap with big texts
This commit is contained in:
parent
accee507c0
commit
819118be13
@ -18,11 +18,24 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { styled } from '@superset-ui/core';
|
import { styled } from '@superset-ui/core';
|
||||||
|
import { Form, FormItem } from 'src/components/Form';
|
||||||
import FilterValue from './FilterValue';
|
import FilterValue from './FilterValue';
|
||||||
import { FilterProps } from './types';
|
import { FilterProps } from './types';
|
||||||
|
import { checkIsMissingRequiredValue } from '../utils';
|
||||||
|
|
||||||
|
const StyledFormItem = styled(FormItem)`
|
||||||
|
& label {
|
||||||
|
width: 100%;
|
||||||
|
padding-right: ${({ theme }) => theme.gridUnit * 11}px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StyledIcon = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
const StyledFilterControlTitle = styled.h4`
|
const StyledFilterControlTitle = styled.h4`
|
||||||
width: 100%;
|
|
||||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
||||||
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
color: ${({ theme }) => theme.colors.grayscale.dark1};
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -37,7 +50,7 @@ const StyledFilterControlTitleBox = styled.div`
|
|||||||
margin-bottom: ${({ theme }) => theme.gridUnit}px;
|
margin-bottom: ${({ theme }) => theme.gridUnit}px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledFilterControlContainer = styled.div`
|
const StyledFilterControlContainer = styled(Form)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -50,21 +63,34 @@ const FilterControl: React.FC<FilterProps> = ({
|
|||||||
inView,
|
inView,
|
||||||
}) => {
|
}) => {
|
||||||
const { name = '<undefined>' } = filter;
|
const { name = '<undefined>' } = filter;
|
||||||
|
|
||||||
|
const isMissingRequiredValue = checkIsMissingRequiredValue(
|
||||||
|
filter,
|
||||||
|
filter.dataMask?.filterState,
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledFilterControlContainer>
|
<StyledFilterControlContainer layout="vertical">
|
||||||
<StyledFilterControlTitleBox>
|
<StyledFormItem
|
||||||
<StyledFilterControlTitle data-test="filter-control-name">
|
label={
|
||||||
{name}
|
<StyledFilterControlTitleBox>
|
||||||
</StyledFilterControlTitle>
|
<StyledFilterControlTitle data-test="filter-control-name">
|
||||||
<div data-test="filter-icon">{icon}</div>
|
{name}
|
||||||
</StyledFilterControlTitleBox>
|
</StyledFilterControlTitle>
|
||||||
<FilterValue
|
<StyledIcon data-test="filter-icon">{icon}</StyledIcon>
|
||||||
dataMaskSelected={dataMaskSelected}
|
</StyledFilterControlTitleBox>
|
||||||
filter={filter}
|
}
|
||||||
directPathToChild={directPathToChild}
|
required={filter?.controlValues?.enableEmptyFilter}
|
||||||
onFilterSelectionChange={onFilterSelectionChange}
|
validateStatus={isMissingRequiredValue ? 'error' : undefined}
|
||||||
inView={inView}
|
>
|
||||||
/>
|
<FilterValue
|
||||||
|
dataMaskSelected={dataMaskSelected}
|
||||||
|
filter={filter}
|
||||||
|
directPathToChild={directPathToChild}
|
||||||
|
onFilterSelectionChange={onFilterSelectionChange}
|
||||||
|
inView={inView}
|
||||||
|
/>
|
||||||
|
</StyledFormItem>
|
||||||
</StyledFilterControlContainer>
|
</StyledFilterControlContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -19,10 +19,10 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
QueryFormData,
|
QueryFormData,
|
||||||
styled,
|
|
||||||
SuperChart,
|
SuperChart,
|
||||||
DataMask,
|
DataMask,
|
||||||
t,
|
t,
|
||||||
|
styled,
|
||||||
Behavior,
|
Behavior,
|
||||||
ChartDataResponseResult,
|
ChartDataResponseResult,
|
||||||
JsonObject,
|
JsonObject,
|
||||||
@ -43,13 +43,14 @@ import { ClientErrorObject } from 'src/utils/getClientErrorObject';
|
|||||||
import { FilterProps } from './types';
|
import { FilterProps } from './types';
|
||||||
import { getFormData } from '../../utils';
|
import { getFormData } from '../../utils';
|
||||||
import { useCascadingFilters } from './state';
|
import { useCascadingFilters } from './state';
|
||||||
import { checkIsMissingRequiredValue } from '../utils';
|
|
||||||
|
|
||||||
const FilterItem = styled.div`
|
const HEIGHT = 32;
|
||||||
min-height: ${({ theme }) => theme.gridUnit * 11}px;
|
|
||||||
padding-bottom: ${({ theme }) => theme.gridUnit * 3}px;
|
// Overrides superset-ui height with min-height
|
||||||
& > div > div {
|
const StyledDiv = styled.div`
|
||||||
height: auto;
|
& > div {
|
||||||
|
height: auto !important;
|
||||||
|
min-height: ${HEIGHT}px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -195,35 +196,27 @@ const FilterValue: React.FC<FilterProps> = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const isMissingRequiredValue = checkIsMissingRequiredValue(
|
|
||||||
filter,
|
|
||||||
filter.dataMask?.filterState,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FilterItem data-test="form-item-value">
|
<StyledDiv data-test="form-item-value">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Loading position="inline-centered" />
|
<Loading position="inline-centered" />
|
||||||
) : (
|
) : (
|
||||||
<SuperChart
|
<SuperChart
|
||||||
height={50}
|
height={HEIGHT}
|
||||||
width="100%"
|
width="100%"
|
||||||
formData={formData}
|
formData={formData}
|
||||||
// For charts that don't have datasource we need workaround for empty placeholder
|
// For charts that don't have datasource we need workaround for empty placeholder
|
||||||
queriesData={hasDataSource ? state : [{ data: [{}] }]}
|
queriesData={hasDataSource ? state : [{ data: [{}] }]}
|
||||||
chartType={filterType}
|
chartType={filterType}
|
||||||
behaviors={[Behavior.NATIVE_FILTER]}
|
behaviors={[Behavior.NATIVE_FILTER]}
|
||||||
filterState={{
|
filterState={{ ...filter.dataMask?.filterState }}
|
||||||
...filter.dataMask?.filterState,
|
|
||||||
validateMessage: isMissingRequiredValue && t('Value is required'),
|
|
||||||
}}
|
|
||||||
ownState={filter.dataMask?.ownState}
|
ownState={filter.dataMask?.ownState}
|
||||||
enableNoResults={metadata?.enableNoResults}
|
enableNoResults={metadata?.enableNoResults}
|
||||||
isRefreshing={isRefreshing}
|
isRefreshing={isRefreshing}
|
||||||
hooks={{ setDataMask, setFocusedFilter, unsetFocusedFilter }}
|
hooks={{ setDataMask, setFocusedFilter, unsetFocusedFilter }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</FilterItem>
|
</StyledDiv>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -22,7 +22,6 @@ import {
|
|||||||
SetDataMaskHook,
|
SetDataMaskHook,
|
||||||
SuperChart,
|
SuperChart,
|
||||||
AppSection,
|
AppSection,
|
||||||
t,
|
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import { FormInstance } from 'antd/lib/form';
|
import { FormInstance } from 'antd/lib/form';
|
||||||
import Loading from 'src/components/Loading';
|
import Loading from 'src/components/Loading';
|
||||||
@ -57,10 +56,6 @@ const DefaultValue: FC<DefaultValueProps> = ({
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
}
|
}
|
||||||
}, [hasDataset, queriesData]);
|
}, [hasDataset, queriesData]);
|
||||||
const value = formFilter.defaultDataMask?.filterState.value;
|
|
||||||
const isMissingRequiredValue =
|
|
||||||
(value === null || value === undefined) &&
|
|
||||||
formFilter?.controlValues?.enableEmptyFilter;
|
|
||||||
return loading ? (
|
return loading ? (
|
||||||
<Loading position="inline-centered" />
|
<Loading position="inline-centered" />
|
||||||
) : (
|
) : (
|
||||||
@ -79,7 +74,6 @@ const DefaultValue: FC<DefaultValueProps> = ({
|
|||||||
enableNoResults={enableNoResults}
|
enableNoResults={enableNoResults}
|
||||||
filterState={{
|
filterState={{
|
||||||
...formFilter.defaultDataMask?.filterState,
|
...formFilter.defaultDataMask?.filterState,
|
||||||
validateMessage: isMissingRequiredValue && t('Value is required'),
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -137,14 +137,24 @@ export const StyledRowFormItem = styled(FormItem)`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
export const StyledRowSubFormItem = styled(FormItem)`
|
export const StyledRowSubFormItem = styled(FormItem)`
|
||||||
|
min-width: 50%;
|
||||||
|
|
||||||
& .ant-form-item-label {
|
& .ant-form-item-label {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-form-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-form-item-control-input-content > div > div {
|
.ant-form-item-control-input-content > div > div {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-form-item-extra {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
& .ant-form-item-control-input {
|
& .ant-form-item-control-input {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
@ -801,7 +811,9 @@ const FiltersConfigForm = (
|
|||||||
if (hasValue) {
|
if (hasValue) {
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
return Promise.reject();
|
return Promise.reject(
|
||||||
|
new Error(t('Default value is required')),
|
||||||
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@ -1010,7 +1022,7 @@ const FiltersConfigForm = (
|
|||||||
onChange={checked => onSortChanged(checked || undefined)}
|
onChange={checked => onSortChanged(checked || undefined)}
|
||||||
initialValue={hasSorting}
|
initialValue={hasSorting}
|
||||||
>
|
>
|
||||||
<StyledFormItem
|
<StyledRowFormItem
|
||||||
name={[
|
name={[
|
||||||
'filters',
|
'filters',
|
||||||
filterId,
|
filterId,
|
||||||
@ -1038,7 +1050,7 @@ const FiltersConfigForm = (
|
|||||||
onSortChanged(value)
|
onSortChanged(value)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</StyledFormItem>
|
</StyledRowFormItem>
|
||||||
{hasMetrics && (
|
{hasMetrics && (
|
||||||
<StyledRowSubFormItem
|
<StyledRowSubFormItem
|
||||||
name={['filters', filterId, 'sortMetric']}
|
name={['filters', filterId, 'sortMetric']}
|
||||||
|
@ -54,8 +54,7 @@ export const useDefaultValue = (
|
|||||||
filterToEdit?: Filter,
|
filterToEdit?: Filter,
|
||||||
) => {
|
) => {
|
||||||
const [hasDefaultValue, setHasPartialDefaultValue] = useState(
|
const [hasDefaultValue, setHasPartialDefaultValue] = useState(
|
||||||
!!filterToEdit?.defaultDataMask?.filterState?.value ||
|
!!filterToEdit?.defaultDataMask?.filterState?.value,
|
||||||
formFilter?.controlValues?.enableEmptyFilter,
|
|
||||||
);
|
);
|
||||||
const [isRequired, setisRequired] = useState(
|
const [isRequired, setisRequired] = useState(
|
||||||
formFilter?.controlValues?.enableEmptyFilter,
|
formFilter?.controlValues?.enableEmptyFilter,
|
||||||
|
@ -26,11 +26,9 @@ import {
|
|||||||
GenericDataType,
|
GenericDataType,
|
||||||
JsonObject,
|
JsonObject,
|
||||||
smartDateDetailedFormatter,
|
smartDateDetailedFormatter,
|
||||||
styled,
|
|
||||||
t,
|
t,
|
||||||
tn,
|
tn,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import { FormItem } from 'src/components/Form';
|
|
||||||
import React, {
|
import React, {
|
||||||
RefObject,
|
RefObject,
|
||||||
ReactElement,
|
ReactElement,
|
||||||
@ -82,10 +80,6 @@ function reducer(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const Error = styled.div`
|
|
||||||
color: ${({ theme }) => theme.colors.error.base};
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
||||||
const {
|
const {
|
||||||
coltypeMap,
|
coltypeMap,
|
||||||
@ -279,57 +273,52 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Styles height={height} width={width}>
|
<Styles height={height} width={width}>
|
||||||
<FormItem
|
<StyledSelect
|
||||||
validateStatus={filterState.validateMessage && 'error'}
|
allowClear
|
||||||
extra={<Error>{filterState.validateMessage}</Error>}
|
// @ts-ignore
|
||||||
|
value={filterState.value || []}
|
||||||
|
disabled={isDisabled}
|
||||||
|
showSearch={showSearch}
|
||||||
|
mode={multiSelect ? 'multiple' : undefined}
|
||||||
|
placeholder={placeholderText}
|
||||||
|
onSearch={searchWrapper}
|
||||||
|
onSelect={clearSuggestionSearch}
|
||||||
|
onBlur={handleBlur}
|
||||||
|
onDropdownVisibleChange={setIsDropdownVisible}
|
||||||
|
dropdownRender={(
|
||||||
|
originNode: ReactElement & { ref?: RefObject<HTMLElement> },
|
||||||
|
) => {
|
||||||
|
if (isDropdownVisible && !wasDropdownVisible) {
|
||||||
|
originNode.ref?.current?.scrollTo({ top: 0 });
|
||||||
|
}
|
||||||
|
return originNode;
|
||||||
|
}}
|
||||||
|
onFocus={setFocusedFilter}
|
||||||
|
// @ts-ignore
|
||||||
|
onChange={handleChange}
|
||||||
|
ref={inputRef}
|
||||||
|
loading={isRefreshing}
|
||||||
|
maxTagCount={5}
|
||||||
|
menuItemSelectedIcon={<Icon iconSize="m" />}
|
||||||
>
|
>
|
||||||
<StyledSelect
|
{sortedData.map(row => {
|
||||||
allowClear
|
const [value] = groupby.map(col => row[col]);
|
||||||
// @ts-ignore
|
return (
|
||||||
value={filterState.value || []}
|
// @ts-ignore
|
||||||
disabled={isDisabled}
|
<Option key={`${value}`} value={value}>
|
||||||
showSearch={showSearch}
|
{labelFormatter(value, datatype)}
|
||||||
mode={multiSelect ? 'multiple' : undefined}
|
</Option>
|
||||||
placeholder={placeholderText}
|
);
|
||||||
onSearch={searchWrapper}
|
})}
|
||||||
onSelect={clearSuggestionSearch}
|
{currentSuggestionSearch &&
|
||||||
onBlur={handleBlur}
|
!ensureIsArray(filterState.value).some(
|
||||||
onDropdownVisibleChange={setIsDropdownVisible}
|
suggestion => suggestion === currentSuggestionSearch,
|
||||||
dropdownRender={(
|
) && (
|
||||||
originNode: ReactElement & { ref?: RefObject<HTMLElement> },
|
<Option value={currentSuggestionSearch}>
|
||||||
) => {
|
{`${t('Create "%s"', currentSuggestionSearch)}`}
|
||||||
if (isDropdownVisible && !wasDropdownVisible) {
|
</Option>
|
||||||
originNode.ref?.current?.scrollTo({ top: 0 });
|
)}
|
||||||
}
|
</StyledSelect>
|
||||||
return originNode;
|
|
||||||
}}
|
|
||||||
onFocus={setFocusedFilter}
|
|
||||||
// @ts-ignore
|
|
||||||
onChange={handleChange}
|
|
||||||
ref={inputRef}
|
|
||||||
loading={isRefreshing}
|
|
||||||
maxTagCount={5}
|
|
||||||
menuItemSelectedIcon={<Icon iconSize="m" />}
|
|
||||||
>
|
|
||||||
{sortedData.map(row => {
|
|
||||||
const [value] = groupby.map(col => row[col]);
|
|
||||||
return (
|
|
||||||
// @ts-ignore
|
|
||||||
<Option key={`${value}`} value={value}>
|
|
||||||
{labelFormatter(value, datatype)}
|
|
||||||
</Option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{currentSuggestionSearch &&
|
|
||||||
!ensureIsArray(filterState.value).some(
|
|
||||||
suggestion => suggestion === currentSuggestionSearch,
|
|
||||||
) && (
|
|
||||||
<Option value={currentSuggestionSearch}>
|
|
||||||
{`${t('Create "%s"', currentSuggestionSearch)}`}
|
|
||||||
</Option>
|
|
||||||
)}
|
|
||||||
</StyledSelect>
|
|
||||||
</FormItem>
|
|
||||||
</Styles>
|
</Styles>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,7 @@ import { Select } from 'src/common/components';
|
|||||||
import { PluginFilterStylesProps } from './types';
|
import { PluginFilterStylesProps } from './types';
|
||||||
|
|
||||||
export const Styles = styled.div<PluginFilterStylesProps>`
|
export const Styles = styled.div<PluginFilterStylesProps>`
|
||||||
height: ${({ height }) => height}px;
|
min-height: ${({ height }) => height}px;
|
||||||
width: ${({ width }) => width}px;
|
width: ${({ width }) => width}px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user