feat: implement FeaturesOverview lifecycle filters and associated tests

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -20,7 +20,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { focusable } from 'themes/themeStyles';
 import { FeatureLifecycleCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
 import useToast from 'hooks/useToast';
-import { FeatureToggleFilters } from './FeatureToggleFilters/FeatureToggleFilters.tsx';
+import { FeaturesOverviewToggleFilters } from './FeaturesOverviewLifecycleFilters/FeaturesOverviewToggleFilters.tsx';
 import { withTableState } from 'utils/withTableState';
 import useLoading from 'hooks/useLoading';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
@@ -29,7 +29,7 @@ import {
     useTableStateFilter,
 } from './useGlobalFeatureSearch.ts';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
-import { FeatureLifecycleFilters } from './FeatureToggleFilters/FeatureLifecycleFilters.tsx';
+import { FeaturesOverviewLifecycleFilters } from './FeaturesOverviewLifecycleFilters/FeaturesOverviewLifecycleFilters.tsx';
 import { ExportFlags } from './ExportFlags.tsx';
 import { createFeatureOverviewCell } from 'component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell';
 import { AvatarCell } from 'component/project/Project/PaginatedProjectFeatureToggles/AvatarCell';
@@ -290,7 +290,7 @@ export const FeatureToggleListTable: FC = () => {
                 />
             }
         >
-            <FeatureLifecycleFilters
+            <FeaturesOverviewLifecycleFilters
                 state={filterState}
                 onChange={setTableState}
                 total={loading ? undefined : total}
@@ -303,8 +303,8 @@ export const FeatureToggleListTable: FC = () => {
                         id='globalFeatureFlags'
                     />
                 ) : null}
-            </FeatureLifecycleFilters>
+            </FeaturesOverviewLifecycleFilters>
-            <FeatureToggleFilters
+            <FeaturesOverviewToggleFilters
                 onChange={setTableState}
                 state={filterState}
             />

frontend/src/component/feature/FeatureToggleList/FeaturesOverviewLifecycleFilters/FeaturesOverviewLifecycleFilters.test.tsx

@@ -1,7 +1,7 @@
 import { type MockedFunction, vi } from 'vitest';
 import { render } from 'utils/testRenderer';
 import userEvent from '@testing-library/user-event';
-import { FeatureLifecycleFilters } from './FeatureLifecycleFilters.tsx';
+import { FeaturesOverviewLifecycleFilters } from './FeaturesOverviewLifecycleFilters.tsx';
 import { useLifecycleCount } from 'hooks/api/getters/useLifecycleCount/useLifecycleCount';
 
 vi.mock('hooks/api/getters/useLifecycleCount/useLifecycleCount');
@@ -33,7 +33,7 @@ describe('LifecycleFilters', () => {
         });
 
         const { getByText } = render(
-            <FeatureLifecycleFilters state={{}} onChange={vi.fn()} />,
+            <FeaturesOverviewLifecycleFilters state={{}} onChange={vi.fn()} />,
         );
 
         expect(getByText('All flags')).toBeInTheDocument();
@@ -44,7 +44,7 @@ describe('LifecycleFilters', () => {
 
     it('renders all stages with correct counts when no total provided', () => {
         const { getByText } = render(
-            <FeatureLifecycleFilters state={{}} onChange={vi.fn()} />,
+            <FeaturesOverviewLifecycleFilters state={{}} onChange={vi.fn()} />,
         );
 
         expect(getByText('All flags')).toBeInTheDocument();
@@ -56,7 +56,7 @@ describe('LifecycleFilters', () => {
     it('renders dynamic label when total matches count', () => {
         const total = 3;
         const { getByText } = render(
-            <FeatureLifecycleFilters
+            <FeaturesOverviewLifecycleFilters
                 state={{ lifecycle: { operator: 'IS', values: ['live'] } }}
                 onChange={vi.fn()}
                 total={total}
@@ -68,7 +68,7 @@ describe('LifecycleFilters', () => {
     it('renders dynamic label when total does not match count', () => {
         const total = 2;
         const { getByText } = render(
-            <FeatureLifecycleFilters
+            <FeaturesOverviewLifecycleFilters
                 state={{ lifecycle: { operator: 'IS', values: ['live'] } }}
                 onChange={vi.fn()}
                 total={total}
@@ -80,7 +80,7 @@ describe('LifecycleFilters', () => {
     it('will apply a correct filter for each stage', async () => {
         const onChange = vi.fn();
         const { getByText } = render(
-            <FeatureLifecycleFilters state={{}} onChange={onChange} />,
+            <FeaturesOverviewLifecycleFilters state={{}} onChange={onChange} />,
         );
 
         await userEvent.click(getByText('Develop (2)'));

frontend/src/component/feature/FeatureToggleList/FeaturesOverviewLifecycleFilters/FeaturesOverviewLifecycleFilters.tsx

@@ -11,7 +11,7 @@ interface ILifecycleFiltersProps {
     children?: ReactNode;
 }
 
-export const FeatureLifecycleFilters: FC<ILifecycleFiltersProps> = ({
+export const FeaturesOverviewLifecycleFilters: FC<ILifecycleFiltersProps> = ({
     state,
     onChange,
     total,

frontend/src/component/feature/FeatureToggleList/FeaturesOverviewLifecycleFilters/FeaturesOverviewToggleFilters.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { render } from 'utils/testRenderer';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
-import { FeatureToggleFilters } from './FeatureToggleFilters.tsx';
+import { FeaturesOverviewToggleFilters } from './FeaturesOverviewToggleFilters.tsx';
 
 const server = testServerSetup();
 
@@ -19,7 +19,7 @@ test('should render projects filters when more than one project', async () => {
         ],
     });
 
-    render(<FeatureToggleFilters onChange={() => {}} state={{}} />);
+    render(<FeaturesOverviewToggleFilters onChange={() => {}} state={{}} />);
 
     await screen.findByText('Project');
 });
@@ -34,7 +34,7 @@ test('should not render projects filters when less than two project', async () =
         ],
     });
 
-    render(<FeatureToggleFilters onChange={() => {}} state={{}} />);
+    render(<FeaturesOverviewToggleFilters onChange={() => {}} state={{}} />);
 
     expect(screen.queryByText('Projects')).not.toBeInTheDocument();
 });

frontend/src/component/feature/FeatureToggleList/FeaturesOverviewLifecycleFilters/FeaturesOverviewToggleFilters.tsx

@@ -14,7 +14,7 @@ interface IFeatureToggleFiltersProps {
     onChange: (value: FilterItemParamHolder) => void;
 }
 
-export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
+export const FeaturesOverviewToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
     state,
     onChange,
 }) => {