Change material ui from v4 to v5

* change material ui version from 4 to mui 5 * show org dropdown for global admin * Integrate with BE - user management * resolve user management bugs * change text field arrow color * update node version * change alert.js - add diff colors for notifications * resolve linting errors * remove global admin filter changes * remove extra spaces and change to single quotes
buildlyio · May 24, 2022 · 1808eb3 · 1808eb3
1 parent f23c636
commit 1808eb3
Show file tree

Hide file tree

Showing 24 changed files with 1,218 additions and 601 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,7 +3,7 @@ cache: yarn, pip
 services:
   - docker
 node_js:
-  - "10.16.0"
+  - "16.14.2"
 env:
   global:
   - DOCKER_REPO=transparent-path/react-ui

diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ These instructions will get you a copy of the project up and running on your loc
 
 The web application was tested and built with the following versions:
 
-- node v10.16.0
+- node v16.14.2
 - yarn v1.17.3
 
 ### Installing

diff --git a/docs/quickstart.rst b/docs/quickstart.rst
@@ -7,7 +7,7 @@ Excited to get start? This page gives a decent prologue to Buildly React Templat
 you as of now have a Buildly Core instance up and running and also all the project's
 prerequisites installed.
 
-- node v10.16.0
+- node v16.14.2
 - yarn v1.17.3
 
 Installing

diff --git a/package.json b/package.json
@@ -9,21 +9,23 @@
   ],
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.4.4",
-    "@material-ui/core": "^4.10.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.55",
-    "@material-ui/pickers": "^3.2.10",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/lab": "^5.0.0-alpha.72",
+    "@mui/material": "^5.5.0",
+    "@mui/styles": "^5.5.0",
     "@types/node": "^14.10.3",
-    "@types/react": "^16.8.18",
-    "@types/react-dom": "^16.8.4",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
     "i18next": "^15.1.3",
     "i18next-browser-languagedetector": "^3.0.1",
     "midgard-core": "^0.1.4",
     "npm": "^6.9.0",
     "path": "^0.12.7",
     "polished": "^3.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.7.0",
+    "react": "^17.0.2",
     "react-dom": "^16.7.0",
     "react-hot-loader": "^4.6.3",
     "react-i18next": "^10.11.0",
@@ -68,11 +70,11 @@
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^4.6.0",
     "jest": "^23.6.0",
-    "node-sass": "^4.11.0",
+    "node-sass": "^6.0.1",
     "react-docgen": "^4.1.1",
     "react-docgen-typescript": "^1.12.4",
     "redux-mock-store": "^1.5.3",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^10.2.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "ts-jest": "^24.0.2",

diff --git a/src/App.js b/src/App.js
@@ -2,8 +2,8 @@ import * as React from 'react';
 import 'react-notifications/lib/notifications.css';
 import { hot } from 'react-hot-loader';
 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { PrivateRoute } from './routes/Private.route';
 import { oauthService } from './modules/oauth/oauth.service';
 import ContainerDashboard from './layout/Container/Container';
@@ -15,9 +15,9 @@ import theme from './styles/theme';
 import Alert from './components/Alert/Alert';
 import { routes } from './routes/routesConstants';
 
-function App() {
-  return (
-    <Router>
+const App = () => (
+  <Router>
+    <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
         <div className="app">
           <CssBaseline />
@@ -38,8 +38,8 @@ function App() {
         </div>
         <Alert />
       </ThemeProvider>
-    </Router>
-  );
-}
+    </StyledEngineProvider>
+  </Router>
+);
 
 export default hot(module)(App);
diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js
@@ -1,48 +1,77 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import { IconButton, Slide, Snackbar } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import { hideAlert } from '@redux/alert/alert.actions';
 
-function AlertData(props) {
-  return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
 const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
     '& > * + *': {
       marginTop: theme.spacing(2),
     },
   },
+  success: {
+    backgroundColor: '#009900',
+    color: '#000',
+  },
+  info: {
+    backgroundColor: '#0099CC',
+    color: '#000',
+  },
+  warning: {
+    backgroundColor: '#FFCC33',
+    color: '#000',
+  },
+  error: {
+    backgroundColor: '#FF0033',
+    color: '#000',
+  },
 }));
 
-function Alert({ data, dispatch }) {
+const Alert = ({ data, dispatch }) => {
   const classes = useStyles();
   const handleClose = (event, reason) => {
     if (reason === 'clickaway') {
       return;
     }
     dispatch(hideAlert());
   };
+
   return (
     <div className={classes.root}>
-      <Snackbar
-        open={data ? data.open : false}
-        autoHideDuration={4000}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      >
-        {data && (
-          <AlertData onClose={handleClose} severity={data.type}>
-            {data.message}
-          </AlertData>
-        )}
-      </Snackbar>
+      {data && (
+        <Snackbar
+          key={`${data.type}-${data.message}`}
+          open={data.open || false}
+          autoHideDuration={4000}
+          onClose={handleClose}
+          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+          message={data.message}
+          TransitionComponent={(props) => (
+            <Slide {...props} direction="left" />
+          )}
+          classes={{
+            root: classes[data.type],
+          }}
+          action={(
+            <>
+              <IconButton
+                aria-label="close"
+                color="inherit"
+                sx={{ p: 0.5 }}
+                onClick={handleClose}
+              >
+                <CloseIcon />
+              </IconButton>
+            </>
+          )}
+        />
+      )}
     </div>
   );
-}
+};
 
 const mapStateToProps = (state, ownProps) => ({
   ...ownProps,

diff --git a/src/components/Copyright/Copyright.js b/src/components/Copyright/Copyright.js
@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
 import { AppContext } from '@context/App.context';
 
-function Copyright() {
+const Copyright = () => {
   const { title } = useContext(AppContext);
   return (
     <Typography variant="body2" color="textSecondary" align="center">
@@ -16,6 +16,6 @@ function Copyright() {
       .
     </Typography>
   );
-}
+};
 
 export default Copyright;
diff --git a/src/components/InlineEditor/InlineEditor.js b/src/components/InlineEditor/InlineEditor.js
@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import EditIcon from '@material-ui/icons/Edit';
-import TextField from '@material-ui/core/TextField';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
 
 const useStyles = makeStyles((theme) => ({
   nonEditMode: {
@@ -31,9 +31,9 @@ const useStyles = makeStyles((theme) => ({
 /**
  * Component for inline editing.
  */
-export function InlineEditor({
+export const InlineEditor = ({
   id, tag, value, placeholder, disabled, onChange,
-}) {
+}) => {
   const classes = useStyles();
   const [editing, setEditing] = useState(false);
   const [text, setText] = useState(value);
@@ -119,4 +119,4 @@ export function InlineEditor({
       )}
     </Box>
   );
-}
+};
diff --git a/src/components/StyledTable/StyledTable.js b/src/components/StyledTable/StyledTable.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableRow from '@material-ui/core/TableRow';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableBody from '@material-ui/core/TableBody';
-import Box from '@material-ui/core/Box';
+import withStyles from '@mui/styles/withStyles';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import Box from '@mui/material/Box';
 
 const StyledContainer = withStyles((theme) => ({
   root: {
@@ -14,7 +14,7 @@ const StyledContainer = withStyles((theme) => ({
   },
 }))(Box);
 
-export function StyledTable({ columns, rows, sortFn }) {
+export const StyledTable = ({ columns, rows, sortFn }) => {
   const header = columns.map((col, colIndex) => <TableCell key={`tableCol${colIndex}:${col.prop}`}>{col.label}</TableCell>);
   const sortedRows = sortFn ? rows.sort(sortFn) : rows;
   const content = sortedRows.map((row, rowIndex) => (
@@ -41,4 +41,4 @@ export function StyledTable({ columns, rows, sortFn }) {
       </Table>
     </StyledContainer>
   );
-}
+};
diff --git a/src/layout/Container/Container.js b/src/layout/Container/Container.js
@@ -4,8 +4,8 @@ import { UserContext, getUser } from '@context/User.context';
 import TopBar from '@layout/TopBar/TopBar';
 import Profile from '@pages/Profile/Profile';
 import UserManagement from '@pages/UserManagement/UserManagement';
-import MatContainer from '@material-ui/core/Container';
-import { makeStyles } from '@material-ui/core/styles';
+import MatContainer from '@mui/material/Container';
+import makeStyles from '@mui/styles/makeStyles';
 import { routes } from '@routes/routesConstants';
 
 const useStyles = makeStyles((theme) => ({
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
 /**
  * Container for the app layout when the user is authenticated.
  */
-function Container({ location, history }) {
+const Container = ({ location, history }) => {
   const classes = useStyles();
 
   return (
@@ -47,6 +47,6 @@ function Container({ location, history }) {
       </UserContext.Provider>
     </div>
   );
-}
+};
 
 export default Container;
diff --git a/src/layout/TopBar/TopBar.js b/src/layout/TopBar/TopBar.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import IconButton from '@material-ui/core/IconButton';
-import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-import GroupIcon from '@material-ui/icons/Group';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import GroupIcon from '@mui/icons-material/Group';
 import logo from '@assets/topbar-logo.png';
 import { logout } from '@redux/authuser/authuser.actions';
 import { routes } from '@routes/routesConstants';
@@ -34,11 +34,11 @@ const useStyles = makeStyles((theme) => ({
 /**
  * Component for the top bar header.
  */
-function TopBar({
+const TopBar = ({
   history,
   location,
   dispatch,
-}) {
+}) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -67,7 +67,7 @@ function TopBar({
       </Toolbar>
     </AppBar>
   );
-}
+};
 
 const mapStateToProps = (state, ownProps) => ({
   ...ownProps,