Merge branch 'react-18-#1205' into increase-toast-functionailty-#355

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'react-app',
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/stylistic',
     'prettier',
     'plugin:cypress/recommended',
   ],

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.8.0.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

package.json

@@ -4,14 +4,16 @@
   "private": true,
   "resolutions": {
     "@types/react": "18.0.33",
-    "@types/react-dom": "18.0.11"
+    "@types/react-dom": "18.0.11",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2"
   },
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@mui/icons-material": "5.10.3",
-    "@mui/material": "5.10.0",
-    "@types/history": "4.7.3",
+    "@mui/icons-material": "5.15.10",
+    "@mui/material": "5.15.10",
+    "@types/history": "4.7.11",
     "@types/jest": "29.5.2",
     "@types/js-cookie": "3.0.1",
     "@types/react-dom": "18.0.11",
@@ -23,9 +25,9 @@
     "cookie-parser": "1.4.5",
     "custom-event-polyfill": "1.0.7",
     "cypress-failed-log": "2.10.0",
-    "eslint-config-prettier": "8.10.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
     "express": "4.18.1",
     "husky": "9.0.6",
     "i18next": "23.8.2",
@@ -34,7 +36,7 @@
     "js-cookie": "3.0.1",
     "jsonwebtoken": "9.0.0",
     "loglevel": "1.9.1",
-    "prettier": "2.8.0",
+    "prettier": "3.2.5",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
     "react": "18.2.0",
@@ -48,7 +50,7 @@
     "react-scripts": "5.0.0",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.1",
+    "redux-thunk": "3.1.0",
     "single-spa": "5.9.4",
     "typeface-roboto": "1.1.13",
     "typescript": "5.3.3"
@@ -111,13 +113,13 @@
     "@types/react-redux": "7.1.20",
     "@types/react-router": "5.1.20",
     "@types/redux-mock-store": "1.0.2",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
     "axios-mock-adapter": "1.22.0",
     "concurrently": "8.2.0",
     "cors": "2.8.5",
     "cross-env": "7.0.3",
-    "cypress": "12.17.1",
+    "cypress": "13.6.4",
     "eslint": "8.56.0",
     "eslint-config-react-app": "7.0.0",
     "lint-staged": "15.2.0",
@@ -126,5 +128,5 @@
     "start-server-and-test": "2.0.0",
     "wait-on": "7.2.0"
   },
-  "packageManager": "yarn@3.8.0"
+  "packageManager": "yarn@4.1.0"
 }

src/App.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Provider } from 'react-redux';
 import { AnyAction, applyMiddleware, compose, createStore } from 'redux';
 import { createLogger } from 'redux-logger';
-import thunk, { ThunkDispatch } from 'redux-thunk';
+import { thunk, ThunkDispatch } from 'redux-thunk';
 import {
   configureSite,
   loadMaintenanceState,
@@ -71,24 +71,27 @@ class App extends React.Component<WithTranslation> {
   public componentDidMount(): void {
     // Check for changes in maintenance state. Ensures that state changes are
     // loaded when a user does not reload the site for longer than 5 minutes.
-    setInterval(() => {
-      const provider = getState().scigateway.authorisation.provider;
-      if (provider.fetchMaintenanceState) {
-        const storedMaintenanceState = getState().scigateway.maintenance;
-        provider.fetchMaintenanceState().then((fetchedMaintenanceState) => {
-          if (
-            storedMaintenanceState.show !== fetchedMaintenanceState.show ||
-            storedMaintenanceState.message !== fetchedMaintenanceState.message
-          ) {
-            dispatch(loadMaintenanceState(fetchedMaintenanceState));
+    setInterval(
+      () => {
+        const provider = getState().scigateway.authorisation.provider;
+        if (provider.fetchMaintenanceState) {
+          const storedMaintenanceState = getState().scigateway.maintenance;
+          provider.fetchMaintenanceState().then((fetchedMaintenanceState) => {
+            if (
+              storedMaintenanceState.show !== fetchedMaintenanceState.show ||
+              storedMaintenanceState.message !== fetchedMaintenanceState.message
+            ) {
+              dispatch(loadMaintenanceState(fetchedMaintenanceState));
 
-            // Reload the page if maintenance state changes from true to false
-            if (storedMaintenanceState.show && !fetchedMaintenanceState.show)
-              window.location.reload();
-          }
-        });
-      }
-    }, 1000 * 60 * 5);
+              // Reload the page if maintenance state changes from true to false
+              if (storedMaintenanceState.show && !fetchedMaintenanceState.show)
+                window.location.reload();
+            }
+          });
+        }
+      },
+      1000 * 60 * 5
+    );
   }
 
   public render(): React.ReactElement {

src/__snapshots__/pageContainer.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
               viewBox="0 0 24 24"
             >
               <path
-                d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
               />
             </svg>
             <span
@@ -71,7 +71,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
           </button>
           <button
             aria-label="home-page"
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium tour-title css-bj8lf8-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium tour-title css-bj8lf8-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
@@ -91,7 +91,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
             class="tour-user-profile"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1yxmrfv-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1yxmrfv-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
@@ -120,7 +120,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
               viewBox="0 0 24 24"
             >
               <path
-                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
               />
             </svg>
             <span
@@ -209,7 +209,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                     class="MuiBox-root css-1yuhvjn"
                   >
                     <a
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
                       data-testid="browse-button"
                       href="/home-page.browse.link"
                       tabindex="0"
@@ -237,7 +237,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                   class="MuiBox-root css-1onku40"
                 >
                   <div
-                    class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-1ukwqwi-MuiAvatar-root"
+                    class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-jftqyy-MuiAvatar-root"
                   >
                     <svg
                       aria-hidden="true"
@@ -247,7 +247,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
                       />
                     </svg>
                   </div>
@@ -265,7 +265,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                     class="MuiBox-root css-8xl60i"
                   >
                     <a
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
                       data-testid="search-button"
                       href="/home-page.search.link"
                       tabindex="0"
@@ -289,7 +289,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                   class="MuiBox-root css-1onku40"
                 >
                   <div
-                    class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-1ukwqwi-MuiAvatar-root"
+                    class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-jftqyy-MuiAvatar-root"
                   >
                     <svg
                       aria-hidden="true"
@@ -299,7 +299,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                        d="M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"
                       />
                     </svg>
                   </div>
@@ -317,7 +317,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                     class="MuiBox-root css-8xl60i"
                   >
                     <a
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2ttl85-MuiButtonBase-root-MuiButton-root"
                       data-testid="download-button"
                       href="/home-page.download.link"
                       tabindex="0"
@@ -357,7 +357,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
                       class="MuiBox-root css-8xl60i"
                     >
                       <a
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1h8ppsl-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1h8ppsl-MuiButtonBase-root-MuiButton-root"
                         data-testid="facility-button"
                         href="home-page.facility.link"
                         tabindex="0"

src/accessibilityPage/__snapshots__/accessibilityPage.component.test.tsx.snap

@@ -24,15 +24,15 @@ exports[`Accessibility page component should render correctly and display contac
       >
         <li>
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-17t6e9i-MuiTypography-root-MuiLink-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qwtsl2-MuiTypography-root-MuiLink-root"
             href="accessibility-page.domains-list0"
           >
             accessibility-page.domains-list0
           </a>
         </li>
         <li>
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-17t6e9i-MuiTypography-root-MuiLink-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qwtsl2-MuiTypography-root-MuiLink-root"
             href="accessibility-page.domains-list1"
           >
             accessibility-page.domains-list1
@@ -73,7 +73,7 @@ exports[`Accessibility page component should render correctly and display contac
       class="MuiTypography-root MuiTypography-body1 css-158lj4w-MuiTypography-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-17t6e9i-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qwtsl2-MuiTypography-root-MuiLink-root"
         href="accessibility-page.advice-on-how-to-make-device-more-accessible-link"
       >
         AbilityNet
@@ -123,7 +123,7 @@ exports[`Accessibility page component should render correctly and display contac
             class="MuiTypography-root MuiTypography-body1 css-158lj4w-MuiTypography-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-17t6e9i-MuiTypography-root-MuiLink-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qwtsl2-MuiTypography-root-MuiLink-root"
               href="mailto:accessibility-page.contact-info"
             >
               accessibility-page.contact-info
@@ -145,7 +145,7 @@ exports[`Accessibility page component should render correctly and display contac
       >
         The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 (the ‘accessibility regulations’). If you’re not happy with how we respond to your complaint,
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-17t6e9i-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qwtsl2-MuiTypography-root-MuiLink-root"
           href="accessibility-page.enforcement-procedure-link"
         >
           contact the Equality Advisory and Support Service (EASS)
@@ -175,7 +175,7 @@ exports[`Accessibility page component should render correctly and display contac
       >
         This website is partially compliant with the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-17t6e9i-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qwtsl2-MuiTypography-root-MuiLink-root"
           href="accessibility-page.compliance-status-link"
         >
           Web Content Accessibility Guidelines version 2.1
@@ -270,7 +270,7 @@ exports[`Accessibility page component should render correctly and display contac
       >
         We have assessed the time it would take to resolve these issues with table view, and card view. We believe that doing so now would be a 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-17t6e9i-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-qwtsl2-MuiTypography-root-MuiLink-root"
           href="accessibility-page.disproportionate-burden.link"
         >
           disproportionate burden 

src/accessibilityPage/accessibilityPage.component.test.tsx

@@ -6,7 +6,7 @@ import { StateType } from '../state/state.types';
 import { authState, initialState } from '../state/reducers/scigateway.reducer';
 import { createLocation } from 'history';
 import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
 

src/adminPage/adminPage.component.test.tsx

@@ -8,7 +8,7 @@ import AdminPage from './adminPage.component';
 import { Provider } from 'react-redux';
 import { buildTheme } from '../theming';
 import TestAuthProvider from '../authentication/testAuthProvider';
-import thunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 import { Router } from 'react-router';
 import { StyledEngineProvider, ThemeProvider } from '@mui/material';
 import { render, screen } from '@testing-library/react';

src/adminPage/adminPage.component.tsx

@@ -21,12 +21,8 @@ export interface AdminPageProps {
 export const getPluginRoutes = (
   plugins: PluginConfig[],
   admin?: boolean
-): {
-  [plugin: string]: string[];
-} => {
-  const pluginRoutes: {
-    [plugin: string]: string[];
-  } = {};
+): Record<string, string[]> => {
+  const pluginRoutes: Record<string, string[]> = {};
 
   plugins.forEach((p) => {
     const isAdmin = admin ? p.admin : !p.admin;
@@ -49,7 +45,7 @@ const AdminPage = (props: AdminPageProps): ReactElement => {
 
   const [tabValue, setTabValue] = React.useState<'maintenance' | 'download'>(
     // allows direct access to a tab when another tab is the default
-    (Object.keys(adminRoutes) as Array<keyof typeof adminRoutes>).find(
+    (Object.keys(adminRoutes) as (keyof typeof adminRoutes)[]).find(
       (key) => adminRoutes[key] === location.pathname
     ) ??
       props.adminPageDefaultTab ??

src/adminPage/maintenancePage.component.test.tsx

@@ -7,7 +7,7 @@ import configureStore, { MockStore } from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { buildTheme } from '../theming';
 import TestAuthProvider from '../authentication/testAuthProvider';
-import thunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 import {
   loadMaintenanceState,
   loadScheduledMaintenanceState,
@@ -71,7 +71,7 @@ describe('maintenance page component', () => {
       })
     );
     await user.click(
-      screen.getByRole('button', { name: 'admin.severity-select-arialabel' })
+      screen.getByRole('combobox', { name: 'admin.severity-select-arialabel' })
     );
     await user.click(screen.getByRole('option', { name: 'Information' }));
     await user.click(