feat: filter project flags by state (#7618)

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

@@ -75,6 +75,7 @@ export const ProjectFeatureToggles = ({
         tag: tableState.tag,
         createdAt: tableState.createdAt,
         type: tableState.type,
+        state: tableState.state,
         ...(flagCreatorEnabled ? { createdBy: tableState.createdBy } : {}),
     };
 

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

@@ -35,7 +35,26 @@ export const ProjectOverviewFilters: VFC<IProjectOverviewFilters> = ({
             value: String(creator.id),
         }));
 
+        const stateOptions = [
+            {
+                label: 'Active',
+                value: 'active',
+            },
+            {
+                label: 'Stale',
+                value: 'stale',
+            },
+        ];
+
         const availableFilters: IFilterItem[] = [
+            {
+                label: 'State',
+                icon: 'hexagon',
+                options: stateOptions,
+                filterKey: 'state',
+                singularOperators: ['IS', 'IS_NOT'],
+                pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'],
+            },
             {
                 label: 'Tags',
                 icon: 'label',

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

@@ -37,6 +37,7 @@ export const useProjectFeatureSearch = (
         sortOrder: withDefault(StringParam, 'desc'),
         columns: ArrayParam,
         tag: FilterItemParam,
+        state: FilterItemParam,
         createdAt: FilterItemParam,
         type: FilterItemParam,
         ...(flagCreatorEnabled ? { createdBy: FilterItemParam } : {}),

frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealth.tsx

@@ -97,7 +97,9 @@ export const ProjectHealth: FC<{ health: ProjectInsightsSchemaHealth }> = ({
                         <StatusWithDot>
                             <Dot color={theme.palette.error.border} />
                             <Box sx={{ fontWeight: 'bold' }}>Stale</Box>
-                            <Link to={`/projects/${projectId}`}>
+                            <Link
+                                to={`/projects/${projectId}?state=IS%3Astale`}
+                            >
                                 (view flags)
                             </Link>
                         </StatusWithDot>