diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx index f1b9048da6..8a279e1d77 100644 --- a/frontend/src/component/layout/MainLayout/MainLayout.tsx +++ b/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( ({ 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( const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg')); + const showOnlyAdminMenu = + newAdminUIEnabled && location.pathname.indexOf('/admin') === 0; + const showRegularNavigationSideBar = + !isSmallScreen && !showOnlyAdminMenu; return ( @@ -119,7 +127,7 @@ export const MainLayout = forwardRef( })} > ({ 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 ; + } + + return ( + <> + {mode === 'full' && ( + { + onExpandChange(expand); + }} + mode={mode} + title='Admin' + > + + + )} + + {mode === 'mini' && ( + { + onExpandChange(true); + onSetFullMode(); + }} + /> + )} + + ); +}; + +export const AdminSettingsLink: FC<{ + mode: NavigationMode; + onClick: (activeItem: string) => void; +}> = ({ mode, onClick }) => { + const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem; + return ( + + + onClick('/admin')} + > + + + + + ); +}; + export const RecentProjectsNavigation: FC<{ mode: NavigationMode; projectId: string; diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx index c02ff3634e..d508221383 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx +++ b/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} /> - {mode === 'full' && ( - { - changeExpanded('admin', expand); - }} - mode={mode} - title='Admin' - > - - - )} - {mode === 'mini' && ( - { - changeExpanded('admin', true); - setMode('full'); - }} - /> - )} + setMode('full')} + activeItem={activeItem} + onExpandChange={(expand) => { + changeExpanded('admin', expand); + }} + expanded={expanded.includes('admin')} + routes={routes.adminRoutes} + /> {showRecentProject && ( { filterExistingFlagNames: true, teamsIntegrationChangeRequests: true, simplifyDisableFeature: true, - adminNavUI: true, + adminNavUI: false, }, }, authentication: {