feat: add lifecycle stage filter to project feature toggles (#10448)

Backend API is already implemented and ready to be used.

[issue/CTO-244](https://linear.app/unleash/issue/CTO-244/filter-by-lifecycle-on-project-page)

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx

@@ -207,3 +207,34 @@ test('Project is not onboarded', async () => {
     );
     await screen.findByText('Welcome to your project');
 });
+
+test('renders lifecycle filters', async () => {
+    setupApi();
+
+    render(
+        <Routes>
+            <Route
+                path={'/projects/:projectId'}
+                element={
+                    <ProjectFeatureToggles
+                        environments={['development', 'production']}
+                    />
+                }
+            />
+        </Routes>,
+        {
+            route: '/projects/default',
+        },
+    );
+
+    const addFilter = await screen.findByText('Filter');
+    fireEvent.click(addFilter);
+
+    const lifecycleFilter = await screen.findByText('Lifecycle stage');
+    fireEvent.click(lifecycleFilter);
+
+    await screen.findByText('Define');
+    await screen.findByText('Develop');
+    await screen.findByText('Rollout production');
+    await screen.findByText('Cleanup');
+});

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -113,6 +113,7 @@ export const ProjectFeatureToggles = ({
         state: tableState.state,
         createdBy: tableState.createdBy,
         archived: tableState.archived,
+        lifecycle: tableState.lifecycle,
     };
 
     const { favorite, unfavorite } = useFavoriteFeaturesApi();

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOverviewFilters.tsx

@@ -111,6 +111,19 @@ export const ProjectOverviewFilters: VFC<IProjectOverviewFilters> = ({
                 singularOperators: ['IS'],
                 pluralOperators: ['IS_ANY_OF'],
             },
+            {
+                label: 'Lifecycle stage',
+                icon: 'model_training',
+                options: [
+                    { label: 'Define', value: 'initial' },
+                    { label: 'Develop', value: 'pre-live' },
+                    { label: 'Rollout production', value: 'live' },
+                    { label: 'Cleanup', value: 'completed' },
+                ],
+                filterKey: 'lifecycle',
+                singularOperators: ['IS', 'IS_NOT'],
+                pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'],
+            },
         ];
 
         setAvailableFilters(availableFilters);

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts

@@ -41,6 +41,7 @@ export const useProjectFeatureSearch = (
         type: FilterItemParam,
         createdBy: FilterItemParam,
         archived: FilterItemParam,
+        lifecycle: FilterItemParam,
     };
     const [tableState, setTableState] = usePersistentTableState(
         `${storageKey}-${projectId}`,