feat: do not show project if not multiple projects exist (#5598)

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import { IFilterVisibility, IFilterItem } from './FeatureToggleFilters';
+import { IFilterVisibility, IFilterItem } from '../FeatureToggleFilters';
 import { Box, styled } from '@mui/material';
 import { Add } from '@mui/icons-material';
 

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

@@ -0,0 +1,40 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { FeatureToggleFilters } from './FeatureToggleFilters';
+
+const server = testServerSetup();
+
+test('should render projects filters when more than one project', async () => {
+    testServerRoute(server, '/api/admin/projects', {
+        projects: [
+            {
+                name: 'default',
+                id: 'default',
+            },
+            {
+                name: 'second',
+                id: 'Second',
+            },
+        ],
+    });
+
+    render(<FeatureToggleFilters onChange={() => {}} state={{}} />);
+
+    await screen.findByText('Project');
+});
+
+test('should not render projects filters when less than two project', async () => {
+    testServerRoute(server, '/api/admin/projects', {
+        projects: [
+            {
+                name: 'default',
+                id: 'default',
+            },
+        ],
+    });
+
+    render(<FeatureToggleFilters onChange={() => {}} state={{}} />);
+
+    expect(screen.queryByText('Projects')).not.toBeInTheDocument();
+});

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

@@ -2,7 +2,7 @@ import { useEffect, useState, VFC } from 'react';
 import { Box, styled } from '@mui/material';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import AddFilterButton from './AddFilterButton';
+import AddFilterButton from './AddFilterButton/AddFilterButton';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { FilterDateItem } from 'component/common/FilterDateItem/FilterDateItem';
 import {
@@ -90,6 +90,8 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
             value: `${tag.type}:${tag.value}`,
         }));
 
+        const hasMultipleProjects = projectsOptions.length > 1;
+
         const availableFilters: IFilterItem[] = [
             {
                 label: 'State',
@@ -98,13 +100,17 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
                 singularOperators: ['IS', 'IS_NOT'],
                 pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'],
             },
-            {
+            ...(hasMultipleProjects
-                label: 'Project',
+                ? ([
-                options: projectsOptions,
+                      {
-                filterKey: 'project',
+                          label: 'Project',
-                singularOperators: ['IS', 'IS_NOT'],
+                          options: projectsOptions,
-                pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'],
+                          filterKey: 'project',
-            },
+                          singularOperators: ['IS', 'IS_NOT'],
+                          pluralOperators: ['IS_ANY_OF', 'IS_NONE_OF'],
+                      },
+                  ] as IFilterItem[])
+                : []),
             {
                 label: 'Tags',
                 options: tagsOptions,
@@ -139,15 +145,19 @@ export const FeatureToggleFilters: VFC<IFeatureToggleFiltersProps> = ({
     ]);
 
     useEffect(() => {
+        const hasMultipleProjects = projects.length > 1;
+
         const filterVisibility: IFilterVisibility = {
             State: Boolean(state.state),
-            Project: Boolean(state.project),
+            ...(hasMultipleProjects && {
+                Project: Boolean(state.project),
+            }),
             Tags: Boolean(state.tag),
             Segment: Boolean(state.segment),
             'Created date': Boolean(state.createdAt),
         };
         setVisibleFilters(filterVisibility);
-    }, [JSON.stringify(state)]);
+    }, [JSON.stringify(state), JSON.stringify(projects)]);
 
     const hasAvailableFilters = Object.values(visibleFilters).some(
         (value) => !value,