Merge pull request #750 from MichaelMure/sandhose/webui-upgrade

Upgrade webui dependencies

28 files changed, 265 insertions, 262 deletions

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index b32b0948..f5b97cc2 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx
index 5d459c42..244b0836 100644
--- a/webui/src/pages/bug/BugQuery.tsx
+++ b/webui/src/pages/bug/BugQuery.tsx
@@ -1,20 +1,18 @@
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
 
 import NotFoundPage from '../notfound/NotFoundPage';
 
 import Bug from './Bug';
 import { useGetBugQuery } from './BugQuery.generated';
 
-type Props = RouteComponentProps<{
-  id: string;
-}>;
+const BugQuery: React.FC = () => {
+  const params = useParams<'id'>();
+  if (params.id === undefined) throw new Error('missing route parameters');
 
-const BugQuery: React.FC<Props> = ({ match }: Props) => {
   const { loading, error, data } = useGetBugQuery({
-    variables: { id: match.params.id },
+    variables: { id: params.id },
   });
   if (loading) return <CircularProgress />;
   if (!data?.repository?.bug) return <NotFoundPage />;
diff --git a/webui/src/pages/bug/CommentForm.graphql b/webui/src/pages/bug/CommentForm.graphql
index 33d21193..f4b61850 100644
--- a/webui/src/pages/bug/CommentForm.graphql
+++ b/webui/src/pages/bug/CommentForm.graphql
@@ -1,5 +1,7 @@
 mutation AddComment($input: AddCommentInput!) {
   addComment(input: $input) {
-    operation { id }
+    operation {
+      id
+    }
   }
 }
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 6d917889..f80b89e1 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useRef } from 'react';
-
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import * as React from 'react';
+import { useState, useRef } from 'react';
 
 import CommentInput from '../../components/CommentInput/CommentInput';
 import CloseBugButton from 'src/components/CloseBugButton';
diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index 8fa659b3..4da051e6 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useRef } from 'react';
-
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import * as React from 'react';
+import { useState, useRef } from 'react';
 
 import CommentInput from '../../components/CommentInput/CommentInput';
 
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index 868d8c9b..6b356d14 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Author from 'src/components/Author';
 import Date from 'src/components/Date';
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 51087faa..a5dbbff0 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-
-import IconButton from '@material-ui/core/IconButton';
-import Paper from '@material-ui/core/Paper';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
-import EditIcon from '@material-ui/icons/Edit';
-import HistoryIcon from '@material-ui/icons/History';
+import EditIcon from '@mui/icons-material/Edit';
+import HistoryIcon from '@mui/icons-material/History';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import makeStyles from '@mui/styles/makeStyles';
+import * as React from 'react';
+import { useState } from 'react';
 
 import Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
@@ -97,6 +97,7 @@ function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) {
         aria-haspopup="true"
         onClick={handleClickOpen}
         className={classes.headerActions}
+        size="large"
       >
         <HistoryIcon />
       </IconButton>
@@ -149,6 +150,7 @@ function Message({ bug, op }: Props) {
                   className={classes.headerActions}
                   aria-label="edit message"
                   onClick={() => editComment(comment.id)}
+                  size="large"
                 >
                   <EditIcon />
                 </IconButton>
diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index df8915d9..77f82d86 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -1,27 +1,24 @@
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MuiAccordion from '@mui/material/Accordion';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import CircularProgress from '@mui/material/CircularProgress';
+import Dialog from '@mui/material/Dialog';
+import MuiDialogContent from '@mui/material/DialogContent';
+import MuiDialogTitle from '@mui/material/DialogTitle';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
 import moment from 'moment';
-import React from 'react';
+import * as React from 'react';
 import Moment from 'react-moment';
 
-import MuiAccordion from '@material-ui/core/Accordion';
-import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
-import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Dialog from '@material-ui/core/Dialog';
-import MuiDialogContent from '@material-ui/core/DialogContent';
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
-import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import Typography from '@material-ui/core/Typography';
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles,
-} from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-
 import Content from '../../components/Content';
 
 import { AddCommentFragment } from './MessageCommentFragment.generated';
@@ -50,13 +47,14 @@ export interface DialogTitleProps extends WithStyles<typeof styles> {
 const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
   const { children, classes, onClose, ...other } = props;
   return (
-    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+    <MuiDialogTitle className={classes.root} {...other}>
       <Typography variant="h6">{children}</Typography>
       {onClose ? (
         <IconButton
           aria-label="close"
           className={classes.closeButton}
           onClick={onClose}
+          size="large"
         >
           <CloseIcon />
         </IconButton>
@@ -141,7 +139,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
           Loading...
         </DialogTitle>
         <DialogContent dividers>
-          <Grid container justify="center">
+          <Grid container justifyContent="center">
             <CircularProgress />
           </Grid>
         </DialogContent>
@@ -179,12 +177,10 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
   const history = comment?.history.slice().reverse();
   const editCount = history?.length === undefined ? 0 : history?.length - 1;
 
-  const handleChange = (panel: string) => (
-    event: React.ChangeEvent<{}>,
-    newExpanded: boolean
-  ) => {
-    setExpanded(newExpanded ? panel : false);
-  };
+  const handleChange =
+    (panel: string) => (event: React.ChangeEvent<{}>, newExpanded: boolean) => {
+      setExpanded(newExpanded ? panel : false);
+    };
 
   const getSummary = (index: number, date: Date) => {
     const desc =
diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx
index f231b917..dfe07071 100644
--- a/webui/src/pages/bug/SetStatus.tsx
+++ b/webui/src/pages/bug/SetStatus.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { Status } from '../../gqlTypes';
 import Author from 'src/components/Author';
diff --git a/webui/src/pages/bug/SetTitle.tsx b/webui/src/pages/bug/SetTitle.tsx
index 057062f7..3ec04a0c 100644
--- a/webui/src/pages/bug/SetTitle.tsx
+++ b/webui/src/pages/bug/SetTitle.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Author from 'src/components/Author';
 import Date from 'src/components/Date';
diff --git a/webui/src/pages/bug/Timeline.tsx b/webui/src/pages/bug/Timeline.tsx
index 60459a53..fc88edd7 100644
--- a/webui/src/pages/bug/Timeline.tsx
+++ b/webui/src/pages/bug/Timeline.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { BugFragment } from './Bug.generated';
 import LabelChange from './LabelChange';
diff --git a/webui/src/pages/bug/TimelineQuery.tsx b/webui/src/pages/bug/TimelineQuery.tsx
index d66c665b..ab9e4cd6 100644
--- a/webui/src/pages/bug/TimelineQuery.tsx
+++ b/webui/src/pages/bug/TimelineQuery.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 
 import { BugFragment } from './Bug.generated';
 import Timeline from './Timeline';
diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 645f472c..909068fb 100644
--- a/webui/src/pages/bug/labels/LabelMenu.tsx
+++ b/webui/src/pages/bug/labels/LabelMenu.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { IconButton } from '@material-ui/core';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { darken } from '@material-ui/core/styles/colorManipulator';
-import CheckIcon from '@material-ui/icons/Check';
-import SettingsIcon from '@material-ui/icons/Settings';
+import CheckIcon from '@mui/icons-material/Check';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { IconButton } from '@mui/material';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import { darken } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import withStyles from '@mui/styles/withStyles';
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Color } from '../../../gqlTypes';
 import {
@@ -108,7 +109,7 @@ function FilterDropdown({
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState<string>('');
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const searchRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
   const classes = useStyles({ active: false });
 
   useEffect(() => {
@@ -124,6 +125,7 @@ function FilterDropdown({
           onClick={() => setOpen(!open)}
           className={classes.gearBtn}
           disableRipple
+          size="large"
         >
           <SettingsIcon fontSize={'small'} />
         </IconButton>
@@ -131,8 +133,6 @@ function FilterDropdown({
 
       <Menu
         className={classes.menu}
-        getContentAnchorEl={null}
-        ref={searchRef}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
@@ -146,7 +146,6 @@ function FilterDropdown({
           setOpen(false);
           onClose();
         }}
-        onExited={() => setFilter('')}
         anchorEl={buttonRef.current}
         PaperProps={{
           style: {
@@ -154,9 +153,13 @@ function FilterDropdown({
             width: '25ch',
           },
         }}
+        TransitionProps={{
+          onExited: () => setFilter(''),
+        }}
       >
         {hasFilter && (
           <CustomTextField
+            inputRef={searchRef}
             onChange={(e) => {
               const { value } = e.target;
               setFilter(value);
diff --git a/webui/src/pages/bug/labels/SetLabel.graphql b/webui/src/pages/bug/labels/SetLabel.graphql
index 44dfae11..6f4ad510 100644
--- a/webui/src/pages/bug/labels/SetLabel.graphql
+++ b/webui/src/pages/bug/labels/SetLabel.graphql
@@ -1,13 +1,19 @@
 mutation SetLabel($input: ChangeLabelInput) {
-    changeLabels(input: $input) {
-        results{
-            status,
-            label{
-                name,
-                color{R},
-                color{G},
-                color{B}
-            }
+  changeLabels(input: $input) {
+    results {
+      status
+      label {
+        name
+        color {
+          R
         }
+        color {
+          G
+        }
+        color {
+          B
+        }
+      }
     }
+  }
 }
diff --git a/webui/src/pages/identity/BugList.tsx b/webui/src/pages/identity/BugList.tsx
index fbddb0fe..a7c37a32 100644
--- a/webui/src/pages/identity/BugList.tsx
+++ b/webui/src/pages/identity/BugList.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
-
-import { Card, Divider, Link, Typography } from '@material-ui/core';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core/styles';
+import { Card, Divider, Link, Typography } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Date from '../../components/Date';
 
@@ -49,6 +47,7 @@ function BugList({ id }: Props) {
                 className={classes.bugLink}
                 href={'/bug/' + bug.id}
                 color={'inherit'}
+                underline="hover"
               >
                 {bug.title}
               </Link>
diff --git a/webui/src/pages/identity/GetBugsByUser.graphql b/webui/src/pages/identity/GetBugsByUser.graphql
index 0f170dc1..38f139ab 100644
--- a/webui/src/pages/identity/GetBugsByUser.graphql
+++ b/webui/src/pages/identity/GetBugsByUser.graphql
@@ -1,12 +1,12 @@
-query GetBugsByUser ($query: String){
-    repository {
-        allBugs(query: $query) {
-            nodes {
-                id
-                title
-                createdAt
-                lastEdit
-            }
-        }
+query GetBugsByUser($query: String) {
+  repository {
+    allBugs(query: $query) {
+      nodes {
+        id
+        title
+        createdAt
+        lastEdit
+      }
     }
+  }
 }
diff --git a/webui/src/pages/identity/GetUserStatistic.graphql b/webui/src/pages/identity/GetUserStatistic.graphql
index 318b860d..a7598320 100644
--- a/webui/src/pages/identity/GetUserStatistic.graphql
+++ b/webui/src/pages/identity/GetUserStatistic.graphql
@@ -1,8 +1,12 @@
-query GetUserStatistic($authorQuery: String!, $participantQuery: String!, $actionQuery: String!) {
+query GetUserStatistic(
+  $authorQuery: String!
+  $participantQuery: String!
+  $actionQuery: String!
+) {
   repository {
     authored: allBugs(query: $authorQuery) {
       totalCount
-    },
+    }
     participated: allBugs(query: $participantQuery) {
       totalCount
     }
diff --git a/webui/src/pages/identity/Identity.tsx b/webui/src/pages/identity/Identity.tsx
index 5170eeea..19b80b1c 100644
--- a/webui/src/pages/identity/Identity.tsx
+++ b/webui/src/pages/identity/Identity.tsx
@@ -1,14 +1,12 @@
-import React from 'react';
+import InfoIcon from '@mui/icons-material/Info';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
+import { Link, Paper, Typography } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 import { Link as RouterLink } from 'react-router-dom';
 
-import { Link, Paper, Typography } from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
-import InfoIcon from '@material-ui/icons/Info';
-import MailOutlineIcon from '@material-ui/icons/MailOutline';
-
 import { IdentityFragment } from '../../components/Identity/IdentityFragment.generated';
 
 import { useGetUserStatisticQuery } from './GetUserStatistic.generated';
@@ -99,7 +97,11 @@ const Identity = ({ identity }: Props) => {
                   }}
                 >
                   <MailOutlineIcon />
-                  <Link href={'mailto:' + user?.email} color={'inherit'}>
+                  <Link
+                    href={'mailto:' + user?.email}
+                    color={'inherit'}
+                    underline="hover"
+                  >
                     {user?.email}
                   </Link>
                 </Typography>
@@ -113,6 +115,7 @@ const Identity = ({ identity }: Props) => {
                 component={RouterLink}
                 to={`/?q=author%3A${user?.id}+sort%3Acreation`}
                 color={'inherit'}
+                underline="hover"
               >
                 <Typography variant="subtitle1">
                   Created {authoredCount} bugs.
@@ -122,6 +125,7 @@ const Identity = ({ identity }: Props) => {
                 component={RouterLink}
                 to={`/?q=participant%3A${user?.id}+sort%3Acreation`}
                 color={'inherit'}
+                underline="hover"
               >
                 <Typography variant="subtitle1">
                   Participated to {participatedCount} bugs.
@@ -131,6 +135,7 @@ const Identity = ({ identity }: Props) => {
                 component={RouterLink}
                 to={`/?q=actor%3A${user?.id}+sort%3Acreation`}
                 color={'inherit'}
+                underline="hover"
               >
                 <Typography variant="subtitle1">
                   Interacted with {actionCount} bugs.
diff --git a/webui/src/pages/identity/IdentityQuery.tsx b/webui/src/pages/identity/IdentityQuery.tsx
index 964a9bac..382116ca 100644
--- a/webui/src/pages/identity/IdentityQuery.tsx
+++ b/webui/src/pages/identity/IdentityQuery.tsx
@@ -1,19 +1,17 @@
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
 
 import { useGetUserByIdQuery } from '../../components/Identity/UserIdentity.generated';
 
 import Identity from './Identity';
 
-type Props = RouteComponentProps<{
-  id: string;
-}>;
+const UserQuery: React.FC = () => {
+  const params = useParams<'id'>();
+  if (params.id === undefined) throw new Error('missing route parameters');
 
-const UserQuery: React.FC<Props> = ({ match }: Props) => {
   const { loading, error, data } = useGetUserByIdQuery({
-    variables: { userId: match.params.id },
+    variables: { userId: params.id },
   });
   if (loading) return <CircularProgress />;
   if (error) return <p>Error: {error}</p>;
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 68a3b299..82582dbe 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import CommentOutlinedIcon from '@mui/icons-material/CommentOutlined';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import TableCell from '@mui/material/TableCell/TableCell';
+import TableRow from '@mui/material/TableRow/TableRow';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import makeStyles from '@mui/styles/makeStyles';
+import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import TableCell from '@material-ui/core/TableCell/TableCell';
-import TableRow from '@material-ui/core/TableRow/TableRow';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
-import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
-import CommentOutlinedIcon from '@material-ui/icons/CommentOutlined';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-
 import Author from 'src/components/Author';
 import Date from 'src/components/Date';
 import Label from 'src/components/Label';
diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 496fb3ba..6b3422be 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -1,16 +1,16 @@
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import CheckIcon from '@mui/icons-material/Check';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import TextField from '@mui/material/TextField';
+import { darken } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import withStyles from '@mui/styles/withStyles';
 import clsx from 'clsx';
-import { LocationDescriptor } from 'history';
-import React, { useRef, useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { darken } from '@material-ui/core/styles/colorManipulator';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import CheckIcon from '@material-ui/icons/Check';
+import * as React from 'react';
+import { useRef, useState, useEffect } from 'react';
+import { Location, Link } from 'react-router-dom';
 
 import { Color } from '../../gqlTypes';
 
@@ -137,7 +137,7 @@ type FilterDropdownProps = {
   dropdown: DropdownTuple[];
   itemActive: (key: string) => boolean;
   icon?: React.ComponentType<SvgIconProps>;
-  to: (key: string) => LocationDescriptor;
+  to: (key: string) => Location;
   hasFilter?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
@@ -153,7 +153,7 @@ function FilterDropdown({
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState<string>('');
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const searchRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
   const classes = useStyles({ active: false });
 
   useEffect(() => {
@@ -180,8 +180,6 @@ function FilterDropdown({
       </button>
       <Menu
         className={classes.labelMenu}
-        getContentAnchorEl={null}
-        ref={searchRef}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
@@ -202,6 +200,7 @@ function FilterDropdown({
       >
         {hasFilter && (
           <CustomTextField
+            inputRef={searchRef}
             onChange={(e) => {
               const { value } = e.target;
               setFilter(value);
@@ -239,7 +238,7 @@ function FilterDropdown({
 
 export type FilterProps = {
   active: boolean;
-  to: LocationDescriptor; // the target on click
+  to: Location; // the target on click
   icon?: React.ComponentType<SvgIconProps>;
   children: React.ReactNode;
 };
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 4ac579f5..5e774734 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -1,11 +1,10 @@
 import { pipe } from '@arrows/composition';
-import { LocationDescriptor } from 'history';
-import React from 'react';
-
-import Toolbar from '@material-ui/core/Toolbar';
-import { makeStyles } from '@material-ui/core/styles';
-import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import Toolbar from '@mui/material/Toolbar';
+import makeStyles from '@mui/styles/makeStyles';
+import * as React from 'react';
+import { Location } from 'react-router-dom';
 
 import {
   Filter,
@@ -68,7 +67,7 @@ function quoteLabel(value: string) {
 
 type Props = {
   query: string;
-  queryLocation: (query: string) => LocationDescriptor;
+  queryLocation: (query: string) => Location;
 };
 
 function FilterToolbar({ query, queryLocation }: Props) {
@@ -110,36 +109,38 @@ function FilterToolbar({ query, queryLocation }: Props) {
   const containsValue = (key: string, value: string): boolean =>
     hasKey(key) && params[key].indexOf(value) !== -1;
   const loc = pipe(stringify, queryLocation);
-  const replaceParam = (key: string, value: string) => (
-    params: Query
-  ): Query => ({
-    ...params,
-    [key]: [value],
-  });
-  const toggleParam = (key: string, value: string) => (
-    params: Query
-  ): Query => ({
-    ...params,
-    [key]: params[key] && params[key].includes(value) ? [] : [value],
-  });
-  const toggleOrAddParam = (key: string, value: string) => (
-    params: Query
-  ): Query => {
-    const values = params[key];
-    return {
+  const replaceParam =
+    (key: string, value: string) =>
+    (params: Query): Query => ({
       ...params,
-      [key]:
-        params[key] && params[key].includes(value)
-          ? values.filter((v) => v !== value)
-          : values
-          ? [...values, value]
-          : [value],
+      [key]: [value],
+    });
+  const toggleParam =
+    (key: string, value: string) =>
+    (params: Query): Query => ({
+      ...params,
+      [key]: params[key] && params[key].includes(value) ? [] : [value],
+    });
+  const toggleOrAddParam =
+    (key: string, value: string) =>
+    (params: Query): Query => {
+      const values = params[key];
+      return {
+        ...params,
+        [key]:
+          params[key] && params[key].includes(value)
+            ? values.filter((v) => v !== value)
+            : values
+            ? [...values, value]
+            : [value],
+      };
     };
-  };
-  const clearParam = (key: string) => (params: Query): Query => ({
-    ...params,
-    [key]: [],
-  });
+  const clearParam =
+    (key: string) =>
+    (params: Query): Query => ({
+      ...params,
+      [key]: [],
+    });
 
   return (
     <Toolbar className={classes.toolbar}>
diff --git a/webui/src/pages/list/List.tsx b/webui/src/pages/list/List.tsx
index c1cae122..4d0666ec 100644
--- a/webui/src/pages/list/List.tsx
+++ b/webui/src/pages/list/List.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import Table from '@material-ui/core/Table/Table';
-import TableBody from '@material-ui/core/TableBody/TableBody';
+import Table from '@mui/material/Table/Table';
+import TableBody from '@mui/material/TableBody/TableBody';
 
 import BugRow from './BugRow';
 import { BugListFragment } from './ListQuery.generated';
diff --git a/webui/src/pages/list/ListIdentities.graphql b/webui/src/pages/list/ListIdentities.graphql
index 73073ae8..1d909496 100644
--- a/webui/src/pages/list/ListIdentities.graphql
+++ b/webui/src/pages/list/ListIdentities.graphql
@@ -1,13 +1,13 @@
 query ListIdentities {
-    repository {
-        allIdentities {
-            nodes {
-                id
-                humanId
-                name
-                email
-                displayName
-            }
-        }
+  repository {
+    allIdentities {
+      nodes {
+        id
+        humanId
+        name
+        email
+        displayName
+      }
     }
+  }
 }
diff --git a/webui/src/pages/list/ListLabels.graphql b/webui/src/pages/list/ListLabels.graphql
index 8b2f561a..35f25e25 100644
--- a/webui/src/pages/list/ListLabels.graphql
+++ b/webui/src/pages/list/ListLabels.graphql
@@ -1,10 +1,14 @@
 query ListLabels {
-    repository {
-        validLabels {
-            nodes {
-                name,
-                color{R,G,B}
-            }
+  repository {
+    validLabels {
+      nodes {
+        name
+        color {
+          R
+          G
+          B
         }
+      }
     }
+  }
 }
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 9aefd02d..6b508e90 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -1,18 +1,19 @@
 import { ApolloError } from '@apollo/client';
 import { pipe } from '@arrows/composition';
-import React, { useState, useEffect, useRef } from 'react';
-import { useLocation, useHistory, Link } from 'react-router-dom';
-
-import { Button, FormControl, Menu, MenuItem } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import InputBase from '@material-ui/core/InputBase';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import Skeleton from '@material-ui/lab/Skeleton';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import { Button, FormControl, Menu, MenuItem } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import InputBase from '@mui/material/InputBase';
+import Paper from '@mui/material/Paper';
+import Skeleton from '@mui/material/Skeleton';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
 
 import { useCurrentIdentityQuery } from '../../components/Identity/CurrentIdentity.generated';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
@@ -87,7 +88,7 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
     ...theme.typography.h5,
     padding: theme.spacing(8),
     textAlign: 'center',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.primary,
     borderBottomColor: theme.palette.divider,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
@@ -140,7 +141,7 @@ const Placeholder: React.FC<PlaceholderProps> = ({
         <div key={i} className={classes.placeholderRow}>
           <Skeleton
             className={classes.placeholderRowStatus}
-            variant="circle"
+            variant="circular"
             width={20}
             height={20}
           />
@@ -184,7 +185,7 @@ const Error: React.FC<ErrorProps> = ({ error }: ErrorProps) => {
 
 function ListQuery() {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = new URLSearchParams(location.search);
   const query = params.has('q') ? params.get('q') || '' : 'status:open';
 
@@ -289,7 +290,7 @@ function ListQuery() {
 
   const formSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    history.push(queryLocation(input));
+    navigate(queryLocation(input));
   };
 
   const {
@@ -304,12 +305,12 @@ function ListQuery() {
 
   const loc = pipe(stringify, queryLocation);
   const qparams: Query = parse(query);
-  const replaceParam = (key: string, value: string) => (
-    params: Query
-  ): Query => ({
-    ...params,
-    [key]: [value],
-  });
+  const replaceParam =
+    (key: string, value: string) =>
+    (params: Query): Query => ({
+      ...params,
+      [key]: [value],
+    });
 
   return (
     <Paper className={classes.main}>
@@ -326,7 +327,6 @@ function ListQuery() {
             <Menu
               open={filterMenuIsOpen}
               onClose={() => setFilterMenuIsOpen(false)}
-              getContentAnchorEl={null}
               anchorEl={filterButtonRef.current}
               anchorOrigin={{
                 vertical: 'bottom',
@@ -381,21 +381,21 @@ function ListQuery() {
       {content}
       <div className={classes.pagination}>
         {previousPage ? (
-          <IconButton component={Link} to={previousPage}>
+          <IconButton component={Link} to={previousPage} size="large">
             <KeyboardArrowLeft />
           </IconButton>
         ) : (
-          <IconButton disabled>
+          <IconButton disabled size="large">
             <KeyboardArrowLeft />
           </IconButton>
         )}
         <div>{loading ? 'Loading' : `Total: ${count}`}</div>
         {nextPage ? (
-          <IconButton component={Link} to={nextPage}>
+          <IconButton component={Link} to={nextPage} size="large">
             <KeyboardArrowRight />
           </IconButton>
         ) : (
-          <IconButton disabled>
+          <IconButton disabled size="large">
             <KeyboardArrowRight />
           </IconButton>
         )}
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index cdec3558..0852ef39 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -1,8 +1,8 @@
-import React, { FormEvent, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-
-import { Button, Paper } from '@material-ui/core';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { Button, Paper } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import { FormEvent, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
@@ -48,8 +48,8 @@ function NewBugPage() {
   const [issueComment, setIssueComment] = useState('');
   const classes = useStyles();
 
-  let issueTitleInput: any;
-  let history = useHistory();
+  const issueTitleInput = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
 
   function submitNewIssue(e: FormEvent) {
     e.preventDefault();
@@ -63,9 +63,12 @@ function NewBugPage() {
       },
     }).then(function (data) {
       const id = data.data?.newBug.bug.id;
-      history.push('/bug/' + id);
+      navigate('/bug/' + id);
     });
-    issueTitleInput.value = '';
+
+    if (issueTitleInput.current) {
+      issueTitleInput.current.value = '';
+    }
   }
 
   function isFormValid() {
@@ -79,9 +82,7 @@ function NewBugPage() {
     <Paper className={classes.main}>
       <form className={classes.form} onSubmit={submitNewIssue}>
         <BugTitleInput
-          inputRef={(node) => {
-            issueTitleInput = node;
-          }}
+          inputRef={issueTitleInput}
           label="Title"
           variant="outlined"
           fullWidth
diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
index 2c6f6854..22e86355 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import BackToListButton from '../../components/BackToListButton';