webui: upgrade Material UI

This commit is contained in:
Quentin Gliech 2022-02-22 21:50:14 +01:00
parent b0eb041e57
commit fd17d6dd1f
No known key found for this signature in database
GPG Key ID: 22D62B84552719FC
46 changed files with 1196 additions and 471 deletions

1177
webui/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,10 +5,12 @@
"dependencies": {
"@apollo/client": "^3.5.9",
"@arrows/composition": "^1.2.2",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/styles": "^4.10.0",
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.4.2",
"@mui/lab": "^5.0.0-alpha.70",
"@mui/material": "^5.4.3",
"@mui/styles": "^5.4.2",
"@types/node": "^17.0.18",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",

View File

@ -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: [],
},
},
}),
});

View File

@ -1,9 +1,8 @@
import MAvatar from '@mui/material/Avatar';
import Link from '@mui/material/Link';
import Tooltip from '@mui/material/Tooltip/Tooltip';
import { Link as RouterLink } from 'react-router-dom';
import MAvatar from '@material-ui/core/Avatar';
import Link from '@material-ui/core/Link';
import Tooltip from '@material-ui/core/Tooltip/Tooltip';
import { AuthoredFragment } from '../graphql/fragments.generated';
type Props = AuthoredFragment & {
@ -14,7 +13,12 @@ type Props = AuthoredFragment & {
const Author = ({ author, ...props }: Props) => {
return (
<Tooltip title={`Goto the ${author.displayName}'s profile.`}>
<Link {...props} component={RouterLink} to={`/user/${author.id}`}>
<Link
{...props}
component={RouterLink}
to={`/user/${author.id}`}
underline="hover"
>
{author.displayName}
</Link>
</Tooltip>

View File

@ -1,9 +1,8 @@
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import Button from '@mui/material/Button';
import makeStyles from '@mui/styles/makeStyles';
import { Link } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
const useStyles = makeStyles((theme) => ({
backButton: {
position: 'sticky',

View File

@ -1,8 +1,8 @@
import { useState } from 'react';
import { Button, Typography } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { Button, makeStyles, Typography } from '@material-ui/core';
import { TimelineDocument } from '../../pages/bug/TimelineQuery.generated';
import IfLoggedIn from '../IfLoggedIn/IfLoggedIn';
import Author from 'src/components/Author';
@ -71,11 +71,11 @@ function BugTitleForm({ bug }: Props) {
const [setTitle, { loading, error }] = useSetTitleMutation();
const [issueTitle, setIssueTitle] = useState(bug.title);
const classes = useStyles();
let issueTitleInput: any;
const issueTitleInput = useRef<HTMLInputElement>();
function isFormValid() {
if (issueTitleInput) {
return issueTitleInput.value.length > 0;
if (issueTitleInput.current) {
return issueTitleInput.current.value.length > 0;
} else {
return false;
}
@ -83,7 +83,7 @@ function BugTitleForm({ bug }: Props) {
function submitNewTitle() {
if (!isFormValid()) return;
if (bug.title === issueTitleInput.value) {
if (bug.title === issueTitleInput.current?.value) {
cancelChange();
return;
}
@ -91,7 +91,7 @@ function BugTitleForm({ bug }: Props) {
variables: {
input: {
prefix: bug.id,
title: issueTitleInput.value,
title: issueTitleInput.current!!.value,
},
},
refetchQueries: [
@ -117,9 +117,7 @@ function BugTitleForm({ bug }: Props) {
return (
<form className={classes.headerTitle}>
<BugTitleInput
inputRef={(node) => {
issueTitleInput = node;
}}
inputRef={issueTitleInput}
label="Title"
variant="outlined"
fullWidth

View File

@ -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': {

View File

@ -1,20 +1,12 @@
import Button from '@material-ui/core/Button';
import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles, Theme } from '@material-ui/core/styles';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import { BugFragment } from 'src/pages/bug/Bug.generated';
import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
import { useCloseBugMutation } from './CloseBug.generated';
const useStyles = makeStyles((theme: Theme) => ({
closeIssueIcon: {
color: theme.palette.secondary.dark,
paddingTop: '0.1rem',
},
}));
interface Props {
bug: BugFragment;
disabled?: boolean;
@ -22,7 +14,6 @@ interface Props {
function CloseBugButton({ bug, disabled }: Props) {
const [closeBug, { loading, error }] = useCloseBugMutation();
const classes = useStyles();
function closeBugAction() {
closeBug({
@ -54,7 +45,7 @@ function CloseBugButton({ bug, disabled }: Props) {
variant="contained"
onClick={() => closeBugAction()}
disabled={bug.status === 'CLOSED' || disabled}
startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
startIcon={<ErrorOutlineIcon />}
>
Close bug
</Button>

View File

@ -1,20 +1,12 @@
import Button from '@material-ui/core/Button';
import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles, Theme } from '@material-ui/core/styles';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import { BugFragment } from 'src/pages/bug/Bug.generated';
import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
const useStyles = makeStyles((theme: Theme) => ({
closeIssueIcon: {
color: theme.palette.secondary.dark,
paddingTop: '0.1rem',
},
}));
interface Props {
bug: BugFragment;
comment: string;
@ -24,7 +16,6 @@ interface Props {
function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
const [addCommentAndCloseBug, { loading, error }] =
useAddCommentAndCloseBugMutation();
const classes = useStyles();
function addCommentAndCloseBugAction() {
addCommentAndCloseBug({
@ -60,7 +51,7 @@ function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
<Button
variant="contained"
onClick={() => addCommentAndCloseBugAction()}
startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
startIcon={<ErrorOutlineIcon />}
>
Close bug with comment
</Button>

View File

@ -1,11 +1,10 @@
import { useState, useEffect } from 'react';
import { Typography } from '@mui/material';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import TextField from '@mui/material/TextField';
import makeStyles from '@mui/styles/makeStyles';
import * as React from 'react';
import { Typography } from '@material-ui/core';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
import { useState, useEffect } from 'react';
import Content from '../Content';

View File

@ -1,8 +1,7 @@
import makeStyles from '@mui/styles/makeStyles';
import * as React from 'react';
import { Link } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
tag: {
color: theme.palette.text.secondary,

View File

@ -1,7 +1,6 @@
import makeStyles from '@mui/styles/makeStyles';
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
tag: {
color: theme.palette.text.secondary,

View File

@ -1,7 +1,6 @@
import { makeStyles } from '@mui/styles';
import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles({
tag: {
maxWidth: '100%',

View File

@ -1,7 +1,6 @@
import { makeStyles } from '@mui/styles';
import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
const useStyles = makeStyles({
tag: {
maxWidth: '100%',

View File

@ -1,8 +1,7 @@
import Tooltip from '@mui/material/Tooltip/Tooltip';
import moment from 'moment';
import Moment from 'react-moment';
import Tooltip from '@material-ui/core/Tooltip/Tooltip';
const HOUR = 1000 * 3600;
const DAY = 24 * HOUR;
const WEEK = 7 * DAY;
@ -10,7 +9,9 @@ const WEEK = 7 * DAY;
type Props = { date: string };
const Date = ({ date }: Props) => (
<Tooltip title={moment(date).format('LLLL')}>
<span>
<Moment date={date} format="on ll" fromNowDuring={WEEK} />
</span>
</Tooltip>
);

View File

@ -1,12 +1,12 @@
import AppBar from '@mui/material/AppBar';
import Tab, { TabProps } from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Toolbar from '@mui/material/Toolbar';
import Tooltip from '@mui/material/Tooltip/Tooltip';
import { alpha } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import { Link, useLocation } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import Tab, { TabProps } from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import Toolbar from '@material-ui/core/Toolbar';
import Tooltip from '@material-ui/core/Tooltip/Tooltip';
import { fade, makeStyles } from '@material-ui/core/styles';
import CurrentIdentity from '../Identity/CurrentIdentity';
import { LightSwitch } from '../Themer';
@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
},
lightSwitch: {
marginRight: '20px',
color: fade(theme.palette.primary.contrastText, 0.5),
color: alpha(theme.palette.primary.contrastText, 0.5),
},
logo: {
height: '42px',

View File

@ -1,7 +1,6 @@
import CssBaseline from '@mui/material/CssBaseline';
import * as React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import Header from './Header';
type Props = { children: React.ReactNode };

View File

@ -1,6 +1,4 @@
import { useState, useRef } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import LockIcon from '@mui/icons-material/Lock';
import {
Button,
ClickAwayListener,
@ -10,10 +8,11 @@ import {
MenuList,
Paper,
Popper,
} from '@material-ui/core';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/core/styles';
import LockIcon from '@material-ui/icons/Lock';
} from '@mui/material';
import Avatar from '@mui/material/Avatar';
import makeStyles from '@mui/styles/makeStyles';
import { useState, useRef } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
@ -97,6 +96,7 @@ const CurrentIdentity = () => {
className={classes.profileLink}
component={RouterLink}
to={`/user/${user.id}`}
underline="hover"
>
Open profile
</Link>

View File

@ -1,9 +1,6 @@
import { Chip } from '@material-ui/core';
import { common } from '@material-ui/core/colors';
import {
darken,
getContrastRatio,
} from '@material-ui/core/styles/colorManipulator';
import { Chip } from '@mui/material';
import { common } from '@mui/material/colors';
import { darken, getContrastRatio } from '@mui/material/styles';
import { Color } from '../gqlTypes';
import { LabelFragment } from '../graphql/fragments.generated';

View File

@ -1,5 +1,5 @@
import Button from '@material-ui/core/Button';
import CircularProgress from '@material-ui/core/CircularProgress';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import { BugFragment } from 'src/pages/bug/Bug.generated';
import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';

View File

@ -1,5 +1,5 @@
import Button from '@material-ui/core/Button';
import CircularProgress from '@material-ui/core/CircularProgress';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import { BugFragment } from 'src/pages/bug/Bug.generated';
import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';

View File

@ -1,11 +1,15 @@
import { createContext, useContext, useState } from 'react';
import { NightsStayRounded, WbSunnyRounded } from '@mui/icons-material';
import { ThemeProvider, StyledEngineProvider } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import { Theme } from '@mui/material/styles';
import * as React from 'react';
import { createContext, useContext, useState } from 'react';
import { ThemeProvider } from '@material-ui/core';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import { Theme } from '@material-ui/core/styles';
import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
const ThemeContext = createContext({
toggleMode: () => {},
@ -26,6 +30,7 @@ const LightSwitch = ({ className }: LightSwitchProps) => {
onClick={toggleMode}
aria-label={description}
className={className}
size="large"
>
{mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
</IconButton>
@ -53,7 +58,9 @@ const Themer = ({ children, lightTheme, darkTheme }: Props) => {
return (
<ThemeContext.Provider value={{ toggleMode: toggleMode, mode: mode }}>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={preferedTheme}>{children}</ThemeProvider>
</StyledEngineProvider>
</ThemeContext.Provider>
);
};

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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>

View File

@ -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>

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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);

View File

@ -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>

View File

@ -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.

View File

@ -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 },

View File

@ -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';

View File

@ -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);

View File

@ -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,

View File

@ -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';

View File

@ -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>
)}

View File

@ -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

View File

@ -1,4 +1,4 @@
import { makeStyles } from '@material-ui/core/styles';
import makeStyles from '@mui/styles/makeStyles';
import BackToListButton from '../../components/BackToListButton';

View File

@ -1,8 +1,8 @@
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@mui/material/styles';
const defaultDarkTheme = createMuiTheme({
const defaultDarkTheme = createTheme({
palette: {
type: 'dark',
mode: 'dark',
primary: {
dark: '#263238',
main: '#2a393e',

View File

@ -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',