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(
+
+
+
+ );
+
+ 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;
+} & Pick): 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;
- 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 [];
}