Commit for #539

- validating to avoid empty comments
- comment button now is green

3 files changed, 29 insertions, 164 deletions

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, StyleProps>((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<HTMLDivElement>;
-function TabPanel({ children, value, index, ...props }: TabPanelProps) {
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`editor-tabpanel-${index}`}
-      aria-labelledby={`editor-tab-${index}`}
-      {...props}
-    >
-      {value === index && children}
-    </div>
-  );
-}
-
-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<string>('');
-  const [tab, setTab] = useState(0);
+  const [issueComment, setIssueComment] = useState('');
+  const [inputProp, setInputProp] = useState<any>('');
   const classes = useStyles({ loading });
   const form = useRef<HTMLFormElement>(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<HTMLFormElement>) => {
     e.preventDefault();
-    submit();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-    // Submit on cmd/ctrl+enter
-    if ((e.metaKey || e.altKey) && e.keyCode === 13) {
-      submit();
-    }
+    if (issueComment.length > 0) submit();
   };
 
   return (
     <Paper className={classes.container}>
       <form onSubmit={handleSubmit} ref={form}>
-        <Tabs value={tab} onChange={(_, t) => setTab(t)}>
-          <Tab label="Write" {...a11yProps(0)} />
-          <Tab label="Preview" {...a11yProps(1)} />
-        </Tabs>
-        <div className={classes.tabContent}>
-          <TabPanel value={tab} index={0}>
-            <TextField
-              onKeyDown={handleKeyDown}
-              fullWidth
-              label="Comment"
-              placeholder="Leave a comment"
-              className={classes.textarea}
-              multiline
-              value={input}
-              variant="filled"
-              rows="4" // TODO: rowsMin support
-              onChange={(e: any) => setInput(e.target.value)}
-              disabled={loading}
-            />
-          </TabPanel>
-          <TabPanel value={tab} index={1} className={classes.preview}>
-            <Content markdown={input} />
-          </TabPanel>
-        </div>
+        <CommentInput
+          inputProps={inputProp}
+          loading={loading}
+          onChange={(comment: string) => setIssueComment(comment)}
+        />
         <div className={classes.actions}>
           <Button
+            className={classes.greenButton}
             variant="contained"
             color="primary"
             type="submit"
-            disabled={loading}
+            disabled={loading || issueComment.length === 0}
           >
             Comment
           </Button>
diff --git a/webui/src/pages/bug/CommentInput.tsx b/webui/src/pages/bug/CommentInput.tsx
deleted file mode 100644
index 540a53f7..00000000
--- a/webui/src/pages/bug/CommentInput.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
-
-import Content from 'src/components/Content';
-
-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<HTMLDivElement>;
-function TabPanel({ children, value, index, ...props }: TabPanelProps) {
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`editor-tabpanel-${index}`}
-      aria-labelledby={`editor-tab-${index}`}
-      {...props}
-    >
-      {value === index && children}
-    </div>
-  );
-}
-
-const a11yProps = (index: number) => ({
-  id: `editor-tab-${index}`,
-  'aria-controls': `editor-tabpanel-${index}`,
-});
-
-type Props = {
-  loading: boolean;
-  onChange: (comment: string) => void;
-};
-
-function CommentInput({ loading, onChange }: Props) {
-  const [input, setInput] = useState<string>('');
-  const [tab, setTab] = useState(0);
-  const classes = useStyles();
-
-  useEffect(() => {
-    onChange(input);
-  }, [input, onChange]);
-
-  return (
-    <div>
-      <Tabs value={tab} onChange={(_, t) => setTab(t)}>
-        <Tab label="Write" {...a11yProps(0)} />
-        <Tab label="Preview" {...a11yProps(1)} />
-      </Tabs>
-      <div className={classes.tabContent}>
-        <TabPanel value={tab} index={0}>
-          <TextField
-            fullWidth
-            label="Comment"
-            placeholder="Leave a comment"
-            className={classes.textarea}
-            multiline
-            value={input}
-            variant="filled"
-            rows="4" // TODO: rowsMin support
-            onChange={(e: any) => setInput(e.target.value)}
-            disabled={loading}
-          />
-        </TabPanel>
-        <TabPanel value={tab} index={1} className={classes.preview}>
-          <Content markdown={input} />
-        </TabPanel>
-      </div>
-    </div>
-  );
-}
-
-export default CommentInput;
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() {
         />
         <div className={classes.actions}>
           <Button
-            className={classes.gitbugButton}
+            className={classes.greenButton}
             variant="contained"
             type="submit"
             disabled={isFormValid() ? false : true}