From fd17d6dd1f7c9fbda4d3c3e2c2eb232bd9086fab Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Tue, 22 Feb 2022 21:50:14 +0100 Subject: webui: upgrade Material UI --- webui/src/pages/bug/Bug.tsx | 2 +- webui/src/pages/bug/BugQuery.tsx | 3 +- webui/src/pages/bug/CommentForm.tsx | 10 +++---- webui/src/pages/bug/EditCommentForm.tsx | 10 +++---- webui/src/pages/bug/LabelChange.tsx | 4 +-- webui/src/pages/bug/Message.tsx | 17 +++++------ webui/src/pages/bug/MessageHistoryDialog.tsx | 42 +++++++++++++--------------- webui/src/pages/bug/SetStatus.tsx | 4 +-- webui/src/pages/bug/SetTitle.tsx | 4 +-- webui/src/pages/bug/Timeline.tsx | 2 +- webui/src/pages/bug/TimelineQuery.tsx | 2 +- webui/src/pages/bug/labels/LabelMenu.tsx | 30 ++++++++++---------- webui/src/pages/identity/BugList.tsx | 7 +++-- webui/src/pages/identity/Identity.tsx | 24 ++++++++++------ webui/src/pages/identity/IdentityQuery.tsx | 2 +- webui/src/pages/list/BugRow.tsx | 15 +++++----- webui/src/pages/list/Filter.tsx | 25 ++++++++--------- webui/src/pages/list/FilterToolbar.tsx | 9 +++--- webui/src/pages/list/List.tsx | 4 +-- webui/src/pages/list/ListQuery.tsx | 37 ++++++++++++------------ webui/src/pages/new/NewBugPage.tsx | 21 +++++++------- webui/src/pages/notfound/NotFoundPage.tsx | 2 +- 22 files changed, 140 insertions(+), 136 deletions(-) (limited to 'webui/src/pages') 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" > @@ -150,6 +150,7 @@ function Message({ bug, op }: Props) { className={classes.headerActions} aria-label="edit message" onClick={() => editComment(comment.id)} + size="large" > 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 { const DialogTitle = withStyles(styles)((props: DialogTitleProps) => { const { children, classes, onClose, ...other } = props; return ( - + {children} {onClose ? ( @@ -141,7 +139,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) { Loading... - + 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(''); const buttonRef = useRef(null); - const searchRef = useRef(null); + const searchRef = useRef(null); const classes = useStyles({ active: false }); useEffect(() => { @@ -125,6 +125,7 @@ function FilterDropdown({ onClick={() => setOpen(!open)} className={classes.gearBtn} disableRipple + size="large" > @@ -132,8 +133,6 @@ function FilterDropdown({ setFilter('')} anchorEl={buttonRef.current} PaperProps={{ style: { @@ -155,9 +153,13 @@ function FilterDropdown({ width: '25ch', }, }} + TransitionProps={{ + onExited: () => setFilter(''), + }} > {hasFilter && ( { 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} 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) => { }} > - + {user?.email} @@ -112,6 +115,7 @@ const Identity = ({ identity }: Props) => { component={RouterLink} to={`/?q=author%3A${user?.id}+sort%3Acreation`} color={'inherit'} + underline="hover" > 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" > 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" > 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(''); const buttonRef = useRef(null); - const searchRef = useRef(null); + const searchRef = useRef(null); const classes = useStyles({ active: false }); useEffect(() => { @@ -180,8 +180,6 @@ function FilterDropdown({ {hasFilter && ( { 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) => ({ ...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 = ({
@@ -327,7 +327,6 @@ function ListQuery() { setFilterMenuIsOpen(false)} - getContentAnchorEl={null} anchorEl={filterButtonRef.current} anchorOrigin={{ vertical: 'bottom', @@ -382,21 +381,21 @@ function ListQuery() { {content}
{previousPage ? ( - + ) : ( - + )}
{loading ? 'Loading' : `Total: ${count}`}
{nextPage ? ( - + ) : ( - + )} 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(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() {
{ - 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'; -- cgit