Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-10-18 20:09:08 +02:00
Code Issues Projects Releases Wiki Activity

refactor: simplify configuration for filters (#5622)

Browse Source 
This is building block of abstraction for filters.
This commit is contained in:
Jaanus Sellin 2023-12-13 10:23:59 +02:00 committed by GitHub
parent 11b477d872
commit c0c1dba9b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx
View File

@ -31,16 +31,25 @@ interface IFeatureToggleFiltersProps {
onChange: (value: FeatureTogglesListFilters) => void;
}
interface IFilterItem {
type IBaseFilterItem = {
label: string;
options: {
label: string;
value: string;
}[];
filterKey: keyof FeatureTogglesListFilters;
};
type ITextFilterItem = IBaseFilterItem & {
singularOperators: [string, ...string[]];
pluralOperators: [string, ...string[]];
}
};
type IDateFilterItem = IBaseFilterItem & {
dateOperators: [string, ...string[]];
};
type IFilterItem = ITextFilterItem | IDateFilterItem;
export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
state,
@ -147,6 +156,12 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
'EXCLUDE_ALL',
],
},
{
label: 'Created date',
options: [],
filterKey: 'createdAt',
dateOperators: ['IS_ON_OR_AFTER', 'IS_BEFORE'],
},
];
setAvailableFilters(availableFilters);
@ -157,46 +172,17 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
]);
useEffect(() => {
const hasMultipleProjects = projects.length > 1;
const fieldsMapping = [
{
stateField: 'state',
label: 'State',
},
...(hasMultipleProjects
? [
{
stateField: 'project',
label: 'Project',
},
]
: []),
{
stateField: 'tag',
label: 'Tags',
},
{
stateField: 'segment',
label: 'Segment',
},
{
stateField: 'createdAt',
label: 'Created date',
},
];
const newSelectedFilters = fieldsMapping
const newSelectedFilters = availableFilters
.filter((field) =>
Boolean(
state[field.stateField as keyof FeatureTogglesListFilters],
state[field.filterKey as keyof FeatureTogglesListFilters],
),
)
.map((field) => field.label);
const newUnselectedFilters = fieldsMapping
const newUnselectedFilters = availableFilters
.filter(
(field) =>
!state[field.stateField as keyof FeatureTogglesListFilters],
!state[field.filterKey as keyof FeatureTogglesListFilters],
)
.map((field) => field.label)
.sort();
@ -205,24 +191,12 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
mergeArraysKeepingOrder(selectedFilters, newSelectedFilters),
);
setUnselectedFilters(newUnselectedFilters);
}, [JSON.stringify(state), JSON.stringify(projects)]);
}, [JSON.stringify(state), JSON.stringify(availableFilters)]);
const hasAvailableFilters = unselectedFilters.length > 0;
return (
<StyledBox>
{selectedFilters.map((selectedFilter) => {
if (selectedFilter === 'Created date') {
return (
<FilterDateItem
label={'Created date'}
state={state.createdAt}
onChange={(value) => onChange({ createdAt: value })}
operators={['IS_ON_OR_AFTER', 'IS_BEFORE']}
onChipClose={() => deselectFilter('Created date')}
/>
);
}
const filter = availableFilters.find(
(filter) => filter.label === selectedFilter,
);
@ -231,6 +205,20 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
return null;
}
if ('dateOperators' in filter) {
return (
<FilterDateItem
label={filter.label}
state={state[filter.filterKey]}
onChange={(value) =>
onChange({ [filter.filterKey]: value })
}
operators={filter.dateOperators}
onChipClose={() => deselectFilter(filter.label)}
/>
);
}
return (
<FilterItem
key={filter.label}