aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src/pages')
-rw-r--r--webui/src/pages/bug/Bug.tsx2
-rw-r--r--webui/src/pages/bug/BugQuery.tsx3
-rw-r--r--webui/src/pages/bug/CommentForm.tsx10
-rw-r--r--webui/src/pages/bug/EditCommentForm.tsx10
-rw-r--r--webui/src/pages/bug/LabelChange.tsx4
-rw-r--r--webui/src/pages/bug/Message.tsx17
-rw-r--r--webui/src/pages/bug/MessageHistoryDialog.tsx42
-rw-r--r--webui/src/pages/bug/SetStatus.tsx4
-rw-r--r--webui/src/pages/bug/SetTitle.tsx4
-rw-r--r--webui/src/pages/bug/Timeline.tsx2
-rw-r--r--webui/src/pages/bug/TimelineQuery.tsx2
-rw-r--r--webui/src/pages/bug/labels/LabelMenu.tsx30
-rw-r--r--webui/src/pages/identity/BugList.tsx7
-rw-r--r--webui/src/pages/identity/Identity.tsx24
-rw-r--r--webui/src/pages/identity/IdentityQuery.tsx2
-rw-r--r--webui/src/pages/list/BugRow.tsx15
-rw-r--r--webui/src/pages/list/Filter.tsx25
-rw-r--r--webui/src/pages/list/FilterToolbar.tsx9
-rw-r--r--webui/src/pages/list/List.tsx4
-rw-r--r--webui/src/pages/list/ListQuery.tsx37
-rw-r--r--webui/src/pages/new/NewBugPage.tsx21
-rw-r--r--webui/src/pages/notfound/NotFoundPage.tsx2
22 files changed, 140 insertions, 136 deletions
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 99f43064..f5b97cc2 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -1,4 +1,4 @@
-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 6b31197d..244b0836 100644
--- a/webui/src/pages/bug/BugQuery.tsx
+++ b/webui/src/pages/bug/BugQuery.tsx
@@ -1,8 +1,7 @@
+import CircularProgress from '@mui/material/CircularProgress';
import * as React from 'react';
import { useParams } from 'react-router-dom';
-import CircularProgress from '@material-ui/core/CircularProgress';
-
import NotFoundPage from '../notfound/NotFoundPage';
import Bug from './Bug';
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 3634f43e..f80b89e1 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -1,9 +1,9 @@
-import { useState, useRef } from 'react';
+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 Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+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 77453941..4da051e6 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -1,9 +1,9 @@
-import { useState, useRef } from 'react';
+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 Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+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 8c88faf2..6b356d14 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -1,5 +1,5 @@
-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 450d5902..a5dbbff0 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -1,12 +1,11 @@
-import { useState } from 'react';
+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 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 { useState } from 'react';
import Author, { Avatar } from 'src/components/Author';
import Content from 'src/components/Content';
@@ -98,6 +97,7 @@ function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) {
aria-haspopup="true"
onClick={handleClickOpen}
className={classes.headerActions}
+ size="large"
>
<HistoryIcon />
</IconButton>
@@ -150,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 c1302196..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 * 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>
diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx
index 87f16267..dfe07071 100644
--- a/webui/src/pages/bug/SetStatus.tsx
+++ b/webui/src/pages/bug/SetStatus.tsx
@@ -1,5 +1,5 @@
-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 39657532..3ec04a0c 100644
--- a/webui/src/pages/bug/SetTitle.tsx
+++ b/webui/src/pages/bug/SetTitle.tsx
@@ -1,5 +1,5 @@
-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 1e17fd0a..fc88edd7 100644
--- a/webui/src/pages/bug/Timeline.tsx
+++ b/webui/src/pages/bug/Timeline.tsx
@@ -1,4 +1,4 @@
-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 52e8a827..ab9e4cd6 100644
--- a/webui/src/pages/bug/TimelineQuery.tsx
+++ b/webui/src/pages/bug/TimelineQuery.tsx
@@ -1,4 +1,4 @@
-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 2c30fcc2..909068fb 100644
--- a/webui/src/pages/bug/labels/LabelMenu.tsx
+++ b/webui/src/pages/bug/labels/LabelMenu.tsx
@@ -1,14 +1,14 @@
-import { useEffect, useRef, useState } from 'react';
+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 { 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 { useEffect, useRef, useState } from 'react';
import { Color } from '../../../gqlTypes';
import {
@@ -109,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(() => {
@@ -125,6 +125,7 @@ function FilterDropdown({
onClick={() => setOpen(!open)}
className={classes.gearBtn}
disableRipple
+ size="large"
>
<SettingsIcon fontSize={'small'} />
</IconButton>
@@ -132,8 +133,6 @@ function FilterDropdown({
<Menu
className={classes.menu}
- getContentAnchorEl={null}
- ref={searchRef}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
@@ -147,7 +146,6 @@ function FilterDropdown({
setOpen(false);
onClose();
}}
- onExited={() => setFilter('')}
anchorEl={buttonRef.current}
PaperProps={{
style: {
@@ -155,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/identity/BugList.tsx b/webui/src/pages/identity/BugList.tsx
index c053d1cf..a7c37a32 100644
--- a/webui/src/pages/identity/BugList.tsx
+++ b/webui/src/pages/identity/BugList.tsx
@@ -1,6 +1,6 @@
-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';
@@ -47,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/Identity.tsx b/webui/src/pages/identity/Identity.tsx
index 786b40d8..19b80b1c 100644
--- a/webui/src/pages/identity/Identity.tsx
+++ b/webui/src/pages/identity/Identity.tsx
@@ -1,13 +1,12 @@
+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';
@@ -98,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>
@@ -112,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.
@@ -121,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.
@@ -130,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 5a3b2616..d18f8c6b 100644
--- a/webui/src/pages/identity/IdentityQuery.tsx
+++ b/webui/src/pages/identity/IdentityQuery.tsx
@@ -9,7 +9,7 @@ import Identity from './Identity';
const UserQuery: React.FC = () => {
const params = useParams<'id'>();
- if (params.id === undefined) throw new Error();
+ if (params.id === undefined) throw new Error('missing route parameters');
const { loading, error, data } = useGetUserByIdQuery({
variables: { userId: params.id },
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index b3380dd7..82582dbe 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -1,14 +1,13 @@
+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 fd2d5a3a..6b3422be 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -1,17 +1,17 @@
+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 { useRef, useState, useEffect } from 'react';
import * as React from 'react';
+import { useRef, useState, useEffect } from 'react';
import { Location, 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 { Color } from '../../gqlTypes';
const CustomTextField = withStyles((theme) => ({
@@ -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);
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 1a3476e2..5e774734 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -1,12 +1,11 @@
import { pipe } from '@arrows/composition';
+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 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 {
Filter,
FilterDropdown,
diff --git a/webui/src/pages/list/List.tsx b/webui/src/pages/list/List.tsx
index 11760509..4d0666ec 100644
--- a/webui/src/pages/list/List.tsx
+++ b/webui/src/pages/list/List.tsx
@@ -1,5 +1,5 @@
-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/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 21818758..6b508e90 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -1,20 +1,20 @@
import { ApolloError } from '@apollo/client';
import { pipe } from '@arrows/composition';
-import { useState, useEffect, useRef } from 'react';
+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 { 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 { useCurrentIdentityQuery } from '../../components/Identity/CurrentIdentity.generated';
import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
@@ -88,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',
@@ -141,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}
/>
@@ -327,7 +327,6 @@ function ListQuery() {
<Menu
open={filterMenuIsOpen}
onClose={() => setFilterMenuIsOpen(false)}
- getContentAnchorEl={null}
anchorEl={filterButtonRef.current}
anchorOrigin={{
vertical: 'bottom',
@@ -382,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 3ab2a92a..0852ef39 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -1,9 +1,9 @@
-import { FormEvent, useState } from 'react';
+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 { Button, Paper } from '@material-ui/core';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-
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 navigate = useNavigate();
+ const issueTitleInput = useRef<HTMLInputElement>(null);
+ const navigate = useNavigate();
function submitNewIssue(e: FormEvent) {
e.preventDefault();
@@ -65,7 +65,10 @@ function NewBugPage() {
const id = data.data?.newBug.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 2fb2a1bb..22e86355 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
import BackToListButton from '../../components/BackToListButton';