From c223c75c11f3ec903413207dd275152e1ec97fcc Mon Sep 17 00:00:00 2001 From: Lena Date: Sun, 28 Feb 2021 00:18:03 +0100 Subject: [PATCH 01/24] Add back-to-list-button #10 --- webui/src/components/Header/Header.tsx | 7 +++++++ webui/src/pages/bug/CommentForm.tsx | 11 +++++++++++ 2 files changed, 18 insertions(+) diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 3bdb252f..cdac0f0e 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -29,6 +29,13 @@ const useStyles = makeStyles((theme) => ({ height: '42px', marginRight: theme.spacing(2), }, + greenButton: { + backgroundColor: '#2ea44fd9', + color: '#fff', + '&:hover': { + backgroundColor: '#2ea44f', + }, + }, })); function Header() { diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 0b97e133..6ec9bf2a 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -28,6 +28,7 @@ const useStyles = makeStyles((theme) => ({ }, actions: { display: 'flex', + gap: '1em', justifyContent: 'flex-end', }, greenButton: { @@ -38,6 +39,13 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: '#2ea44f', }, }, + backButton: { + backgroundColor: '#574142', + color: '#fff', + '&:hover': { + backgroundColor: '#610B0B', + }, + }, })); type Props = { @@ -101,6 +109,9 @@ function CommentForm({ bug }: Props) { onChange={(comment: string) => setIssueComment(comment)} />
+ {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 6ec9bf2a..e53c7ddd 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -39,13 +39,6 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: '#2ea44f', }, }, - backButton: { - backgroundColor: '#574142', - color: '#fff', - '&:hover': { - backgroundColor: '#610B0B', - }, - }, })); type Props = { @@ -109,9 +102,6 @@ function CommentForm({ bug }: Props) { onChange={(comment: string) => setIssueComment(comment)} />
- {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()} +
@@ -98,8 +118,8 @@ function Bug({ bug }: Props) { )}
-
- Labels +
+ Labels
    {bug.labels.length === 0 && ( None yet @@ -110,15 +130,6 @@ function Bug({ bug }: Props) { ))}
-
diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx index 2a70a2f8..ade64e9d 100644 --- a/webui/src/pages/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { RouteComponentProps } from 'react-router-dom'; +import { Redirect, RouteComponentProps } from 'react-router-dom'; import CircularProgress from '@material-ui/core/CircularProgress'; @@ -15,8 +15,8 @@ const BugQuery: React.FC = ({ match }: Props) => { variables: { id: match.params.id }, }); if (loading) return ; + if (!data?.repository?.bug) return ; if (error) return

Error: {error}

; - if (!data?.repository?.bug) return

404.

; return ; }; From 46d38aa53fa925a2335fdf6c3b0b6f47d05dce94 Mon Sep 17 00:00:00 2001 From: Lena Date: Tue, 2 Mar 2021 20:15:39 +0100 Subject: [PATCH 06/24] Route instead of Redirect from empty bug to 404 after a hint from GM #10 --- return-404-page.patch | 37 ++++++++++++++++++++++++++++++++ webui/src/App.tsx | 1 - webui/src/pages/bug/BugQuery.tsx | 6 ++++-- 3 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 return-404-page.patch diff --git a/return-404-page.patch b/return-404-page.patch new file mode 100644 index 00000000..e512d622 --- /dev/null +++ b/return-404-page.patch @@ -0,0 +1,37 @@ +diff --git a/webui/src/App.tsx b/webui/src/App.tsx +index 3e8f71e..4fd0993 100644 +--- a/webui/src/App.tsx ++++ b/webui/src/App.tsx +@@ -11,7 +11,6 @@ export default function App() { + + + +- + + + +diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx +index ade64e9..5d459c4 100644 +--- a/webui/src/pages/bug/BugQuery.tsx ++++ b/webui/src/pages/bug/BugQuery.tsx +@@ -1,8 +1,10 @@ + import React from 'react'; +-import { Redirect, RouteComponentProps } from 'react-router-dom'; ++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,7 +17,7 @@ const BugQuery: React.FC = ({ match }: Props) => { + variables: { id: match.params.id }, + }); + if (loading) return ; +- if (!data?.repository?.bug) return ; ++ if (!data?.repository?.bug) return ; + if (error) return

Error: {error}

; + return ; + }; diff --git a/webui/src/App.tsx b/webui/src/App.tsx index e0580b1d..4c81913c 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -13,7 +13,6 @@ export default function App() { - diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx index ade64e9d..5d459c42 100644 --- a/webui/src/pages/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import { Redirect, RouteComponentProps } from 'react-router-dom'; +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,7 +17,7 @@ const BugQuery: React.FC = ({ match }: Props) => { variables: { id: match.params.id }, }); if (loading) return ; - if (!data?.repository?.bug) return ; + if (!data?.repository?.bug) return ; if (error) return

Error: {error}

; return ; }; From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 11 Mar 2021 12:47:09 +0100 Subject: [PATCH 07/24] Adjust BackToList button color for dark/light-mode The AppBar is commonly used for navigation. As the BackToList button is a navigation element, use similar colors as the AppBar. --- webui/src/components/Header/Header.tsx | 8 ++++++-- webui/src/pages/bug/Bug.tsx | 7 ++++--- webui/src/themes/DefaultDark.ts | 3 ++- webui/src/themes/DefaultLight.ts | 4 +++- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 3bdb252f..579bf127 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -15,9 +15,13 @@ const useStyles = makeStyles((theme) => ({ filler: { flexGrow: 1, }, + appBar: { + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, + }, appTitle: { ...theme.typography.h6, - color: 'white', + color: theme.palette.primary.contrastText, textDecoration: 'none', display: 'flex', alignItems: 'center', @@ -36,7 +40,7 @@ function Header() { return ( <> - + git-bug diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 8b537fb8..343721b4 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -76,10 +76,11 @@ const useStyles = makeStyles((theme) => ({ backButton: { position: 'sticky', top: '80px', - backgroundColor: '#574142', - color: '#fff', + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, '&:hover': { - backgroundColor: '#610B0B', + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, }, }, })); diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 6a92ec49..65dd6329 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -4,7 +4,8 @@ const defaultDarkTheme = createMuiTheme({ palette: { type: 'dark', primary: { - main: '#263238', + dark: '#263238', + main: '#2a393e', light: '#525252', }, error: { diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index bc788a98..9c57ebe5 100644 --- a/webui/src/themes/DefaultLight.ts +++ b/webui/src/themes/DefaultLight.ts @@ -4,8 +4,10 @@ const defaultLightTheme = createMuiTheme({ palette: { type: 'light', primary: { - main: '#263238', + dark: '#263238', + main: '#5a6b73', light: '#f5f5f5', + contrastText: '#fff', }, info: { main: '#e2f1ff', From 07f3163296b187ddf7069c05ca94f5ebaf43413c Mon Sep 17 00:00:00 2001 From: Lena Date: Thu, 11 Mar 2021 22:27:08 +0100 Subject: [PATCH 08/24] #10 Add redirect to detail page after creating new bug --- webui/src/pages/new/NewBugPage.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index a46226ad..9ad52ad0 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -1,4 +1,5 @@ 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'; @@ -43,7 +44,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(); @@ -55,6 +58,9 @@ function NewBugPage() { message: issueComment, }, }, + }).then(function (data) { + const id = data.data?.newBug.bug.humanId; + history.push('/bug/' + id); }); issueTitleInput.value = ''; } From cd02d80ca2458be40d64d2e945670e0aeeb30fcc Mon Sep 17 00:00:00 2001 From: Lena Date: Sat, 13 Mar 2021 23:12:24 +0100 Subject: [PATCH 09/24] Make BackButton a component and Add it to NewBugPage #10 --- webui/src/pages/bug/BackButton.tsx | 36 ++++++++++++ webui/src/pages/bug/Bug.tsx | 23 +------- webui/src/pages/new/NewBugPage.tsx | 90 ++++++++++++++++++++---------- 3 files changed, 97 insertions(+), 52 deletions(-) create mode 100644 webui/src/pages/bug/BackButton.tsx diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx new file mode 100644 index 00000000..4c73dd0a --- /dev/null +++ b/webui/src/pages/bug/BackButton.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +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', + top: '80px', + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, + '&:hover': { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + }, +})); + +function BackButton() { + const classes = useStyles(); + + return ( + + ); +} + +export default BackButton; diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 343721b4..aa6247f2 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -1,13 +1,12 @@ import React from 'react'; -import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; +import BackButton from './BackButton'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; @@ -73,16 +72,6 @@ const useStyles = makeStyles((theme) => ({ commentForm: { marginLeft: 48, }, - backButton: { - position: 'sticky', - top: '80px', - backgroundColor: theme.palette.primary.dark, - color: theme.palette.primary.contrastText, - '&:hover': { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - }, })); type Props = { @@ -99,15 +88,7 @@ function Bug({ bug }: Props) {
- +
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index 9ad52ad0..d04e753a 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -1,12 +1,12 @@ 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'; import CommentInput from '../../components/CommentInput/CommentInput'; +import BackButton from '../bug/BackButton'; import { useNewBugMutation } from './NewBug.generated'; @@ -15,12 +15,17 @@ import { useNewBugMutation } from './NewBug.generated'; */ const useStyles = makeStyles((theme: Theme) => ({ main: { - maxWidth: 800, + maxWidth: 1200, margin: 'auto', marginTop: theme.spacing(4), marginBottom: theme.spacing(4), padding: theme.spacing(2), - overflow: 'hidden', + }, + container: { + display: 'flex', + marginBottom: theme.spacing(1), + marginRight: theme.spacing(2), + marginLeft: theme.spacing(2), }, form: { display: 'flex', @@ -34,6 +39,21 @@ const useStyles = makeStyles((theme: Theme) => ({ backgroundColor: theme.palette.success.main, color: theme.palette.success.contrastText, }, + leftSidebar: { + marginTop: theme.spacing(2), + marginRight: theme.spacing(2), + }, + rightSidebar: { + marginTop: theme.spacing(2), + flex: '0 0 200px', + }, + timeline: { + flex: 1, + marginTop: theme.spacing(2), + marginRight: theme.spacing(2), + minWidth: 400, + padding: theme.spacing(1), + }, })); /** @@ -73,34 +93,42 @@ function NewBugPage() { if (error) return
Error
; return ( - -
- { - issueTitleInput = node; - }} - label="Title" - variant="outlined" - fullWidth - margin="dense" - onChange={(event: any) => setIssueTitle(event.target.value)} - /> - setIssueComment(comment)} - /> -
- +
+
+
+
- - + +
+ { + issueTitleInput = node; + }} + label="Title" + variant="outlined" + fullWidth + margin="dense" + onChange={(event: any) => setIssueTitle(event.target.value)} + /> + setIssueComment(comment)} + /> +
+ +
+ +
+
+
+
); } From ac17596c1ab94b6426bb5b48e39ed0dd9038303e Mon Sep 17 00:00:00 2001 From: Lena Date: Mon, 15 Mar 2021 14:52:06 +0100 Subject: [PATCH 10/24] Refactor BackToListButton #10 --- .../BackToListButton/BackToListButton.tsx} | 4 ++-- webui/src/pages/bug/Bug.tsx | 4 ++-- webui/src/pages/new/NewBugPage.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename webui/src/{pages/bug/BackButton.tsx => components/BackToListButton/BackToListButton.tsx} (92%) diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/components/BackToListButton/BackToListButton.tsx similarity index 92% rename from webui/src/pages/bug/BackButton.tsx rename to webui/src/components/BackToListButton/BackToListButton.tsx index 4c73dd0a..7ca53ad0 100644 --- a/webui/src/pages/bug/BackButton.tsx +++ b/webui/src/components/BackToListButton/BackToListButton.tsx @@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -function BackButton() { +function BackToListButton() { const classes = useStyles(); return ( @@ -33,4 +33,4 @@ function BackButton() { ); } -export default BackButton; +export default BackToListButton; diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index aa6247f2..9ce2f6a6 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import BackToListButton from '../../components/BackToListButton/BackToListButton'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; -import BackButton from './BackButton'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; @@ -88,7 +88,7 @@ function Bug({ bug }: Props) {
- +
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index d04e753a..aa220e04 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -4,9 +4,9 @@ import { useHistory } from 'react-router-dom'; import { Button, Paper } from '@material-ui/core'; import { makeStyles, Theme } from '@material-ui/core/styles'; +import BackToListButton from '../../components/BackToListButton/BackToListButton'; import BugTitleInput from '../../components/BugTitleForm/BugTitleInput'; import CommentInput from '../../components/CommentInput/CommentInput'; -import BackButton from '../bug/BackButton'; import { useNewBugMutation } from './NewBug.generated'; @@ -96,7 +96,7 @@ function NewBugPage() {
- +
From 09fabc98a357454b2c4da4f08ce269bb4106c36a Mon Sep 17 00:00:00 2001 From: Lena Date: Mon, 15 Mar 2021 15:40:25 +0100 Subject: [PATCH 11/24] Adjust Button #10 --- .../components/{BackToListButton => }/BackToListButton.tsx | 0 webui/src/pages/bug/Bug.tsx | 2 +- webui/src/pages/new/NewBugPage.tsx | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) rename webui/src/components/{BackToListButton => }/BackToListButton.tsx (100%) diff --git a/webui/src/components/BackToListButton/BackToListButton.tsx b/webui/src/components/BackToListButton.tsx similarity index 100% rename from webui/src/components/BackToListButton/BackToListButton.tsx rename to webui/src/components/BackToListButton.tsx diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 9ce2f6a6..bde8c5dd 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import BackToListButton from '../../components/BackToListButton/BackToListButton'; +import BackToListButton from '../../components/BackToListButton'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index aa220e04..39725722 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom'; import { Button, Paper } from '@material-ui/core'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import BackToListButton from '../../components/BackToListButton/BackToListButton'; +import BackToListButton from '../../components/BackToListButton'; import BugTitleInput from '../../components/BugTitleForm/BugTitleInput'; import CommentInput from '../../components/CommentInput/CommentInput'; @@ -40,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({ color: theme.palette.success.contrastText, }, leftSidebar: { - marginTop: theme.spacing(2), + marginTop: theme.spacing(4), marginRight: theme.spacing(2), }, rightSidebar: { From 833f020a9b97656941434a5e9bc5248ee0caeb76 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 15 Mar 2021 16:09:40 +0100 Subject: [PATCH 12/24] Use BackToList button on 404-Page --- webui/src/pages/notfound/NotFoundPage.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx index 57b186c5..2c6f6854 100644 --- a/webui/src/pages/notfound/NotFoundPage.tsx +++ b/webui/src/pages/notfound/NotFoundPage.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; + +import BackToListButton from '../../components/BackToListButton'; const useStyles = makeStyles((theme) => ({ main: { @@ -22,8 +23,8 @@ const useStyles = makeStyles((theme) => ({ fontSize: '80px', }, backLink: { - textDecoration: 'none', - color: theme.palette.text.primary, + marginTop: theme.spacing(1), + textAlign: 'center', }, header: { fontSize: '30px', @@ -41,10 +42,9 @@ function NotFoundPage() { className={classes.logo} alt="git-bug Logo" /> - -

Go back to start page

- - +
+ +
); } From 0b3acaa3211b1c884bd42f18bf58383343b42bc1 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 15 Mar 2021 21:28:47 +0100 Subject: [PATCH 13/24] Remove mistakenly commited patch file --- return-404-page.patch | 37 ------------------------------------- 1 file changed, 37 deletions(-) delete mode 100644 return-404-page.patch diff --git a/return-404-page.patch b/return-404-page.patch deleted file mode 100644 index e512d622..00000000 --- a/return-404-page.patch +++ /dev/null @@ -1,37 +0,0 @@ -diff --git a/webui/src/App.tsx b/webui/src/App.tsx -index 3e8f71e..4fd0993 100644 ---- a/webui/src/App.tsx -+++ b/webui/src/App.tsx -@@ -11,7 +11,6 @@ export default function App() { - - - -- - - - -diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx -index ade64e9..5d459c4 100644 ---- a/webui/src/pages/bug/BugQuery.tsx -+++ b/webui/src/pages/bug/BugQuery.tsx -@@ -1,8 +1,10 @@ - import React from 'react'; --import { Redirect, RouteComponentProps } from 'react-router-dom'; -+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,7 +17,7 @@ const BugQuery: React.FC = ({ match }: Props) => { - variables: { id: match.params.id }, - }); - if (loading) return ; -- if (!data?.repository?.bug) return ; -+ if (!data?.repository?.bug) return ; - if (error) return

Error: {error}

; - return ; - }; From 07e1c45cd70554630640bb1ea25968078a36fd6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Fri, 19 Mar 2021 17:04:59 +0100 Subject: [PATCH 14/24] webui: minor code fixes --- webui/src/components/BugTitleForm/BugTitleForm.tsx | 2 +- webui/src/components/Content/PreTag.tsx | 2 +- webui/src/components/Header/Header.tsx | 2 +- webui/src/pages/list/FilterToolbar.tsx | 2 +- webui/src/pages/new/NewBugPage.tsx | 6 +++--- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx index c31f8ef7..9a161443 100644 --- a/webui/src/components/BugTitleForm/BugTitleForm.tsx +++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx @@ -66,7 +66,7 @@ function BugTitleForm({ bug }: Props) { function isFormValid() { if (issueTitleInput) { - return issueTitleInput.value.length > 0 ? true : false; + return issueTitleInput.value.length > 0; } else { return false; } diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx index 5256ab12..8e352153 100644 --- a/webui/src/components/Content/PreTag.tsx +++ b/webui/src/components/Content/PreTag.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles({ const PreTag = (props: React.HTMLProps) => { const classes = useStyles(); - return 
;
+  return 
;
 };
 
 export default PreTag;
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 579bf127..3443fcf5 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -46,7 +46,7 @@ function Header() {
             git-bug
             git-bug
           
-          

+          

           

             
           

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 39725722..f313ac24 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -86,7 +86,7 @@ function NewBugPage() {
   }
 
   function isFormValid() {
-    return issueTitle.length > 0 && issueComment.length > 0 ? true : false;
+    return issueTitle.length > 0;
   }
 
   if (loading) return 
Loading...
;
@@ -119,14 +119,14 @@ function NewBugPage() {
                 className={classes.greenButton}
                 variant="contained"
                 type="submit"
-                disabled={isFormValid() ? false : true}
+                disabled={!isFormValid()}
               >
                 Submit new issue
               
             

           
         
-        

+        

       

     
   );

From 8d8eb2942f73213b175529f47af980889cd080d4 Mon Sep 17 00:00:00 2001
From: Sascha 
Date: Sat, 20 Mar 2021 10:37:49 +0100
Subject: [PATCH 15/24] Add test navbar

---
 webui/src/components/Header/Header.tsx | 42 ++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3443fcf5..5a968a29 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import AppBar from '@material-ui/core/AppBar';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
 import Toolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -35,6 +37,45 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+function a11yProps(index: any) {
+  return {
+    id: `nav-tab-${index}`,
+    'aria-controls': `nav-tabpanel-${index}`,
+  };
+}
+
+function NavTabs() {
+  const [value, setValue] = React.useState(0);
+
+  //TODO page refresh resets state. Must parse url to determine which tab is
+  //highlighted
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue);
+  };
+
+
+  return (
+    
+      
+      
+      
+      
+      
+      
+    
+  );
+}
+
 function Header() {
   const classes = useStyles();
 
@@ -54,6 +95,7 @@ function Header() {
         
       
       

+      
     
   );
 }

From 1e411f5abfffa3955504f700b5edbe7f74007ae2 Mon Sep 17 00:00:00 2001
From: Sascha 
Date: Sat, 20 Mar 2021 14:53:23 +0100
Subject: [PATCH 16/24] Fix eslint empty line error

---
 webui/src/components/Header/Header.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 5a968a29..8e9b6697 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -53,7 +53,6 @@ function NavTabs() {
     setValue(newValue);
   };
 
-
   return (
     
Date: Sun, 21 Mar 2021 13:32:08 +0100
Subject: [PATCH 17/24] Center navbar and disable unresolved navigations

---
 webui/src/components/Header/Header.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 8e9b6697..1fe7504f 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -55,22 +55,27 @@ function NavTabs() {
 
   return (
     
-      
+      
       
       
-      
-      
-      
+      
     
   );
 }

From 9fa40d3d0819aaa27a055ebb51ebdccd83bf1dfd Mon Sep 17 00:00:00 2001
From: Sascha 
Date: Sun, 21 Mar 2021 13:46:49 +0100
Subject: [PATCH 18/24] Add tooltip to unimplemented navigations

---
 webui/src/components/Header/Header.tsx | 55 +++++++++++++++++++-------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 1fe7504f..dc649cb4 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -5,6 +5,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Tab 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 { makeStyles } from '@material-ui/core/styles';
 
 import { LightSwitch } from '../../components/Themer';
@@ -53,6 +54,12 @@ function NavTabs() {
     setValue(newValue);
   };
 
+  const tooltipMsg = `This feature doesn't exist yet. Come help us build it.`;
+
+  /*The span elements around disabled tabs are needed, as the tooltip
+   * won't be triggered by disabled elements.
+   * See: https://material-ui.com/components/tooltips/#disabled-elements
+   */
   return (
     
-      
+      
+        
+          
+        
+      
       
-      
-      
+      
+        
+          
+        
+      
+      
+        
+          
+        
+      
     
   );
 }

From 00fbd0a2c861cfa873aad28ad78f69caf81e0e3c Mon Sep 17 00:00:00 2001
From: Sascha 
Date: Sun, 21 Mar 2021 16:43:37 +0100
Subject: [PATCH 19/24] Fix highlighting of tabs and error in console

---
 webui/src/components/Header/Header.tsx | 102 +++++++++++--------------
 1 file changed, 45 insertions(+), 57 deletions(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index dc649cb4..975944d7 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import AppBar from '@material-ui/core/AppBar';
-import Tab from '@material-ui/core/Tab';
+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';
@@ -45,75 +45,45 @@ function a11yProps(index: any) {
   };
 }
 
-function NavTabs() {
-  const [value, setValue] = React.useState(0);
-
-  //TODO page refresh resets state. Must parse url to determine which tab is
-  //highlighted
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
-    setValue(newValue);
-  };
-
-  const tooltipMsg = `This feature doesn't exist yet. Come help us build it.`;
-
+const DisabledTabWithTooltip = (props: TabProps) => {
   /*The span elements around disabled tabs are needed, as the tooltip
    * won't be triggered by disabled elements.
    * See: https://material-ui.com/components/tooltips/#disabled-elements
+   * This must be done in a wrapper component, otherwise the TabS component
+   * cannot pass it styles down to the Tab component. Resulting in (console)
+   * warnings. This wrapper acceps the passed down TabProps and pass it around
+   * the span element to the Tab component.
    */
+  const msg = `This feature doesn't exist yet. Come help us build it.`;
+  console.log(props);
   return (
-    
-      
-        
-          
-        
-      
-      
-      
-        
-          
-        
-      
-      
-        
-          
-        
-      
-    
+    
+      
+        
+      
+    
   );
-}
+};
 
 function Header() {
   const classes = useStyles();
+  const location = useLocation();
+  const [selectedTab, setTab] = React.useState(location.pathname);
+  console.log(location.pathname);
+
+  const handleTabClick = (
+    event: React.ChangeEvent<{}>,
+    newTabValue: string
+  ) => {
+    setTab(newTabValue);
+  };
 
   return (
     <>
       
         
           
-            git-bug
+            git-bug logo
             git-bug
           
           

@@ -124,7 +94,25 @@ function Header() {
         
       
       

-      
+      
+        
+        
+        
+        
+      
     
   );
 }

From f752dd54806122ea9d77b6807246897eb2656f0e Mon Sep 17 00:00:00 2001
From: Sascha 
Date: Sun, 21 Mar 2021 16:53:00 +0100
Subject: [PATCH 20/24] Remove BackToList button from BugPage

---
 webui/src/pages/bug/Bug.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index bde8c5dd..3b6b61e0 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 
-import BackToListButton from '../../components/BackToListButton';
 import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 import Label from 'src/components/Label';
@@ -16,13 +15,13 @@ import TimelineQuery from './TimelineQuery';
  */
 const useStyles = makeStyles((theme) => ({
   main: {
-    maxWidth: 1200,
+    maxWidth: 1000,
     margin: 'auto',
     marginTop: theme.spacing(4),
   },
   header: {
     marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(3) + 205,
+    marginLeft: theme.spacing(3) + 40,
   },
   title: {
     ...theme.typography.h5,
@@ -43,10 +42,6 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(2),
     minWidth: 400,
   },
-  leftSidebar: {
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-  },
   rightSidebar: {
     marginTop: theme.spacing(2),
     flex: '0 0 200px',
@@ -87,9 +82,6 @@ function Bug({ bug }: Props) {
         
       

       

-        

-          
-        

         

           
           

From 50f146a42a3b59341531b5f478217b10d7033ead Mon Sep 17 00:00:00 2001
From: Sascha 
Date: Sun, 21 Mar 2021 17:01:21 +0100
Subject: [PATCH 21/24] Remove BackToList button from NewBugPage

---
 webui/src/pages/new/NewBugPage.tsx | 87 ++++++++++--------------------
 1 file changed, 29 insertions(+), 58 deletions(-)

diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index f313ac24..2181d44c 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -4,7 +4,6 @@ import { useHistory } from 'react-router-dom';
 import { Button, Paper } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
-import BackToListButton from '../../components/BackToListButton';
 import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
@@ -15,17 +14,12 @@ import { useNewBugMutation } from './NewBug.generated';
  */
 const useStyles = makeStyles((theme: Theme) => ({
   main: {
-    maxWidth: 1200,
+    maxWidth: 800,
     margin: 'auto',
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(4),
     padding: theme.spacing(2),
-  },
-  container: {
-    display: 'flex',
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(2),
+    overflow: 'hidden',
   },
   form: {
     display: 'flex',
@@ -39,21 +33,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
   },
-  leftSidebar: {
-    marginTop: theme.spacing(4),
-    marginRight: theme.spacing(2),
-  },
-  rightSidebar: {
-    marginTop: theme.spacing(2),
-    flex: '0 0 200px',
-  },
-  timeline: {
-    flex: 1,
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    minWidth: 400,
-    padding: theme.spacing(1),
-  },
 }));
 
 /**
@@ -93,42 +72,34 @@ function NewBugPage() {
   if (error) return 
Error
;
 
   return (
-    

-      

-        

-          
+    
+      

+         {
+            issueTitleInput = node;
+          }}
+          label="Title"
+          variant="outlined"
+          fullWidth
+          margin="dense"
+          onChange={(event: any) => setIssueTitle(event.target.value)}
+        />
+         setIssueComment(comment)}
+        />
+        

+          
         

-        
-          
-             {
-                issueTitleInput = node;
-              }}
-              label="Title"
-              variant="outlined"
-              fullWidth
-              margin="dense"
-              onChange={(event: any) => setIssueTitle(event.target.value)}
-            />
-             setIssueComment(comment)}
-            />
-            

-              
-            

-          
-        
-        

-      

-    

+      
+    
   );
 }
 

From aa91f39cdf98217cb0b26c70f344148275617220 Mon Sep 17 00:00:00 2001
From: Sascha 
Date: Sun, 21 Mar 2021 17:34:57 +0100
Subject: [PATCH 22/24] Fix (hoepfully) eslint error for pipeline

Unfortunatly will this result in error for eslint on local machine... *sigh*
---
 webui/src/components/Header/Header.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 975944d7..70b8c9ff 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -83,7 +83,11 @@ function Header() {
       
         
           
-            git-bug logo
+            git-bug logo
             git-bug
           
           

@@ -100,7 +104,11 @@ function Header() {
         onChange={handleTabClick}
         aria-label="nav tabs"
       >
-        
+        
         
         
Date: Sun, 21 Mar 2021 19:45:26 +0100
Subject: [PATCH 23/24] webui: fix eslint?

---
 webui/src/components/Header/Header.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 70b8c9ff..975944d7 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -83,11 +83,7 @@ function Header() {
       
         
           
-            git-bug logo
+            git-bug logo
             git-bug
           
           

@@ -104,11 +100,7 @@ function Header() {
         onChange={handleTabClick}
         aria-label="nav tabs"
       >
-        
+        
         
         
Date: Sun, 21 Mar 2021 21:28:02 +0100
Subject: [PATCH 24/24] webui: stay within the SPA when redirecting from the
 header

---
 webui/src/components/Header/Header.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 975944d7..3064f6e4 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -8,8 +8,8 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { LightSwitch } from '../../components/Themer';
 import CurrentIdentity from '../CurrentIdentity/CurrentIdentity';
+import { LightSwitch } from '../Themer';
 
 const useStyles = makeStyles((theme) => ({
   offset: {
@@ -55,7 +55,6 @@ const DisabledTabWithTooltip = (props: TabProps) => {
    * the span element to the Tab component.
    */
   const msg = `This feature doesn't exist yet. Come help us build it.`;
-  console.log(props);
   return (
     
       
@@ -69,7 +68,6 @@ function Header() {
   const classes = useStyles();
   const location = useLocation();
   const [selectedTab, setTab] = React.useState(location.pathname);
-  console.log(location.pathname);
 
   const handleTabClick = (
     event: React.ChangeEvent<{}>,
@@ -101,7 +99,7 @@ function Header() {
         aria-label="nav tabs"
       >
         
-        
+