Merge branch 'main' into add-config-page

fiaisis · Oct 24, 2024 · cf6094c · cf6094c
2 parents 35732be + f63dfdf
commit cf6094c
Show file tree

Hide file tree

Showing 11 changed files with 1,015 additions and 630 deletions.
diff --git a/.github/workflows/cypress_tests.yml b/.github/workflows/cypress_tests.yml
@@ -9,7 +9,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '14'
+          node-version: '20'
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install

diff --git a/.github/workflows/yarn_build.yml b/.github/workflows/yarn_build.yml
@@ -8,7 +8,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 20
       - name: Install dependencies
         run: yarn install
       - name: Build

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ A `dev-plugin-settings.json` file is also needed in SciGateway's `micro-frontend
 
 ### Specifying environment variables
 
-Unless you have a working API and data viewer set-up locally you will want the frontend to point to the ones in staging which require your machine to be on the company VPN. The URLs for the `REST_API` and `DATA_VIEWER` are found in [`.env`](https://github.com/fiaisis/frontend/blob/main/.env).
+Unless you have a working API and data-viewer set-up locally you will want the frontend to point to the ones in staging which require your machine to be on the company VPN. The URLs for the `REST_API` and `DATA_VIEWER` are found in [`.env`](https://github.com/fiaisis/frontend/blob/main/.env).
 
 ## Running the frontend for the first time
 
@@ -61,7 +61,7 @@ Builds the app for production. You will need to do this every time the frontend
 
 You can now open a terminal in SciGateway and have it act as a parent application for running the frontend. You only need to run `yarn start` and the FIA frontend will be running on http://localhost:3000/fia.
 
-If you're testing something doens't strictly need SciGateway, you can run the frontend on its own by running `yarn start` in the frontend directory. This will also be running on http://localhost:3000/fia.
+If you're testing changes that don't strictly need SciGateway, the API, or the data-viewer, you can run the frontend on its own by running `yarn start` in the frontend directory. This will also be running on http://localhost:3000/fia.
 
 ## Container files
 

diff --git a/container/index.html b/container/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/container/scigateway.dockerfile b/container/scigateway.dockerfile
@@ -1,4 +1,4 @@
-FROM harbor.stfc.ac.uk/datagateway/scigateway:develop
+FROM harbor.stfc.ac.uk/datagateway/scigateway@sha256:3c160722053260cbf89b85a9b1a13356c007e05270086ef77769d2b8f6f8e6d2
 
 ENV AUTH_URL /auth
 ENV AUTH_PROVIDER jwt

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/package.json b/package.json
@@ -5,21 +5,21 @@
   "dependencies": {
     "@craco/craco": "7.0.0",
     "@emotion/react": "11.10.0",
-    "@emotion/styled": "11.10.0",
+    "@emotion/styled": "11.13.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@monaco-editor/react": "^4.6.0",
-    "@mui/icons-material": "5.11.0",
-    "@mui/material": "5.11.0",
-    "@types/jest": "29.4.0",
-    "@types/node": "18.11.9",
+    "@mui/icons-material": "6.1.3",
+    "@mui/material": "6.1.3",
+    "@types/jest": "29.5.13",
+    "@types/node": "22.7.5",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
-    "express": "4.18.1",
+    "express": "4.21.1",
     "express-ws": "5.0.2",
-    "i18next": "^23.6.0",
-    "loglevel": "1.8.0",
-    "monaco-editor": "^0.47.0",
+    "i18next": "^23.16.0",
+    "loglevel": "1.9.2",
+    "monaco-editor": "^0.52.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-ga4": "^2.1.0",
@@ -29,13 +29,13 @@
     "react-router-dom": "5.3.0",
     "react-scripts": "5.0.0",
     "single-spa-react": "4.6.1",
-    "typescript": "4.9.3",
-    "ws": "8.13.0"
+    "typescript": "5.6.x",
+    "ws": "8.18.0"
   },
   "resolutions": {
     "@types/react": "17.0.39",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
-    "@typescript-eslint/parser": "5.49.0"
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "8.9.0"
   },
   "lint-staged": {
     "src/**/*.{tsx,js,jsx,json}": [
@@ -89,21 +89,21 @@
   },
   "devDependencies": {
     "@cypress/react": "^7.0.3",
-    "@cypress/webpack-dev-server": "^3.5.1",
+    "@cypress/webpack-dev-server": "^3.11.0",
     "@types/react-router-dom": "5.3.3",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
-    "@typescript-eslint/parser": "5.49.0",
-    "cypress": "^13.6.4",
-    "cypress-real-events": "^1.11.0",
-    "eslint": "8.32.0",
-    "eslint-config-prettier": "8.6.0",
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "8.9.0",
+    "cypress": "^13.15.0",
+    "cypress-real-events": "^1.13.0",
+    "eslint": "8.x",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.0",
-    "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-cypress": "4.0.0",
+    "eslint-plugin-prettier": "5.2.1",
     "html-webpack-plugin": "^5.5.3",
-    "husky": "8.0.1",
-    "lint-staged": "13.1.0",
-    "prettier": "2.8.0",
-    "serve": "14.2.0"
+    "husky": "9.1.6",
+    "lint-staged": "15.2.10",
+    "prettier": "3.3.3",
+    "serve": "14.2.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/HomePage.tsx b/src/HomePage.tsx
@@ -4,8 +4,9 @@ import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 
 // Material UI imports
-import { Avatar, Box, Button, Grid, Paper, Typography, alpha, styled, useMediaQuery, useTheme } from '@mui/material';
+import { Avatar, Box, Button, Paper, Typography, alpha, styled, useMediaQuery, useTheme } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
+import Grid from '@mui/material/Grid2';
 
 // Local data
 import BackgroundImage from './images/background.jpg';
@@ -114,9 +115,9 @@ const BrowseDecal = styled('div', {
     theme.palette.mode === 'light'
       ? `url(${decal2Image})`
       : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (theme as any).colours?.type === 'default'
-      ? `url(${decal2DarkImage})`
-      : `url(${decal2DarkHCImage})`,
+        (theme as any).colours?.type === 'default'
+        ? `url(${decal2DarkImage})`
+        : `url(${decal2DarkHCImage})`,
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'top left',
   backgroundSize: 'auto 100%',
@@ -190,7 +191,12 @@ const HomePage = (): React.ReactElement => {
       >
         <Paper sx={paperStyles} elevation={1}>
           <Grid container style={{ height: '100%' }}>
-            <Grid item xs={12} md={6}>
+            <Grid
+              size={{
+                xs: 12,
+                md: 6,
+              }}
+            >
               <Box sx={paperContentStyles}>
                 <Typography
                   variant="h3"
@@ -229,7 +235,11 @@ const HomePage = (): React.ReactElement => {
               </Box>
             </Grid>
             {isViewportMdOrLager && (
-              <Grid item md={6}>
+              <Grid
+                size={{
+                  md: 6,
+                }}
+              >
                 <div
                   style={{
                     backgroundImage: `url(${FacilityImage})`,
@@ -252,7 +262,12 @@ const HomePage = (): React.ReactElement => {
           </Grid>
         </Paper>
         <Grid container spacing={2}>
-          <Grid item xs={12} md={4}>
+          <Grid
+            size={{
+              xs: 12,
+              md: 4,
+            }}
+          >
             <Paper sx={paperStyles} elevation={1}>
               <Box sx={paperContentStyles}>
                 <Avatar sx={avatarStyles}>
@@ -276,7 +291,12 @@ const HomePage = (): React.ReactElement => {
               </Box>
             </Paper>
           </Grid>
-          <Grid item xs={12} md={4}>
+          <Grid
+            size={{
+              xs: 12,
+              md: 4,
+            }}
+          >
             <Paper sx={paperStyles} elevation={1}>
               <Box sx={paperContentStyles}>
                 <Avatar sx={avatarStyles}>
@@ -300,7 +320,12 @@ const HomePage = (): React.ReactElement => {
               </Box>
             </Paper>
           </Grid>
-          <Grid item xs={12} md={4}>
+          <Grid
+            size={{
+              xs: 12,
+              md: 4,
+            }}
+          >
             <Paper sx={{ ...paperStyles, backgroundColor: '#003088' }} elevation={1}>
               <div
                 style={{

diff --git a/src/Jobs/JobsBase.tsx b/src/Jobs/JobsBase.tsx
@@ -8,7 +8,6 @@ import {
   Button,
   Collapse,
   FormControl,
-  Grid,
   IconButton,
   InputLabel,
   MenuItem,
@@ -43,6 +42,7 @@ import {
   Settings,
   ImageAspectRatio,
 } from '@mui/icons-material';
+import Grid from '@mui/material/Grid2';
 import { CSSObject } from '@mui/system';
 
 // Local data
@@ -371,8 +371,8 @@ const JobsBase: React.FC<JobsBaseProps> = ({
           ? theme.palette.mode === 'light'
             ? '#f0f0f0' // Light mode, even rows
             : theme.palette.mode === 'dark'
-            ? '#2d2d2d' // Dark mode, even rows
-            : '#000000' // High contrast mode, even rows
+              ? '#2d2d2d' // Dark mode, even rows
+              : '#000000' // High contrast mode, even rows
           : theme.palette.background.default, // Odd rows (default background color)
     };
 
@@ -382,10 +382,10 @@ const JobsBase: React.FC<JobsBaseProps> = ({
           theme.palette.mode === 'light'
             ? '#e0e0e0' // Light mode hover color
             : theme.palette.mode === 'dark'
-            ? index % 2 === 0
-              ? '#4c4c4c' // Dark mode, even rows
-              : '#4a4a4a' // Dark mode, odd rows
-            : '#ffffff', // High contrast mode hover color
+              ? index % 2 === 0
+                ? '#4c4c4c' // Dark mode, even rows
+                : '#4a4a4a' // Dark mode, odd rows
+              : '#ffffff', // High contrast mode hover color
       };
     };
 
@@ -423,7 +423,7 @@ const JobsBase: React.FC<JobsBaseProps> = ({
                   {renderJobStatus()}
                 </Typography>
                 <Grid container spacing={3}>
-                  <Grid item xs={4}>
+                  <Grid size={4}>
                     <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>
                       {job.state === 'UNSUCCESSFUL' || job.state === 'ERROR'
                         ? 'Stacktrace output'
@@ -445,7 +445,7 @@ const JobsBase: React.FC<JobsBaseProps> = ({
                       )}
                     </Box>
                   </Grid>
-                  <Grid item xs={3}>
+                  <Grid size={3}>
                     <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>
                       Run details
                     </Typography>
@@ -524,7 +524,7 @@ const JobsBase: React.FC<JobsBaseProps> = ({
                       <Typography variant="body2">{job.run?.users || 'N/A'}</Typography>
                     </Box>
                   </Grid>
-                  <Grid item xs={5}>
+                  <Grid size={5}>
                     <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>
                       Reduction inputs
                     </Typography>