From 25a1f4df558c042af5129fc5d0f30a491e8b8da9 Mon Sep 17 00:00:00 2001
From: Cláudio <claudio.engdist@gmail.com>
Date: Tue, 2 Feb 2021 09:00:01 -0300
Subject: Commit for #535

---
 webui/src/components/BugTitleForm/BugTitleForm.tsx | 177 +++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 webui/src/components/BugTitleForm/BugTitleForm.tsx

(limited to 'webui/src/components/BugTitleForm/BugTitleForm.tsx')

diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx
new file mode 100644
index 00000000..77a0a7e3
--- /dev/null
+++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+
+import {
+  Button,
+  fade,
+  makeStyles,
+  TextField,
+  Typography,
+} from '@material-ui/core';
+
+import { TimelineDocument } from '../../pages/bug/TimelineQuery.generated';
+import Author from 'src/components/Author';
+import Date from 'src/components/Date';
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+
+import { useSetTitleMutation } from './SetTitle.generated';
+
+/**
+ * Css in JS styles
+ */
+const useStyles = makeStyles((theme) => ({
+  header: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  headerTitle: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  readOnlyTitle: {
+    ...theme.typography.h5,
+  },
+  readOnlyId: {
+    ...theme.typography.subtitle1,
+    marginLeft: theme.spacing(1),
+  },
+  editButtonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    minWidth: 200,
+    marginLeft: theme.spacing(2),
+  },
+  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',
+    ]),
+  },
+}));
+
+interface Props {
+  bug: BugFragment;
+}
+
+/**
+ * Component for bug title change
+ * @param bug Selected bug in list page
+ */
+function BugTitleForm({ bug }: Props) {
+  const [bugTitleEditable, setBugTitleEditable] = useState(false);
+  const [setTitle, { loading, error }] = useSetTitleMutation();
+  const [issueTitle, setIssueTitle] = useState(bug.title);
+  const classes = useStyles();
+  let issueTitleInput: any;
+
+  function isFormValid() {
+    if (issueTitleInput) {
+      return issueTitleInput.value.length > 0 ? true : false;
+    } else {
+      return false;
+    }
+  }
+
+  function submitNewTitle() {
+    if (!isFormValid()) return;
+    setTitle({
+      variables: {
+        input: {
+          prefix: bug.humanId,
+          title: issueTitleInput.value,
+        },
+      },
+      refetchQueries: [
+        // TODO: update the cache instead of refetching
+        {
+          query: TimelineDocument,
+          variables: {
+            id: bug.id,
+            first: 100,
+          },
+        },
+      ],
+      awaitRefetchQueries: true,
+    }).then(() => setBugTitleEditable(false));
+  }
+
+  function cancelChange() {
+    setIssueTitle(bug.title);
+    setBugTitleEditable(false);
+  }
+
+  function editableBugTitle() {
+    return (
+      <form className={classes.headerTitle} onSubmit={submitNewTitle}>
+        <TextField
+          inputRef={(node) => {
+            issueTitleInput = node;
+          }}
+          className={classes.titleInput}
+          variant="outlined"
+          fullWidth
+          margin="dense"
+          value={issueTitle}
+          onChange={(event: any) => setIssueTitle(event.target.value)}
+        />
+        <div className={classes.editButtonContainer}>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={issueTitle.length === 0}
+          >
+            Save
+          </Button>
+          <Button onClick={() => cancelChange()}>Cancel</Button>
+        </div>
+      </form>
+    );
+  }
+
+  function readonlyBugTitle() {
+    return (
+      <div className={classes.headerTitle}>
+        <div>
+          <span className={classes.readOnlyTitle}>{bug.title}</span>
+          <span className={classes.readOnlyId}>{bug.humanId}</span>
+        </div>
+        <div className={classes.editButtonContainer}>
+          <Button
+            variant="contained"
+            onClick={() => setBugTitleEditable(!bugTitleEditable)}
+          >
+            Edit
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error</div>;
+
+  return (
+    <div className={classes.header}>
+      {bugTitleEditable ? editableBugTitle() : readonlyBugTitle()}
+      <div className="classes.headerSubtitle">
+        <Typography color={'textSecondary'}>
+          <Author author={bug.author} />
+          {' opened this bug '}
+          <Date date={bug.createdAt} />
+        </Typography>
+      </div>
+    </div>
+  );
+}
+
+export default BugTitleForm;
-- 
cgit 


From abb005e1d5a97c960dd81af5d678092fe1a3ec49 Mon Sep 17 00:00:00 2001
From: Cláudio <claudio.engdist@gmail.com>
Date: Tue, 2 Feb 2021 15:00:20 -0300
Subject: Commit for #535

---
 webui/src/components/BugTitleForm/BugTitleForm.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'webui/src/components/BugTitleForm/BugTitleForm.tsx')

diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx
index 77a0a7e3..47a8e2b4 100644
--- a/webui/src/components/BugTitleForm/BugTitleForm.tsx
+++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx
@@ -126,13 +126,16 @@ function BugTitleForm({ bug }: Props) {
         />
         <div className={classes.editButtonContainer}>
           <Button
+            size="small"
             variant="contained"
             type="submit"
             disabled={issueTitle.length === 0}
           >
             Save
           </Button>
-          <Button onClick={() => cancelChange()}>Cancel</Button>
+          <Button size="small" onClick={() => cancelChange()}>
+            Cancel
+          </Button>
         </div>
       </form>
     );
@@ -147,6 +150,7 @@ function BugTitleForm({ bug }: Props) {
         </div>
         <div className={classes.editButtonContainer}>
           <Button
+            size="small"
             variant="contained"
             onClick={() => setBugTitleEditable(!bugTitleEditable)}
           >
-- 
cgit