Merge pull request #21410 from overleaf/dp-mini-panel-click

Prevent clicking on mini review panel entry popovers from opening the full panel

GitOrigin-RevId: a81ed154307750a756931d9fe5e893cd30d40c55

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

@@ -92,15 +92,10 @@ export const ReviewPanelChange = memo<{
         docId={docId}
         hoverRanges={hoverRanges}
         disabled={accepting}
+        onEnterEntryIndicator={onEnter}
+        onLeaveEntryIndicator={onLeave}
+        entryIndicator="edit"
       >
-        <div
-          className="review-panel-entry-indicator"
-          onMouseEnter={onEnter}
-          onMouseLeave={onLeave}
-        >
-          <MaterialIcon type="edit" className="review-panel-entry-icon" />
-        </div>
-
         <div
           className="review-panel-entry-content"
           onMouseEnter={onEnter}

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

@@ -6,7 +6,6 @@ import {
 } from '../context/threads-context'
 import classnames from 'classnames'
 import { ReviewPanelEntry } from './review-panel-entry'
-import MaterialIcon from '@/shared/components/material-icon'
 import { ReviewPanelCommentContent } from './review-panel-comment-content'
 import {
   CommentId,
@@ -143,14 +142,10 @@ export const ReviewPanelComment = memo<{
       position={comment.op.p}
       hoverRanges={hoverRanges}
       disabled={processing}
+      onEnterEntryIndicator={onEnter}
+      onLeaveEntryIndicator={onLeave}
+      entryIndicator="comment"
     >
-      <div
-        className="review-panel-entry-indicator"
-        onMouseEnter={onEnter}
-        onMouseLeave={onLeave}
-      >
-        <MaterialIcon type="comment" className="review-panel-entry-icon" />
-      </div>
       <ReviewPanelCommentContent
         comment={comment}
         isResolved={false}

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

@@ -14,6 +14,7 @@ import { useEditorManagerContext } from '@/features/ide-react/context/editor-man
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { EditorSelection } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export const ReviewPanelEntry: FC<{
   position: number
@@ -24,6 +25,9 @@ export const ReviewPanelEntry: FC<{
   selectLineOnFocus?: boolean
   hoverRanges?: boolean
   disabled?: boolean
+  onEnterEntryIndicator?: () => void
+  onLeaveEntryIndicator?: () => void
+  entryIndicator?: 'comment' | 'edit'
 }> = ({
   children,
   position,
@@ -34,6 +38,9 @@ export const ReviewPanelEntry: FC<{
   docId,
   hoverRanges = true,
   disabled,
+  onEnterEntryIndicator,
+  onLeaveEntryIndicator,
+  entryIndicator,
 }) => {
   const state = useCodeMirrorStateContext()
   const view = useCodeMirrorViewContext()
@@ -98,7 +105,6 @@ export const ReviewPanelEntry: FC<{
 
   return (
     <div
-      onMouseDown={openReviewPanel} // Using onMouseDown rather than onClick to guarantee that it fires before onFocus
       onFocus={focusHandler}
       onBlur={() => {
         setSelected(false)
@@ -141,6 +147,21 @@ export const ReviewPanelEntry: FC<{
         transition: 'top .3s, left .1s, right .1s',
       }}
     >
+      {entryIndicator && (
+        <div
+          className="review-panel-entry-indicator"
+          onMouseEnter={onEnterEntryIndicator}
+          onMouseLeave={onLeaveEntryIndicator}
+          onMouseDown={openReviewPanel} // Using onMouseDown rather than onClick to guarantee that it fires before onFocus
+          role="button"
+          tabIndex={0}
+        >
+          <MaterialIcon
+            type={entryIndicator}
+            className="review-panel-entry-icon"
+          />
+        </div>
+      )}
       {children}
     </div>
   )