feat: rework navigation sidebar admin section (#9556)

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

@@ -1,5 +1,6 @@
 import { forwardRef, type ReactNode } from 'react';
 import { Box, Grid, styled, useMediaQuery, useTheme } from '@mui/material';
+import { useLocation } from 'react-router-dom';
 import Header from 'component/menu/Header/Header';
 import Footer from 'component/menu/Footer/Footer';
 import Proclamation from 'component/common/Proclamation/Proclamation';
@@ -17,6 +18,7 @@ import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
 import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
 import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -90,7 +92,9 @@ const MainLayoutContentContainer = styled('main')(({ theme }) => ({
 
 export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
     ({ children }, ref) => {
+        const newAdminUIEnabled = useUiFlag('adminNavUI');
         const { uiConfig } = useUiConfig();
+        const location = useLocation();
         const projectId = useOptionalPathParam('projectId');
         const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
             projectId || '',
@@ -98,6 +102,10 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
 
         const theme = useTheme();
         const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
+        const showOnlyAdminMenu =
+            newAdminUIEnabled && location.pathname.indexOf('/admin') === 0;
+        const showRegularNavigationSideBar =
+            !isSmallScreen && !showOnlyAdminMenu;
 
         return (
             <EventTimelineProvider>
@@ -119,7 +127,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                             })}
                         >
                             <ConditionallyRender
-                                condition={!isSmallScreen}
+                                condition={showRegularNavigationSideBar}
                                 show={
                                     <NavigationSidebar
                                         NewInUnleash={NewInUnleash}

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

@@ -2,6 +2,7 @@ import type React from 'react';
 import { type FC, useCallback } from 'react';
 import type { INavigationMenuItem } from 'interfaces/route';
 import type { NavigationMode } from './NavigationMode';
+import { ShowAdmin } from './ShowHide';
 import {
     ExternalFullListItem,
     FullListItem,
@@ -9,6 +10,7 @@ import {
     SignOutItem,
 } from './ListItems';
 import { Box, List, styled, Tooltip, Typography } from '@mui/material';
+import { useUiFlag } from 'hooks/useUiFlag';
 import { IconRenderer } from './IconRenderer';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -22,8 +24,9 @@ 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 useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
+import SettingsIcon from '@mui/icons-material/Settings';
+import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 
 const StyledBadgeContainer = styled('div')(({ theme }) => ({
     paddingLeft: theme.spacing(2),
@@ -251,6 +254,81 @@ export const SecondaryNavigation: FC<{
     );
 };
 
+export const AdminSettingsNavigation: FC<{
+    onClick: (activeItem: string) => void;
+    onSetFullMode: () => void;
+    expanded: boolean;
+    routes: INavigationMenuItem[];
+    onExpandChange: (expanded: boolean) => void;
+    activeItem: string;
+    mode: NavigationMode;
+}> = ({
+    onClick,
+    onSetFullMode,
+    expanded,
+    routes,
+    onExpandChange,
+    activeItem,
+    mode,
+}) => {
+    const newAdminUIEnabled = useUiFlag('adminNavUI');
+
+    if (newAdminUIEnabled) {
+        return <AdminSettingsLink mode={mode} onClick={onClick} />;
+    }
+
+    return (
+        <>
+            {mode === 'full' && (
+                <SecondaryNavigation
+                    expanded={expanded}
+                    onExpandChange={(expand) => {
+                        onExpandChange(expand);
+                    }}
+                    mode={mode}
+                    title='Admin'
+                >
+                    <SecondaryNavigationList
+                        routes={routes}
+                        mode={mode}
+                        onClick={onClick}
+                        activeItem={activeItem}
+                    />
+                </SecondaryNavigation>
+            )}
+
+            {mode === 'mini' && (
+                <ShowAdmin
+                    onChange={() => {
+                        onExpandChange(true);
+                        onSetFullMode();
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+export const AdminSettingsLink: FC<{
+    mode: NavigationMode;
+    onClick: (activeItem: string) => void;
+}> = ({ mode, onClick }) => {
+    const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem;
+    return (
+        <Box>
+            <List>
+                <DynamicListItem
+                    href='/admin'
+                    text='Admin settings'
+                    onClick={() => onClick('/admin')}
+                >
+                    <SettingsIcon />
+                </DynamicListItem>
+            </List>
+        </Box>
+    );
+};
+
 export const RecentProjectsNavigation: FC<{
     mode: NavigationMode;
     projectId: string;

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

@@ -1,7 +1,7 @@
 import { Box, styled } from '@mui/material';
 import { type FC, useState, useEffect } from 'react';
 import { useNavigationMode } from './useNavigationMode';
-import { ShowAdmin, ShowHide } from './ShowHide';
+import { ShowHide } from './ShowHide';
 import { useRoutes } from './useRoutes';
 import { useExpanded } from './useExpanded';
 import {
@@ -11,7 +11,9 @@ import {
     RecentProjectsNavigation,
     SecondaryNavigation,
     SecondaryNavigationList,
+    AdminSettingsNavigation,
 } from './NavigationList';
+import { FullListItem, MiniListItem } from './ListItems';
 import { useInitialPathname } from './useInitialPathname';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { useLastViewedFlags } from 'hooks/useLastViewedFlags';
@@ -115,6 +117,7 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
 
     const { lastViewed: lastViewedFlags } = useLastViewedFlags();
     const showRecentFlags = mode === 'full' && lastViewedFlags.length > 0;
+    const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem;
 
     useEffect(() => {
         setActiveItem(initialPathname);
@@ -178,32 +181,18 @@ export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
                     activeItem={activeItem}
                 />
             </SecondaryNavigation>
-            {mode === 'full' && (
-                <SecondaryNavigation
-                    expanded={expanded.includes('admin')}
-                    onExpandChange={(expand) => {
-                        changeExpanded('admin', expand);
-                    }}
-                    mode={mode}
-                    title='Admin'
-                >
-                    <SecondaryNavigationList
-                        routes={routes.adminRoutes}
-                        mode={mode}
-                        onClick={setActiveItem}
-                        activeItem={activeItem}
-                    />
-                </SecondaryNavigation>
-            )}
 
-            {mode === 'mini' && (
+            <AdminSettingsNavigation
-                <ShowAdmin
+                onClick={setActiveItem}
-                    onChange={() => {
+                mode={mode}
-                        changeExpanded('admin', true);
+                onSetFullMode={() => setMode('full')}
-                        setMode('full');
+                activeItem={activeItem}
-                    }}
+                onExpandChange={(expand) => {
-                />
+                    changeExpanded('admin', expand);
-            )}
+                }}
+                expanded={expanded.includes('admin')}
+                routes={routes.adminRoutes}
+            />
 
             {showRecentProject && (
                 <RecentProjectsNavigation

src/server-dev.ts

@@ -58,7 +58,7 @@ process.nextTick(async () => {
                         filterExistingFlagNames: true,
                         teamsIntegrationChangeRequests: true,
                         simplifyDisableFeature: true,
-                        adminNavUI: true,
+                        adminNavUI: false,
                     },
                 },
                 authentication: {