Skip to content

Commit 9cf255c

Browse files
michael-s-molinamichael-s-molina
committed
fix: Layout of native filters modal with lengthy columns (#29648)
(cherry picked from commit be833dc)
1 parent 244048d commit 9cf255c

File tree

5 files changed

+41
-12
lines changed

5 files changed

+41
-12
lines changed

‎superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ describe('FilterScope', () => {
3535
const save = jest.fn();
3636
let form: FormInstance<NativeFiltersForm>;
3737
const mockedProps = {
38+
expanded: false,
3839
filterId: 'DefaultFilterId',
3940
dependencies: [],
4041
setErroredFilters: jest.fn(),

‎superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@ import {
105105
import { FILTER_SUPPORTED_TYPES, INPUT_WIDTH } from './constants';
106106
import DependencyList from './DependencyList';
107107

108+
const FORM_ITEM_WIDTH = 260;
109+
108110
const TabPane = styled(Tabs.TabPane)`
109111
padding: ${({ theme }) => theme.gridUnit * 4}px 0px;
110112
`;
@@ -136,8 +138,8 @@ const controlsOrder: ControlKey[] = [
136138
'inverseSelection',
137139
];
138140

139-
export const StyledFormItem = styled(FormItem)`
140-
width: 49%;
141+
export const StyledFormItem = styled(FormItem)<{ expanded: boolean }>`
142+
width: ${({ expanded }) => (expanded ? '49%' : `${FORM_ITEM_WIDTH}px`)};
141143
margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
142144
143145
& .ant-form-item-label {
@@ -149,10 +151,10 @@ export const StyledFormItem = styled(FormItem)`
149151
}
150152
`;
151153

152-
export const StyledRowFormItem = styled(FormItem)`
154+
export const StyledRowFormItem = styled(FormItem)<{ expanded: boolean }>`
153155
margin-bottom: 0;
154156
padding-bottom: 0;
155-
min-width: 50%;
157+
min-width: ${({ expanded }) => (expanded ? '50%' : `${FORM_ITEM_WIDTH}px`)};
156158
157159
& .ant-form-item-label {
158160
padding-bottom: 0;
@@ -167,8 +169,8 @@ export const StyledRowFormItem = styled(FormItem)`
167169
}
168170
`;
169171

170-
export const StyledRowSubFormItem = styled(FormItem)`
171-
min-width: 50%;
172+
export const StyledRowSubFormItem = styled(FormItem)<{ expanded: boolean }>`
173+
min-width: ${({ expanded }) => (expanded ? '50%' : `${FORM_ITEM_WIDTH}px`)};
172174
173175
& .ant-form-item-label {
174176
padding-bottom: 0;
@@ -264,9 +266,9 @@ const StyledAsterisk = styled.span`
264266
}
265267
`;
266268

267-
const FilterTypeInfo = styled.div`
268-
${({ theme }) => `
269-
width: 49%;
269+
const FilterTypeInfo = styled.div<{ expanded: boolean }>`
270+
${({ theme, expanded }) => `
271+
width: ${expanded ? '49%' : `${FORM_ITEM_WIDTH}px`};
270272
font-size: ${theme.typography.sizes.s}px;
271273
color: ${theme.colors.grayscale.light1};
272274
margin:
@@ -300,6 +302,7 @@ export const FilterPanels = {
300302
};
301303

302304
export interface FiltersConfigFormProps {
305+
expanded: boolean;
303306
filterId: string;
304307
filterToEdit?: Filter;
305308
removedFilters: Record<string, FilterRemoval>;
@@ -334,6 +337,7 @@ const FILTER_TYPE_NAME_MAPPING = {
334337
*/
335338
const FiltersConfigForm = (
336339
{
340+
expanded,
337341
filterId,
338342
filterToEdit,
339343
removedFilters,
@@ -376,7 +380,7 @@ const FiltersConfigForm = (
376380
const nativeFilterVizTypes = Object.entries(nativeFilterItems)
377381
// @ts-ignore
378382
.filter(([, { value }]) => value.behaviors?.includes(Behavior.NativeFilter))
379-
.map(([key]) => key);
383+
.map(([key]) => key as keyof typeof FILTER_SUPPORTED_TYPES);
380384

381385
const loadedDatasets = useSelector<RootState, DatasourcesState>(
382386
({ datasources }) => datasources,
@@ -411,6 +415,7 @@ const FiltersConfigForm = (
411415

412416
const { controlItems = {}, mainControlItems = {} } = formFilter
413417
? getControlItemsMap({
418+
expanded,
414419
datasetId,
415420
disabled: false,
416421
forceUpdate,
@@ -760,6 +765,7 @@ const FiltersConfigForm = (
760765

761766
const timeColumn = (
762767
<StyledRowFormItem
768+
expanded={expanded}
763769
name={['filters', filterId, 'granularity_sqla']}
764770
label={
765771
<>
@@ -807,13 +813,15 @@ const FiltersConfigForm = (
807813
>
808814
<StyledContainer>
809815
<StyledFormItem
816+
expanded={expanded}
810817
name={['filters', filterId, 'type']}
811818
hidden
812819
initialValue={NativeFilterType.NativeFilter}
813820
>
814821
<Input />
815822
</StyledFormItem>
816823
<StyledFormItem
824+
expanded={expanded}
817825
name={['filters', filterId, 'name']}
818826
label={<StyledLabel>{t('Filter name')}</StyledLabel>}
819827
initialValue={filterToEdit?.name}
@@ -822,6 +830,7 @@ const FiltersConfigForm = (
822830
<Input {...getFiltersConfigModalTestId('name-input')} />
823831
</StyledFormItem>
824832
<StyledFormItem
833+
expanded={expanded}
825834
name={['filters', filterId, 'filterType']}
826835
rules={[{ required: !isRemoved, message: t('Name is required') }]}
827836
initialValue={filterToEdit?.filterType || 'filter_select'}
@@ -867,7 +876,7 @@ const FiltersConfigForm = (
867876
</StyledFormItem>
868877
</StyledContainer>
869878
{formFilter?.filterType === 'filter_time' && (
870-
<FilterTypeInfo>
879+
<FilterTypeInfo expanded={expanded}>
871880
{t(`Dashboard time range filters apply to temporal columns defined in
872881
the filter section of each chart. Add temporal columns to the chart
873882
filters to have this dashboard filter impact those charts.`)}
@@ -877,6 +886,7 @@ const FiltersConfigForm = (
877886
<StyledRowContainer>
878887
{showDataset ? (
879888
<StyledFormItem
889+
expanded={expanded}
880890
name={['filters', filterId, 'dataset']}
881891
label={<StyledLabel>{t('Dataset')}</StyledLabel>}
882892
initialValue={
@@ -915,7 +925,10 @@ const FiltersConfigForm = (
915925
/>
916926
</StyledFormItem>
917927
) : (
918-
<StyledFormItem label={<StyledLabel>{t('Dataset')}</StyledLabel>}>
928+
<StyledFormItem
929+
expanded={expanded}
930+
label={<StyledLabel>{t('Dataset')}</StyledLabel>}
931+
>
919932
<Loading position="inline-centered" />
920933
</StyledFormItem>
921934
)}
@@ -941,6 +954,7 @@ const FiltersConfigForm = (
941954
>
942955
{canDependOnOtherFilters && hasAvailableFilters && (
943956
<StyledRowFormItem
957+
expanded={expanded}
944958
name={['filters', filterId, 'dependencies']}
945959
initialValue={dependencies}
946960
>
@@ -981,6 +995,7 @@ const FiltersConfigForm = (
981995
}}
982996
>
983997
<StyledRowSubFormItem
998+
expanded={expanded}
984999
name={['filters', filterId, 'adhoc_filters']}
9851000
css={{ width: INPUT_WIDTH }}
9861001
initialValue={filterToEdit?.adhoc_filters}
@@ -1016,6 +1031,7 @@ const FiltersConfigForm = (
10161031
</StyledRowSubFormItem>
10171032
{showTimeRangePicker && (
10181033
<StyledRowFormItem
1034+
expanded={expanded}
10191035
name={['filters', filterId, 'time_range']}
10201036
label={<StyledLabel>{t('Time range')}</StyledLabel>}
10211037
initialValue={
@@ -1057,6 +1073,7 @@ const FiltersConfigForm = (
10571073
}}
10581074
>
10591075
<StyledRowFormItem
1076+
expanded={expanded}
10601077
name={[
10611078
'filters',
10621079
filterId,
@@ -1077,6 +1094,7 @@ const FiltersConfigForm = (
10771094
</StyledRowFormItem>
10781095
{hasMetrics && (
10791096
<StyledRowSubFormItem
1097+
expanded={expanded}
10801098
name={['filters', filterId, 'sortMetric']}
10811099
initialValue={filterToEdit?.sortMetric}
10821100
label={
@@ -1126,6 +1144,7 @@ const FiltersConfigForm = (
11261144
}}
11271145
>
11281146
<StyledRowFormItem
1147+
expanded={expanded}
11291148
name={[
11301149
'filters',
11311150
filterId,
@@ -1164,6 +1183,7 @@ const FiltersConfigForm = (
11641183
key={`${filterId}-${FilterPanels.settings.key}`}
11651184
>
11661185
<StyledFormItem
1186+
expanded={expanded}
11671187
name={['filters', filterId, 'description']}
11681188
initialValue={filterToEdit?.description}
11691189
label={<StyledLabel>{t('Description')}</StyledLabel>}
@@ -1194,6 +1214,7 @@ const FiltersConfigForm = (
11941214
>
11951215
{!isRemoved && (
11961216
<StyledRowSubFormItem
1217+
expanded={expanded}
11971218
name={['filters', filterId, 'defaultDataMask']}
11981219
initialValue={initialDefaultValue}
11991220
data-test="default-input"

‎superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ const filterMock: Filter = {
6565
};
6666

6767
const createProps: () => ControlItemsProps = () => ({
68+
expanded: false,
6869
datasetId: 1,
6970
disabled: false,
7071
forceUpdate: jest.fn(),

‎superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import {
4444
import { ColumnSelect } from './ColumnSelect';
4545

4646
export interface ControlItemsProps {
47+
expanded: boolean;
4748
datasetId: number;
4849
disabled: boolean;
4950
forceUpdate: Function;
@@ -60,6 +61,7 @@ const CleanFormItem = styled(FormItem)`
6061
`;
6162

6263
export default function getControlItemsMap({
64+
expanded,
6365
datasetId,
6466
disabled,
6567
forceUpdate,
@@ -104,6 +106,7 @@ export default function getControlItemsMap({
104106
}
105107
/>
106108
<StyledFormItem
109+
expanded={expanded}
107110
// don't show the column select unless we have a dataset
108111
name={['filters', filterId, 'column']}
109112
initialValue={initColumn}
@@ -174,6 +177,7 @@ export default function getControlItemsMap({
174177
}
175178
>
176179
<StyledRowFormItem
180+
expanded={expanded}
177181
key={controlItem.name}
178182
name={['filters', filterId, 'controlValues', controlItem.name]}
179183
initialValue={initialValue}

‎superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -587,6 +587,7 @@ function FiltersConfigModal({
587587
/>
588588
) : (
589589
<FiltersConfigForm
590+
expanded={expanded}
590591
ref={configFormRef}
591592
form={form}
592593
filterId={id}
@@ -619,6 +620,7 @@ function FiltersConfigModal({
619620
validateDependencies,
620621
getDependencySuggestion,
621622
handleActiveFilterPanelChange,
623+
expanded,
622624
],
623625
);
624626

0 commit comments

Comments
 (0)