send comment over sharejs after thread is created (#14807)

* send comment over sharejs after thread is created

* only react version

* loading gif

GitOrigin-RevId: a6b16a8cae66faa3219f1c9141ee04e303d9f11b

services/web/frontend/js/features/source-editor/components/review-panel/entries/add-comment-entry.tsx

@@ -24,16 +24,23 @@ function AddCommentEntry({ entryId }: AddCommentEntryProps) {
     useReviewPanelUpdaterFnsContext()
 
   const [content, setContent] = useState('')
+  const [isSubmitting, setIsSubmiting] = useState(false)
 
   const handleStartNewComment = () => {
     setIsAddingComment(true)
     handleLayoutChange({ async: true })
   }
 
-  const handleSubmitNewComment = () => {
+  const handleSubmitNewComment = async () => {
-    submitNewComment(content)
+    setIsSubmiting(true)
-    setIsAddingComment(false)
+    try {
-    setContent('')
+      await submitNewComment(content)
+      setIsSubmiting(false)
+      setIsAddingComment(false)
+      setContent('')
+    } catch (err) {
+      setIsSubmiting(false)
+    }
     handleLayoutChange({ async: true })
   }
 
@@ -79,15 +86,21 @@ function AddCommentEntry({ entryId }: AddCommentEntryProps) {
         {isAddingComment ? (
           <>
             <div className="rp-new-comment">
-              <AutoExpandingTextArea
+              {isSubmitting ? (
-                className="rp-comment-input"
+                <div className="rp-loading">
-                onChange={e => setContent(e.target.value)}
+                  <Icon type="spinner" spin />
-                onKeyPress={handleCommentKeyPress}
+                </div>
-                onResize={handleLayoutChange}
+              ) : (
-                placeholder={t('add_your_comment_here')}
+                <AutoExpandingTextArea
-                value={content}
+                  className="rp-comment-input"
-                autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+                  onChange={e => setContent(e.target.value)}
-              />
+                  onKeyPress={handleCommentKeyPress}
+                  onResize={handleLayoutChange}
+                  placeholder={t('add_your_comment_here')}
+                  value={content}
+                  autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+                />
+              )}
             </div>
             <EntryActions>
               <EntryActions.Button
@@ -98,7 +111,7 @@ function AddCommentEntry({ entryId }: AddCommentEntryProps) {
               </EntryActions.Button>
               <EntryActions.Button
                 onClick={handleSubmitNewComment}
-                disabled={!content.length}
+                disabled={isSubmitting || !content.length}
               >
                 <Icon type="comment" /> {t('comment')}
               </EntryActions.Button>

services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts

@@ -73,7 +73,7 @@ export interface ReviewPanelState {
     unresolveComment: (threadId: ThreadId) => void
     deleteThread: (_entryId: unknown, docId: DocId, threadId: ThreadId) => void
     refreshResolvedCommentsDropdown: () => Promise<void>
-    submitNewComment: (content: string) => void
+    submitNewComment: (content: string) => Promise<void>
     setEntryHover: React.Dispatch<React.SetStateAction<Value<'entryHover'>>>
     setIsAddingComment: React.Dispatch<
       React.SetStateAction<Value<'isAddingComment'>>

services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js

@@ -818,27 +818,42 @@ export default App.controller(
       const thread_id = RangesTracker.generateId()
       const thread = getThread(thread_id)
       thread.submitting = true
-      $scope.$broadcast('comment:add', thread_id, offset, length)
+
-      dispatchReviewPanelEvent('comment:add', {
+      const emitCommentAdd = () => {
-        threadId: thread_id,
+        $scope.$broadcast('comment:add', thread_id, offset, length)
-        offset,
+        dispatchReviewPanelEvent('comment:add', {
-        length,
+          threadId: thread_id,
-      })
+          offset,
-      $http
+          length,
+        })
+
+        // TODO: unused?
+        $scope.$broadcast('editor:clearSelection')
+        $timeout(() => ide.$scope.$broadcast('review-panel:layout'))
+        eventTracking.sendMB('rp-new-comment', { size: content.length })
+      }
+
+      if (ide.$scope.reviewPanel.isReact === false) {
+        emitCommentAdd()
+      }
+
+      return $http
         .post(`/project/${$scope.project_id}/thread/${thread_id}/messages`, {
           content,
           _csrf: window.csrfToken,
         })
-        .catch(() =>
+        .then(() => {
+          if (ide.$scope.reviewPanel.isReact) {
+            emitCommentAdd()
+          }
+        })
+        .catch(() => {
           ide.showGenericMessageModal(
             'Error submitting comment',
             'Sorry, there was a problem submitting your comment'
           )
-        )
+          throw Error('Error submitting comment')
-      // TODO: unused?
+        })
-      $scope.$broadcast('editor:clearSelection')
-      $timeout(() => ide.$scope.$broadcast('review-panel:layout'))
-      eventTracking.sendMB('rp-new-comment', { size: content.length })
     }
 
     $scope.cancelNewComment = entry =>