From c874d111f50dc129a1ac8210beff626eea2f2186 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 16:04:34 +0100
Subject: Create EditCommentForm and handle cancle button

---
 webui/src/pages/bug/EditCommentForm.tsx | 119 ++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 webui/src/pages/bug/EditCommentForm.tsx

(limited to 'webui/src/pages/bug/EditCommentForm.tsx')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
new file mode 100644
index 000000000..fb192a020
--- /dev/null
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -0,0 +1,119 @@
+import React, { useState, useRef } from 'react';
+
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+import CommentInput from '../../components/CommentInput/CommentInput';
+
+import { BugFragment } from './Bug.generated';
+import { useAddCommentMutation } from './CommentForm.generated';
+import { TimelineDocument } from './TimelineQuery.generated';
+
+type StyleProps = { loading: boolean };
+const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
+  container: {
+    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',
+  },
+  greenButton: {
+    marginLeft: '8px',
+    backgroundColor: '#2ea44fd9',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#2ea44f',
+    },
+  },
+}));
+
+type Props = {
+  bug: BugFragment;
+  commentId: string;
+  onCancleClick?: () => void;
+};
+
+function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
+  const [addComment, { loading }] = useAddCommentMutation();
+  const [issueComment, setIssueComment] = useState('');
+  const [inputProp, setInputProp] = useState<any>('');
+  const classes = useStyles({ loading });
+  const form = useRef<HTMLFormElement>(null);
+
+  const submit = () => {
+    addComment({
+      variables: {
+        input: {
+          prefix: bug.id,
+          message: issueComment,
+        },
+      },
+      refetchQueries: [
+        // TODO: update the cache instead of refetching
+        {
+          query: TimelineDocument,
+          variables: {
+            id: bug.id,
+            first: 100,
+          },
+        },
+      ],
+      awaitRefetchQueries: true,
+    }).then(() => resetForm());
+  };
+
+  function resetForm() {
+    setInputProp({
+      value: '',
+    });
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (issueComment.length > 0) submit();
+  };
+
+  function getCancleButton() {
+    return (
+      <Button onClick={onCancleClick} variant="contained">
+        Cancle
+      </Button>
+    );
+  }
+
+  return (
+    <Paper className={classes.container}>
+      <form onSubmit={handleSubmit} ref={form}>
+        <CommentInput
+          inputProps={inputProp}
+          loading={loading}
+          onChange={(comment: string) => setIssueComment(comment)}
+        />
+        <div className={classes.actions}>
+          {onCancleClick ? getCancleButton() : ''}
+          <Button
+            className={classes.greenButton}
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={loading || issueComment.length === 0}
+          >
+            Update Comment
+          </Button>
+        </div>
+      </form>
+    </Paper>
+  );
+}
+
+export default EditCommentForm;
-- 
cgit v1.2.3


From 9f6c045f8b6e44e47300cec181217906f48d8261 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 17:54:49 +0100
Subject: Several fixes

- Fix misspelling of cancel...
- Fix flickering of green "update comment" button
- Fill input with comment text
- Close edit view after submit
---
 webui/src/components/CommentInput/CommentInput.tsx |  5 ++-
 webui/src/pages/bug/EditCommentForm.tsx            | 43 ++++++++--------------
 webui/src/pages/bug/Message.tsx                    | 22 ++++++-----
 3 files changed, 30 insertions(+), 40 deletions(-)

(limited to 'webui/src/pages/bug/EditCommentForm.tsx')

diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index 86cc7dbbd..c574538e8 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -51,6 +51,7 @@ const a11yProps = (index: number) => ({
 
 type Props = {
   inputProps?: any;
+  inputText?: string;
   loading: boolean;
   onChange: (comment: string) => void;
 };
@@ -62,8 +63,8 @@ type Props = {
  * @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>('');
+function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
+  const [input, setInput] = useState<string>(inputText ? inputText : '');
   const [tab, setTab] = useState(0);
   const classes = useStyles();
 
diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index fb192a020..46cf1e1f0 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -8,7 +8,8 @@ import CommentInput from '../../components/CommentInput/CommentInput';
 
 import { BugFragment } from './Bug.generated';
 import { useAddCommentMutation } from './CommentForm.generated';
-import { TimelineDocument } from './TimelineQuery.generated';
+import { AddCommentFragment } from './MessageCommentFragment.generated';
+import { CreateFragment } from './MessageCreateFragment.generated';
 
 type StyleProps = { loading: boolean };
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
@@ -39,37 +40,22 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 
 type Props = {
   bug: BugFragment;
-  commentId: string;
-  onCancleClick?: () => void;
+  comment: AddCommentFragment | CreateFragment;
+  onCancelClick?: () => void;
+  onPostSubmit?: () => void;
 };
 
-function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
+function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
   const [addComment, { loading }] = useAddCommentMutation();
-  const [issueComment, setIssueComment] = useState('');
+  const [issueComment, setIssueComment] = useState<string>(comment.message);
   const [inputProp, setInputProp] = useState<any>('');
   const classes = useStyles({ loading });
   const form = useRef<HTMLFormElement>(null);
 
   const submit = () => {
-    addComment({
-      variables: {
-        input: {
-          prefix: bug.id,
-          message: issueComment,
-        },
-      },
-      refetchQueries: [
-        // TODO: update the cache instead of refetching
-        {
-          query: TimelineDocument,
-          variables: {
-            id: bug.id,
-            first: 100,
-          },
-        },
-      ],
-      awaitRefetchQueries: true,
-    }).then(() => resetForm());
+    console.log('submit: ' + issueComment);
+    resetForm();
+    if (onPostSubmit) onPostSubmit();
   };
 
   function resetForm() {
@@ -83,10 +69,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
     if (issueComment.length > 0) submit();
   };
 
-  function getCancleButton() {
+  function getCancelButton() {
     return (
-      <Button onClick={onCancleClick} variant="contained">
-        Cancle
+      <Button onClick={onCancelClick} variant="contained">
+        Cancel
       </Button>
     );
   }
@@ -98,9 +84,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) {
           inputProps={inputProp}
           loading={loading}
           onChange={(comment: string) => setIssueComment(comment)}
+          inputText={comment.message}
         />
         <div className={classes.actions}>
-          {onCancleClick ? getCancleButton() : ''}
+          {onCancelClick ? getCancelButton() : ''}
           <Button
             className={classes.greenButton}
             variant="contained"
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 928e256f9..08a55dc6d 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -72,7 +72,7 @@ type Props = {
   op: AddCommentFragment | CreateFragment;
 };
 
-function Message({ bug, op }: Props) {
+function Message({ bug, op: comment }: Props) {
   const classes = useStyles();
   const [editMode, switchToEditMode] = useState(false);
 
@@ -86,11 +86,11 @@ function Message({ bug, op }: Props) {
       <Paper elevation={1} className={classes.bubble}>
         <header className={classes.header}>
           <div className={classes.title}>
-            <Author className={classes.author} author={op.author} />
+            <Author className={classes.author} author={comment.author} />
             <span> commented </span>
-            <Date date={op.createdAt} />
+            <Date date={comment.createdAt} />
           </div>
-          {op.edited && <div className={classes.tag}>Edited</div>}
+          {comment.edited && <div className={classes.tag}>Edited</div>}
           <IfLoggedIn>
             {() => (
               <Tooltip title="Edit Message" placement="top" arrow={true}>
@@ -98,7 +98,7 @@ function Message({ bug, op }: Props) {
                   disableRipple
                   className={classes.editButton}
                   aria-label="edit message"
-                  onClick={() => editComment(op.id)}
+                  onClick={() => editComment(comment.id)}
                 >
                   <EditIcon />
                 </IconButton>
@@ -107,14 +107,14 @@ function Message({ bug, op }: Props) {
           </IfLoggedIn>
         </header>
         <section className={classes.body}>
-          <Content markdown={op.message} />
+          <Content markdown={comment.message} />
         </section>
       </Paper>
     );
   }
 
   function editMessageView() {
-    const cancleEdition = () => {
+    const cancelEdition = () => {
       switchToEditMode(false);
     };
 
@@ -122,8 +122,10 @@ function Message({ bug, op }: Props) {
       <div className={classes.bubble}>
         <EditCommentForm
           bug={bug}
-          onCancleClick={cancleEdition}
-          commentId={op.id}
+          onCancelClick={cancelEdition}
+          // Close edit view after submitted changes
+          onPostSubmit={cancelEdition}
+          comment={comment}
         />
       </div>
     );
@@ -131,7 +133,7 @@ function Message({ bug, op }: Props) {
 
   return (
     <article className={classes.container}>
-      <Avatar author={op.author} className={classes.avatar} />
+      <Avatar author={comment.author} className={classes.avatar} />
       {editMode ? editMessageView() : readMessageView()}
     </article>
   );
-- 
cgit v1.2.3


From 0e3caba922ba5a21a7e7aa0f433d944aacf58e78 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 18:19:16 +0100
Subject: Update comment on submit

---
 webui/src/pages/bug/EditCommentForm.tsx     | 23 ++++++++++++++++-------
 webui/src/pages/bug/EditCommentform.graphql |  7 +++++++
 2 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 webui/src/pages/bug/EditCommentform.graphql

(limited to 'webui/src/pages/bug/EditCommentForm.tsx')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index 46cf1e1f0..f50400642 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -7,7 +7,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
 import { BugFragment } from './Bug.generated';
-import { useAddCommentMutation } from './CommentForm.generated';
+import { useEditCommentMutation } from './EditCommentform.generated';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -46,14 +46,23 @@ type Props = {
 };
 
 function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
-  const [addComment, { loading }] = useAddCommentMutation();
-  const [issueComment, setIssueComment] = useState<string>(comment.message);
+  const [editComment, { loading }] = useEditCommentMutation();
+  const [message, setMessage] = useState<string>(comment.message);
   const [inputProp, setInputProp] = useState<any>('');
   const classes = useStyles({ loading });
   const form = useRef<HTMLFormElement>(null);
 
   const submit = () => {
-    console.log('submit: ' + issueComment);
+    console.log('submit: ' + message + '\nTo: ' + comment.id);
+    editComment({
+      variables: {
+        input: {
+          prefix: bug.id,
+          message: message,
+          target: comment.id,
+        },
+      },
+    });
     resetForm();
     if (onPostSubmit) onPostSubmit();
   };
@@ -66,7 +75,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (issueComment.length > 0) submit();
+    if (message.length > 0) submit();
   };
 
   function getCancelButton() {
@@ -83,7 +92,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
         <CommentInput
           inputProps={inputProp}
           loading={loading}
-          onChange={(comment: string) => setIssueComment(comment)}
+          onChange={(message: string) => setMessage(message)}
           inputText={comment.message}
         />
         <div className={classes.actions}>
@@ -93,7 +102,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
             variant="contained"
             color="primary"
             type="submit"
-            disabled={loading || issueComment.length === 0}
+            disabled={loading || message.length === 0}
           >
             Update Comment
           </Button>
diff --git a/webui/src/pages/bug/EditCommentform.graphql b/webui/src/pages/bug/EditCommentform.graphql
new file mode 100644
index 000000000..c7047e6ec
--- /dev/null
+++ b/webui/src/pages/bug/EditCommentform.graphql
@@ -0,0 +1,7 @@
+mutation EditComment($input: EditCommentInput!) {
+  editComment(input: $input) {
+    bug {
+      id
+    }
+  }
+}
-- 
cgit v1.2.3


From d4f96fa91faa6f56a790ebc7fd041af705ed77b0 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 18:21:52 +0100
Subject: Use theme colors for submit button

---
 webui/src/pages/bug/EditCommentForm.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'webui/src/pages/bug/EditCommentForm.tsx')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index f50400642..ca627c276 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -30,10 +30,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   },
   greenButton: {
     marginLeft: '8px',
-    backgroundColor: '#2ea44fd9',
-    color: '#fff',
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText,
     '&:hover': {
-      backgroundColor: '#2ea44f',
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.success.contrastText,
     },
   },
 }));
-- 
cgit v1.2.3


From 9fb033ef191a23b1338e0fdfe8ab1f462165b99d Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 22:28:45 +0100
Subject: Return of new comment works...

...but the types are quite hacky
---
 webui/src/pages/bug/EditCommentForm.graphql |  9 +++++++++
 webui/src/pages/bug/EditCommentForm.tsx     | 11 +++++++----
 webui/src/pages/bug/Message.tsx             |  8 ++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

(limited to 'webui/src/pages/bug/EditCommentForm.tsx')

diff --git a/webui/src/pages/bug/EditCommentForm.graphql b/webui/src/pages/bug/EditCommentForm.graphql
index c7047e6ec..4765b75ca 100644
--- a/webui/src/pages/bug/EditCommentForm.graphql
+++ b/webui/src/pages/bug/EditCommentForm.graphql
@@ -1,7 +1,16 @@
+#import "./MessageCommentFragment.graphql"
+#import "./MessageCreateFragment.graphql"
+
 mutation EditComment($input: EditCommentInput!) {
   editComment(input: $input) {
     bug {
       id
+      timeline {
+        comments: nodes {
+          ...Create
+          ...AddComment
+        }
+      }
     }
   }
 }
diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index ca627c276..7823d75ef 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -7,7 +7,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
 import { BugFragment } from './Bug.generated';
-import { useEditCommentMutation } from './EditCommentform.generated';
+import { useEditCommentMutation } from './EditCommentForm.generated';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -43,7 +43,7 @@ type Props = {
   bug: BugFragment;
   comment: AddCommentFragment | CreateFragment;
   onCancelClick?: () => void;
-  onPostSubmit?: () => void;
+  onPostSubmit?: (comments: any) => void;
 };
 
 function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
@@ -54,7 +54,6 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
   const form = useRef<HTMLFormElement>(null);
 
   const submit = () => {
-    console.log('submit: ' + message + '\nTo: ' + comment.id);
     editComment({
       variables: {
         input: {
@@ -63,9 +62,13 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
           target: comment.id,
         },
       },
+    }).then((result) => {
+      const comments = result.data?.editComment.bug.timeline.comments;
+      const coms = comments as (AddCommentFragment | CreateFragment)[];
+      const res = coms.find((elem) => elem.id === comment.id);
+      if (onPostSubmit) onPostSubmit(res);
     });
     resetForm();
-    if (onPostSubmit) onPostSubmit();
   };
 
   function resetForm() {
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 08a55dc6d..7455104bf 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -78,7 +78,6 @@ function Message({ bug, op: comment }: Props) {
 
   const editComment = (id: String) => {
     switchToEditMode(true);
-    console.log(id);
   };
 
   function readMessageView() {
@@ -118,13 +117,18 @@ function Message({ bug, op: comment }: Props) {
       switchToEditMode(false);
     };
 
+    const onPostSubmit = (comments: AddCommentFragment | CreateFragment) => {
+      console.log('posted: ' + comments.message);
+      switchToEditMode(false);
+    };
+
     return (
       <div className={classes.bubble}>
         <EditCommentForm
           bug={bug}
           onCancelClick={cancelEdition}
           // Close edit view after submitted changes
-          onPostSubmit={cancelEdition}
+          onPostSubmit={onPostSubmit}
           comment={comment}
         />
       </div>
-- 
cgit v1.2.3


From b06f7c781620c967e939577fc92e1265cdff6485 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 18 Mar 2021 12:07:09 +0100
Subject: Reduced arbitary variable names

---
 webui/src/pages/bug/EditCommentForm.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'webui/src/pages/bug/EditCommentForm.tsx')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index 7823d75ef..0794c3efe 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -63,10 +63,14 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
         },
       },
     }).then((result) => {
-      const comments = result.data?.editComment.bug.timeline.comments;
-      const coms = comments as (AddCommentFragment | CreateFragment)[];
-      const res = coms.find((elem) => elem.id === comment.id);
-      if (onPostSubmit) onPostSubmit(res);
+      const comments = result.data?.editComment.bug.timeline.comments as (
+        | AddCommentFragment
+        | CreateFragment
+      )[];
+      // NOTE Searching for the changed comment could be dropped if GraphQL get
+      // filter by id argument for timelineitems
+      const modifiedComment = comments.find((elem) => elem.id === comment.id);
+      if (onPostSubmit) onPostSubmit(modifiedComment);
     });
     resetForm();
   };
-- 
cgit v1.2.3


From 5b562559e36d07888e888d014db5130a80be4519 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Fri, 19 Mar 2021 16:06:41 +0100
Subject: Fix eslint pipeline fail hopefully

---
 webui/src/pages/bug/EditCommentForm.tsx | 8 ++++----
 webui/src/pages/bug/Message.tsx         | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'webui/src/pages/bug/EditCommentForm.tsx')

diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx
index 0794c3efe..8fa659b3b 100644
--- a/webui/src/pages/bug/EditCommentForm.tsx
+++ b/webui/src/pages/bug/EditCommentForm.tsx
@@ -42,11 +42,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 type Props = {
   bug: BugFragment;
   comment: AddCommentFragment | CreateFragment;
-  onCancelClick?: () => void;
+  onCancel?: () => void;
   onPostSubmit?: (comments: any) => void;
 };
 
-function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
+function EditCommentForm({ bug, comment, onCancel, onPostSubmit }: Props) {
   const [editComment, { loading }] = useEditCommentMutation();
   const [message, setMessage] = useState<string>(comment.message);
   const [inputProp, setInputProp] = useState<any>('');
@@ -88,7 +88,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
 
   function getCancelButton() {
     return (
-      <Button onClick={onCancelClick} variant="contained">
+      <Button onClick={onCancel} variant="contained">
         Cancel
       </Button>
     );
@@ -104,7 +104,7 @@ function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
           inputText={comment.message}
         />
         <div className={classes.actions}>
-          {onCancelClick ? getCancelButton() : ''}
+          {onCancel && getCancelButton()}
           <Button
             className={classes.greenButton}
             variant="contained"
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 51f45a4b1..22cce9b18 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -176,7 +176,7 @@ function Message({ bug, op }: Props) {
       <div className={classes.bubble}>
         <EditCommentForm
           bug={bug}
-          onCancelClick={cancelEdition}
+          onCancel={cancelEdition}
           onPostSubmit={onPostSubmit}
           comment={comment}
         />
-- 
cgit v1.2.3

