chore: remove flag sideMenuCleanup (#10093)

- remove flag - remove unused components - adjust e2e test snapshots
2025-06-27 01:19:00 +02:00 · 2025-06-10 12:23:47 +02:00 · 2025-06-10 12:23:47 +02:00 · 1e7d022b5a
commit 1e7d022b5a
parent ffe40cab59
12 changed files with 39 additions and 282 deletions
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/ConfigurationNavigationList.tsx
+++ b/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={
-                        sideMenuCleanup ? (
-                            <StopRoundedIcon fontSize='small' color='primary' />
-                        ) : (
-                            <IconRenderer path={route.path} />
-                        )
-                    }
-                    secondary={sideMenuCleanup}
+                    icon={<StopRoundedIcon fontSize='small' color='primary' />}
+                    secondary={true}
                />
            ))}
        </List>
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/ListItems.tsx
+++ b/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'>
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/MobileNavigationSidebar.tsx
+++ b/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 />
        </>
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
+++ b/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
-                    href='/insights'
-                    text={sideMenuCleanup ? 'Analytics' : 'Insights'}
-                />
-            ) : null}
-            {sideMenuCleanup ? (
-                <ConfigurationAccordion
-                    mode={mode}
-                    setMode={setMode}
-                    activeItem={activeItem}
-                    onClick={() => onClick('configure')}
-                />
+                <PrimaryListItem href='/insights' text='Analytics' />
            ) : 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>
-    );
-};
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.test.tsx
+++ b/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', {
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/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 }} />

--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/snapshots/NavigationSidebar.test.tsx.snap
+++ b/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",
  },
  {
--- a/frontend/src/component/menu/tests/snapshots/routes.test.tsx.snap
+++ b/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",
--- a/frontend/src/component/menu/routes.ts
+++ b/frontend/src/component/menu/routes.ts
@ -149,16 +149,7 @@ export const routes: IRoute[] = [
        menu: { primary: true },
    },

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

    // Applications
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@ -91,7 +91,6 @@ export type UiFlags = {
    customMetrics?: boolean;
    lifecycleMetrics?: boolean;
    createFlagDialogCache?: boolean;
-    sideMenuCleanup?: boolean;
 };

 export interface IVersionInfo {
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@ -63,8 +63,7 @@ export type IFlagKey =
    | 'newGettingStartedEmail'
    | 'lifecycleMetrics'
    | 'customMetrics'
-    | 'createFlagDialogCache'
-    | 'sideMenuCleanup';
+    | 'createFlagDialogCache';

 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 = {
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@ -56,7 +56,6 @@ process.nextTick(async () => {
                        reportUnknownFlags: true,
                        customMetrics: true,
                        lifecycleMetrics: true,
-                        sideMenuCleanup: true,
                    },
                },
                authentication: {