diff --git a/webui/src/pages/bug/CommentInput.tsx b/webui/src/layout/CommentInput/CommentInput.tsx similarity index 85% rename from webui/src/pages/bug/CommentInput.tsx rename to webui/src/layout/CommentInput/CommentInput.tsx index 540a53f7..8a91baf6 100644 --- a/webui/src/pages/bug/CommentInput.tsx +++ b/webui/src/layout/CommentInput/CommentInput.tsx @@ -7,6 +7,9 @@ import { makeStyles } from '@material-ui/core/styles'; import Content from 'src/components/Content'; +/** + * Styles + */ const useStyles = makeStyles((theme) => ({ container: { margin: theme.spacing(2, 0), @@ -51,15 +54,27 @@ const a11yProps = (index: number) => ({ }); type Props = { + inputProps?: any; loading: boolean; onChange: (comment: string) => void; }; -function CommentInput({ loading, onChange }: Props) { +/** + * Component for issue comment input + * + * @param inputProps Reset input value + * @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(''); const [tab, setTab] = useState(0); const classes = useStyles(); + useEffect(() => { + if (inputProps) setInput(inputProps.value); + }, [inputProps]); + useEffect(() => { onChange(input); }, [input, onChange]); diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index f2a2eb6c..c39f30c2 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -2,12 +2,9 @@ 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 Content from 'src/components/Content'; +import CommentInput from '../../layout/CommentInput/CommentInput'; import { useAddCommentMutation } from './CommentForm.generated'; import { TimelineDocument } from './TimelineQuery.generated'; @@ -30,40 +27,23 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', justifyContent: 'flex-end', }, + greenButton: { + backgroundColor: '#2ea44fd9', + color: '#fff', + '&:hover': { + backgroundColor: '#2ea44f', + }, + }, })); -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 [issueComment, setIssueComment] = useState(''); + const [inputProp, setInputProp] = useState(''); const classes = useStyles({ loading }); const form = useRef(null); @@ -72,7 +52,7 @@ function CommentForm({ bugId }: Props) { variables: { input: { prefix: bugId, - message: input, + message: issueComment, }, }, refetchQueries: [ @@ -86,54 +66,35 @@ function CommentForm({ bugId }: Props) { }, ], awaitRefetchQueries: true, - }).then(() => setInput('')); + }).then(() => resetForm()); }; + function resetForm() { + setInputProp({ + value: '', + }); + } + 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(); - } + if (issueComment.length > 0) submit(); }; return (
- setTab(t)}> - - - -
- - setInput(e.target.value)} - disabled={loading} - /> - - - - -
+ setIssueComment(comment)} + />
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index c8e68e7b..8e06706f 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper'; import TextField from '@material-ui/core/TextField/TextField'; import { fade, makeStyles, Theme } from '@material-ui/core/styles'; -import CommentInput from '../bug/CommentInput'; +import CommentInput from '../../layout/CommentInput/CommentInput'; import { useNewBugMutation } from './NewBug.generated'; @@ -42,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) => ({ display: 'flex', justifyContent: 'flex-end', }, - gitbugButton: { + greenButton: { backgroundColor: '#2ea44fd9', color: '#fff', '&:hover': { @@ -105,7 +105,7 @@ function NewBugPage() { />