From 2cd10df47e39e037c3990291dd35f45a00ed8fc2 Mon Sep 17 00:00:00 2001 From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Date: Thu, 30 Nov 2023 15:38:45 +0200 Subject: [PATCH] Merge pull request #16030 from overleaf/ii-ide-page-prototype-review-panel-reply [web] React ide page reply GitOrigin-RevId: 4c47c5720f8aa019f9b427699d1687f42c090bd6 --- .../web/frontend/extracted-translations.json | 2 + .../hooks/use-review-panel-state.ts | 47 ++++++++++++++++--- .../review-panel-context-adapter.ts | 1 - services/web/locales/en.json | 2 + 4 files changed, 45 insertions(+), 7 deletions(-) diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index c41d52c0c6..89ae8d9d7d 100644 --- a/services/web/frontend/extracted-translations.json +++ b/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": "", diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts index 230c06f4f6..afb2b47e9d 100644 --- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts +++ b/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('editor.sharejs_doc') @@ -834,10 +838,6 @@ function useReviewPanelState(): ReviewPanelStateReactIde { useScopeValue>('submitNewComment') const [gotoEntry] = useScopeValue>('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( () => ({ diff --git a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts b/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts index b2495b477f..e6b25f5e81 100644 --- a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts +++ b/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', () => {}) } diff --git a/services/web/locales/en.json b/services/web/locales/en.json index a21cee9961..2ad495f5a8 100644 --- a/services/web/locales/en.json +++ b/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",