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

…for-system-#1213
ral-facilities · Jan 8, 2025 · 4c35b43 · 4c35b43
2 parents 5339254 + e002b9d
commit 4c35b43
Show file tree

Hide file tree

Showing 31 changed files with 2,400 additions and 2,154 deletions.
diff --git a/.github/workflows/ci-build.yml b/.github/workflows/ci-build.yml
@@ -24,7 +24,6 @@ jobs:
 
       - name: Install dependencies
         run: |
-          sudo apt-get install libgconf-2-4
           yarn --immutable
 
       - name: Run linting
@@ -55,7 +54,6 @@ jobs:
 
       - name: Install dependencies
         run: |
-          sudo apt-get install libgconf-2-4
           yarn --immutable
 
       - name: Run e2e tests
@@ -130,7 +128,6 @@ jobs:
 
       - name: Install dependencies
         run: |
-          sudo apt-get install libgconf-2-4
           yarn --immutable
 
       - name: Run e2e tests

diff --git a/cypress/e2e/with_mock_data/catalogueCategories.cy.ts b/cypress/e2e/with_mock_data/catalogueCategories.cy.ts
@@ -952,11 +952,14 @@ describe('Catalogue Category', () => {
 
     cy.findByText('Add Property').should('have.length', 1);
 
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(100);
     cy.findBrowserMockedRequests({
       method: 'POST',
       url: '/v1/catalogue-categories/:catalogue_category_id/properties',
     }).should(async (patchRequests) => {
       expect(patchRequests.length).equal(1);
+
       const request = patchRequests[0];
       expect(JSON.stringify(await request.json())).equal(
         JSON.stringify({

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
@@ -7,11 +7,18 @@ 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 type { Router } from '@remix-run/router';
 import { AxiosError } from 'axios';
 import { enGB } from 'date-fns/locale/en-GB';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import {
+  RouterProvider,
+  createBrowserRouter,
+  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 {
@@ -29,8 +36,12 @@ import IMSThemeProvider from './imsThemeProvider.component';
 import Items from './items/items.component';
 import ItemsLandingPage from './items/itemsLandingPage.component';
 import ManufacturerLandingPage from './manufacturer/manufacturerLandingPage.component';
-import ManufacturerLayout from './manufacturer/manufacturerLayout.component';
-import ManufacturerTable from './manufacturer/manufacturersTable.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 {
@@ -78,7 +89,7 @@ const queryClient = new QueryClient({
   },
 });
 
-const router = createBrowserRouter([
+const routeObject: RouteObject[] = [
   {
     Component: Layout,
     children: [
@@ -93,12 +104,7 @@ const router = createBrowserRouter([
           { 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,
           },
         ],
       },
@@ -132,25 +138,39 @@ const router = createBrowserRouter([
       {
         path: paths.manufacturers,
         Component: ManufacturerLayout,
+        loader: manufacturerLayoutLoader(queryClient),
+        ErrorBoundary: ManufacturerLayoutErrorComponent,
         children: [
           { index: true, Component: ManufacturerTable },
           { path: paths.manufacturer, Component: ManufacturerLandingPage },
           {
             path: '*',
-            Component: () => (
-              <ErrorPage
-                boldErrorText="Invalid Manufacturer Route"
-                errorText="The manufacturer route you are trying to access doesn't exist. Please click the Home button to navigate back to the Manufacturer Home page."
-              />
-            ),
+            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} />;
+  }
   return <RouterProvider router={router} />;
 }