Merge pull request #540 from claudioantonio/webui_539

Commit for #539

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<string>('');
   const [tab, setTab] = useState(0);
   const classes = useStyles();
 
+  useEffect(() => {
+    if (inputProps) setInput(inputProps.value);
+  }, [inputProps]);
+
   useEffect(() => {
     onChange(input);
   }, [input, onChange]);

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}
+        <CommentInput
+          inputProps={inputProp}
+          loading={loading}
+          onChange={(comment: string) => setIssueComment(comment)}
         />
-          </TabPanel>
-          <TabPanel value={tab} index={1} className={classes.preview}>
-            <Content markdown={input} />
-          </TabPanel>
-        </div>
         <div className={classes.actions}>
           <Button
+            className={classes.greenButton}
             variant="contained"
             color="primary"
             type="submit"
-            disabled={loading}
+            disabled={loading || issueComment.length === 0}
           >
             Comment
           </Button>

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}