From 14c8b97441277b22a766063742108b5573b475be Mon Sep 17 00:00:00 2001
From: Christopher Kolstad <chriswk@getunleash.io>
Date: Fri, 28 Mar 2025 14:45:09 +0100
Subject: [PATCH] task: added a hook for cleanly deciding new or old admin menu
 (#9645)

---
 .../layout/MainLayout/AdminMenu/AdminMenu.tsx        | 11 +++--------
 .../src/component/layout/MainLayout/MainLayout.tsx   | 11 ++++-------
 frontend/src/hooks/useNewAdminMenu.ts                | 12 ++++++++++++
 src/server-dev.ts                                    |  2 +-
 4 files changed, 20 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/hooks/useNewAdminMenu.ts

diff --git a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx b/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx
index 36f8755655..b0047d9fa3 100644
--- a/frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx
+++ b/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 (
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 24113aec81..dd0a6eb105 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/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;
 
diff --git a/frontend/src/hooks/useNewAdminMenu.ts b/frontend/src/hooks/useNewAdminMenu.ts
new file mode 100644
index 0000000000..2d741d0fcd
--- /dev/null
+++ b/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)
+    );
+};
diff --git a/src/server-dev.ts b/src/server-dev.ts
index 4736c53204..dbbd6ffeb2 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -57,7 +57,7 @@ process.nextTick(async () => {
                         filterExistingFlagNames: true,
                         teamsIntegrationChangeRequests: true,
                         simplifyDisableFeature: true,
-                        adminNavUI: false,
+                        adminNavUI: true,
                         tagTypeColor: true,
                     },
                 },