MUI 5.0 (#308)

.github/workflows/alpha.yml

@@ -2,7 +2,7 @@ name: 'Alpha Build'
 
 on:
   push:
-    branches: [v472/deps]
+    branches: [v470/material-ui]
 
 jobs:
   build:

README.md

@@ -145,6 +145,12 @@ When using the Docker deployment, your database runs from a container. But if yo
 
 ## Versions History
 
+### Version 4.8.0 (in progress)
+
+- Upgrade to MUI 5.0 (ex Material UI)
+- Migration from Styled Components to Emotion (for compatibility reasons with MUI)
+- ⏫ Upgrading dependencies
+
 ### Version 4.7.2
 
 - Replacing Google OAuth passport library, to try and reduce Google OAuth errors on production

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrospected/backend",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "license": "GNU GPLv3",
   "private": true,
   "scripts": {

backend/src/email/emailSender.ts

@@ -32,6 +32,12 @@ export async function sendVerificationEmail(
   }
 }
 
+type SendGridError = {
+  response: {
+    body: unknown;
+  };
+};
+
 export async function sendResetPassword(
   email: string,
   name: string,
@@ -53,9 +59,8 @@ export async function sendResetPassword(
   };
   try {
     await sendGrid.send(msg);
-  } catch (e) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    console.error('Send grid error: ', e, (e as any).response.body);
+  } catch (e: unknown) {
+    console.error('Send grid error: ', e, (e as SendGridError).response.body);
   }
 }
 
@@ -91,8 +96,7 @@ export async function sendSelfHostWelcome(
   };
   try {
     await sendGrid.send(msg);
-  } catch (e) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    console.error('Send grid error: ', e, (e as any).response.body);
+  } catch (e: unknown) {
+    console.error('Send grid error: ', e, (e as SendGridError).response.body);
   }
 }

common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrospected/common",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "license": "GNU GPLv3",
   "private": true,
   "main": "dist/src/index.js",

frontend/Dockerfile

@@ -21,7 +21,6 @@ RUN yarn --network-timeout 1000000 install
 
 COPY --chown=node:node ./frontend/src ./frontend/src
 COPY --chown=node:node ./frontend/public ./frontend/public
-COPY --chown=node:node ./frontend/config-overrides.js ./frontend/config-overrides.js
 COPY --chown=node:node ./frontend/tsconfig.json ./frontend/tsconfig.json
 COPY --chown=node:node ./frontend/.env ./frontend/.env
 COPY --chown=node:node ./common ./common

frontend/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@retrospected/frontend",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "license": "GNU GPLv3",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/data-grid": "^4.0.0-alpha.35",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/styles": "^4.11.4",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/lab": "^5.0.0-alpha.49",
+    "@mui/material": "^5.0.2",
+    "@mui/styles": "^5.0.1",
+    "@mui/x-data-grid": "^5.0.0-beta.2",
     "@retrospected/common": "*",
     "@sentry/browser": "^6.13.2",
     "@stripe/react-stripe-js": "^1.5.0",
-    "@stripe/stripe-js": "^1.18.0",
+    "@stripe/stripe-js": "^1.19.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.1",
     "@testing-library/react-hooks": "^7.0.2",
@@ -21,16 +23,15 @@
     "@types/lodash": "^4.14.175",
     "@types/md5": "^2.3.1",
     "@types/node": "^16.10.2",
-    "@types/react": "^17.0.25",
+    "@types/react": "^17.0.26",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-color": "^3.0.5",
     "@types/react-copy-to-clipboard": "^5.0.1",
     "@types/react-dom": "^17.0.9",
-    "@types/react-helmet": "^6.1.2",
+    "@types/react-helmet": "^6.1.3",
     "@types/react-router-dom": "^5.3.0",
     "@types/shortid": "^0.0.29",
     "@types/socket.io-client": "^1.4.36",
-    "@types/styled-components": "^5.1.14",
     "@types/uuid": "^8.3.1",
     "bowser": "^2.11.0",
     "core-js": "^3.18.1",
@@ -41,9 +42,8 @@
     "isemail": "^3.2.0",
     "lexorank": "^1.0.4",
     "lodash": "^4.17.21",
-    "material-ui-chip-input": "^1.1.0",
     "md5": "^2.3.0",
-    "notistack": "^1.0.10",
+    "notistack": "^2.0.2",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.1",
     "react": "^17.0.2",
@@ -65,7 +65,6 @@
     "shortid": "^2.2.16",
     "socket.io-client": "4.2.0",
     "source-map-explorer": "^2.5.2",
-    "styled-components": "^5.3.1",
     "typescript": "^4.4.3",
     "uuid": "^8.3.2",
     "whatwg-fetch": "^3.6.2"

frontend/public/index.html

@@ -12,6 +12,8 @@
   <meta name="HandheldFriendly" content="true">
   <meta name="description" content="Free Real-time Agile Retrospective Board for engineering teams" />
   <meta http-equiv="cleartype" content="on">
+  <meta name="theme-color" content="#d1c4e9">
+
 
   <meta property="og:site_name" content="Retrospected" />
   <meta property="og:site" content="https://www.retrospected.com" />

frontend/src/App.tsx

@@ -1,7 +1,8 @@
 import { BrowserRouter } from 'react-router-dom';
-import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import { Helmet } from 'react-helmet';
-import GlobalStyles from './GlobalStyles';
+import { Global } from '@emotion/react';
+import { ThemeProvider } from '@mui/material';
+import globalCss from './GlobalStyles';
 import AuthProvider from './auth/AuthProvider';
 import LanguageProvider from './translations/LanguageProvider';
 import theme from './Theme';
@@ -27,6 +28,7 @@ function App() {
       </Helmet>
       <SnackbarProvider
         maxSnack={3}
+        autoHideDuration={3000}
         anchorOrigin={{
           vertical: 'top',
           horizontal: 'center',
@@ -38,7 +40,7 @@ function App() {
               <AuthProvider>
                 <LanguageProvider>
                   <QuotaManager>
-                    <GlobalStyles />
+                    <Global styles={globalCss} />
                     <ErrorBoundary>
                       <Suspense fallback={<CodeSplitLoader />}>
                         <Layout />

frontend/src/CodeSplitLoader.tsx

@@ -1,5 +1,5 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
-import styled from 'styled-components';
+import CircularProgress from '@mui/material/CircularProgress';
+import styled from '@emotion/styled';
 
 export function CodeSplitLoader() {
   return (

frontend/src/ErrorBoundary.tsx

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import * as Sentry from '@sentry/browser';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 interface ErrorBoundaryState {

frontend/src/GlobalStyles.tsx

@@ -1,16 +1,16 @@
-import { createGlobalStyle } from 'styled-components';
+import { css } from '@emotion/react';
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = css`
   html {
     touch-action: manipulation;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   }
 
   body {
     margin: 0;
     padding: 0;
     background-color: white;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   }
 
   #content {

frontend/src/Layout.tsx

@@ -1,23 +1,23 @@
 import { useEffect, useCallback, lazy, Suspense } from 'react';
 import { useHistory, Redirect, Switch, Route } from 'react-router-dom';
 import { trackPageView } from './track';
-import styled from 'styled-components';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import MenuIcon from '@material-ui/icons/Menu';
+import styled from '@emotion/styled';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import MenuIcon from '@mui/icons-material/Menu';
 import AccountMenu from './auth/AccountMenu';
 import useIsCompatibleBrowser from './hooks/useIsCompatibleBrowser';
 import OutdatedBrowser from './components/OutdatedBrowser';
 import useIsInitialised from './auth/useIsInitialised';
 import useUser from './auth/useUser';
-import { HomeOutlined } from '@material-ui/icons';
+import { HomeOutlined } from '@mui/icons-material';
 import ProPill from './components/ProPill';
 import { CodeSplitLoader } from './CodeSplitLoader';
 import useSidePanel from './views/panel/useSidePanel';
 import useIsLicenced from './global/useIsLicenced';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import { Alert, AlertTitle } from '@mui/material';
 
 const Home = lazy(() => import('./views/Home' /* webpackChunkName: "home" */));
 const Game = lazy(() => import('./views/Game' /* webpackChunkName: "game" */));
@@ -120,11 +120,21 @@ function App() {
       ) : null}
       <AppBar position="sticky">
         <Toolbar>
-          <IconButton color="inherit" aria-label="Menu" onClick={togglePanel}>
+          <IconButton
+            color="inherit"
+            aria-label="Menu"
+            onClick={togglePanel}
+            size="large"
+          >
             <MenuIcon />
           </IconButton>
           <HomeButton>
-            <IconButton color="inherit" aria-label="Home" onClick={goToHome}>
+            <IconButton
+              color="inherit"
+              aria-label="Home"
+              onClick={goToHome}
+              size="large"
+            >
               <HomeOutlined />
             </IconButton>
           </HomeButton>

frontend/src/Theme.ts

@@ -1,27 +1,25 @@
-import { createTheme } from '@material-ui/core/styles';
-import deepPurple from '@material-ui/core/colors/deepPurple';
-import pink from '@material-ui/core/colors/pink';
-import red from '@material-ui/core/colors/red';
-import green from '@material-ui/core/colors/green';
+import { createTheme } from '@mui/material/styles';
+import { colors } from '@mui/material';
 
 const theme = createTheme({
   palette: {
-    primary: deepPurple,
-    secondary: pink,
+    primary: colors.deepPurple,
+    secondary: colors.pink,
   },
-  overrides: {
+  components: {
     MuiDrawer: {
-      paper: {
-        width: '250px',
+      styleOverrides: {
+        paper: {
+          width: '250px',
+        },
       },
     },
   },
-  typography: {},
 });
 
 export const Palette = {
-  positive: green['800'],
-  negative: red['400'],
+  positive: colors.green['800'],
+  negative: colors.red['400'],
 };
 
 export default theme;

frontend/src/auth/AccountMenu.tsx

@@ -1,18 +1,18 @@
 import { useCallback, useState, useRef, useContext } from 'react';
-import styled from 'styled-components';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Button from '@material-ui/core/Button';
-import AccountIcon from '@material-ui/icons/AccountCircle';
+import styled from '@emotion/styled';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '@mui/material/Button';
+import AccountIcon from '@mui/icons-material/AccountCircle';
 import useUser from './useUser';
 import LoginModal from './modal/LoginModal';
 import useTranslation from '../translations/useTranslations';
 import { logout } from '../api';
 import UserContext from './Context';
 import Avatar from '../components/Avatar';
 import { useHistory } from 'react-router-dom';
-import { Star } from '@material-ui/icons';
-import yellow from '@material-ui/core/colors/yellow';
+import { Star } from '@mui/icons-material';
+import { colors } from '@mui/material';
 
 const AccountMenu = () => {
   const translations = useTranslation();
@@ -78,7 +78,7 @@ const AccountMenu = () => {
               <MenuItem onClick={handleSubscribe}>
                 <Star
                   style={{
-                    color: yellow[700],
+                    color: colors.yellow[700],
                     position: 'relative',
                     top: -2,
                     left: -5,

frontend/src/auth/modal/AnonAuth.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
-import Button from '@material-ui/core/Button';
-import Input from '@material-ui/core/Input';
-import { Alert } from '@material-ui/lab';
+import Button from '@mui/material/Button';
+import Input from '@mui/material/Input';
+import { Alert } from '@mui/material';
 import useTranslations, { useLanguage } from '../../translations';
 import { anonymousLogin, updateLanguage } from '../../api';
 import { FullUser } from '@retrospected/common';

frontend/src/auth/modal/LoginModal.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState, useContext } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import AppBar from '@mui/material/AppBar';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import useTranslations from '../../translations';
 import UserContext from '../Context';
 import SocialAuth from './SocialAuth';