X1034 react router upgrade to 6.0

cypress/e2e/pages/potProcessing.cy.ts

@@ -73,6 +73,7 @@ describe('Pot Processing', () => {
   describe('Pot labware', () => {
     context('when adding Pot labware', () => {
       before(() => {
+        cy.findByRole('button', { name: /Cancel/i }).click();
         selectSGPNumber('SGP1008');
         selectOption('labwareType', 'Pot');
         cy.findByTestId('numLabware').type('{selectall}').type('2');

cypress/e2e/pages/sectioningConfirmation.cy.ts

@@ -150,6 +150,9 @@ describe('Sectioning Confirmation', () => {
 
         cy.findByText('Search').click();
       });
+      after(() => {
+        cy.findByRole('button', { name: /Cancel/ }).click();
+      });
     });
 
     context('when I edit the layout', () => {

cypress/e2e/pages/sectioningPlanning.cy.ts

@@ -109,9 +109,11 @@ describe('Sectioning Planning', () => {
             // Returning false cancels the event
             return false;
           });
-
           cy.findByText('Search').click();
         });
+        after(() => {
+          cy.findByRole('button', { name: /Cancel/ }).click();
+        });
       });
     });
 

cypress/e2e/pages/store.cy.ts

@@ -128,7 +128,7 @@ describe('Store', () => {
           )
         );
       });
-      cy.visit('/locations/STO-001');
+      cy.visit('/locations/STO-014');
     });
     it('should display transfer items option', () => {
       cy.findByText('Transfer items from location').should('be.visible');
@@ -147,18 +147,18 @@ describe('Store', () => {
                 const location = locationRepository.findByBarcode(req.variables.barcode);
                 return res.once(
                   ctx.data({
-                    location: { ...locationResponse(location!), customName: 'STO-002 location' }
+                    location: { ...locationResponse(location!), customName: 'STO-014 location' }
                   })
                 );
               }
             )
           );
         });
-        cy.get('[id=source_barcode]').type('STO-002{enter}');
+        cy.get('[id=source_barcode]').type('STO-014{enter}');
       });
 
       it('should display description', () => {
-        cy.findByTestId('transfer-source-description').should('contain.text', 'STO-002 location');
+        cy.findByTestId('transfer-source-description').should('contain.text', 'STO-014 location');
       });
       context('Error on transfer', () => {
         before(() => {
@@ -190,7 +190,7 @@ describe('Store', () => {
       context('On successful transfer', () => {
         before(() => {
           cy.msw().then(({ worker, graphql }) => {
-            const location = locationRepository.findByBarcode('STO-002');
+            const location = locationRepository.findByBarcode('STO-014');
             worker.use(
               graphql.mutation<TransferLocationItemsMutation, TransferLocationItemsMutationVariables>(
                 'TransferLocationItems',
@@ -214,7 +214,7 @@ describe('Store', () => {
           cy.findByRole('button', { name: 'Transfer' }).click();
         });
         it('should display success message', () => {
-          cy.contains('All items transferred from STO-002').should('be.visible');
+          cy.contains('All items transferred from STO-014').should('be.visible');
         });
         it('should display transferred items', () => {
           cy.findByText('STAN-1011').should('be.visible');

cypress/e2e/shared/authRoutes.cy.ts

@@ -98,7 +98,7 @@ describe('Authorized routes', () => {
           cy.visitAsEndUser('/file_manager');
         });
         it('navigates to the page', () => {
-          cy.findByText('File Manager').should('be.visible');
+          cy.findAllByText('File Manager').should('have.length.above', 0);
         });
       });
       context('when visiting config page', () => {

package.json

@@ -20,7 +20,8 @@
     "@types/query-string": "^6.3.0",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.14",
     "@types/react-transition-group": "^4.4.5",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
@@ -40,7 +41,8 @@
     "query-string": "^7.1.1",
     "react": "^17.0.2",
     "react-dom": "17.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.15.0",
+    "react-router-prompt": "^0.5.4",
     "react-scripts": "^5.0.1",
     "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.5.0",

src/App.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import { Router } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
-import { Routes } from './components/Routes';
-import { history, stanCore, StanCoreContext } from './lib/sdk';
+import { stanCore, StanCoreContext } from './lib/sdk';
 import { ConfigProvider } from './context/ConfigContext';
+import RouteLayout from './components/RouteLayout';
 
 function App() {
   return (
     <ConfigProvider>
       <StanCoreContext.Provider value={stanCore}>
-        <Router history={history}>
-          <AuthProvider>
-            <Routes />
-          </AuthProvider>
-        </Router>
+        <AuthProvider>
+          <RouteLayout />
+        </AuthProvider>
       </StanCoreContext.Provider>
     </ConfigProvider>
   );

src/components/AppShell.tsx

@@ -14,7 +14,6 @@ import 'react-toastify/dist/ReactToastify.css';
 import LabwareIcon from './icons/LabwareIcon';
 import SupportIcon from './icons/SupportIcon';
 import Warning from './notifications/Warning';
-import { LocationState } from '../types/stan';
 import Success from './notifications/Success';
 import { UserRole } from '../types/sdk';
 import { configContext } from '../context/ConfigContext';
@@ -28,7 +27,7 @@ interface AppShellParams {
 function AppShell({ children }: AppShellParams) {
   const config = useContext(configContext);
   const auth = useAuth();
-  const location = useLocation<LocationState>();
+  const location = useLocation();
   const profileDropdownRef = useRef<HTMLDivElement>(null);
   const profileButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -71,10 +70,10 @@ function AppShell({ children }: AppShellParams) {
               </button>
             </div>
             <nav className="hidden md:flex space-x-10">
-              <StanNavLink exact to="/">
+              <StanNavLink end to="/">
                 Home
               </StanNavLink>
-              <StanNavLink exact to="/search">
+              <StanNavLink end to="/search">
                 Search
               </StanNavLink>
               <StanNavLink to="/store">Store</StanNavLink>

src/components/AuthLayout.tsx

@@ -0,0 +1,38 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import React from 'react';
+import { UserRole } from '../types/sdk';
+
+type AuthWrapperProps = {
+  /**
+   * If defined, this is the minimum role a user must be to access the route
+   */
+  role?: UserRole;
+};
+const AuthLayout = ({ role = UserRole.Normal }: AuthWrapperProps) => {
+  const location = useLocation();
+  const auth = useAuth();
+  if (auth.isAuthenticated() && auth.userRoleIncludes(role)) {
+    return <Outlet />;
+  } else {
+    if (!auth.isAuthenticated()) {
+      return (
+        <Navigate
+          to="/login"
+          replace
+          state={{ referrer: location, warning: `Please sign in to access ${location.pathname}` }}
+        />
+      );
+    } else {
+      return (
+        <Navigate
+          to="/"
+          replace
+          state={{ referrer: location, warning: `You are not authorised to access ${location.pathname}` }}
+        />
+      );
+    }
+  }
+};
+
+export default AuthLayout;

src/components/LocationSearch.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import ScanInput from './scanInput/ScanInput';
 import LabwareIcon from './icons/LabwareIcon';
 import LocationIcon from './icons/LocationIcon';
-import { history } from '../lib/sdk';
 import { LabwareAwaitingStorageInfo } from '../pages/Store';
 import { stringify } from '../lib/helpers';
+import { useNavigate } from 'react-router-dom';
 
 const LocationSearch = ({ awaitingLabwares }: { awaitingLabwares?: LabwareAwaitingStorageInfo[] }) => {
+  const navigate = useNavigate();
   return (
     <div className="mt-2 my-6 border border-gray-200 bg-gray-100 p-6 rounded-md">
       <div className="sm:flex sm:flex-row items-start justify-around">
@@ -20,8 +21,7 @@ const LocationSearch = ({ awaitingLabwares }: { awaitingLabwares?: LabwareAwaiti
           <ScanInput
             id={'locationScanInput'}
             onScan={(value) => {
-              history.push({
-                pathname: `/locations/${value}`,
+              navigate(`/locations/${value}`, {
                 state: {
                   awaitingLabwares: awaitingLabwares ?? []
                 }
@@ -40,14 +40,11 @@ const LocationSearch = ({ awaitingLabwares }: { awaitingLabwares?: LabwareAwaiti
             id={'labwareLocationScanInput'}
             onScan={(value) => {
               if (value.length > 0) {
-                history.push({
+                navigate({
                   pathname: `/locations`,
                   search: stringify({
                     labwareBarcode: value
-                  }),
-                  state: {
-                    awaitingLabwares: awaitingLabwares ?? []
-                  }
+                  })
                 });
               }
             }}