From 30587cc03f0b1a8fe0c5621207882b9c6714093e Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 26 Feb 2021 16:26:37 +0100
Subject: Fix color of open/close filter buttons in dark mode

---
 webui/src/pages/list/Filter.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 5c4a3d17..66702078 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -65,7 +65,7 @@ function stringify(params: Query): string {
 const useStyles = makeStyles((theme) => ({
   element: {
     ...theme.typography.body2,
-    color: '#444',
+    color: theme.palette.text.secondary,
     padding: theme.spacing(0, 1),
     fontWeight: 400,
     textDecoration: 'none',
@@ -75,7 +75,7 @@ const useStyles = makeStyles((theme) => ({
   },
   itemActive: {
     fontWeight: 600,
-    color: '#333',
+    color: theme.palette.text.primary,
   },
   icon: {
     paddingRight: theme.spacing(0.5),
-- 
cgit 


From b996779197539a429c4ad54fba225421e523702b Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 26 Feb 2021 16:39:18 +0100
Subject: Fix backgroundcolor of toolbar for dark mode

---
 webui/src/pages/list/FilterToolbar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 21626416..68473974 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history';
 import React from 'react';
 
 import Toolbar from '@material-ui/core/Toolbar';
-import { makeStyles } from '@material-ui/core/styles';
+import { fade, makeStyles } from '@material-ui/core/styles';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 
@@ -19,8 +19,8 @@ import { useBugCountQuery } from './FilterToolbar.generated';
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
-    backgroundColor: theme.palette.grey['100'],
-    borderColor: theme.palette.grey['300'],
+    backgroundColor: fade(theme.palette.text.hint, 0.05),
+    borderColor: theme.palette.divider,
     borderWidth: '1px 0',
     borderStyle: 'solid',
     margin: theme.spacing(0, -1),
-- 
cgit 


From 7beffb87182355c72ceffa29325815e71ead5f59 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 26 Feb 2021 16:39:46 +0100
Subject: Fix searchbar background-color for dark mode

---
 webui/src/pages/list/ListQuery.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 87c21e3c..58660b32 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -56,10 +56,10 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
   },
   search: {
     borderRadius: theme.shape.borderRadius,
-    borderColor: fade(theme.palette.primary.main, 0.2),
+    borderColor: theme.palette.divider,
     borderStyle: 'solid',
     borderWidth: '1px',
-    backgroundColor: fade(theme.palette.primary.main, 0.05),
+    backgroundColor: fade(theme.palette.text.hint, 0.05),
     padding: theme.spacing(0, 1),
     width: ({ searching }) => (searching ? '20rem' : '15rem'),
     transition: theme.transitions.create([
-- 
cgit 


From 9280e437b06c1812d9b4a62f18686878f9b7a769 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 26 Feb 2021 19:07:11 +0100
Subject: Fix Bug description header for dark mode

---
 webui/src/pages/bug/Message.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 91549483..0cc9b15a 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
+import { fade, makeStyles } from '@material-ui/core/styles';
 
 import Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
@@ -27,11 +27,11 @@ const useStyles = makeStyles((theme) => ({
   },
   header: {
     ...theme.typography.body1,
-    color: '#444',
+    color: theme.palette.text.secondary,
     padding: '0.5rem 1rem',
-    borderBottom: '1px solid #ddd',
+    borderBottom: `1px solid ${theme.palette.divider}`,
     display: 'flex',
-    backgroundColor: '#e2f1ff',
+    backgroundColor: fade(theme.palette.text.hint, 0.05),
   },
   title: {
     flex: 1,
-- 
cgit 


From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 2 Mar 2021 17:13:11 +0100
Subject: Use proper semantic color values

Adjust header colors on light theme

- Use adjusted background-color for header instead of text.hint.
- Use slightly darker secondary font color for better readability against the
  head background color.

Use more semantic theme colors for bug list
Use more semantic theme colors for bug messages
Fix usage of text hint for filter header
---
 webui/src/pages/bug/Message.tsx        |  6 ++++--
 webui/src/pages/list/FilterToolbar.tsx |  4 ++--
 webui/src/pages/list/ListQuery.tsx     | 21 ++++++++++++---------
 3 files changed, 18 insertions(+), 13 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 0cc9b15a..f2f62b52 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Paper from '@material-ui/core/Paper';
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
@@ -31,7 +31,9 @@ const useStyles = makeStyles((theme) => ({
     padding: '0.5rem 1rem',
     borderBottom: `1px solid ${theme.palette.divider}`,
     display: 'flex',
-    backgroundColor: fade(theme.palette.text.hint, 0.05),
+    borderTopRightRadius: theme.shape.borderRadius,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.info.main,
   },
   title: {
     flex: 1,
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 68473974..e4cd8e6a 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history';
 import React from 'react';
 
 import Toolbar from '@material-ui/core/Toolbar';
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 
@@ -19,7 +19,7 @@ import { useBugCountQuery } from './FilterToolbar.generated';
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
-    backgroundColor: fade(theme.palette.text.hint, 0.05),
+    backgroundColor: theme.palette.primary.light,
     borderColor: theme.palette.divider,
     borderWidth: '1px 0',
     borderStyle: 'solid',
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 58660b32..d4ce7f80 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -6,7 +6,7 @@ import { Button } 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 { fade, makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
@@ -56,10 +56,11 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
   },
   search: {
     borderRadius: theme.shape.borderRadius,
+    color: theme.palette.text.secondary,
     borderColor: theme.palette.divider,
     borderStyle: 'solid',
     borderWidth: '1px',
-    backgroundColor: fade(theme.palette.text.hint, 0.05),
+    backgroundColor: theme.palette.primary.light,
     padding: theme.spacing(0, 1),
     width: ({ searching }) => (searching ? '20rem' : '15rem'),
     transition: theme.transitions.create([
@@ -69,13 +70,11 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
     ]),
   },
   searchFocused: {
-    borderColor: fade(theme.palette.primary.main, 0.4),
     backgroundColor: theme.palette.background.paper,
-    width: '20rem!important',
   },
   placeholderRow: {
     padding: theme.spacing(1),
-    borderBottomColor: theme.palette.grey['300'],
+    borderBottomColor: theme.palette.divider,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     display: 'flex',
@@ -91,7 +90,8 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
     ...theme.typography.h5,
     padding: theme.spacing(8),
     textAlign: 'center',
-    borderBottomColor: theme.palette.grey['300'],
+    color: theme.palette.text.hint,
+    borderBottomColor: theme.palette.divider,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     '& > p': {
@@ -99,12 +99,15 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
     },
   },
   errorBox: {
-    color: theme.palette.error.main,
+    color: theme.palette.error.dark,
     '& > pre': {
       fontSize: '1rem',
       textAlign: 'left',
-      backgroundColor: theme.palette.grey['900'],
-      color: theme.palette.common.white,
+      borderColor: theme.palette.divider,
+      borderWidth: '1px',
+      borderRadius: theme.shape.borderRadius,
+      borderStyle: 'solid',
+      color: theme.palette.text.primary,
       marginTop: theme.spacing(4),
       padding: theme.spacing(2, 3),
     },
-- 
cgit 


From c8a5330bdeabbf2c83890ca096281cd09159cc10 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 3 Mar 2021 13:02:27 +0100
Subject: Fix padding around issue comments

---
 webui/src/pages/bug/Message.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index f2f62b52..d27f7a3d 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
   },
   body: {
     ...theme.typography.body2,
-    padding: '0 1rem',
+    padding: '0.5rem',
   },
 }));
 
-- 
cgit 


From 8e8ca99bd5f72de60f6e0e1b334f33312cab5388 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 3 Mar 2021 17:49:53 +0100
Subject: Use colors from theme palette

- Use theme colors for title input.
- Remove inputTitle classes as they are not applied to the TextField.
  This will lead to double borders and artifacts at the field corners.
---
 webui/src/pages/list/ListQuery.tsx | 11 ++++-------
 webui/src/pages/new/NewBugPage.tsx | 23 +++--------------------
 2 files changed, 7 insertions(+), 27 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index d4ce7f80..021f70b0 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -112,12 +112,9 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
       padding: theme.spacing(2, 3),
     },
   },
-  greenButton: {
-    backgroundColor: '#2ea44fd9',
-    color: '#fff',
-    '&:hover': {
-      backgroundColor: '#2ea44f',
-    },
+  newIssueButton: {
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText,
   },
 }));
 
@@ -318,7 +315,7 @@ function ListQuery() {
         <IfLoggedIn>
           {() => (
             <Button
-              className={classes.greenButton}
+              className={classes.newIssueButton}
               variant="contained"
               href="/new"
             >
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index c9e268b6..b649fffb 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -3,7 +3,7 @@ import React, { FormEvent, useState } from 'react';
 import { Button } from '@material-ui/core';
 import Paper from '@material-ui/core/Paper';
 import TextField from '@material-ui/core/TextField/TextField';
-import { fade, makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 
 import CommentInput from '../../components/CommentInput/CommentInput';
 
@@ -21,19 +21,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(2),
     overflow: 'hidden',
   },
-  titleInput: {
-    borderRadius: theme.shape.borderRadius,
-    borderColor: fade(theme.palette.primary.main, 0.2),
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    backgroundColor: fade(theme.palette.primary.main, 0.05),
-    padding: theme.spacing(0, 0),
-    transition: theme.transitions.create([
-      'width',
-      'borderColor',
-      'backgroundColor',
-    ]),
-  },
   form: {
     display: 'flex',
     flexDirection: 'column',
@@ -43,11 +30,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     justifyContent: 'flex-end',
   },
   greenButton: {
-    backgroundColor: '#2ea44fd9',
-    color: '#fff',
-    '&:hover': {
-      backgroundColor: '#2ea44f',
-    },
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText,
   },
 }));
 
@@ -90,7 +74,6 @@ function NewBugPage() {
             issueTitleInput = node;
           }}
           label="Title"
-          className={classes.titleInput}
           variant="outlined"
           fullWidth
           margin="dense"
-- 
cgit 


From 50484fb97efd62aceafdbb78ed575e94ff7bb1fd Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 3 Mar 2021 18:14:37 +0100
Subject: Fix spacing between cancle and save button

---
 webui/src/pages/list/ListQuery.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 021f70b0..fec7c33b 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -112,7 +112,7 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
       padding: theme.spacing(2, 3),
     },
   },
-  newIssueButton: {
+  greenButton: {
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
   },
@@ -315,7 +315,7 @@ function ListQuery() {
         <IfLoggedIn>
           {() => (
             <Button
-              className={classes.newIssueButton}
+              className={classes.greenButton}
               variant="contained"
               href="/new"
             >
-- 
cgit 


From 288448b64b02be934b80c62a38f607048ccb4a61 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 4 Mar 2021 13:36:49 +0100
Subject: Reuse BugTitleInput component

---
 webui/src/pages/new/NewBugPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index b649fffb..a46226ad 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -2,9 +2,9 @@ import React, { FormEvent, useState } from 'react';
 
 import { Button } from '@material-ui/core';
 import Paper from '@material-ui/core/Paper';
-import TextField from '@material-ui/core/TextField/TextField';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
+import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
 import { useNewBugMutation } from './NewBug.generated';
@@ -69,7 +69,7 @@ function NewBugPage() {
   return (
     <Paper className={classes.main}>
       <form className={classes.form} onSubmit={submitNewIssue}>
-        <TextField
+        <BugTitleInput
           inputRef={(node) => {
             issueTitleInput = node;
           }}
-- 
cgit 


From 79422fafb28294ad1e2ae6fe25a6d2788f57d3af Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 4 Mar 2021 14:08:59 +0100
Subject: Use info.contrastText instead of text.secondary

This will ensure better color managment for Message titles
---
 webui/src/pages/bug/Message.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index d27f7a3d..faff5356 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -27,13 +27,13 @@ const useStyles = makeStyles((theme) => ({
   },
   header: {
     ...theme.typography.body1,
-    color: theme.palette.text.secondary,
     padding: '0.5rem 1rem',
     borderBottom: `1px solid ${theme.palette.divider}`,
     display: 'flex',
     borderTopRightRadius: theme.shape.borderRadius,
     borderTopLeftRadius: theme.shape.borderRadius,
     backgroundColor: theme.palette.info.main,
+    color: theme.palette.info.contrastText,
   },
   title: {
     flex: 1,
-- 
cgit 


From d0505e2f9ab9483f370ba547cb93ce6cc388f241 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 14 Mar 2021 15:44:32 +0100
Subject: Use success.dark for green-button:hover

---
 webui/src/pages/bug/CommentForm.tsx | 7 ++++---
 webui/src/pages/list/ListQuery.tsx  | 4 ++++
 webui/src/pages/new/NewBugPage.tsx  | 4 ++++
 3 files changed, 12 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 0b97e133..773e7d0e 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -32,10 +32,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   },
   greenButton: {
     marginLeft: '8px',
-    backgroundColor: '#2ea44fd9',
-    color: '#fff',
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText,
     '&:hover': {
-      backgroundColor: '#2ea44f',
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.primary.contrastText,
     },
   },
 }));
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index fec7c33b..3a58f803 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -115,6 +115,10 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
   greenButton: {
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.primary.contrastText,
+    },
   },
 }));
 
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index a46226ad..4517c6e3 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -32,6 +32,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   greenButton: {
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.primary.contrastText,
+    },
   },
 }));
 
-- 
cgit 


From 2c5d3345e2d3b4746619f3adf859321eadf21992 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 14 Mar 2021 16:10:01 +0100
Subject: Change caption of buttons from "Issue" to "Bug"

---
 webui/src/pages/list/ListQuery.tsx | 2 +-
 webui/src/pages/new/NewBugPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 3a58f803..500ccf77 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -323,7 +323,7 @@ function ListQuery() {
               variant="contained"
               href="/new"
             >
-              New issue
+              New bug
             </Button>
           )}
         </IfLoggedIn>
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index 4517c6e3..96afb56a 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -94,7 +94,7 @@ function NewBugPage() {
             type="submit"
             disabled={isFormValid() ? false : true}
           >
-            Submit new issue
+            Submit new bug
           </Button>
         </div>
       </form>
-- 
cgit 


From c223c75c11f3ec903413207dd275152e1ec97fcc Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 00:18:03 +0100
Subject: Add back-to-list-button #10

---
 webui/src/pages/bug/CommentForm.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'webui/src/pages')

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, StyleProps>((theme) => ({
   },
   actions: {
     display: 'flex',
+    gap: '1em',
     justifyContent: 'flex-end',
   },
   greenButton: {
@@ -38,6 +39,13 @@ const useStyles = makeStyles<Theme, StyleProps>((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)}
         />
         <div className={classes.actions}>
+          <Button className={classes.backButton} variant="contained" href="/">
+            Back to List
+          </Button>
           {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
           <Button
             className={classes.greenButton}
-- 
cgit 


From cdf655f869bd0993b52f4268f058571740b1cf4d Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 02:58:53 +0100
Subject: Add 404 page #10

---
 webui/src/pages/notfound/NotFoundPage.tsx | 37 +++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 webui/src/pages/notfound/NotFoundPage.tsx

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
new file mode 100644
index 00000000..ae84ac3e
--- /dev/null
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  main: {
+    maxWidth: 1000,
+    margin: 'auto',
+    marginTop: theme.spacing(20),
+  },
+  logo: {
+    height: '350px',
+  },
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+}));
+
+function NotFoundPage() {
+  const classes = useStyles();
+  return (
+    <main className={classes.main}>
+      <div className={classes.container}>
+        <h1>404 – Page not found</h1>
+        <img
+          src="/logo-alpha-flat-outline.svg"
+          className={classes.logo}
+          alt="git-bug"
+        />
+        <h1>Go back to start page</h1>
+      </div>
+    </main>
+  );
+}
+
+export default NotFoundPage;
-- 
cgit 


From 4dcc6f67b37bf756c7afb7e40f700a838906113b Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 04:15:21 +0100
Subject: Add backlink to 404 page #10

---
 webui/src/pages/notfound/NotFoundPage.tsx | 42 +++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 13 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
index ae84ac3e..2aba9cef 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,19 +1,34 @@
+import wrap from '@arrows/composition/internal/wrap';
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 const useStyles = makeStyles((theme) => ({
   main: {
     maxWidth: 1000,
     margin: 'auto',
-    marginTop: theme.spacing(20),
+    marginTop: theme.spacing(10),
   },
   logo: {
     height: '350px',
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
   },
-  container: {
-    display: 'flex',
-    alignItems: 'center',
+  icon: {
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    fontSize: '80px',
+  },
+  backLink: {
+    textDecoration: 'none',
+    color: theme.palette.text.primary,
+  },
+  header: {
+    fontSize: '30px',
+    textAlign: 'center',
   },
 }));
 
@@ -21,15 +36,16 @@ function NotFoundPage() {
   const classes = useStyles();
   return (
     <main className={classes.main}>
-      <div className={classes.container}>
-        <h1>404 – Page not found</h1>
-        <img
-          src="/logo-alpha-flat-outline.svg"
-          className={classes.logo}
-          alt="git-bug"
-        />
-        <h1>Go back to start page</h1>
-      </div>
+      <h1 className={classes.header}>404 – Page not found</h1>
+      <img
+        src="/logo-alpha-flat-outline.svg"
+        className={classes.logo}
+        alt="git-bug"
+      />
+      <a href="/" className={classes.backLink}>
+        <h2 className={classes.header}>Go back to start page</h2>
+        <ArrowBackIcon className={classes.icon} />
+      </a>
     </main>
   );
 }
-- 
cgit 


From 16b176f9bf40a5fd6fb832f8858ec389826752a5 Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 20:54:17 +0100
Subject: Make backbutton sticky #10

---
 webui/src/pages/bug/Bug.tsx               | 22 +++++++++++++++++++++-
 webui/src/pages/bug/CommentForm.tsx       | 10 ----------
 webui/src/pages/notfound/NotFoundPage.tsx |  3 +--
 3 files changed, 22 insertions(+), 13 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index d85c5296..b8c3e8aa 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -1,6 +1,8 @@
 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';
@@ -18,7 +20,6 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: 1000,
     margin: 'auto',
     marginTop: theme.spacing(4),
-    overflow: 'hidden',
   },
   header: {
     marginLeft: theme.spacing(3) + 40,
@@ -61,6 +62,16 @@ const useStyles = makeStyles((theme) => ({
   commentForm: {
     marginLeft: 48,
   },
+  backButton: {
+    position: 'sticky',
+    marginTop: theme.spacing(1),
+    top: '80px',
+    backgroundColor: '#574142',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#610B0B',
+    },
+  },
 }));
 
 type Props = {
@@ -99,6 +110,15 @@ function Bug({ bug }: Props) {
               </li>
             ))}
           </ul>
+          <Button
+            variant="contained"
+            className={classes.backButton}
+            aria-label="back"
+            href="/"
+          >
+            <ArrowBackIcon />
+            Back to List
+          </Button>
         </div>
       </div>
     </main>
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, StyleProps>((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)}
         />
         <div className={classes.actions}>
-          <Button className={classes.backButton} variant="contained" href="/">
-            Back to List
-          </Button>
           {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
           <Button
             className={classes.greenButton}
diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
index 2aba9cef..57b186c5 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,4 +1,3 @@
-import wrap from '@arrows/composition/internal/wrap';
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -40,7 +39,7 @@ function NotFoundPage() {
       <img
         src="/logo-alpha-flat-outline.svg"
         className={classes.logo}
-        alt="git-bug"
+        alt="git-bug Logo"
       />
       <a href="/" className={classes.backLink}>
         <h2 className={classes.header}>Go back to start page</h2>
-- 
cgit 


From ec8a9b20696da25bf1781dd190e7ec6a8fbf5687 Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Mon, 1 Mar 2021 21:12:53 +0100
Subject: Backbutton to left with patch from GlancingMind, Adjusting and 404
 for missing bug pages #10

---
 webui/src/pages/bug/Bug.tsx      | 45 +++++++++++++++++++++++++---------------
 webui/src/pages/bug/BugQuery.tsx |  4 ++--
 2 files changed, 30 insertions(+), 19 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index b8c3e8aa..8b537fb8 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -17,13 +17,20 @@ import TimelineQuery from './TimelineQuery';
  */
 const useStyles = makeStyles((theme) => ({
   main: {
-    maxWidth: 1000,
+    maxWidth: 1200,
     margin: 'auto',
     marginTop: theme.spacing(4),
   },
   header: {
-    marginLeft: theme.spacing(3) + 40,
     marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(3) + 205,
+  },
+  title: {
+    ...theme.typography.h5,
+  },
+  id: {
+    ...theme.typography.subtitle1,
+    marginLeft: theme.spacing(1),
   },
   container: {
     display: 'flex',
@@ -37,11 +44,15 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(2),
     minWidth: 400,
   },
-  sidebar: {
+  leftSidebar: {
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
+  },
+  rightSidebar: {
     marginTop: theme.spacing(2),
     flex: '0 0 200px',
   },
-  sidebarTitle: {
+  rightSidebarTitle: {
     fontWeight: 'bold',
   },
   labelList: {
@@ -64,7 +75,6 @@ const useStyles = makeStyles((theme) => ({
   },
   backButton: {
     position: 'sticky',
-    marginTop: theme.spacing(1),
     top: '80px',
     backgroundColor: '#574142',
     color: '#fff',
@@ -86,8 +96,18 @@ function Bug({ bug }: Props) {
       <div className={classes.header}>
         <BugTitleForm bug={bug} />
       </div>
-
       <div className={classes.container}>
+        <div className={classes.leftSidebar}>
+          <Button
+            variant="contained"
+            className={classes.backButton}
+            aria-label="back to issue list"
+            href="/"
+          >
+            <ArrowBackIcon />
+            Back to List
+          </Button>
+        </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
           <IfLoggedIn>
@@ -98,8 +118,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>
@@ -110,15 +130,6 @@ function Bug({ bug }: Props) {
               </li>
             ))}
           </ul>
-          <Button
-            variant="contained"
-            className={classes.backButton}
-            aria-label="back"
-            href="/"
-          >
-            <ArrowBackIcon />
-            Back to List
-          </Button>
         </div>
       </div>
     </main>
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<Props> = ({ match }: Props) => {
     variables: { id: match.params.id },
   });
   if (loading) return <CircularProgress />;
+  if (!data?.repository?.bug) return <Redirect to="/404bug" />;
   if (error) return <p>Error: {error}</p>;
-  if (!data?.repository?.bug) return <p>404.</p>;
   return <Bug bug={data.repository.bug} />;
 };
 
-- 
cgit 


From 46d38aa53fa925a2335fdf6c3b0b6f47d05dce94 Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Tue, 2 Mar 2021 20:15:39 +0100
Subject: Route instead of Redirect from empty bug to 404 after a hint from GM
 #10

---
 webui/src/pages/bug/BugQuery.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

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<Props> = ({ match }: Props) => {
     variables: { id: match.params.id },
   });
   if (loading) return <CircularProgress />;
-  if (!data?.repository?.bug) return <Redirect to="/404bug" />;
+  if (!data?.repository?.bug) return <NotFoundPage />;
   if (error) return <p>Error: {error}</p>;
   return <Bug bug={data.repository.bug} />;
 };
-- 
cgit 


From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 11 Mar 2021 12:47:09 +0100
Subject: 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/pages/bug/Bug.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages')

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,
     },
   },
 }));
-- 
cgit 


From 07f3163296b187ddf7069c05ca94f5ebaf43413c Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Thu, 11 Mar 2021 22:27:08 +0100
Subject: #10 Add redirect to detail page after creating new bug

---
 webui/src/pages/new/NewBugPage.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'webui/src/pages')

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 = '';
   }
-- 
cgit 


From cd02d80ca2458be40d64d2e945670e0aeeb30fcc Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sat, 13 Mar 2021 23:12:24 +0100
Subject: 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

(limited to 'webui/src/pages')

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 (
+    <Button
+      variant="contained"
+      className={classes.backButton}
+      aria-label="back to issue list"
+      href="/"
+    >
+      <ArrowBackIcon />
+      Back to List
+    </Button>
+  );
+}
+
+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) {
       </div>
       <div className={classes.container}>
         <div className={classes.leftSidebar}>
-          <Button
-            variant="contained"
-            className={classes.backButton}
-            aria-label="back to issue list"
-            href="/"
-          >
-            <ArrowBackIcon />
-            Back to List
-          </Button>
+          <BackButton />
         </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
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 <div>Error</div>;
 
   return (
-    <Paper className={classes.main}>
-      <form className={classes.form} onSubmit={submitNewIssue}>
-        <BugTitleInput
-          inputRef={(node) => {
-            issueTitleInput = node;
-          }}
-          label="Title"
-          variant="outlined"
-          fullWidth
-          margin="dense"
-          onChange={(event: any) => setIssueTitle(event.target.value)}
-        />
-        <CommentInput
-          loading={false}
-          onChange={(comment: string) => setIssueComment(comment)}
-        />
-        <div className={classes.actions}>
-          <Button
-            className={classes.greenButton}
-            variant="contained"
-            type="submit"
-            disabled={isFormValid() ? false : true}
-          >
-            Submit new issue
-          </Button>
+    <main className={classes.main}>
+      <div className={classes.container}>
+        <div className={classes.leftSidebar}>
+          <BackButton />
         </div>
-      </form>
-    </Paper>
+        <Paper className={classes.timeline}>
+          <form className={classes.form} onSubmit={submitNewIssue}>
+            <BugTitleInput
+              inputRef={(node) => {
+                issueTitleInput = node;
+              }}
+              label="Title"
+              variant="outlined"
+              fullWidth
+              margin="dense"
+              onChange={(event: any) => setIssueTitle(event.target.value)}
+            />
+            <CommentInput
+              loading={false}
+              onChange={(comment: string) => setIssueComment(comment)}
+            />
+            <div className={classes.actions}>
+              <Button
+                className={classes.greenButton}
+                variant="contained"
+                type="submit"
+                disabled={isFormValid() ? false : true}
+              >
+                Submit new issue
+              </Button>
+            </div>
+          </form>
+        </Paper>
+        <div className={classes.rightSidebar}></div>
+      </div>
+    </main>
   );
 }
 
-- 
cgit 


From ac17596c1ab94b6426bb5b48e39ed0dd9038303e Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Mon, 15 Mar 2021 14:52:06 +0100
Subject: Refactor BackToListButton #10

---
 webui/src/pages/bug/BackButton.tsx | 36 ------------------------------------
 webui/src/pages/bug/Bug.tsx        |  4 ++--
 webui/src/pages/new/NewBugPage.tsx |  4 ++--
 3 files changed, 4 insertions(+), 40 deletions(-)
 delete mode 100644 webui/src/pages/bug/BackButton.tsx

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx
deleted file mode 100644
index 4c73dd0a..00000000
--- a/webui/src/pages/bug/BackButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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 (
-    <Button
-      variant="contained"
-      className={classes.backButton}
-      aria-label="back to issue list"
-      href="/"
-    >
-      <ArrowBackIcon />
-      Back to List
-    </Button>
-  );
-}
-
-export default BackButton;
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) {
       </div>
       <div className={classes.container}>
         <div className={classes.leftSidebar}>
-          <BackButton />
+          <BackToListButton />
         </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
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() {
     <main className={classes.main}>
       <div className={classes.container}>
         <div className={classes.leftSidebar}>
-          <BackButton />
+          <BackToListButton />
         </div>
         <Paper className={classes.timeline}>
           <form className={classes.form} onSubmit={submitNewIssue}>
-- 
cgit 


From 09fabc98a357454b2c4da4f08ce269bb4106c36a Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Mon, 15 Mar 2021 15:40:25 +0100
Subject: Adjust Button #10

---
 webui/src/pages/bug/Bug.tsx        | 2 +-
 webui/src/pages/new/NewBugPage.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages')

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: {
-- 
cgit 


From 833f020a9b97656941434a5e9bc5248ee0caeb76 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Mon, 15 Mar 2021 16:09:40 +0100
Subject: Use BackToList button on 404-Page

---
 webui/src/pages/notfound/NotFoundPage.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'webui/src/pages')

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"
       />
-      <a href="/" className={classes.backLink}>
-        <h2 className={classes.header}>Go back to start page</h2>
-        <ArrowBackIcon className={classes.icon} />
-      </a>
+      <div className={classes.backLink}>
+        <BackToListButton />
+      </div>
     </main>
   );
 }
-- 
cgit 


From 07e1c45cd70554630640bb1ea25968078a36fd6c Mon Sep 17 00:00:00 2001
From: Michael Muré <batolettre@gmail.com>
Date: Fri, 19 Mar 2021 17:04:59 +0100
Subject: webui: minor code fixes

---
 webui/src/pages/list/FilterToolbar.tsx | 2 +-
 webui/src/pages/new/NewBugPage.tsx     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'webui/src/pages')

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 <div>Loading...</div>;
@@ -119,14 +119,14 @@ function NewBugPage() {
                 className={classes.greenButton}
                 variant="contained"
                 type="submit"
-                disabled={isFormValid() ? false : true}
+                disabled={!isFormValid()}
               >
                 Submit new issue
               </Button>
             </div>
           </form>
         </Paper>
-        <div className={classes.rightSidebar}></div>
+        <div className={classes.rightSidebar} />
       </div>
     </main>
   );
-- 
cgit 


From 0dcb48d03aae413d77c7321f461502fa54abe05f Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Mon, 15 Mar 2021 13:15:06 +0100
Subject: Add EditButton to bug message

---
 webui/src/pages/bug/Message.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index faff5356..6b04059f 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -1,7 +1,10 @@
 import 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 Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
@@ -51,6 +54,14 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.body2,
     padding: '0.5rem',
   },
+  editButton: {
+    color: theme.palette.info.contrastText,
+    padding: '0rem',
+    fontSize: '0.75rem',
+    '&:hover': {
+      backgroundColor: 'inherit',
+    },
+  },
 }));
 
 type Props = {
@@ -70,6 +81,15 @@ function Message({ op }: Props) {
             <Date date={op.createdAt} />
           </div>
           {op.edited && <div className={classes.tag}>Edited</div>}
+          <Tooltip title="Edit Message" placement="top" arrow={true}>
+            <IconButton
+              disableRipple
+              className={classes.editButton}
+              aria-label="edit message"
+            >
+              <EditIcon />
+            </IconButton>
+          </Tooltip>
         </header>
         <section className={classes.body}>
           <Content markdown={op.message} />
-- 
cgit 


From 26ad5fc379749d7effc324ae36e778ee540053a7 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 11:37:04 +0100
Subject: Add onClick handler to edit button

---
 webui/src/pages/bug/Message.tsx                    | 6 ++++++
 webui/src/pages/bug/MessageCommentFragment.graphql | 1 +
 webui/src/pages/bug/MessageCreateFragment.graphql  | 1 +
 3 files changed, 8 insertions(+)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 6b04059f..390f369e 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -70,6 +70,11 @@ type Props = {
 
 function Message({ op }: Props) {
   const classes = useStyles();
+
+  const editComment = (id: String) => {
+    console.log(id);
+  };
+
   return (
     <article className={classes.container}>
       <Avatar author={op.author} className={classes.avatar} />
@@ -86,6 +91,7 @@ function Message({ op }: Props) {
               disableRipple
               className={classes.editButton}
               aria-label="edit message"
+              onClick={() => editComment(op.id)}
             >
               <EditIcon />
             </IconButton>
diff --git a/webui/src/pages/bug/MessageCommentFragment.graphql b/webui/src/pages/bug/MessageCommentFragment.graphql
index 00f8342d..337eade0 100644
--- a/webui/src/pages/bug/MessageCommentFragment.graphql
+++ b/webui/src/pages/bug/MessageCommentFragment.graphql
@@ -1,6 +1,7 @@
 #import "../../components/fragments.graphql"
 
 fragment AddComment on AddCommentTimelineItem {
+  id
   createdAt
   ...authored
   edited
diff --git a/webui/src/pages/bug/MessageCreateFragment.graphql b/webui/src/pages/bug/MessageCreateFragment.graphql
index 4cae819d..81f80afb 100644
--- a/webui/src/pages/bug/MessageCreateFragment.graphql
+++ b/webui/src/pages/bug/MessageCreateFragment.graphql
@@ -1,6 +1,7 @@
 #import "../../components/fragments.graphql"
 
 fragment Create on CreateTimelineItem {
+  id
   createdAt
   ...authored
   edited
-- 
cgit 


From cd4b1adebbb009caba47b7dc4f543c4d951841f2 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 12:28:45 +0100
Subject: Pass BugFragment as prop to EditComment

---
 webui/src/pages/bug/.Bug.tsx.swp           | Bin 0 -> 12288 bytes
 webui/src/pages/bug/.TimelineQuery.tsx.swp | Bin 0 -> 12288 bytes
 webui/src/pages/bug/Bug.tsx                |   2 +-
 webui/src/pages/bug/Message.tsx            |  13 ++++++++++++-
 webui/src/pages/bug/Timeline.tsx           |   8 +++++---
 webui/src/pages/bug/TimelineQuery.tsx      |   9 +++++----
 6 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 webui/src/pages/bug/.Bug.tsx.swp
 create mode 100644 webui/src/pages/bug/.TimelineQuery.tsx.swp

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/.Bug.tsx.swp b/webui/src/pages/bug/.Bug.tsx.swp
new file mode 100644
index 00000000..4a312e0d
Binary files /dev/null and b/webui/src/pages/bug/.Bug.tsx.swp differ
diff --git a/webui/src/pages/bug/.TimelineQuery.tsx.swp b/webui/src/pages/bug/.TimelineQuery.tsx.swp
new file mode 100644
index 00000000..0ad00f67
Binary files /dev/null and b/webui/src/pages/bug/.TimelineQuery.tsx.swp differ
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index d85c5296..46a443d5 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -78,7 +78,7 @@ function Bug({ bug }: Props) {
 
       <div className={classes.container}>
         <div className={classes.timeline}>
-          <TimelineQuery id={bug.id} />
+          <TimelineQuery bug={bug} />
           <IfLoggedIn>
             {() => (
               <div className={classes.commentForm}>
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 390f369e..3993b5f7 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -9,7 +9,10 @@ import EditIcon from '@material-ui/icons/Edit';
 import Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
 import Date from 'src/components/Date';
+import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
+import { BugFragment } from './Bug.generated';
+import CommentForm from './CommentForm';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -65,10 +68,11 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 type Props = {
+  bug: BugFragment;
   op: AddCommentFragment | CreateFragment;
 };
 
-function Message({ op }: Props) {
+function Message({ bug, op }: Props) {
   const classes = useStyles();
 
   const editComment = (id: String) => {
@@ -101,6 +105,13 @@ function Message({ op }: Props) {
           <Content markdown={op.message} />
         </section>
       </Paper>
+      <IfLoggedIn>
+        {() => (
+          <div>
+            <CommentForm bug={bug} />
+          </div>
+        )}
+      </IfLoggedIn>
     </article>
   );
 }
diff --git a/webui/src/pages/bug/Timeline.tsx b/webui/src/pages/bug/Timeline.tsx
index 6e1d242e..60459a53 100644
--- a/webui/src/pages/bug/Timeline.tsx
+++ b/webui/src/pages/bug/Timeline.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 
+import { BugFragment } from './Bug.generated';
 import LabelChange from './LabelChange';
 import Message from './Message';
 import SetStatus from './SetStatus';
@@ -18,9 +19,10 @@ const useStyles = makeStyles((theme) => ({
 
 type Props = {
   ops: Array<TimelineItemFragment>;
+  bug: BugFragment;
 };
 
-function Timeline({ ops }: Props) {
+function Timeline({ bug, ops }: Props) {
   const classes = useStyles();
 
   return (
@@ -28,9 +30,9 @@ function Timeline({ ops }: Props) {
       {ops.map((op, index) => {
         switch (op.__typename) {
           case 'CreateTimelineItem':
-            return <Message key={index} op={op} />;
+            return <Message key={index} op={op} bug={bug} />;
           case 'AddCommentTimelineItem':
-            return <Message key={index} op={op} />;
+            return <Message key={index} op={op} bug={bug} />;
           case 'LabelChangeTimelineItem':
             return <LabelChange key={index} op={op} />;
           case 'SetTitleTimelineItem':
diff --git a/webui/src/pages/bug/TimelineQuery.tsx b/webui/src/pages/bug/TimelineQuery.tsx
index 74eed52b..d66c665b 100644
--- a/webui/src/pages/bug/TimelineQuery.tsx
+++ b/webui/src/pages/bug/TimelineQuery.tsx
@@ -2,17 +2,18 @@ import React from 'react';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
+import { BugFragment } from './Bug.generated';
 import Timeline from './Timeline';
 import { useTimelineQuery } from './TimelineQuery.generated';
 
 type Props = {
-  id: string;
+  bug: BugFragment;
 };
 
-const TimelineQuery = ({ id }: Props) => {
+const TimelineQuery = ({ bug }: Props) => {
   const { loading, error, data } = useTimelineQuery({
     variables: {
-      id,
+      id: bug.id,
       first: 100,
     },
   });
@@ -25,7 +26,7 @@ const TimelineQuery = ({ id }: Props) => {
     return null;
   }
 
-  return <Timeline ops={nodes} />;
+  return <Timeline ops={nodes} bug={bug} />;
 };
 
 export default TimelineQuery;
-- 
cgit 


From d82c481e00a729c9736ac3f297347b23201a4080 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 12:30:38 +0100
Subject: Fix remove .swp files

---
 webui/src/pages/bug/.Bug.tsx.swp           | Bin 12288 -> 0 bytes
 webui/src/pages/bug/.TimelineQuery.tsx.swp | Bin 12288 -> 0 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 webui/src/pages/bug/.Bug.tsx.swp
 delete mode 100644 webui/src/pages/bug/.TimelineQuery.tsx.swp

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/.Bug.tsx.swp b/webui/src/pages/bug/.Bug.tsx.swp
deleted file mode 100644
index 4a312e0d..00000000
Binary files a/webui/src/pages/bug/.Bug.tsx.swp and /dev/null differ
diff --git a/webui/src/pages/bug/.TimelineQuery.tsx.swp b/webui/src/pages/bug/.TimelineQuery.tsx.swp
deleted file mode 100644
index 0ad00f67..00000000
Binary files a/webui/src/pages/bug/.TimelineQuery.tsx.swp and /dev/null differ
-- 
cgit 


From 2483b2729602b5ab544a9d0e88f47eba233e8e82 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 13:04:24 +0100
Subject: Display comment form on edit click

---
 webui/src/pages/bug/Message.tsx | 55 +++++++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 21 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 3993b5f7..4ad68b44 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
@@ -74,14 +74,15 @@ type Props = {
 
 function Message({ bug, op }: Props) {
   const classes = useStyles();
+  const [editMode, switchToEditMode] = useState(false);
 
   const editComment = (id: String) => {
+    switchToEditMode(true);
     console.log(id);
   };
 
-  return (
-    <article className={classes.container}>
-      <Avatar author={op.author} className={classes.avatar} />
+  function readMessageView() {
+    return (
       <Paper elevation={1} className={classes.bubble}>
         <header className={classes.header}>
           <div className={classes.title}>
@@ -90,28 +91,40 @@ function Message({ bug, op }: Props) {
             <Date date={op.createdAt} />
           </div>
           {op.edited && <div className={classes.tag}>Edited</div>}
-          <Tooltip title="Edit Message" placement="top" arrow={true}>
-            <IconButton
-              disableRipple
-              className={classes.editButton}
-              aria-label="edit message"
-              onClick={() => editComment(op.id)}
-            >
-              <EditIcon />
-            </IconButton>
-          </Tooltip>
+          <IfLoggedIn>
+            {() => (
+              <Tooltip title="Edit Message" placement="top" arrow={true}>
+                <IconButton
+                  disableRipple
+                  className={classes.editButton}
+                  aria-label="edit message"
+                  onClick={() => editComment(op.id)}
+                >
+                  <EditIcon />
+                </IconButton>
+              </Tooltip>
+            )}
+          </IfLoggedIn>
         </header>
         <section className={classes.body}>
           <Content markdown={op.message} />
         </section>
       </Paper>
-      <IfLoggedIn>
-        {() => (
-          <div>
-            <CommentForm bug={bug} />
-          </div>
-        )}
-      </IfLoggedIn>
+    );
+  }
+
+  function editMessageView() {
+    return (
+      <div className={classes.bubble}>
+        <CommentForm bug={bug} />
+      </div>
+    );
+  }
+
+  return (
+    <article className={classes.container}>
+      <Avatar author={op.author} className={classes.avatar} />
+      {editMode ? editMessageView() : readMessageView()}
     </article>
   );
 }
-- 
cgit 


From 0cd5c84d59d00141bb997346f538b165644d233c Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 13:14:07 +0100
Subject: Fix CommentForm margin

---
 webui/src/pages/bug/Bug.tsx         | 1 +
 webui/src/pages/bug/CommentForm.tsx | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 46a443d5..83785a37 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -59,6 +59,7 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.body2,
   },
   commentForm: {
+    marginTop: theme.spacing(2),
     marginLeft: 48,
   },
 }));
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 773e7d0e..fe9536ac 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -15,7 +15,6 @@ import { TimelineDocument } from './TimelineQuery.generated';
 type StyleProps = { loading: boolean };
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   container: {
-    margin: theme.spacing(2, 0),
     padding: theme.spacing(0, 2, 2, 2),
   },
   textarea: {},
-- 
cgit 


From c874d111f50dc129a1ac8210beff626eea2f2186 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 16:04:34 +0100
Subject: Create EditCommentForm and handle cancle button

---
 webui/src/pages/bug/EditCommentForm.tsx | 119 ++++++++++++++++++++++++++++++++
 webui/src/pages/bug/Message.tsx         |  12 +++-
 2 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 webui/src/pages/bug/EditCommentForm.tsx

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
new file mode 100644
index 00000000..fb192a02
--- /dev/null
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -0,0 +1,119 @@
+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 CommentInput from '../../components/CommentInput/CommentInput';
+
+import { BugFragment } from './Bug.generated';
+import { useAddCommentMutation } from './CommentForm.generated';
+import { TimelineDocument } from './TimelineQuery.generated';
+
+type StyleProps = { loading: boolean };
+const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
+  container: {
+    padding: theme.spacing(0, 2, 2, 2),
+  },
+  textarea: {},
+  tabContent: {
+    margin: theme.spacing(2, 0),
+  },
+  preview: {
+    borderBottom: `solid 3px ${theme.palette.grey['200']}`,
+    minHeight: '5rem',
+  },
+  actions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  greenButton: {
+    marginLeft: '8px',
+    backgroundColor: '#2ea44fd9',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#2ea44f',
+    },
+  },
+}));
+
+type Props = {
+  bug: BugFragment;
+  commentId: string;
+  onCancleClick?: () => void;
+};
+
+function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
+  const [addComment, { loading }] = useAddCommentMutation();
+  const [issueComment, setIssueComment] = useState('');
+  const [inputProp, setInputProp] = useState<any>('');
+  const classes = useStyles({ loading });
+  const form = useRef<HTMLFormElement>(null);
+
+  const submit = () => {
+    addComment({
+      variables: {
+        input: {
+          prefix: bug.id,
+          message: issueComment,
+        },
+      },
+      refetchQueries: [
+        // TODO: update the cache instead of refetching
+        {
+          query: TimelineDocument,
+          variables: {
+            id: bug.id,
+            first: 100,
+          },
+        },
+      ],
+      awaitRefetchQueries: true,
+    }).then(() => resetForm());
+  };
+
+  function resetForm() {
+    setInputProp({
+      value: '',
+    });
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (issueComment.length > 0) submit();
+  };
+
+  function getCancleButton() {
+    return (
+      <Button onClick={onCancleClick} variant="contained">
+        Cancle
+      </Button>
+    );
+  }
+
+  return (
+    <Paper className={classes.container}>
+      <form onSubmit={handleSubmit} ref={form}>
+        <CommentInput
+          inputProps={inputProp}
+          loading={loading}
+          onChange={(comment: string) => setIssueComment(comment)}
+        />
+        <div className={classes.actions}>
+          {onCancleClick ? getCancleButton() : ''}
+          <Button
+            className={classes.greenButton}
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={loading || issueComment.length === 0}
+          >
+            Update Comment
+          </Button>
+        </div>
+      </form>
+    </Paper>
+  );
+}
+
+export default EditCommentForm;
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 4ad68b44..928e256f 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -12,7 +12,7 @@ import Date from 'src/components/Date';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
 import { BugFragment } from './Bug.generated';
-import CommentForm from './CommentForm';
+import EditCommentForm from './EditCommentForm';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -114,9 +114,17 @@ function Message({ bug, op }: Props) {
   }
 
   function editMessageView() {
+    const cancleEdition = () => {
+      switchToEditMode(false);
+    };
+
     return (
       <div className={classes.bubble}>
-        <CommentForm bug={bug} />
+        <EditCommentForm
+          bug={bug}
+          onCancleClick={cancleEdition}
+          commentId={op.id}
+        />
       </div>
     );
   }
-- 
cgit 


From 9f6c045f8b6e44e47300cec181217906f48d8261 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 17:54:49 +0100
Subject: Several fixes

- Fix misspelling of cancel...
- Fix flickering of green "update comment" button
- Fill input with comment text
- Close edit view after submit
---
 webui/src/pages/bug/EditCommentForm.tsx | 43 ++++++++++++---------------------
 webui/src/pages/bug/Message.tsx         | 22 +++++++++--------
 2 files changed, 27 insertions(+), 38 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index fb192a02..46cf1e1f 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -8,7 +8,8 @@ import CommentInput from '../../components/CommentInput/CommentInput';
 
 import { BugFragment } from './Bug.generated';
 import { useAddCommentMutation } from './CommentForm.generated';
-import { TimelineDocument } from './TimelineQuery.generated';
+import { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
 
 type StyleProps = { loading: boolean };
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
@@ -39,37 +40,22 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 
 type Props = {
   bug: BugFragment;
-  commentId: string;
-  onCancleClick?: () => void;
+  comment: AddCommentFragment | CreateFragment;
+  onCancelClick?: () => void;
+  onPostSubmit?: () => void;
 };
 
-function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
+function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
   const [addComment, { loading }] = useAddCommentMutation();
-  const [issueComment, setIssueComment] = useState('');
+  const [issueComment, setIssueComment] = useState<string>(comment.message);
   const [inputProp, setInputProp] = useState<any>('');
   const classes = useStyles({ loading });
   const form = useRef<HTMLFormElement>(null);
 
   const submit = () => {
-    addComment({
-      variables: {
-        input: {
-          prefix: bug.id,
-          message: issueComment,
-        },
-      },
-      refetchQueries: [
-        // TODO: update the cache instead of refetching
-        {
-          query: TimelineDocument,
-          variables: {
-            id: bug.id,
-            first: 100,
-          },
-        },
-      ],
-      awaitRefetchQueries: true,
-    }).then(() => resetForm());
+    console.log('submit: ' + issueComment);
+    resetForm();
+    if (onPostSubmit) onPostSubmit();
   };
 
   function resetForm() {
@@ -83,10 +69,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
     if (issueComment.length > 0) submit();
   };
 
-  function getCancleButton() {
+  function getCancelButton() {
     return (
-      <Button onClick={onCancleClick} variant="contained">
-        Cancle
+      <Button onClick={onCancelClick} variant="contained">
+        Cancel
       </Button>
     );
   }
@@ -98,9 +84,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
           inputProps={inputProp}
           loading={loading}
           onChange={(comment: string) => setIssueComment(comment)}
+          inputText={comment.message}
         />
         <div className={classes.actions}>
-          {onCancleClick ? getCancleButton() : ''}
+          {onCancelClick ? getCancelButton() : ''}
           <Button
             className={classes.greenButton}
             variant="contained"
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 928e256f..08a55dc6 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -72,7 +72,7 @@ type Props = {
   op: AddCommentFragment | CreateFragment;
 };
 
-function Message({ bug, op }: Props) {
+function Message({ bug, op: comment }: Props) {
   const classes = useStyles();
   const [editMode, switchToEditMode] = useState(false);
 
@@ -86,11 +86,11 @@ function Message({ bug, op }: Props) {
       <Paper elevation={1} className={classes.bubble}>
         <header className={classes.header}>
           <div className={classes.title}>
-            <Author className={classes.author} author={op.author} />
+            <Author className={classes.author} author={comment.author} />
             <span> commented </span>
-            <Date date={op.createdAt} />
+            <Date date={comment.createdAt} />
           </div>
-          {op.edited && <div className={classes.tag}>Edited</div>}
+          {comment.edited && <div className={classes.tag}>Edited</div>}
           <IfLoggedIn>
             {() => (
               <Tooltip title="Edit Message" placement="top" arrow={true}>
@@ -98,7 +98,7 @@ function Message({ bug, op }: Props) {
                   disableRipple
                   className={classes.editButton}
                   aria-label="edit message"
-                  onClick={() => editComment(op.id)}
+                  onClick={() => editComment(comment.id)}
                 >
                   <EditIcon />
                 </IconButton>
@@ -107,14 +107,14 @@ function Message({ bug, op }: Props) {
           </IfLoggedIn>
         </header>
         <section className={classes.body}>
-          <Content markdown={op.message} />
+          <Content markdown={comment.message} />
         </section>
       </Paper>
     );
   }
 
   function editMessageView() {
-    const cancleEdition = () => {
+    const cancelEdition = () => {
       switchToEditMode(false);
     };
 
@@ -122,8 +122,10 @@ function Message({ bug, op }: Props) {
       <div className={classes.bubble}>
         <EditCommentForm
           bug={bug}
-          onCancleClick={cancleEdition}
-          commentId={op.id}
+          onCancelClick={cancelEdition}
+          // Close edit view after submitted changes
+          onPostSubmit={cancelEdition}
+          comment={comment}
         />
       </div>
     );
@@ -131,7 +133,7 @@ function Message({ bug, op }: Props) {
 
   return (
     <article className={classes.container}>
-      <Avatar author={op.author} className={classes.avatar} />
+      <Avatar author={comment.author} className={classes.avatar} />
       {editMode ? editMessageView() : readMessageView()}
     </article>
   );
-- 
cgit 


From 0e3caba922ba5a21a7e7aa0f433d944aacf58e78 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 18:19:16 +0100
Subject: Update comment on submit

---
 webui/src/pages/bug/EditCommentForm.tsx     | 23 ++++++++++++++++-------
 webui/src/pages/bug/EditCommentform.graphql |  7 +++++++
 2 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 webui/src/pages/bug/EditCommentform.graphql

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index 46cf1e1f..f5040064 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -7,7 +7,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
 import { BugFragment } from './Bug.generated';
-import { useAddCommentMutation } from './CommentForm.generated';
+import { useEditCommentMutation } from './EditCommentform.generated';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -46,14 +46,23 @@ type Props = {
 };
 
 function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
-  const [addComment, { loading }] = useAddCommentMutation();
-  const [issueComment, setIssueComment] = useState<string>(comment.message);
+  const [editComment, { loading }] = useEditCommentMutation();
+  const [message, setMessage] = useState<string>(comment.message);
   const [inputProp, setInputProp] = useState<any>('');
   const classes = useStyles({ loading });
   const form = useRef<HTMLFormElement>(null);
 
   const submit = () => {
-    console.log('submit: ' + issueComment);
+    console.log('submit: ' + message + '\nTo: ' + comment.id);
+    editComment({
+      variables: {
+        input: {
+          prefix: bug.id,
+          message: message,
+          target: comment.id,
+        },
+      },
+    });
     resetForm();
     if (onPostSubmit) onPostSubmit();
   };
@@ -66,7 +75,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (issueComment.length > 0) submit();
+    if (message.length > 0) submit();
   };
 
   function getCancelButton() {
@@ -83,7 +92,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
         <CommentInput
           inputProps={inputProp}
           loading={loading}
-          onChange={(comment: string) => setIssueComment(comment)}
+          onChange={(message: string) => setMessage(message)}
           inputText={comment.message}
         />
         <div className={classes.actions}>
@@ -93,7 +102,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
             variant="contained"
             color="primary"
             type="submit"
-            disabled={loading || issueComment.length === 0}
+            disabled={loading || message.length === 0}
           >
             Update Comment
           </Button>
diff --git a/webui/src/pages/bug/EditCommentform.graphql b/webui/src/pages/bug/EditCommentform.graphql
new file mode 100644
index 00000000..c7047e6e
--- /dev/null
+++ b/webui/src/pages/bug/EditCommentform.graphql
@@ -0,0 +1,7 @@
+mutation EditComment($input: EditCommentInput!) {
+  editComment(input: $input) {
+    bug {
+      id
+    }
+  }
+}
-- 
cgit 


From d4f96fa91faa6f56a790ebc7fd041af705ed77b0 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 18:21:52 +0100
Subject: Use theme colors for submit button

---
 webui/src/pages/bug/EditCommentForm.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index f5040064..ca627c27 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -30,10 +30,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   },
   greenButton: {
     marginLeft: '8px',
-    backgroundColor: '#2ea44fd9',
-    color: '#fff',
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText,
     '&:hover': {
-      backgroundColor: '#2ea44f',
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.success.contrastText,
     },
   },
 }));
-- 
cgit 


From d6c3ffa984c57a546d437d9be989077d824fac46 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 21:21:20 +0100
Subject: Fix graphql filename capitalization

---
 webui/src/pages/bug/EditCommentForm.graphql | 7 +++++++
 webui/src/pages/bug/EditCommentform.graphql | 7 -------
 2 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 webui/src/pages/bug/EditCommentForm.graphql
 delete mode 100644 webui/src/pages/bug/EditCommentform.graphql

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.graphql b/webui/src/pages/bug/EditCommentForm.graphql
new file mode 100644
index 00000000..c7047e6e
--- /dev/null
+++ b/webui/src/pages/bug/EditCommentForm.graphql
@@ -0,0 +1,7 @@
+mutation EditComment($input: EditCommentInput!) {
+  editComment(input: $input) {
+    bug {
+      id
+    }
+  }
+}
diff --git a/webui/src/pages/bug/EditCommentform.graphql b/webui/src/pages/bug/EditCommentform.graphql
deleted file mode 100644
index c7047e6e..00000000
--- a/webui/src/pages/bug/EditCommentform.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-mutation EditComment($input: EditCommentInput!) {
-  editComment(input: $input) {
-    bug {
-      id
-    }
-  }
-}
-- 
cgit 


From 9fb033ef191a23b1338e0fdfe8ab1f462165b99d Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 22:28:45 +0100
Subject: Return of new comment works...

...but the types are quite hacky
---
 webui/src/pages/bug/EditCommentForm.graphql |  9 +++++++++
 webui/src/pages/bug/EditCommentForm.tsx     | 11 +++++++----
 webui/src/pages/bug/Message.tsx             |  8 ++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.graphql b/webui/src/pages/bug/EditCommentForm.graphql
index c7047e6e..4765b75c 100644
--- a/webui/src/pages/bug/EditCommentForm.graphql
+++ b/webui/src/pages/bug/EditCommentForm.graphql
@@ -1,7 +1,16 @@
+#import "./MessageCommentFragment.graphql"
+#import "./MessageCreateFragment.graphql"
+
 mutation EditComment($input: EditCommentInput!) {
   editComment(input: $input) {
     bug {
       id
+      timeline {
+        comments: nodes {
+          ...Create
+          ...AddComment
+        }
+      }
     }
   }
 }
diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index ca627c27..7823d75e 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -7,7 +7,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
 import { BugFragment } from './Bug.generated';
-import { useEditCommentMutation } from './EditCommentform.generated';
+import { useEditCommentMutation } from './EditCommentForm.generated';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -43,7 +43,7 @@ type Props = {
   bug: BugFragment;
   comment: AddCommentFragment | CreateFragment;
   onCancelClick?: () => void;
-  onPostSubmit?: () => void;
+  onPostSubmit?: (comments: any) => void;
 };
 
 function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
@@ -54,7 +54,6 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
   const form = useRef<HTMLFormElement>(null);
 
   const submit = () => {
-    console.log('submit: ' + message + '\nTo: ' + comment.id);
     editComment({
       variables: {
         input: {
@@ -63,9 +62,13 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
           target: comment.id,
         },
       },
+    }).then((result) => {
+      const comments = result.data?.editComment.bug.timeline.comments;
+      const coms = comments as (AddCommentFragment | CreateFragment)[];
+      const res = coms.find((elem) => elem.id === comment.id);
+      if (onPostSubmit) onPostSubmit(res);
     });
     resetForm();
-    if (onPostSubmit) onPostSubmit();
   };
 
   function resetForm() {
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 08a55dc6..7455104b 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -78,7 +78,6 @@ function Message({ bug, op: comment }: Props) {
 
   const editComment = (id: String) => {
     switchToEditMode(true);
-    console.log(id);
   };
 
   function readMessageView() {
@@ -118,13 +117,18 @@ function Message({ bug, op: comment }: Props) {
       switchToEditMode(false);
     };
 
+    const onPostSubmit = (comments: AddCommentFragment | CreateFragment) => {
+      console.log('posted: ' + comments.message);
+      switchToEditMode(false);
+    };
+
     return (
       <div className={classes.bubble}>
         <EditCommentForm
           bug={bug}
           onCancelClick={cancelEdition}
           // Close edit view after submitted changes
-          onPostSubmit={cancelEdition}
+          onPostSubmit={onPostSubmit}
           comment={comment}
         />
       </div>
-- 
cgit 


From b06f7c781620c967e939577fc92e1265cdff6485 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 18 Mar 2021 12:07:09 +0100
Subject: Reduced arbitary variable names

---
 webui/src/pages/bug/EditCommentForm.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index 7823d75e..0794c3ef 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -63,10 +63,14 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
         },
       },
     }).then((result) => {
-      const comments = result.data?.editComment.bug.timeline.comments;
-      const coms = comments as (AddCommentFragment | CreateFragment)[];
-      const res = coms.find((elem) => elem.id === comment.id);
-      if (onPostSubmit) onPostSubmit(res);
+      const comments = result.data?.editComment.bug.timeline.comments as (
+        | AddCommentFragment
+        | CreateFragment
+      )[];
+      // NOTE Searching for the changed comment could be dropped if GraphQL get
+      // filter by id argument for timelineitems
+      const modifiedComment = comments.find((elem) => elem.id === comment.id);
+      if (onPostSubmit) onPostSubmit(modifiedComment);
     });
     resetForm();
   };
-- 
cgit 


From 142adfd2b15dda3a7b9353c046f5858496012876 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 18 Mar 2021 12:08:19 +0100
Subject: Update message view after editing

---
 webui/src/pages/bug/Message.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 7455104b..adb3057c 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -72,9 +72,10 @@ type Props = {
   op: AddCommentFragment | CreateFragment;
 };
 
-function Message({ bug, op: comment }: Props) {
+function Message({ bug, op }: Props) {
   const classes = useStyles();
   const [editMode, switchToEditMode] = useState(false);
+  const [comment, setComment] = useState(op);
 
   const editComment = (id: String) => {
     switchToEditMode(true);
@@ -117,8 +118,8 @@ function Message({ bug, op: comment }: Props) {
       switchToEditMode(false);
     };
 
-    const onPostSubmit = (comments: AddCommentFragment | CreateFragment) => {
-      console.log('posted: ' + comments.message);
+    const onPostSubmit = (comment: AddCommentFragment | CreateFragment) => {
+      setComment(comment);
       switchToEditMode(false);
     };
 
-- 
cgit 


From 58e124056002e7e8e9dc9ac38f672a90b005eebd Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 18 Mar 2021 12:13:03 +0100
Subject: Add space between edit button and edited indicator

---
 webui/src/pages/bug/Message.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index adb3057c..26bbb1aa 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -60,6 +60,7 @@ const useStyles = makeStyles((theme) => ({
   editButton: {
     color: theme.palette.info.contrastText,
     padding: '0rem',
+    marginLeft: theme.spacing(1),
     fontSize: '0.75rem',
     '&:hover': {
       backgroundColor: 'inherit',
-- 
cgit 


From 25d3aca9adac3441da14d53f489b2609fefac21f Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 18 Mar 2021 14:11:41 +0100
Subject: Add test menu for edit history

---
 webui/src/pages/bug/EditHistoryMenu.tsx | 80 +++++++++++++++++++++++++++++++++
 webui/src/pages/bug/Message.tsx         | 13 ++++--
 2 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 webui/src/pages/bug/EditHistoryMenu.tsx

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
new file mode 100644
index 00000000..10b66f8f
--- /dev/null
+++ b/webui/src/pages/bug/EditHistoryMenu.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import HistoryIcon from '@material-ui/icons/History';
+
+const options = [
+  'None',
+  'Atria',
+  'Callisto',
+  'Dione',
+  'Ganymede',
+  'Hangouts Call',
+  'Luna',
+  'Oberon',
+  'Phobos',
+  'Pyxis',
+  'Sedna',
+  'Titania',
+  'Triton',
+  'Umbriel',
+];
+
+const ITEM_HEIGHT = 48;
+
+type Props = {
+  iconBtnProps?: IconButtonProps;
+};
+function EditHistoryMenu({ iconBtnProps }: Props) {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <IconButton
+        aria-label="more"
+        aria-controls="long-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+        {...iconBtnProps}
+      >
+        <HistoryIcon />
+      </IconButton>
+      <Menu
+        id="long-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 4.5,
+            width: '20ch',
+          },
+        }}
+      >
+        {options.map((option) => (
+          <MenuItem
+            key={option}
+            selected={option === 'Pyxis'}
+            onClick={handleClose}
+          >
+            {option}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export default EditHistoryMenu;
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 26bbb1aa..d36b1044 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -13,6 +13,7 @@ import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
 import { BugFragment } from './Bug.generated';
 import EditCommentForm from './EditCommentForm';
+import EditHistoryMenu from './EditHistoryMenu';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -57,7 +58,8 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.body2,
     padding: '0.5rem',
   },
-  editButton: {
+  headerActions2: {},
+  headerActions: {
     color: theme.palette.info.contrastText,
     padding: '0rem',
     marginLeft: theme.spacing(1),
@@ -91,13 +93,17 @@ function Message({ bug, op }: Props) {
             <span> commented </span>
             <Date date={comment.createdAt} />
           </div>
-          {comment.edited && <div className={classes.tag}>Edited</div>}
+          {comment.edited && (
+            <EditHistoryMenu
+              iconBtnProps={{ className: classes.headerActions }}
+            />
+          )}
           <IfLoggedIn>
             {() => (
               <Tooltip title="Edit Message" placement="top" arrow={true}>
                 <IconButton
                   disableRipple
-                  className={classes.editButton}
+                  className={classes.headerActions}
                   aria-label="edit message"
                   onClick={() => editComment(comment.id)}
                 >
@@ -129,7 +135,6 @@ function Message({ bug, op }: Props) {
         <EditCommentForm
           bug={bug}
           onCancelClick={cancelEdition}
-          // Close edit view after submitted changes
           onPostSubmit={onPostSubmit}
           comment={comment}
         />
-- 
cgit 


From defd1ae00cccce0b46207e03084fe6af32096610 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 18 Mar 2021 15:45:20 +0100
Subject: Populate history menu with edit steps

---
 webui/src/pages/bug/EditHistoryMenu.tsx            | 54 ++++++++++++----------
 webui/src/pages/bug/Message.tsx                    |  2 +
 webui/src/pages/bug/MessageCommentFragment.graphql |  4 ++
 webui/src/pages/bug/MessageCreateFragment.graphql  |  4 ++
 webui/src/pages/bug/MessageEditHistory.graphql     | 15 ++++++
 5 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 webui/src/pages/bug/MessageEditHistory.graphql

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
index 10b66f8f..a916a1a8 100644
--- a/webui/src/pages/bug/EditHistoryMenu.tsx
+++ b/webui/src/pages/bug/EditHistoryMenu.tsx
@@ -1,36 +1,43 @@
 import React from 'react';
 
+import CircularProgress from '@material-ui/core/CircularProgress';
 import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import HistoryIcon from '@material-ui/icons/History';
 
-const options = [
-  'None',
-  'Atria',
-  'Callisto',
-  'Dione',
-  'Ganymede',
-  'Hangouts Call',
-  'Luna',
-  'Oberon',
-  'Phobos',
-  'Pyxis',
-  'Sedna',
-  'Titania',
-  'Triton',
-  'Umbriel',
-];
+import Date from 'src/components/Date';
+
+import { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
+import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
 
 const ITEM_HEIGHT = 48;
 
 type Props = {
+  bugId: string;
+  commentId: string;
   iconBtnProps?: IconButtonProps;
 };
-function EditHistoryMenu({ iconBtnProps }: Props) {
+function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
+  const { loading, error, data } = useMessageEditHistoryQuery({
+    variables: { bugIdPrefix: bugId },
+  });
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+
+  const comments = data?.repository?.bug?.timeline.comments as (
+    | AddCommentFragment
+    | CreateFragment
+  )[];
+  // NOTE Searching for the changed comment could be dropped if GraphQL get
+  // filter by id argument for timelineitems
+  const comment = comments.find((elem) => elem.id === commentId);
+  const history = comment?.history;
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -63,13 +70,12 @@ function EditHistoryMenu({ iconBtnProps }: Props) {
           },
         }}
       >
-        {options.map((option) => (
-          <MenuItem
-            key={option}
-            selected={option === 'Pyxis'}
-            onClick={handleClose}
-          >
-            {option}
+        <MenuItem key={0} disabled>
+          Edited {history?.length} times.
+        </MenuItem>
+        {history?.map((edit, index) => (
+          <MenuItem key={index} onClick={handleClose}>
+            <Date date={edit.date} />
           </MenuItem>
         ))}
       </Menu>
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index d36b1044..b117c103 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -96,6 +96,8 @@ function Message({ bug, op }: Props) {
           {comment.edited && (
             <EditHistoryMenu
               iconBtnProps={{ className: classes.headerActions }}
+              bugId={bug.id}
+              commentId={comment.id}
             />
           )}
           <IfLoggedIn>
diff --git a/webui/src/pages/bug/MessageCommentFragment.graphql b/webui/src/pages/bug/MessageCommentFragment.graphql
index 337eade0..c852b4b0 100644
--- a/webui/src/pages/bug/MessageCommentFragment.graphql
+++ b/webui/src/pages/bug/MessageCommentFragment.graphql
@@ -6,4 +6,8 @@ fragment AddComment on AddCommentTimelineItem {
   ...authored
   edited
   message
+  history {
+    message
+    date
+  }
 }
diff --git a/webui/src/pages/bug/MessageCreateFragment.graphql b/webui/src/pages/bug/MessageCreateFragment.graphql
index 81f80afb..1f4647b6 100644
--- a/webui/src/pages/bug/MessageCreateFragment.graphql
+++ b/webui/src/pages/bug/MessageCreateFragment.graphql
@@ -6,4 +6,8 @@ fragment Create on CreateTimelineItem {
   ...authored
   edited
   message
+  history {
+    message
+    date
+  }
 }
diff --git a/webui/src/pages/bug/MessageEditHistory.graphql b/webui/src/pages/bug/MessageEditHistory.graphql
new file mode 100644
index 00000000..6fde8d45
--- /dev/null
+++ b/webui/src/pages/bug/MessageEditHistory.graphql
@@ -0,0 +1,15 @@
+#import "./MessageCommentFragment.graphql"
+#import "./MessageCreateFragment.graphql"
+
+query MessageEditHistory($bugIdPrefix: String!) {
+  repository {
+    bug(prefix: $bugIdPrefix) {
+      timeline {
+        comments: nodes {
+          ...Create
+          ...AddComment
+        }
+      }
+    }
+  }
+}
-- 
cgit 


From d453abdeedcac5b7593f72d63a5641f9a3e99da0 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 11:21:18 +0100
Subject: Move toggle button out of history menu

---
 webui/src/pages/bug/EditHistoryMenu.tsx | 33 +++++---------------
 webui/src/pages/bug/Message.tsx         | 54 ++++++++++++++++++++++++++++-----
 2 files changed, 54 insertions(+), 33 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
index a916a1a8..da2ed0cd 100644
--- a/webui/src/pages/bug/EditHistoryMenu.tsx
+++ b/webui/src/pages/bug/EditHistoryMenu.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import HistoryIcon from '@material-ui/icons/History';
 
 import Date from 'src/components/Date';
 
@@ -15,13 +13,13 @@ import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
 const ITEM_HEIGHT = 48;
 
 type Props = {
+  anchor: null | HTMLElement;
   bugId: string;
   commentId: string;
-  iconBtnProps?: IconButtonProps;
+  onClose: () => void;
 };
-function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
+function EditHistoryMenu({ anchor, bugId, commentId, onClose }: Props) {
+  const open = Boolean(anchor);
 
   const { loading, error, data } = useMessageEditHistoryQuery({
     variables: { bugIdPrefix: bugId },
@@ -38,31 +36,14 @@ function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
   const comment = comments.find((elem) => elem.id === commentId);
   const history = comment?.history;
 
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
   return (
     <div>
-      <IconButton
-        aria-label="more"
-        aria-controls="long-menu"
-        aria-haspopup="true"
-        onClick={handleClick}
-        {...iconBtnProps}
-      >
-        <HistoryIcon />
-      </IconButton>
       <Menu
         id="long-menu"
-        anchorEl={anchorEl}
+        anchorEl={anchor}
         keepMounted
         open={open}
-        onClose={handleClose}
+        onClose={onClose}
         PaperProps={{
           style: {
             maxHeight: ITEM_HEIGHT * 4.5,
@@ -74,7 +55,7 @@ function EditHistoryMenu({ iconBtnProps, bugId, commentId }: Props) {
           Edited {history?.length} times.
         </MenuItem>
         {history?.map((edit, index) => (
-          <MenuItem key={index} onClick={handleClose}>
+          <MenuItem key={index} onClick={onClose}>
             <Date date={edit.date} />
           </MenuItem>
         ))}
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index b117c103..bf3fb6da 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -5,6 +5,7 @@ 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 Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
@@ -58,7 +59,6 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.body2,
     padding: '0.5rem',
   },
-  headerActions2: {},
   headerActions: {
     color: theme.palette.info.contrastText,
     padding: '0rem',
@@ -70,11 +70,55 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+//TODO move button out of this component and let only menu as component with
+//query. Then the query won't execute unless button click renders menu with
+//query.
+//TODO Fix display of load button spinner.
+//TODO Move this button and menu in separate component directory
+//TODO fix failing pipeline due to eslint error
+type HistBtnProps = {
+  bugId: string;
+  commentId: string;
+};
+function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <IconButton
+        aria-label="more"
+        aria-controls="long-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+        className={classes.headerActions}
+      >
+        <HistoryIcon />
+      </IconButton>
+      {anchorEl && (
+        <EditHistoryMenu
+          bugId={bugId}
+          commentId={commentId}
+          anchor={anchorEl}
+          onClose={handleClose}
+        />
+      )}
+    </div>
+  );
+}
+
 type Props = {
   bug: BugFragment;
   op: AddCommentFragment | CreateFragment;
 };
-
 function Message({ bug, op }: Props) {
   const classes = useStyles();
   const [editMode, switchToEditMode] = useState(false);
@@ -94,11 +138,7 @@ function Message({ bug, op }: Props) {
             <Date date={comment.createdAt} />
           </div>
           {comment.edited && (
-            <EditHistoryMenu
-              iconBtnProps={{ className: classes.headerActions }}
-              bugId={bug.id}
-              commentId={comment.id}
-            />
+            <HistoryMenuToggleButton bugId={bug.id} commentId={comment.id} />
           )}
           <IfLoggedIn>
             {() => (
-- 
cgit 


From 155b37e81fb3a5f463ddcc0c39790ea9b755d57b Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 14:20:54 +0100
Subject: Use dialog with accordion for message history menu

---
 webui/src/pages/bug/EditHistoryMenu.tsx      |  67 ---------
 webui/src/pages/bug/Message.tsx              |  36 ++---
 webui/src/pages/bug/MessageHistoryDialog.tsx | 215 +++++++++++++++++++++++++++
 3 files changed, 233 insertions(+), 85 deletions(-)
 delete mode 100644 webui/src/pages/bug/EditHistoryMenu.tsx
 create mode 100644 webui/src/pages/bug/MessageHistoryDialog.tsx

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditHistoryMenu.tsx b/webui/src/pages/bug/EditHistoryMenu.tsx
deleted file mode 100644
index da2ed0cd..00000000
--- a/webui/src/pages/bug/EditHistoryMenu.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-
-import Date from 'src/components/Date';
-
-import { AddCommentFragment } from './MessageCommentFragment.generated';
-import { CreateFragment } from './MessageCreateFragment.generated';
-import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
-
-const ITEM_HEIGHT = 48;
-
-type Props = {
-  anchor: null | HTMLElement;
-  bugId: string;
-  commentId: string;
-  onClose: () => void;
-};
-function EditHistoryMenu({ anchor, bugId, commentId, onClose }: Props) {
-  const open = Boolean(anchor);
-
-  const { loading, error, data } = useMessageEditHistoryQuery({
-    variables: { bugIdPrefix: bugId },
-  });
-  if (loading) return <CircularProgress />;
-  if (error) return <p>Error: {error}</p>;
-
-  const comments = data?.repository?.bug?.timeline.comments as (
-    | AddCommentFragment
-    | CreateFragment
-  )[];
-  // NOTE Searching for the changed comment could be dropped if GraphQL get
-  // filter by id argument for timelineitems
-  const comment = comments.find((elem) => elem.id === commentId);
-  const history = comment?.history;
-
-  return (
-    <div>
-      <Menu
-        id="long-menu"
-        anchorEl={anchor}
-        keepMounted
-        open={open}
-        onClose={onClose}
-        PaperProps={{
-          style: {
-            maxHeight: ITEM_HEIGHT * 4.5,
-            width: '20ch',
-          },
-        }}
-      >
-        <MenuItem key={0} disabled>
-          Edited {history?.length} times.
-        </MenuItem>
-        {history?.map((edit, index) => (
-          <MenuItem key={index} onClick={onClose}>
-            <Date date={edit.date} />
-          </MenuItem>
-        ))}
-      </Menu>
-    </div>
-  );
-}
-
-export default EditHistoryMenu;
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index bf3fb6da..51f45a4b 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -14,9 +14,9 @@ import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
 import { BugFragment } from './Bug.generated';
 import EditCommentForm from './EditCommentForm';
-import EditHistoryMenu from './EditHistoryMenu';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
+import MessageHistoryDialog from './MessageHistoryDialog';
 
 const useStyles = makeStyles((theme) => ({
   author: {
@@ -70,10 +70,6 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-//TODO move button out of this component and let only menu as component with
-//query. Then the query won't execute unless button click renders menu with
-//query.
-//TODO Fix display of load button spinner.
 //TODO Move this button and menu in separate component directory
 //TODO fix failing pipeline due to eslint error
 type HistBtnProps = {
@@ -82,14 +78,14 @@ type HistBtnProps = {
 };
 function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) {
   const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [open, setOpen] = React.useState(false);
 
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+  const handleClickOpen = () => {
+    setOpen(true);
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
+    setOpen(false);
   };
 
   return (
@@ -98,19 +94,23 @@ function HistoryMenuToggleButton({ bugId, commentId }: HistBtnProps) {
         aria-label="more"
         aria-controls="long-menu"
         aria-haspopup="true"
-        onClick={handleClick}
+        onClick={handleClickOpen}
         className={classes.headerActions}
       >
         <HistoryIcon />
       </IconButton>
-      {anchorEl && (
-        <EditHistoryMenu
-          bugId={bugId}
-          commentId={commentId}
-          anchor={anchorEl}
-          onClose={handleClose}
-        />
-      )}
+      {
+        // Render CustomizedDialogs on open to prevent fetching the history
+        // before opening the history menu.
+        open && (
+          <MessageHistoryDialog
+            bugId={bugId}
+            commentId={commentId}
+            open={open}
+            onClose={handleClose}
+          />
+        )
+      }
     </div>
   );
 }
diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
new file mode 100644
index 00000000..c49ac661
--- /dev/null
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -0,0 +1,215 @@
+import moment from 'moment';
+import 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 { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
+import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      margin: 0,
+      padding: theme.spacing(2),
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+    },
+  });
+
+export interface DialogTitleProps extends WithStyles<typeof styles> {
+  id: string;
+  children: React.ReactNode;
+  onClose: () => void;
+}
+
+const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
+  const { children, classes, onClose, ...other } = props;
+  return (
+    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+      <Typography variant="h6">{children}</Typography>
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  );
+});
+
+const DialogContent = withStyles((theme: Theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiDialogContent);
+
+const Accordion = withStyles({
+  root: {
+    border: '1px solid rgba(0, 0, 0, .125)',
+    boxShadow: 'none',
+    '&:not(:last-child)': {
+      borderBottom: 0,
+    },
+    '&:before': {
+      display: 'none',
+    },
+    '&$expanded': {
+      margin: 'auto',
+    },
+  },
+  expanded: {},
+})(MuiAccordion);
+
+const AccordionSummary = withStyles((theme) => ({
+  root: {
+    backgroundColor: theme.palette.primary.light,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: theme.palette.divider,
+    marginBottom: -1,
+    minHeight: 56,
+    '&$expanded': {
+      minHeight: 56,
+    },
+  },
+  content: {
+    '&$expanded': {
+      margin: '12px 0',
+    },
+  },
+  expanded: {},
+}))(MuiAccordionSummary);
+
+const AccordionDetails = withStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiAccordionDetails);
+
+type Props = {
+  bugId: string;
+  commentId: string;
+  open: boolean;
+  onClose: () => void;
+};
+function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
+  const [expanded, setExpanded] = React.useState<string | false>('panel0');
+
+  const { loading, error, data } = useMessageEditHistoryQuery({
+    variables: { bugIdPrefix: bugId },
+  });
+  if (loading) {
+    return (
+      <Dialog
+        onClose={onClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle id="customized-dialog-title" onClose={onClose}>
+          Loading...
+        </DialogTitle>
+        <DialogContent dividers>
+          <Grid container justify="center">
+            <CircularProgress />
+          </Grid>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+  if (error) {
+    return (
+      <Dialog
+        onClose={onClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle id="customized-dialog-title" onClose={onClose}>
+          Something went wrong...
+        </DialogTitle>
+        <DialogContent dividers>
+          <p>Error: {error}</p>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  const comments = data?.repository?.bug?.timeline.comments as (
+    | AddCommentFragment
+    | CreateFragment
+  )[];
+  // NOTE Searching for the changed comment could be dropped if GraphQL get
+  // filter by id argument for timelineitems
+  const comment = comments.find((elem) => elem.id === commentId);
+  const history = comment?.history;
+
+  const handleChange = (panel: string) => (
+    event: React.ChangeEvent<{}>,
+    newExpanded: boolean
+  ) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+
+  return (
+    <Dialog
+      onClose={onClose}
+      aria-labelledby="customized-dialog-title"
+      open={open}
+      fullWidth
+      maxWidth="md"
+    >
+      <DialogTitle id="customized-dialog-title" onClose={onClose}>
+        Edited {history?.length} times.
+      </DialogTitle>
+      <DialogContent dividers>
+        {history?.map((edit, index) => (
+          <Accordion
+            square
+            expanded={expanded === 'panel' + index}
+            onChange={handleChange('panel' + index)}
+          >
+            <AccordionSummary
+              aria-controls="panel1d-content"
+              id="panel1d-header"
+            >
+              <Tooltip title={moment(edit.date).format('LLLL')}>
+                <Moment date={edit.date} format="on ll" />
+              </Tooltip>
+            </AccordionSummary>
+            <AccordionDetails>{edit.message}</AccordionDetails>
+          </Accordion>
+        ))}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default MessageHistoryDialog;
-- 
cgit 


From dfb039a9361a1a0d19a31e25130c89f70828ef00 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 14:25:42 +0100
Subject: Rename MessageEditHistoryQuery

---
 webui/src/pages/bug/MessageEditHistory.graphql | 15 ---------------
 webui/src/pages/bug/MessageHistory.graphql     | 15 +++++++++++++++
 webui/src/pages/bug/MessageHistoryDialog.tsx   |  4 ++--
 3 files changed, 17 insertions(+), 17 deletions(-)
 delete mode 100644 webui/src/pages/bug/MessageEditHistory.graphql
 create mode 100644 webui/src/pages/bug/MessageHistory.graphql

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/MessageEditHistory.graphql b/webui/src/pages/bug/MessageEditHistory.graphql
deleted file mode 100644
index 6fde8d45..00000000
--- a/webui/src/pages/bug/MessageEditHistory.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-#import "./MessageCommentFragment.graphql"
-#import "./MessageCreateFragment.graphql"
-
-query MessageEditHistory($bugIdPrefix: String!) {
-  repository {
-    bug(prefix: $bugIdPrefix) {
-      timeline {
-        comments: nodes {
-          ...Create
-          ...AddComment
-        }
-      }
-    }
-  }
-}
diff --git a/webui/src/pages/bug/MessageHistory.graphql b/webui/src/pages/bug/MessageHistory.graphql
new file mode 100644
index 00000000..e90eb459
--- /dev/null
+++ b/webui/src/pages/bug/MessageHistory.graphql
@@ -0,0 +1,15 @@
+#import "./MessageCommentFragment.graphql"
+#import "./MessageCreateFragment.graphql"
+
+query MessageHistory($bugIdPrefix: String!) {
+  repository {
+    bug(prefix: $bugIdPrefix) {
+      timeline {
+        comments: nodes {
+          ...Create
+          ...AddComment
+        }
+      }
+    }
+  }
+}
diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index c49ac661..9857f272 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -23,7 +23,7 @@ import CloseIcon from '@material-ui/icons/Close';
 
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
-import { useMessageEditHistoryQuery } from './MessageEditHistory.generated';
+import { useMessageHistoryQuery } from './MessageHistory.generated';
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -120,7 +120,7 @@ type Props = {
 function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
   const [expanded, setExpanded] = React.useState<string | false>('panel0');
 
-  const { loading, error, data } = useMessageEditHistoryQuery({
+  const { loading, error, data } = useMessageHistoryQuery({
     variables: { bugIdPrefix: bugId },
   });
   if (loading) {
-- 
cgit 


From de9dd698917f905946c5b0e19039e4202375721d Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 14:57:11 +0100
Subject: Sort history from most recent edit to old

---
 webui/src/pages/bug/MessageHistoryDialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 9857f272..dc0e09cb 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -169,7 +169,9 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
   // NOTE Searching for the changed comment could be dropped if GraphQL get
   // filter by id argument for timelineitems
   const comment = comments.find((elem) => elem.id === commentId);
-  const history = comment?.history;
+  // Sort by most recent edit. Must create a copy of constant history as
+  // reverse() modifies inplace.
+  const history = comment?.history.slice().reverse();
 
   const handleChange = (panel: string) => (
     event: React.ChangeEvent<{}>,
@@ -203,6 +205,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
               <Tooltip title={moment(edit.date).format('LLLL')}>
                 <Moment date={edit.date} format="on ll" />
               </Tooltip>
+              {index === 0 && '• (most recent edit)'}
             </AccordionSummary>
             <AccordionDetails>{edit.message}</AccordionDetails>
           </Accordion>
-- 
cgit 


From bd316ef9efc5485513d8f2ceeca3938eb0c5b30f Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 15:03:27 +0100
Subject: Improve readability of accordion summary

---
 webui/src/pages/bug/MessageHistoryDialog.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index dc0e09cb..c359873b 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -202,10 +202,12 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
               aria-controls="panel1d-content"
               id="panel1d-header"
             >
-              <Tooltip title={moment(edit.date).format('LLLL')}>
-                <Moment date={edit.date} format="on ll" />
-              </Tooltip>
-              {index === 0 && '• (most recent edit)'}
+              <Typography>
+                <Tooltip title={moment(edit.date).format('LLLL')}>
+                  <Moment date={edit.date} format="on ll" />
+                </Tooltip>
+                {index === 0 && '• (most recent edit)'}
+              </Typography>
             </AccordionSummary>
             <AccordionDetails>{edit.message}</AccordionDetails>
           </Accordion>
-- 
cgit 


From 5b562559e36d07888e888d014db5130a80be4519 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 16:06:41 +0100
Subject: Fix eslint pipeline fail hopefully

---
 webui/src/pages/bug/EditCommentForm.tsx | 8 ++++----
 webui/src/pages/bug/Message.tsx         | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index 0794c3ef..8fa659b3 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -42,11 +42,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 type Props = {
   bug: BugFragment;
   comment: AddCommentFragment | CreateFragment;
-  onCancelClick?: () => void;
+  onCancel?: () => void;
   onPostSubmit?: (comments: any) => void;
 };
 
-function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
+function EditCommentForm({ bug, comment, onCancel, onPostSubmit }: Props) {
   const [editComment, { loading }] = useEditCommentMutation();
   const [message, setMessage] = useState<string>(comment.message);
   const [inputProp, setInputProp] = useState<any>('');
@@ -88,7 +88,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
 
   function getCancelButton() {
     return (
-      <Button onClick={onCancelClick} variant="contained">
+      <Button onClick={onCancel} variant="contained">
         Cancel
       </Button>
     );
@@ -104,7 +104,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
           inputText={comment.message}
         />
         <div className={classes.actions}>
-          {onCancelClick ? getCancelButton() : ''}
+          {onCancel && getCancelButton()}
           <Button
             className={classes.greenButton}
             variant="contained"
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 51f45a4b..22cce9b1 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -176,7 +176,7 @@ function Message({ bug, op }: Props) {
       <div className={classes.bubble}>
         <EditCommentForm
           bug={bug}
-          onCancelClick={cancelEdition}
+          onCancel={cancelEdition}
           onPostSubmit={onPostSubmit}
           comment={comment}
         />
-- 
cgit 


From 6f26afb74f169a56270d8667a4092901324df2e3 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 17:17:03 +0100
Subject: Number accordion elements

---
 webui/src/pages/bug/MessageHistoryDialog.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index c359873b..9d1578b2 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -203,10 +203,11 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
               id="panel1d-header"
             >
               <Typography>
+                {`#${index + 1} • Edited `}
                 <Tooltip title={moment(edit.date).format('LLLL')}>
                   <Moment date={edit.date} format="on ll" />
                 </Tooltip>
-                {index === 0 && '• (most recent edit)'}
+                {index === 0 && ' (most recent edit)'}
               </Typography>
             </AccordionSummary>
             <AccordionDetails>{edit.message}</AccordionDetails>
-- 
cgit 


From 4c7761461bf7cd6a32af60a75bc2ed75ca91ae3a Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 19:23:16 +0100
Subject: Add message icon with placeholder count

---
 webui/src/pages/list/BugRow.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 8d8fb5cb..b06097ad 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import Grid from '@material-ui/core/Grid';
 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 Date from 'src/components/Date';
@@ -106,6 +108,14 @@ function BugRow({ bug }: Props) {
           </div>
         </div>
       </TableCell>
+      <TableCell>
+        <Grid container wrap="nowrap">
+          <Grid item>
+            <CommentOutlinedIcon aria-label="Comment count" />
+          </Grid>
+          <Grid item>Count</Grid>
+        </Grid>
+      </TableCell>
     </TableRow>
   );
 }
-- 
cgit 


From 688cc33ccca5fd6653ee6f2ee2946dc30a9052ae Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 20:36:09 +0100
Subject: Display real number of comment

---
 webui/src/pages/list/BugRow.graphql |  3 +++
 webui/src/pages/list/BugRow.tsx     | 20 +++++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/BugRow.graphql b/webui/src/pages/list/BugRow.graphql
index 547c09d8..e4e2760c 100644
--- a/webui/src/pages/list/BugRow.graphql
+++ b/webui/src/pages/list/BugRow.graphql
@@ -9,5 +9,8 @@ fragment BugRow on Bug {
   labels {
     ...Label
   }
+  comments {
+    totalCount
+  }
   ...authored
 }
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index b06097ad..f9a50487 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -76,6 +76,10 @@ const useStyles = makeStyles((theme) => ({
       display: 'inline-block',
     },
   },
+  commentCount: {
+    fontSize: '1rem',
+    marginLeft: theme.spacing(0.5),
+  },
 }));
 
 type Props = {
@@ -84,6 +88,8 @@ type Props = {
 
 function BugRow({ bug }: Props) {
   const classes = useStyles();
+  // Subtract 1 from totalCount as 1 comment is the bug description
+  const commentCount = bug.comments.totalCount - 1;
   return (
     <TableRow hover>
       <TableCell className={classes.cell}>
@@ -109,12 +115,16 @@ function BugRow({ bug }: Props) {
         </div>
       </TableCell>
       <TableCell>
-        <Grid container wrap="nowrap">
-          <Grid item>
-            <CommentOutlinedIcon aria-label="Comment count" />
+        {commentCount > 0 && (
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <CommentOutlinedIcon aria-label="Comment count" />
+            </Grid>
+            <Grid item>
+              <span className={classes.commentCount}>{commentCount}</span>
+            </Grid>
           </Grid>
-          <Grid item>Count</Grid>
-        </Grid>
+        )}
       </TableCell>
     </TableRow>
   );
-- 
cgit 


From 4c5a0f37f7979d29fa077c0cfcd9be936c8fc0bd Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sat, 20 Mar 2021 11:04:17 +0100
Subject: Improve message history accordions

- Add unfold icon to edit history accordions
- Change order of edit number. Most recent should have highest id and initial
  description should always have "#1 Edit"
- Add "(Initial description)' to title of the first comment version
---
 webui/src/pages/bug/MessageHistoryDialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 9d1578b2..139eb4a5 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -20,6 +20,7 @@ import {
   WithStyles,
 } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
@@ -199,15 +200,17 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
             onChange={handleChange('panel' + index)}
           >
             <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
               aria-controls="panel1d-content"
               id="panel1d-header"
             >
               <Typography>
-                {`#${index + 1} • Edited `}
+                {`#${history?.length - index} • Edited `}
                 <Tooltip title={moment(edit.date).format('LLLL')}>
                   <Moment date={edit.date} format="on ll" />
                 </Tooltip>
                 {index === 0 && ' (most recent edit)'}
+                {index === history?.length - 1 && ' (Initial description)'}
               </Typography>
             </AccordionSummary>
             <AccordionDetails>{edit.message}</AccordionDetails>
-- 
cgit 


From c610d942fc510349302ed408fcc7b11500c2bb4c Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sat, 20 Mar 2021 11:07:36 +0100
Subject: Remove TODO comments

---
 webui/src/pages/bug/Message.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 22cce9b1..2f4cbc59 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -70,8 +70,6 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-//TODO Move this button and menu in separate component directory
-//TODO fix failing pipeline due to eslint error
 type HistBtnProps = {
   bugId: string;
   commentId: string;
-- 
cgit 


From b7ddb22558bd4b429e810157b343ee41a6575945 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sat, 20 Mar 2021 14:30:10 +0100
Subject: Fixate message counter to end of bug row

Previously the counter has shifted around depending on the length of the bug
titles.
---
 webui/src/pages/list/BugRow.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index f9a50487..1f5d22aa 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import Grid from '@material-ui/core/Grid';
 import TableCell from '@material-ui/core/TableCell/TableCell';
 import TableRow from '@material-ui/core/TableRow/TableRow';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
@@ -80,6 +79,9 @@ const useStyles = makeStyles((theme) => ({
     fontSize: '1rem',
     marginLeft: theme.spacing(0.5),
   },
+  commentCountCell: {
+    display: 'inline-flex',
+  },
 }));
 
 type Props = {
@@ -113,17 +115,11 @@ function BugRow({ bug }: Props) {
             &nbsp;by {bug.author.displayName}
           </div>
         </div>
-      </TableCell>
-      <TableCell>
         {commentCount > 0 && (
-          <Grid container wrap="nowrap">
-            <Grid item>
-              <CommentOutlinedIcon aria-label="Comment count" />
-            </Grid>
-            <Grid item>
-              <span className={classes.commentCount}>{commentCount}</span>
-            </Grid>
-          </Grid>
+          <span className={classes.commentCountCell}>
+            <CommentOutlinedIcon aria-label="Comment count" />
+            <span className={classes.commentCount}>{commentCount}</span>
+          </span>
         )}
       </TableCell>
     </TableRow>
-- 
cgit 


From f752dd54806122ea9d77b6807246897eb2656f0e Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 16:53:00 +0100
Subject: Remove BackToList button from BugPage

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

(limited to 'webui/src/pages')

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) {
         <BugTitleForm bug={bug} />
       </div>
       <div className={classes.container}>
-        <div className={classes.leftSidebar}>
-          <BackToListButton />
-        </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
           <IfLoggedIn>
-- 
cgit 


From 50f146a42a3b59341531b5f478217b10d7033ead Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 17:01:21 +0100
Subject: Remove BackToList button from NewBugPage

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

(limited to 'webui/src/pages')

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 <div>Error</div>;
 
   return (
-    <main className={classes.main}>
-      <div className={classes.container}>
-        <div className={classes.leftSidebar}>
-          <BackToListButton />
+    <Paper className={classes.main}>
+      <form className={classes.form} onSubmit={submitNewIssue}>
+        <BugTitleInput
+          inputRef={(node) => {
+            issueTitleInput = node;
+          }}
+          label="Title"
+          variant="outlined"
+          fullWidth
+          margin="dense"
+          onChange={(event: any) => setIssueTitle(event.target.value)}
+        />
+        <CommentInput
+          loading={false}
+          onChange={(comment: string) => setIssueComment(comment)}
+        />
+        <div className={classes.actions}>
+          <Button
+            className={classes.greenButton}
+            variant="contained"
+            type="submit"
+            disabled={isFormValid() ? false : true}
+          >
+            Submit new issue
+          </Button>
         </div>
-        <Paper className={classes.timeline}>
-          <form className={classes.form} onSubmit={submitNewIssue}>
-            <BugTitleInput
-              inputRef={(node) => {
-                issueTitleInput = node;
-              }}
-              label="Title"
-              variant="outlined"
-              fullWidth
-              margin="dense"
-              onChange={(event: any) => setIssueTitle(event.target.value)}
-            />
-            <CommentInput
-              loading={false}
-              onChange={(comment: string) => setIssueComment(comment)}
-            />
-            <div className={classes.actions}>
-              <Button
-                className={classes.greenButton}
-                variant="contained"
-                type="submit"
-                disabled={!isFormValid()}
-              >
-                Submit new issue
-              </Button>
-            </div>
-          </form>
-        </Paper>
-        <div className={classes.rightSidebar} />
-      </div>
-    </main>
+      </form>
+    </Paper>
   );
 }
 
-- 
cgit 


From bd6159a25b548f8f939f137b70dcf77a722e70dc Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Mon, 22 Mar 2021 13:47:44 +0100
Subject: Treat description not as edit

---
 webui/src/pages/bug/MessageHistoryDialog.tsx | 29 +++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 139eb4a5..0ed33642 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -173,6 +173,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
   // Sort by most recent edit. Must create a copy of constant history as
   // reverse() modifies inplace.
   const history = comment?.history.slice().reverse();
+  const editCount = history?.length === undefined ? 0 : history?.length - 1;
 
   const handleChange = (panel: string) => (
     event: React.ChangeEvent<{}>,
@@ -181,6 +182,23 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
     setExpanded(newExpanded ? panel : false);
   };
 
+  const getSummary = (index: number, date: Date) => {
+    const desc =
+      index === editCount ? 'Created ' : `#${editCount - index} • Edited `;
+    const mostRecent = index === 0 ? ' (most recent)' : '';
+    return (
+      <>
+        <Tooltip title={moment(date).format('LLLL')}>
+          <span>
+            {desc}
+            <Moment date={date} format="on ll" />
+            {mostRecent}
+          </span>
+        </Tooltip>
+      </>
+    );
+  };
+
   return (
     <Dialog
       onClose={onClose}
@@ -190,7 +208,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
       maxWidth="md"
     >
       <DialogTitle id="customized-dialog-title" onClose={onClose}>
-        Edited {history?.length} times.
+        {`Edited ${editCount} ${editCount > 1 ? 'times' : 'time'}.`}
       </DialogTitle>
       <DialogContent dividers>
         {history?.map((edit, index) => (
@@ -204,14 +222,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
               aria-controls="panel1d-content"
               id="panel1d-header"
             >
-              <Typography>
-                {`#${history?.length - index} • Edited `}
-                <Tooltip title={moment(edit.date).format('LLLL')}>
-                  <Moment date={edit.date} format="on ll" />
-                </Tooltip>
-                {index === 0 && ' (most recent edit)'}
-                {index === history?.length - 1 && ' (Initial description)'}
-              </Typography>
+              <Typography>{getSummary(index, edit.date)}</Typography>
             </AccordionSummary>
             <AccordionDetails>{edit.message}</AccordionDetails>
           </Accordion>
-- 
cgit 


From 54c5b66271f4f3d95881a186c8124e7e5dcdb6d4 Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Thu, 18 Mar 2021 18:00:16 +0100
Subject: feat: use author to filter the list

---
 webui/src/pages/list/FilterToolbar.tsx      | 28 ++++++++++++++++++++++++++--
 webui/src/pages/list/ListIdentities.graphql | 13 +++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 webui/src/pages/list/ListIdentities.graphql

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 74eefe4c..92154ad2 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -8,14 +8,15 @@ import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 
 import {
+  Filter,
   FilterDropdown,
   FilterProps,
-  Filter,
   parse,
-  stringify,
   Query,
+  stringify,
 } from './Filter';
 import { useBugCountQuery } from './FilterToolbar.generated';
+import { useListIdentitiesQuery } from './ListIdentities.generated';
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
@@ -35,6 +36,7 @@ type CountingFilterProps = {
   query: string; // the query used as a source to count the number of element
   children: React.ReactNode;
 } & FilterProps;
+
 function CountingFilter({ query, children, ...props }: CountingFilterProps) {
   const { data, loading, error } = useBugCountQuery({
     variables: { query },
@@ -57,9 +59,24 @@ type Props = {
   query: string;
   queryLocation: (query: string) => LocationDescriptor;
 };
+
 function FilterToolbar({ query, queryLocation }: Props) {
   const classes = useStyles();
   const params: Query = parse(query);
+  const { data } = useListIdentitiesQuery();
+
+  let identities: any = [];
+
+  if (
+    data?.repository &&
+    data.repository.allIdentities &&
+    data.repository.allIdentities.nodes
+  ) {
+    identities = data.repository.allIdentities.nodes.map((node) => [
+      node.name,
+      node.name,
+    ]);
+  }
 
   const hasKey = (key: string): boolean =>
     params[key] && params[key].length > 0;
@@ -115,6 +132,13 @@ function FilterToolbar({ query, queryLocation }: Props) {
       <Filter active={hasKey('author')}>Author</Filter>
       <Filter active={hasKey('label')}>Label</Filter>
       */}
+      <FilterDropdown
+        dropdown={identities}
+        itemActive={(key) => hasValue('author', key)}
+        to={(key) => pipe(replaceParam('author', key), loc)(params)}
+      >
+        Author
+      </FilterDropdown>
       <FilterDropdown
         dropdown={[
           ['id', 'ID'],
diff --git a/webui/src/pages/list/ListIdentities.graphql b/webui/src/pages/list/ListIdentities.graphql
new file mode 100644
index 00000000..73073ae8
--- /dev/null
+++ b/webui/src/pages/list/ListIdentities.graphql
@@ -0,0 +1,13 @@
+query ListIdentities {
+    repository {
+        allIdentities {
+            nodes {
+                id
+                humanId
+                name
+                email
+                displayName
+            }
+        }
+    }
+}
-- 
cgit 


From 31871f29f13677131d7cb66da189d74fb1d48696 Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Thu, 18 Mar 2021 18:09:03 +0100
Subject: feat: add filter by label

---
 webui/src/pages/list/FilterToolbar.tsx  | 31 ++++++++++++++++++++++++++-----
 webui/src/pages/list/ListLabels.graphql |  9 +++++++++
 2 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 webui/src/pages/list/ListLabels.graphql

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 92154ad2..37f63b98 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -17,6 +17,7 @@ import {
 } from './Filter';
 import { useBugCountQuery } from './FilterToolbar.generated';
 import { useListIdentitiesQuery } from './ListIdentities.generated';
+import { useListLabelsQuery } from './ListLabels.generated';
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
@@ -63,16 +64,29 @@ type Props = {
 function FilterToolbar({ query, queryLocation }: Props) {
   const classes = useStyles();
   const params: Query = parse(query);
-  const { data } = useListIdentitiesQuery();
+  const { data: identitiesData } = useListIdentitiesQuery();
+  const { data: labelsData } = useListLabelsQuery()
 
   let identities: any = [];
+  let labels: any = [];
 
   if (
-    data?.repository &&
-    data.repository.allIdentities &&
-    data.repository.allIdentities.nodes
+    identitiesData?.repository &&
+    identitiesData.repository.allIdentities &&
+    identitiesData.repository.allIdentities.nodes
   ) {
-    identities = data.repository.allIdentities.nodes.map((node) => [
+    identities = identitiesData.repository.allIdentities.nodes.map((node) => [
+      node.name,
+      node.name,
+    ]);
+  }
+
+  if (
+    labelsData?.repository &&
+    labelsData.repository.validLabels &&
+    labelsData.repository.validLabels.nodes
+  ) {
+    labels = labelsData.repository.validLabels.nodes.map((node) => [
       node.name,
       node.name,
     ]);
@@ -139,6 +153,13 @@ function FilterToolbar({ query, queryLocation }: Props) {
       >
         Author
       </FilterDropdown>
+      <FilterDropdown
+        dropdown={labels}
+        itemActive={(key) => hasValue('label', key)}
+        to={(key) => pipe(replaceParam('label', key), loc)(params)}
+      >
+        Label
+      </FilterDropdown>
       <FilterDropdown
         dropdown={[
           ['id', 'ID'],
diff --git a/webui/src/pages/list/ListLabels.graphql b/webui/src/pages/list/ListLabels.graphql
new file mode 100644
index 00000000..dcb44b67
--- /dev/null
+++ b/webui/src/pages/list/ListLabels.graphql
@@ -0,0 +1,9 @@
+query ListLabels {
+    repository {
+        validLabels {
+            nodes {
+                name
+            }
+        }
+    }
+}
-- 
cgit 


From 7a7e93c91351781db0361591bcedb5f81b05eb6c Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Thu, 18 Mar 2021 18:17:18 +0100
Subject: feat: check if there are labels

---
 webui/src/pages/list/FilterToolbar.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 37f63b98..3046d9d8 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -65,7 +65,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
   const classes = useStyles();
   const params: Query = parse(query);
   const { data: identitiesData } = useListIdentitiesQuery();
-  const { data: labelsData } = useListLabelsQuery()
+  const { data: labelsData } = useListLabelsQuery();
 
   let identities: any = [];
   let labels: any = [];
@@ -153,13 +153,15 @@ function FilterToolbar({ query, queryLocation }: Props) {
       >
         Author
       </FilterDropdown>
-      <FilterDropdown
-        dropdown={labels}
-        itemActive={(key) => hasValue('label', key)}
-        to={(key) => pipe(replaceParam('label', key), loc)(params)}
-      >
-        Label
-      </FilterDropdown>
+      {labels.length ? (
+        <FilterDropdown
+          dropdown={labels}
+          itemActive={(key) => hasValue('label', key)}
+          to={(key) => pipe(replaceParam('label', key), loc)(params)}
+        >
+          Label
+        </FilterDropdown>
+      ) : null}
       <FilterDropdown
         dropdown={[
           ['id', 'ID'],
-- 
cgit 


From 92ce861fabe0fde3dd180cf4b795355093597a90 Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Wed, 24 Mar 2021 00:37:04 +0100
Subject: feat: multiple label filter

- add search functionality in menu items
---
 webui/src/pages/list/Filter.tsx        | 60 ++++++++++++++++++++++++++--------
 webui/src/pages/list/FilterToolbar.tsx | 34 +++++++++++++------
 2 files changed, 71 insertions(+), 23 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 66702078..154d0f94 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -1,14 +1,26 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } 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 { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 
+const CustomTextField = withStyles({
+  root: {
+    margin: '0 8px 12px 8px',
+    '& label.Mui-focused': {
+      margin: '0 2px',
+    },
+  },
+})(TextField);
+
+const ITEM_HEIGHT = 48;
+
 export type Query = { [key: string]: string[] };
 
 function parse(query: string): Query {
@@ -90,6 +102,7 @@ type FilterDropdownProps = {
   itemActive: (key: string) => boolean;
   icon?: React.ComponentType<SvgIconProps>;
   to: (key: string) => LocationDescriptor;
+  hasFilter?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 function FilterDropdown({
@@ -98,9 +111,11 @@ function FilterDropdown({
   itemActive,
   icon: Icon,
   to,
+  hasFilter,
   ...props
 }: FilterDropdownProps) {
   const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState<string>('');
   const buttonRef = useRef<HTMLButtonElement>(null);
   const classes = useStyles({ active: false });
 
@@ -135,18 +150,36 @@ function FilterDropdown({
         open={open}
         onClose={() => setOpen(false)}
         anchorEl={buttonRef.current}
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 4.5,
+            width: '20ch',
+          },
+        }}
       >
-        {dropdown.map(([key, value]) => (
-          <MenuItem
-            component={Link}
-            to={to(key)}
-            className={itemActive(key) ? classes.itemActive : undefined}
-            onClick={() => setOpen(false)}
-            key={key}
-          >
-            {value}
-          </MenuItem>
-        ))}
+        {hasFilter && (
+          <CustomTextField
+            onChange={(e) => {
+              const { value } = e.target;
+              setFilter(value);
+            }}
+            value={filter}
+            label={`Filter ${children}`}
+          />
+        )}
+        {dropdown
+          .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase()))
+          .map(([key, value]) => (
+            <MenuItem
+              component={Link}
+              to={to(key)}
+              className={itemActive(key) ? classes.itemActive : undefined}
+              onClick={() => setOpen(false)}
+              key={key}
+            >
+              {value}
+            </MenuItem>
+          ))}
       </Menu>
     </>
   );
@@ -158,6 +191,7 @@ export type FilterProps = {
   icon?: React.ComponentType<SvgIconProps>;
   children: React.ReactNode;
 };
+
 function Filter({ active, to, children, icon: Icon }: FilterProps) {
   const classes = useStyles();
 
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 3046d9d8..1af96d0f 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -109,6 +109,20 @@ function FilterToolbar({ query, queryLocation }: Props) {
     ...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]: [],
@@ -150,18 +164,18 @@ function FilterToolbar({ query, queryLocation }: Props) {
         dropdown={identities}
         itemActive={(key) => hasValue('author', key)}
         to={(key) => pipe(replaceParam('author', key), loc)(params)}
+        hasFilter
       >
         Author
       </FilterDropdown>
-      {labels.length ? (
-        <FilterDropdown
-          dropdown={labels}
-          itemActive={(key) => hasValue('label', key)}
-          to={(key) => pipe(replaceParam('label', key), loc)(params)}
-        >
-          Label
-        </FilterDropdown>
-      ) : null}
+      <FilterDropdown
+        dropdown={labels}
+        itemActive={(key) => hasValue('label', key)}
+        to={(key) => pipe(toggleOrAddParam('label', key), loc)(params)}
+        hasFilter
+      >
+        Label
+      </FilterDropdown>
       <FilterDropdown
         dropdown={[
           ['id', 'ID'],
@@ -171,7 +185,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
           ['edit-asc', 'Least recently updated'],
         ]}
         itemActive={(key) => hasValue('sort', key)}
-        to={(key) => pipe(replaceParam('sort', key), loc)(params)}
+        to={(key) => pipe(toggleParam('sort', key), loc)(params)}
       >
         Sort
       </FilterDropdown>
-- 
cgit 


From f82071a3d7140a1e21c02b27f03871794116af8a Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Wed, 24 Mar 2021 01:16:51 +0100
Subject: feat: use predefined filters

---
 webui/src/pages/list/Filter.tsx    |  2 +-
 webui/src/pages/list/ListQuery.tsx | 65 +++++++++++++++++++++++++++++++++++---
 2 files changed, 62 insertions(+), 5 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 154d0f94..54b2262b 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -153,7 +153,7 @@ function FilterDropdown({
         PaperProps={{
           style: {
             maxHeight: ITEM_HEIGHT * 4.5,
-            width: '20ch',
+            width: '25ch',
           },
         }}
       >
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 500ccf77..58cc7519 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -1,19 +1,23 @@
 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 } from '@material-ui/core';
+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/CurrentIdentity/CurrentIdentity.generated';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
+import { parse, Query, stringify } from './Filter';
 import FilterToolbar from './FilterToolbar';
 import List from './List';
 import { useListBugsQuery } from './ListQuery.generated';
@@ -192,6 +196,8 @@ function ListQuery() {
   const query = params.has('q') ? params.get('q') || '' : 'status:open';
 
   const [input, setInput] = useState(query);
+  const [filterMenuIsOpen, setFilterMenuIsOpen] = useState(false);
+  const filterButtonRef = useRef<HTMLButtonElement>(null);
 
   const classes = useStyles({ searching: !!input });
 
@@ -293,14 +299,65 @@ function ListQuery() {
     history.push(queryLocation(input));
   };
 
+  const {
+    loading: ciqLoading,
+    error: ciqError,
+    data: ciqData,
+  } = useCurrentIdentityQuery();
+  if (ciqError || ciqLoading || !ciqData?.repository?.userIdentity) {
+    return null;
+  }
+  const user = ciqData.repository.userIdentity;
+
+  const loc = pipe(stringify, queryLocation);
+  const qparams: Query = parse(query);
+  const replaceParam = (key: string, value: string) => (
+    params: Query
+  ): Query => ({
+    ...params,
+    [key]: [value],
+  });
+
   return (
     <Paper className={classes.main}>
       <header className={classes.header}>
         <div className="filterissueContainer">
           <form onSubmit={formSubmit}>
-            <label className={classes.filterissueLabel} htmlFor="issuefilter">
-              Filter
-            </label>
+            <FormControl>
+              <Button
+                aria-haspopup="true"
+                ref={filterButtonRef}
+                onClick={(e) => setFilterMenuIsOpen(true)}
+              >
+                Filter <ArrowDropDownIcon />
+              </Button>
+              <Menu
+                open={filterMenuIsOpen}
+                onClose={() => setFilterMenuIsOpen(false)}
+                getContentAnchorEl={null}
+                anchorEl={filterButtonRef.current}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'left',
+                }}
+              >
+                <MenuItem
+                  component={Link}
+                  to={pipe(
+                    replaceParam('author', user.displayName),
+                    replaceParam('sort', 'creation'),
+                    loc
+                  )(qparams)}
+                  onClick={() => setFilterMenuIsOpen(false)}
+                >
+                  Your newest issues
+                </MenuItem>
+              </Menu>
+            </FormControl>
             <InputBase
               id="issuefilter"
               placeholder="Filter"
-- 
cgit 


From 248201bcbdcd0415870a5f75211bf3a3108777c1 Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Wed, 24 Mar 2021 17:13:20 +0100
Subject: fix: issue with toggling the author

---
 webui/src/pages/list/FilterToolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 1af96d0f..59a09226 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -163,7 +163,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
       <FilterDropdown
         dropdown={identities}
         itemActive={(key) => hasValue('author', key)}
-        to={(key) => pipe(replaceParam('author', key), loc)(params)}
+        to={(key) => pipe(toggleParam('author', key), loc)(params)}
         hasFilter
       >
         Author
@@ -174,7 +174,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
         to={(key) => pipe(toggleOrAddParam('label', key), loc)(params)}
         hasFilter
       >
-        Label
+        Labels
       </FilterDropdown>
       <FilterDropdown
         dropdown={[
-- 
cgit 


From bff9fa673a4b481511fcc81bfd50ee74487788ab Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Wed, 24 Mar 2021 18:12:05 +0100
Subject: fix: issue with regex

---
 webui/src/pages/list/Filter.tsx        | 6 +++---
 webui/src/pages/list/FilterToolbar.tsx | 7 ++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 54b2262b..2ba6ffaf 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -28,7 +28,7 @@ function parse(query: string): Query {
   const params: Query = {};
 
   // TODO: support escaping without quotes
-  const re = /(\w+):([A-Za-z0-9-]+|(["'])(([^\3]|\\.)*)\3)+/g;
+  const re = /(\w+):([A-Za-z0-9-]+|"([^"]*)")/g;
   let matches;
   while ((matches = re.exec(query)) !== null) {
     if (!params[matches[1]]) {
@@ -36,8 +36,8 @@ function parse(query: string): Query {
     }
 
     let value;
-    if (matches[4]) {
-      value = matches[4];
+    if (matches[3]) {
+      value = matches[3];
     } else {
       value = matches[2];
     }
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 59a09226..cf5994ab 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -96,6 +96,8 @@ function FilterToolbar({ query, queryLocation }: Props) {
     params[key] && params[key].length > 0;
   const hasValue = (key: string, value: string): boolean =>
     hasKey(key) && params[key].includes(value);
+  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
@@ -170,7 +172,10 @@ function FilterToolbar({ query, queryLocation }: Props) {
       </FilterDropdown>
       <FilterDropdown
         dropdown={labels}
-        itemActive={(key) => hasValue('label', key)}
+        itemActive={(key) => {
+          console.log(params, params[key], key);
+          return containsValue('label', key);
+        }}
         to={(key) => pipe(toggleOrAddParam('label', key), loc)(params)}
         hasFilter
       >
-- 
cgit 


From 1216fb1e27919c58c3df81950adaf556bdb73594 Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Wed, 24 Mar 2021 18:13:05 +0100
Subject: chore: returning value

---
 webui/src/pages/list/FilterToolbar.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index cf5994ab..cfb93dc2 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -172,10 +172,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
       </FilterDropdown>
       <FilterDropdown
         dropdown={labels}
-        itemActive={(key) => {
-          console.log(params, params[key], key);
-          return containsValue('label', key);
-        }}
+        itemActive={(key) => containsValue('label', key)}
         to={(key) => pipe(toggleOrAddParam('label', key), loc)(params)}
         hasFilter
       >
-- 
cgit 


From 72fc0ef73e6c8063075a77bcf37fc8bd7e4c8baf Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Wed, 24 Mar 2021 18:49:17 +0100
Subject: fix: issue with keyDown propagation

---
 webui/src/pages/list/Filter.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 2ba6ffaf..782c2041 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import Menu from '@material-ui/core/Menu';
@@ -117,8 +117,13 @@ function FilterDropdown({
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState<string>('');
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLButtonElement>(null);
   const classes = useStyles({ active: false });
 
+  useEffect(() => {
+    searchRef && searchRef.current && searchRef.current.focus();
+  }, [filter]);
+
   const content = (
     <>
       {Icon && <Icon fontSize="small" classes={{ root: classes.icon }} />}
@@ -139,6 +144,7 @@ function FilterDropdown({
       </button>
       <Menu
         getContentAnchorEl={null}
+        ref={searchRef}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
@@ -163,6 +169,7 @@ function FilterDropdown({
               const { value } = e.target;
               setFilter(value);
             }}
+            onKeyDown={(e) => e.stopPropagation()}
             value={filter}
             label={`Filter ${children}`}
           />
-- 
cgit 


From d2845605c2152738e37d13b7067fedac91ccf225 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 24 Mar 2021 20:16:25 +0100
Subject: Fix readability of filter input field in dark mode

---
 webui/src/pages/list/Filter.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 782c2041..42375dea 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -10,14 +10,21 @@ import TextField from '@material-ui/core/TextField';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 
-const CustomTextField = withStyles({
+const CustomTextField = withStyles((theme) => ({
   root: {
     margin: '0 8px 12px 8px',
     '& label.Mui-focused': {
       margin: '0 2px',
+      color: theme.palette.text.secondary,
+    },
+    '& .MuiInput-underline::before': {
+      borderBottomColor: theme.palette.divider,
+    },
+    '& .MuiInput-underline::after': {
+      borderBottomColor: theme.palette.divider,
     },
   },
-})(TextField);
+}))(TextField);
 
 const ITEM_HEIGHT = 48;
 
-- 
cgit 


From 41ee97a4f6e6b6c5c76d6b3f61fdeda5fbabe053 Mon Sep 17 00:00:00 2001
From: Aien Saidi <aien.saidi@gmail.com>
Date: Tue, 30 Mar 2021 19:10:23 +0200
Subject: fix: regex issue

---
 webui/src/pages/list/Filter.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 42375dea..2e99eedf 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -35,7 +35,7 @@ function parse(query: string): Query {
   const params: Query = {};
 
   // TODO: support escaping without quotes
-  const re = /(\w+):([A-Za-z0-9-]+|"([^"]*)")/g;
+  const re = /(\w+):([A-Za-z0-9-]+|(["'])(([^\3]|\\.)*)\3)+/g;
   let matches;
   while ((matches = re.exec(query)) !== null) {
     if (!params[matches[1]]) {
@@ -43,8 +43,8 @@ function parse(query: string): Query {
     }
 
     let value;
-    if (matches[3]) {
-      value = matches[3];
+    if (matches[4]) {
+      value = matches[4];
     } else {
       value = matches[2];
     }
-- 
cgit 


From 3380135182d5c9b1abd6188eb85382db45c7f4ff Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 26 Mar 2021 12:52:55 +0100
Subject: Make filter/search input full width

---
 webui/src/pages/list/ListQuery.tsx | 117 +++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 63 deletions(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 58cc7519..4cd75c8d 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -39,24 +39,17 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
   },
   header: {
     display: 'flex',
-    padding: theme.spacing(2),
-    '& > h1': {
-      ...theme.typography.h6,
-      margin: theme.spacing(0, 2),
-    },
-    alignItems: 'center',
-    justifyContent: 'space-between',
+    padding: theme.spacing(1),
   },
   filterissueLabel: {
     fontSize: '14px',
     fontWeight: 'bold',
     paddingRight: '12px',
   },
-  filterissueContainer: {
+  form: {
     display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContents: 'left',
+    flexGrow: 1,
+    marginRight: theme.spacing(1),
   },
   search: {
     borderRadius: theme.shape.borderRadius,
@@ -66,7 +59,7 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
     borderWidth: '1px',
     backgroundColor: theme.palette.primary.light,
     padding: theme.spacing(0, 1),
-    width: ({ searching }) => (searching ? '20rem' : '15rem'),
+    width: '100%',
     transition: theme.transitions.create([
       'width',
       'borderColor',
@@ -321,58 +314,56 @@ function ListQuery() {
   return (
     <Paper className={classes.main}>
       <header className={classes.header}>
-        <div className="filterissueContainer">
-          <form onSubmit={formSubmit}>
-            <FormControl>
-              <Button
-                aria-haspopup="true"
-                ref={filterButtonRef}
-                onClick={(e) => setFilterMenuIsOpen(true)}
-              >
-                Filter <ArrowDropDownIcon />
-              </Button>
-              <Menu
-                open={filterMenuIsOpen}
-                onClose={() => setFilterMenuIsOpen(false)}
-                getContentAnchorEl={null}
-                anchorEl={filterButtonRef.current}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'left',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'left',
-                }}
-              >
-                <MenuItem
-                  component={Link}
-                  to={pipe(
-                    replaceParam('author', user.displayName),
-                    replaceParam('sort', 'creation'),
-                    loc
-                  )(qparams)}
-                  onClick={() => setFilterMenuIsOpen(false)}
-                >
-                  Your newest issues
-                </MenuItem>
-              </Menu>
-            </FormControl>
-            <InputBase
-              id="issuefilter"
-              placeholder="Filter"
-              value={input}
-              onInput={(e: any) => setInput(e.target.value)}
-              classes={{
-                root: classes.search,
-                focused: classes.searchFocused,
+        <form className={classes.form} onSubmit={formSubmit}>
+          <FormControl>
+            <Button
+              aria-haspopup="true"
+              ref={filterButtonRef}
+              onClick={(e) => setFilterMenuIsOpen(true)}
+            >
+              Filter <ArrowDropDownIcon />
+            </Button>
+            <Menu
+              open={filterMenuIsOpen}
+              onClose={() => setFilterMenuIsOpen(false)}
+              getContentAnchorEl={null}
+              anchorEl={filterButtonRef.current}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
               }}
-            />
-            <button type="submit" hidden>
-              Search
-            </button>
-          </form>
-        </div>
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+            >
+              <MenuItem
+                component={Link}
+                to={pipe(
+                  replaceParam('author', user.displayName),
+                  replaceParam('sort', 'creation'),
+                  loc
+                )(qparams)}
+                onClick={() => setFilterMenuIsOpen(false)}
+              >
+                Your newest issues
+              </MenuItem>
+            </Menu>
+          </FormControl>
+          <InputBase
+            id="issuefilter"
+            placeholder="Filter"
+            value={input}
+            onInput={(e: any) => setInput(e.target.value)}
+            classes={{
+              root: classes.search,
+              focused: classes.searchFocused,
+            }}
+          />
+          <button type="submit" hidden>
+            Search
+          </button>
+        </form>
         <IfLoggedIn>
           {() => (
             <Button
-- 
cgit 


From ccdaa16052a1da7ea5c87fc2104363377df98b95 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 7 Apr 2021 13:49:27 +0200
Subject: Support filtering by multiple selected authors

---
 webui/src/pages/list/FilterToolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index cfb93dc2..979bf530 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -165,7 +165,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
       <FilterDropdown
         dropdown={identities}
         itemActive={(key) => hasValue('author', key)}
-        to={(key) => pipe(toggleParam('author', key), loc)(params)}
+        to={(key) => pipe(toggleOrAddParam('author', key), loc)(params)}
         hasFilter
       >
         Author
-- 
cgit 


From d80b2ad03898eb798f8c3c95a4c10bd119691e01 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 28 Mar 2021 11:02:48 +0200
Subject: Prevent page reload for redirecting components

Link instantly to:

- NewBugPage
- BackToList
---
 webui/src/pages/list/ListQuery.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'webui/src/pages')

diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 4cd75c8d..2b46dca5 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -369,7 +369,8 @@ function ListQuery() {
             <Button
               className={classes.greenButton}
               variant="contained"
-              href="/new"
+              component={Link}
+              to="/new"
             >
               New bug
             </Button>
-- 
cgit