merge branch 'develop' into use-property-table-for-add-dialog

ral-facilities · Jan 9, 2025 · 5461c50 · 5461c50
2 parents 5ac729b + ae52c7f
commit 5461c50
Show file tree

Hide file tree

Showing 28 changed files with 3,603 additions and 2,933 deletions.
diff --git a/cypress/e2e/with_mock_data/manufacturers.cy.ts b/cypress/e2e/with_mock_data/manufacturers.cy.ts
@@ -379,7 +379,7 @@ describe('Manufacturer', () => {
     cy.visit('/manufacturers/invalid');
 
     cy.findByText(
-      `This manufacturer doesn't exist. Please click the Home button to navigate to the manufacturer table`
+      `The manufacturer route you are trying to access doesn't exist. Please click the Home button to navigate back to the Manufacturer Home page.`
     ).should('exist');
 
     cy.findByRole('button', { name: 'navigate to manufacturers home' }).click();

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,26 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import type { Router } from '@remix-run/router';
 import {
   QueryCache,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
-import React from 'react';
-// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AxiosError } from 'axios';
 import { enGB } from 'date-fns/locale/en-GB';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import AdminPage from './admin/admin.component';
+import React from 'react';
+import {
+  RouterProvider,
+  createBrowserRouter,
+  type RouteObject,
+} from 'react-router-dom';
+import AdminCardView from './admin/adminCardView.component';
+import AdminLayout, {
+  AdminErrorComponent,
+} from './admin/adminLayout.component';
+import Units from './admin/units/units.component';
+import UsageStatuses from './admin/usageStatuses/usageStatuses.component';
 import {
   clearFailedAuthRequestsQueue,
   retryFailedAuthRequests,
@@ -24,8 +34,13 @@ import { HomePage } from './homePage/homePage.component';
 import IMSThemeProvider from './imsThemeProvider.component';
 import Items from './items/items.component';
 import ItemsLandingPage from './items/itemsLandingPage.component';
-import ManufacturerComponent from './manufacturer/manufacturer.component';
 import ManufacturerLandingPage from './manufacturer/manufacturerLandingPage.component';
+import ManufacturerLayout, {
+  ManufacturerErrorComponent,
+  ManufacturerLayoutErrorComponent,
+  manufacturerLayoutLoader,
+} from './manufacturer/manufacturerLayout.component';
+import ManufacturerTable from './manufacturer/manufacturerTable.component';
 import Preloader from './preloader/preloader.component';
 import retryIMS_APIErrors from './retryIMS_APIErrors';
 import {
@@ -39,7 +54,9 @@ import ViewTabs from './view/viewTabs.component';
 export const paths = {
   any: '*',
   root: '/',
-  admin: '/admin-ims/*',
+  admin: '/admin-ims',
+  adminUnits: '/admin-ims/units',
+  adminUsageStatuses: '/admin-ims/usage-statuses',
   homepage: '/ims',
   catalogue: '/catalogue/*',
   systems: '/systems/*',
@@ -69,14 +86,25 @@ const queryClient = new QueryClient({
   },
 });
 
-const router = createBrowserRouter([
+const routeObject: RouteObject[] = [
   {
     Component: Layout,
     children: [
-      { path: paths.any, Component: ViewTabs },
       { path: paths.root, Component: HomePage },
       { path: paths.homepage, Component: HomePage },
-      { path: paths.admin, Component: AdminPage },
+      {
+        path: paths.admin,
+        Component: AdminLayout,
+        children: [
+          { index: true, Component: AdminCardView },
+          { path: paths.adminUnits, Component: Units },
+          { path: paths.adminUsageStatuses, Component: UsageStatuses },
+          {
+            path: '*',
+            Component: AdminErrorComponent,
+          },
+        ],
+      },
       { path: paths.catalogue, Component: Catalogue },
       {
         path: paths.catalogueItem,
@@ -88,16 +116,40 @@ const router = createBrowserRouter([
         Component: ItemsLandingPage,
       },
       { path: paths.systems, Component: Systems },
-      { path: paths.manufacturers, Component: ManufacturerComponent },
       {
-        path: paths.manufacturer,
-        Component: ManufacturerLandingPage,
+        path: paths.manufacturers,
+        Component: ManufacturerLayout,
+        ErrorBoundary: ManufacturerLayoutErrorComponent,
+        children: [
+          { index: true, Component: ManufacturerTable },
+          {
+            path: paths.manufacturer,
+            Component: ManufacturerLandingPage,
+            loader: manufacturerLayoutLoader(queryClient),
+          },
+          {
+            path: '*',
+            Component: ManufacturerErrorComponent,
+          },
+        ],
       },
     ],
   },
-]);
+];
+
+let router: Router;
+const isUsingMSW =
+  import.meta.env.DEV || import.meta.env.VITE_APP_INCLUDE_MSW === 'true';
+
+if (!isUsingMSW) router = createBrowserRouter(routeObject);
+
+// If the application is using MSW (Mock Service Worker),
+// it creates the router using `createBrowserRouter` within the App so it can wait for MSW to load. This is necessary
+// because MSW needs to be running before the router is created to handle requests properly in the loader. In a production
+// environment, this is not needed.
 
 export default function App() {
+  if (isUsingMSW) router = createBrowserRouter(routeObject);
   return <RouterProvider router={router} />;
 }
 
@@ -134,7 +186,7 @@ export function Layout() {
                 }
               >
                 <ViewTabs />
-                {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+                <ReactQueryDevtools initialIsOpen={false} />
               </React.Suspense>
             </QueryClientProvider>
           </ConfigProvider>

diff --git a/src/admin/__snapshots__/adminCardView.component.test.tsx.snap b/src/admin/__snapshots__/adminCardView.component.test.tsx.snap
@@ -0,0 +1,86 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AdminCardView > renders admin card view correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  >
+    <div
+      class="MuiGrid-root MuiGrid-container css-k6wrnl-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 css-le9sc4-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+        >
+          <a
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q760su-MuiButtonBase-root-MuiButton-root"
+            href="/units"
+            tabindex="0"
+          >
+            <div
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-siqlql-MuiPaper-root-MuiCard-root"
+            >
+              <div
+                class="MuiCardContent-root css-lo1d59-MuiCardContent-root"
+              >
+                <div
+                  class="MuiGrid-root css-vj1n65-MuiGrid-root"
+                >
+                  <div
+                    class="MuiGrid-root css-13qkvwv-MuiGrid-root"
+                  >
+                    <p
+                      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+                    >
+                      Units
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </a>
+        </div>
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+        >
+          <a
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q760su-MuiButtonBase-root-MuiButton-root"
+            href="/usage-statuses"
+            tabindex="0"
+          >
+            <div
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-siqlql-MuiPaper-root-MuiCard-root"
+            >
+              <div
+                class="MuiCardContent-root css-lo1d59-MuiCardContent-root"
+              >
+                <div
+                  class="MuiGrid-root css-vj1n65-MuiGrid-root"
+                >
+                  <div
+                    class="MuiGrid-root css-13qkvwv-MuiGrid-root"
+                  >
+                    <p
+                      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+                    >
+                      Usage Statuses
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;