refactor: simplify lifecycle filter components and remove unused getStageCount function

frontend/src/component/common/LifecycleFilters/LifecycleFilters.tsx

@@ -25,16 +25,12 @@ const StyledChip = styled(Chip, {
     },
 }));
 
-interface ILifecycleFiltersBaseProps<T> {
+interface ILifecycleFiltersBaseProps {
     state: FilterItemParamHolder;
     onChange: (value: FilterItemParamHolder) => void;
     total?: number;
     children?: ReactNode;
-    countData?: T;
+    countData?: Record<LifecycleStage['name'], number>;
-    getStageCount: (
-        lifecycle: LifecycleStage['name'] | null,
-        data?: T,
-    ) => number | undefined;
     sx?: SxProps<Theme>;
 }
 
@@ -62,15 +58,14 @@ const lifecycleOptions: {
     { label: 'Cleanup', value: 'completed' },
 ];
 
-export const LifecycleFilters = <T,>({
+export const LifecycleFilters = ({
     state,
     onChange,
     total,
     children,
     countData,
-    getStageCount,
     sx,
-}: ILifecycleFiltersBaseProps<T>) => {
+}: ILifecycleFiltersBaseProps) => {
     const current = state.lifecycle?.values ?? [];
 
     return (
@@ -81,7 +76,7 @@ export const LifecycleFilters = <T,>({
                         value === null
                             ? !state.lifecycle
                             : current.includes(value);
-                    const count = getStageCount(value, countData);
+                    const count = value ? countData?.[value] : total;
                     const dynamicLabel =
                         isActive && Number.isInteger(total)
                             ? `${label} (${total === count ? total : `${total} of ${count}`})`

frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureLifecycleFilters.tsx

@@ -40,14 +40,20 @@ export const FeatureLifecycleFilters: FC<ILifecycleFiltersProps> = ({
     children,
 }) => {
     const { lifecycleCount } = useLifecycleCount();
+    const countData = Object.entries(lifecycleCount || {}).reduce(
+        (acc, [key, value]) => {
+            acc[key === 'preLive' ? 'pre-live' : key] = value;
+            return acc;
+        },
+        {} as Record<string, number>,
+    );
 
     return (
         <LifecycleFilters
             state={state}
             onChange={onChange}
             total={total}
-            countData={lifecycleCount}
+            countData={countData}
-            getStageCount={getStageCount}
             sx={{
                 padding: (theme) =>
                     `${theme.spacing(1.5)} ${theme.spacing(3)} 0 ${theme.spacing(3)}`,

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

@@ -1,30 +1,9 @@
 import type { FC, ReactNode } from 'react';
+import { useEffect } from 'react';
 import type { FilterItemParamHolder } from '../../../filter/Filters/Filters.tsx';
-import type { LifecycleStage } from '../../../feature/FeatureView/FeatureOverview/FeatureLifecycle/LifecycleStage.tsx';
 import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
 import { LifecycleFilters } from '../../../common/LifecycleFilters/LifecycleFilters.tsx';
 
-const getStageCount = (
-    lifecycle: LifecycleStage['name'] | null,
-    lifecycleSummary?: { [key: string]: { currentFlags: number } },
-) => {
-    if (!lifecycleSummary) {
-        return undefined;
-    }
-
-    if (lifecycle === null) {
-        return (
-            (lifecycleSummary.initial?.currentFlags || 0) +
-            (lifecycleSummary.preLive?.currentFlags || 0) +
-            (lifecycleSummary.live?.currentFlags || 0) +
-            (lifecycleSummary.completed?.currentFlags || 0)
-        );
-    }
-
-    const key = lifecycle === 'pre-live' ? 'preLive' : lifecycle;
-    return lifecycleSummary[key]?.currentFlags;
-};
-
 interface IProjectLifecycleFiltersProps {
     projectId: string;
     state: FilterItemParamHolder;
@@ -41,7 +20,26 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
     children,
 }) => {
     const { data } = useProjectStatus(projectId);
-    const lifecycleSummary = data?.lifecycleSummary;
+    const lifecycleSummary = Object.entries(
+        data?.lifecycleSummary || {},
+    ).reduce(
+        (acc, [key, value]) => {
+            acc[key === 'preLive' ? 'pre-live' : key] = value.currentFlags || 0;
+            return acc;
+        },
+        {} as Record<string, number>,
+    );
+
+    const isArchivedFilterActive = state.archived?.values?.includes('true');
+    useEffect(() => {
+        if (isArchivedFilterActive && state.lifecycle) {
+            onChange({ ...state, lifecycle: null });
+        }
+    }, [isArchivedFilterActive, state, onChange]);
+
+    if (isArchivedFilterActive) {
+        return null;
+    }
 
     return (
         <LifecycleFilters
@@ -49,7 +47,6 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
             onChange={onChange}
             total={total}
             countData={lifecycleSummary}
-            getStageCount={getStageCount}
         >
             {children}
         </LifecycleFilters>