Use thread id in removeNewCommentRangeEffect (#23205)

GitOrigin-RevId: 6082f5e6d6f548eff43da657526097118a2d3c11

services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx

@@ -1,4 +1,4 @@
-import { FC, FormEventHandler, useCallback, useState, useRef } from 'react'
+import { FormEventHandler, useCallback, useState, useRef, memo } from 'react'
 import {
   useCodeMirrorStateContext,
   useCodeMirrorViewContext,
@@ -11,18 +11,17 @@ import useSubmittableTextInput from '../hooks/use-submittable-text-input'
 import AutoExpandingTextArea from '@/shared/components/auto-expanding-text-area'
 import { ReviewPanelEntry } from './review-panel-entry'
 import { ThreadId } from '../../../../../types/review-panel/review-panel'
-import { Decoration } from '@codemirror/view'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { debugConsole } from '@/utils/debugging'
 import OLButton from '@/features/ui/components/ol/ol-button'
 
-export const ReviewPanelAddComment: FC<{
+export const ReviewPanelAddComment = memo<{
   docId: string
   from: number
   to: number
-  value: Decoration
+  threadId: string
   top: number | undefined
-}> = ({ from, to, value, top, docId }) => {
+}>(function ReviewPanelAddComment({ from, to, threadId, top, docId }) {
   const { t } = useTranslation()
   const view = useCodeMirrorViewContext()
   const state = useCodeMirrorStateContext()
@@ -32,9 +31,9 @@ export const ReviewPanelAddComment: FC<{
 
   const handleClose = useCallback(() => {
     view.dispatch({
-      effects: removeNewCommentRangeEffect.of(value),
+      effects: removeNewCommentRangeEffect.of(threadId),
     })
-  }, [view, value])
+  }, [view, threadId])
 
   const submitForm = useCallback(
     async message => {
@@ -127,7 +126,7 @@ export const ReviewPanelAddComment: FC<{
       op={{
         p: from,
         c: state.sliceDoc(from, to),
-        t: value.spec.id as ThreadId,
+        t: threadId as ThreadId,
       }}
       selectLineOnFocus={false}
       disabled={submitting}
@@ -169,4 +168,4 @@ export const ReviewPanelAddComment: FC<{
       </form>
     </ReviewPanelEntry>
   )
-}
+})

services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx

@@ -201,13 +201,13 @@ const ReviewPanelCurrentFile: FC = () => {
         continue
       }
 
-      const { from, to } = cursor
+      const { from, to, value } = cursor
 
       entries.push({
         id,
         from,
         to,
-        value: cursor.value,
+        threadId: value.spec.id,
         top: positions.get(id),
       })
 
@@ -297,14 +297,14 @@ const ReviewPanelCurrentFile: FC = () => {
 
       <div ref={handleContainer}>
         {addCommentEntries.map(entry => {
-          const { id, from, to, value, top } = entry
+          const { id, from, to, threadId, top } = entry
           return (
             <ReviewPanelAddComment
               docId={ranges!.docId}
               key={id}
               from={from}
               to={to}
-              value={value}
+              threadId={threadId}
               top={top}
             />
           )

services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts

@@ -19,7 +19,7 @@ import { v4 as uuid } from 'uuid'
 
 export const addNewCommentRangeEffect = StateEffect.define<Range<Decoration>>()
 
-export const removeNewCommentRangeEffect = StateEffect.define<Decoration>()
+export const removeNewCommentRangeEffect = StateEffect.define<string>()
 
 export const textSelectedEffect = StateEffect.define<null>()
 
@@ -103,11 +103,10 @@ export const reviewTooltipStateField = StateField.define<{
 
     for (const effect of tr.effects) {
       if (effect.is(removeNewCommentRangeEffect)) {
-        const rangeToRemove = effect.value
+        const threadId = effect.value
         addCommentRanges = addCommentRanges.update({
-          // eslint-disable-next-line no-unused-vars
-          filter: (from, to, value) => {
-            return value.spec.id !== rangeToRemove.spec.id
+          filter: (_from, _to, value) => {
+            return value.spec.id !== threadId
           },
         })
       }