[NEU-156] Upgrade to MUI v5 (#836)

Co-authored-by: Quang Lam <quang.lam2807@gmail.com>
webcatalog · Mar 22, 2022 · e05c9ad · e05c9ad
1 parent 7ace00b
commit e05c9ad
Show file tree

Hide file tree

Showing 111 changed files with 1,182 additions and 997 deletions.
diff --git a/package.json b/package.json
@@ -42,23 +42,26 @@
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@cliqz/adblocker-electron": "1.23.6",
-    "@date-io/date-fns": "1.3.13",
     "@elastic/app-search-javascript": "8.1.0",
     "@elastic/react-search-ui": "1.10.0",
     "@elastic/react-search-ui-views": "1.10.0",
     "@elastic/search-ui-app-search-connector": "1.10.0",
     "@electron/get": "1.14.1",
     "@electron/remote": "2.0.8",
+    "@emotion/react": "11.8.2",
+    "@emotion/styled": "11.8.1",
     "@fontsource/roboto": "4.5.3",
-    "@material-ui/core": "4.12.3",
-    "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.60",
-    "@material-ui/pickers": "3.3.10",
+    "@mui/icons-material": "5.5.1",
+    "@mui/lab": "5.0.0-alpha.74",
+    "@mui/material": "5.5.2",
+    "@mui/styles": "5.5.1",
     "@sentry/electron": "3.0.4",
+    "@types/react": "17.0.41",
+    "@types/react-dom": "17.0.14",
     "ace-builds": "1.4.14",
     "amplitude-js": "8.17.0",
     "auto-launch": "5.0.5",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.4",
     "blueimp-md5": "2.19.0",
     "cheerio": "1.0.0-rc.10",
     "classnames": "2.3.1",
@@ -102,13 +105,13 @@
     "menubar": "9.1.1",
     "node-fetch": "2.6.7",
     "node-machine-id": "1.1.12",
-    "notistack": "1.0.10",
+    "notistack": "2.0.3",
     "prop-types": "15.8.1",
     "pupa": "2.1.1",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-ace": "9.5.0",
     "react-app-rewired": "2.2.1",
-    "react-dom": "16.14.0",
+    "react-dom": "17.0.2",
     "react-redux": "7.2.6",
     "react-scripts": "5.0.0",
     "react-sortable-hoc": "2.0.0",

diff --git a/src/components/add-workspace/app-card.js b/src/components/add-workspace/app-card.js
@@ -2,15 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import { Menu, getCurrentWindow } from '@electron/remote';
 
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import IconButton from '@material-ui/core/IconButton';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { makeStyles } from '@material-ui/core';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 import { useDispatch } from 'react-redux';
 
@@ -22,8 +22,24 @@ import { requestCreateWorkspace, requestTrackAddWorkspace } from '../../senders'
 
 import { updateForm, updateMode } from '../../state/dialog-add-workspace/actions';
 
-const useStyles = makeStyles((theme) => ({
-  card: {
+const PREFIX = 'AppCard';
+
+const classes = {
+  card: `${PREFIX}-card`,
+  appName: `${PREFIX}-appName`,
+  appUrl: `${PREFIX}-appUrl`,
+  paperIcon: `${PREFIX}-paperIcon`,
+  actionContainer: `${PREFIX}-actionContainer`,
+  actionButton: `${PREFIX}-actionButton`,
+  infoContainer: `${PREFIX}-infoContainer`,
+};
+
+const StyledPaper = styled(Paper)((
+  {
+    theme,
+  },
+) => ({
+  [`&.${classes.card}`]: {
     width: '100%',
     boxSizing: 'border-box',
     paddingLeft: theme.spacing(1),
@@ -33,36 +49,42 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
     height: 52,
     marginTop: theme.spacing(1),
-    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+    border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
-  appName: {
+
+  [`& .${classes.appName}`]: {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     fontWeight: 500,
   },
-  appUrl: {
+
+  [`& .${classes.appUrl}`]: {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
   },
-  paperIcon: {
+
+  [`& .${classes.paperIcon}`]: {
     width: 40,
     height: 40,
     borderRadius: 8,
-    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+    border: theme.palette.mode === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
-  actionContainer: {
+
+  [`& .${classes.actionContainer}`]: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     paddingLeft: theme.spacing(1),
   },
-  actionButton: {
+
+  [`& .${classes.actionButton}`]: {
     minWidth: 'auto',
     marginLeft: theme.spacing(1),
   },
-  infoContainer: {
+
+  [`& .${classes.infoContainer}`]: {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
@@ -83,11 +105,10 @@ const AppCard = (props) => {
     url,
   } = props;
 
-  const classes = useStyles();
   const dispatch = useDispatch();
 
   return (
-    <Paper elevation={0} className={classes.card} square>
+    <StyledPaper elevation={0} className={classes.card} square>
       <img
         alt={name}
         className={classes.paperIcon}
@@ -160,7 +181,7 @@ const AppCard = (props) => {
           Add
         </Button>
       </div>
-    </Paper>
+    </StyledPaper>
   );
 };
 

diff --git a/src/components/add-workspace/empty-state.js b/src/components/add-workspace/empty-state.js
@@ -4,8 +4,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(() => ({
   root: {

diff --git a/src/components/add-workspace/enhanced-dialog-title.js b/src/components/add-workspace/enhanced-dialog-title.js
@@ -4,11 +4,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core';
+import MuiDialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -31,7 +31,12 @@ const EnhancedDialogTitle = ({ children, onClose }) => (
   <MuiDialogTitle disableTypography className={classes.root}>
     <Typography variant="h6">{children}</Typography>
     {onClose ? (
-      <IconButton aria-label="Close" className={classes.closeButton} onClick={onClose}>
+      <IconButton
+        aria-label="Close"
+        className={classes.closeButton}
+        onClick={onClose}
+        size="large"
+      >
         <CloseIcon />
       </IconButton>
     ) : null}

diff --git a/src/components/add-workspace/form.js b/src/components/add-workspace/form.js
@@ -6,19 +6,19 @@ import classnames from 'classnames';
 import Color from 'color';
 import { dialog, getCurrentWindow } from '@electron/remote';
 
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Divider from '@material-ui/core/Divider';
-import Badge from '@material-ui/core/Badge';
-import { makeStyles } from '@material-ui/core';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Divider from '@mui/material/Divider';
+import Badge from '@mui/material/Badge';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from '@mui/icons-material/Check';
 
 import getAvatarText from '../../helpers/get-avatar-text';
 import getMailtoUrl from '../../helpers/get-mailto-url';
@@ -105,7 +105,7 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 400,
     textTransform: 'uppercase',
     userSelect: 'none',
-    boxShadow: theme.palette.type === 'dark' ? 'none' : '0 0 1px 1px rgba(0, 0, 0, 0.12)',
+    boxShadow: theme.palette.mode === 'dark' ? 'none' : '0 0 1px 1px rgba(0, 0, 0, 0.12)',
     overflow: 'hidden',
     cursor: 'pointer',
   },
@@ -133,8 +133,8 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
   },
   textAvatar: {
-    background: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black,
-    color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black),
+    background: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,
+    color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black),
   },
   buttonBot: {
     marginTop: theme.spacing(1),
@@ -423,7 +423,12 @@ const AddWorkspaceCustom = () => {
         <Button color="primary" variant="contained" disableElevation className={classes.button} onClick={() => dispatch(save())}>
           Add
         </Button>
-        <Button color="default" variant="text" disableElevation className={classes.button} onClick={() => dispatch(resetForm())}>
+        <Button
+          variant="text"
+          disableElevation
+          className={classes.button}
+          onClick={() => dispatch(resetForm())}
+        >
           Reset
         </Button>
       </div>

diff --git a/src/components/add-workspace/home.js b/src/components/add-workspace/home.js
@@ -7,11 +7,11 @@ import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector';
 import { SearchProvider, WithSearch, Paging } from '@elastic/react-search-ui';
 import '@elastic/react-search-ui-views/lib/styles/styles.css';
 
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import SearchIcon from '@material-ui/icons/Search';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import SearchIcon from '@mui/icons-material/Search';
+import CircularProgress from '@mui/material/CircularProgress';
+import makeStyles from '@mui/styles/makeStyles';
 
 import getStaticGlobal from '../../helpers/get-static-global';
 import isMas from '../../helpers/is-mas';
@@ -218,7 +218,7 @@ const Home = () => {
                       >
                         Your query did not match any apps in our database.
                       </Typography>
-                      <Grid container justify="center" spacing={1} className={classes.noMatchingResultOpts}>
+                      <Grid container justifyContent="center" spacing={1} className={classes.noMatchingResultOpts}>
                         <SubmitAppCard />
                       </Grid>
                     </EmptyState>
@@ -237,11 +237,11 @@ const Home = () => {
                       icon={app.icon_filled.raw}
                       icon128={app.icon_filled_128.raw}
                       requireInstanceUrl={app.require_instance_url
-                        && app.require_instance_url.raw === 1}
+                      && app.require_instance_url.raw === 1}
                     />
                   ))}
                   <SubmitAppCard />
-                  <Grid container justify="center">
+                  <Grid container justifyContent="center">
                     <Paging />
                   </Grid>
                 </>

diff --git a/src/components/add-workspace/index.js b/src/components/add-workspace/index.js
@@ -5,14 +5,14 @@ import React from 'react';
 
 import { useSelector, useDispatch } from 'react-redux';
 
-import { makeStyles } from '@material-ui/core/styles';
-import BottomNavigation from '@material-ui/core/BottomNavigation';
-import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
-import Paper from '@material-ui/core/Paper';
+import makeStyles from '@mui/styles/makeStyles';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import Paper from '@mui/material/Paper';
 
-import ViewListIcon from '@material-ui/icons/ViewList';
-import CreateIcon from '@material-ui/icons/Create';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import ViewListIcon from '@mui/icons-material/ViewList';
+import CreateIcon from '@mui/icons-material/Create';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 import getWorkspaceFriendlyName from '../../helpers/get-workspace-friendly-name';
 

diff --git a/src/components/add-workspace/no-connection.js b/src/components/add-workspace/no-connection.js
@@ -4,10 +4,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from '@material-ui/core/Button';
-import ErrorIcon from '@material-ui/icons/Error';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import ErrorIcon from '@mui/icons-material/Error';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(() => ({
   root: {

diff --git a/src/components/add-workspace/search-box.js b/src/components/add-workspace/search-box.js
@@ -9,14 +9,14 @@ import {
   SearchBox as AppSearchSearchBox,
 } from '@elastic/react-search-ui';
 
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
-import CloseIcon from '@material-ui/icons/Close';
-import RefreshIcon from '@material-ui/icons/Refresh';
+import CloseIcon from '@mui/icons-material/Close';
+import RefreshIcon from '@mui/icons-material/Refresh';
 
 const useStyles = makeStyles((theme) => ({
   toolbarSearchContainer: {
@@ -137,6 +137,7 @@ const SearchBox = () => {
                       debounce: 0,
                       shouldClearFilters: false,
                     })}
+                    size="large"
                   >
                     <CloseIcon fontSize="small" />
                   </IconButton>
@@ -160,6 +161,7 @@ const SearchBox = () => {
                     });
                   }}
                   disabled={isLoading}
+                  size="large"
                 >
                   <RefreshIcon fontSize="small" />
                 </IconButton>