feat: upgrade material-ui to v5

website/package.json

@@ -11,11 +11,10 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "^5.15.7",
+    "@mui/lab": "^5.0.0-alpha.163",
     "@mui/material": "^5.15.7",
+    "@mui/styles": "^5.15.7",
     "common-tags": "^1.8.2",
     "date-fns": "^3.3.1",
     "google-protobuf": "^4.0.0-rc.1",

website/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Box from '@material-ui/core/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
 import Navigation from './components/Navigation';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { observer } from 'mobx-react';

website/src/components/AddDevice.tsx

@@ -1,19 +1,19 @@
-import Button from '@material-ui/core/Button';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardHeader from '@material-ui/core/CardHeader';
-import Checkbox from '@material-ui/core/Checkbox';
-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 FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import Typography from '@material-ui/core/Typography';
-import AddIcon from '@material-ui/icons/Add';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Checkbox from '@mui/material/Checkbox';
+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 FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Input from '@mui/material/Input';
+import InputLabel from '@mui/material/InputLabel';
+import Typography from '@mui/material/Typography';
+import AddIcon from '@mui/icons-material/Add';
 import { codeBlock } from 'common-tags';
 import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -28,8 +28,8 @@ import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Box from '@material-ui/core/Box';
-import {Warning} from "@material-ui/icons";
+import Box from '@mui/material/Box';
+import {Warning} from "@mui/icons-material";
 
 interface Props {
   onAdd: () => void;

website/src/components/DeviceListItem.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardContent from '@material-ui/core/CardContent';
-import Avatar from '@material-ui/core/Avatar';
-import WifiIcon from '@material-ui/icons/Wifi';
-import WifiOffIcon from '@material-ui/icons/WifiOff';
-import MenuItem from '@material-ui/core/MenuItem';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import Avatar from '@mui/material/Avatar';
+import WifiIcon from '@mui/icons-material/Wifi';
+import WifiOffIcon from '@mui/icons-material/WifiOff';
+import MenuItem from '@mui/material/MenuItem';
 import numeral from 'numeral';
 import { lastSeen } from '../Util';
 import { AppState } from '../AppState';

website/src/components/Devices.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import { observable, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import { grpc } from '../Api';

website/src/components/GetConnected.tsx

@@ -1,15 +1,15 @@
-import { ButtonGroup } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Paper from '@material-ui/core/Paper';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import { GetApp } from '@material-ui/icons';
-import Laptop from '@material-ui/icons/Laptop';
-import PhoneIphone from '@material-ui/icons/PhoneIphone';
+import { ButtonGroup } from '@mui/material';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Paper from '@mui/material/Paper';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import { GetApp } from '@mui/icons-material';
+import Laptop from '@mui/icons-material/Laptop';
+import PhoneIphone from '@mui/icons-material/PhoneIphone';
 import React, { Component, PropsWithChildren } from 'react';
 import { AppState } from '../AppState';
 import { isMobile } from '../Platform';

website/src/components/IconMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Menu from '@material-ui/core/Menu';
+import IconButton from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Menu from '@mui/material/Menu';
 
 interface Props {
   children: React.ReactNode;
@@ -20,7 +20,11 @@ export function IconMenu(props: Props) {
 
   return (
     <div>
-      <IconButton aria-controls="icon-menu" aria-haspopup="true" onClick={handleClick}>
+      <IconButton
+        aria-controls="icon-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+        size="large">
         <MoreVertIcon />
       </IconButton>
       <Menu id="icon-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>

website/src/components/Icons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 // from https://worldvectorlogo.com
 

website/src/components/Info.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { observable, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
-import Popover from '@material-ui/core/Popover';
-import IconButton from '@material-ui/core/IconButton';
-import InfoIcon from '@material-ui/icons/Info';
+import Popover from '@mui/material/Popover';
+import IconButton from '@mui/material/IconButton';
+import InfoIcon from '@mui/icons-material/Info';
 
 interface Props {
   children: React.ReactNode;
@@ -21,27 +21,25 @@ export const Info = observer(class Info extends React.Component<Props> {
   }
 
   render() {
-    return (
-      <>
-        <IconButton onClick={(event) => (this.anchor = event.currentTarget)}>
-          <InfoIcon />
-        </IconButton>
-        <Popover
-          open={!!this.anchor}
-          anchorEl={this.anchor}
-          onClose={() => (this.anchor = undefined)}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'center',
-          }}
-          transformOrigin={{
-            vertical: 'top',
-            horizontal: 'center',
-          }}
-        >
-          <div style={{ padding: 16 }}>{this.props.children}</div>
-        </Popover>
-      </>
-    );
+    return <>
+      <IconButton onClick={(event) => (this.anchor = event.currentTarget)} size="large">
+        <InfoIcon />
+      </IconButton>
+      <Popover
+        open={!!this.anchor}
+        anchorEl={this.anchor}
+        onClose={() => (this.anchor = undefined)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+        <div style={{ padding: 16 }}>{this.props.children}</div>
+      </Popover>
+    </>;
   }
 });

website/src/components/Navigation.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { getCookie } from '../Cookies';
 import { AppState } from '../AppState';
 import { NavLink } from 'react-router-dom';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
-import Button from '@material-ui/core/Button';
-import Chip from '@material-ui/core/Chip';
-import VpnKey from "@material-ui/icons/VpnKey";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import VpnKey from "@mui/icons-material/VpnKey";
 
 const useStyles = makeStyles((theme) => ({
   title: {

website/src/components/PopoverDisplay.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import Popover from '@material-ui/core/Popover';
+import Button from '@mui/material/Button';
+import Popover from '@mui/material/Popover';
 
 interface Props {
   label: string;

website/src/components/Present.tsx

@@ -1,9 +1,9 @@
-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 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 React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 

website/src/components/QRCode.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import qrcode from 'qrcode';
 import { lazy } from '../Util';
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress } from '@mui/material';
 
 interface Props {
   content: string;

website/src/components/Toast.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import Snackbar from '@material-ui/core/Snackbar';
-import Alert from '@material-ui/lab/Alert';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
 
 interface Props {
   intent: 'success' | 'info' | 'warning' | 'error';

website/src/pages/admin/AllDevices.tsx

@@ -1,14 +1,14 @@
-import Button from '@material-ui/core/Button';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Typography from '@material-ui/core/Typography';
-import WifiIcon from '@material-ui/icons/Wifi';
-import WifiOffIcon from '@material-ui/icons/WifiOff';
-import Avatar from "@material-ui/core/Avatar";
+import Button from '@mui/material/Button';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import WifiIcon from '@mui/icons-material/Wifi';
+import WifiOffIcon from '@mui/icons-material/WifiOff';
+import Avatar from "@mui/material/Avatar";
 import { observer } from 'mobx-react';
 import React from 'react';
 import { grpc } from '../../Api';