Nested routes for catalogue #1218

cypress/e2e/with_api/app.cy.ts

@@ -17,7 +17,7 @@ describe('App', () => {
     cy.visit('/catalogue');
     cy.wait('@getCatalogueCategoryDataRoot', { timeout: 10000 });
     cy.findByText(
-      'There are no catalogue categories. Please add a category using the plus icon in the top left of your screen'
+      'There are no catalogue categories. Please add a category using the button in the top left of your screen'
     ).should('exist');
   });
 });

cypress/e2e/with_api/catalogueCategories/functions.ts

@@ -27,7 +27,7 @@ const modifyCatalogueCategory = (
       cy.findByLabelText('Catalogue Items').click();
     }
   } else {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
   }
 
   if (values.name !== undefined) {

cypress/e2e/with_mock_data/catalogueCategories.cy.ts

@@ -14,7 +14,7 @@ describe('Catalogue Category', () => {
         name: 'Test ' + index.toString(),
         parent_id: null,
         code: index.toString(),
-        is_leaf: true,
+        is_leaf: false,
         created_time: '2024-01-01T12:00:00.000+00:00',
         modified_time: '2024-01-02T13:10:10.000+00:00',
         properties: [],
@@ -129,7 +129,7 @@ describe('Catalogue Category', () => {
   });
 
   it('display error message when there is no name when adding a catalogue category', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByRole('button', { name: 'Save' }).click();
     cy.findByRole('dialog')
       .should('be.visible')
@@ -149,7 +149,7 @@ describe('Catalogue Category', () => {
   });
 
   it('adds a catalogue category where isLeaf is false', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByLabelText('Name *').type('test');
 
     cy.startSnoopingBrowserMockedRequest();
@@ -240,7 +240,7 @@ describe('Catalogue Category', () => {
   });
 
   it('adds a catalogue category where isLeaf is true', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByLabelText('Name *').type('test');
 
     cy.findByLabelText('Catalogue Items').click();
@@ -296,7 +296,7 @@ describe('Catalogue Category', () => {
   });
 
   it('adds a catalogue category where isLeaf is true with a list of allowed values', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByLabelText('Name *').type('test');
 
     cy.findByLabelText('Catalogue Items').click();
@@ -353,7 +353,7 @@ describe('Catalogue Category', () => {
   });
 
   it('displays the allowed values list error states missing values (Text)', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByLabelText('Name *').type('test');
 
     cy.findByLabelText('Catalogue Items').click();
@@ -383,7 +383,7 @@ describe('Catalogue Category', () => {
   });
 
   it('displays the allowed values list error states duplicate values (Text)', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByLabelText('Name *').type('test');
 
     cy.findByLabelText('Catalogue Items').click();
@@ -415,7 +415,7 @@ describe('Catalogue Category', () => {
   });
 
   it('displays the allowed values list error states and check if the error states are in the correct location (number)', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByLabelText('Name *').type('test');
 
     cy.findByLabelText('Catalogue Items').click();
@@ -445,7 +445,7 @@ describe('Catalogue Category', () => {
   });
 
   it('displays error message when duplicate names for properties are entered', () => {
-    cy.findByRole('button', { name: 'add catalogue category' }).click();
+    cy.findByRole('button', { name: 'Add Catalogue Category' }).click();
     cy.findByLabelText('Name *').type('test');
 
     cy.findByLabelText('Catalogue Items').click();
@@ -816,7 +816,7 @@ describe('Catalogue Category', () => {
   it('category with no data displays no results found', () => {
     cy.visit('/catalogue/16');
     cy.findByText(
-      'There are no catalogue categories. Please add a category using the plus icon in the top left of your screen'
+      'There are no catalogue categories. Please add a category using the button in the top left of your screen'
     ).should('exist');
   });
 
@@ -828,28 +828,21 @@ describe('Catalogue Category', () => {
   });
 
   it('expired url displays search not found message', () => {
-    cy.visit('/catalogue/not-exist');
+    cy.visit('/catalogue/not_exist');
     cy.findByText(
-      'The category you searched for does not exist. Please navigate home by pressing the home button at the top left of your screen.'
+      `The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page.`,
+      { timeout: 10000 }
     ).should('exist');
   });
 
-  it('add button disabled when expired url is used', () => {
-    cy.visit('/catalogue/not-exist');
-
-    cy.findByRole('button', { name: 'add catalogue category' }).should(
-      'be.disabled'
-    );
-  });
-
   it('when root has no data it displays no categories error message', () => {
     cy.editEndpointResponse({
       url: '/v1/catalogue-categories',
       data: [],
       statusCode: 200,
     });
     cy.findByText(
-      'There are no catalogue categories. Please add a category using the plus icon in the top left of your screen'
+      'There are no catalogue categories. Please add a category using the button in the top left of your screen'
     ).should('exist');
   });
 

cypress/e2e/with_mock_data/catalogueItems.cy.ts

@@ -510,17 +510,25 @@ describe('Catalogue Items', () => {
   });
 
   it('displays the expired landing page message and navigates back to the catalogue home', () => {
-    cy.visit('/catalogue/item/1fds');
+    cy.visit('/catalogue/4/items/1fds');
 
     cy.findByText(
-      `This catalogue item doesn't exist. Please click the Home button on the top left of your screen to navigate to the catalogue home.`
+      `The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page.`
     ).should('exist');
 
     cy.findByRole('button', { name: 'navigate to catalogue home' }).click();
 
     cy.findByText('Motion').should('exist');
   });
 
+  it('displays the expired landing page message if the catalogue_category_id does not match the catalogue_item_id ', () => {
+    cy.visit('/catalogue/4/items/89');
+
+    cy.findByText(
+      `The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page.`
+    ).should('exist');
+  });
+
   it('displays error message when user tries to delete a catalogue item that has children elements', () => {
     cy.visit('/catalogue/5');
     cy.findAllByLabelText('Row Actions').eq(1).click();
@@ -739,7 +747,7 @@ describe('Catalogue Items', () => {
 
   it('can load and clear date filters', () => {
     cy.visit(
-      '/catalogue/4?state=N4IgxgYiBcDaoEsAmNwEMAuaA2B7A5gK4CmAkhsQLYB0luSCAZgsUgPoYKXEgA0IANxwkY8EBgCeABx7QQSTD35DsIuQCYADOoAsAWk0BGAwGYAKps3RL1zdUuaAWiAC%2BvUJJmoAzhgBOCAB2%2BHyCwrIgrgC6LjFAA'
+      '/catalogue/4/items?state=N4IgxgYiBcDaoEsAmNwEMAuaA2B7A5gK4CmAkhsQLYB0luSCAZgsUgPoYKXEgA0IANxwkY8EBgCeABx7QQSTD35DsIuQCYADOoAsAWk0BGAwGYAKps3RL1zdUuaAWiAC%2BvUJJmoAzhgBOCAB2%2BHyCwrIgrgC6LjFAA'
     );
 
     cy.findByText('Cameras 25').should('exist');
@@ -890,15 +898,15 @@ describe('Catalogue Items', () => {
 
     cy.findAllByRole('link', { name: 'Click here' }).eq(1).click();
 
-    cy.url().should('contain', 'catalogue/item/6');
+    cy.url().should('contain', 'catalogue/5/items/6');
   });
 
   it('can navigate to an items page from the table view', () => {
     cy.visit('/catalogue/5');
 
     cy.findAllByRole('link', { name: 'Click here' }).eq(0).click();
 
-    cy.url().should('contain', 'catalogue/item/89/items');
+    cy.url().should('contain', 'catalogue/5/items/89/items');
   });
 
   it('can navigate to an items page from the landing page', () => {
@@ -907,7 +915,7 @@ describe('Catalogue Items', () => {
 
     cy.findAllByRole('link', { name: 'Items' }).eq(0).click();
 
-    cy.url().should('contain', 'catalogue/item/89/items');
+    cy.url().should('contain', 'catalogue/5/items/89/items');
   });
 
   it('opens add dialog for categories in directory and has functionality of duplicate', () => {

cypress/e2e/with_mock_data/items.cy.ts

@@ -2,11 +2,39 @@ import { delay, HttpResponse } from 'msw';
 
 describe('Items', () => {
   beforeEach(() => {
-    cy.visit('/catalogue/item/1/items');
+    cy.visit('/catalogue/4/items/1/items');
   });
   afterEach(() => {
     cy.clearMocks();
   });
+
+  it('displays the expired landing page message and navigates back to the catalogue home', () => {
+    cy.visit('/catalogue/4/items/1/items/1fds');
+
+    cy.findByText(
+      `The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page.`
+    ).should('exist');
+
+    cy.findByRole('button', { name: 'navigate to catalogue home' }).click();
+
+    cy.findByText('Motion').should('exist');
+  });
+
+  it('displays the expired landing page message if the catalogue_category_id does not match the catalogue_item_id ', () => {
+    cy.visit('/catalogue/5/items/1/items/KvT2Ox7n');
+
+    cy.findByText(
+      `The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page.`
+    ).should('exist');
+  });
+
+  it('displays the expired landing page message if the catalogue_item_id does not match the item_id ', () => {
+    cy.visit('/catalogue/4/items/89/items/G463gOIA');
+
+    cy.findByText(
+      `The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page.`
+    ).should('exist');
+  });
   it('should be able to navigate back to the catalogue catalogue item table view', () => {
     cy.findByRole('link', { name: 'Cameras' }).click();
     cy.findByText('Cameras 1').should('be.visible');
@@ -21,7 +49,7 @@ describe('Items', () => {
   });
 
   it('should be able to navigate back to the catalogue home step by step', () => {
-    cy.visit('/catalogue/item/1/items/KvT2Ox7n');
+    cy.visit('/catalogue/4/items/1/items/KvT2Ox7n');
 
     cy.findByRole('link', { name: 'Items' }).click();
 
@@ -224,7 +252,7 @@ describe('Items', () => {
   });
 
   it('adds an item with only mandatory fields (allowed list of values)', () => {
-    cy.visit('/catalogue/item/17/items');
+    cy.visit('/catalogue/12/items/17/items');
     cy.findByRole('button', { name: 'Add Item' }).click();
 
     cy.findByLabelText('Usage status *').click();

src/App.tsx

@@ -11,6 +11,7 @@ import { AxiosError } from 'axios';
 import { enGB } from 'date-fns/locale/en-GB';
 import React from 'react';
 import {
+  Outlet,
   RouterProvider,
   createBrowserRouter,
   type RouteObject,
@@ -26,8 +27,14 @@ import {
   retryFailedAuthRequests,
 } from './api/api';
 import { MicroFrontendId } from './app.types';
-import Catalogue from './catalogue/catalogue.component';
+import CatalogueLayout, {
+  CatalogueErrorComponent,
+  CatalogueLayoutErrorComponent,
+  catalogueLayoutLoader,
+} from './catalogue/catalogueLayout.component';
+import CatalogueCardView from './catalogue/category/catalogueCardView.component';
 import CatalogueItemsLandingPage from './catalogue/items/catalogueItemsLandingPage.component';
+import CatalogueItemsPage from './catalogue/items/catalogueItemsPage.component';
 import ConfigProvider from './configProvider.component';
 import handleIMS_APIError from './handleIMS_APIError';
 import { HomePage } from './homePage/homePage.component';
@@ -63,17 +70,19 @@ export const paths = {
   adminUnits: '/admin-ims/units',
   adminUsageStatuses: '/admin-ims/usage-statuses',
   homepage: '/ims',
-  catalogue: '/catalogue/*',
+  catalogue: '/catalogue',
+  catalogueCategories: '/catalogue/:catalogue_category_id',
+  catalogueItems: '/catalogue/:catalogue_category_id/items',
+  catalogueItem: '/catalogue/:catalogue_category_id/items/:catalogue_item_id',
+  items: '/catalogue/:catalogue_category_id/items/:catalogue_item_id/items',
+  item: '/catalogue/:catalogue_category_id/items/:catalogue_item_id/items/:item_id',
   systems: '/systems',
   system: '/systems/:system_id',
   manufacturers: '/manufacturers',
   manufacturer: '/manufacturers/:manufacturer_id',
-  catalogueItem: '/catalogue/item/:catalogue_item_id',
-  items: '/catalogue/item/:catalogue_item_id/items',
-  item: '/catalogue/item/:catalogue_item_id/items/:item_id',
 };
 
-const queryClient = new QueryClient({
+export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error) => {
       handleIMS_APIError(error as AxiosError);
@@ -116,15 +125,75 @@ const routeObject: RouteObject[] = [
           },
         ],
       },
-      { path: paths.catalogue, Component: Catalogue },
       {
-        path: paths.catalogueItem,
-        Component: CatalogueItemsLandingPage,
-      },
-      { path: paths.items, Component: Items },
-      {
-        path: paths.item,
-        Component: ItemsLandingPage,
+        path: paths.catalogue,
+        Component: CatalogueLayout,
+        ErrorBoundary: CatalogueLayoutErrorComponent,
+        children: [
+          {
+            index: true,
+            Component: CatalogueCardView,
+          },
+          {
+            path: paths.catalogueCategories,
+            Component: Outlet,
+            children: [
+              {
+                index: true,
+                Component: CatalogueCardView,
+                loader: catalogueLayoutLoader(queryClient),
+              },
+              {
+                path: paths.catalogueItems,
+                Component: Outlet,
+                children: [
+                  {
+                    index: true,
+                    Component: CatalogueItemsPage,
+                    loader: catalogueLayoutLoader(queryClient),
+                  },
+                  {
+                    path: paths.catalogueItem,
+                    Component: Outlet,
+                    children: [
+                      {
+                        index: true,
+                        Component: CatalogueItemsLandingPage,
+                        loader: catalogueLayoutLoader(queryClient),
+                      },
+                      {
+                        path: paths.items,
+                        Component: Outlet,
+                        children: [
+                          {
+                            index: true,
+                            Component: Items,
+                            loader: catalogueLayoutLoader(queryClient),
+                          },
+                          {
+                            path: paths.item,
+                            Component: Outlet,
+                            children: [
+                              {
+                                index: true,
+                                Component: ItemsLandingPage,
+                                loader: catalogueLayoutLoader(queryClient),
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: '*',
+            Component: CatalogueErrorComponent,
+          },
+        ],
       },
       {
         path: paths.systems,