Merge pull request #20617 from overleaf/dk-review-indicator-hover

Improve "mini" view popovers for new review panel

GitOrigin-RevId: ff5fc0af70bd9660d5cc17437b25824ef4c9a704

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

@@ -23,7 +23,21 @@ export const ReviewPanelChange = memo<{
   editable?: boolean
   docId: string
   hoverRanges?: boolean
-}>(({ change, aggregate, top, docId, hoverRanges, editable = true }) => {
+  hovered?: boolean
+  onEnter?: () => void
+  onLeave?: () => void
+}>(
+  ({
+    change,
+    aggregate,
+    top,
+    docId,
+    hoverRanges,
+    editable = true,
+    hovered,
+    onEnter,
+    onLeave,
+  }) => {
     const { t } = useTranslation()
     const { acceptChanges, rejectChanges } = useRangesActionsContext()
     const permissions = usePermissionsContext()
@@ -39,6 +53,7 @@ export const ReviewPanelChange = memo<{
         className={classnames('review-panel-entry-change', {
           'review-panel-entry-insert': 'i' in change.op,
           'review-panel-entry-delete': 'd' in change.op,
+          'review-panel-entry-hover': hovered,
           // TODO: aggregate
         })}
         top={top}
@@ -47,11 +62,19 @@ export const ReviewPanelChange = memo<{
         docId={docId}
         hoverRanges={hoverRanges}
       >
-      <div className="review-panel-entry-indicator">
+        <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">
+        <div
+          className="review-panel-entry-content"
+          onMouseEnter={onEnter}
+          onMouseLeave={onLeave}
+        >
           <div className="review-panel-entry-header">
             <div>
               <div className="review-panel-entry-user">
@@ -67,6 +90,7 @@ export const ReviewPanelChange = memo<{
                   id="accept-change"
                   overlayProps={{ placement: 'bottom' }}
                   description={t('accept_change')}
+                  tooltipProps={{ className: 'review-panel-tooltip' }}
                 >
                   <Button
                     onClick={() =>
@@ -88,6 +112,7 @@ export const ReviewPanelChange = memo<{
                   id="reject-change"
                   description={t('reject_change')}
                   overlayProps={{ placement: 'bottom' }}
+                  tooltipProps={{ className: 'review-panel-tooltip' }}
                 >
                   <Button
                     bsStyle={null}
@@ -164,5 +189,6 @@ export const ReviewPanelChange = memo<{
         </div>
       </ReviewPanelEntry>
     )
-})
+  }
+)
 ReviewPanelChange.displayName = 'ReviewPanelChange'

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

@@ -14,7 +14,9 @@ import useSubmittableTextInput from '../hooks/use-submittable-text-input'
 export const ReviewPanelCommentContent = memo<{
   comment: Change<CommentOperation>
   isResolved: boolean
-}>(({ comment, isResolved }) => {
+  onLeave?: () => void
+  onEnter?: () => void
+}>(({ comment, isResolved, onLeave, onEnter }) => {
   const { t } = useTranslation()
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState<Error>()
@@ -47,7 +49,11 @@ export const ReviewPanelCommentContent = memo<{
   }
 
   return (
-    <div className="review-panel-entry-content">
+    <div
+      className="review-panel-entry-content"
+      onMouseEnter={onEnter}
+      onMouseLeave={onLeave}
+    >
       {thread.messages.map((message, i) => {
         const isReply = i !== 0
 

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

@@ -11,7 +11,10 @@ export const ReviewPanelComment = memo<{
   docId: string
   top?: number
   hoverRanges?: boolean
-}>(({ comment, top, docId, hoverRanges }) => {
+  onEnter?: () => void
+  onLeave?: () => void
+  hovered?: boolean
+}>(({ comment, top, hovered, onEnter, onLeave, docId, hoverRanges }) => {
   const threads = useThreadsContext()
 
   const thread = threads?.[comment.op.t]
@@ -23,6 +26,7 @@ export const ReviewPanelComment = memo<{
     <ReviewPanelEntry
       className={classnames('review-panel-entry-comment', {
         'review-panel-entry-loaded': !!threads?.[comment.op.t],
+        'review-panel-entry-hover': hovered,
       })}
       docId={docId}
       top={top}
@@ -30,10 +34,19 @@ export const ReviewPanelComment = memo<{
       position={comment.op.p}
       hoverRanges={hoverRanges}
     >
-      <div className="review-panel-entry-indicator">
+      <div
+        className="review-panel-entry-indicator"
+        onMouseEnter={onEnter}
+        onMouseLeave={onLeave}
+      >
         <MaterialIcon type="comment" className="review-panel-entry-icon" />
       </div>
-      <ReviewPanelCommentContent comment={comment} isResolved={false} />
+      <ReviewPanelCommentContent
+        comment={comment}
+        isResolved={false}
+        onLeave={onLeave}
+        onEnter={onEnter}
+      />
     </ReviewPanelEntry>
   )
 })

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

@@ -43,6 +43,20 @@ const ReviewPanelCurrentFile: FC = () => {
   const ranges = useRangesContext()
   const threads = useThreadsContext()
   const state = useCodeMirrorStateContext()
+  const [hoveredEntry, setHoveredEntry] = useState<string | null>(null)
+
+  const hoverTimeout = useRef<number>(0)
+  const handleEntryEnter = useCallback((id: string) => {
+    clearTimeout(hoverTimeout.current)
+    setHoveredEntry(id)
+  }, [])
+
+  const handleEntryLeave = useCallback((id: string) => {
+    clearTimeout(hoverTimeout.current)
+    hoverTimeout.current = window.setTimeout(() => {
+      setHoveredEntry(null)
+    }, 100)
+  }, [])
 
   const [aggregatedRanges, setAggregatedRanges] = useState<AggregatedRanges>()
 
@@ -298,6 +312,9 @@ const ReviewPanelCurrentFile: FC = () => {
                 change={change}
                 top={positions.get(change.id)}
                 aggregate={aggregatedRanges.aggregates.get(change.id)}
+                hovered={hoveredEntry === change.id}
+                onEnter={() => handleEntryEnter(change.id)}
+                onLeave={() => handleEntryLeave(change.id)}
               />
             )
         )}
@@ -310,6 +327,9 @@ const ReviewPanelCurrentFile: FC = () => {
                 key={comment.id}
                 comment={comment}
                 top={positions.get(comment.id)}
+                hovered={hoveredEntry === comment.id}
+                onEnter={() => handleEntryEnter(comment.id)}
+                onLeave={() => handleEntryLeave(comment.id)}
               />
             )
         )}

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

@@ -106,6 +106,7 @@ export const ReviewPanelMessage: FC<{
               id="resolve-thread"
               overlayProps={{ placement: 'bottom' }}
               description={t('resolve_comment')}
+              tooltipProps={{ className: 'review-panel-tooltip' }}
             >
               <Button onClick={onResolve} bsStyle={null}>
                 <MaterialIcon

services/web/frontend/stylesheets/app/editor/review-panel-new.less

@@ -554,15 +554,14 @@
       margin-left: 0;
       background-color: transparent;
       border: none;
+      width: 100%;
     }
 
     .review-panel-entry-indicator {
       position: absolute;
       left: 0;
-      top: 7px;
+      top: 0;
       display: flex;
-      width: 16px;
-      height: 16px;
       color: @content-secondary;
       cursor: pointer;
     }
@@ -576,7 +575,7 @@
       padding: @spacing-02;
     }
 
-    .review-panel-entry:hover {
+    .review-panel-entry-hover {
       .review-panel-entry-content {
         display: initial;
         position: absolute;
@@ -599,3 +598,6 @@
   align-items: center;
   gap: 2px;
 }
+.review-panel-tooltip {
+  pointer-events: none; // this is to prevent mouseLeave event from firing when hovering over the tooltip
+}