fix: state now persist to filters (#5559)

When navigating to features list, now it will respect the query params.
Unleash · Dec 6, 2023 · eda4186 · eda4186
1 parent d9648de
commit eda4186
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/frontend/src/component/common/FilterItem/FilterItem.test.tsx b/frontend/src/component/common/FilterItem/FilterItem.test.tsx
@@ -88,12 +88,12 @@ describe('FilterItem Component', () => {
         const operatorsElement = await screen.findByText('is any of');
 
         operatorsElement.click();
-        const newOperator = await screen.findByText('is not any of');
+        const newOperator = await screen.findByText('is none of');
 
         newOperator.click();
 
         expect(recordedChanges).toEqual([
-            { operator: 'IS_NOT_ANY_OF', values: ['1', '3'] },
+            { operator: 'IS_NONE_OF', values: ['1', '3'] },
         ]);
     });
 

diff --git a/...end/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx b/...end/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx
@@ -47,15 +47,8 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
             value: 'stale',
         },
     ];
-    const defaultFilterItems: IFilterItem[] = [
-        {
-            label: 'State',
-            options: stateOptions,
-            filterKey: 'state',
-        },
-    ];
-    const [availableFilters, setAvailableFilters] =
-        useState<IFilterItem[]>(defaultFilterItems);
+
+    const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
     const removeFilter = (label: string) => {
         const filters = availableFilters.map((filter) =>
             filter.label === label
@@ -74,17 +67,24 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
             value: project.id,
         }));
 
-        const newFilterItems = [
-            ...defaultFilterItems,
+        const newFilterItems: IFilterItem[] = [
+            {
+                label: 'State',
+                options: stateOptions,
+                filterKey: 'state',
+                enabled: Boolean(state.state),
+            },
             {
                 label: 'Project',
                 options: projectsOptions,
                 filterKey: 'project',
+                enabled: Boolean(state.project),
             } as const,
         ];
 
         setAvailableFilters(newFilterItems);
-    }, [JSON.stringify(projects)]);
+    }, [JSON.stringify(projects), JSON.stringify(state)]);
+
     return (
         <StyledBox>
             {availableFilters.map(