chore: remove flag sideMenuCleanup (#10093)

- remove flag
- remove unused components
- adjust e2e test snapshots

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

@@ -3,8 +3,6 @@ import type { INavigationMenuItem } from 'interfaces/route';
 import type { NavigationMode } from './NavigationMode.ts';
 import { MenuListItem } from './ListItems.tsx';
 import { List } from '@mui/material';
-import { IconRenderer } from './IconRenderer.tsx';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
 import StopRoundedIcon from '@mui/icons-material/StopRounded';
 import { useShowBadge } from 'component/layout/components/EnterprisePlanBadge/useShowBadge';
 import { EnterprisePlanBadge } from 'component/layout/components/EnterprisePlanBadge/EnterprisePlanBadge';
@@ -16,7 +14,6 @@ export const ConfigurationNavigationList: FC<{
     activeItem?: string;
 }> = ({ routes, mode, onClick, activeItem }) => {
     const showBadge = useShowBadge();
-    const sideMenuCleanup = useUiFlag('sideMenuCleanup');
 
     return (
         <List>
@@ -33,14 +30,8 @@ export const ConfigurationNavigationList: FC<{
                         ) : null
                     }
                     mode={mode}
-                    icon={
+                    icon={<StopRoundedIcon fontSize='small' color='primary' />}
-                        sideMenuCleanup ? (
+                    secondary={true}
-                            <StopRoundedIcon fontSize='small' color='primary' />
-                        ) : (
-                            <IconRenderer path={route.path} />
-                        )
-                    }
-                    secondary={sideMenuCleanup}
                 />
             ))}
         </List>

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

@@ -204,11 +204,13 @@ export const MenuListAccordion: FC<{
                     sx={{ padding: 0 }}
                     expandIcon={mode === 'full' ? <ExpandMoreIcon /> : null}
                 >
+                    {/* biome-ignore lint/a11y/useValidAriaRole: remove button role - accordion already has it */}
                     <ListItemButton
                         dense
                         sx={listItemButtonStyle}
                         selected={active && mode === 'mini'}
                         disableRipple
+                        role={undefined}
                     >
                         {mode === 'mini' ? (
                             <Tooltip title={title} placement='right'>

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

@@ -5,17 +5,11 @@ import {
     OtherLinksList,
 } from './NavigationList.tsx';
 import type { NewInUnleash } from './NewInUnleash/NewInUnleash.tsx';
-import { ConfigurationNavigationList } from './ConfigurationNavigationList.tsx';
-import { useRoutes } from './useRoutes.ts';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 export const MobileNavigationSidebar: FC<{
     onClick: () => void;
     NewInUnleash?: typeof NewInUnleash;
 }> = ({ onClick, NewInUnleash }) => {
-    const { routes } = useRoutes();
-    const sideMenuCleanup = useUiFlag('sideMenuCleanup');
-
     return (
         <>
             {NewInUnleash ? <NewInUnleash /> : null}
@@ -24,13 +18,6 @@ export const MobileNavigationSidebar: FC<{
                 onClick={onClick}
                 setMode={() => {}}
             />
-            {!sideMenuCleanup ? (
-                <ConfigurationNavigationList
-                    routes={routes.mainNavRoutes}
-                    mode='full'
-                    onClick={onClick}
-                />
-            ) : null}
             <AdminSettingsLink mode={'full'} onClick={onClick} />
             <OtherLinksList />
         </>

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

@@ -6,15 +6,11 @@ import {
     MenuListItem,
     SignOutItem,
 } from './ListItems.tsx';
-import { Box, List, Typography } from '@mui/material';
+import { Box, List } from '@mui/material';
 import { IconRenderer } from './IconRenderer.tsx';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import FlagIcon from '@mui/icons-material/OutlinedFlag';
-import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
-import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { useNewAdminMenu } from 'hooks/useNewAdminMenu';
 import { AdminMenuNavigation } from '../AdminMenu/AdminNavigationItems.tsx';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
 import { ConfigurationAccordion } from './ConfigurationAccordion.tsx';
 
 export const OtherLinksList = () => {
@@ -36,50 +32,6 @@ export const OtherLinksList = () => {
     );
 };
 
-/**
- * @deprecated remove with `sideMenuCleanup` flag
- */
-export const RecentProjectsList: FC<{
-    projectId: string;
-    projectName: string;
-    mode: NavigationMode;
-    onClick: () => void;
-}> = ({ projectId, projectName, mode, onClick }) => (
-    <List>
-        <MenuListItem
-            href={`/projects/${projectId}`}
-            text={projectName}
-            onClick={onClick}
-            selected={false}
-            mode={mode}
-            icon={<ProjectIcon />}
-        />
-    </List>
-);
-
-/**
- * @deprecated remove with `sideMenuCleanup` flag
- */
-export const RecentFlagsList: FC<{
-    flags: { featureId: string; projectId: string }[];
-    mode: NavigationMode;
-    onClick: () => void;
-}> = ({ flags, mode, onClick }) => (
-    <List>
-        {flags.map((flag) => (
-            <MenuListItem
-                href={`/projects/${flag.projectId}/features/${flag.featureId}`}
-                text={flag.featureId}
-                onClick={onClick}
-                selected={false}
-                key={flag.featureId}
-                mode={mode}
-                icon={<FlagIcon />}
-            />
-        ))}
-    </List>
-);
-
 export const PrimaryNavigationList: FC<{
     mode: NavigationMode;
     setMode: (mode: NavigationMode) => void;
@@ -101,7 +53,6 @@ export const PrimaryNavigationList: FC<{
     );
 
     const { isOss } = useUiConfig();
-    const sideMenuCleanup = useUiFlag('sideMenuCleanup');
 
     return (
         <List>
@@ -110,19 +61,14 @@ export const PrimaryNavigationList: FC<{
             <PrimaryListItem href='/search' text='Flags overview' />
             <PrimaryListItem href='/playground' text='Playground' />
             {!isOss() ? (
-                <PrimaryListItem
+                <PrimaryListItem href='/insights' text='Analytics' />
-                    href='/insights'
-                    text={sideMenuCleanup ? 'Analytics' : 'Insights'}
-                />
-            ) : null}
-            {sideMenuCleanup ? (
-                <ConfigurationAccordion
-                    mode={mode}
-                    setMode={setMode}
-                    activeItem={activeItem}
-                    onClick={() => onClick('configure')}
-                />
             ) : null}
+            <ConfigurationAccordion
+                mode={mode}
+                setMode={setMode}
+                activeItem={activeItem}
+                onClick={() => onClick('configure')}
+            />
         </List>
     );
 };
@@ -173,55 +119,3 @@ export const AdminSettingsLink: FC<{
         </List>
     </Box>
 );
-
-export const RecentProjectsNavigation: FC<{
-    mode: NavigationMode;
-    projectId: string;
-    onClick: () => void;
-}> = ({ mode, onClick, projectId }) => {
-    const { project, loading } = useProjectOverview(projectId);
-    const projectDeleted = !project.name && !loading;
-
-    if (projectDeleted) return null;
-    return (
-        <Box>
-            {mode === 'full' && (
-                <Typography
-                    sx={{
-                        fontWeight: 'bold',
-                        fontSize: 'small',
-                        ml: 2,
-                        mt: 1.5,
-                    }}
-                >
-                    Recent project
-                </Typography>
-            )}
-            <RecentProjectsList
-                projectId={projectId}
-                projectName={project.name}
-                mode={mode}
-                onClick={onClick}
-            />
-        </Box>
-    );
-};
-
-export const RecentFlagsNavigation: FC<{
-    mode: NavigationMode;
-    flags: { featureId: string; projectId: string }[];
-    onClick: () => void;
-}> = ({ mode, onClick, flags }) => {
-    return (
-        <Box>
-            {mode === 'full' && (
-                <Typography
-                    sx={{ fontWeight: 'bold', fontSize: 'small', ml: 2 }}
-                >
-                    Recent flags
-                </Typography>
-            )}
-            <RecentFlagsList flags={flags} mode={mode} onClick={onClick} />
-        </Box>
-    );
-};

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

@@ -4,12 +4,6 @@ import { screen, fireEvent, waitFor } from '@testing-library/react';
 import { createLocalStorage } from 'utils/createLocalStorage';
 import { Route, Routes } from 'react-router-dom';
 import { listItemButtonClasses as classes } from '@mui/material/ListItemButton';
-import {
-    type LastViewedFlag,
-    useLastViewedFlags,
-} from 'hooks/useLastViewedFlags';
-import { type FC, useEffect } from 'react';
-import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 
 const server = testServerSetup();
@@ -74,39 +68,6 @@ test('select active item', async () => {
     expect(searchLink).toHaveClass(classes.selected);
 });
 
-test('print recent projects and flags', async () => {
-    testServerRoute(server, `/api/admin/projects/projectA/overview`, {
-        name: 'projectNameA',
-    });
-
-    const TestNavigationSidebar: FC<{
-        project?: string;
-        flags?: LastViewedFlag[];
-    }> = ({ project, flags }) => {
-        const { setLastViewed: setProject } = useLastViewedProject();
-        const { setLastViewed: setFlag } = useLastViewedFlags();
-
-        useEffect(() => {
-            setProject(project);
-            flags?.forEach((flag) => {
-                setFlag(flag);
-            });
-        }, []);
-
-        return <NavigationSidebar />;
-    };
-
-    render(
-        <TestNavigationSidebar
-            project={'projectA'}
-            flags={[{ featureId: 'featureA', projectId: 'projectB' }]}
-        />,
-    );
-
-    await screen.findByText('projectNameA');
-    await screen.findByText('featureA');
-});
-
 describe('order of items in navigation', () => {
     const getLinks = async () => {
         const configureButton = await screen.findByRole('button', {

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

@@ -6,15 +6,9 @@ import { useRoutes } from './useRoutes.ts';
 import { useExpanded } from './useExpanded.ts';
 import {
     PrimaryNavigationList,
-    RecentFlagsNavigation,
-    RecentProjectsNavigation,
     AdminSettingsNavigation,
 } from './NavigationList.tsx';
-import { ConfigurationNavigationList } from './ConfigurationNavigationList.tsx';
-import { ConfigurationNavigation } from './ConfigurationNavigation.tsx';
 import { useInitialPathname } from './useInitialPathname.ts';
-import { useLastViewedProject } from 'hooks/useLastViewedProject';
-import { useLastViewedFlags } from 'hooks/useLastViewedFlags';
 import type { NewInUnleash } from './NewInUnleash/NewInUnleash.tsx';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -28,7 +22,6 @@ import { ReactComponent as LogoOnly } from 'assets/img/logoDark.svg';
 import { Link } from 'react-router-dom';
 import { useFlag } from '@unleash/proxy-client-react';
 import { useNewAdminMenu } from 'hooks/useNewAdminMenu';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 export const StretchContainer = styled(Box, {
     shouldForwardProp: (propName) =>
@@ -95,15 +88,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
     const initialPathname = useInitialPathname();
 
     const [activeItem, setActiveItem] = useState(initialPathname);
-    const sideMenuCleanup = useUiFlag('sideMenuCleanup');
-
-    const { lastViewed: lastViewedProject } = useLastViewedProject();
-    const showRecentProject =
-        !sideMenuCleanup && mode === 'full' && lastViewedProject;
-
-    const { lastViewed: lastViewedFlags } = useLastViewedFlags();
-    const showRecentFlags =
-        !sideMenuCleanup && mode === 'full' && lastViewedFlags.length > 0;
 
     useEffect(() => {
         setActiveItem(initialPathname);
@@ -157,23 +141,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
                             onClick={setActiveItem}
                             activeItem={activeItem}
                         />
-                        {!sideMenuCleanup ? (
-                            <ConfigurationNavigation
-                                expanded={expanded.includes('configure')}
-                                onExpandChange={(expand) => {
-                                    changeExpanded('configure', expand);
-                                }}
-                                mode={mode}
-                                title='Configure'
-                            >
-                                <ConfigurationNavigationList
-                                    routes={routes.mainNavRoutes}
-                                    mode={mode}
-                                    onClick={setActiveItem}
-                                    activeItem={activeItem}
-                                />
-                            </ConfigurationNavigation>
-                        ) : null}
 
                         <AdminSettingsNavigation
                             onClick={setActiveItem}
@@ -187,22 +154,6 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
                             routes={routes.adminRoutes}
                         />
 
-                        {showRecentProject && (
-                            <RecentProjectsNavigation
-                                mode={mode}
-                                projectId={lastViewedProject}
-                                onClick={() => setActiveItem('/projects')}
-                            />
-                        )}
-
-                        {showRecentFlags && (
-                            <RecentFlagsNavigation
-                                mode={mode}
-                                flags={lastViewedFlags}
-                                onClick={() => setActiveItem('/projects')}
-                            />
-                        )}
-
                         {/* this will push the show/hide to the bottom on short nav list */}
                         <Box sx={{ flex: 1 }} />
 

frontend/src/component/layout/MainLayout/NavigationSidebar/__snapshots__/NavigationSidebar.test.tsx.snap

@@ -24,38 +24,38 @@ exports[`order of items in navigation > menu for enterprise plan 1`] = `
   },
   {
     "icon": "InsightsIcon",
-    "text": "Insights",
+    "text": "Analytics",
   },
   {
-    "icon": "AppsOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Applications",
   },
   {
-    "icon": "AccountTreeOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Context fields",
   },
   {
-    "icon": "OutlinedFlagIcon",
+    "icon": "StopRoundedIcon",
     "text": "Feature flag types",
   },
   {
-    "icon": "ExtensionOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Strategy types",
   },
   {
-    "icon": "CloudOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Environments",
   },
   {
-    "icon": "LabelImportantOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Tag types",
   },
   {
-    "icon": "IntegrationInstructionsOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Integrations",
   },
   {
-    "icon": "DonutLargeOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Segments",
   },
   {
@@ -88,31 +88,31 @@ exports[`order of items in navigation > menu for open-source 1`] = `
     "text": "Playground",
   },
   {
-    "icon": "AppsOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Applications",
   },
   {
-    "icon": "AccountTreeOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Context fields",
   },
   {
-    "icon": "OutlinedFlagIcon",
+    "icon": "StopRoundedIcon",
     "text": "Feature flag types",
   },
   {
-    "icon": "ExtensionOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Strategy types",
   },
   {
-    "icon": "LabelImportantOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Tag types",
   },
   {
-    "icon": "IntegrationInstructionsOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Integrations",
   },
   {
-    "icon": "DonutLargeOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Segments",
   },
   {
@@ -146,38 +146,38 @@ exports[`order of items in navigation > menu for pro plan 1`] = `
   },
   {
     "icon": "InsightsIcon",
-    "text": "Insights",
+    "text": "Analytics",
   },
   {
-    "icon": "AppsOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Applications",
   },
   {
-    "icon": "AccountTreeOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Context fields",
   },
   {
-    "icon": "OutlinedFlagIcon",
+    "icon": "StopRoundedIcon",
     "text": "Feature flag types",
   },
   {
-    "icon": "ExtensionOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Strategy types",
   },
   {
-    "icon": "CloudOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Environments",
   },
   {
-    "icon": "LabelImportantOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Tag types",
   },
   {
-    "icon": "IntegrationInstructionsOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Integrations",
   },
   {
-    "icon": "DonutLargeOutlinedIcon",
+    "icon": "StopRoundedIcon",
     "text": "Segments",
   },
   {

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

@@ -131,18 +131,6 @@ exports[`returns all baseRoutes 1`] = `
     "menu": {
       "primary": true,
     },
-    "notFlag": "sideMenuCleanup",
-    "path": "/insights",
-    "title": "Insights",
-    "type": "protected",
-  },
-  {
-    "component": [Function],
-    "enterprise": true,
-    "flag": "sideMenuCleanup",
-    "menu": {
-      "primary": true,
-    },
     "path": "/insights",
     "title": "Analytics",
     "type": "protected",

frontend/src/component/menu/routes.ts

@@ -149,16 +149,7 @@ export const routes: IRoute[] = [
         menu: { primary: true },
     },
 
-    // Insights
+    // Analytics
-    {
-        path: '/insights',
-        title: 'Insights',
-        component: Insights,
-        type: 'protected',
-        menu: { primary: true },
-        enterprise: true,
-        notFlag: 'sideMenuCleanup',
-    },
     {
         path: '/insights',
         title: 'Analytics',
@@ -166,7 +157,6 @@ export const routes: IRoute[] = [
         type: 'protected',
         menu: { primary: true },
         enterprise: true,
-        flag: 'sideMenuCleanup',
     },
 
     // Applications

frontend/src/interfaces/uiConfig.ts

@@ -91,7 +91,6 @@ export type UiFlags = {
     customMetrics?: boolean;
     lifecycleMetrics?: boolean;
     createFlagDialogCache?: boolean;
-    sideMenuCleanup?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/types/experimental.ts

@@ -63,8 +63,7 @@ export type IFlagKey =
     | 'newGettingStartedEmail'
     | 'lifecycleMetrics'
     | 'customMetrics'
-    | 'createFlagDialogCache'
+    | 'createFlagDialogCache';
-    | 'sideMenuCleanup';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -297,10 +296,6 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_CREATE_FLAG_DIALOG_CACHE,
         false,
     ),
-    sideMenuCleanup: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_SIDE_MENU_CLEANUP,
-        false,
-    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -56,7 +56,6 @@ process.nextTick(async () => {
                         reportUnknownFlags: true,
                         customMetrics: true,
                         lifecycleMetrics: true,
-                        sideMenuCleanup: true,
                     },
                 },
                 authentication: {