feat: rename search page and change icon (#9706)

Behind flagsReleaseManagementUI flag

frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, FC } from 'react';
+import { useMemo, type ComponentProps, type FC } from 'react';
 import EmptyIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
 import type SvgIcon from '@mui/material/SvgIcon/SvgIcon';
 import ApplicationsIcon from '@mui/icons-material/AppsOutlined';
@@ -34,6 +34,8 @@ import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
 import PersonalDashboardIcon from '@mui/icons-material/DashboardOutlined';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
+import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 // TODO: move to routes
 const icons: Record<
@@ -85,12 +87,13 @@ const icons: Record<
     Documentation: LibraryBooksIcon,
 };
 
-const findIcon = (key: string) => {
-    return icons[key] || EmptyIcon;
-};
-
 export const IconRenderer: FC<{ path: string }> = ({ path }) => {
-    const IconComponent = findIcon(path); // Fallback to 'default' if the type is not found
+    const flagsReleaseManagementUI = useUiFlag('flagsReleaseManagementUI');
+    const IconComponent = useMemo(() => icons[path] || EmptyIcon, [path]); // Fallback to 'default' if the type is not found
+
+    if (flagsReleaseManagementUI && path === '/search') {
+        return <FlagOutlinedIcon />;
+    }
 
     return <IconComponent />;
 };

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -13,18 +13,12 @@ import { Box, List, Typography } from '@mui/material';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { IconRenderer } from './IconRenderer';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import SearchIcon from '@mui/icons-material/Search';
-import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
-import InsightsIcon from '@mui/icons-material/Insights';
-import PersonalDashboardIcon from '@mui/icons-material/DashboardOutlined';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FlagIcon from '@mui/icons-material/OutlinedFlag';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
-import SettingsIcon from '@mui/icons-material/Settings';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge';
 import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge';
@@ -132,6 +126,7 @@ export const PrimaryNavigationList: FC<{
 }> = ({ mode, onClick, activeItem }) => {
     const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem;
     const { isOss } = useUiConfig();
+    const flagsReleaseManagementUI = useUiFlag('flagsReleaseManagementUI');
 
     return (
         <List>
@@ -141,7 +136,7 @@ export const PrimaryNavigationList: FC<{
                 onClick={() => onClick('/personal')}
                 selected={activeItem === '/personal'}
             >
-                <PersonalDashboardIcon />
+                <IconRenderer path='/personal' />
             </DynamicListItem>
 
             <DynamicListItem
@@ -150,15 +145,15 @@ export const PrimaryNavigationList: FC<{
                 onClick={() => onClick('/projects')}
                 selected={activeItem === '/projects'}
             >
-                <ProjectIcon />
+                <IconRenderer path='/projects' />
             </DynamicListItem>
             <DynamicListItem
                 href='/search'
-                text='Search'
+                text={flagsReleaseManagementUI ? 'Flags overview' : 'Search'}
                 onClick={() => onClick('/search')}
                 selected={activeItem === '/search'}
             >
-                <SearchIcon />
+                <IconRenderer path='/search' />
             </DynamicListItem>
             <DynamicListItem
                 href='/playground'
@@ -166,21 +161,18 @@ export const PrimaryNavigationList: FC<{
                 onClick={() => onClick('/playground')}
                 selected={activeItem === '/playground'}
             >
-                <PlaygroundIcon />
+                <IconRenderer path='/playground' />
             </DynamicListItem>
-            <ConditionallyRender
-                condition={!isOss()}
-                show={
+            {!isOss() ? (
                 <DynamicListItem
                     href='/insights'
                     text='Insights'
                     onClick={() => onClick('/insights')}
                     selected={activeItem === '/insights'}
                 >
-                        <InsightsIcon />
+                    <IconRenderer path='/insights' />
                 </DynamicListItem>
-                }
-            />
+            ) : null}
         </List>
     );
 };
@@ -294,7 +286,7 @@ export const AdminSettingsLink: FC<{
                     text='Admin settings'
                     onClick={() => onClick('/admin')}
                 >
-                    <SettingsIcon />
+                    <IconRenderer path='/admin' />
                 </DynamicListItem>
             </List>
         </Box>

frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap

@@ -111,10 +111,21 @@ exports[`returns all baseRoutes 1`] = `
     "menu": {
       "primary": true,
     },
+    "notFlag": "flagsReleaseManagementUI",
     "path": "/search",
     "title": "Search",
     "type": "protected",
   },
+  {
+    "component": [Function],
+    "flag": "flagsReleaseManagementUI",
+    "menu": {
+      "primary": true,
+    },
+    "path": "/search",
+    "title": "Flags overview",
+    "type": "protected",
+  },
   {
     "component": {
       "$$typeof": Symbol(react.lazy),

frontend/src/component/menu/routes.ts

@@ -137,13 +137,22 @@ export const routes: IRoute[] = [
         menu: {},
     },
 
-    // Features
+    // Flags overview
     {
         path: '/search',
         title: 'Search',
         component: FeatureToggleListTable,
         type: 'protected',
         menu: { primary: true },
+        notFlag: 'flagsReleaseManagementUI',
+    },
+    {
+        path: '/search',
+        title: 'Flags overview',
+        component: FeatureToggleListTable,
+        type: 'protected',
+        menu: { primary: true },
+        flag: 'flagsReleaseManagementUI',
     },
 
     // Playground

frontend/src/interfaces/uiConfig.ts

@@ -93,6 +93,7 @@ export type UiFlags = {
     globalChangeRequestConfig?: boolean;
     addEditStrategy?: boolean;
     newStrategyDropdown?: boolean;
+    flagsReleaseManagementUI?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/types/experimental.ts

@@ -67,7 +67,8 @@ export type IFlagKey =
     | 'globalChangeRequestConfig'
     | 'addEditStrategy'
     | 'newStrategyDropdown'
-    | 'flagsOverviewSearch';
+    | 'flagsOverviewSearch'
+    | 'flagsReleaseManagementUI';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -324,6 +325,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_FLAGS_OVERVIEW_SEARCH,
         false,
     ),
+    flagsReleaseManagementUI: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_FLAGS_RELEASE_MANAGEMENT_UI,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {