CHG minimally migrate to mui@v5 react@18 eslint@8 babel@7 notistack@2…

… react-scripts@5
AnubisLMS · Jul 9, 2022 · c7a6637 · c7a6637
1 parent 2f66ed2
commit c7a6637
Show file tree

Hide file tree

Showing 155 changed files with 7,319 additions and 10,055 deletions.
diff --git a/web/.eslintrc.yml b/web/.eslintrc.yml
@@ -7,14 +7,16 @@ extends:
 globals:
   Atomics: readonly
   SharedArrayBuffer: readonly
-parser: babel-eslint
 parserOptions:
+  parser: '@babel/eslint-parser'
+  requireConfigFile: false
   ecmaFeatures:
     jsx: true
-  ecmaVersion: 2018
+  ecmaVersion: latest
   sourceType: module
 plugins:
   - react
+  - jsx
 rules:
   react/prop-types: off
   require-jsdoc: 0

diff --git a/web/package.json b/web/package.json
@@ -5,37 +5,39 @@
   "dependencies": {
     "@date-io/core": "^1.3.6",
     "@date-io/date-fns": "^1.3.13",
-    "@material-ui/core": "^4.9.5",
-    "@material-ui/data-grid": "^4.0.0-alpha.24",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@material-ui/pickers": "^3.2.10",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.89",
+    "@mui/material": "^5.8.7",
+    "@mui/styles": "^5.8.7",
+    "@mui/x-data-grid": "^5.13.0",
+    "@mui/x-date-pickers": "^5.0.0-beta.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.0",
-    "ace-builds": "^1.4.12",
-    "axios": "^0.21.1",
-    "clsx": "^1.1.0",
+    "ace-builds": "^1.7.1",
+    "axios": "^0.27.2",
+    "clsx": "^1.2.1",
     "date-fns": "^2.0.0",
-    "devicon": "^2.14.0",
+    "devicon": "^2.15.1",
     "draft-js": "^0.11.7",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^6.4.3",
     "http-proxy-middleware": "^2.0.0",
-    "markdown-to-jsx": "^7.1.2",
-    "notistack": "^1.0.3",
-    "react": "^17.0.2",
-    "react-ace": "^9.3.0",
-    "react-device-detect": "^1.17.0",
-    "react-diff-view": "^2.4.9",
-    "react-dom": "^17.0.2",
+    "markdown-to-jsx": "^7.1.7",
+    "notistack": "^2.0.5",
+    "react": "^18.2.0",
+    "react-ace": "^10.1.0",
+    "react-device-detect": "^2.2.2",
+    "react-diff-view": "^2.4.10",
+    "react-dom": "^18.2.0",
     "react-markdown": "^5.0.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-scroll": "^1.8.2",
     "react-syntax-highlighter": "^15.3.0",
     "react-vis": "^1.11.7",
-    "remark-gfm": "^1.0.0",
-    "scrambling-text": "^1.0.4",
+    "remark-gfm": "^3.0.1",
     "universal-cookie": "^4.0.4",
     "web-vitals": "^2.1.0"
   },
@@ -63,13 +65,14 @@
     ]
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.18.0",
+    "@babel/eslint-parser": "^7.18.2",
+    "eslint": "^8.19.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx": "^0.1.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.22.0"
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.30.1"
   }
 }
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -10,9 +10,9 @@ import {SnackbarProvider} from 'notistack';
 // React vis stylesheet
 import 'react-vis/dist/style.css';
 
-import {ThemeProvider} from '@material-ui/core/styles';
-import makeStyles from '@material-ui/core/styles/makeStyles';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import {ThemeProvider} from '@mui/material/styles';
+import makeStyles from '@mui/material/styles/makeStyles';
+import CssBaseline from '@mui/material/CssBaseline';
 
 // Auth Context
 import AuthContext from './context/AuthContext';

diff --git a/web/src/components/core/AdminIDE/ManagementIDEDialog.jsx b/web/src/components/core/AdminIDE/ManagementIDEDialog.jsx
@@ -3,21 +3,21 @@ import clsx from 'clsx';
 import axios from 'axios';
 import {useSnackbar} from 'notistack';
 
-import green from '@material-ui/core/colors/green';
-import makeStyles from '@material-ui/core/styles/makeStyles';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import TextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import Typography from '@material-ui/core/Typography';
-import CodeOutlinedIcon from '@material-ui/icons/CodeOutlined';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import green from '@mui/material/colors/green';
+import makeStyles from '@mui/material/styles/makeStyles';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+import CodeOutlinedIcon from '@mui/icons-material/CodeOutlined';
+import Autocomplete from '@mui/lab/Autocomplete';
 
 import IDEHeader from '../IDE/IDEHeader';
 import standardStatusHandler from '../../../utils/standardStatusHandler';

diff --git a/web/src/components/core/AprilFools/AprilFools.jsx b/web/src/components/core/AprilFools/AprilFools.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import {makeStyles} from '@material-ui/core/styles';
-import {Alert, AlertTitle} from '@material-ui/lab';
-import IconButton from '@material-ui/core/IconButton';
-import Collapse from '@material-ui/core/Collapse';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
+import {makeStyles} from '@mui/material/styles';
+import {Alert, AlertTitle} from '@mui/lab';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/web/src/components/core/Assignment/AssignmentCard.jsx b/web/src/components/core/Assignment/AssignmentCard.jsx
@@ -4,29 +4,30 @@ import {useSnackbar} from 'notistack';
 import {Link} from 'react-router-dom';
 import clsx from 'clsx';
 
-import {KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
-import makeStyles from '@material-ui/core/styles/makeStyles';
-import Grid from '@material-ui/core/Grid';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import TextField from '@material-ui/core/TextField';
-import DateFnsUtils from '@date-io/date-fns';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import Button from '@material-ui/core/Button';
-import CardActions from '@material-ui/core/CardActions';
-import yellow from '@material-ui/core/colors/yellow';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {DesktopDatePicker} from '@mui/x-date-pickers/DesktopDatePicker';
+import makeStyles from '@mui/material/styles/makeStyles';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Button from '@mui/material/Button';
+import CardActions from '@mui/material/CardActions';
+import yellow from '@mui/material/colors/yellow';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import Autocomplete from '@mui/lab/Autocomplete';
 
-import SaveIcon from '@material-ui/icons/Save';
-import EditIcon from '@material-ui/icons/Edit';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import VisibilityIcon from '@material-ui/icons/Visibility';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
-import PeopleIcon from '@material-ui/icons/People';
+import SaveIcon from '@mui/icons-material/Save';
+import EditIcon from '@mui/icons-material/Edit';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import PeopleIcon from '@mui/icons-material/People';
 
 import standardErrorHandler from '../../../utils/standardErrorHandler';
 import standardStatusHandler from '../../../utils/standardStatusHandler';
@@ -119,7 +120,7 @@ export default function AssignmentCard({assignment, editableFields, updateField,
                       onChange={(_, v) => updateField(assignment.id, field, false, false, true)(v)}
                       options={images}
                       getOptionLabel={(option) => option.title}
-                      renderInput={(params) => <TextField {...params} label={label} variant="outlined" />}
+                      renderInput={(params) => <TextField {...params} label={label} variant="outlined"/>}
                     />
                   </Grid>
                 );
@@ -183,23 +184,17 @@ export default function AssignmentCard({assignment, editableFields, updateField,
               case 'datetime':
                 return (
                   <Grid item xs={12} key={field}>
-                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-                      <KeyboardDatePicker
+                    <LocalizationProvider dateAdapter={AdapterDateFns}>
+                      <DesktopDatePicker
                         className={classes.datePicker}
                         margin="normal"
                         label={label}
-                        format="yyyy-MM-dd"
+                        format="yyyy-MM-dd hh:mm:ss"
                         value={assignment[field]}
                         onChange={updateField(assignment.id, field, false, true)}
+                        renderInput={(params) => <TextField {...params} />}
                       />
-                      <KeyboardTimePicker
-                        className={classes.datePicker}
-                        margin="normal"
-                        label="Time"
-                        value={assignment[field]}
-                        onChange={updateField(assignment.id, field, false, true)}
-                      />
-                    </MuiPickersUtilsProvider>
+                    </LocalizationProvider>
                   </Grid>
                 );
               }

diff --git a/web/src/components/core/Assignment/AssignmentReposTable.jsx b/web/src/components/core/Assignment/AssignmentReposTable.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import axios from 'axios';
 import {useSnackbar} from 'notistack';
 
-import {DataGrid} from '@material-ui/data-grid';
-import makeStyles from '@material-ui/core/styles/makeStyles';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Delete from '@material-ui/icons/Delete';
+import {DataGrid} from '@mui/x-data-grid';
+import makeStyles from '@mui/material/styles/makeStyles';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Delete from '@mui/icons-material/Delete';
 
 import standardStatusHandler from '../../../utils/standardStatusHandler';
 import standardErrorHandler from '../../../utils/standardErrorHandler';

diff --git a/web/src/components/core/Assignment/DeleteAssignmentDialog.jsx b/web/src/components/core/Assignment/DeleteAssignmentDialog.jsx
@@ -2,15 +2,15 @@ import React from 'react';
 import axios from 'axios';
 import {useSnackbar} from 'notistack';
 
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import Delete from '@material-ui/icons/Delete';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Delete from '@mui/icons-material/Delete';
 
 import standardStatusHandler from '../../../utils/standardStatusHandler';
 import standardErrorHandler from '../../../utils/standardErrorHandler';

diff --git a/web/src/components/core/Assignment/DescriptionEditorDialog.jsx b/web/src/components/core/Assignment/DescriptionEditorDialog.jsx
@@ -4,14 +4,14 @@ import ReactAce from 'react-ace';
 import 'ace-builds/src-min-noconflict/theme-monokai';
 import 'ace-builds/src-min-noconflict/mode-markdown';
 
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Button from '@material-ui/core/Button';
-import EditIcon from '@material-ui/icons/Edit';
-import Box from '@material-ui/core/Box';
-import SaveIcon from '@material-ui/icons/Save';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import EditIcon from '@mui/icons-material/Edit';
+import Box from '@mui/material/Box';
+import SaveIcon from '@mui/icons-material/Save';
 
 
 export default function DescriptionEditorDialog({assignment, updateField, saveAssignment, className}) {

diff --git a/web/src/components/core/Assignment/LateExceptionAddCard.jsx b/web/src/components/core/Assignment/LateExceptionAddCard.jsx
@@ -2,17 +2,18 @@ import React, {useState} from 'react';
 import {useSnackbar} from 'notistack';
 import axios from 'axios';
 
-import {KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
+import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {DesktopDatePicker} from '@mui/x-date-pickers/DesktopDatePicker';
 
-import makeStyles from '@material-ui/core/styles/makeStyles';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import DateFnsUtils from '@date-io/date-fns';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import TextField from '@material-ui/core/TextField';
-import CardActions from '@material-ui/core/CardActions';
-import Button from '@material-ui/core/Button';
-import SaveIcon from '@material-ui/icons/Save';
+import makeStyles from '@mui/material/styles/makeStyles';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Autocomplete from '@mui/lab/Autocomplete';
+import TextField from '@mui/material/TextField';
+import CardActions from '@mui/material/CardActions';
+import Button from '@mui/material/Button';
+import SaveIcon from '@mui/icons-material/Save';
 
 import standardStatusHandler from '../../../utils/standardStatusHandler';
 import standardErrorHandler from '../../../utils/standardErrorHandler';
@@ -67,23 +68,17 @@ export default function LateExceptionAddCard({assignment, setReset}) {
           options={students}
           onChange={(_, v) => setSelected(v)}
         />
-        <MuiPickersUtilsProvider utils={DateFnsUtils}>
-          <KeyboardDatePicker
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <DesktopDatePicker
             className={classes.datePicker}
             margin="normal"
             label="Due Date"
-            format="yyyy-MM-dd"
+            format="yyyy-MM-dd hh:mm:ss"
             value={date}
             onChange={(v) => setDate(v)}
+            renderInput={(params) => <TextField {...params} />}
           />
-          <KeyboardTimePicker
-            className={classes.datePicker}
-            margin="normal"
-            label="Time"
-            value={date}
-            onChange={(v) => setDate(v)}
-          />
-        </MuiPickersUtilsProvider>
+        </LocalizationProvider>
       </CardContent>
       <CardActions>
         <Button
@@ -94,7 +89,7 @@ export default function LateExceptionAddCard({assignment, setReset}) {
           startIcon={<SaveIcon/>}
           onClick={save}
         >
-                    Add or Update
+          Add or Update
         </Button>
       </CardActions>
     </Card>