refactor: upgrade to react@18

finos · Oct 6, 2024 · 3da5250 · 3da5250
1 parent 265acfe
commit 3da5250
Show file tree

Hide file tree

Showing 51 changed files with 785 additions and 437 deletions.
diff --git a/.github/workflows/unused-dependencies.yml b/.github/workflows/unused-dependencies.yml
@@ -1,8 +1,8 @@
 name: 'Unused Dependencies'
 on: [pull_request]
 
-permissions: 
-  contents: read 
+permissions:
+  contents: read
 
 jobs:
   unused-dependecies:
@@ -15,11 +15,10 @@ jobs:
         with:
           node-version: '18.x'
       - name: 'Run depcheck'
-        run: | 
-          npx depcheck --skip-missing --ignores="@babel/*,@commitlint/*,eslint,eslint-*,husky,mocha,concurrently,nyc,prettier"
+        run: |
+          npx depcheck --skip-missing --ignores="@babel/*,@commitlint/*,@emotion/*,eslint,eslint-*,husky,mocha,concurrently,nyc,prettier"
           echo $?
           if [[ $? == 1 ]]; then
             echo "Unused dependencies or devDependencies found"
             exit 1
           fi
-
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,8 +29,11 @@
   "author": "Paul Groves",
   "license": "Apache-2.0",
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "4.11.3",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.2",
+    "@mui/material": "^6.1.2",
+    "@mui/styles": "^6.1.2",
     "@primer/octicons-react": "^19.8.0",
     "@seald-io/nedb": "^4.0.2",
     "axios": "^1.6.0",
@@ -62,8 +65,8 @@
     "passport-local": "^1.0.0",
     "perfect-scrollbar": "^1.5.5",
     "prop-types": "15.8.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "6.26.2",
     "uuid": "^10.0.0",
     "yargs": "^17.7.2"

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { createBrowserHistory } from 'history';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 // core components
 import Admin from './ui/layouts/Admin';
@@ -10,13 +11,18 @@ import './ui/assets/css/material-dashboard-react.css';
 
 const hist = createBrowserHistory();
 
-ReactDOM.render(
-  <Router history={hist}>
-    <Routes>
-      <Route exact path='/admin/*' element={<Admin />} />
-      <Route exact path='/login' element={<Login />} />
-      <Route exact path='/' element={<Navigate from='/' to='/admin/repo' />} />
-    </Routes>
-  </Router>,
-  document.getElementById('root'),
+const container = document.getElementById('root');
+const root = createRoot(container);
+const theme = createTheme();
+
+root.render(
+  <ThemeProvider theme={theme}>
+    <Router history={hist}>
+      <Routes>
+        <Route exact path='/admin/*' element={<Admin />} />
+        <Route exact path='/login' element={<Login />} />
+        <Route exact path='/' element={<Navigate from='/' to='/admin/repo' />} />
+      </Routes>
+    </Router>
+  </ThemeProvider>,
 );
diff --git a/src/routes.jsx b/src/routes.jsx
@@ -16,7 +16,7 @@
 
 */
 
-import Person from '@material-ui/icons/Person';
+import { Person } from '@mui/icons-material';
 import OpenPushRequests from './ui/views/OpenPushRequests/OpenPushRequests';
 import PushDetails from './ui/views/PushDetails/PushDetails';
 import User from './ui/views/User/User';
@@ -26,7 +26,7 @@ import RepoList from './ui/views/RepoList/RepoList';
 
 import { RepoIcon } from '@primer/octicons-react';
 
-import { Group, AccountCircle, Dashboard } from '@material-ui/icons';
+import { Group, AccountCircle, Dashboard } from '@mui/icons-material';
 
 const dashboardRoutes = [
   {

diff --git a/src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.js b/src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.js
@@ -9,7 +9,7 @@ const headerLinksStyle = (theme) => ({
     '& > div': {
       marginTop: '0',
     },
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       margin: '10px 15px !important',
       float: 'none !important',
       paddingTop: '1px',
@@ -29,7 +29,7 @@ const headerLinksStyle = (theme) => ({
     margin: '0px',
   },
   buttonLink: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       display: 'flex',
       margin: '10px 15px 0',
       width: '-webkit-fill-available',
@@ -54,7 +54,7 @@ const headerLinksStyle = (theme) => ({
     },
   },
   searchButton: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       top: '-50px !important',
       marginRight: '22px',
       float: 'right',
@@ -86,20 +86,20 @@ const headerLinksStyle = (theme) => ({
       verticalAlign: 'middle',
       display: 'block',
     },
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       ...defaultFont,
       fontSize: '14px',
       marginRight: '8px',
     },
   },
   manager: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: '100%',
     },
     display: 'inline-block',
   },
   searchWrapper: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: '-webkit-fill-available',
       margin: '10px 15px 0',
     },

diff --git a/src/ui/assets/jss/material-dashboard-react/components/rtlHeaderLinksStyle.js b/src/ui/assets/jss/material-dashboard-react/components/rtlHeaderLinksStyle.js
@@ -8,7 +8,7 @@ const headerLinksStyle = (theme) => ({
     '& > div': {
       marginTop: '0',
     },
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       margin: '10px 15px !important',
       float: 'none !important',
       paddingTop: '1px',
@@ -28,7 +28,7 @@ const headerLinksStyle = (theme) => ({
     margin: '0px',
   },
   buttonLink: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       display: 'flex',
       margin: '10px 15px 0',
       width: '-webkit-fill-available',
@@ -53,7 +53,7 @@ const headerLinksStyle = (theme) => ({
     },
   },
   searchButton: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       top: '-50px !important',
       marginRight: '22px',
       float: 'right',
@@ -85,20 +85,20 @@ const headerLinksStyle = (theme) => ({
       verticalAlign: 'middle',
       display: 'block',
     },
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       ...defaultFont,
       fontSize: '14px',
       marginRight: '8px',
     },
   },
   manager: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: '100%',
     },
     display: 'inline-block',
   },
   searchWrapper: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: '-webkit-fill-available',
       margin: '10px 15px 0',
     },

diff --git a/src/ui/assets/jss/material-dashboard-react/components/sidebarStyle.js b/src/ui/assets/jss/material-dashboard-react/components/sidebarStyle.js
@@ -30,7 +30,7 @@ const sidebarStyle = (theme) => ({
       position: 'fixed',
       height: '100%',
     },
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: drawerWidth,
       ...boxShadow,
       position: 'fixed',
@@ -55,7 +55,7 @@ const sidebarStyle = (theme) => ({
       left: 'auto !important',
       right: '0 !important',
     },
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       left: '0  !important',
       right: 'auto !important',
     },

diff --git a/src/ui/assets/jss/material-dashboard-react/dropdownStyle.js b/src/ui/assets/jss/material-dashboard-react/dropdownStyle.js
@@ -10,7 +10,7 @@ import {
 
 const dropdownStyle = (theme) => ({
   buttonLink: {
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('lg')]: {
       display: 'flex',
       marginLeft: '30px',
       width: 'auto',
@@ -20,7 +20,7 @@ const dropdownStyle = (theme) => ({
     width: '20px',
     height: '20px',
     zIndex: '4',
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('lg')]: {
       display: 'block',
       width: '30px',
       height: '30px',
@@ -37,7 +37,7 @@ const dropdownStyle = (theme) => ({
     pointerEvents: 'none',
   },
   popperResponsive: {
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('lg')]: {
       zIndex: '1640',
       position: 'static',
       float: 'none',
@@ -51,7 +51,7 @@ const dropdownStyle = (theme) => ({
     },
   },
   popperNav: {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       position: 'static !important',
       left: 'unset !important',
       top: 'unset !important',

diff --git a/src/ui/components/Card/Card.jsx b/src/ui/components/Card/Card.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/Card/CardAvatar.jsx b/src/ui/components/Card/CardAvatar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardAvatarStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/Card/CardBody.jsx b/src/ui/components/Card/CardBody.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardBodyStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/Card/CardFooter.jsx b/src/ui/components/Card/CardFooter.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardFooterStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/Card/CardHeader.jsx b/src/ui/components/Card/CardHeader.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardHeaderStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/Card/CardIcon.jsx b/src/ui/components/Card/CardIcon.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import styles from '../../assets/jss/material-dashboard-react/components/cardIconStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/CustomButtons/Button.jsx b/src/ui/components/CustomButtons/Button.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
 import styles from '../../assets/jss/material-dashboard-react/components/buttonStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/CustomButtons/CodeActionButton.jsx b/src/ui/components/CustomButtons/CodeActionButton.jsx
@@ -1,5 +1,5 @@
-import Popper from '@material-ui/core/Popper';
-import Paper from '@material-ui/core/Paper';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
 import {
   CheckIcon,
   ChevronDownIcon,

diff --git a/src/ui/components/CustomInput/CustomInput.jsx b/src/ui/components/CustomInput/CustomInput.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
-import Clear from '@material-ui/icons/Clear';
-import Check from '@material-ui/icons/Check';
+import makeStyles from '@mui/styles/makeStyles';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Input from '@mui/material/Input';
+import { Clear, Check } from '@mui/icons-material';
 import styles from '../../assets/jss/material-dashboard-react/components/customInputStyle';
 
 const useStyles = makeStyles(styles);

diff --git a/src/ui/components/CustomTabs/CustomTabs.jsx b/src/ui/components/CustomTabs/CustomTabs.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import makeStyles from '@mui/styles/makeStyles';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import Card from '../Card/Card';
 import CardBody from '../Card/CardBody';
 import CardHeader from '../Card/CardHeader';

diff --git a/src/ui/components/Footer/Footer.jsx b/src/ui/components/Footer/Footer.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import ListItem from '@material-ui/core/ListItem';
-import List from '@material-ui/core/List';
+import makeStyles from '@mui/styles/makeStyles';
+import ListItem from '@mui/material/ListItem';
+import List from '@mui/material/List';
 import styles from '../../assets/jss/material-dashboard-react/components/footerStyle';
 import { MarkGithubIcon } from '@primer/octicons-react';
 

diff --git a/src/ui/components/Grid/GridContainer.jsx b/src/ui/components/Grid/GridContainer.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import Grid from '@mui/material/Grid';
 
 const styles = {
   grid: {

diff --git a/src/ui/components/Grid/GridItem.jsx b/src/ui/components/Grid/GridItem.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import Grid from '@mui/material/Grid';
 
 const styles = {
   grid: {