Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-12 13:48:35 +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; onChange: (value: FeatureTogglesListFilters) => void;
} }
interface IFilterItem { type IBaseFilterItem = {
label: string; label: string;
options: { options: {
label: string; label: string;
value: string; value: string;
}[]; }[];
filterKey: keyof FeatureTogglesListFilters; filterKey: keyof FeatureTogglesListFilters;
};
type ITextFilterItem = IBaseFilterItem & {
singularOperators: [string, ...string[]]; singularOperators: [string, ...string[]];
pluralOperators: [string, ...string[]]; pluralOperators: [string, ...string[]];
} };
type IDateFilterItem = IBaseFilterItem & {
dateOperators: [string, ...string[]];
};
type IFilterItem = ITextFilterItem | IDateFilterItem;
export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
state, state,
@ -147,6 +156,12 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
'EXCLUDE_ALL', 'EXCLUDE_ALL',
], ],
}, },
{
label: 'Created date',
options: [],
filterKey: 'createdAt',
dateOperators: ['IS_ON_OR_AFTER', 'IS_BEFORE'],
},
]; ];
setAvailableFilters(availableFilters); setAvailableFilters(availableFilters);
@ -157,46 +172,17 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
]); ]);
useEffect(() => { useEffect(() => {
const hasMultipleProjects = projects.length > 1; const newSelectedFilters = availableFilters
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
.filter((field) => .filter((field) =>
Boolean( Boolean(
state[field.stateField as keyof FeatureTogglesListFilters], state[field.filterKey as keyof FeatureTogglesListFilters],
), ),
) )
.map((field) => field.label); .map((field) => field.label);
const newUnselectedFilters = fieldsMapping const newUnselectedFilters = availableFilters
.filter( .filter(
(field) => (field) =>
!state[field.stateField as keyof FeatureTogglesListFilters], !state[field.filterKey as keyof FeatureTogglesListFilters],
) )
.map((field) => field.label) .map((field) => field.label)
.sort(); .sort();
@ -205,24 +191,12 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
mergeArraysKeepingOrder(selectedFilters, newSelectedFilters), mergeArraysKeepingOrder(selectedFilters, newSelectedFilters),
); );
setUnselectedFilters(newUnselectedFilters); setUnselectedFilters(newUnselectedFilters);
}, [JSON.stringify(state), JSON.stringify(projects)]); }, [JSON.stringify(state), JSON.stringify(availableFilters)]);
const hasAvailableFilters = unselectedFilters.length > 0; const hasAvailableFilters = unselectedFilters.length > 0;
return ( return (
<StyledBox> <StyledBox>
{selectedFilters.map((selectedFilter) => { {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( const filter = availableFilters.find(
(filter) => filter.label === selectedFilter, (filter) => filter.label === selectedFilter,
); );
@ -231,6 +205,20 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
return null; 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 ( return (
<FilterItem <FilterItem
key={filter.label} key={filter.label}