From e002b9d473b94bd78a0db14c154996f298487046 Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Wed, 8 Jan 2025 11:12:51 +0000
Subject: [PATCH] Use BaseLayout headers in AdminLayout

- Updated `src/App.tsx` to integrate BaseLayout headers.
- Modified `src/admin/adminLayout.component.tsx` to use BaseLayout headers.
- Updated tests and snapshots to reflect the changes.
---
 src/App.tsx                                   |  12 +-
 .../adminLayout.component.test.tsx.snap       | 341 +++++++++---------
 src/admin/adminLayout.component.test.tsx      |  18 +-
 src/admin/adminLayout.component.tsx           |  40 +-
 4 files changed, 206 insertions(+), 205 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c2b26452a..daf992419 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,7 +16,9 @@ import {
   type RouteObject,
 } from 'react-router-dom';
 import AdminCardView from './admin/adminCardView.component';
-import AdminLayout from './admin/adminLayout.component';
+import AdminLayout, {
+  AdminErrorComponent,
+} from './admin/adminLayout.component';
 import Units from './admin/units/units.component';
 import UsageStatuses from './admin/usageStatuses/usageStatuses.component';
 import {
@@ -26,7 +28,6 @@ import {
 import { MicroFrontendId } from './app.types';
 import Catalogue from './catalogue/catalogue.component';
 import CatalogueItemsLandingPage from './catalogue/items/catalogueItemsLandingPage.component';
-import ErrorPage from './common/errorPage.component';
 import ConfigProvider from './configProvider.component';
 import handleIMS_APIError from './handleIMS_APIError';
 import { HomePage } from './homePage/homePage.component';
@@ -100,12 +101,7 @@ const routeObject: RouteObject[] = [
           { path: paths.adminUsageStatuses, Component: UsageStatuses },
           {
             path: '*',
-            Component: () => (
-              <ErrorPage
-                boldErrorText="Invalid Admin Route"
-                errorText="The admin route you are trying to access doesn't exist. Please click the Home button to navigate back to the Admin Home page."
-              />
-            ),
+            Component: AdminErrorComponent,
           },
         ],
       },
diff --git a/src/admin/__snapshots__/adminLayout.component.test.tsx.snap b/src/admin/__snapshots__/adminLayout.component.test.tsx.snap
index 5d4810b1e..d72044ac0 100644
--- a/src/admin/__snapshots__/adminLayout.component.test.tsx.snap
+++ b/src/admin/__snapshots__/adminLayout.component.test.tsx.snap
@@ -1,55 +1,70 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Admin Error Component > renders Admin error page correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiBox-root css-7gabc3"
+  >
+    <p
+      class="MuiTypography-root MuiTypography-body1 css-11gsi37-MuiTypography-root"
+    >
+      Invalid Admin Route
+    </p>
+    <p
+      class="MuiTypography-root MuiTypography-body1 css-1uwgr7b-MuiTypography-root"
+    >
+      The admin route you are trying to access doesn't exist. Please click the Home button to navigate back to the Admin Home page.
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Admin Layout > renders admin layout page correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+    class="MuiBox-root css-v2kfba"
   >
     <div
-      style="display: flex; align-items: center;"
+      class="MuiGrid-root MuiGrid-container css-1r501zp-MuiGrid-root"
     >
       <div
-        class="MuiBox-root css-1n998dz"
+        class="MuiBox-root css-70qvj9"
       >
-        <div
-          class="MuiBox-root css-70qvj9"
+        <span
+          aria-label="Admin Home"
+          class=""
+          data-mui-internal-clone-element="true"
         >
-          <span
-            aria-label="Admin Home"
-            class=""
-            data-mui-internal-clone-element="true"
+          <button
+            aria-label="navigate to admin home"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+            tabindex="0"
+            type="button"
           >
-            <button
-              aria-label="navigate to admin home"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
-              tabindex="0"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="HomeIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                data-testid="HomeIcon"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-                />
-              </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+              <path
+                d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
               />
-            </button>
-          </span>
-          <nav
-            aria-label="breadcrumb"
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1mc59t7-MuiTypography-root-MuiBreadcrumbs-root"
-          >
-            <ol
-              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            </svg>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
-          </nav>
-        </div>
+          </button>
+        </span>
+        <nav
+          aria-label="breadcrumb"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1mc59t7-MuiTypography-root-MuiBreadcrumbs-root"
+        >
+          <ol
+            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+          />
+        </nav>
       </div>
     </div>
   </div>
@@ -59,89 +74,85 @@ exports[`Admin Layout > renders admin layout page correctly 1`] = `
 exports[`Admin Layout > renders units breadcrumbs correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+    class="MuiBox-root css-v2kfba"
   >
     <div
-      style="display: flex; align-items: center;"
+      class="MuiGrid-root MuiGrid-container css-1r501zp-MuiGrid-root"
     >
       <div
-        class="MuiBox-root css-1n998dz"
+        class="MuiBox-root css-70qvj9"
       >
-        <div
-          class="MuiBox-root css-70qvj9"
+        <span
+          aria-label="Admin Home"
+          class=""
+          data-mui-internal-clone-element="true"
         >
-          <span
-            aria-label="Admin Home"
-            class=""
-            data-mui-internal-clone-element="true"
+          <button
+            aria-label="navigate to admin home"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+            tabindex="0"
+            type="button"
           >
-            <button
-              aria-label="navigate to admin home"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
-              tabindex="0"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="HomeIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+              />
+            </svg>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
+        </span>
+        <nav
+          aria-label="breadcrumb"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1mc59t7-MuiTypography-root-MuiBreadcrumbs-root"
+        >
+          <ol
+            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+          >
+            <li
+              class="MuiBreadcrumbs-li"
+            >
+              <div
+                class="MuiBox-root css-8zy5qf"
+              />
+            </li>
+            <li
+              aria-hidden="true"
+              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                data-testid="HomeIcon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                data-testid="NavigateNextIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <path
-                  d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+                  d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
-          </span>
-          <nav
-            aria-label="breadcrumb"
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1mc59t7-MuiTypography-root-MuiBreadcrumbs-root"
-          >
-            <ol
-              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            </li>
+            <li
+              class="MuiBreadcrumbs-li"
             >
-              <li
-                class="MuiBreadcrumbs-li"
+              <p
+                aria-label="Units"
+                class="MuiTypography-root MuiTypography-body1 css-1qs6ojv-MuiTypography-root"
+                data-mui-internal-clone-element="true"
+                role="tooltip"
               >
-                <div
-                  class="MuiBox-root css-8zy5qf"
-                />
-              </li>
-              <li
-                aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                  data-testid="NavigateNextIcon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                  />
-                </svg>
-              </li>
-              <li
-                class="MuiBreadcrumbs-li"
-              >
-                <p
-                  aria-label="Units"
-                  class="MuiTypography-root MuiTypography-body1 css-1qs6ojv-MuiTypography-root"
-                  data-mui-internal-clone-element="true"
-                  role="tooltip"
-                >
-                  Units
-                </p>
-              </li>
-            </ol>
-          </nav>
-        </div>
+                Units
+              </p>
+            </li>
+          </ol>
+        </nav>
       </div>
     </div>
   </div>
@@ -151,89 +162,85 @@ exports[`Admin Layout > renders units breadcrumbs correctly 1`] = `
 exports[`Admin Layout > renders usage statuses breadcrumbs correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+    class="MuiBox-root css-v2kfba"
   >
     <div
-      style="display: flex; align-items: center;"
+      class="MuiGrid-root MuiGrid-container css-1r501zp-MuiGrid-root"
     >
       <div
-        class="MuiBox-root css-1n998dz"
+        class="MuiBox-root css-70qvj9"
       >
-        <div
-          class="MuiBox-root css-70qvj9"
+        <span
+          aria-label="Admin Home"
+          class=""
+          data-mui-internal-clone-element="true"
+        >
+          <button
+            aria-label="navigate to admin home"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="HomeIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+              />
+            </svg>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
+        </span>
+        <nav
+          aria-label="breadcrumb"
+          class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1mc59t7-MuiTypography-root-MuiBreadcrumbs-root"
         >
-          <span
-            aria-label="Admin Home"
-            class=""
-            data-mui-internal-clone-element="true"
+          <ol
+            class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
           >
-            <button
-              aria-label="navigate to admin home"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
-              tabindex="0"
-              type="button"
+            <li
+              class="MuiBreadcrumbs-li"
+            >
+              <div
+                class="MuiBox-root css-8zy5qf"
+              />
+            </li>
+            <li
+              aria-hidden="true"
+              class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                data-testid="HomeIcon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                data-testid="NavigateNextIcon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <path
-                  d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+                  d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                 />
               </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
-          </span>
-          <nav
-            aria-label="breadcrumb"
-            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1mc59t7-MuiTypography-root-MuiBreadcrumbs-root"
-          >
-            <ol
-              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+            </li>
+            <li
+              class="MuiBreadcrumbs-li"
             >
-              <li
-                class="MuiBreadcrumbs-li"
-              >
-                <div
-                  class="MuiBox-root css-8zy5qf"
-                />
-              </li>
-              <li
-                aria-hidden="true"
-                class="MuiBreadcrumbs-separator css-1wuw8dw-MuiBreadcrumbs-separator"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                  data-testid="NavigateNextIcon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                  />
-                </svg>
-              </li>
-              <li
-                class="MuiBreadcrumbs-li"
+              <p
+                aria-label="Usage statuses"
+                class="MuiTypography-root MuiTypography-body1 css-1qs6ojv-MuiTypography-root"
+                data-mui-internal-clone-element="true"
+                role="tooltip"
               >
-                <p
-                  aria-label="Usage statuses"
-                  class="MuiTypography-root MuiTypography-body1 css-1qs6ojv-MuiTypography-root"
-                  data-mui-internal-clone-element="true"
-                  role="tooltip"
-                >
-                  Usage statuses
-                </p>
-              </li>
-            </ol>
-          </nav>
-        </div>
+                Usage statuses
+              </p>
+            </li>
+          </ol>
+        </nav>
       </div>
     </div>
   </div>
diff --git a/src/admin/adminLayout.component.test.tsx b/src/admin/adminLayout.component.test.tsx
index d7a20c08e..08f0dcb02 100644
--- a/src/admin/adminLayout.component.test.tsx
+++ b/src/admin/adminLayout.component.test.tsx
@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { paths } from '../App';
 import { renderComponentWithRouterProvider } from '../testUtils';
-import AdminLayout from './adminLayout.component';
+import AdminLayout, { AdminErrorComponent } from './adminLayout.component';
 
 const mockedUseNavigate = vi.fn();
 
@@ -72,3 +72,19 @@ describe('Admin Layout', () => {
     expect(mockedUseNavigate).toHaveBeenCalledWith('/admin-ims');
   });
 });
+
+describe('Admin Error Component', () => {
+  const createView = () => {
+    return renderComponentWithRouterProvider(<AdminErrorComponent />);
+  };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders Admin error page correctly', async () => {
+    const view = createView();
+
+    expect(view.asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/src/admin/adminLayout.component.tsx b/src/admin/adminLayout.component.tsx
index 202b801a2..7cff8a570 100644
--- a/src/admin/adminLayout.component.tsx
+++ b/src/admin/adminLayout.component.tsx
@@ -1,17 +1,15 @@
-import { Box, Grid } from '@mui/material';
 import React from 'react';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { BreadcrumbsInfo } from '../api/api.types';
-import Breadcrumbs from '../view/breadcrumbs.component';
+import BaseLayoutHeader from '../common/baseLayoutHeader.component';
+import ErrorPage from '../common/errorPage.component';
 
-export const useNavigateToAdminFunction = () => {
-  const navigate = useNavigate();
-
-  return React.useCallback(
-    (newPath: string | null) => {
-      navigate(`/admin-ims${newPath ? `/${newPath}` : ''}`);
-    },
-    [navigate]
+export const AdminErrorComponent = () => {
+  return (
+    <ErrorPage
+      boldErrorText="Invalid Admin Route"
+      errorText="The admin route you are trying to access doesn't exist. Please click the Home button to navigate back to the Admin Home page."
+    />
   );
 };
 
@@ -36,7 +34,6 @@ const adminBreadCrumbsTrails: { [key: string]: [string, string] } = {
 };
 
 function AdminLayout() {
-  const navigateToAdminFunction = useNavigateToAdminFunction();
   const adminPageName = useGetAdminPageName();
 
   const adminBreadCrumbs: BreadcrumbsInfo | undefined = adminPageName
@@ -47,24 +44,9 @@ function AdminLayout() {
     : undefined;
 
   return (
-    <Grid container>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <Box
-          sx={{
-            py: '20px',
-            paddingLeft: '4px',
-          }}
-        >
-          <Breadcrumbs
-            onChangeNode={navigateToAdminFunction}
-            breadcrumbsInfo={adminBreadCrumbs}
-            onChangeNavigateHome={() => navigateToAdminFunction(null)}
-            homeLocation="Admin"
-          />
-        </Box>
-      </div>
+    <BaseLayoutHeader homeLocation="Admin" breadcrumbsInfo={adminBreadCrumbs}>
       <Outlet />
-    </Grid>
+    </BaseLayoutHeader>
   );
 }