From 680dd91c0c0200bd4948173df0b601e16f511e6e Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Thu, 13 Feb 2020 00:19:22 +0100 Subject: [PATCH 01/12] webui: create comment form --- webui/package-lock.json | 5 ++ webui/package.json | 1 + webui/src/Date.tsx | 7 +- webui/src/bug/Bug.tsx | 3 + webui/src/bug/CommentForm.graphql | 5 ++ webui/src/bug/CommentForm.tsx | 145 ++++++++++++++++++++++++++++++ 6 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 webui/src/bug/CommentForm.graphql create mode 100644 webui/src/bug/CommentForm.tsx diff --git a/webui/package-lock.json b/webui/package-lock.json index 9bc9576c136098914a844fae987e922253055d32..d0c7d6f4bf5c9b4e2d9a36130037d8a116fe5614 100644 --- a/webui/package-lock.json +++ b/webui/package-lock.json @@ -14608,6 +14608,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-moment": { + "version": "0.9.7", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.9.7.tgz", + "integrity": "sha512-ifzUrUGF6KRsUN2pRG5k56kO0mJBr8kRkWb0wNvtFIsBIxOuPxhUpL1YlXwpbQCbHq23hUu6A0VEk64HsFxk9g==" + }, "react-router": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", diff --git a/webui/package.json b/webui/package.json index cf61b883a9596aac10a7345cfc48cce71e665c51..a6fd4a585acb3409d0aa4a698d37a9bc2bd22bcf 100644 --- a/webui/package.json +++ b/webui/package.json @@ -21,6 +21,7 @@ "react": "^16.8.6", "react-apollo": "^3.1.3", "react-dom": "^16.8.6", + "react-moment": "^0.9.7", "react-router": "^5.0.0", "react-router-dom": "^5.0.0", "react-scripts": "^3.3.1", diff --git a/webui/src/Date.tsx b/webui/src/Date.tsx index 9380d2fcfa66f910d1886011ad308d077c2c1144..a830546cd08358c0b0dcc3a59f24a677433e24a2 100644 --- a/webui/src/Date.tsx +++ b/webui/src/Date.tsx @@ -1,11 +1,16 @@ import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import moment from 'moment'; import React from 'react'; +import Moment from 'react-moment'; + +const HOUR = 1000 * 3600; +const DAY = 24 * HOUR; +const WEEK = 7 * DAY; type Props = { date: string }; const Date = ({ date }: Props) => ( - {moment(date).fromNow()} + ); diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx index f4029a5fd1d8aa09f05340bb2f822ab4484a6873..114cb8e085bbd5393ddcd2276fdca1c4e03d8b31 100644 --- a/webui/src/bug/Bug.tsx +++ b/webui/src/bug/Bug.tsx @@ -7,6 +7,7 @@ import Date from '../Date'; import Label from '../Label'; import { BugFragment } from './Bug.generated'; +import CommentForm from './CommentForm'; import TimelineQuery from './TimelineQuery'; const useStyles = makeStyles(theme => ({ @@ -87,6 +88,8 @@ function Bug({ bug }: Props) { + + ); } diff --git a/webui/src/bug/CommentForm.graphql b/webui/src/bug/CommentForm.graphql new file mode 100644 index 0000000000000000000000000000000000000000..33d211938e35acb209ef71ba2b0f56cbc16dfa03 --- /dev/null +++ b/webui/src/bug/CommentForm.graphql @@ -0,0 +1,5 @@ +mutation AddComment($input: AddCommentInput!) { + addComment(input: $input) { + operation { id } + } +} diff --git a/webui/src/bug/CommentForm.tsx b/webui/src/bug/CommentForm.tsx new file mode 100644 index 0000000000000000000000000000000000000000..3aa52b19ef453dfd14a238b82bd6061c676b90c2 --- /dev/null +++ b/webui/src/bug/CommentForm.tsx @@ -0,0 +1,145 @@ +import Button from '@material-ui/core/Button'; +import Paper from '@material-ui/core/Paper'; +import Tab from '@material-ui/core/Tab'; +import Tabs from '@material-ui/core/Tabs'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import React, { useState, useRef } from 'react'; + +import Content from '../Content'; + +import { useAddCommentMutation } from './CommentForm.generated'; +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: {}, + tabContent: { + margin: theme.spacing(2, 0), + }, + preview: { + borderBottom: `solid 3px ${theme.palette.grey['200']}`, + minHeight: '5rem', + }, + actions: { + display: 'flex', + justifyContent: 'flex-end', + }, +})); + +type TabPanelProps = { + children: React.ReactNode; + value: number; + index: number; +} & React.HTMLProps; +function TabPanel({ children, value, index, ...props }: TabPanelProps) { + return ( + + ); +} + +const a11yProps = (index: number) => ({ + id: `editor-tab-${index}`, + 'aria-controls': `editor-tabpanel-${index}`, +}); + +type Props = { + bugId: string; +}; + +function CommentForm({ bugId }: Props) { + const [addComment, { loading }] = useAddCommentMutation(); + const [input, setInput] = useState(''); + const [tab, setTab] = useState(0); + const classes = useStyles({ loading }); + const form = useRef(null); + + const submit = () => { + addComment({ + variables: { + input: { + prefix: bugId, + message: input, + }, + }, + refetchQueries: [ + // TODO: update the cache instead of refetching + { + query: TimelineDocument, + variables: { + id: bugId, + first: 100, + }, + }, + ], + awaitRefetchQueries: true, + }).then(() => setInput('')); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + submit(); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + // Submit on cmd/ctrl+enter + if ((e.metaKey || e.altKey) && e.keyCode === 13) { + submit(); + } + }; + + return ( + +
+ setTab(t)}> + + + +
+ + setInput(e.target.value)} + disabled={loading} + /> + + + + +
+
+ +
+
+ + ); +} + +export default CommentForm; From 8b85780d76ad45675582f4478eedb026b7ac25e1 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Thu, 13 Feb 2020 00:53:29 +0100 Subject: [PATCH 02/12] webui: start reorganizing the component structure --- webui/package.json | 3 ++- webui/src/Label.graphql | 8 -------- webui/src/bug/Bug.graphql | 3 +-- webui/src/bug/Bug.tsx | 6 +++--- webui/src/bug/CommentForm.tsx | 2 +- webui/src/bug/LabelChange.tsx | 6 +++--- webui/src/bug/LabelChangeFragment.graphql | 3 +-- webui/src/bug/Message.tsx | 7 +++---- webui/src/bug/MessageCommentFragment.graphql | 2 +- webui/src/bug/MessageCreateFragment.graphql | 2 +- webui/src/bug/SetStatus.tsx | 4 ++-- webui/src/bug/SetStatusFragment.graphql | 2 +- webui/src/bug/SetTitle.tsx | 4 ++-- webui/src/bug/SetTitleFragment.graphql | 2 +- webui/src/{ => components}/Author.tsx | 2 +- webui/src/{tag => components/Content}/ImageTag.tsx | 0 webui/src/{tag => components/Content}/PreTag.tsx | 0 .../src/{Content.tsx => components/Content/index.tsx} | 4 ++-- webui/src/{ => components}/Date.tsx | 0 webui/src/{ => components}/Label.tsx | 4 ++-- .../{Author.graphql => components/fragments.graphql} | 11 +++++++++++ webui/src/list/BugRow.graphql | 3 +-- webui/src/list/BugRow.tsx | 4 ++-- 23 files changed, 41 insertions(+), 41 deletions(-) delete mode 100644 webui/src/Label.graphql rename webui/src/{ => components}/Author.tsx (92%) rename webui/src/{tag => components/Content}/ImageTag.tsx (100%) rename webui/src/{tag => components/Content}/PreTag.tsx (100%) rename webui/src/{Content.tsx => components/Content/index.tsx} (88%) rename webui/src/{ => components}/Date.tsx (100%) rename webui/src/{ => components}/Label.tsx (94%) rename webui/src/{Author.graphql => components/fragments.graphql} (51%) diff --git a/webui/package.json b/webui/package.json index a6fd4a585acb3409d0aa4a698d37a9bc2bd22bcf..902ed1db5ab790d062906dded97c79771394ec8b 100644 --- a/webui/package.json +++ b/webui/package.json @@ -49,7 +49,8 @@ "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 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", "browserslist": [ diff --git a/webui/src/Label.graphql b/webui/src/Label.graphql deleted file mode 100644 index 22522ada7d3539b695b9ce5ab86e87f84a518efa..0000000000000000000000000000000000000000 --- a/webui/src/Label.graphql +++ /dev/null @@ -1,8 +0,0 @@ -fragment Label on Label { - name - color { - R - G - B - } -} diff --git a/webui/src/bug/Bug.graphql b/webui/src/bug/Bug.graphql index 112024aa95ab1cc7dabd17220926cd4ead7a9a17..498242c0a149b407b232f1dca43979febcf2bb34 100644 --- a/webui/src/bug/Bug.graphql +++ b/webui/src/bug/Bug.graphql @@ -1,5 +1,4 @@ -#import "../Label.graphql" -#import "../Author.graphql" +#import "../components/fragments.graphql" fragment Bug on Bug { id diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx index 114cb8e085bbd5393ddcd2276fdca1c4e03d8b31..0e53e4478e7f67bce714a0ea930b758dd740e688 100644 --- a/webui/src/bug/Bug.tsx +++ b/webui/src/bug/Bug.tsx @@ -2,9 +2,9 @@ import Typography from '@material-ui/core/Typography/Typography'; import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../Author'; -import Date from '../Date'; -import Label from '../Label'; +import Author from '../components/Author'; +import Date from '../components/Date'; +import Label from '../components/Label'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; diff --git a/webui/src/bug/CommentForm.tsx b/webui/src/bug/CommentForm.tsx index 3aa52b19ef453dfd14a238b82bd6061c676b90c2..a915ecf0fe4cb7faac1f398dc924506bf0f46115 100644 --- a/webui/src/bug/CommentForm.tsx +++ b/webui/src/bug/CommentForm.tsx @@ -6,7 +6,7 @@ import TextField from '@material-ui/core/TextField'; import { makeStyles, Theme } from '@material-ui/core/styles'; import React, { useState, useRef } from 'react'; -import Content from '../Content'; +import Content from '../components/Content'; import { useAddCommentMutation } from './CommentForm.generated'; import { TimelineDocument } from './TimelineQuery.generated'; diff --git a/webui/src/bug/LabelChange.tsx b/webui/src/bug/LabelChange.tsx index 572579bdd18dc54ac4b713954812528707b70055..a3950524e084fff3013ca9a7c19b23d8ea8a0e69 100644 --- a/webui/src/bug/LabelChange.tsx +++ b/webui/src/bug/LabelChange.tsx @@ -1,9 +1,9 @@ import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../Author'; -import Date from '../Date'; -import Label from '../Label'; +import Author from '../components/Author'; +import Date from '../components/Date'; +import Label from '../components/Label'; import { LabelChangeFragment } from './LabelChangeFragment.generated'; diff --git a/webui/src/bug/LabelChangeFragment.graphql b/webui/src/bug/LabelChangeFragment.graphql index 631de70c3661948d71396b89b4a875a771f87a7a..01b94a98e05a102b72c798a210632b1eefa73f33 100644 --- a/webui/src/bug/LabelChangeFragment.graphql +++ b/webui/src/bug/LabelChangeFragment.graphql @@ -1,5 +1,4 @@ -#import "../Author.graphql" -#import "../Label.graphql" +#import "../components/fragments.graphql" fragment LabelChange on LabelChangeTimelineItem { date diff --git a/webui/src/bug/Message.tsx b/webui/src/bug/Message.tsx index c8d0710dfab011dfda2b4027ec29c0d4091746e9..a61ed3f22009a55472f2579d56b33499b4020206 100644 --- a/webui/src/bug/Message.tsx +++ b/webui/src/bug/Message.tsx @@ -2,10 +2,9 @@ import Paper from '@material-ui/core/Paper'; import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../Author'; -import { Avatar } from '../Author'; -import Content from '../Content'; -import Date from '../Date'; +import Author, { Avatar } from '../components/Author'; +import Date from '../components/Date'; +import Content from '../components/Content'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; diff --git a/webui/src/bug/MessageCommentFragment.graphql b/webui/src/bug/MessageCommentFragment.graphql index 38d626d0fd6429ee86e5e133dc1d76d040b6beac..61156feee3f5f1a0e705a5e91226658bef32a5ec 100644 --- a/webui/src/bug/MessageCommentFragment.graphql +++ b/webui/src/bug/MessageCommentFragment.graphql @@ -1,4 +1,4 @@ -#import "../Author.graphql" +#import "../components/fragments.graphql" fragment AddComment on AddCommentTimelineItem { createdAt diff --git a/webui/src/bug/MessageCreateFragment.graphql b/webui/src/bug/MessageCreateFragment.graphql index 08477470aeb32ff2b347e06ccc97f11abf137af3..e371b9dc43a2f1d9d7363c2d5e4700e314b4c10a 100644 --- a/webui/src/bug/MessageCreateFragment.graphql +++ b/webui/src/bug/MessageCreateFragment.graphql @@ -1,4 +1,4 @@ -#import "../Author.graphql" +#import "../components/fragments.graphql" fragment Create on CreateTimelineItem { createdAt diff --git a/webui/src/bug/SetStatus.tsx b/webui/src/bug/SetStatus.tsx index 3e1a798964dcb436b0dca934a9de743d5d5db21c..86105c8a943192317e9a50bb743ccd6920721c07 100644 --- a/webui/src/bug/SetStatus.tsx +++ b/webui/src/bug/SetStatus.tsx @@ -1,8 +1,8 @@ import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../Author'; -import Date from '../Date'; +import Author from '../components/Author'; +import Date from '../components/Date'; import { SetStatusFragment } from './SetStatusFragment.generated'; diff --git a/webui/src/bug/SetStatusFragment.graphql b/webui/src/bug/SetStatusFragment.graphql index 0fdea01b635f209992a5c831efdfbfeb6d6b9dfe..5a3986d09917bb9fb5410ac2c0c5b84d4694bf6f 100644 --- a/webui/src/bug/SetStatusFragment.graphql +++ b/webui/src/bug/SetStatusFragment.graphql @@ -1,4 +1,4 @@ -#import "../Author.graphql" +#import "../components/fragments.graphql" fragment SetStatus on SetStatusTimelineItem { date diff --git a/webui/src/bug/SetTitle.tsx b/webui/src/bug/SetTitle.tsx index 0b088e0bdf4abef59c6a7c561b931ea62a8c0bd9..e57aaafb13d9ef32b31b4bc9aa773c52a1388f89 100644 --- a/webui/src/bug/SetTitle.tsx +++ b/webui/src/bug/SetTitle.tsx @@ -1,8 +1,8 @@ import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../Author'; -import Date from '../Date'; +import Author from '../components/Author'; +import Date from '../components/Date'; import { SetTitleFragment } from './SetTitleFragment.generated'; diff --git a/webui/src/bug/SetTitleFragment.graphql b/webui/src/bug/SetTitleFragment.graphql index 432c44492ef68b9cf1d6954cafa9dec15a716f51..22d2185c0b53e9742e1966f22241cc809c7c5ab7 100644 --- a/webui/src/bug/SetTitleFragment.graphql +++ b/webui/src/bug/SetTitleFragment.graphql @@ -1,4 +1,4 @@ -#import "../Author.graphql" +#import "../components/fragments.graphql" fragment SetTitle on SetTitleTimelineItem { date diff --git a/webui/src/Author.tsx b/webui/src/components/Author.tsx similarity index 92% rename from webui/src/Author.tsx rename to webui/src/components/Author.tsx index 852cd2b706162b2e37fd1df06214111771d2e5c7..43fd108e139263349e2dfa08e016f003a38549d8 100644 --- a/webui/src/Author.tsx +++ b/webui/src/components/Author.tsx @@ -2,7 +2,7 @@ import MAvatar from '@material-ui/core/Avatar'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import React from 'react'; -import { AuthoredFragment } from './Author.generated'; +import { AuthoredFragment } from './fragments.generated'; type Props = AuthoredFragment & { className?: string; diff --git a/webui/src/tag/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx similarity index 100% rename from webui/src/tag/ImageTag.tsx rename to webui/src/components/Content/ImageTag.tsx diff --git a/webui/src/tag/PreTag.tsx b/webui/src/components/Content/PreTag.tsx similarity index 100% rename from webui/src/tag/PreTag.tsx rename to webui/src/components/Content/PreTag.tsx diff --git a/webui/src/Content.tsx b/webui/src/components/Content/index.tsx similarity index 88% rename from webui/src/Content.tsx rename to webui/src/components/Content/index.tsx index 3a7af2f8689e911f7a4784b30929ca24a8f4b7c4..56e52e1efcfc530815e6cf80987ca3ddb47b82d2 100644 --- a/webui/src/Content.tsx +++ b/webui/src/components/Content/index.tsx @@ -4,8 +4,8 @@ import parse from 'remark-parse'; import remark2react from 'remark-react'; import unified from 'unified'; -import ImageTag from './tag/ImageTag'; -import PreTag from './tag/PreTag'; +import ImageTag from './ImageTag'; +import PreTag from './PreTag'; type Props = { markdown: string }; const Content: React.FC = ({ markdown }: Props) => { diff --git a/webui/src/Date.tsx b/webui/src/components/Date.tsx similarity index 100% rename from webui/src/Date.tsx rename to webui/src/components/Date.tsx diff --git a/webui/src/Label.tsx b/webui/src/components/Label.tsx similarity index 94% rename from webui/src/Label.tsx rename to webui/src/components/Label.tsx index a33b4c2c38710e46963d3958c950f1bd49af14af..48c20096be42e7a87925cc430d9fad18c3635cef 100644 --- a/webui/src/Label.tsx +++ b/webui/src/components/Label.tsx @@ -6,8 +6,8 @@ import { } from '@material-ui/core/styles/colorManipulator'; import React from 'react'; -import { LabelFragment } from './Label.generated'; -import { Color } from './gqlTypes'; +import { LabelFragment } from './fragments.generated'; +import { Color } from '../gqlTypes'; // Minimum contrast between the background and the text color const contrastThreshold = 2.5; diff --git a/webui/src/Author.graphql b/webui/src/components/fragments.graphql similarity index 51% rename from webui/src/Author.graphql rename to webui/src/components/fragments.graphql index 76d66b91368e8c59d6c59f060f16e6ca326510f0..03a235f9b144ac1db78570fd6e5e30b820427046 100644 --- a/webui/src/Author.graphql +++ b/webui/src/components/fragments.graphql @@ -1,3 +1,14 @@ +# Label.tsx +fragment Label on Label { + name + color { + R + G + B + } +} + +# Author.tsx fragment authored on Authored { author { name diff --git a/webui/src/list/BugRow.graphql b/webui/src/list/BugRow.graphql index 3f9a1ef6006f3f872c5ab643885a0654d4056cd2..c2966f1087aade4088a4a9c28be9e1098553f40e 100644 --- a/webui/src/list/BugRow.graphql +++ b/webui/src/list/BugRow.graphql @@ -1,5 +1,4 @@ -#import "../Author.graphql" -#import "../Label.graphql" +#import "../components/fragments.graphql" fragment BugRow on Bug { id diff --git a/webui/src/list/BugRow.tsx b/webui/src/list/BugRow.tsx index f94538a71ebbd78ab75831baef8ee580438c08df..181aec2e90ac0ac6833db5ecc6bd0a4541024d6a 100644 --- a/webui/src/list/BugRow.tsx +++ b/webui/src/list/BugRow.tsx @@ -7,8 +7,8 @@ import ErrorOutline from '@material-ui/icons/ErrorOutline'; import React from 'react'; import { Link } from 'react-router-dom'; -import Date from '../Date'; -import Label from '../Label'; +import Date from '../components/Date'; +import Label from '../components/Label'; import { Status } from '../gqlTypes'; import { BugRowFragment } from './BugRow.generated'; From ce6f6a984b374b189141116433ced80dfa0c2aae Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Thu, 13 Feb 2020 20:00:03 +0100 Subject: [PATCH 03/12] webui: move pages components --- webui/.eslintrc.js | 6 +- webui/src/App.tsx | 65 ++----------------- webui/src/__tests__/query.ts | 2 +- webui/src/apollo.ts | 18 +++++ webui/src/components/Author.tsx | 3 +- webui/src/components/Content/ImageTag.tsx | 3 +- webui/src/components/Content/PreTag.tsx | 3 +- webui/src/components/Date.tsx | 3 +- webui/src/components/Label.tsx | 6 +- webui/src/index.tsx | 29 ++------- .../src/{ => layout}/CurrentIdentity.graphql | 0 webui/src/{ => layout}/CurrentIdentity.tsx | 3 +- webui/src/layout/Header.tsx | 50 ++++++++++++++ webui/src/layout/index.tsx | 18 +++++ webui/src/{ => pages}/bug/Bug.graphql | 0 webui/src/{ => pages}/bug/Bug.tsx | 9 +-- webui/src/{ => pages}/bug/BugQuery.graphql | 0 webui/src/{ => pages}/bug/BugQuery.tsx | 3 +- webui/src/{ => pages}/bug/CommentForm.graphql | 0 webui/src/{ => pages}/bug/CommentForm.tsx | 5 +- webui/src/{ => pages}/bug/LabelChange.tsx | 9 +-- .../bug/LabelChangeFragment.graphql | 2 +- webui/src/{ => pages}/bug/Message.tsx | 9 +-- .../bug/MessageCommentFragment.graphql | 2 +- .../bug/MessageCreateFragment.graphql | 2 +- webui/src/{ => pages}/bug/SetStatus.tsx | 7 +- .../{ => pages}/bug/SetStatusFragment.graphql | 2 +- webui/src/{ => pages}/bug/SetTitle.tsx | 7 +- .../{ => pages}/bug/SetTitleFragment.graphql | 2 +- webui/src/{ => pages}/bug/Timeline.tsx | 3 +- .../src/{ => pages}/bug/TimelineQuery.graphql | 0 webui/src/{ => pages}/bug/TimelineQuery.tsx | 3 +- webui/src/pages/bug/index.tsx | 1 + webui/src/{ => pages}/list/BugRow.graphql | 2 +- webui/src/{ => pages}/list/BugRow.tsx | 11 ++-- webui/src/{ => pages}/list/Filter.tsx | 9 +-- .../{ => pages}/list/FilterToolbar.graphql | 0 webui/src/{ => pages}/list/FilterToolbar.tsx | 5 +- webui/src/{ => pages}/list/List.tsx | 3 +- webui/src/{ => pages}/list/ListQuery.graphql | 0 webui/src/{ => pages}/list/ListQuery.tsx | 7 +- webui/src/pages/list/index.ts | 1 + webui/src/theme.ts | 11 ++++ webui/tsconfig.json | 16 ++++- 44 files changed, 203 insertions(+), 137 deletions(-) create mode 100644 webui/src/apollo.ts rename webui/src/{ => layout}/CurrentIdentity.graphql (100%) rename webui/src/{ => layout}/CurrentIdentity.tsx (99%) create mode 100644 webui/src/layout/Header.tsx create mode 100644 webui/src/layout/index.tsx rename webui/src/{ => pages}/bug/Bug.graphql (100%) rename webui/src/{ => pages}/bug/Bug.tsx (94%) rename webui/src/{ => pages}/bug/BugQuery.graphql (100%) rename webui/src/{ => pages}/bug/BugQuery.tsx (99%) rename webui/src/{ => pages}/bug/CommentForm.graphql (100%) rename webui/src/{ => pages}/bug/CommentForm.tsx (98%) rename webui/src/{ => pages}/bug/LabelChange.tsx (89%) rename webui/src/{ => pages}/bug/LabelChangeFragment.graphql (74%) rename webui/src/{ => pages}/bug/Message.tsx (92%) rename webui/src/{ => pages}/bug/MessageCommentFragment.graphql (68%) rename webui/src/{ => pages}/bug/MessageCreateFragment.graphql (66%) rename webui/src/{ => pages}/bug/SetStatus.tsx (87%) rename webui/src/{ => pages}/bug/SetStatusFragment.graphql (63%) rename webui/src/{ => pages}/bug/SetTitle.tsx (90%) rename webui/src/{ => pages}/bug/SetTitleFragment.graphql (64%) rename webui/src/{ => pages}/bug/Timeline.tsx (99%) rename webui/src/{ => pages}/bug/TimelineQuery.graphql (100%) rename webui/src/{ => pages}/bug/TimelineQuery.tsx (99%) create mode 100644 webui/src/pages/bug/index.tsx rename webui/src/{ => pages}/list/BugRow.graphql (71%) rename webui/src/{ => pages}/list/BugRow.tsx (95%) rename webui/src/{ => pages}/list/Filter.tsx (99%) rename webui/src/{ => pages}/list/FilterToolbar.graphql (100%) rename webui/src/{ => pages}/list/FilterToolbar.tsx (99%) rename webui/src/{ => pages}/list/List.tsx (99%) rename webui/src/{ => pages}/list/ListQuery.graphql (100%) rename webui/src/{ => pages}/list/ListQuery.tsx (99%) create mode 100644 webui/src/pages/list/index.ts create mode 100644 webui/src/theme.ts diff --git a/webui/.eslintrc.js b/webui/.eslintrc.js index 7adbb8d549855736e12c1a4935cd83d73b916656..2dfa7543657db5d31cc4dcbae3b250f5461a2501 100644 --- a/webui/.eslintrc.js +++ b/webui/.eslintrc.js @@ -29,9 +29,13 @@ module.exports = { position: 'after', }, ], - groups: [['builtin', 'external'], 'parent', ['sibling', 'index']], + pathGroupsExcludedImportTypes: ["builtin"], + groups: [['builtin', 'external'], ['internal', 'parent'], ['sibling', 'index']], 'newlines-between': 'always', }, ], }, + settings: { + 'import/internal-regex': '^src/', + }, }; diff --git a/webui/src/App.tsx b/webui/src/App.tsx index 6f66a6ecd6930907e2670b30e82209acf40a9386..16663870a0a4df58cb9419379aa580ac8f8ed73c 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -1,68 +1,17 @@ -import AppBar from '@material-ui/core/AppBar'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import Toolbar from '@material-ui/core/Toolbar'; -import { - createMuiTheme, - ThemeProvider, - makeStyles, -} from '@material-ui/core/styles'; import React from 'react'; import { Route, Switch } from 'react-router'; -import { Link } from 'react-router-dom'; -import CurrentIdentity from './CurrentIdentity'; -import BugQuery from './bug/BugQuery'; -import ListQuery from './list/ListQuery'; - -const theme = createMuiTheme({ - palette: { - primary: { - main: '#263238', - }, - }, -}); - -const useStyles = makeStyles(theme => ({ - offset: { - ...theme.mixins.toolbar, - }, - filler: { - flexGrow: 1, - }, - appTitle: { - ...theme.typography.h6, - color: 'white', - textDecoration: 'none', - display: 'flex', - alignItems: 'center', - }, - logo: { - height: '42px', - marginRight: theme.spacing(2), - }, -})); +import Layout from './layout'; +import BugPage from './pages/bug'; +import ListPage from './pages/list'; export default function App() { - const classes = useStyles(); - return ( - - - - - - git-bug - git-bug - -
- - - -
+ - - + + - + ); } diff --git a/webui/src/__tests__/query.ts b/webui/src/__tests__/query.ts index 5f4b58eb85539a4dbf6ac7e7f6a9975e705c1721..2f04817c1ba1dd7e4473612b6e97234224a06724 100644 --- a/webui/src/__tests__/query.ts +++ b/webui/src/__tests__/query.ts @@ -1,4 +1,4 @@ -import { parse, stringify, quote } from '../list/Filter'; +import { parse, stringify, quote } from 'src/pages/list/Filter'; it('parses a simple query', () => { expect(parse('foo:bar')).toEqual({ diff --git a/webui/src/apollo.ts b/webui/src/apollo.ts new file mode 100644 index 0000000000000000000000000000000000000000..785f0e7f0630f949b0a20c2f43793efe38d6c7eb --- /dev/null +++ b/webui/src/apollo.ts @@ -0,0 +1,18 @@ +import ApolloClient from 'apollo-boost'; +import { + IntrospectionFragmentMatcher, + InMemoryCache, +} from 'apollo-cache-inmemory'; + +import introspectionQueryResultData from './fragmentTypes'; + +const client = new ApolloClient({ + uri: '/graphql', + cache: new InMemoryCache({ + fragmentMatcher: new IntrospectionFragmentMatcher({ + introspectionQueryResultData, + }), + }), +}); + +export default client; diff --git a/webui/src/components/Author.tsx b/webui/src/components/Author.tsx index 43fd108e139263349e2dfa08e016f003a38549d8..9ac1da527d67ec6c32aa12ce11db8bd901d42299 100644 --- a/webui/src/components/Author.tsx +++ b/webui/src/components/Author.tsx @@ -1,6 +1,7 @@ +import React from 'react'; + import MAvatar from '@material-ui/core/Avatar'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; -import React from 'react'; import { AuthoredFragment } from './fragments.generated'; diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx index bdb36873875708dae45f9f2bbbb385554a0127c1..70ee1bc03eca2182b87e9fdd186f7f80a7b418bf 100644 --- a/webui/src/components/Content/ImageTag.tsx +++ b/webui/src/components/Content/ImageTag.tsx @@ -1,6 +1,7 @@ -import { makeStyles } from '@material-ui/styles'; import React from 'react'; +import { makeStyles } from '@material-ui/styles'; + const useStyles = makeStyles({ tag: { maxWidth: '100%', diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx index d3b4c27339aa4dc0f38bb44b7fb3a499cc7aa600..5256ab12ec8abacd56dded3153569d5136f6dac0 100644 --- a/webui/src/components/Content/PreTag.tsx +++ b/webui/src/components/Content/PreTag.tsx @@ -1,6 +1,7 @@ -import { makeStyles } from '@material-ui/styles'; import React from 'react'; +import { makeStyles } from '@material-ui/styles'; + const useStyles = makeStyles({ tag: { maxWidth: '100%', diff --git a/webui/src/components/Date.tsx b/webui/src/components/Date.tsx index a830546cd08358c0b0dcc3a59f24a677433e24a2..be0f5835cd4d9adbb879c9a4a2d214d6c06cd994 100644 --- a/webui/src/components/Date.tsx +++ b/webui/src/components/Date.tsx @@ -1,8 +1,9 @@ -import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import moment from 'moment'; import React from 'react'; import Moment from 'react-moment'; +import Tooltip from '@material-ui/core/Tooltip/Tooltip'; + const HOUR = 1000 * 3600; const DAY = 24 * HOUR; const WEEK = 7 * DAY; diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx index 48c20096be42e7a87925cc430d9fad18c3635cef..1fb8caeaf19584877ed8e5993fd5b69e2a466134 100644 --- a/webui/src/components/Label.tsx +++ b/webui/src/components/Label.tsx @@ -1,13 +1,15 @@ +import React from 'react'; + import { common } from '@material-ui/core/colors'; import { makeStyles } from '@material-ui/core/styles'; import { getContrastRatio, darken, } from '@material-ui/core/styles/colorManipulator'; -import React from 'react'; + +import { Color } from 'src/gqlTypes'; import { LabelFragment } from './fragments.generated'; -import { Color } from '../gqlTypes'; // Minimum contrast between the background and the text color const contrastThreshold = 2.5; diff --git a/webui/src/index.tsx b/webui/src/index.tsx index c64daf0c755b576ac7d43e93e93a64afaa42a364..9bdaddcaeceec8d9e8720881907f6d19f1c8fa4a 100644 --- a/webui/src/index.tsx +++ b/webui/src/index.tsx @@ -1,36 +1,19 @@ -import { createMuiTheme } from '@material-ui/core/styles'; -import ThemeProvider from '@material-ui/styles/ThemeProvider'; -import ApolloClient from 'apollo-boost'; -import { - IntrospectionFragmentMatcher, - InMemoryCache, -} from 'apollo-cache-inmemory'; import React from 'react'; import { ApolloProvider } from 'react-apollo'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; -import App from './App'; -import introspectionQueryResultData from './fragmentTypes'; - -const theme = createMuiTheme(); +import ThemeProvider from '@material-ui/styles/ThemeProvider'; -const client = new ApolloClient({ - uri: '/graphql', - cache: new InMemoryCache({ - fragmentMatcher: new IntrospectionFragmentMatcher({ - introspectionQueryResultData, - }), - }), -}); +import App from './App'; +import apolloClient from './apollo'; +import theme from './theme'; ReactDOM.render( - + - - - + , diff --git a/webui/src/CurrentIdentity.graphql b/webui/src/layout/CurrentIdentity.graphql similarity index 100% rename from webui/src/CurrentIdentity.graphql rename to webui/src/layout/CurrentIdentity.graphql diff --git a/webui/src/CurrentIdentity.tsx b/webui/src/layout/CurrentIdentity.tsx similarity index 99% rename from webui/src/CurrentIdentity.tsx rename to webui/src/layout/CurrentIdentity.tsx index 256f44c476214f120fd2ffc7e80522670119d35d..21f489ef73289010650bac69e1c99bbfce9e2c87 100644 --- a/webui/src/CurrentIdentity.tsx +++ b/webui/src/layout/CurrentIdentity.tsx @@ -1,6 +1,7 @@ +import React from 'react'; + import Avatar from '@material-ui/core/Avatar'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; import { useCurrentIdentityQuery } from './CurrentIdentity.generated'; diff --git a/webui/src/layout/Header.tsx b/webui/src/layout/Header.tsx new file mode 100644 index 0000000000000000000000000000000000000000..317d3e234cf27391fc1066b9572764ffae19c5ab --- /dev/null +++ b/webui/src/layout/Header.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import { makeStyles } from '@material-ui/core/styles'; + +import CurrentIdentity from './CurrentIdentity'; + +const useStyles = makeStyles(theme => ({ + offset: { + ...theme.mixins.toolbar, + }, + filler: { + flexGrow: 1, + }, + appTitle: { + ...theme.typography.h6, + color: 'white', + textDecoration: 'none', + display: 'flex', + alignItems: 'center', + }, + logo: { + height: '42px', + marginRight: theme.spacing(2), + }, +})); + +function Header() { + const classes = useStyles(); + + return ( + <> + + + + git-bug + git-bug + +
+ + + +
+ + ); +} + +export default Header; diff --git a/webui/src/layout/index.tsx b/webui/src/layout/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..42a0cfc1bc494d7bc08959cdfe659bc76a1c8423 --- /dev/null +++ b/webui/src/layout/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import CssBaseline from '@material-ui/core/CssBaseline'; + +import Header from './Header'; + +type Props = { children: React.ReactNode }; +function Layout({ children }: Props) { + return ( + <> + +
+ {children} + + ); +} + +export default Layout; diff --git a/webui/src/bug/Bug.graphql b/webui/src/pages/bug/Bug.graphql similarity index 100% rename from webui/src/bug/Bug.graphql rename to webui/src/pages/bug/Bug.graphql diff --git a/webui/src/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx similarity index 94% rename from webui/src/bug/Bug.tsx rename to webui/src/pages/bug/Bug.tsx index 0e53e4478e7f67bce714a0ea930b758dd740e688..998c952857ad36fca40832000f2c639533bc2256 100644 --- a/webui/src/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -1,10 +1,11 @@ +import React from 'react'; + import Typography from '@material-ui/core/Typography/Typography'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; -import Author from '../components/Author'; -import Date from '../components/Date'; -import Label from '../components/Label'; +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; +import Label from 'src/components/Label'; import { BugFragment } from './Bug.generated'; import CommentForm from './CommentForm'; diff --git a/webui/src/bug/BugQuery.graphql b/webui/src/pages/bug/BugQuery.graphql similarity index 100% rename from webui/src/bug/BugQuery.graphql rename to webui/src/pages/bug/BugQuery.graphql diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx similarity index 99% rename from webui/src/bug/BugQuery.tsx rename to webui/src/pages/bug/BugQuery.tsx index 2ecf718ce9510ba300a0baa3eb097449ce1fe474..2a70a2f84f676f29c72837a028cc96f5c9e117b6 100644 --- a/webui/src/bug/BugQuery.tsx +++ b/webui/src/pages/bug/BugQuery.tsx @@ -1,7 +1,8 @@ -import CircularProgress from '@material-ui/core/CircularProgress'; import React from 'react'; import { RouteComponentProps } from 'react-router-dom'; +import CircularProgress from '@material-ui/core/CircularProgress'; + import Bug from './Bug'; import { useGetBugQuery } from './BugQuery.generated'; diff --git a/webui/src/bug/CommentForm.graphql b/webui/src/pages/bug/CommentForm.graphql similarity index 100% rename from webui/src/bug/CommentForm.graphql rename to webui/src/pages/bug/CommentForm.graphql diff --git a/webui/src/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx similarity index 98% rename from webui/src/bug/CommentForm.tsx rename to webui/src/pages/bug/CommentForm.tsx index a915ecf0fe4cb7faac1f398dc924506bf0f46115..3724baf096b59a8d6e4b9c927d90960e13137229 100644 --- a/webui/src/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -1,12 +1,13 @@ +import React, { useState, useRef } from 'react'; + import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; import Tab from '@material-ui/core/Tab'; import Tabs from '@material-ui/core/Tabs'; import TextField from '@material-ui/core/TextField'; import { makeStyles, Theme } from '@material-ui/core/styles'; -import React, { useState, useRef } from 'react'; -import Content from '../components/Content'; +import Content from 'src/components/Content'; import { useAddCommentMutation } from './CommentForm.generated'; import { TimelineDocument } from './TimelineQuery.generated'; diff --git a/webui/src/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx similarity index 89% rename from webui/src/bug/LabelChange.tsx rename to webui/src/pages/bug/LabelChange.tsx index a3950524e084fff3013ca9a7c19b23d8ea8a0e69..764947eef7527e8fd617d92759a78920f505bfdb 100644 --- a/webui/src/bug/LabelChange.tsx +++ b/webui/src/pages/bug/LabelChange.tsx @@ -1,9 +1,10 @@ -import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../components/Author'; -import Date from '../components/Date'; -import Label from '../components/Label'; +import { makeStyles } from '@material-ui/core/styles'; + +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; +import Label from 'src/components/Label'; import { LabelChangeFragment } from './LabelChangeFragment.generated'; diff --git a/webui/src/bug/LabelChangeFragment.graphql b/webui/src/pages/bug/LabelChangeFragment.graphql similarity index 74% rename from webui/src/bug/LabelChangeFragment.graphql rename to webui/src/pages/bug/LabelChangeFragment.graphql index 01b94a98e05a102b72c798a210632b1eefa73f33..82d41235c335edd5c942aa06dfc54c8f388a0709 100644 --- a/webui/src/bug/LabelChangeFragment.graphql +++ b/webui/src/pages/bug/LabelChangeFragment.graphql @@ -1,4 +1,4 @@ -#import "../components/fragments.graphql" +#import "../../components/fragments.graphql" fragment LabelChange on LabelChangeTimelineItem { date diff --git a/webui/src/bug/Message.tsx b/webui/src/pages/bug/Message.tsx similarity index 92% rename from webui/src/bug/Message.tsx rename to webui/src/pages/bug/Message.tsx index a61ed3f22009a55472f2579d56b33499b4020206..ebb42f6bbd87a98e82b8eb045af0fde793474396 100644 --- a/webui/src/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -1,10 +1,11 @@ +import React from 'react'; + import Paper from '@material-ui/core/Paper'; import { makeStyles } from '@material-ui/core/styles'; -import React from 'react'; -import Author, { Avatar } from '../components/Author'; -import Date from '../components/Date'; -import Content from '../components/Content'; +import Author, { Avatar } from 'src/components/Author'; +import Content from 'src/components/Content'; +import Date from 'src/components/Date'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; diff --git a/webui/src/bug/MessageCommentFragment.graphql b/webui/src/pages/bug/MessageCommentFragment.graphql similarity index 68% rename from webui/src/bug/MessageCommentFragment.graphql rename to webui/src/pages/bug/MessageCommentFragment.graphql index 61156feee3f5f1a0e705a5e91226658bef32a5ec..00f8342d749d97256fa9d6624e1dfe3ab582f711 100644 --- a/webui/src/bug/MessageCommentFragment.graphql +++ b/webui/src/pages/bug/MessageCommentFragment.graphql @@ -1,4 +1,4 @@ -#import "../components/fragments.graphql" +#import "../../components/fragments.graphql" fragment AddComment on AddCommentTimelineItem { createdAt diff --git a/webui/src/bug/MessageCreateFragment.graphql b/webui/src/pages/bug/MessageCreateFragment.graphql similarity index 66% rename from webui/src/bug/MessageCreateFragment.graphql rename to webui/src/pages/bug/MessageCreateFragment.graphql index e371b9dc43a2f1d9d7363c2d5e4700e314b4c10a..4cae819db1a0131edafed4a9e7b95b3e2acfbe96 100644 --- a/webui/src/bug/MessageCreateFragment.graphql +++ b/webui/src/pages/bug/MessageCreateFragment.graphql @@ -1,4 +1,4 @@ -#import "../components/fragments.graphql" +#import "../../components/fragments.graphql" fragment Create on CreateTimelineItem { createdAt diff --git a/webui/src/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx similarity index 87% rename from webui/src/bug/SetStatus.tsx rename to webui/src/pages/bug/SetStatus.tsx index 86105c8a943192317e9a50bb743ccd6920721c07..251abf69da4ca07e077140a365537d27a0f8bbd9 100644 --- a/webui/src/bug/SetStatus.tsx +++ b/webui/src/pages/bug/SetStatus.tsx @@ -1,8 +1,9 @@ -import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../components/Author'; -import Date from '../components/Date'; +import { makeStyles } from '@material-ui/core/styles'; + +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; import { SetStatusFragment } from './SetStatusFragment.generated'; diff --git a/webui/src/bug/SetStatusFragment.graphql b/webui/src/pages/bug/SetStatusFragment.graphql similarity index 63% rename from webui/src/bug/SetStatusFragment.graphql rename to webui/src/pages/bug/SetStatusFragment.graphql index 5a3986d09917bb9fb5410ac2c0c5b84d4694bf6f..d83804097b586790dacdde0e2b0475b34b69210b 100644 --- a/webui/src/bug/SetStatusFragment.graphql +++ b/webui/src/pages/bug/SetStatusFragment.graphql @@ -1,4 +1,4 @@ -#import "../components/fragments.graphql" +#import "../../components/fragments.graphql" fragment SetStatus on SetStatusTimelineItem { date diff --git a/webui/src/bug/SetTitle.tsx b/webui/src/pages/bug/SetTitle.tsx similarity index 90% rename from webui/src/bug/SetTitle.tsx rename to webui/src/pages/bug/SetTitle.tsx index e57aaafb13d9ef32b31b4bc9aa773c52a1388f89..304fd2e25eaebd4b209e2915a49c524d3f7a5e16 100644 --- a/webui/src/bug/SetTitle.tsx +++ b/webui/src/pages/bug/SetTitle.tsx @@ -1,8 +1,9 @@ -import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Author from '../components/Author'; -import Date from '../components/Date'; +import { makeStyles } from '@material-ui/core/styles'; + +import Author from 'src/components/Author'; +import Date from 'src/components/Date'; import { SetTitleFragment } from './SetTitleFragment.generated'; diff --git a/webui/src/bug/SetTitleFragment.graphql b/webui/src/pages/bug/SetTitleFragment.graphql similarity index 64% rename from webui/src/bug/SetTitleFragment.graphql rename to webui/src/pages/bug/SetTitleFragment.graphql index 22d2185c0b53e9742e1966f22241cc809c7c5ab7..2225dfd376cd2be1d5746349ac84210a548968cb 100644 --- a/webui/src/bug/SetTitleFragment.graphql +++ b/webui/src/pages/bug/SetTitleFragment.graphql @@ -1,4 +1,4 @@ -#import "../components/fragments.graphql" +#import "../../components/fragments.graphql" fragment SetTitle on SetTitleTimelineItem { date diff --git a/webui/src/bug/Timeline.tsx b/webui/src/pages/bug/Timeline.tsx similarity index 99% rename from webui/src/bug/Timeline.tsx rename to webui/src/pages/bug/Timeline.tsx index ba0f9fc7e3f6d506613bd8c0280624f78009047c..73c88cdfdb8bb44281f01f0d92de3cca66c65be0 100644 --- a/webui/src/bug/Timeline.tsx +++ b/webui/src/pages/bug/Timeline.tsx @@ -1,6 +1,7 @@ -import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; + import LabelChange from './LabelChange'; import Message from './Message'; import SetStatus from './SetStatus'; diff --git a/webui/src/bug/TimelineQuery.graphql b/webui/src/pages/bug/TimelineQuery.graphql similarity index 100% rename from webui/src/bug/TimelineQuery.graphql rename to webui/src/pages/bug/TimelineQuery.graphql diff --git a/webui/src/bug/TimelineQuery.tsx b/webui/src/pages/bug/TimelineQuery.tsx similarity index 99% rename from webui/src/bug/TimelineQuery.tsx rename to webui/src/pages/bug/TimelineQuery.tsx index 9c4cf183c508be5ef0df61eb3d420463efde55d7..74eed52b213d12c7166515f2b6b7408a0fdaff8b 100644 --- a/webui/src/bug/TimelineQuery.tsx +++ b/webui/src/pages/bug/TimelineQuery.tsx @@ -1,6 +1,7 @@ -import CircularProgress from '@material-ui/core/CircularProgress'; import React from 'react'; +import CircularProgress from '@material-ui/core/CircularProgress'; + import Timeline from './Timeline'; import { useTimelineQuery } from './TimelineQuery.generated'; diff --git a/webui/src/pages/bug/index.tsx b/webui/src/pages/bug/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..a3bbcea4f6408182e2822ac8693fcb8ee55f7ad3 --- /dev/null +++ b/webui/src/pages/bug/index.tsx @@ -0,0 +1 @@ +export { default } from './BugQuery'; diff --git a/webui/src/list/BugRow.graphql b/webui/src/pages/list/BugRow.graphql similarity index 71% rename from webui/src/list/BugRow.graphql rename to webui/src/pages/list/BugRow.graphql index c2966f1087aade4088a4a9c28be9e1098553f40e..547c09d8ef8cf91c966f50788eab8a075ea906ed 100644 --- a/webui/src/list/BugRow.graphql +++ b/webui/src/pages/list/BugRow.graphql @@ -1,4 +1,4 @@ -#import "../components/fragments.graphql" +#import "../../components/fragments.graphql" fragment BugRow on Bug { id diff --git a/webui/src/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx similarity index 95% rename from webui/src/list/BugRow.tsx rename to webui/src/pages/list/BugRow.tsx index 181aec2e90ac0ac6833db5ecc6bd0a4541024d6a..829877ef44bbb5fd736c5f08ef88248437a29ada 100644 --- a/webui/src/list/BugRow.tsx +++ b/webui/src/pages/list/BugRow.tsx @@ -1,15 +1,16 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + import TableCell from '@material-ui/core/TableCell/TableCell'; import TableRow from '@material-ui/core/TableRow/TableRow'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import { makeStyles } from '@material-ui/core/styles'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; -import React from 'react'; -import { Link } from 'react-router-dom'; -import Date from '../components/Date'; -import Label from '../components/Label'; -import { Status } from '../gqlTypes'; +import Date from 'src/components/Date'; +import Label from 'src/components/Label'; +import { Status } from 'src/gqlTypes'; import { BugRowFragment } from './BugRow.generated'; diff --git a/webui/src/list/Filter.tsx b/webui/src/pages/list/Filter.tsx similarity index 99% rename from webui/src/list/Filter.tsx rename to webui/src/pages/list/Filter.tsx index 30b52de83e811b6e95dd19c4992d9c4426e26093..1a3cdd6bff16271de83243c2d51ff3b767a23fab 100644 --- a/webui/src/list/Filter.tsx +++ b/webui/src/pages/list/Filter.tsx @@ -1,12 +1,13 @@ +import clsx from 'clsx'; +import { LocationDescriptor } from 'history'; +import React, { useState, useRef } 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 ArrowDropDown from '@material-ui/icons/ArrowDropDown'; -import clsx from 'clsx'; -import { LocationDescriptor } from 'history'; -import React, { useState, useRef } from 'react'; -import { Link } from 'react-router-dom'; export type Query = { [key: string]: Array }; diff --git a/webui/src/list/FilterToolbar.graphql b/webui/src/pages/list/FilterToolbar.graphql similarity index 100% rename from webui/src/list/FilterToolbar.graphql rename to webui/src/pages/list/FilterToolbar.graphql diff --git a/webui/src/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx similarity index 99% rename from webui/src/list/FilterToolbar.tsx rename to webui/src/pages/list/FilterToolbar.tsx index b95b10bc6e16b1dec8e81dbb073ed70dec70590c..825a9dee455f0cee6a49d8f1df0fd7c92ef77a06 100644 --- a/webui/src/list/FilterToolbar.tsx +++ b/webui/src/pages/list/FilterToolbar.tsx @@ -1,10 +1,11 @@ import { pipe } from '@arrows/composition'; +import { LocationDescriptor } from 'history'; +import React from 'react'; + import Toolbar from '@material-ui/core/Toolbar'; import { makeStyles } from '@material-ui/core/styles'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; -import { LocationDescriptor } from 'history'; -import React from 'react'; import { FilterDropdown, diff --git a/webui/src/list/List.tsx b/webui/src/pages/list/List.tsx similarity index 99% rename from webui/src/list/List.tsx rename to webui/src/pages/list/List.tsx index cebd13f288a7bc619588d249a8f604c8ce0eb454..c1cae1221ac8b5c6722003e626d2900fafe85c98 100644 --- a/webui/src/list/List.tsx +++ b/webui/src/pages/list/List.tsx @@ -1,6 +1,7 @@ +import React from 'react'; + import Table from '@material-ui/core/Table/Table'; import TableBody from '@material-ui/core/TableBody/TableBody'; -import React from 'react'; import BugRow from './BugRow'; import { BugListFragment } from './ListQuery.generated'; diff --git a/webui/src/list/ListQuery.graphql b/webui/src/pages/list/ListQuery.graphql similarity index 100% rename from webui/src/list/ListQuery.graphql rename to webui/src/pages/list/ListQuery.graphql diff --git a/webui/src/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx similarity index 99% rename from webui/src/list/ListQuery.tsx rename to webui/src/pages/list/ListQuery.tsx index 84b724317a66646abc052a55c94be243bc45a7ea..6858b6c6afdd2cffb15fa45957bfdf9f1287c3ca 100644 --- a/webui/src/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -1,3 +1,7 @@ +import { ApolloError } from 'apollo-boost'; +import React, { useState, useEffect, useRef } from 'react'; +import { useLocation, useHistory, Link } from 'react-router-dom'; + import IconButton from '@material-ui/core/IconButton'; import InputBase from '@material-ui/core/InputBase'; import Paper from '@material-ui/core/Paper'; @@ -6,9 +10,6 @@ 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 { ApolloError } from 'apollo-boost'; -import React, { useState, useEffect, useRef } from 'react'; -import { useLocation, useHistory, Link } from 'react-router-dom'; import FilterToolbar from './FilterToolbar'; import List from './List'; diff --git a/webui/src/pages/list/index.ts b/webui/src/pages/list/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8a91ce70c6fd4c1548dac249e96943ba45b00230 --- /dev/null +++ b/webui/src/pages/list/index.ts @@ -0,0 +1 @@ +export { default } from './ListQuery'; diff --git a/webui/src/theme.ts b/webui/src/theme.ts new file mode 100644 index 0000000000000000000000000000000000000000..d41cd731d7e4de4f89536a335e182bebbe52c70e --- /dev/null +++ b/webui/src/theme.ts @@ -0,0 +1,11 @@ +import { createMuiTheme } from '@material-ui/core/styles'; + +const theme = createMuiTheme({ + palette: { + primary: { + main: '#263238', + }, + }, +}); + +export default theme; diff --git a/webui/tsconfig.json b/webui/tsconfig.json index 30ba544ba3d13853bfa0729b345acfa5b6b09d89..4e83eef30419aa46ec2625d7137a831298b387aa 100644 --- a/webui/tsconfig.json +++ b/webui/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -14,7 +18,13 @@ "isolatedModules": true, "noEmit": true, "jsx": "react", - "typeRoots": ["node_modules/@types/", "types/"] + "typeRoots": [ + "node_modules/@types/", + "types/" + ], + "baseUrl": "." }, - "include": ["src"] + "include": [ + "src" + ] } From d052ecf67105b5a65511a335e4c3112c74a662a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Sun, 16 Feb 2020 01:35:13 +0100 Subject: [PATCH 04/12] webui: in the bug list, toggle open and close when clicking --- webui/src/pages/list/Filter.tsx | 2 +- webui/src/pages/list/FilterToolbar.tsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx index 1a3cdd6bff16271de83243c2d51ff3b767a23fab..0635e7f053b427dcd618071e600259d4fe440837 100644 --- a/webui/src/pages/list/Filter.tsx +++ b/webui/src/pages/list/Filter.tsx @@ -154,7 +154,7 @@ function FilterDropdown({ export type FilterProps = { active: boolean; - to: LocationDescriptor; + to: LocationDescriptor; // the target on click icon?: React.ComponentType; children: React.ReactNode; }; diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index 825a9dee455f0cee6a49d8f1df0fd7c92ef77a06..c568a9dd31d7a388c13c06fda2c16b051d727d38 100644 --- a/webui/src/pages/list/FilterToolbar.tsx +++ b/webui/src/pages/list/FilterToolbar.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({ // This prepends the filter text with a count type CountingFilterProps = { - query: string; + query: string; // the query used as a source to count the number of element children: React.ReactNode; } & FilterProps; function CountingFilter({ query, children, ...props }: CountingFilterProps) { @@ -72,6 +72,12 @@ function FilterToolbar({ query, queryLocation }: Props) { ...params, [key]: [value], }); + const toggleParam = (key: string, value: string) => ( + params: Query + ): Query => ({ + ...params, + [key]: params[key] && params[key].includes(value) ? [] : [value], + }); const clearParam = (key: string) => (params: Query): Query => ({ ...params, [key]: [], @@ -87,7 +93,7 @@ function FilterToolbar({ query, queryLocation }: Props) { clearParam('sort'), stringify )(params)} - to={pipe(replaceParam('status', 'open'), loc)(params)} + to={pipe(toggleParam('status', 'open'), loc)(params)} icon={ErrorOutline} > open @@ -99,7 +105,7 @@ function FilterToolbar({ query, queryLocation }: Props) { clearParam('sort'), stringify )(params)} - to={pipe(replaceParam('status', 'closed'), loc)(params)} + to={pipe(toggleParam('status', 'closed'), loc)(params)} icon={CheckCircleOutline} > closed From c4f5cae4a44330ae0a8fb063768c4181fd0e83c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Sun, 16 Feb 2020 01:35:51 +0100 Subject: [PATCH 05/12] webui: list by default only open bugs --- webui/src/pages/list/ListQuery.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 6858b6c6afdd2cffb15fa45957bfdf9f1287c3ca..8cf68693cb3aaf2292e763b6b4674b87b997286c 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -164,7 +164,7 @@ function ListQuery() { const location = useLocation(); const history = useHistory(); const params = new URLSearchParams(location.search); - const query = params.get('q') || ''; + const query = params.get('q') || 'status:open'; const [input, setInput] = useState(query); From 602f91148b853b781d38506cbaadce011972da1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Sun, 16 Feb 2020 01:43:33 +0100 Subject: [PATCH 06/12] webui: fix missing space in the bug preview --- webui/src/pages/list/BugRow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx index 829877ef44bbb5fd736c5f08ef88248437a29ada..9c1883a387b9507cb722d334944ccadf083cd97f 100644 --- a/webui/src/pages/list/BugRow.tsx +++ b/webui/src/pages/list/BugRow.tsx @@ -100,9 +100,9 @@ function BugRow({ bug }: Props) {
- {bug.humanId} opened + {bug.humanId} opened  - by {bug.author.displayName} +  by {bug.author.displayName}
From e408ca8a2851d44ae105bf4e226b05eff609950e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Sun, 16 Feb 2020 02:04:57 +0100 Subject: [PATCH 07/12] webui: minor styling of the timeline events --- webui/src/pages/bug/LabelChange.tsx | 2 +- webui/src/pages/bug/SetStatus.tsx | 2 +- webui/src/pages/bug/SetTitle.tsx | 17 ++++++++++++----- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx index 764947eef7527e8fd617d92759a78920f505bfdb..93fa8a32eb9b1c491d171b4b53279b3999f5ddbf 100644 --- a/webui/src/pages/bug/LabelChange.tsx +++ b/webui/src/pages/bug/LabelChange.tsx @@ -10,7 +10,7 @@ import { LabelChangeFragment } from './LabelChangeFragment.generated'; const useStyles = makeStyles(theme => ({ main: { - ...theme.typography.body1, + ...theme.typography.body2, marginLeft: theme.spacing(1) + 40, }, author: { diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx index 251abf69da4ca07e077140a365537d27a0f8bbd9..413f764de37781275259ac7d0242502e3391c41c 100644 --- a/webui/src/pages/bug/SetStatus.tsx +++ b/webui/src/pages/bug/SetStatus.tsx @@ -9,7 +9,7 @@ import { SetStatusFragment } from './SetStatusFragment.generated'; const useStyles = makeStyles(theme => ({ main: { - ...theme.typography.body1, + ...theme.typography.body2, marginLeft: theme.spacing(1) + 40, }, })); diff --git a/webui/src/pages/bug/SetTitle.tsx b/webui/src/pages/bug/SetTitle.tsx index 304fd2e25eaebd4b209e2915a49c524d3f7a5e16..64b97517bd4efae36e9e73c53d0ed70a3fd42711 100644 --- a/webui/src/pages/bug/SetTitle.tsx +++ b/webui/src/pages/bug/SetTitle.tsx @@ -9,10 +9,17 @@ import { SetTitleFragment } from './SetTitleFragment.generated'; const useStyles = makeStyles(theme => ({ main: { - ...theme.typography.body1, + ...theme.typography.body2, marginLeft: theme.spacing(1) + 40, }, - bold: { + author: { + fontWeight: 'bold', + }, + before: { + fontWeight: 'bold', + textDecoration: 'line-through', + }, + after: { fontWeight: 'bold', }, })); @@ -25,11 +32,11 @@ function SetTitle({ op }: Props) { const classes = useStyles(); return (
- + changed the title from - {op.was} + {op.was} to - {op.title} + {op.title} 
); From 86a35f182975167ffe836f6d5f63260828dbca58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Sun, 16 Feb 2020 02:51:27 +0100 Subject: [PATCH 08/12] webui: more styling on the bug page --- webui/src/pages/bug/Bug.tsx | 21 +++++++++++++++++---- webui/src/pages/bug/Message.tsx | 1 + 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 998c952857ad36fca40832000f2c639533bc2256..3c4bb63b3ccd8441cb03b6bc7ce501eabd1b3c08 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/webui/src/pages/bug/Bug.tsx @@ -13,7 +13,7 @@ import TimelineQuery from './TimelineQuery'; const useStyles = makeStyles(theme => ({ main: { - maxWidth: 800, + maxWidth: 1000, margin: 'auto', marginTop: theme.spacing(4), }, @@ -41,6 +41,9 @@ const useStyles = makeStyles(theme => ({ marginTop: theme.spacing(2), flex: '0 0 200px', }, + sidebarTitle: { + fontWeight: 'bold', + }, labelList: { listStyle: 'none', padding: 0, @@ -53,6 +56,12 @@ const useStyles = makeStyles(theme => ({ display: 'block', }, }, + noLabel: { + ...theme.typography.body2, + }, + commentForm: { + marginLeft: 48, + }, })); type Props = { @@ -77,10 +86,16 @@ function Bug({ bug }: Props) {
+
+ +
- Labels + Labels
    + {bug.labels.length === 0 && ( + None yet + )} {bug.labels.map(l => (
- - ); } diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index ebb42f6bbd87a98e82b8eb045af0fde793474396..4a438b775bf0408a07f6e0ff7a2b789a9c89debd 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -31,6 +31,7 @@ const useStyles = makeStyles(theme => ({ padding: '0.5rem 1rem', borderBottom: '1px solid #ddd', display: 'flex', + backgroundColor: '#e2f1ff', }, title: { flex: 1, From 14e91cb5edb8ab73dbb7c4cf3ae72e41aafdec71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Mon, 17 Feb 2020 00:15:40 +0100 Subject: [PATCH 09/12] webui: fix the default query --- webui/src/pages/list/ListQuery.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 8cf68693cb3aaf2292e763b6b4674b87b997286c..a0db0348d5a62ee9fd9c8a815f67705c61b2bd5d 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -164,7 +164,7 @@ function ListQuery() { const location = useLocation(); const history = useHistory(); const params = new URLSearchParams(location.search); - const query = params.get('q') || 'status:open'; + const query = params.has('q') ? (params.get('q') || '') : 'status:open'; const [input, setInput] = useState(query); From afd22acd5ddb6c92e77b7660ef7ee65f4192d7ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Mon, 17 Feb 2020 00:16:07 +0100 Subject: [PATCH 10/12] webui: more readable dates, also localized --- webui/src/components/Date.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/src/components/Date.tsx b/webui/src/components/Date.tsx index be0f5835cd4d9adbb879c9a4a2d214d6c06cd994..8438b80164ae230d683ffcafef53fc7e76e7442a 100644 --- a/webui/src/components/Date.tsx +++ b/webui/src/components/Date.tsx @@ -10,8 +10,8 @@ const WEEK = 7 * DAY; type Props = { date: string }; const Date = ({ date }: Props) => ( - - + + on ); From 218d460590a29fe84b94c024712a095e5f82f917 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Mon, 17 Feb 2020 13:17:44 +0100 Subject: [PATCH 11/12] webui: style SetStatus --- bridge/github/import.go | 2 +- webui/src/pages/bug/SetStatus.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/bridge/github/import.go b/bridge/github/import.go index ea0ccba32b9dc17fdbc1658c944af3fc2fd73e84..f7840217a2ab205314bfc242280bc97891768cb5 100644 --- a/bridge/github/import.go +++ b/bridge/github/import.go @@ -161,7 +161,7 @@ func (gi *githubImporter) ensureIssue(repo *cache.RepoCache, issue issueTimeline b, _, err = repo.NewBugRaw( author, issue.CreatedAt.Unix(), - issue.Title, + issue.Title, // TODO: this is the *current* title, not the original one cleanText, nil, map[string]string{ diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx index 413f764de37781275259ac7d0242502e3391c41c..56fde6f9f8f512cba07f16e6ad86afc4fe439ab7 100644 --- a/webui/src/pages/bug/SetStatus.tsx +++ b/webui/src/pages/bug/SetStatus.tsx @@ -6,12 +6,16 @@ import Author from 'src/components/Author'; import Date from 'src/components/Date'; import { SetStatusFragment } from './SetStatusFragment.generated'; +import { Status } from '../../gqlTypes' const useStyles = makeStyles(theme => ({ main: { ...theme.typography.body2, marginLeft: theme.spacing(1) + 40, }, + author: { + fontWeight: 'bold', + }, })); type Props = { @@ -20,10 +24,12 @@ type Props = { function SetStatus({ op }: Props) { const classes = useStyles(); + const status = { [Status.Open]: 'reopened', [Status.Closed]: 'closed' }[op.status] + return (
- - {op.status.toLowerCase()} this + + {status} this
); From f96484391ae817a18f503b5c31cd3bd2211553df Mon Sep 17 00:00:00 2001 From: ludovicm67 Date: Sat, 22 Feb 2020 19:25:37 +0100 Subject: [PATCH 12/12] webui: run linter fix --- webui/src/components/Date.tsx | 4 +++- webui/src/pages/bug/SetStatus.tsx | 6 ++++-- webui/src/pages/list/ListQuery.tsx | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/webui/src/components/Date.tsx b/webui/src/components/Date.tsx index 8438b80164ae230d683ffcafef53fc7e76e7442a..146a349670c3dca884409c804dc49a1adb8b5cde 100644 --- a/webui/src/components/Date.tsx +++ b/webui/src/components/Date.tsx @@ -11,7 +11,9 @@ const WEEK = 7 * DAY; type Props = { date: string }; const Date = ({ date }: Props) => ( - on + + on + ); diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx index 56fde6f9f8f512cba07f16e6ad86afc4fe439ab7..e9674424d25dc0eb44d5a3dde1bbb198aa6f57f4 100644 --- a/webui/src/pages/bug/SetStatus.tsx +++ b/webui/src/pages/bug/SetStatus.tsx @@ -2,11 +2,11 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import { Status } from '../../gqlTypes'; import Author from 'src/components/Author'; import Date from 'src/components/Date'; import { SetStatusFragment } from './SetStatusFragment.generated'; -import { Status } from '../../gqlTypes' const useStyles = makeStyles(theme => ({ main: { @@ -24,7 +24,9 @@ type Props = { function SetStatus({ op }: Props) { const classes = useStyles(); - const status = { [Status.Open]: 'reopened', [Status.Closed]: 'closed' }[op.status] + const status = { [Status.Open]: 'reopened', [Status.Closed]: 'closed' }[ + op.status + ]; return (
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index a0db0348d5a62ee9fd9c8a815f67705c61b2bd5d..2d8c698a59a9ca34719f6246b371b199761bc707 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -164,7 +164,7 @@ function ListQuery() { const location = useLocation(); const history = useHistory(); const params = new URLSearchParams(location.search); - const query = params.has('q') ? (params.get('q') || '') : 'status:open'; + const query = params.has('q') ? params.get('q') || '' : 'status:open'; const [input, setInput] = useState(query);