From 64460681b89c10c9ac79764769569d5c7e5fb10b Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 21 Oct 2024 10:58:39 +0200
Subject: [PATCH] Fix delete comment/thread in the new review panel (#21199)

GitOrigin-RevId: 95d4db64d2f837322d84a81cbd129ec02ee135a2
---
 .../review-panel-comment-content.tsx          | 17 ++++++---
 .../components/review-panel-comment.tsx       | 35 ++++++++++++++++---
 .../components/review-panel-message.tsx       |  6 ++--
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-content.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-content.tsx
index 9051e15440..b88ab03a65 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-content.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-content.tsx
@@ -7,14 +7,18 @@ import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
 import ReviewPanelResolvedMessage from './review-panel-resolved-message'
 import { ReviewPanelResolvedCommentThread } from '../../../../../types/review-panel/comment-thread'
 import useSubmittableTextInput from '../hooks/use-submittable-text-input'
-import { CommentId } from '../../../../../types/review-panel/review-panel'
+import {
+  CommentId,
+  ThreadId,
+} from '../../../../../types/review-panel/review-panel'
 
 export const ReviewPanelCommentContent = memo<{
   comment: Change<CommentOperation>
   isResolved: boolean
   onEdit?: (commentId: CommentId, content: string) => Promise<void>
   onReply?: (content: string) => Promise<void>
-  onDelete?: (commentId: CommentId) => Promise<void>
+  onDeleteMessage?: (commentId: CommentId) => Promise<void>
+  onDeleteThread?: (threadId: ThreadId) => Promise<void>
   onResolve?: () => Promise<void>
   onLeave?: () => void
   onEnter?: () => void
@@ -23,7 +27,8 @@ export const ReviewPanelCommentContent = memo<{
     comment,
     isResolved,
     onResolve,
-    onDelete,
+    onDeleteMessage,
+    onDeleteThread,
     onEdit,
     onReply,
     onLeave,
@@ -65,7 +70,11 @@ export const ReviewPanelCommentContent = memo<{
                 hasReplies={!isReply && thread.messages.length > 1}
                 onResolve={onResolve}
                 onEdit={onEdit}
-                onDelete={onDelete}
+                onDelete={() =>
+                  isReply
+                    ? onDeleteMessage?.(message.id)
+                    : onDeleteThread?.(comment.op.t)
+                }
                 isThreadResolved={isResolved}
               />
             </div>
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx
index 78c0e6292a..4ed2a04ac1 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx
@@ -8,7 +8,10 @@ import classnames from 'classnames'
 import { ReviewPanelEntry } from './review-panel-entry'
 import MaterialIcon from '@/shared/components/material-icon'
 import { ReviewPanelCommentContent } from './review-panel-comment-content'
-import { CommentId } from '../../../../../types/review-panel/review-panel'
+import {
+  CommentId,
+  ThreadId,
+} from '../../../../../types/review-panel/review-panel'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { useTranslation } from 'react-i18next'
 import { debugConsole } from '@/utils/debugging'
@@ -23,8 +26,13 @@ export const ReviewPanelComment = memo<{
   hovered?: boolean
 }>(({ comment, top, hovered, onEnter, onLeave, docId, hoverRanges }) => {
   const threads = useThreadsContext()
-  const { resolveThread, editMessage, deleteMessage, addMessage } =
-    useThreadsActionsContext()
+  const {
+    resolveThread,
+    editMessage,
+    deleteMessage,
+    deleteThread,
+    addMessage,
+  } = useThreadsActionsContext()
   const { showGenericMessageModal } = useModalsContext()
   const { t } = useTranslation()
 
@@ -81,6 +89,24 @@ export const ReviewPanelComment = memo<{
     [comment.op.t, deleteMessage, showGenericMessageModal, t]
   )
 
+  const handleDeleteThread = useCallback(
+    async (commentId: ThreadId) => {
+      setProcessing(true)
+      try {
+        await deleteThread(commentId)
+      } catch (err) {
+        debugConsole.error(err)
+        showGenericMessageModal(
+          t('delete_comment_error_title'),
+          t('delete_comment_error_message')
+        )
+      } finally {
+        setProcessing(false)
+      }
+    },
+    [deleteThread, showGenericMessageModal, t]
+  )
+
   const handleSubmitReply = useCallback(
     async (content: string) => {
       setProcessing(true)
@@ -132,7 +158,8 @@ export const ReviewPanelComment = memo<{
         onEnter={onEnter}
         onResolve={handleResolveComment}
         onEdit={handleEditMessage}
-        onDelete={handleDeleteMessage}
+        onDeleteMessage={handleDeleteMessage}
+        onDeleteThread={handleDeleteThread}
         onReply={handleSubmitReply}
       />
     </ReviewPanelEntry>
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
index e9fa4ec499..d1eb34f7e4 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
@@ -20,7 +20,7 @@ export const ReviewPanelMessage: FC<{
   isReply: boolean
   onResolve?: () => Promise<void>
   onEdit?: (commentId: CommentId, content: string) => Promise<void>
-  onDelete?: (CommentId: CommentId) => Promise<void>
+  onDelete?: () => void
   isThreadResolved: boolean
 }> = ({
   message,
@@ -47,9 +47,9 @@ export const ReviewPanelMessage: FC<{
   }, [content, message.id, onEdit])
 
   const handleDelete = useCallback(() => {
-    onDelete?.(message.id)
+    onDelete?.()
     setDeleting(false)
-  }, [message.id, onDelete])
+  }, [onDelete])
 
   if (editing) {
     return (