Merge pull request #16030 from overleaf/ii-ide-page-prototype-review-panel-reply

[web] React ide page reply

GitOrigin-RevId: 4c47c5720f8aa019f9b427699d1687f42c090bd6

services/web/frontend/extracted-translations.json

@@ -165,6 +165,7 @@
   "collabs_per_proj_single": "",
   "collapse": "",
   "comment": "",
+  "comment_submit_error": "",
   "commit": "",
   "common": "",
   "common_causes_of_compile_timeouts_include": "",
@@ -346,6 +347,7 @@
   "error_opening_document": "",
   "error_opening_document_detail": "",
   "error_performing_request": "",
+  "error_submitting_comment": "",
   "example_project": "",
   "existing_plan_active_until_term_end": "",
   "expand": "",

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { isEqual, cloneDeep } from 'lodash'
 import usePersistedState from '@/shared/hooks/use-persisted-state'
 import useScopeValue from '../../../../../shared/hooks/use-scope-value'
@@ -16,6 +17,7 @@ import { useUserContext } from '@/shared/context/user-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { debugConsole } from '@/utils/debugging'
 import { useEditorContext } from '@/shared/context/editor-context'
 import { deleteJSON, getJSON, postJSON } from '@/infrastructure/fetch-json'
@@ -115,6 +117,7 @@ const formatComment = (
 }
 
 function useReviewPanelState(): ReviewPanelStateReactIde {
+  const { t } = useTranslation()
   const { reviewPanelOpen, setReviewPanelOpen } = useLayoutContext()
   const { projectId } = useIdeReactContext()
   const project = useProjectContext()
@@ -126,6 +129,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
   const { isRestrictedTokenMember } = useEditorContext()
   // TODO permissions to be removed from the review panel context. It currently acts just as a proxy.
   const { permissions } = usePermissionsContext()
+  const { showGenericMessageModal } = useModalsContext()
 
   // TODO `currentDocument` and `currentDocumentId` should be get from `useEditorManagerContext()` but that makes tests fail
   const [currentDocument] = useScopeValue<Document>('editor.sharejs_doc')
@@ -834,10 +838,6 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     useScopeValue<ReviewPanel.UpdaterFn<'submitNewComment'>>('submitNewComment')
   const [gotoEntry] =
     useScopeValue<ReviewPanel.UpdaterFn<'gotoEntry'>>('gotoEntry')
-  const [submitReplyAngular] =
-    useScopeValue<
-      (entry: { thread_id: ThreadId; replyContent: string }) => void
-    >('submitReply')
 
   const view = reviewPanelOpen ? subView : 'mini'
 
@@ -1073,9 +1073,28 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
 
   const submitReply = useCallback(
     (threadId: ThreadId, replyContent: string) => {
-      submitReplyAngular({ thread_id: threadId, replyContent })
+      const url = `/project/${projectId}/thread/${threadId}/messages`
+      postJSON(url, { body: { content: replyContent } }).catch(() => {
+        showGenericMessageModal(
+          t('error_submitting_comment'),
+          t('comment_submit_error')
+        )
+      })
+
+      const trackingMetadata = {
+        view,
+        size: replyContent.length,
+        thread: threadId,
+      }
+
+      setCommentThreads(prevState => ({
+        ...prevState,
+        [threadId]: { ...getThread(threadId), submitting: true },
+      }))
+      handleLayoutChange({ async: true })
+      sendMB('rp-comment-reply', trackingMetadata)
     },
-    [submitReplyAngular]
+    [getThread, projectId, showGenericMessageModal, t, view]
   )
 
   const [entryHover, setEntryHover] = useState(false)
@@ -1291,6 +1310,22 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       [currentDocumentId, getChangeTracker, updateEntries]
     )
   )
+  useSocketListener(
+    socket,
+    'new-comment',
+    useCallback(
+      (threadId: ThreadId, comment: ReviewPanelCommentThreadMessageApi) => {
+        setCommentThreads(prevState => {
+          const { submitting: _, ...thread } = getThread(threadId)
+          thread.messages = [...thread.messages]
+          thread.messages.push(formatComment(comment))
+          return { ...prevState, [threadId]: thread }
+        })
+        handleLayoutChange({ async: true })
+      },
+      [getThread]
+    )
+  )
 
   const values = useMemo<ReviewPanelStateReactIde['values']>(
     () => ({

services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts

@@ -9,6 +9,5 @@ export default function populateReviewPanelScope(store: ReactScopeValueStore) {
   store.set('submitNewComment', async () => {})
   store.set('gotoEntry', () => {})
   store.set('saveEdit', () => {})
-  store.set('submitReply', () => {})
   store.set('addNewComment', () => {})
 }

services/web/locales/en.json

@@ -262,6 +262,7 @@
   "collabs_per_proj_single": "__collabcount__ collaborator per project",
   "collapse": "Collapse",
   "comment": "Comment",
+  "comment_submit_error": "Sorry, there was a problem submitting your comment",
   "commit": "Commit",
   "common": "Common",
   "common_causes_of_compile_timeouts_include": "Common causes of compile timeouts include",
@@ -515,6 +516,7 @@
   "error_opening_document": "Error opening document",
   "error_opening_document_detail": "Sorry, something went wrong opening this document. Please try again.",
   "error_performing_request": "An error has occurred while performing your request.",
+  "error_submitting_comment": "Error submitting comment",
   "es": "Spanish",
   "estimated_number_of_users": "Estimated Number of Users",
   "every": "per",