Improve the 404 page to match scigateway #1237

ral-facilities · Jan 9, 2025 · 238366d · 238366d
1 parent 91ceedb
commit 238366d
Show file tree

Hide file tree

Showing 20 changed files with 645 additions and 101 deletions.
diff --git a/cypress/e2e/with_mock_data/admin.cy.ts b/cypress/e2e/with_mock_data/admin.cy.ts
@@ -7,4 +7,14 @@ describe('Admin Page', () => {
     cy.findByText('Units').should('be.visible');
     cy.findByText('Usage Statuses').should('be.visible');
   });
+
+  it('display 404 page for invalid route', () => {
+    cy.visit('/admin-ims/not_exist');
+    cy.findByText(
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
+    ).should('exist');
+
+    cy.findByRole('link', { name: 'admin home page' }).should('exist');
+  });
 });
diff --git a/cypress/e2e/with_mock_data/catalogueCategories.cy.ts b/cypress/e2e/with_mock_data/catalogueCategories.cy.ts
@@ -830,9 +830,11 @@ describe('Catalogue Category', () => {
   it('expired url displays search not found message', () => {
     cy.visit('/catalogue/not_exist');
     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.`,
-      { timeout: 10000 }
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
+
+    cy.findByRole('link', { name: 'catalogue home page' }).should('exist');
   });
 
   it('when root has no data it displays no categories error message', () => {

diff --git a/cypress/e2e/with_mock_data/catalogueItems.cy.ts b/cypress/e2e/with_mock_data/catalogueItems.cy.ts
@@ -513,9 +513,12 @@ describe('Catalogue Items', () => {
     cy.visit('/catalogue/4/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.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
 
+    cy.findByRole('link', { name: 'catalogue home page' }).should('exist');
+
     cy.findByRole('button', { name: 'navigate to catalogue home' }).click();
 
     cy.findByText('Motion').should('exist');
@@ -525,8 +528,11 @@ describe('Catalogue Items', () => {
     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.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
+
+    cy.findByRole('link', { name: 'catalogue home page' }).should('exist');
   });
 
   it('displays error message when user tries to delete a catalogue item that has children elements', () => {

diff --git a/cypress/e2e/with_mock_data/homePage.cy.ts b/cypress/e2e/with_mock_data/homePage.cy.ts
@@ -28,7 +28,10 @@ describe('IMS HomePage', () => {
     cy.visit('/ims/fdsf');
 
     cy.findByText(
-      `The route you are trying to access doesn't exist. Please click the Scigateway logo button in the header to navigate back to the Home page.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
+
+    cy.findByRole('link', { name: 'home page' }).should('exist');
   });
 });
diff --git a/cypress/e2e/with_mock_data/items.cy.ts b/cypress/e2e/with_mock_data/items.cy.ts
@@ -12,9 +12,11 @@ describe('Items', () => {
     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.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
 
+    cy.findByRole('link', { name: 'catalogue home page' }).should('exist');
     cy.findByRole('button', { name: 'navigate to catalogue home' }).click();
 
     cy.findByText('Motion').should('exist');
@@ -24,16 +26,22 @@ describe('Items', () => {
     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.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
+
+    cy.findByRole('link', { name: '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.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
+
+    cy.findByRole('link', { name: '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();

diff --git a/cypress/e2e/with_mock_data/manufacturers.cy.ts b/cypress/e2e/with_mock_data/manufacturers.cy.ts
@@ -379,9 +379,12 @@ describe('Manufacturer', () => {
     cy.visit('/manufacturers/invalid');
 
     cy.findByText(
-      `The manufacturer route you are trying to access doesn't exist. Please click the Home button to navigate back to the Manufacturer Home page.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
 
+    cy.findByRole('link', { name: 'manufacturers home page' }).should('exist');
+
     cy.findByRole('button', { name: 'navigate to manufacturers home' }).click();
 
     cy.findByText('Manufacturer A').should('exist');

diff --git a/cypress/e2e/with_mock_data/systems.cy.ts b/cypress/e2e/with_mock_data/systems.cy.ts
@@ -15,11 +15,12 @@ describe('Systems', () => {
   it('should eventually load displaying system not found when system does not exist', () => {
     cy.visit('/systems/invalid_id');
 
-    // Can take a moment to load due to react-query retries
-    cy.findByText('Invalid System Route', { timeout: 10000 }).should('exist');
     cy.findByText(
-      `The system route you are trying to access doesn't exist. Please click the Home button to navigate back to the System Home page.`
+      `We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the`,
+      { exact: false }
     ).should('exist');
+
+    cy.findByRole('link', { name: 'systems home page' }).should('exist');
   });
 
   it('should be able to navigate through subsystems', () => {

diff --git a/src/admin/__snapshots__/adminLayout.component.test.tsx.snap b/src/admin/__snapshots__/adminLayout.component.test.tsx.snap
@@ -2,19 +2,48 @@
 
 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"
+  <div>
+    <div
+      class="MuiBox-root css-d8r78j"
     >
-      Invalid Admin Route
-    </p>
-    <p
-      class="MuiTypography-root MuiTypography-body1 css-1uwgr7b-MuiTypography-root"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1wffj3i-MuiSvgIcon-root"
+        data-testid="BugReportIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20zm-6 8h-4v-2h4zm0-4h-4v-2h4z"
+        />
+      </svg>
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1fjbu-MuiTypography-root"
+      >
+        404
+      </p>
+    </div>
+    <div
+      class="MuiBox-root css-sg7ujc"
     >
-      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>
+      <h2
+        class="MuiTypography-root MuiTypography-h2 css-18ft2kn-MuiTypography-root"
+      >
+        Page not found
+      </h2>
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-n3u125-MuiTypography-root"
+      >
+        We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the 
+        <a
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-17fxp5y-MuiTypography-root-MuiLink-root"
+          href="/admin-ims"
+        >
+          admin home page
+        </a>
+         .
+      </p>
+    </div>
   </div>
 </DocumentFragment>
 `;

diff --git a/src/admin/adminLayout.component.tsx b/src/admin/adminLayout.component.tsx
@@ -3,15 +3,10 @@ import { Outlet, useLocation } from 'react-router-dom';
 import { BreadcrumbsInfo } from '../api/api.types';
 import { paths } from '../App';
 import BaseLayoutHeader from '../common/baseLayoutHeader.component';
-import ErrorPage from '../common/errorPage.component';
+import PageNotFoundComponent from '../common/pageNotFound/pageNotFound.component';
 
 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."
-    />
-  );
+  return <PageNotFoundComponent homeLocation="Admin" />;
 };
 
 // returns the admin function from the path (null when just on adminPage)
@@ -37,7 +32,9 @@ function AdminLayout() {
 
   const adminBreadCrumbs: BreadcrumbsInfo | undefined = adminPageName
     ? {
-        trail: [adminBreadCrumbsTrails[adminPageName] ?? ['', '']],
+        trail: adminBreadCrumbsTrails[adminPageName]
+          ? [adminBreadCrumbsTrails[adminPageName]]
+          : [],
         full_trail: true,
       }
     : undefined;

diff --git a/src/catalogue/__snapshots__/catalogueLayout.component.test.tsx.snap b/src/catalogue/__snapshots__/catalogueLayout.component.test.tsx.snap
@@ -889,19 +889,48 @@ exports[`Catalogue Layout Error Component > renders catalogue error page correct
         </nav>
       </div>
     </div>
-    <div
-      class="MuiBox-root css-7gabc3"
-    >
-      <p
-        class="MuiTypography-root MuiTypography-body1 css-11gsi37-MuiTypography-root"
+    <div>
+      <div
+        class="MuiBox-root css-d8r78j"
       >
-        Invalid Catalogue Route
-      </p>
-      <p
-        class="MuiTypography-root MuiTypography-body1 css-1uwgr7b-MuiTypography-root"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1wffj3i-MuiSvgIcon-root"
+          data-testid="BugReportIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20zm-6 8h-4v-2h4zm0-4h-4v-2h4z"
+          />
+        </svg>
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-1fjbu-MuiTypography-root"
+        >
+          404
+        </p>
+      </div>
+      <div
+        class="MuiBox-root css-sg7ujc"
       >
-        The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page.
-      </p>
+        <h2
+          class="MuiTypography-root MuiTypography-h2 css-18ft2kn-MuiTypography-root"
+        >
+          Page not found
+        </h2>
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-n3u125-MuiTypography-root"
+        >
+          We're sorry, the page you requested was not found on the server. If you entered the URL manually please check your spelling and try again. Otherwise, return to the 
+          <a
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-17fxp5y-MuiTypography-root-MuiLink-root"
+            href="/catalogue"
+          >
+            catalogue home page
+          </a>
+           .
+        </p>
+      </div>
     </div>
   </div>
 </DocumentFragment>

diff --git a/src/catalogue/catalogueLayout.component.tsx b/src/catalogue/catalogueLayout.component.tsx
@@ -17,13 +17,10 @@ import {
 } from '../api/catalogueItems';
 import { getItemQuery, useGetItem } from '../api/items';
 import BaseLayoutHeader from '../common/baseLayoutHeader.component';
-import ErrorPage from '../common/errorPage.component';
+import PageNotFoundComponent from '../common/pageNotFound/pageNotFound.component';
 
 export const CatalogueErrorComponent = () => (
-  <ErrorPage
-    boldErrorText="Invalid Catalogue Route"
-    errorText="The catalogue route you are trying to access doesn't exist. Please click the Home button to navigate back to the Catalogue Home page."
-  />
+  <PageNotFoundComponent homeLocation="Catalogue" />
 );
 
 export const CatalogueLayoutErrorComponent = () => {