diff options
Diffstat (limited to 'webui/src/pages')
| -rw-r--r-- | webui/src/pages/bug/Bug.tsx | 19 | ||||
| -rw-r--r-- | webui/src/pages/bug/BugQuery.tsx | 4 | ||||
| -rw-r--r-- | webui/src/pages/bug/CommentForm.tsx | 1 | ||||
| -rw-r--r-- | webui/src/pages/list/FilterToolbar.tsx | 2 | ||||
| -rw-r--r-- | webui/src/pages/new/NewBugPage.tsx | 11 | ||||
| -rw-r--r-- | webui/src/pages/notfound/NotFoundPage.tsx | 52 |
6 files changed, 77 insertions, 12 deletions
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index d85c5296..3b6b61e0 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -18,11 +18,17 @@ const useStyles = makeStyles((theme) => ({ maxWidth: 1000, margin: 'auto', marginTop: theme.spacing(4), - overflow: 'hidden', }, header: { - marginLeft: theme.spacing(3) + 40, marginRight: theme.spacing(2), + marginLeft: theme.spacing(3) + 40, + }, + title: { + ...theme.typography.h5, + }, + id: { + ...theme.typography.subtitle1, + marginLeft: theme.spacing(1), }, container: { display: 'flex', @@ -36,11 +42,11 @@ const useStyles = makeStyles((theme) => ({ marginRight: theme.spacing(2), minWidth: 400, }, - sidebar: { + rightSidebar: { marginTop: theme.spacing(2), flex: '0 0 200px', }, - sidebarTitle: { + rightSidebarTitle: { fontWeight: 'bold', }, labelList: { @@ -75,7 +81,6 @@ function Bug({ bug }: Props) { <div className={classes.header}> <BugTitleForm bug={bug} /> </div> - <div className={classes.container}> <div className={classes.timeline}> <TimelineQuery id={bug.id} /> @@ -87,8 +92,8 @@ function Bug({ bug }: Props) { )} </IfLoggedIn> </div> - <div className={classes.sidebar}> - <span className={classes.sidebarTitle}>Labels</span> + <div className={classes.rightSidebar}> + <span className={classes.rightSidebarTitle}>Labels</span> <ul className={classes.labelList}> {bug.labels.length === 0 && ( <span className={classes.noLabel}>None yet</span> diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx index 2a70a2f8..5d459c42 100644 --- a/webui/src/pages/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -3,6 +3,8 @@ import { RouteComponentProps } from 'react-router-dom'; import CircularProgress from '@material-ui/core/CircularProgress'; +import NotFoundPage from '../notfound/NotFoundPage'; + import Bug from './Bug'; import { useGetBugQuery } from './BugQuery.generated'; @@ -15,8 +17,8 @@ const BugQuery: React.FC<Props> = ({ match }: Props) => { variables: { id: match.params.id }, }); if (loading) return <CircularProgress />; + if (!data?.repository?.bug) return <NotFoundPage />; if (error) return <p>Error: {error}</p>; - if (!data?.repository?.bug) return <p>404.</p>; return <Bug bug={data.repository.bug} />; }; diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 773e7d0e..6d27e398 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -28,6 +28,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({ }, actions: { display: 'flex', + gap: '1em', justifyContent: 'flex-end', }, greenButton: { diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index e4cd8e6a..74eefe4c 100644 --- a/webui/src/pages/list/FilterToolbar.tsx +++ b/webui/src/pages/list/FilterToolbar.tsx @@ -40,7 +40,7 @@ function CountingFilter({ query, children, ...props }: CountingFilterProps) { variables: { query }, }); - var prefix; + let prefix; if (loading) prefix = '...'; else if (error || !data?.repository) prefix = '???'; // TODO: better prefixes & error handling diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index 96afb56a..4dc60e3c 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -1,7 +1,7 @@ import React, { FormEvent, useState } from 'react'; +import { useHistory } from 'react-router-dom'; -import { Button } from '@material-ui/core'; -import Paper from '@material-ui/core/Paper'; +import { Button, Paper } from '@material-ui/core'; import { makeStyles, Theme } from '@material-ui/core/styles'; import BugTitleInput from '../../components/BugTitleForm/BugTitleInput'; @@ -47,7 +47,9 @@ function NewBugPage() { const [issueTitle, setIssueTitle] = useState(''); const [issueComment, setIssueComment] = useState(''); const classes = useStyles(); + let issueTitleInput: any; + let history = useHistory(); function submitNewIssue(e: FormEvent) { e.preventDefault(); @@ -59,12 +61,15 @@ function NewBugPage() { message: issueComment, }, }, + }).then(function (data) { + const id = data.data?.newBug.bug.humanId; + history.push('/bug/' + id); }); issueTitleInput.value = ''; } function isFormValid() { - return issueTitle.length > 0 && issueComment.length > 0 ? true : false; + return issueTitle.length > 0; } if (loading) return <div>Loading...</div>; diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx new file mode 100644 index 00000000..2c6f6854 --- /dev/null +++ b/webui/src/pages/notfound/NotFoundPage.tsx @@ -0,0 +1,52 @@ +import React from 'react'; + +import { makeStyles } from '@material-ui/core/styles'; + +import BackToListButton from '../../components/BackToListButton'; + +const useStyles = makeStyles((theme) => ({ + main: { + maxWidth: 1000, + margin: 'auto', + marginTop: theme.spacing(10), + }, + logo: { + height: '350px', + display: 'block', + marginLeft: 'auto', + marginRight: 'auto', + }, + icon: { + display: 'block', + marginLeft: 'auto', + marginRight: 'auto', + fontSize: '80px', + }, + backLink: { + marginTop: theme.spacing(1), + textAlign: 'center', + }, + header: { + fontSize: '30px', + textAlign: 'center', + }, +})); + +function NotFoundPage() { + const classes = useStyles(); + return ( + <main className={classes.main}> + <h1 className={classes.header}>404 – Page not found</h1> + <img + src="/logo-alpha-flat-outline.svg" + className={classes.logo} + alt="git-bug Logo" + /> + <div className={classes.backLink}> + <BackToListButton /> + </div> + </main> + ); +} + +export default NotFoundPage; |