From b4f4819f73a888b3d429114917f77aa8ff931b0a Mon Sep 17 00:00:00 2001
From: Christos Nasikas <christos.nasikas@elastic.co>
Date: Wed, 19 Jan 2022 12:46:25 +0200
Subject: [PATCH] Show delete comment user action

---
 .../user_actions/comment/comment.test.tsx     | 17 +++++++++++++
 .../user_actions/comment/comment.tsx          | 24 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx
index ca45191dd4cb16..df3374c848e56c 100644
--- a/x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx
+++ b/x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx
@@ -49,6 +49,23 @@ describe('createCommentUserActionBuilder', () => {
     expect(screen.getByText('edited comment')).toBeInTheDocument();
   });
 
+  it('renders correctly when deleting a comment', async () => {
+    const userAction = getUserAction('comment', Actions.delete);
+    const builder = createCommentUserActionBuilder({
+      ...builderArgs,
+      userAction,
+    });
+
+    const createdUserAction = builder.build();
+    render(
+      <TestProviders>
+        <EuiCommentList comments={createdUserAction} />
+      </TestProviders>
+    );
+
+    expect(screen.getByText('removed comment')).toBeInTheDocument();
+  });
+
   it('renders correctly a user comment', async () => {
     const userAction = getUserAction('comment', Actions.create, {
       commentId: basicCase.comments[0].id,
diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/comment.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/comment.tsx
index 79df2aaca99785..9c0b5397207489 100644
--- a/x-pack/plugins/cases/public/components/user_actions/comment/comment.tsx
+++ b/x-pack/plugins/cases/public/components/user_actions/comment/comment.tsx
@@ -17,6 +17,24 @@ import { createAlertAttachmentUserActionBuilder } from './alert';
 import { createActionAttachmentUserActionBuilder } from './actions';
 
 const getUpdateLabelTitle = () => `${i18n.EDITED_FIELD} ${i18n.COMMENT.toLowerCase()}`;
+const getDeleteLabelTitle = () => `${i18n.REMOVED_FIELD} ${i18n.COMMENT.toLowerCase()}`;
+
+const getDeleteCommentUserAction = ({
+  userAction,
+  handleOutlineComment,
+}: {
+  userAction: UserActionResponse<CommentUserAction>;
+} & Pick<UserActionBuilderArgs, 'handleOutlineComment'>): EuiCommentProps[] => {
+  const label = getDeleteLabelTitle();
+  const commonBuilder = createCommonUpdateUserActionBuilder({
+    userAction,
+    handleOutlineComment,
+    label,
+    icon: 'cross',
+  });
+
+  return commonBuilder.build();
+};
 
 const getCreateCommentUserAction = ({
   userAction,
@@ -101,8 +119,12 @@ export const createCommentUserActionBuilder: UserActionBuilder = ({
 }) => ({
   build: () => {
     const commentUserAction = userAction as UserActionResponse<CommentUserAction>;
-    const comment = caseData.comments.find((c) => c.id === commentUserAction.commentId);
 
+    if (commentUserAction.action === Actions.delete) {
+      return getDeleteCommentUserAction({ userAction: commentUserAction, handleOutlineComment });
+    }
+
+    const comment = caseData.comments.find((c) => c.id === commentUserAction.commentId);
     if (comment == null) {
       return [];
     }