Merge branch 'nested-routes-for-admin-page-#1211' into nested-routes-…

…for-system-#1213

src/App.tsx

@@ -11,7 +11,7 @@ import { AxiosError } from 'axios';
 import { enGB } from 'date-fns/locale/en-GB';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import AdminCardView from './admin/adminCardView.component';
-import AdminContainer from './admin/adminContainer.component';
+import AdminLayout from './admin/adminLayout.component';
 import Units from './admin/units/units.component';
 import UsageStatuses from './admin/usageStatuses/usageStatuses.component';
 import {
@@ -28,8 +28,8 @@ import { HomePage } from './homePage/homePage.component';
 import IMSThemeProvider from './imsThemeProvider.component';
 import Items from './items/items.component';
 import ItemsLandingPage from './items/itemsLandingPage.component';
-import ManufacturerContainer from './manufacturer/manufacturerContainer.component';
 import ManufacturerLandingPage from './manufacturer/manufacturerLandingPage.component';
+import ManufacturerLayout from './manufacturer/manufacturerLayout.component';
 import ManufacturerTable from './manufacturer/manufacturersTable.component';
 import Preloader from './preloader/preloader.component';
 import retryIMS_APIErrors from './retryIMS_APIErrors';
@@ -82,10 +82,11 @@ const router = createBrowserRouter([
   {
     Component: Layout,
     children: [
+      { path: paths.root, Component: HomePage },
       { path: paths.homepage, Component: HomePage },
       {
         path: paths.admin,
-        Component: AdminContainer,
+        Component: AdminLayout,
         children: [
           { index: true, Component: AdminCardView },
           { path: paths.adminUnits, Component: Units },
@@ -130,7 +131,7 @@ const router = createBrowserRouter([
       },
       {
         path: paths.manufacturers,
-        Component: ManufacturerContainer,
+        Component: ManufacturerLayout,
         children: [
           { index: true, Component: ManufacturerTable },
           { path: paths.manufacturer, Component: ManufacturerLandingPage },

src/admin/__snapshots__/adminContainer.component.test.tsx.snap → src/admin/__snapshots__/adminLayout.component.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AdminPage > renders admin home page correctly 1`] = `
+exports[`Admin Layout > renders admin layout page correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -56,7 +56,7 @@ exports[`AdminPage > renders admin home page correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`AdminPage > renders units breadcrumbs correctly 1`] = `
+exports[`Admin Layout > renders units breadcrumbs correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
@@ -148,99 +148,7 @@ exports[`AdminPage > renders units breadcrumbs correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`AdminPage > renders units breadcrumbs correctly 2`] = `
-<DocumentFragment>
-  <div
-    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
-  >
-    <div
-      style="display: flex; align-items: center;"
-    >
-      <div
-        class="MuiBox-root css-1n998dz"
-      >
-        <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"
-          >
-            <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-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"
-                >
-                  Usage statuses
-                </p>
-              </li>
-            </ol>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AdminPage > renders usage statuses breadcrumbs correctly 1`] = `
+exports[`Admin Layout > renders usage statuses breadcrumbs correctly 1`] = `
 <DocumentFragment>
   <div
     class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"

src/admin/adminContainer.component.test.tsx → 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 AdminContainer from './adminContainer.component';
+import AdminLayout from './adminLayout.component';
 
 const mockedUseNavigate = vi.fn();
 
@@ -11,21 +11,17 @@ vi.mock('react-router-dom', async () => ({
   useNavigate: () => mockedUseNavigate,
 }));
 
-describe('AdminPage', () => {
+describe('Admin Layout', () => {
   let user: UserEvent;
 
   beforeEach(() => {
     user = userEvent.setup();
   });
   const createView = (path: string, urlPathKey: keyof typeof paths) => {
-    return renderComponentWithRouterProvider(
-      <AdminContainer />,
-      urlPathKey,
-      path
-    );
+    return renderComponentWithRouterProvider(<AdminLayout />, urlPathKey, path);
   };
 
-  it('renders admin home page correctly', async () => {
+  it('renders admin layout page correctly', async () => {
     const view = createView('/admin-ims', 'admin');
 
     await waitFor(() => {

src/admin/adminContainer.component.tsx → src/admin/adminLayout.component.tsx

@@ -35,7 +35,7 @@ const adminBreadCrumbsTrails: { [key: string]: [string, string] } = {
   ['usage-statuses']: ['usage-statuses', 'Usage statuses'],
 };
 
-function AdminContainer() {
+function AdminLayout() {
   const navigateToAdminFunction = useNavigateToAdminFunction();
   const adminPageName = useGetAdminPageName();
 
@@ -68,4 +68,4 @@ function AdminContainer() {
   );
 }
 
-export default AdminContainer;
+export default AdminLayout;

src/manufacturer/manufacturerContainer.component.test.tsx → src/manufacturer/manufacturerLayout.component.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { renderComponentWithRouterProvider } from '../testUtils';
-import ManufacturerContainer from './manufacturerContainer.component';
+import ManufacturerLayout from './manufacturerLayout.component';
 
 const mockedUseNavigate = vi.fn();
 
@@ -10,11 +10,11 @@ vi.mock('react-router-dom', async () => ({
   useNavigate: () => mockedUseNavigate,
 }));
 
-describe('Manufacturer Container', () => {
+describe('Manufacturer Layout', () => {
   let user: UserEvent;
   const createView = (path: string, isLandingPage?: boolean) => {
     return renderComponentWithRouterProvider(
-      <ManufacturerContainer />,
+      <ManufacturerLayout />,
       isLandingPage ? 'manufacturer' : 'manufacturers',
       path
     );

src/manufacturer/manufacturerContainer.component.tsx → src/manufacturer/manufacturerLayout.component.tsx

@@ -6,7 +6,7 @@ import { useGetManufacturer } from '../api/manufacturers';
 import { paths } from '../App';
 import Breadcrumbs from '../view/breadcrumbs.component';
 
-function ManufacturerContainer() {
+function ManufacturerLayout() {
   const { manufacturer_id: manufacturerId } = useParams();
 
   const { data: manufacturerData } = useGetManufacturer(manufacturerId);
@@ -60,4 +60,4 @@ function ManufacturerContainer() {
     </div>
   );
 }
-export default ManufacturerContainer;
+export default ManufacturerLayout;