From 37a210930dbd60720f8be01339f558a7dee2b550 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 29 Jan 2025 09:18:22 +0000
Subject: [PATCH] Ensure that review panel components are memoized (#23194)

GitOrigin-RevId: 271b8b00394d6b87fddc503a70f17f8f41144ec7
---
 .../components/review-panel-change.tsx               | 12 ++++++------
 .../components/review-panel-comment-content.tsx      |  8 ++++----
 .../components/review-panel-comment.tsx              |  8 ++++----
 .../components/review-panel-current-file.tsx         |  8 ++++----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
index 2c1f9175be..4343a72e10 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
@@ -26,8 +26,8 @@ export const ReviewPanelChange = memo<{
   docId: string
   hoverRanges?: boolean
   hovered?: boolean
-  onEnter?: () => void
-  onLeave?: () => void
+  onEnter?: (changeId: string) => void
+  onLeave?: (changeId: string) => void
 }>(
   ({
     change,
@@ -88,14 +88,14 @@ export const ReviewPanelChange = memo<{
         docId={docId}
         hoverRanges={hoverRanges}
         disabled={accepting}
-        onEnterEntryIndicator={onEnter}
-        onLeaveEntryIndicator={onLeave}
+        onEnterEntryIndicator={onEnter && (() => onEnter(change.id))}
+        onLeaveEntryIndicator={onLeave && (() => onLeave(change.id))}
         entryIndicator="edit"
       >
         <div
           className="review-panel-entry-content"
-          onMouseEnter={onEnter}
-          onMouseLeave={onLeave}
+          onMouseEnter={onEnter && (() => onEnter(change.id))}
+          onMouseLeave={onLeave && (() => onLeave(change.id))}
         >
           <div className="review-panel-entry-header">
             <div>
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 4939785c90..c4f1284d36 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
@@ -21,8 +21,8 @@ export const ReviewPanelCommentContent = memo<{
   onDeleteMessage?: (commentId: CommentId) => Promise<void>
   onDeleteThread?: (threadId: ThreadId) => Promise<void>
   onResolve?: () => Promise<void>
-  onLeave?: () => void
-  onEnter?: () => void
+  onLeave?: (changeId: string) => void
+  onEnter?: (changeId: string) => void
 }>(
   ({
     comment,
@@ -55,8 +55,8 @@ export const ReviewPanelCommentContent = memo<{
     return (
       <div
         className="review-panel-entry-content"
-        onMouseEnter={onEnter}
-        onMouseLeave={onLeave}
+        onMouseEnter={onEnter && (() => onEnter(comment.id))}
+        onMouseLeave={onLeave && (() => onLeave(comment.id))}
       >
         {thread.messages.map((message, i) => {
           const isReply = i !== 0
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 981c8c4971..ae0535e941 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
@@ -20,8 +20,8 @@ export const ReviewPanelComment = memo<{
   docId: string
   top?: number
   hoverRanges?: boolean
-  onEnter?: () => void
-  onLeave?: () => void
+  onEnter?: (changeId: string) => void
+  onLeave?: (changeId: string) => void
   hovered?: boolean
 }>(({ comment, top, hovered, onEnter, onLeave, docId, hoverRanges }) => {
   const threads = useThreadsContext()
@@ -142,8 +142,8 @@ export const ReviewPanelComment = memo<{
       position={comment.op.p}
       hoverRanges={hoverRanges}
       disabled={processing}
-      onEnterEntryIndicator={onEnter}
-      onLeaveEntryIndicator={onLeave}
+      onEnterEntryIndicator={onEnter && (() => onEnter(comment.id))}
+      onLeaveEntryIndicator={onLeave && (() => onLeave(comment.id))}
       entryIndicator="comment"
     >
       <ReviewPanelCommentContent
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
index 67e9a94476..d729c2c65d 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
@@ -320,8 +320,8 @@ const ReviewPanelCurrentFile: FC = () => {
                 top={positions.get(change.id)}
                 aggregate={aggregatedRanges.aggregates.get(change.id)}
                 hovered={hoveredEntry === change.id}
-                onEnter={() => handleEntryEnter(change.id)}
-                onLeave={() => handleEntryLeave(change.id)}
+                onEnter={handleEntryEnter}
+                onLeave={handleEntryLeave}
               />
             )
         )}
@@ -335,8 +335,8 @@ const ReviewPanelCurrentFile: FC = () => {
                 comment={comment}
                 top={positions.get(comment.id)}
                 hovered={hoveredEntry === comment.id}
-                onEnter={() => handleEntryEnter(comment.id)}
-                onLeave={() => handleEntryLeave(comment.id)}
+                onEnter={handleEntryEnter}
+                onLeave={handleEntryLeave}
               />
             )
         )}