webui: upgrade Material UI

19 files changed, 85 insertions, 101 deletions

diff --git a/webui/src/components/Author.tsx b/webui/src/components/Author.tsx
index b9f95aae..92e14d40 100644
--- a/webui/src/components/Author.tsx
+++ b/webui/src/components/Author.tsx
@@ -1,9 +1,8 @@
+import MAvatar from '@mui/material/Avatar';
+import Link from '@mui/material/Link';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 import { Link as RouterLink } from 'react-router-dom';
 
-import MAvatar from '@material-ui/core/Avatar';
-import Link from '@material-ui/core/Link';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-
 import { AuthoredFragment } from '../graphql/fragments.generated';
 
 type Props = AuthoredFragment & {
@@ -14,7 +13,12 @@ type Props = AuthoredFragment & {
 const Author = ({ author, ...props }: Props) => {
   return (
     <Tooltip title={`Goto the ${author.displayName}'s profile.`}>
-      <Link {...props} component={RouterLink} to={`/user/${author.id}`}>
+      <Link
+        {...props}
+        component={RouterLink}
+        to={`/user/${author.id}`}
+        underline="hover"
+      >
         {author.displayName}
       </Link>
     </Tooltip>
diff --git a/webui/src/components/BackToListButton.tsx b/webui/src/components/BackToListButton.tsx
index 8bc75491..a4e4ea9c 100644
--- a/webui/src/components/BackToListButton.tsx
+++ b/webui/src/components/BackToListButton.tsx
@@ -1,9 +1,8 @@
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 import { Link } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-
 const useStyles = makeStyles((theme) => ({
   backButton: {
     position: 'sticky',
diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx
index 6007680f..78b9e901 100644
--- a/webui/src/components/BugTitleForm/BugTitleForm.tsx
+++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { Button, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Button, makeStyles, Typography } from '@material-ui/core';
-
 import { TimelineDocument } from '../../pages/bug/TimelineQuery.generated';
 import IfLoggedIn from '../IfLoggedIn/IfLoggedIn';
 import Author from 'src/components/Author';
@@ -71,11 +71,11 @@ function BugTitleForm({ bug }: Props) {
   const [setTitle, { loading, error }] = useSetTitleMutation();
   const [issueTitle, setIssueTitle] = useState(bug.title);
   const classes = useStyles();
-  let issueTitleInput: any;
+  const issueTitleInput = useRef<HTMLInputElement>();
 
   function isFormValid() {
-    if (issueTitleInput) {
-      return issueTitleInput.value.length > 0;
+    if (issueTitleInput.current) {
+      return issueTitleInput.current.value.length > 0;
     } else {
       return false;
     }
@@ -83,7 +83,7 @@ function BugTitleForm({ bug }: Props) {
 
   function submitNewTitle() {
     if (!isFormValid()) return;
-    if (bug.title === issueTitleInput.value) {
+    if (bug.title === issueTitleInput.current?.value) {
       cancelChange();
       return;
     }
@@ -91,7 +91,7 @@ function BugTitleForm({ bug }: Props) {
       variables: {
         input: {
           prefix: bug.id,
-          title: issueTitleInput.value,
+          title: issueTitleInput.current!!.value,
         },
       },
       refetchQueries: [
@@ -117,9 +117,7 @@ function BugTitleForm({ bug }: Props) {
     return (
       <form className={classes.headerTitle}>
         <BugTitleInput
-          inputRef={(node) => {
-            issueTitleInput = node;
-          }}
+          inputRef={issueTitleInput}
           label="Title"
           variant="outlined"
           fullWidth
diff --git a/webui/src/components/BugTitleForm/BugTitleInput.tsx b/webui/src/components/BugTitleForm/BugTitleInput.tsx
index d2b060a2..11cbbdb6 100644
--- a/webui/src/components/BugTitleForm/BugTitleInput.tsx
+++ b/webui/src/components/BugTitleForm/BugTitleInput.tsx
@@ -1,5 +1,7 @@
-import { createStyles, fade, withStyles, TextField } from '@material-ui/core';
-import { Theme } from '@material-ui/core/styles';
+import { alpha, TextField } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const BugTitleInput = withStyles((theme: Theme) =>
   createStyles({
@@ -14,7 +16,7 @@ const BugTitleInput = withStyles((theme: Theme) =>
       },
       '& input:valid:hover + fieldset': {
         color: theme.palette.text.primary,
-        borderColor: fade(theme.palette.divider, 0.3),
+        borderColor: alpha(theme.palette.divider, 0.3),
         borderWidth: 2,
       },
       '& input:valid:focus + fieldset': {
diff --git a/webui/src/components/CloseBugButton/index.tsx b/webui/src/components/CloseBugButton/index.tsx
index 77b93e7f..70b92392 100644
--- a/webui/src/components/CloseBugButton/index.tsx
+++ b/webui/src/components/CloseBugButton/index.tsx
@@ -1,20 +1,12 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
 
 import { useCloseBugMutation } from './CloseBug.generated';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  closeIssueIcon: {
-    color: theme.palette.secondary.dark,
-    paddingTop: '0.1rem',
-  },
-}));
-
 interface Props {
   bug: BugFragment;
   disabled?: boolean;
@@ -22,7 +14,6 @@ interface Props {
 
 function CloseBugButton({ bug, disabled }: Props) {
   const [closeBug, { loading, error }] = useCloseBugMutation();
-  const classes = useStyles();
 
   function closeBugAction() {
     closeBug({
@@ -54,7 +45,7 @@ function CloseBugButton({ bug, disabled }: Props) {
         variant="contained"
         onClick={() => closeBugAction()}
         disabled={bug.status === 'CLOSED' || disabled}
-        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
+        startIcon={<ErrorOutlineIcon />}
       >
         Close bug
       </Button>
diff --git a/webui/src/components/CloseBugWithCommentButton/index.tsx b/webui/src/components/CloseBugWithCommentButton/index.tsx
index 9663ec3f..efad39b3 100644
--- a/webui/src/components/CloseBugWithCommentButton/index.tsx
+++ b/webui/src/components/CloseBugWithCommentButton/index.tsx
@@ -1,20 +1,12 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
 
 import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  closeIssueIcon: {
-    color: theme.palette.secondary.dark,
-    paddingTop: '0.1rem',
-  },
-}));
-
 interface Props {
   bug: BugFragment;
   comment: string;
@@ -24,7 +16,6 @@ interface Props {
 function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
   const [addCommentAndCloseBug, { loading, error }] =
     useAddCommentAndCloseBugMutation();
-  const classes = useStyles();
 
   function addCommentAndCloseBugAction() {
     addCommentAndCloseBug({
@@ -60,7 +51,7 @@ function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
       <Button
         variant="contained"
         onClick={() => addCommentAndCloseBugAction()}
-        startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
+        startIcon={<ErrorOutlineIcon />}
       >
         Close bug with comment
       </Button>
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index 07322a22..0fde1d95 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -1,11 +1,10 @@
-import { useState, useEffect } from 'react';
+import { Typography } from '@mui/material';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import TextField from '@mui/material/TextField';
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
-
-import { Typography } from '@material-ui/core';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
+import { useState, useEffect } from 'react';
 
 import Content from '../Content';
 
diff --git a/webui/src/components/Content/AnchorTag.tsx b/webui/src/components/Content/AnchorTag.tsx
index 0ded34b6..e9edef95 100644
--- a/webui/src/components/Content/AnchorTag.tsx
+++ b/webui/src/components/Content/AnchorTag.tsx
@@ -1,8 +1,7 @@
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import { makeStyles } from '@material-ui/core/styles';
-
 const useStyles = makeStyles((theme) => ({
   tag: {
     color: theme.palette.text.secondary,
diff --git a/webui/src/components/Content/BlockQuoteTag.tsx b/webui/src/components/Content/BlockQuoteTag.tsx
index d9674b5d..ae6c34f4 100644
--- a/webui/src/components/Content/BlockQuoteTag.tsx
+++ b/webui/src/components/Content/BlockQuoteTag.tsx
@@ -1,7 +1,6 @@
+import makeStyles from '@mui/styles/makeStyles';
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/core/styles';
-
 const useStyles = makeStyles((theme) => ({
   tag: {
     color: theme.palette.text.secondary,
diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx
index 2e12ee45..f6e7d5ba 100644
--- a/webui/src/components/Content/ImageTag.tsx
+++ b/webui/src/components/Content/ImageTag.tsx
@@ -1,7 +1,6 @@
+import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/styles';
-
 const useStyles = makeStyles({
   tag: {
     maxWidth: '100%',
diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx
index 4601cc2d..aeefa655 100644
--- a/webui/src/components/Content/PreTag.tsx
+++ b/webui/src/components/Content/PreTag.tsx
@@ -1,7 +1,6 @@
+import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
-import { makeStyles } from '@material-ui/styles';
-
 const useStyles = makeStyles({
   tag: {
     maxWidth: '100%',
diff --git a/webui/src/components/Date.tsx b/webui/src/components/Date.tsx
index edc531b0..1454fac7 100644
--- a/webui/src/components/Date.tsx
+++ b/webui/src/components/Date.tsx
@@ -1,8 +1,7 @@
+import Tooltip from '@mui/material/Tooltip/Tooltip';
 import moment from 'moment';
 import Moment from 'react-moment';
 
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-
 const HOUR = 1000 * 3600;
 const DAY = 24 * HOUR;
 const WEEK = 7 * DAY;
@@ -10,7 +9,9 @@ const WEEK = 7 * DAY;
 type Props = { date: string };
 const Date = ({ date }: Props) => (
   <Tooltip title={moment(date).format('LLLL')}>
-    <Moment date={date} format="on ll" fromNowDuring={WEEK} />
+    <span>
+      <Moment date={date} format="on ll" fromNowDuring={WEEK} />
+    </span>
   </Tooltip>
 );
 
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index f9053f76..961696d7 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -1,12 +1,12 @@
+import AppBar from '@mui/material/AppBar';
+import Tab, { TabProps } from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import { alpha } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { Link, useLocation } from 'react-router-dom';
 
-import AppBar from '@material-ui/core/AppBar';
-import Tab, { TabProps } from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import Toolbar from '@material-ui/core/Toolbar';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { fade, makeStyles } from '@material-ui/core/styles';
-
 import CurrentIdentity from '../Identity/CurrentIdentity';
 import { LightSwitch } from '../Themer';
 
@@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
   },
   lightSwitch: {
     marginRight: '20px',
-    color: fade(theme.palette.primary.contrastText, 0.5),
+    color: alpha(theme.palette.primary.contrastText, 0.5),
   },
   logo: {
     height: '42px',
diff --git a/webui/src/components/Header/index.tsx b/webui/src/components/Header/index.tsx
index e4dc8d19..8375c74a 100644
--- a/webui/src/components/Header/index.tsx
+++ b/webui/src/components/Header/index.tsx
@@ -1,7 +1,6 @@
+import CssBaseline from '@mui/material/CssBaseline';
 import * as React from 'react';
 
-import CssBaseline from '@material-ui/core/CssBaseline';
-
 import Header from './Header';
 
 type Props = { children: React.ReactNode };
diff --git a/webui/src/components/Identity/CurrentIdentity.tsx b/webui/src/components/Identity/CurrentIdentity.tsx
index 7be2a5f0..e6a396a8 100644
--- a/webui/src/components/Identity/CurrentIdentity.tsx
+++ b/webui/src/components/Identity/CurrentIdentity.tsx
@@ -1,6 +1,4 @@
-import { useState, useRef } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-
+import LockIcon from '@mui/icons-material/Lock';
 import {
   Button,
   ClickAwayListener,
@@ -10,10 +8,11 @@ import {
   MenuList,
   Paper,
   Popper,
-} from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import { makeStyles } from '@material-ui/core/styles';
-import LockIcon from '@material-ui/icons/Lock';
+} from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import makeStyles from '@mui/styles/makeStyles';
+import { useState, useRef } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 
 import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
 
@@ -97,6 +96,7 @@ const CurrentIdentity = () => {
                       className={classes.profileLink}
                       component={RouterLink}
                       to={`/user/${user.id}`}
+                      underline="hover"
                     >
                       Open profile
                     </Link>
diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index 05f6c279..709aceff 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -1,9 +1,6 @@
-import { Chip } from '@material-ui/core';
-import { common } from '@material-ui/core/colors';
-import {
-  darken,
-  getContrastRatio,
-} from '@material-ui/core/styles/colorManipulator';
+import { Chip } from '@mui/material';
+import { common } from '@mui/material/colors';
+import { darken, getContrastRatio } from '@mui/material/styles';
 
 import { Color } from '../gqlTypes';
 import { LabelFragment } from '../graphql/fragments.generated';
diff --git a/webui/src/components/ReopenBugButton/index.tsx b/webui/src/components/ReopenBugButton/index.tsx
index 2433bc60..b6321560 100644
--- a/webui/src/components/ReopenBugButton/index.tsx
+++ b/webui/src/components/ReopenBugButton/index.tsx
@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
diff --git a/webui/src/components/ReopenBugWithCommentButton/index.tsx b/webui/src/components/ReopenBugWithCommentButton/index.tsx
index 54e8b1e7..66bc04c6 100644
--- a/webui/src/components/ReopenBugWithCommentButton/index.tsx
+++ b/webui/src/components/ReopenBugWithCommentButton/index.tsx
@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from 'src/pages/bug/Bug.generated';
 import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx
index 063587e3..9934888d 100644
--- a/webui/src/components/Themer.tsx
+++ b/webui/src/components/Themer.tsx
@@ -1,11 +1,15 @@
-import { createContext, useContext, useState } from 'react';
+import { NightsStayRounded, WbSunnyRounded } from '@mui/icons-material';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { Theme } from '@mui/material/styles';
 import * as React from 'react';
+import { createContext, useContext, useState } from 'react';
 
-import { ThemeProvider } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import { Theme } from '@material-ui/core/styles';
-import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
+declare module '@mui/styles/defaultTheme' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
 
 const ThemeContext = createContext({
   toggleMode: () => {},
@@ -26,6 +30,7 @@ const LightSwitch = ({ className }: LightSwitchProps) => {
         onClick={toggleMode}
         aria-label={description}
         className={className}
+        size="large"
       >
         {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
       </IconButton>
@@ -53,7 +58,9 @@ const Themer = ({ children, lightTheme, darkTheme }: Props) => {
 
   return (
     <ThemeContext.Provider value={{ toggleMode: toggleMode, mode: mode }}>
-      <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider>
+      </StyledEngineProvider>
     </ThemeContext.Provider>
   );
 };