Minor tweaks

- Upgrade to use react router 7 - remove password from the mock data - add pageNotFound
ral-facilities · Jan 13, 2025 · ebe97d0 · ebe97d0
1 parent cbcf0a2
commit ebe97d0
Show file tree

Hide file tree

Showing 9 changed files with 217 additions and 45 deletions.
diff --git a/cypress/e2e/users.cy.ts b/cypress/e2e/users.cy.ts
@@ -5,4 +5,15 @@ describe('Users', () => {
     cy.findAllByText('FedID').should('have.length', 5);
     cy.findAllByText('/users POST').should('have.length', 3);
   });
+
+  it('should load 404 page correctly', () => {
+    cy.visit('/admin/invalid');
+
+    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: 'home page' }).should('exist');
+  });
 });
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "react-colorful": "5.6.1",
     "react-dom": "18.3.1",
     "react-redux": "9.1.2",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "7.1.1",
     "single-spa-react": "6.0.2",
     "typescript": "5.6.2",
     "vite": "^5.4.6"

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,11 +6,12 @@ import {
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { connect, Provider } from 'react-redux';
-import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router';
 import UsersTable from './admin/users/usersTable.component';
 import './App.css';
 import { MicroFrontendId } from './app.types';
 import OGThemeProvider from './ogThemeProvider.component';
+import PageNotFoundComponent from './pageNotFound/pageNotFound.component';
 import Preloader from './preloader/preloader.component';
 import SettingsMenuItems from './settingsMenuItems.component';
 import { requestPluginRerender } from './state/scigateway.actions';
@@ -22,6 +23,7 @@ import { WindowContextProvider } from './windows/windowContext';
 
 export const paths = {
   any: '*',
+  admin: '/admin',
   adminUsers: '/admin/users',
 };
 
@@ -109,7 +111,18 @@ const router = createBrowserRouter(
       Component: Layout,
       children: [
         { path: paths.any, Component: ViewTabs },
-        { path: paths.adminUsers, Component: UsersTable },
+        {
+          path: paths.admin,
+          Component: Outlet,
+          ErrorBoundary: PageNotFoundComponent,
+          children: [
+            { path: paths.adminUsers, Component: UsersTable },
+            {
+              path: '*',
+              Component: PageNotFoundComponent,
+            },
+          ],
+        },
       ],
     },
   ],
@@ -124,12 +137,5 @@ const router = createBrowserRouter(
   }
 );
 export default function App() {
-  return (
-    <RouterProvider
-      future={{
-        v7_startTransition: true,
-      }}
-      router={router}
-    />
-  );
+  return <RouterProvider router={router} />;
 }
diff --git a/src/app.types.tsx b/src/app.types.tsx
@@ -314,7 +314,6 @@ export interface APIError {
 
 export interface User {
   _id: string; // Maps the `username` field in Python, which has an alias "_id"
-  sha256_password?: string | null;
   auth_type: string;
   authorised_routes?: string[] | null;
 }
diff --git a/src/mocks/users.json b/src/mocks/users.json
@@ -1,53 +1,44 @@
 [
   {
     "_id": "user1",
-    "sha256_password": "2d8d693177ac44895fc02c009ec3f6af32e51eb00783c17000d7051d1662b93a",
     "auth_type": "local",
     "authorised_routes": ["/submit/hdf POST", "/submit/manifest POST"]
   },
   {
     "_id": "user2",
-    "sha256_password": "84fddf351d19ac7b514b63f9ab5945b2381a617bbf7f47043d4515b760792cd9",
     "auth_type": "FedID",
     "authorised_routes": ["/records/{id_} DELETE", "/experiments POST"]
   },
   {
     "_id": "user3",
-    "sha256_password": null,
     "auth_type": "local",
     "authorised_routes": ["/users POST", "/users PATCH"]
   },
   {
     "_id": "user4",
-    "sha256_password": null,
     "auth_type": "FedID",
     "authorised_routes": ["/users/{id_} DELETE"]
   },
   {
     "_id": "user5",
-    "sha256_password": "45ac76b48c434ea38f7f2b5145e0b9e21b795b029fc1f7cd7eb66c18be8d6c3a",
     "auth_type": "local",
     "authorised_routes": null
   },
   {
     "_id": "user6",
-    "sha256_password": null,
     "auth_type": "FedID",
     "authorised_routes": null
   },
   {
     "_id": "user7",
-    "sha256_password": null,
     "auth_type": "local"
   },
   {
     "_id": "user8",
-    "sha256_password": null,
     "auth_type": "FedID"
   },
   {
     "_id": "user9",
-    "sha256_password": null,
     "auth_type": "local",
     "authorised_routes": [
       "/submit/hdf POST",
@@ -61,13 +52,11 @@
   },
   {
     "_id": "user10",
-    "sha256_password": "2f3d6931abcf4795fc02c0abdc3f7af32e51eb03723c17abc7051e1662b93a",
     "auth_type": "FedID",
     "authorised_routes": []
   },
   {
     "_id": "user11",
-    "sha256_password": "3d8d693277aecc44855fc02c109ec3e2d5d64eb00763c17458d7551d1763b83b",
     "auth_type": "local",
     "authorised_routes": ["/users POST", "/users PATCH"]
   }

diff --git a/src/pageNotFound/__snapshots__/pageNotFound.component.test.tsx.snap b/src/pageNotFound/__snapshots__/pageNotFound.component.test.tsx.snap
@@ -0,0 +1,54 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Page Not Found Component > renders the basic 404 page 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        class="MuiBox-root css-d8r78j"
+      >
+        <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"
+      >
+        <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"
+            data-discover="true"
+            href="/"
+          >
+            home page
+          </a>
+           
+          .
+        </p>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/pageNotFound/pageNotFound.component.test.tsx b/src/pageNotFound/pageNotFound.component.test.tsx
@@ -0,0 +1,21 @@
+import { act } from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import { renderComponentWithProviders } from '../testUtils';
+import PageNotFoundComponent from './pageNotFound.component';
+
+describe('Page Not Found Component', () => {
+  const createView = () => {
+    const router = createBrowserRouter([
+      { path: '*', Component: PageNotFoundComponent },
+    ]);
+    return renderComponentWithProviders(<RouterProvider router={router} />);
+  };
+
+  it('renders the basic 404 page', async () => {
+    let baseElement;
+    await act(async () => {
+      baseElement = createView().baseElement;
+    });
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/src/pageNotFound/pageNotFound.component.tsx b/src/pageNotFound/pageNotFound.component.tsx
@@ -0,0 +1,72 @@
+import BugReportIcon from '@mui/icons-material/BugReport';
+import { Box, Link as MuiLink, Theme } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { Link } from 'react-router';
+
+const PageNotFoundComponent = () => {
+  return (
+    <div>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'background.default',
+        }}
+      >
+        <BugReportIcon
+          sx={{
+            width: '10vw',
+            height: '10vw',
+            color: (theme: Theme) => theme.colours?.blue,
+          }}
+        />
+        <Typography
+          sx={{
+            fontWeight: 'bold',
+            fontSize: '10vw',
+            color: (theme: Theme) => theme.colours?.blue,
+          }}
+        >
+          404
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'background.default',
+        }}
+      >
+        <Typography variant="h2" sx={{ color: 'text.primary' }}>
+          Page not found
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{
+            padding: '15px',
+            maxWidth: '600px',
+            textAlign: 'center',
+            color: 'text.secondary',
+          }}
+        >
+          We&#39;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{' '}
+          <MuiLink
+            component={Link}
+            sx={{ color: (theme: Theme) => theme.palette.text.primary }}
+            to="/"
+          >
+            home page
+          </MuiLink>{' '}
+          .
+        </Typography>
+      </Box>
+    </div>
+  );
+};
+
+export default PageNotFoundComponent;