diff options
Diffstat (limited to 'webui/src')
59 files changed, 431 insertions, 439 deletions
diff --git a/webui/src/App.tsx b/webui/src/App.tsx index 04da655a..4bf09606 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { Route, Switch } from 'react-router'; +import { Route, Routes } from 'react-router-dom'; import Layout from './components/Header'; import BugPage from './pages/bug'; @@ -11,13 +10,13 @@ import NotFoundPage from './pages/notfound/NotFoundPage'; export default function App() { return ( <Layout> - <Switch> - <Route path="/" exact component={ListPage} /> - <Route path="/new" exact component={NewBugPage} /> - <Route path="/bug/:id" exact component={BugPage} /> - <Route path="/user/:id" exact component={IdentityPage} /> - <Route component={NotFoundPage} /> - </Switch> + <Routes> + <Route path="/" element={<ListPage />} /> + <Route path="/new" element={<NewBugPage />} /> + <Route path="/bug/:id" element={<BugPage />} /> + <Route path="/user/:id" element={<IdentityPage />} /> + <Route element={<NotFoundPage />} /> + </Routes> </Layout> ); } diff --git a/webui/src/apollo.ts b/webui/src/apollo.ts index 99860842..c111dbd8 100644 --- a/webui/src/apollo.ts +++ b/webui/src/apollo.ts @@ -6,6 +6,12 @@ const client = new ApolloClient({ uri: '/graphql', cache: new InMemoryCache({ possibleTypes: introspectionResult.possibleTypes, + typePolicies: { + // TODO: For now, we only query the default repository, so consider it as a singleton + Repository: { + keyFields: [], + }, + }, }), }); diff --git a/webui/src/components/Author.tsx b/webui/src/components/Author.tsx index 593b5d36..92e14d40 100644 --- a/webui/src/components/Author.tsx +++ b/webui/src/components/Author.tsx @@ -1,10 +1,8 @@ -import React from 'react'; +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 & { @@ -15,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 41e1d68a..a4e4ea9c 100644 --- a/webui/src/components/BackToListButton.tsx +++ b/webui/src/components/BackToListButton.tsx @@ -1,10 +1,8 @@ -import React from 'react'; +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 2a3c4db0..78b9e901 100644 --- a/webui/src/components/BugTitleForm/BugTitleForm.tsx +++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx @@ -1,8 +1,8 @@ -import React, { 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/BugTitleForm/SetTitle.graphql b/webui/src/components/BugTitleForm/SetTitle.graphql index b96af155..9dc2d096 100644 --- a/webui/src/components/BugTitleForm/SetTitle.graphql +++ b/webui/src/components/BugTitleForm/SetTitle.graphql @@ -1,7 +1,7 @@ mutation setTitle($input: SetTitleInput!) { setTitle(input: $input) { - bug { - id - } + bug { + id + } } -}
\ No newline at end of file +} diff --git a/webui/src/components/CloseBugButton/CloseBug.graphql b/webui/src/components/CloseBugButton/CloseBug.graphql index e2f4bff2..fc03d1f3 100644 --- a/webui/src/components/CloseBugButton/CloseBug.graphql +++ b/webui/src/components/CloseBugButton/CloseBug.graphql @@ -5,4 +5,4 @@ mutation closeBug($input: CloseBugInput!) { id } } -}
\ No newline at end of file +} diff --git a/webui/src/components/CloseBugButton/index.tsx b/webui/src/components/CloseBugButton/index.tsx index bb154ea7..70b92392 100644 --- a/webui/src/components/CloseBugButton/index.tsx +++ b/webui/src/components/CloseBugButton/index.tsx @@ -1,22 +1,12 @@ -import React from 'react'; - -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; @@ -24,7 +14,6 @@ interface Props { function CloseBugButton({ bug, disabled }: Props) { const [closeBug, { loading, error }] = useCloseBugMutation(); - const classes = useStyles(); function closeBugAction() { closeBug({ @@ -56,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/CloseBugWithComment.graphql b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql index eb736f53..66c84c35 100644 --- a/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql +++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql @@ -8,4 +8,3 @@ mutation AddCommentAndCloseBug($input: AddCommentAndCloseBugInput!) { } } } - diff --git a/webui/src/components/CloseBugWithCommentButton/index.tsx b/webui/src/components/CloseBugWithCommentButton/index.tsx index a0fefa4a..efad39b3 100644 --- a/webui/src/components/CloseBugWithCommentButton/index.tsx +++ b/webui/src/components/CloseBugWithCommentButton/index.tsx @@ -1,22 +1,12 @@ -import React from 'react'; - -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,11 +14,8 @@ interface Props { } function CloseBugWithCommentButton({ bug, comment, postClick }: Props) { - const [ - addCommentAndCloseBug, - { loading, error }, - ] = useAddCommentAndCloseBugMutation(); - const classes = useStyles(); + const [addCommentAndCloseBug, { loading, error }] = + useAddCommentAndCloseBugMutation(); function addCommentAndCloseBugAction() { addCommentAndCloseBug({ @@ -64,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 babd495c..0fde1d95 100644 --- a/webui/src/components/CommentInput/CommentInput.tsx +++ b/webui/src/components/CommentInput/CommentInput.tsx @@ -1,10 +1,10 @@ -import React, { useState, useEffect } 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 { 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 { 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 47d5e2fa..e9edef95 100644 --- a/webui/src/components/Content/AnchorTag.tsx +++ b/webui/src/components/Content/AnchorTag.tsx @@ -1,15 +1,17 @@ -import React from 'react'; +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, }, })); -const AnchorTag = ({ children, href }: React.HTMLProps<HTMLAnchorElement>) => { +const AnchorTag: React.FC = ({ + children, + href, +}: React.HTMLProps<HTMLAnchorElement>) => { const classes = useStyles(); const origin = window.location.origin; const destination = href === undefined ? '' : href; diff --git a/webui/src/components/Content/BlockQuoteTag.tsx b/webui/src/components/Content/BlockQuoteTag.tsx index 18c34d8a..ae6c34f4 100644 --- a/webui/src/components/Content/BlockQuoteTag.tsx +++ b/webui/src/components/Content/BlockQuoteTag.tsx @@ -1,6 +1,5 @@ -import React from 'react'; - -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; +import * as React from 'react'; const useStyles = makeStyles((theme) => ({ tag: { @@ -13,7 +12,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const BlockQuoteTag = (props: React.HTMLProps<HTMLPreElement>) => { +const BlockQuoteTag: React.FC<React.HTMLProps<HTMLElement>> = (props) => { const classes = useStyles(); return <blockquote className={classes.tag} {...props} />; }; diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx index 29b01da3..f6e7d5ba 100644 --- a/webui/src/components/Content/ImageTag.tsx +++ b/webui/src/components/Content/ImageTag.tsx @@ -1,6 +1,5 @@ -import React from 'react'; - -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@mui/styles'; +import * as React from 'react'; const useStyles = makeStyles({ tag: { @@ -8,10 +7,10 @@ const useStyles = makeStyles({ }, }); -const ImageTag = ({ +const ImageTag: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props -}: React.ImgHTMLAttributes<HTMLImageElement>) => { +}) => { const classes = useStyles(); return ( <> diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx index 8e352153..aeefa655 100644 --- a/webui/src/components/Content/PreTag.tsx +++ b/webui/src/components/Content/PreTag.tsx @@ -1,6 +1,5 @@ -import React from 'react'; - -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@mui/styles'; +import * as React from 'react'; const useStyles = makeStyles({ tag: { @@ -9,7 +8,7 @@ const useStyles = makeStyles({ }, }); -const PreTag = (props: React.HTMLProps<HTMLPreElement>) => { +const PreTag: React.FC<React.HTMLProps<HTMLPreElement>> = (props) => { const classes = useStyles(); return <pre className={classes.tag} {...props} />; }; diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx index e4018809..9bf9ff7a 100644 --- a/webui/src/components/Content/index.tsx +++ b/webui/src/components/Content/index.tsx @@ -1,9 +1,11 @@ -import React from 'react'; +import { createElement, Fragment, useEffect, useState } from 'react'; +import * as React from 'react'; +import rehypeReact from 'rehype-react'; import gemoji from 'remark-gemoji'; import html from 'remark-html'; import parse from 'remark-parse'; -import remark2react from 'remark-react'; -import unified from 'unified'; +import remarkRehype from 'remark-rehype'; +import { unified } from 'unified'; import AnchorTag from './AnchorTag'; import BlockQuoteTag from './BlockQuoteTag'; @@ -12,21 +14,31 @@ import PreTag from './PreTag'; type Props = { markdown: string }; const Content: React.FC<Props> = ({ markdown }: Props) => { - const content = unified() - .use(parse) - .use(gemoji) - .use(html) - .use(remark2react, { - remarkReactComponents: { - img: ImageTag, - pre: PreTag, - a: AnchorTag, - blockquote: BlockQuoteTag, - }, - }) - .processSync(markdown).result; + const [Content, setContent] = useState(<></>); - return <>{content}</>; + useEffect(() => { + unified() + .use(parse) + .use(gemoji) + .use(html) + .use(remarkRehype) + .use(rehypeReact, { + createElement, + Fragment, + components: { + img: ImageTag, + pre: PreTag, + a: AnchorTag, + blockquote: BlockQuoteTag, + }, + }) + .process(markdown) + .then((file) => { + setContent(file.result); + }); + }, [markdown]); + + return Content; }; export default Content; diff --git a/webui/src/components/Date.tsx b/webui/src/components/Date.tsx index f9e0a0b2..1454fac7 100644 --- a/webui/src/components/Date.tsx +++ b/webui/src/components/Date.tsx @@ -1,9 +1,7 @@ +import Tooltip from '@mui/material/Tooltip/Tooltip'; import moment from 'moment'; -import React from 'react'; 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; @@ -11,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 866e52db..961696d7 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -1,13 +1,12 @@ -import React from 'react'; +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'; @@ -31,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 42a0cfc1..8375c74a 100644 --- a/webui/src/components/Header/index.tsx +++ b/webui/src/components/Header/index.tsx @@ -1,6 +1,5 @@ -import React from 'react'; - -import CssBaseline from '@material-ui/core/CssBaseline'; +import CssBaseline from '@mui/material/CssBaseline'; +import * as React from 'react'; import Header from './Header'; diff --git a/webui/src/components/Identity/CurrentIdentity.tsx b/webui/src/components/Identity/CurrentIdentity.tsx index 2d62dcdb..e6a396a8 100644 --- a/webui/src/components/Identity/CurrentIdentity.tsx +++ b/webui/src/components/Identity/CurrentIdentity.tsx @@ -1,6 +1,4 @@ -import React 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'; @@ -37,8 +36,8 @@ const CurrentIdentity = () => { const classes = useStyles(); const { loading, error, data } = useCurrentIdentityQuery(); - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef<HTMLButtonElement>(null); + const [open, setOpen] = useState(false); + const anchorRef = useRef<HTMLButtonElement>(null); if (error || loading || !data?.repository?.userIdentity) return null; @@ -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/IfLoggedIn/IfLoggedIn.tsx b/webui/src/components/IfLoggedIn/IfLoggedIn.tsx index ce120da1..965135d9 100644 --- a/webui/src/components/IfLoggedIn/IfLoggedIn.tsx +++ b/webui/src/components/IfLoggedIn/IfLoggedIn.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import { useCurrentIdentityQuery } from '../Identity/CurrentIdentity.generated'; diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx index a1d3c6f9..709aceff 100644 --- a/webui/src/components/Label.tsx +++ b/webui/src/components/Label.tsx @@ -1,11 +1,6 @@ -import React from 'react'; - -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/OpenBug.graphql b/webui/src/components/ReopenBugButton/OpenBug.graphql index cf9e49e5..12673e65 100644 --- a/webui/src/components/ReopenBugButton/OpenBug.graphql +++ b/webui/src/components/ReopenBugButton/OpenBug.graphql @@ -4,4 +4,4 @@ mutation openBug($input: OpenBugInput!) { id } } -}
\ No newline at end of file +} diff --git a/webui/src/components/ReopenBugButton/index.tsx b/webui/src/components/ReopenBugButton/index.tsx index e62c58df..b6321560 100644 --- a/webui/src/components/ReopenBugButton/index.tsx +++ b/webui/src/components/ReopenBugButton/index.tsx @@ -1,7 +1,5 @@ -import React from 'react'; - -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/ReopenBugWithComment.graphql b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql index 4c220208..5258a1aa 100644 --- a/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql +++ b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql @@ -8,4 +8,3 @@ mutation AddCommentAndReopenBug($input: AddCommentAndReopenBugInput!) { } } } - diff --git a/webui/src/components/ReopenBugWithCommentButton/index.tsx b/webui/src/components/ReopenBugWithCommentButton/index.tsx index 0a534f27..66bc04c6 100644 --- a/webui/src/components/ReopenBugWithCommentButton/index.tsx +++ b/webui/src/components/ReopenBugWithCommentButton/index.tsx @@ -1,7 +1,5 @@ -import React from 'react'; - -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'; @@ -15,10 +13,8 @@ interface Props { } function ReopenBugWithCommentButton({ bug, comment, postClick }: Props) { - const [ - addCommentAndReopenBug, - { loading, error }, - ] = useAddCommentAndReopenBugMutation(); + const [addCommentAndReopenBug, { loading, error }] = + useAddCommentAndReopenBugMutation(); function addCommentAndReopenBugAction() { addCommentAndReopenBug({ diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index edf1f352..9934888d 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,10 +1,15 @@ -import React, { 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: () => {}, @@ -25,6 +30,7 @@ const LightSwitch = ({ className }: LightSwitchProps) => { onClick={toggleMode} aria-label={description} className={className} + size="large" > {mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />} </IconButton> @@ -52,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> ); }; diff --git a/webui/src/index.tsx b/webui/src/index.tsx index d3591e1a..d203eb19 100644 --- a/webui/src/index.tsx +++ b/webui/src/index.tsx @@ -1,5 +1,4 @@ import { ApolloProvider } from '@apollo/client'; -import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; 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'; diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 65dd6329..7ef0e106 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -1,8 +1,12 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@mui/material/styles'; -const defaultDarkTheme = createMuiTheme({ +const defaultDarkTheme = createTheme({ palette: { - type: 'dark', + mode: 'dark', + background: { + default: '#303030', + paper: '#424242', + }, primary: { dark: '#263238', main: '#2a393e', diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index 9c57ebe5..bfc454e9 100644 --- a/webui/src/themes/DefaultLight.ts +++ b/webui/src/themes/DefaultLight.ts @@ -1,8 +1,8 @@ -import { createMuiTheme } from '@material-ui/core/styles'; +import { createTheme } from '@mui/material/styles'; -const defaultLightTheme = createMuiTheme({ +const defaultLightTheme = createTheme({ palette: { - type: 'light', + mode: 'light', primary: { dark: '#263238', main: '#5a6b73', |