pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: Improves the native filters UI/UX - iteration 5 (#14882)

This commit is contained in:
Michael S. Molina 2021-05-28 04:29:16 -03:00 committed by GitHub
parent fce8ac27f0
commit 8519a09086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 444 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset-frontend/src/components/Form/FormItem.tsx
View File

@ -35,7 +35,7 @@ const StyledItem = styled(Form.Item)`
&::after {
display: inline-block;
color: ${theme.colors.error.base};
font-size: ${theme.typography.sizes.m}px;
font-size: ${theme.typography.sizes.s}px;
content: '*';
}
}

4
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
View File

@ -76,8 +76,8 @@ const addFilterFlow = async () => {
userEvent.click(screen.getByTestId(getTestId('collapsable')));
userEvent.click(screen.getByTestId(getTestId('create-filter')));
// select filter
userEvent.click(screen.getByText('Select filter'));
userEvent.click(screen.getByText('Time filter'));
userEvent.click(screen.getByText('Value'));
userEvent.click(screen.getByText('Time range'));
userEvent.type(screen.getByTestId(getModalTestId('name-input')), FILTER_NAME);
userEvent.click(screen.getByText('Save'));
await screen.findByText('All Filters (1)');

63
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
View File

@ -42,11 +42,9 @@ export const StyledFilterTitle = styled.span`
export const StyledAddFilterBox = styled.div`
color: ${({ theme }) => theme.colors.primary.dark1};
text-align: left;
padding: ${({ theme }) => theme.gridUnit * 2}px 0;
margin: ${({ theme }) => theme.gridUnit * 3}px 0 0
${({ theme }) => -theme.gridUnit * 2}px;
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light1};
padding: ${({ theme }) => theme.gridUnit * 2}px;
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
cursor: pointer;
&:hover {
color: ${({ theme }) => theme.colors.primary.base};
@ -89,12 +87,19 @@ const FilterTabsContainer = styled(LineEditableTabs)`
& > .ant-tabs-content-holder {
border-left: 1px solid ${theme.colors.grayscale.light2};
margin-right: ${theme.gridUnit * 4}px;
padding-right: ${theme.gridUnit * 4}px;
overflow-x: hidden;
overflow-y: auto;
}
& > .ant-tabs-content-holder ~ .ant-tabs-content-holder {
border: none;
}
&.ant-tabs-card > .ant-tabs-nav .ant-tabs-ink-bar {
visibility: hidden;
}
&.ant-tabs-left
> .ant-tabs-content-holder
> .ant-tabs-content
@ -104,9 +109,11 @@ const FilterTabsContainer = styled(LineEditableTabs)`
}
.ant-tabs-nav-list {
padding-top: ${theme.gridUnit * 4}px;
padding-right: ${theme.gridUnit * 2}px;
padding-bottom: ${theme.gridUnit * 4}px;
overflow-x: hidden;
overflow-y: auto;
padding-top: ${theme.gridUnit * 2}px;
padding-right: ${theme.gridUnit}px;
padding-bottom: ${theme.gridUnit * 3}px;
padding-left: ${theme.gridUnit * 3}px;
}
@ -135,6 +142,24 @@ const FilterTabsContainer = styled(LineEditableTabs)`
justify-content: space-between;
text-transform: unset;
}
.ant-tabs-nav-more {
display: none;
}
.ant-tabs-extra-content {
width: 100%;
}
`}
`;
const StyledHeader = styled.div`
${({ theme }) => `
color: ${theme.colors.grayscale.dark1};
font-size: ${theme.typography.sizes.l}px;
padding-top: ${theme.gridUnit * 4}px;
padding-right: ${theme.gridUnit * 4}px;
padding-left: ${theme.gridUnit * 4}px;
`}
`;
@ -164,14 +189,18 @@ const FilterTabs: FC<FilterTabsProps> = ({
onChange={onChange}
activeKey={currentFilterId}
onEdit={onEdit}
addIcon={
<StyledAddFilterBox>
<PlusOutlined />{' '}
<span data-test="add-filter-button" aria-label="Add filter">
{t('Add filter')}
</span>
</StyledAddFilterBox>
}
hideAdd
tabBarExtraContent={{
left: <StyledHeader>{t('Filters')}</StyledHeader>,
right: (
<StyledAddFilterBox onClick={() => onEdit('', 'add')}>
<PlusOutlined />{' '}
<span data-test="add-filter-button" aria-label="Add filter">
{t('Add filter')}
</span>
</StyledAddFilterBox>
),
}}
>
{filterIds.map(id => (
<LineEditableTabs.TabPane

750
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
View File

@ -41,7 +41,8 @@ import React, {
useImperativeHandle,
} from 'react';
import { useSelector } from 'react-redux';
import { Checkbox, Form, Input } from 'src/common/components';
import { FormItem } from 'src/components/Form';
import { Checkbox, Input } from 'src/common/components';
import { Select } from 'src/components/Select';
import SupersetResourceSelect, {
cachedSupersetGet,
@ -91,22 +92,32 @@ const StyledRowContainer = styled.div`
width: 100%;
`;
export const StyledFormItem = styled(Form.Item)`
export const StyledFormItem = styled(FormItem)`
width: 49%;
margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
& .ant-form-item-label {
padding-bottom: 0px;
}
& .ant-form-item-control-input {
min-height: ${({ theme }) => theme.gridUnit * 10}px;
}
`;
export const StyledRowFormItem = styled(Form.Item)`
export const StyledRowFormItem = styled(FormItem)`
margin-bottom: 0px;
padding-bottom: 0px;
min-width: 50%;
& .ant-form-item-label {
padding-bottom: 0px;
}
.ant-form-item-control-input-content > div > div {
height: auto;
}
& .ant-form-item-control-input {
min-height: ${({ theme }) => theme.gridUnit * 10}px;
}
@ -118,7 +129,7 @@ export const StyledLabel = styled.span`
text-transform: uppercase;
`;
const CleanFormItem = styled(Form.Item)`
const CleanFormItem = styled(FormItem)`
margin-bottom: 0;
`;
@ -151,6 +162,13 @@ const StyledCollapse = styled(Collapse)`
`;
const StyledTabs = styled(Tabs)`
.ant-tabs-nav {
position: sticky;
top: 0px;
background: white;
z-index: 1;
}
.ant-tabs-nav-list {
padding: 0px;
}
@ -164,6 +182,9 @@ const StyledAsterisk = styled.span`
color: ${({ theme }) => theme.colors.error.base};
font-family: SimSun, sans-serif;
margin-right: ${({ theme }) => theme.gridUnit - 1}px;
&:before {
content: '*';
}
`;
const FilterTabs = {
@ -208,6 +229,15 @@ const FILTERS_WITH_ADHOC_FILTERS = ['filter_select', 'filter_range'];
const BASIC_CONTROL_ITEMS = ['enableEmptyFilter', 'multiSelect'];
const FILTER_TYPE_NAME_MAPPING = {
[t('Select filter')]: t('Value'),
[t('Range filter')]: t('Numerical range'),
[t('Time filter')]: t('Time range'),
[t('Time column')]: t('Time column'),
[t('Time grain')]: t('Time grain'),
[t('Group By')]: t('Group by'),
};
/**
* The configuration form for a specific filter.
* Assigns field values to `filters[filterId]` in the form.
@ -418,396 +448,402 @@ const FiltersConfigForm = (
};
return (
<>
<StyledTabs
defaultActiveKey={FilterTabs.configuration.key}
activeKey={activeTabKey}
onChange={activeKey => setActiveTabKey(activeKey)}
centered
<StyledTabs
defaultActiveKey={FilterTabs.configuration.key}
activeKey={activeTabKey}
onChange={activeKey => setActiveTabKey(activeKey)}
centered
>
<TabPane
tab={FilterTabs.configuration.name}
key={FilterTabs.configuration.key}
forceRender
>
<TabPane
tab={FilterTabs.configuration.name}
key={FilterTabs.configuration.key}
forceRender
>
<StyledContainer>
<StyledFormItem
name={['filters', filterId, 'name']}
label={<StyledLabel>{t('Filter name')}</StyledLabel>}
initialValue={filterToEdit?.name}
rules={[{ required: !removed, message: t('Name is required') }]}
>
<Input {...getFiltersConfigModalTestId('name-input')} />
</StyledFormItem>
<StyledFormItem
name={['filters', filterId, 'filterType']}
rules={[{ required: !removed, message: t('Name is required') }]}
initialValue={filterToEdit?.filterType || 'filter_select'}
label={<StyledLabel>{t('Filter Type')}</StyledLabel>}
{...getFiltersConfigModalTestId('filter-type')}
>
<Select
options={nativeFilterVizTypes.map(filterType => ({
<StyledContainer>
<StyledFormItem
name={['filters', filterId, 'name']}
label={<StyledLabel>{t('Filter name')}</StyledLabel>}
initialValue={filterToEdit?.name}
rules={[{ required: !removed, message: t('Name is required') }]}
>
<Input {...getFiltersConfigModalTestId('name-input')} />
</StyledFormItem>
<StyledFormItem
name={['filters', filterId, 'filterType']}
rules={[{ required: !removed, message: t('Name is required') }]}
initialValue={filterToEdit?.filterType || 'filter_select'}
label={<StyledLabel>{t('Filter Type')}</StyledLabel>}
{...getFiltersConfigModalTestId('filter-type')}
>
<Select
options={nativeFilterVizTypes.map(filterType => {
// @ts-ignore
const name = nativeFilterItems[filterType]?.value.name;
const mappedName = name
? FILTER_TYPE_NAME_MAPPING[name]
: undefined;
return {
value: filterType,
// @ts-ignore
label: nativeFilterItems[filterType]?.value.name,
}))}
onChange={({ value }: { value: string }) => {
setNativeFilterFieldValues(form, filterId, {
filterType: value,
defaultDataMask: null,
});
label: mappedName || name,
};
})}
onChange={({ value }: { value: string }) => {
setNativeFilterFieldValues(form, filterId, {
filterType: value,
defaultDataMask: null,
});
forceUpdate();
}}
/>
</StyledFormItem>
</StyledContainer>
{hasDataset && (
<StyledRowContainer>
<StyledFormItem
name={['filters', filterId, 'dataset']}
initialValue={{ value: initialDatasetId }}
label={<StyledLabel>{t('Dataset')}</StyledLabel>}
rules={[
{ required: !removed, message: t('Dataset is required') },
]}
{...getFiltersConfigModalTestId('datasource-input')}
>
<SupersetResourceSelect
initialId={initialDatasetId}
resource="dataset"
searchColumn="table_name"
transformItem={datasetToSelectOption}
isMulti={false}
onError={onDatasetSelectError}
defaultOptions={Object.values(loadedDatasets).map(
datasetToSelectOption,
)}
onChange={e => {
// We need reset column when dataset changed
if (datasetId && e?.value !== datasetId) {
setNativeFilterFieldValues(form, filterId, {
defaultDataMask: null,
column: null,
});
}
forceUpdate();
}}
/>
</StyledFormItem>
</StyledContainer>
{hasDataset && (
<StyledRowContainer>
{hasColumn && (
<StyledFormItem
name={['filters', filterId, 'dataset']}
initialValue={{ value: initialDatasetId }}
label={<StyledLabel>{t('Dataset')}</StyledLabel>}
// don't show the column select unless we have a dataset
// style={{ display: datasetId == null ? undefined : 'none' }}
name={['filters', filterId, 'column']}
initialValue={initColumn}
label={<StyledLabel>{t('Column')}</StyledLabel>}
rules={[
{ required: !removed, message: t('Dataset is required') },
{ required: !removed, message: t('Field is required') },
]}
{...getFiltersConfigModalTestId('datasource-input')}
data-test="field-input"
>
<SupersetResourceSelect
initialId={initialDatasetId}
resource="dataset"
searchColumn="table_name"
transformItem={datasetToSelectOption}
isMulti={false}
onError={onDatasetSelectError}
defaultOptions={Object.values(loadedDatasets).map(
datasetToSelectOption,
)}
onChange={e => {
// We need reset column when dataset changed
if (datasetId && e?.value !== datasetId) {
setNativeFilterFieldValues(form, filterId, {
defaultDataMask: null,
column: null,
});
}
<ColumnSelect
form={form}
filterId={filterId}
datasetId={datasetId}
onChange={() => {
// We need reset default value when when column changed
setNativeFilterFieldValues(form, filterId, {
defaultDataMask: null,
});
forceUpdate();
}}
/>
</StyledFormItem>
{hasColumn && (
<StyledFormItem
// don't show the column select unless we have a dataset
// style={{ display: datasetId == null ? undefined : 'none' }}
name={['filters', filterId, 'column']}
initialValue={initColumn}
label={<StyledLabel>{t('Column')}</StyledLabel>}
rules={[
{ required: !removed, message: t('Field is required') },
]}
data-test="field-input"
>
<ColumnSelect
form={form}
filterId={filterId}
datasetId={datasetId}
onChange={() => {
// We need reset default value when when column changed
)}
</StyledRowContainer>
)}
<StyledCollapse
defaultActiveKey={FilterPanels.basic.key}
expandIconPosition="right"
>
<Collapse.Panel
header={FilterPanels.basic.name}
key={FilterPanels.basic.key}
>
{hasFilledDataset && (
<CleanFormItem
name={['filters', filterId, 'defaultValueFormData']}
hidden
initialValue={newFormData}
/>
)}
<CleanFormItem
name={['filters', filterId, 'defaultValueQueriesData']}
hidden
initialValue={null}
/>
<CollapsibleControl
title={t('Filter has default value')}
checked={hasDefaultValue}
onChange={value => setHasDefaultValue(value)}
>
<StyledRowFormItem
name={['filters', filterId, 'defaultDataMask']}
initialValue={filterToEdit?.defaultDataMask}
data-test="default-input"
label={<StyledLabel>{t('Default Value')}</StyledLabel>}
required
rules={[
{
required: true,
},
{
validator: (rule, value) => {
const hasValue = !!value.filterState?.value;
if (hasValue) {
return Promise.resolve();
}
return Promise.reject(
new Error(t('Default value is required')),
);
},
},
]}
>
{showDefaultValue ? (
<DefaultValue
setDataMask={dataMask => {
setNativeFilterFieldValues(form, filterId, {
defaultDataMask: null,
defaultDataMask: dataMask,
});
form.validateFields([
['filters', filterId, 'defaultDataMask'],
]);
forceUpdate();
}}
filterId={filterId}
hasDataset={hasDataset}
form={form}
formData={newFormData}
enableNoResults={enableNoResults}
/>
</StyledFormItem>
)}
</StyledRowContainer>
)}
<StyledCollapse defaultActiveKey={FilterPanels.basic.key}>
<Collapse.Panel
header={FilterPanels.basic.name}
key={FilterPanels.basic.key}
) : (
t('Fill all required fields to enable "Default Value"')
)}
</StyledRowFormItem>
</CollapsibleControl>
{Object.keys(controlItems)
.filter(key => BASIC_CONTROL_ITEMS.includes(key))
.map(key => controlItems[key])}
<StyledRowFormItem
name={['filters', filterId, 'isInstant']}
initialValue={filterToEdit?.isInstant || false}
valuePropName="checked"
colon={false}
>
{hasFilledDataset && (
<CleanFormItem
name={['filters', filterId, 'defaultValueFormData']}
hidden
initialValue={newFormData}
/>
)}
<CleanFormItem
name={['filters', filterId, 'defaultValueQueriesData']}
hidden
initialValue={null}
/>
<CollapsibleControl
title={t('Filter has default value')}
checked={hasDefaultValue}
onChange={value => setHasDefaultValue(value)}
>
<StyledRowFormItem
name={['filters', filterId, 'defaultDataMask']}
initialValue={filterToEdit?.defaultDataMask}
data-test="default-input"
label={<StyledLabel>{t('Default Value')}</StyledLabel>}
required
rules={[
{
required: true,
},
{
validator: (rule, value) => {
const hasValue = !!value.filterState?.value;
if (hasValue) {
return Promise.resolve();
}
return Promise.reject(
new Error(t('Default value is required')),
);
},
},
]}
<Checkbox data-test="apply-changes-instantly-checkbox">
{t('Apply changes instantly')}
</Checkbox>
</StyledRowFormItem>
</Collapse.Panel>
{((hasDataset && hasAdditionalFilters) || hasMetrics) && (
<Collapse.Panel
header={FilterPanels.advanced.name}
key={FilterPanels.advanced.key}
>
{isCascadingFilter && (
<CollapsibleControl
title={t('Filter is hierarchical')}
checked={!!parentFilter}
onChange={checked => {
if (checked) {
// execute after render
setTimeout(
() =>
form.validateFields([
['filters', filterId, 'parentFilter'],
]),
0,
);
}
}}
>
{showDefaultValue ? (
<DefaultValue
setDataMask={dataMask => {
<StyledRowFormItem
name={['filters', filterId, 'parentFilter']}
label={<StyledLabel>{t('Parent filter')}</StyledLabel>}
initialValue={parentFilter}
data-test="parent-filter-input"
required
rules={[
{
required: true,
message: t('Parent filter is required'),
},
]}
>
<Select
placeholder={t('None')}
options={parentFilterOptions}
isClearable
/>
</StyledRowFormItem>
</CollapsibleControl>
)}
{Object.keys(controlItems)
.filter(key => !BASIC_CONTROL_ITEMS.includes(key))
.map(key => controlItems[key])}
{hasDataset && hasAdditionalFilters && (
<CollapsibleControl
title={t('Pre-filter available values')}
checked={
!!filterToEdit?.adhoc_filters || !!filterToEdit?.time_range
}
onChange={checked => {
if (checked) {
// execute after render
setTimeout(
() =>
form.validateFields([
['filters', filterId, 'adhoc_filters'],
]),
0,
);
}
}}
>
<StyledRowFormItem
name={['filters', filterId, 'adhoc_filters']}
initialValue={filterToEdit?.adhoc_filters}
required
rules={[
{
required: true,
message: t('Pre-filter is required'),
},
]}
>
<AdhocFilterControl
columns={
datasetDetails?.columns?.filter(
(c: ColumnMeta) => c.filterable,
) || []
}
savedMetrics={datasetDetails?.metrics || []}
datasource={datasetDetails}
onChange={(filters: AdhocFilter[]) => {
setNativeFilterFieldValues(form, filterId, {
defaultDataMask: dataMask,
adhoc_filters: filters,
});
form.validateFields([
['filters', filterId, 'defaultDataMask'],
]);
forceUpdate();
}}
filterId={filterId}
hasDataset={hasDataset}
form={form}
formData={newFormData}
enableNoResults={enableNoResults}
label={
<span>
<StyledAsterisk />
<StyledLabel>{t('Pre-filter')}</StyledLabel>
</span>
}
/>
) : (
t('Fill all required fields to enable "Default Value"')
)}
</StyledRowFormItem>
</CollapsibleControl>
{Object.keys(controlItems)
.filter(key => BASIC_CONTROL_ITEMS.includes(key))
.map(key => controlItems[key])}
<StyledRowFormItem
name={['filters', filterId, 'isInstant']}
initialValue={filterToEdit?.isInstant || false}
valuePropName="checked"
colon={false}
>
<Checkbox data-test="apply-changes-instantly-checkbox">
{t('Apply changes instantly')}
</Checkbox>
</StyledRowFormItem>
</Collapse.Panel>
{((hasDataset && hasAdditionalFilters) || hasMetrics) && (
<Collapse.Panel
header={FilterPanels.advanced.name}
key={FilterPanels.advanced.key}
>
{isCascadingFilter && (
<CollapsibleControl
title={t('Filter is hierarchical')}
checked={!!parentFilter}
onChange={checked => {
if (checked) {
// execute after render
setTimeout(
() =>
form.validateFields([
['filters', filterId, 'parentFilter'],
]),
0,
);
}
}}
</StyledRowFormItem>
<StyledRowFormItem
name={['filters', filterId, 'time_range']}
label={<StyledLabel>{t('Time range')}</StyledLabel>}
initialValue={filterToEdit?.time_range || 'No filter'}
>
<StyledRowFormItem
name={['filters', filterId, 'parentFilter']}
label={<StyledLabel>{t('Parent filter')}</StyledLabel>}
initialValue={parentFilter}
data-test="parent-filter-input"
required
rules={[
<DateFilterControl
name="time_range"
onChange={timeRange => {
setNativeFilterFieldValues(form, filterId, {
time_range: timeRange,
});
forceUpdate();
}}
/>
</StyledRowFormItem>
</CollapsibleControl>
)}
<CollapsibleControl
title={t('Sort filter values')}
onChange={checked => onSortChanged(checked || undefined)}
checked={
typeof filterToEdit?.controlValues?.sortAscending ===
'boolean'
}
>
<StyledRowContainer>
<StyledFormItem
name={[
'filters',
filterId,
'controlValues',
'sortAscending',
]}
initialValue={filterToEdit?.controlValues?.sortAscending}
label={<StyledLabel>{t('Sort type')}</StyledLabel>}
>
<Select
form={form}
filterId={filterId}
name="sortAscending"
options={[
{
required: true,
message: t('Parent filter is required'),
value: true,
label: t('Sort ascending'),
},
{
value: false,
label: t('Sort descending'),
},
]}
>
<Select
placeholder={t('None')}
options={parentFilterOptions}
isClearable
/>
</StyledRowFormItem>
</CollapsibleControl>
)}
{Object.keys(controlItems)
.filter(key => !BASIC_CONTROL_ITEMS.includes(key))
.map(key => controlItems[key])}
{hasDataset && hasAdditionalFilters && (
<CollapsibleControl
title={t('Pre-filter available values')}
checked={
!!filterToEdit?.adhoc_filters ||
!!filterToEdit?.time_range
}
onChange={checked => {
if (checked) {
// execute after render
setTimeout(
() =>
form.validateFields([
['filters', filterId, 'adhoc_filters'],
]),
0,
);
onChange={({ value }: { value: boolean }) =>
onSortChanged(value)
}
}}
>
<StyledRowFormItem
name={['filters', filterId, 'adhoc_filters']}
initialValue={filterToEdit?.adhoc_filters}
required
rules={[
{
required: true,
message: t('Adhoc filters is required'),
},
]}
>
<AdhocFilterControl
columns={
datasetDetails?.columns?.filter(
(c: ColumnMeta) => c.filterable,
) || []
}
savedMetrics={datasetDetails?.metrics || []}
datasource={datasetDetails}
onChange={(filters: AdhocFilter[]) => {
setNativeFilterFieldValues(form, filterId, {
adhoc_filters: filters,
});
forceUpdate();
}}
label={
<span>
<StyledAsterisk>*</StyledAsterisk>
<StyledLabel>{t('Adhoc filters')}</StyledLabel>
</span>
}
/>
</StyledRowFormItem>
<StyledRowFormItem
name={['filters', filterId, 'time_range']}
label={<StyledLabel>{t('Time range')}</StyledLabel>}
initialValue={filterToEdit?.time_range || 'No filter'}
>
<DateFilterControl
name="time_range"
onChange={timeRange => {
setNativeFilterFieldValues(form, filterId, {
time_range: timeRange,
});
forceUpdate();
}}
/>
</StyledRowFormItem>
</CollapsibleControl>
)}
<CollapsibleControl
title={t('Sort filter values')}
onChange={checked => onSortChanged(checked || undefined)}
checked={
typeof filterToEdit?.controlValues?.sortAscending ===
'boolean'
}
>
<StyledRowContainer>
/>
</StyledFormItem>
{hasMetrics && (
<StyledFormItem
name={[
'filters',
filterId,
'controlValues',
'sortAscending',
]}
initialValue={filterToEdit?.controlValues?.sortAscending}
label={<StyledLabel>{t('Sort type')}</StyledLabel>}
name={['filters', filterId, 'sortMetric']}
initialValue={filterToEdit?.sortMetric}
label={<StyledLabel>{t('Sort Metric')}</StyledLabel>}
data-test="field-input"
>
<Select
<SelectControl
form={form}
filterId={filterId}
name="sortAscending"
options={[
{
value: true,
label: t('Sort ascending'),
},
{
value: false,
label: t('Sort descending'),
},
]}
onChange={({ value }: { value: boolean }) =>
onSortChanged(value)
}
name="sortMetric"
options={metrics.map((metric: Metric) => ({
value: metric.metric_name,
label: metric.verbose_name ?? metric.metric_name,
}))}
onChange={(value: string | null): void => {
if (value !== undefined) {
setNativeFilterFieldValues(form, filterId, {
sortMetric: value,
});
forceUpdate();
}
}}
/>
</StyledFormItem>
{hasMetrics && (
<StyledFormItem
name={['filters', filterId, 'sortMetric']}
initialValue={filterToEdit?.sortMetric}
label={<StyledLabel>{t('Sort Metric')}</StyledLabel>}
data-test="field-input"
>
<SelectControl
form={form}
filterId={filterId}
name="sortMetric"
options={metrics.map((metric: Metric) => ({
value: metric.metric_name,
label: metric.verbose_name ?? metric.metric_name,
}))}
onChange={(value: string | null): void => {
if (value !== undefined) {
setNativeFilterFieldValues(form, filterId, {
sortMetric: value,
});
forceUpdate();
}
}}
/>
</StyledFormItem>
)}
</StyledRowContainer>
</CollapsibleControl>
</Collapse.Panel>
)}
</StyledCollapse>
</TabPane>
<TabPane
tab={FilterTabs.scoping.name}
key={FilterTabs.scoping.key}
forceRender
>
<FilterScope
updateFormValues={(values: any) =>
setNativeFilterFieldValues(form, filterId, values)
}
pathToFormValue={['filters', filterId]}
forceUpdate={forceUpdate}
scope={filterToEdit?.scope}
formScope={formFilter?.scope}
formScoping={formFilter?.scoping}
/>
</TabPane>
</StyledTabs>
</>
)}
</StyledRowContainer>
</CollapsibleControl>
</Collapse.Panel>
)}
</StyledCollapse>
</TabPane>
<TabPane
tab={FilterTabs.scoping.name}
key={FilterTabs.scoping.key}
forceRender
>
<FilterScope
updateFormValues={(values: any) =>
setNativeFilterFieldValues(form, filterId, values)
}
pathToFormValue={['filters', filterId]}
forceUpdate={forceUpdate}
scope={filterToEdit?.scope}
formScope={formFilter?.scope}
formScoping={formFilter?.scoping}
/>
</TabPane>
</StyledTabs>
);
};

2
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
View File

@ -231,7 +231,7 @@ export function FiltersConfigModal({
<StyledModalWrapper
visible={isOpen}
maskClosable={false}
title={t('Filters configuration and scoping')}
title={t('Filters configuration')}
width="50%"
destroyOnClose
onCancel={handleCancel}

2
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
View File

@ -64,7 +64,7 @@ export const validateForm = async (
addValidationError(
filterId,
'isInstant',
'For parent filters changes must be applied instantly',
'For hierarchical filters changes must be applied instantly',
);
}
};