From a53a763f0ef2b5df93817bda45ae66dccadab353 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Mon, 21 Dec 2020 16:18:54 +0000 Subject: build(deps): [security] bump node-notifier from 8.0.0 to 8.0.1 in /webui Bumps [node-notifier](https://github.com/mikaelbr/node-notifier) from 8.0.0 to 8.0.1. **This update includes a security fix.** - [Release notes](https://github.com/mikaelbr/node-notifier/releases) - [Changelog](https://github.com/mikaelbr/node-notifier/blob/v8.0.1/CHANGELOG.md) - [Commits](https://github.com/mikaelbr/node-notifier/compare/v8.0.0...v8.0.1) Signed-off-by: dependabot-preview[bot] --- webui/package-lock.json | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) (limited to 'webui') diff --git a/webui/package-lock.json b/webui/package-lock.json index 47d5e17d..702eefc0 100644 --- a/webui/package-lock.json +++ b/webui/package-lock.json @@ -12176,8 +12176,7 @@ "growly": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", - "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=", - "optional": true + "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, "gzip-size": { "version": "5.1.1", @@ -15680,10 +15679,9 @@ "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=" }, "node-notifier": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.0.tgz", - "integrity": "sha512-46z7DUmcjoYdaWyXouuFNNfUo6eFa94t23c53c+lG/9Cvauk4a98rAUp9672X5dxGdQmLpPzTxzu8f/OeEPaFA==", - "optional": true, + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.1.tgz", + "integrity": "sha512-BvEXF+UmsnAfYfoapKM9nGxnP+Wn7P91YfXmrKnfcYCx6VBeoN5Ez5Ogck6I8Bi5k4RlpqRYaw75pAwzX9OphA==", "requires": { "growly": "^1.3.0", "is-wsl": "^2.2.0", @@ -15694,22 +15692,22 @@ }, "dependencies": { "semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "optional": true + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", + "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==", + "requires": { + "lru-cache": "^6.0.0" + } }, "uuid": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.0.tgz", - "integrity": "sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==", - "optional": true + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, "which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "optional": true, "requires": { "isexe": "^2.0.0" } @@ -19767,8 +19765,7 @@ "shellwords": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz", - "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==", - "optional": true + "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==" }, "side-channel": { "version": "1.0.3", -- cgit From 8c17d730eff3bb59313a2f9f7aa469fe6fff95b2 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 23 Feb 2021 16:03:07 +0100 Subject: Add button to toggle between light- and dark-mode --- webui/src/components/Header/Header.tsx | 7 ++++ webui/src/components/Themer.tsx | 64 ++++++++++++++++++++++++++++++++++ webui/src/index.tsx | 10 +----- webui/src/theme.ts | 1 + 4 files changed, 73 insertions(+), 9 deletions(-) create mode 100644 webui/src/components/Themer.tsx (limited to 'webui') diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 3e39b5f3..3bdb252f 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -5,6 +5,7 @@ import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import { makeStyles } from '@material-ui/core/styles'; +import { LightSwitch } from '../../components/Themer'; import CurrentIdentity from '../CurrentIdentity/CurrentIdentity'; const useStyles = makeStyles((theme) => ({ @@ -21,6 +22,9 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', }, + lightSwitch: { + padding: '0 20px', + }, logo: { height: '42px', marginRight: theme.spacing(2), @@ -39,6 +43,9 @@ function Header() { git-bug
+
+ +
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx new file mode 100644 index 00000000..13d098da --- /dev/null +++ b/webui/src/components/Themer.tsx @@ -0,0 +1,64 @@ +import React, { createContext, useCallback, useContext, useState } from 'react'; + +import { ThemeProvider } from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton/IconButton'; +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; +import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; + +const defaultTheme: ThemeOptions = { + palette: { + type: 'light', + primary: { + main: '#263238', + }, + }, +}; + +const ThemeContext = createContext({ + toggleMode: () => {}, + mode: '', +}); + +const LightSwitch = () => { + const { mode, toggleMode } = useContext(ThemeContext); + + return ( + + + {mode === 'light' ? ( + + ) : ( + + )} + + + ); +}; + +type Props = { children: React.ReactNode }; +const Themer = ({ children }: Props) => { + const [theme, setTheme] = useState(defaultTheme); + + const toggleMode = useCallback(() => { + const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; + const adjustedTheme: ThemeOptions = { + ...theme, + palette: { + ...theme.palette, + type: newMode, + }, + }; + setTheme(adjustedTheme); + }, [theme, setTheme]); + + const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; + + return ( + + {children} + + ); +}; + +export { Themer as default, LightSwitch }; diff --git a/webui/src/index.tsx b/webui/src/index.tsx index f07b869d..a7f52448 100644 --- a/webui/src/index.tsx +++ b/webui/src/index.tsx @@ -1,21 +1,13 @@ import { ApolloProvider } from '@apollo/client'; import React from 'react'; import ReactDOM from 'react-dom'; -import { BrowserRouter } from 'react-router-dom'; - -import ThemeProvider from '@material-ui/styles/ThemeProvider'; import App from './App'; import apolloClient from './apollo'; -import theme from './theme'; ReactDOM.render( - - - - - + , document.getElementById('root') ); diff --git a/webui/src/theme.ts b/webui/src/theme.ts index d41cd731..3d536941 100644 --- a/webui/src/theme.ts +++ b/webui/src/theme.ts @@ -2,6 +2,7 @@ import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { + type: 'dark', primary: { main: '#263238', }, -- cgit From c834c03b809f226801423d726c62608297cd6fc4 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 25 Feb 2021 14:41:17 +0100 Subject: Use brower preference and persist theme mode --- webui/src/components/Themer.tsx | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) (limited to 'webui') diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 13d098da..78e20564 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,12 +1,12 @@ -import React, { createContext, useCallback, useContext, useState } from 'react'; +import React, { createContext, useContext, useState } from 'react'; -import { ThemeProvider } from '@material-ui/core'; +import { PaletteType, ThemeProvider, useMediaQuery } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton/IconButton'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles'; +import { createMuiTheme } from '@material-ui/core/styles'; import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; -const defaultTheme: ThemeOptions = { +const defaultTheme = { palette: { type: 'light', primary: { @@ -39,24 +39,37 @@ const LightSwitch = () => { type Props = { children: React.ReactNode }; const Themer = ({ children }: Props) => { const [theme, setTheme] = useState(defaultTheme); + const preferseDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + const browserMode = preferseDarkMode ? 'dark' : 'light'; + const preferedMode = localStorage.getItem('themeMode'); + const curMode = preferedMode != null ? preferedMode : browserMode; - const toggleMode = useCallback(() => { - const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; - const adjustedTheme: ThemeOptions = { + const adjustedTheme = { + ...theme, + palette: { + ...theme.palette, + type: (curMode === 'dark' ? 'dark' : 'light') as PaletteType, + }, + }; + + const toggleMode = () => { + const preferedMode = curMode === 'dark' ? 'light' : 'dark'; + localStorage.setItem('themeMode', preferedMode); + const adjustedTheme = { ...theme, palette: { ...theme.palette, - type: newMode, + type: preferedMode as PaletteType, }, }; setTheme(adjustedTheme); - }, [theme, setTheme]); - - const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark'; + }; return ( - - {children} + + + {children} + ); }; -- cgit From 30587cc03f0b1a8fe0c5621207882b9c6714093e Mon Sep 17 00:00:00 2001 From: Sascha 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') 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 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') 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 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') 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) => ({ }, 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 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') 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 9cac03652c410f943abe1e3a6b55dce0d79e48d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 1 Mar 2021 17:47:57 +0100 Subject: Inject theme instead of defining it in Themer.tsx --- webui/src/components/Themer.tsx | 57 ++++++++++++++--------------------------- webui/src/theme.ts | 13 ++++++++-- 2 files changed, 30 insertions(+), 40 deletions(-) (limited to 'webui') diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 78e20564..d831fca9 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,20 +1,11 @@ import React, { createContext, useContext, useState } from 'react'; -import { PaletteType, ThemeProvider, useMediaQuery } from '@material-ui/core'; +import { ThemeProvider, useMediaQuery } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton/IconButton'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import { createMuiTheme } from '@material-ui/core/styles'; +import { Theme } from '@material-ui/core/styles'; import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons'; -const defaultTheme = { - palette: { - type: 'light', - primary: { - main: '#263238', - }, - }, -}; - const ThemeContext = createContext({ toggleMode: () => {}, mode: '', @@ -22,10 +13,11 @@ const ThemeContext = createContext({ const LightSwitch = () => { const { mode, toggleMode } = useContext(ThemeContext); + const description = `Switch to ${mode === 'light' ? 'dark' : 'light'} theme`; return ( - - + + {mode === 'light' ? ( ) : ( @@ -36,40 +28,29 @@ const LightSwitch = () => { ); }; -type Props = { children: React.ReactNode }; -const Themer = ({ children }: Props) => { - const [theme, setTheme] = useState(defaultTheme); +type Props = { + children: React.ReactNode; + lightTheme: Theme; + darkTheme: Theme; +}; +const Themer = ({ children, lightTheme, darkTheme }: Props) => { const preferseDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); const browserMode = preferseDarkMode ? 'dark' : 'light'; - const preferedMode = localStorage.getItem('themeMode'); - const curMode = preferedMode != null ? preferedMode : browserMode; - - const adjustedTheme = { - ...theme, - palette: { - ...theme.palette, - type: (curMode === 'dark' ? 'dark' : 'light') as PaletteType, - }, - }; + const savedMode = localStorage.getItem('themeMode'); + const preferedMode = savedMode != null ? savedMode : browserMode; + const [curMode, setMode] = useState(preferedMode); const toggleMode = () => { - const preferedMode = curMode === 'dark' ? 'light' : 'dark'; + const preferedMode = curMode === 'light' ? 'dark' : 'light'; localStorage.setItem('themeMode', preferedMode); - const adjustedTheme = { - ...theme, - palette: { - ...theme.palette, - type: preferedMode as PaletteType, - }, - }; - setTheme(adjustedTheme); + setMode(preferedMode); }; + const preferedTheme = preferedMode === 'dark' ? darkTheme : lightTheme; + return ( - - {children} - + {children} ); }; diff --git a/webui/src/theme.ts b/webui/src/theme.ts index 3d536941..67c24526 100644 --- a/webui/src/theme.ts +++ b/webui/src/theme.ts @@ -1,6 +1,15 @@ import { createMuiTheme } from '@material-ui/core/styles'; -const theme = createMuiTheme({ +const defaultLightTheme = createMuiTheme({ + palette: { + type: 'light', + primary: { + main: '#263238', + }, + }, +}); + +const defaultDarkTheme = createMuiTheme({ palette: { type: 'dark', primary: { @@ -9,4 +18,4 @@ const theme = createMuiTheme({ }, }); -export default theme; +export { defaultLightTheme, defaultDarkTheme }; -- cgit From 680ede3df68b868f38b0207f4c0829e93181f161 Mon Sep 17 00:00:00 2001 From: Sascha Date: Mon, 1 Mar 2021 18:55:01 +0100 Subject: Fix (hopefully) eslint error on node 14.x pipeline --- webui/src/components/Themer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'webui') diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index d831fca9..4adef24a 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -13,7 +13,8 @@ const ThemeContext = createContext({ const LightSwitch = () => { const { mode, toggleMode } = useContext(ThemeContext); - const description = `Switch to ${mode === 'light' ? 'dark' : 'light'} theme`; + const nextMode = mode === 'light' ? 'dark' : 'light'; + const description = `Switch to ${nextMode} theme`; return ( -- cgit From 548febcbc7af50e8f33c393d481fa253f27aa795 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 13:29:36 +0100 Subject: Define each theme in own file under themes dir --- webui/src/theme.ts | 21 --------------------- webui/src/themes/DefaultDark.ts | 12 ++++++++++++ webui/src/themes/DefaultLight.ts | 12 ++++++++++++ webui/src/themes/index.ts | 4 ++++ 4 files changed, 28 insertions(+), 21 deletions(-) delete mode 100644 webui/src/theme.ts create mode 100644 webui/src/themes/DefaultDark.ts create mode 100644 webui/src/themes/DefaultLight.ts create mode 100644 webui/src/themes/index.ts (limited to 'webui') diff --git a/webui/src/theme.ts b/webui/src/theme.ts deleted file mode 100644 index 67c24526..00000000 --- a/webui/src/theme.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; - -const defaultLightTheme = createMuiTheme({ - palette: { - type: 'light', - primary: { - main: '#263238', - }, - }, -}); - -const defaultDarkTheme = createMuiTheme({ - palette: { - type: 'dark', - primary: { - main: '#263238', - }, - }, -}); - -export { defaultLightTheme, defaultDarkTheme }; diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts new file mode 100644 index 00000000..8d961caa --- /dev/null +++ b/webui/src/themes/DefaultDark.ts @@ -0,0 +1,12 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const defaultDarkTheme = createMuiTheme({ + palette: { + type: 'dark', + primary: { + main: '#263238', + }, + }, +}); + +export default defaultDarkTheme; diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts new file mode 100644 index 00000000..3a404fd5 --- /dev/null +++ b/webui/src/themes/DefaultLight.ts @@ -0,0 +1,12 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const defaultLightTheme = createMuiTheme({ + palette: { + type: 'light', + primary: { + main: '#263238', + }, + }, +}); + +export default defaultLightTheme; diff --git a/webui/src/themes/index.ts b/webui/src/themes/index.ts new file mode 100644 index 00000000..6c41c546 --- /dev/null +++ b/webui/src/themes/index.ts @@ -0,0 +1,4 @@ +import defaultDarkTheme from './DefaultDark'; +import defaultLightTheme from './DefaultLight'; + +export { defaultLightTheme, defaultDarkTheme }; -- cgit From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001 From: Sascha 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 ++++++++++++--------- webui/src/themes/DefaultDark.ts | 8 ++++++++ webui/src/themes/DefaultLight.ts | 7 +++++++ 5 files changed, 33 insertions(+), 13 deletions(-) (limited to 'webui') 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) => ({ }, 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) => ({ ]), }, 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) => ({ ...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) => ({ }, }, 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), }, diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 8d961caa..fe31f211 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -5,6 +5,14 @@ const defaultDarkTheme = createMuiTheme({ type: 'dark', primary: { main: '#263238', + light: '#525252', + }, + error: { + main: '#f44336', + dark: '#ff4949', + }, + info: { + main: '#2a393e', }, }, }); diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index 3a404fd5..898bd0bc 100644 --- a/webui/src/themes/DefaultLight.ts +++ b/webui/src/themes/DefaultLight.ts @@ -5,6 +5,13 @@ const defaultLightTheme = createMuiTheme({ type: 'light', primary: { main: '#263238', + light: '#f5f5f5', + }, + info: { + main: '#e2f1ff', + }, + text: { + secondary: '#555', }, }, }); -- cgit From c8a5330bdeabbf2c83890ca096281cd09159cc10 Mon Sep 17 00:00:00 2001 From: Sascha 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') 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 b918c9facd157d1dfb24282f6309782a10e02123 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 14:28:45 +0100 Subject: Revert restructuring between App.tsx and index.tsx This should prevent unnecessary merge conflicts. --- webui/src/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'webui') diff --git a/webui/src/index.tsx b/webui/src/index.tsx index a7f52448..d3591e1a 100644 --- a/webui/src/index.tsx +++ b/webui/src/index.tsx @@ -1,13 +1,20 @@ import { ApolloProvider } from '@apollo/client'; import React from 'react'; import ReactDOM from 'react-dom'; +import { BrowserRouter } from 'react-router-dom'; import App from './App'; import apolloClient from './apollo'; +import Themer from './components/Themer'; +import { defaultLightTheme, defaultDarkTheme } from './themes/index'; ReactDOM.render( - + + + + + , document.getElementById('root') ); -- cgit From c24b7370f484e89662283a52b66e34940f972cf6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 16:26:57 +0100 Subject: Add Icon to "Close Issue"-button --- webui/src/components/CloseBugButton/CloseBugButton.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'webui') diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/CloseBugButton.tsx index 19f56cab..8d397c23 100644 --- a/webui/src/components/CloseBugButton/CloseBugButton.tsx +++ b/webui/src/components/CloseBugButton/CloseBugButton.tsx @@ -1,12 +1,21 @@ import React from 'react'; import Button from '@material-ui/core/Button'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; import { BugFragment } from 'src/pages/bug/Bug.generated'; import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated'; import { useCloseBugMutation } from './CloseBug.generated'; +const useStyles = makeStyles((theme: Theme) => ({ + closeIssueIcon: { + color: theme.palette.secondary.dark, + paddingTop: '0.1rem', + }, +})); + interface Props { bug: BugFragment; disabled: boolean; @@ -14,6 +23,7 @@ interface Props { function CloseBugButton({ bug, disabled }: Props) { const [closeBug, { loading, error }] = useCloseBugMutation(); + const classes = useStyles(); function closeBugAction() { closeBug({ @@ -45,6 +55,7 @@ function CloseBugButton({ bug, disabled }: Props) { variant="contained" onClick={() => closeBugAction()} disabled={bug.status === 'CLOSED' || disabled} + startIcon={} > Close issue -- cgit From 8e8ca99bd5f72de60f6e0e1b334f33312cab5388 Mon Sep 17 00:00:00 2001 From: Sascha 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. --- .../components/BugTitleForm/.BugTitleForm.tsx.swp | Bin 0 -> 20480 bytes webui/src/components/BugTitleForm/BugTitleForm.tsx | 24 +++------------------ webui/src/pages/list/ListQuery.tsx | 11 ++++------ webui/src/pages/new/NewBugPage.tsx | 23 +++----------------- webui/src/themes/DefaultDark.ts | 5 +++++ webui/src/themes/DefaultLight.ts | 4 ++++ 6 files changed, 19 insertions(+), 48 deletions(-) create mode 100644 webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp (limited to 'webui') diff --git a/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp b/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp new file mode 100644 index 00000000..125bed11 Binary files /dev/null and b/webui/src/components/BugTitleForm/.BugTitleForm.tsx.swp differ diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx index c47eab31..97025302 100644 --- a/webui/src/components/BugTitleForm/BugTitleForm.tsx +++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx @@ -45,26 +45,9 @@ const useStyles = makeStyles((theme) => ({ marginLeft: theme.spacing(2), }, greenButton: { - marginLeft: '8px', - backgroundColor: '#2ea44fd9', - color: '#fff', - '&:hover': { - backgroundColor: '#2ea44f', - }, - }, - 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), - minWidth: 336, - transition: theme.transitions.create([ - 'width', - 'borderColor', - 'backgroundColor', - ]), + marginLeft: theme.spacing(1), + backgroundColor: theme.palette.success.main, + color: theme.palette.success.contrastText, }, })); @@ -126,7 +109,6 @@ function BugTitleForm({ bug }: Props) { inputRef={(node) => { issueTitleInput = node; }} - className={classes.titleInput} variant="outlined" fullWidth margin="dense" 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) => ({ 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() { {() => ( )} diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/CloseBugButton.tsx index 8d397c23..9f098483 100644 --- a/webui/src/components/CloseBugButton/CloseBugButton.tsx +++ b/webui/src/components/CloseBugButton/CloseBugButton.tsx @@ -57,7 +57,7 @@ function CloseBugButton({ bug, disabled }: Props) { disabled={bug.status === 'CLOSED' || disabled} startIcon={} > - Close issue + Close bug ); diff --git a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx b/webui/src/components/ReopenBugButton/ReopenBugButton.tsx index 195ca512..e3e792fc 100644 --- a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx +++ b/webui/src/components/ReopenBugButton/ReopenBugButton.tsx @@ -46,7 +46,7 @@ function ReopenBugButton({ bug, disabled }: Props) { onClick={() => openBugAction()} disabled={bug.status === 'OPEN' || disabled} > - Reopen issue + Reopen bug ); 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 )} 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 -- cgit From c223c75c11f3ec903413207dd275152e1ec97fcc Mon Sep 17 00:00:00 2001 From: Lena Date: Sun, 28 Feb 2021 00:18:03 +0100 Subject: Add back-to-list-button #10 --- webui/src/components/Header/Header.tsx | 7 +++++++ webui/src/pages/bug/CommentForm.tsx | 11 +++++++++++ 2 files changed, 18 insertions(+) (limited to 'webui') diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 3bdb252f..cdac0f0e 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -29,6 +29,13 @@ const useStyles = makeStyles((theme) => ({ height: '42px', marginRight: theme.spacing(2), }, + greenButton: { + backgroundColor: '#2ea44fd9', + color: '#fff', + '&:hover': { + backgroundColor: '#2ea44f', + }, + }, })); function Header() { diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 0b97e133..6ec9bf2a 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -28,6 +28,7 @@ const useStyles = makeStyles((theme) => ({ }, actions: { display: 'flex', + gap: '1em', justifyContent: 'flex-end', }, greenButton: { @@ -38,6 +39,13 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: '#2ea44f', }, }, + backButton: { + backgroundColor: '#574142', + color: '#fff', + '&:hover': { + backgroundColor: '#610B0B', + }, + }, })); type Props = { @@ -101,6 +109,9 @@ function CommentForm({ bug }: Props) { onChange={(comment: string) => setIssueComment(comment)} />
+ {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 6ec9bf2a..e53c7ddd 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -39,13 +39,6 @@ const useStyles = makeStyles((theme) => ({ backgroundColor: '#2ea44f', }, }, - backButton: { - backgroundColor: '#574142', - color: '#fff', - '&:hover': { - backgroundColor: '#610B0B', - }, - }, })); type Props = { @@ -109,9 +102,6 @@ function CommentForm({ bug }: Props) { onChange={(comment: string) => setIssueComment(comment)} />
- {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()} +
@@ -98,8 +118,8 @@ function Bug({ bug }: Props) { )}
-
- Labels +
+ Labels
    {bug.labels.length === 0 && ( None yet @@ -110,15 +130,6 @@ function Bug({ bug }: Props) { ))}
-
diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx index 2a70a2f8..ade64e9d 100644 --- a/webui/src/pages/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { RouteComponentProps } from 'react-router-dom'; +import { Redirect, RouteComponentProps } from 'react-router-dom'; import CircularProgress from '@material-ui/core/CircularProgress'; @@ -15,8 +15,8 @@ const BugQuery: React.FC = ({ match }: Props) => { variables: { id: match.params.id }, }); if (loading) return ; + if (!data?.repository?.bug) return ; if (error) return

Error: {error}

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

404.

; return ; }; -- cgit From 46d38aa53fa925a2335fdf6c3b0b6f47d05dce94 Mon Sep 17 00:00:00 2001 From: Lena 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/App.tsx | 1 - webui/src/pages/bug/BugQuery.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'webui') diff --git a/webui/src/App.tsx b/webui/src/App.tsx index e0580b1d..4c81913c 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -13,7 +13,6 @@ export default function App() { - diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx index ade64e9d..5d459c42 100644 --- a/webui/src/pages/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { RouteComponentProps } from 'react-router-dom'; import CircularProgress from '@material-ui/core/CircularProgress'; +import NotFoundPage from '../notfound/NotFoundPage'; + import Bug from './Bug'; import { useGetBugQuery } from './BugQuery.generated'; @@ -15,7 +17,7 @@ const BugQuery: React.FC = ({ match }: Props) => { variables: { id: match.params.id }, }); if (loading) return ; - if (!data?.repository?.bug) return ; + if (!data?.repository?.bug) return ; if (error) return

Error: {error}

; return ; }; -- cgit From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001 From: Sascha 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/components/Header/Header.tsx | 8 ++++++-- webui/src/pages/bug/Bug.tsx | 7 ++++--- webui/src/themes/DefaultDark.ts | 3 ++- webui/src/themes/DefaultLight.ts | 4 +++- 4 files changed, 15 insertions(+), 7 deletions(-) (limited to 'webui') diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx index 3bdb252f..579bf127 100644 --- a/webui/src/components/Header/Header.tsx +++ b/webui/src/components/Header/Header.tsx @@ -15,9 +15,13 @@ const useStyles = makeStyles((theme) => ({ filler: { flexGrow: 1, }, + appBar: { + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, + }, appTitle: { ...theme.typography.h6, - color: 'white', + color: theme.palette.primary.contrastText, textDecoration: 'none', display: 'flex', alignItems: 'center', @@ -36,7 +40,7 @@ function Header() { return ( <> - + git-bug diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 8b537fb8..343721b4 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -76,10 +76,11 @@ const useStyles = makeStyles((theme) => ({ backButton: { position: 'sticky', top: '80px', - backgroundColor: '#574142', - color: '#fff', + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, '&:hover': { - backgroundColor: '#610B0B', + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, }, }, })); diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts index 6a92ec49..65dd6329 100644 --- a/webui/src/themes/DefaultDark.ts +++ b/webui/src/themes/DefaultDark.ts @@ -4,7 +4,8 @@ const defaultDarkTheme = createMuiTheme({ palette: { type: 'dark', primary: { - main: '#263238', + dark: '#263238', + main: '#2a393e', light: '#525252', }, error: { diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts index bc788a98..9c57ebe5 100644 --- a/webui/src/themes/DefaultLight.ts +++ b/webui/src/themes/DefaultLight.ts @@ -4,8 +4,10 @@ const defaultLightTheme = createMuiTheme({ palette: { type: 'light', primary: { - main: '#263238', + dark: '#263238', + main: '#5a6b73', light: '#f5f5f5', + contrastText: '#fff', }, info: { main: '#e2f1ff', -- cgit From 07f3163296b187ddf7069c05ca94f5ebaf43413c Mon Sep 17 00:00:00 2001 From: Lena 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') 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 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') diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx new file mode 100644 index 00000000..4c73dd0a --- /dev/null +++ b/webui/src/pages/bug/BackButton.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +import Button from '@material-ui/core/Button'; +import { makeStyles } from '@material-ui/core/styles'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; + +const useStyles = makeStyles((theme) => ({ + backButton: { + position: 'sticky', + top: '80px', + backgroundColor: theme.palette.primary.dark, + color: theme.palette.primary.contrastText, + '&:hover': { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + }, +})); + +function BackButton() { + const classes = useStyles(); + + return ( + + ); +} + +export default BackButton; diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 343721b4..aa6247f2 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -1,13 +1,12 @@ import React from 'react'; -import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import Label from 'src/components/Label'; +import BackButton from './BackButton'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; @@ -73,16 +72,6 @@ const useStyles = makeStyles((theme) => ({ commentForm: { marginLeft: 48, }, - backButton: { - position: 'sticky', - top: '80px', - backgroundColor: theme.palette.primary.dark, - color: theme.palette.primary.contrastText, - '&:hover': { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - }, })); type Props = { @@ -99,15 +88,7 @@ function Bug({ bug }: Props) {
- +
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index 9ad52ad0..d04e753a 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -1,12 +1,12 @@ import React, { FormEvent, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { Button } from '@material-ui/core'; -import Paper from '@material-ui/core/Paper'; +import { Button, Paper } from '@material-ui/core'; import { makeStyles, Theme } from '@material-ui/core/styles'; import BugTitleInput from '../../components/BugTitleForm/BugTitleInput'; import CommentInput from '../../components/CommentInput/CommentInput'; +import BackButton from '../bug/BackButton'; import { useNewBugMutation } from './NewBug.generated'; @@ -15,12 +15,17 @@ import { useNewBugMutation } from './NewBug.generated'; */ const useStyles = makeStyles((theme: Theme) => ({ main: { - maxWidth: 800, + maxWidth: 1200, margin: 'auto', marginTop: theme.spacing(4), marginBottom: theme.spacing(4), padding: theme.spacing(2), - overflow: 'hidden', + }, + container: { + display: 'flex', + marginBottom: theme.spacing(1), + marginRight: theme.spacing(2), + marginLeft: theme.spacing(2), }, form: { display: 'flex', @@ -34,6 +39,21 @@ const useStyles = makeStyles((theme: Theme) => ({ backgroundColor: theme.palette.success.main, color: theme.palette.success.contrastText, }, + leftSidebar: { + marginTop: theme.spacing(2), + marginRight: theme.spacing(2), + }, + rightSidebar: { + marginTop: theme.spacing(2), + flex: '0 0 200px', + }, + timeline: { + flex: 1, + marginTop: theme.spacing(2), + marginRight: theme.spacing(2), + minWidth: 400, + padding: theme.spacing(1), + }, })); /** @@ -73,34 +93,42 @@ function NewBugPage() { if (error) return
Error
; return ( - -
- { - issueTitleInput = node; - }} - label="Title" - variant="outlined" - fullWidth - margin="dense" - onChange={(event: any) => setIssueTitle(event.target.value)} - /> - setIssueComment(comment)} - /> -
- +
+
+
+
- - + +
+ { + issueTitleInput = node; + }} + label="Title" + variant="outlined" + fullWidth + margin="dense" + onChange={(event: any) => setIssueTitle(event.target.value)} + /> + setIssueComment(comment)} + /> +
+ +
+ +
+
+
+
); } -- cgit From ac17596c1ab94b6426bb5b48e39ed0dd9038303e Mon Sep 17 00:00:00 2001 From: Lena Date: Mon, 15 Mar 2021 14:52:06 +0100 Subject: Refactor BackToListButton #10 --- .../BackToListButton/BackToListButton.tsx | 36 ++++++++++++++++++++++ webui/src/pages/bug/BackButton.tsx | 36 ---------------------- webui/src/pages/bug/Bug.tsx | 4 +-- webui/src/pages/new/NewBugPage.tsx | 4 +-- 4 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 webui/src/components/BackToListButton/BackToListButton.tsx delete mode 100644 webui/src/pages/bug/BackButton.tsx (limited to 'webui') diff --git a/webui/src/components/BackToListButton/BackToListButton.tsx b/webui/src/components/BackToListButton/BackToListButton.tsx new file mode 100644 index 00000000..7ca53ad0 --- /dev/null +++ b/webui/src/components/BackToListButton/BackToListButton.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 BackToListButton() { + const classes = useStyles(); + + return ( + + ); +} + +export default BackToListButton; 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 ( - - ); -} - -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) {
- +
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() {
- +
-- cgit From 09fabc98a357454b2c4da4f08ce269bb4106c36a Mon Sep 17 00:00:00 2001 From: Lena Date: Mon, 15 Mar 2021 15:40:25 +0100 Subject: Adjust Button #10 --- webui/src/components/BackToListButton.tsx | 36 ++++++++++++++++++++++ .../BackToListButton/BackToListButton.tsx | 36 ---------------------- webui/src/pages/bug/Bug.tsx | 2 +- webui/src/pages/new/NewBugPage.tsx | 4 +-- 4 files changed, 39 insertions(+), 39 deletions(-) create mode 100644 webui/src/components/BackToListButton.tsx delete mode 100644 webui/src/components/BackToListButton/BackToListButton.tsx (limited to 'webui') diff --git a/webui/src/components/BackToListButton.tsx b/webui/src/components/BackToListButton.tsx new file mode 100644 index 00000000..7ca53ad0 --- /dev/null +++ b/webui/src/components/BackToListButton.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 BackToListButton() { + const classes = useStyles(); + + return ( + + ); +} + +export default BackToListButton; diff --git a/webui/src/components/BackToListButton/BackToListButton.tsx b/webui/src/components/BackToListButton/BackToListButton.tsx deleted file mode 100644 index 7ca53ad0..00000000 --- a/webui/src/components/BackToListButton/BackToListButton.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 BackToListButton() { - const classes = useStyles(); - - return ( - - ); -} - -export default BackToListButton; 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 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') diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx index 57b186c5..2c6f6854 100644 --- a/webui/src/pages/notfound/NotFoundPage.tsx +++ b/webui/src/pages/notfound/NotFoundPage.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; + +import BackToListButton from '../../components/BackToListButton'; const useStyles = makeStyles((theme) => ({ main: { @@ -22,8 +23,8 @@ const useStyles = makeStyles((theme) => ({ fontSize: '80px', }, backLink: { - textDecoration: 'none', - color: theme.palette.text.primary, + marginTop: theme.spacing(1), + textAlign: 'center', }, header: { fontSize: '30px', @@ -41,10 +42,9 @@ function NotFoundPage() { className={classes.logo} alt="git-bug Logo" /> - -

Go back to start page

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

+          

           

             
           

diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index e4cd8e6a..74eefe4c 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -40,7 +40,7 @@ function CountingFilter({ query, children, ...props }: CountingFilterProps) {
     variables: { query },
   });
 
-  var prefix;
+  let prefix;
   if (loading) prefix = '...';
   else if (error || !data?.repository) prefix = '???';
   // TODO: better prefixes & error handling
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index 39725722..f313ac24 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -86,7 +86,7 @@ function NewBugPage() {
   }
 
   function isFormValid() {
-    return issueTitle.length > 0 && issueComment.length > 0 ? true : false;
+    return issueTitle.length > 0;
   }
 
   if (loading) return 
Loading...
;
@@ -119,14 +119,14 @@ function NewBugPage() {
                 className={classes.greenButton}
                 variant="contained"
                 type="submit"
-                disabled={isFormValid() ? false : true}
+                disabled={!isFormValid()}
               >
                 Submit new issue
               
             

           
         
-        

+        

       

     
   );
-- 
cgit 


From 0dcb48d03aae413d77c7321f461502fa54abe05f Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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) {
             
           

           {op.edited && 
Edited
}
+          
+            
+              
+            
+          
         
         

           
-- 
cgit 


From 26ad5fc379749d7effc324ae36e778ee540053a7 Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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 (
     

       
@@ -86,6 +91,7 @@ function Message({ op }: Props) {
               disableRipple
               className={classes.editButton}
               aria-label="edit message"
+              onClick={() => editComment(op.id)}
             >
               
             
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 
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')

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) {
 
       

         

-          
+          
           
             {() => (
               

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) {
           
         

       
+      
+        {() => (
+          

+            
+          

+        )}
+      
     
   );
 }
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;
+  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 ;
+            return ;
           case 'AddCommentTimelineItem':
-            return ;
+            return ;
           case 'LabelChangeTimelineItem':
             return ;
           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 ;
+  return ;
 };
 
 export default TimelineQuery;
-- 
cgit 


From d82c481e00a729c9736ac3f297347b23201a4080 Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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 
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')

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

-      
+  function readMessageView() {
+    return (
       
         

           

@@ -90,28 +91,40 @@ function Message({ bug, op }: Props) {
             
           

           {op.edited && 
Edited
}
-          
-             editComment(op.id)}
-            >
-              
-            
-          
+          
+            {() => (
+              
+                 editComment(op.id)}
+                >
+                  
+                
+              
+            )}
+          
         

         

           
         

       
-      
-        {() => (
-          

-            
-          

-        )}
-      
+    );
+  }
+
+  function editMessageView() {
+    return (
+      

+        
+      

+    );
+  }
+
+  return (
+    

+      
+      {editMode ? editMessageView() : readMessageView()}
     

   );
 }
-- 
cgit 


From 0cd5c84d59d00141bb997346f538b165644d233c Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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) => ({
   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 
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')

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) => ({
+  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('');
+  const classes = useStyles({ loading });
+  const form = useRef(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) => {
+    e.preventDefault();
+    if (issueComment.length > 0) submit();
+  };
+
+  function getCancleButton() {
+    return (
+      
+    );
+  }
+
+  return (
+    
+      

+         setIssueComment(comment)}
+        />
+        

+          {onCancleClick ? getCancleButton() : ''}
+          
+        

+      
+    

+  );
+}
+
+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 (
       

-        
+        
       

     );
   }
-- 
cgit 


From 9f6c045f8b6e44e47300cec181217906f48d8261 Mon Sep 17 00:00:00 2001
From: Sascha 
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/components/CommentInput/CommentInput.tsx |  5 ++-
 webui/src/pages/bug/EditCommentForm.tsx            | 43 ++++++++--------------
 webui/src/pages/bug/Message.tsx                    | 22 ++++++-----
 3 files changed, 30 insertions(+), 40 deletions(-)

(limited to 'webui')

diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index 86cc7dbb..c574538e 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -51,6 +51,7 @@ const a11yProps = (index: number) => ({
 
 type Props = {
   inputProps?: any;
+  inputText?: string;
   loading: boolean;
   onChange: (comment: string) => void;
 };
@@ -62,8 +63,8 @@ type Props = {
  * @param loading Disable input when component not ready yet
  * @param onChange Callback to return input value changes
  */
-function CommentInput({ inputProps, loading, onChange }: Props) {
-  const [input, setInput] = useState('');
+function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
+  const [input, setInput] = useState(inputText ? inputText : '');
   const [tab, setTab] = useState(0);
   const classes = useStyles();
 
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) => ({
@@ -39,37 +40,22 @@ const useStyles = makeStyles((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(comment.message);
   const [inputProp, setInputProp] = useState('');
   const classes = useStyles({ loading });
   const form = useRef(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 (
-      
     );
   }
@@ -98,9 +84,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
           inputProps={inputProp}
           loading={loading}
           onChange={(comment: string) => setIssueComment(comment)}
+          inputText={comment.message}
         />
         

-          {onCancleClick ? getCancleButton() : ''}
+          {onCancelClick ? getCancelButton() : ''}
           
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 
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')

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) => ({
   },
   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 
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')

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 
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')

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

         
       

-- 
cgit 


From b06f7c781620c967e939577fc92e1265cdff6485 Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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 
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')

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 
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')

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 
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')

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);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    

+      
+        
+      
+      
+        {options.map((option) => (
+          
+            {option}
+          
+        ))}
+      
+    

+  );
+}
+
+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) {
              commented 
             
           

-          {comment.edited && 
Edited
}
+          {comment.edited && (
+            
+          )}
           
             {() => (
               
                  editComment(comment.id)}
                 >
@@ -129,7 +135,6 @@ function Message({ bug, op }: Props) {
         
-- 
cgit 


From defd1ae00cccce0b46207e03084fe6af32096610 Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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);
   const open = Boolean(anchorEl);
 
+  const { loading, error, data } = useMessageEditHistoryQuery({
+    variables: { bugIdPrefix: bugId },
+  });
+  if (loading) return ;
+  if (error) return 
Error: {error}
;
+
+  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) => {
     setAnchorEl(event.currentTarget);
   };
@@ -63,13 +70,12 @@ function EditHistoryMenu({ iconBtnProps }: Props) {
           },
         }}
       >
-        {options.map((option) => (
-          
-            {option}
+        
+          Edited {history?.length} times.
+        
+        {history?.map((edit, index) => (
+          
+            
           
         ))}
       
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 && (
             
           )}
           
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 
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')

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);
-  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) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
   return (
     

-      
-        
-      
       
         {history?.map((edit, index) => (
-          
+          
             
           
         ))}
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);
+
+  const handleClick = (event: React.MouseEvent) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    

+      
+        
+      
+      {anchorEl && (
+        
+      )}
+    

+  );
+}
+
 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) {
             
           

           {comment.edited && (
-            
+            
           )}
           
             {() => (
-- 
cgit 


From 155b37e81fb3a5f463ddcc0c39790ea9b755d57b Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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 ;
-  if (error) return 
Error: {error}
;
-
-  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 (
-    

-      
-        
-          Edited {history?.length} times.
-        
-        {history?.map((edit, index) => (
-          
-            
-          
-        ))}
-      
-    

-  );
-}
-
-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);
+  const [open, setOpen] = React.useState(false);
 
-  const handleClick = (event: React.MouseEvent) => {
-    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}
       >
         
       
-      {anchorEl && (
-        
-      )}
+      {
+        // Render CustomizedDialogs on open to prevent fetching the history
+        // before opening the history menu.
+        open && (
+          
+        )
+      }
     

   );
 }
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 {
+  id: string;
+  children: React.ReactNode;
+  onClose: () => void;
+}
+
+const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
+  const { children, classes, onClose, ...other } = props;
+  return (
+    
+      {children}
+      {onClose ? (
+        
+          
+        
+      ) : null}
+    
+  );
+});
+
+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('panel0');
+
+  const { loading, error, data } = useMessageEditHistoryQuery({
+    variables: { bugIdPrefix: bugId },
+  });
+  if (loading) {
+    return (
+      
+        
+          Loading...
+        
+        
+          
+            
+          
+        
+      
+    );
+  }
+  if (error) {
+    return (
+      
+        
+          Something went wrong...
+        
+        
+          
Error: {error}

+        
+      
+    );
+  }
+
+  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 (
+    
+      
+        Edited {history?.length} times.
+      
+      
+        {history?.map((edit, index) => (
+          
+            
+              
+                
+              
+            
+            {edit.message}
+          
+        ))}
+      
+    
+  );
+}
+
+export default MessageHistoryDialog;
-- 
cgit 


From dfb039a9361a1a0d19a31e25130c89f70828ef00 Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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('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 
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')

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) {
               
                 
               
+              {index === 0 && '• (most recent edit)'}
             
             {edit.message}
           
-- 
cgit 


From bd316ef9efc5485513d8f2ceeca3938eb0c5b30f Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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"
             >
-              
-                
-              
-              {index === 0 && '• (most recent edit)'}
+              
+                
+                  
+                
+                {index === 0 && '• (most recent edit)'}
+              
             
             {edit.message}
           
-- 
cgit 


From 5b562559e36d07888e888d014db5130a80be4519 Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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) => ({
 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(comment.message);
   const [inputProp, setInputProp] = useState('');
@@ -88,7 +88,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
 
   function getCancelButton() {
     return (
-      
     );
@@ -104,7 +104,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
           inputText={comment.message}
         />
         

-          {onCancelClick ? getCancelButton() : ''}
+          {onCancel && getCancelButton()}
           

         

       
+      
+        
+          
+            
+          
+          Count
+        
+      
     
   );
 }
-- 
cgit 


From 688cc33ccca5fd6653ee6f2ee2946dc30a9052ae Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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 (
     
       
@@ -109,12 +115,16 @@ function BugRow({ bug }: Props) {
         

       
       
-        
-          
-            
+        {commentCount > 0 && (
+          
+            
+              
+            
+            
+              {commentCount}
+            
           
-          Count
-        
+        )}
       
     
   );
-- 
cgit 


From 4c5a0f37f7979d29fa077c0cfcd9be936c8fc0bd Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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)}
           >
             }
               aria-controls="panel1d-content"
               id="panel1d-header"
             >
               
-                {`#${index + 1} • Edited `}
+                {`#${history?.length - index} • Edited `}
                 
                   
                 
                 {index === 0 && ' (most recent edit)'}
+                {index === history?.length - 1 && ' (Initial description)'}
               
             
             {edit.message}
-- 
cgit 


From c610d942fc510349302ed408fcc7b11500c2bb4c Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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 
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')

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) {
              by {bug.author.displayName}
           
         
-      
-      
         {commentCount > 0 && (
-          
-            
-              
-            
-            
-              {commentCount}
-            
-          
+          
+            
+            {commentCount}
+          
         )}
       
     
-- 
cgit 


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

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

(limited to 'webui')

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

+      
     
   );
 }
-- 
cgit 


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

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

(limited to 'webui')

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

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

(limited to 'webui')

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


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

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

(limited to 'webui')

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


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

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

(limited to 'webui')

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

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

-      
+      
+        
+        
+        
+        
+      
     
   );
 }
-- 
cgit 


From f752dd54806122ea9d77b6807246897eb2656f0e Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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) {
         
       

       

-        

-          
-        

         

           
           
-- 
cgit 


From 50f146a42a3b59341531b5f478217b10d7033ead Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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

-      

-        

-          
+    
+      

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

+          
         

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

-              
-            

-          
-        
-        

-      

-    

+      
+    
   );
 }
 
-- 
cgit 


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

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

(limited to 'webui')

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

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

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

(limited to 'webui')

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

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

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

(limited to 'webui')

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

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 (
+      <>
+        
+          
+            {desc}
+            
+            {mostRecent}
+          
+        
+      
+    );
+  };
+
   return (
     
       
-        Edited {history?.length} times.
+        {`Edited ${editCount} ${editCount > 1 ? 'times' : 'time'}.`}
       
       
         {history?.map((edit, index) => (
@@ -204,14 +222,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
               aria-controls="panel1d-content"
               id="panel1d-header"
             >
-              
-                {`#${history?.length - index} • Edited `}
-                
-                  
-                
-                {index === 0 && ' (most recent edit)'}
-                {index === history?.length - 1 && ' (Initial description)'}
-              
+              {getSummary(index, edit.date)}
             
             {edit.message}
           
-- 
cgit 


From 54c5b66271f4f3d95881a186c8124e7e5dcdb6d4 Mon Sep 17 00:00:00 2001
From: Aien Saidi 
Date: Thu, 18 Mar 2021 18:00:16 +0100
Subject: feat: use author to filter the list

---
 webui/.eslintrc.js                          |  1 +
 webui/package.json                          |  2 +-
 webui/src/pages/list/FilterToolbar.tsx      | 28 ++++++++++++++++++++++++++--
 webui/src/pages/list/ListIdentities.graphql | 13 +++++++++++++
 4 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 webui/src/pages/list/ListIdentities.graphql

(limited to 'webui')

diff --git a/webui/.eslintrc.js b/webui/.eslintrc.js
index 2dfa7543..125fe801 100644
--- a/webui/.eslintrc.js
+++ b/webui/.eslintrc.js
@@ -38,4 +38,5 @@ module.exports = {
   settings: {
     'import/internal-regex': '^src/',
   },
+  ignorePatterns: ['**/*.generated.tsx'],
 };
diff --git a/webui/package.json b/webui/package.json
index 39696a25..a69473d8 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -46,7 +46,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "generate": "graphql-codegen",
-    "lint": "eslint src --ext .ts --ext .tsx --ext .js --ext .jsx --ext .graphql",
+    "lint": "eslint --fix src --ext .ts --ext .tsx --ext .js --ext .jsx --ext .graphql",
     "clean": "rimraf src/**.generated.* src/schema.json src/gqlTypes.* src/fragmentTypes.*"
   },
   "proxy": "http://localhost:3001",
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) {
       Author
       Label
       */}
+       hasValue('author', key)}
+        to={(key) => pipe(replaceParam('author', key), loc)(params)}
+      >
+        Author
+      
       
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')

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
       
+       hasValue('label', key)}
+        to={(key) => pipe(replaceParam('label', key), loc)(params)}
+      >
+        Label
+      
       
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')

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
       
-       hasValue('label', key)}
-        to={(key) => pipe(replaceParam('label', key), loc)(params)}
-      >
-        Label
-      
+      {labels.length ? (
+         hasValue('label', key)}
+          to={(key) => pipe(replaceParam('label', key), loc)(params)}
+        >
+          Label
+        
+      ) : null}
       
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')

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;
   to: (key: string) => LocationDescriptor;
+  hasFilter?: boolean;
 } & React.ButtonHTMLAttributes;
 
 function FilterDropdown({
@@ -98,9 +111,11 @@ function FilterDropdown({
   itemActive,
   icon: Icon,
   to,
+  hasFilter,
   ...props
 }: FilterDropdownProps) {
   const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState('');
   const buttonRef = useRef(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]) => (
-           setOpen(false)}
-            key={key}
-          >
-            {value}
-          
-        ))}
+        {hasFilter && (
+           {
+              const { value } = e.target;
+              setFilter(value);
+            }}
+            value={filter}
+            label={`Filter ${children}`}
+          />
+        )}
+        {dropdown
+          .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase()))
+          .map(([key, value]) => (
+             setOpen(false)}
+              key={key}
+            >
+              {value}
+            
+          ))}
       
     
   );
@@ -158,6 +191,7 @@ export type FilterProps = {
   icon?: React.ComponentType;
   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
       
-      {labels.length ? (
-         hasValue('label', key)}
-          to={(key) => pipe(replaceParam('label', key), loc)(params)}
-        >
-          Label
-        
-      ) : null}
+       hasValue('label', key)}
+        to={(key) => pipe(toggleOrAddParam('label', key), loc)(params)}
+        hasFilter
+      >
+        Label
+      
        hasValue('sort', key)}
-        to={(key) => pipe(replaceParam('sort', key), loc)(params)}
+        to={(key) => pipe(toggleParam('sort', key), loc)(params)}
       >
         Sort
       
-- 
cgit 


From f82071a3d7140a1e21c02b27f03871794116af8a Mon Sep 17 00:00:00 2001
From: Aien Saidi 
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')

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

         

           

-            
+            
+              
+               setFilterMenuIsOpen(false)}
+                getContentAnchorEl={null}
+                anchorEl={filterButtonRef.current}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'left',
+                }}
+              >
+                 setFilterMenuIsOpen(false)}
+                >
+                  Your newest issues
+                
+              
+            
             
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')

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) {
        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
       
       
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')

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) {
       
        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 
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')

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) {
       
        {
-          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 
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')

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('');
   const buttonRef = useRef(null);
+  const searchRef = useRef(null);
   const classes = useStyles({ active: false });
 
+  useEffect(() => {
+    searchRef && searchRef.current && searchRef.current.focus();
+  }, [filter]);
+
   const content = (
     <>
       {Icon && }
@@ -139,6 +144,7 @@ function FilterDropdown({
       
        e.stopPropagation()}
             value={filter}
             label={`Filter ${children}`}
           />
-- 
cgit 


From d2845605c2152738e37d13b7067fedac91ccf225 Mon Sep 17 00:00:00 2001
From: Sascha 
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')

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 
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')

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 
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')

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) => ({
   },
   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) => ({
     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 (
     
       

-        

-          
-            
-              
-               setFilterMenuIsOpen(false)}
-                getContentAnchorEl={null}
-                anchorEl={filterButtonRef.current}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'left',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'left',
-                }}
-              >
-                 setFilterMenuIsOpen(false)}
-                >
-                  Your newest issues
-                
-              
-            
-             setInput(e.target.value)}
-              classes={{
-                root: classes.search,
-                focused: classes.searchFocused,
+        
+          
+            
+             setFilterMenuIsOpen(false)}
+              getContentAnchorEl={null}
+              anchorEl={filterButtonRef.current}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
               }}
-            />
-            
-          
-        

+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+            >
+               setFilterMenuIsOpen(false)}
+              >
+                Your newest issues
+              
+            

+          
+           setInput(e.target.value)}
+            classes={{
+              root: classes.search,
+              focused: classes.searchFocused,
+            }}
+          />
+          
+        
         
           {() => (
             
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() {
             
-- 
cgit