task: added a hook for cleanly deciding new or old admin menu (#9645)

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

@@ -1,9 +1,8 @@
 import { Grid, styled, Paper, useMediaQuery, useTheme } from '@mui/material';
-import { useUiFlag } from 'hooks/useUiFlag';
 import type { ReactNode } from 'react';
 import { Sticky } from 'component/common/Sticky/Sticky';
 import { AdminMenuNavigation } from './AdminNavigationItems';
-import { useLocation } from 'react-router-dom';
+import { useNewAdminMenu } from '../../../../hooks/useNewAdminMenu';
 
 const breakpointLgMinusPadding = 1250;
 const breakpointLgMinusPaddingAdmin = 1550;
@@ -118,14 +117,10 @@ interface IWrapIfAdminSubpageProps {
 }
 
 export const WrapIfAdminSubpage = ({ children }: IWrapIfAdminSubpageProps) => {
-    const newAdminUIEnabled = useUiFlag('adminNavUI');
+    const showOnlyAdminMenu = useNewAdminMenu();
     const theme = useTheme();
-    const location = useLocation();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
-    const showAdminMenu =
-        !isSmallScreen &&
-        newAdminUIEnabled &&
-        location.pathname.indexOf('/admin') === 0;
+    const showAdminMenu = !isSmallScreen && showOnlyAdminMenu;
 
     if (showAdminMenu) {
         return (

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

@@ -1,6 +1,5 @@
 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';
@@ -18,8 +17,9 @@ 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';
+
 import { WrapIfAdminSubpage } from './AdminMenu/AdminMenu';
+import { useNewAdminMenu } from '../../../hooks/useNewAdminMenu';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -65,18 +65,15 @@ const MainLayoutContentContainer = styled('main')(({ theme }) => ({
 
 export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
     ({ children }, ref) => {
-        const newAdminUIEnabled = useUiFlag('adminNavUI');
+        const showOnlyAdminMenu = useNewAdminMenu();
         const { uiConfig } = useUiConfig();
-        const location = useLocation();
         const projectId = useOptionalPathParam('projectId');
         const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
             projectId || '',
         );
-
         const theme = useTheme();
         const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
-        const showOnlyAdminMenu =
-            newAdminUIEnabled && location.pathname.indexOf('/admin') === 0;
+
         const showRegularNavigationSideBar =
             !isSmallScreen && !showOnlyAdminMenu;
 

frontend/src/hooks/useNewAdminMenu.ts

@@ -0,0 +1,12 @@
+import { useUiFlag } from './useUiFlag';
+import { useLocation } from 'react-router';
+
+export const useNewAdminMenu = () => {
+    const newAdminUIEnabled = useUiFlag('adminNavUI');
+    const location = useLocation();
+    return (
+        newAdminUIEnabled &&
+        (location.pathname.indexOf('/admin') === 0 ||
+            location.pathname.indexOf('/history') === 0)
+    );
+};

src/server-dev.ts

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