Upgrade frontend packages

core/src/main/resources/org/jobrunr/dashboard/frontend/cypress/integration/jobs.spec.js

@@ -36,9 +36,9 @@ context('Actions', () => {
 
         jobTableRows().should('have.length', 20);
         jobTableRows().eq(0).should('contain', 'an enqueued job');
-        jobTablePagination().should('contain', '1-20 of 33');
-        jobTablePagination().previousButton().should('have.attr', 'title', 'Previous page').and('be.disabled');
-        jobTablePagination().nextButton().should('have.attr', 'title', 'Next page').and('be.enabled');
+        jobTablePagination().should('contain', '1–20 of 33');
+        jobTablePagination().previousButton().should('have.attr', 'title', 'Go to previous page').and('be.disabled');
+        jobTablePagination().nextButton().should('have.attr', 'title', 'Go to next page').and('be.enabled');
     });
 
 
@@ -49,9 +49,9 @@ context('Actions', () => {
 
         jobTableRows().should('have.length', 1);
         jobTableRows().eq(0).should('contain', 'the job');
-        jobTablePagination().should('contain', '1-1 of 1');
-        jobTablePagination().previousButton().should('have.attr', 'title', 'Previous page').and('be.disabled');
-        jobTablePagination().nextButton().should('have.attr', 'title', 'Next page').and('be.disabled');
+        jobTablePagination().should('contain', '1–1 of 1');
+        jobTablePagination().previousButton().should('have.attr', 'title', 'Go to previous page').and('be.disabled');
+        jobTablePagination().nextButton().should('have.attr', 'title', 'Go to next page').and('be.disabled');
     });
 
     it('It can navigate to the enqueued jobs', () => {
@@ -61,9 +61,9 @@ context('Actions', () => {
 
         jobTableRows().should('have.length', 20);
         jobTableRows().eq(0).should('contain', 'an enqueued job');
-        jobTablePagination().should('contain', '1-20 of 33');
-        jobTablePagination().previousButton().should('have.attr', 'title', 'Previous page').and('be.disabled');
-        jobTablePagination().nextButton().should('have.attr', 'title', 'Next page').and('be.enabled');
+        jobTablePagination().should('contain', '1–20 of 33');
+        jobTablePagination().previousButton().should('have.attr', 'title', 'Go to previous page').and('be.disabled');
+        jobTablePagination().nextButton().should('have.attr', 'title', 'Go to next page').and('be.enabled');
     });
 
     it('It can navigate to the processing jobs', () => {
@@ -82,9 +82,9 @@ context('Actions', () => {
 
         jobTableRows().should('have.length', 2);
         jobTableRows().eq(0).should('contain', 'a succeeded job');
-        jobTablePagination().should('contain', '1-2 of 2');
-        jobTablePagination().previousButton().should('have.attr', 'title', 'Previous page').and('be.disabled');
-        jobTablePagination().nextButton().should('have.attr', 'title', 'Next page').and('be.disabled');
+        jobTablePagination().should('contain', '1–2 of 2');
+        jobTablePagination().previousButton().should('have.attr', 'title', 'Go to previous page').and('be.disabled');
+        jobTablePagination().nextButton().should('have.attr', 'title', 'Go to next page').and('be.disabled');
     });
 
     it('It can navigate to the failed jobs', () => {
@@ -94,9 +94,9 @@ context('Actions', () => {
 
         jobTableRows().should('have.length', 1);
         jobTableRows().eq(0).should('contain', 'failed job');
-        jobTablePagination().should('contain', '1-1 of 1');
-        jobTablePagination().previousButton().should('have.attr', 'title', 'Previous page').and('be.disabled');
-        jobTablePagination().nextButton().should('have.attr', 'title', 'Next page').and('be.disabled');
+        jobTablePagination().should('contain', '1–1 of 1');
+        jobTablePagination().previousButton().should('have.attr', 'title', 'Go to previous page').and('be.disabled');
+        jobTablePagination().nextButton().should('have.attr', 'title', 'Go to next page').and('be.disabled');
     });
 
     it('It can navigate to the details of a job', () => {

core/src/main/resources/org/jobrunr/dashboard/frontend/package.json

@@ -5,19 +5,19 @@
   "homepage": "",
   "proxy": "http://localhost:8000",
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
-    "apexcharts": "^3.26.1",
-    "cronstrue": "^1.112.0",
-    "mdi-material-ui": "^6.22.1",
-    "react": "^16.14.0",
-    "react-apexcharts": "^1.3.9",
-    "react-dom": "^16.14.0",
-    "react-highlight": "^0.14.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
-    "react-timeago": "^5.2.0"
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "apexcharts": "^3.41.0",
+    "cronstrue": "^2.47.0",
+    "mdi-material-ui": "^7.8.0",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.2",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-timeago": "^7.2.0"
   },
   "scripts": {
     "start": "react-scripts --openssl-legacy-provider start",
@@ -42,8 +42,9 @@
     ]
   },
   "devDependencies": {
-    "cypress": "^4.12.1",
+    "cypress": "^13.6.3",
     "cypress-failed-log": "^2.7.0",
-    "owasp-dependency-check": "^0.0.17"
+    "owasp-dependency-check": "^0.0.21",
+    "react-scripts": "^5.0.1"
   }
 }

core/src/main/resources/org/jobrunr/dashboard/frontend/src/components/LoadingIndicator.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import {CircularProgress} from "@material-ui/core";
+import {CircularProgress} from "@mui/material";
 
 const LoadingIndicator = () => {
     return (

core/src/main/resources/org/jobrunr/dashboard/frontend/src/components/jobs/job-code.js

@@ -1,21 +1,8 @@
-import Grid from "@material-ui/core/Grid";
-import Highlight from "react-highlight";
-import React from "react";
-import {makeStyles} from "@material-ui/core/styles";
-
-const useStyles = makeStyles(theme => ({
-    codeContent: {
-        marginTop: 0,
-        paddingTop: "0 !important",
-        '& > pre': {
-            marginTop: 0,
-        }
-    }
-}));
+import Grid from "@mui/material/Grid";
+import Highlight from "../utils/highlighter";
 
 const JobCode = (props) => {
-    const { job } = props;
-    const classes = useStyles();
+    const {job} = props;
 
     const fqClassName = job.jobDetails.className;
     const className = job.jobDetails.className.substring(job.jobDetails.className.lastIndexOf(".") + 1);
@@ -24,7 +11,7 @@ const JobCode = (props) => {
     const parameters = job.jobDetails.jobParameters.map(jobParameter => jobParameter.object).join(", ")
 
     let totalFunction = className;
-    if(staticFieldName) {
+    if (staticFieldName) {
         totalFunction += "." + staticFieldName;
     }
     totalFunction += "." + methodName;
@@ -38,8 +25,8 @@ const JobCode = (props) => {
     `;
 
     return (
-        <Grid item xs={12} className={classes.codeContent}>
-            <Highlight className='language-java'>
+        <Grid item xs={12} sx={{marginTop: 0, paddingTop: "0 !important", '& > pre': {marginTop: 0}}}>
+            <Highlight language="java">
                 {code}
             </Highlight>
         </Grid>

core/src/main/resources/org/jobrunr/dashboard/frontend/src/components/jobs/job-snackbar.js

@@ -1,17 +1,21 @@
-import React from 'react';
-import Alert from '@material-ui/lab/Alert';
-import {Snackbar} from "@material-ui/core";
+import { useState } from 'react';
+import Alert from '@mui/material/Alert';
+import {Snackbar} from "@mui/material";
 
 
 const JobSnackbar = (props) => {
-    const [openSnackbar, setOpenSnackbar] = React.useState(false);
+    const [openSnackbar, setOpenSnackbar] = useState(false);
 
     const handleCloseAlert = (event, reason) => {
         setOpenSnackbar(false);
     };
 
     return (
-        <Snackbar open={openSnackbar} autoHideDuration={3000} onClose={handleCloseAlert}>
+        <Snackbar open={openSnackbar}
+            autoHideDuration={3000}
+            onClose={handleCloseAlert}
+            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+         >
             <Alert severity={props.severity}>
                 {props.message}
             </Alert>