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

Fix bug where clicking on comment/change in mini panel would not open full panel in new editor

GitOrigin-RevId: e7db345e01b881255a1651b37dec637f04692f3e

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

@@ -11,10 +11,10 @@ import {
   highlightRanges,
 } from '@/features/source-editor/extensions/ranges'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
-import { useLayoutContext } from '@/shared/context/layout-context'
 import { EditorSelection } from '@codemirror/state'
 import MaterialIcon from '@/shared/components/material-icon'
 import { OFFSET_FOR_ENTRIES_ABOVE } from '../utils/position-items'
+import useReviewPanelLayout from '../hooks/use-review-panel-layout'
 
 export const ReviewPanelEntry: FC<
   React.PropsWithChildren<{
@@ -50,15 +50,11 @@ export const ReviewPanelEntry: FC<
   const [selected, setSelected] = useState(false)
   const [focused, setFocused] = useState(false)
   const [textareaFocused, setTextareaFocused] = useState(false)
-  const { setReviewPanelOpen } = useLayoutContext()
+  const { openReviewPanel } = useReviewPanelLayout()
   const highlighted = isSelectionWithinOp(op, state.selection.main)
   const entryRef = useRef<HTMLDivElement>(null)
   const mousePressedRef = useRef(false)
 
-  const openReviewPanel = useCallback(() => {
-    setReviewPanelOpen(true)
-  }, [setReviewPanelOpen])
-
   const selectEntry = useCallback(
     (event: React.FocusEvent | React.MouseEvent) => {
       setFocused(true)

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

@@ -2,30 +2,22 @@ import { FC, memo, useState } from 'react'
 import { ReviewPanelResolvedThreadsButton } from './review-panel-resolved-threads-button'
 import { ReviewPanelTrackChangesMenu } from './review-panel-track-changes-menu'
 import ReviewPanelTrackChangesMenuButton from './review-panel-track-changes-menu-button'
-import { useLayoutContext } from '@/shared/context/layout-context'
 import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
 import { PanelHeading } from '@/shared/components/panel-heading'
-import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
-import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
+import useReviewPanelLayout from '../hooks/use-review-panel-layout'
 
 const isReviewerRoleEnabled = getMeta('ol-isReviewerRoleEnabled')
 
 const ReviewPanelHeader: FC = () => {
   const [trackChangesMenuExpanded, setTrackChangesMenuExpanded] =
     useState(false)
-  const { setReviewPanelOpen } = useLayoutContext()
-  const { setIsOpen: setRailIsOpen } = useRailContext()
+  const { closeReviewPanel } = useReviewPanelLayout()
   const { t } = useTranslation()
 
-  const newEditor = useIsNewEditorEnabled()
-  const handleClose = newEditor
-    ? () => setRailIsOpen(false)
-    : () => setReviewPanelOpen(false)
-
   return (
     <div className="review-panel-header">
-      <PanelHeading title={t('review')} handleClose={handleClose}>
+      <PanelHeading title={t('review')} handleClose={closeReviewPanel}>
         {isReviewerRoleEnabled && <ReviewPanelResolvedThreadsButton />}
       </PanelHeading>
       {!isReviewerRoleEnabled && (

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

@@ -35,8 +35,7 @@ import { useEditorManagerContext } from '@/features/ide-react/context/editor-man
 import classNames from 'classnames'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import getMeta from '@/utils/meta'
-import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
-import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
+import useReviewPanelLayout from '../hooks/use-review-panel-layout'
 
 const isReviewerRoleEnabled = getMeta('ol-isReviewerRoleEnabled')
 const TRACK_CHANGES_ON_WIDGET_HEIGHT = 25
@@ -50,10 +49,7 @@ const ReviewTooltipMenu: FC = () => {
   const isViewer = useViewerPermissions()
   const [show, setShow] = useState(true)
   const { setView } = useReviewPanelViewActionsContext()
-  const { setReviewPanelOpen } = useLayoutContext()
-  const { openTab: openRailTab } = useRailContext()
-  const newEditor = useIsNewEditorEnabled()
-
+  const { openReviewPanel } = useReviewPanelLayout()
   const tooltipState = state.field(reviewTooltipStateField, false)?.tooltip
   const previousTooltipState = usePreviousValue(tooltipState)
 
@@ -69,11 +65,7 @@ const ReviewTooltipMenu: FC = () => {
       return
     }
 
-    if (newEditor) {
-      openRailTab('review-panel')
-    } else {
-      setReviewPanelOpen(true)
-    }
+    openReviewPanel()
     setView('cur_file')
 
     const effects = isCursorNearViewportEdge(view, main.anchor)
@@ -85,7 +77,7 @@ const ReviewTooltipMenu: FC = () => {
 
     view.dispatch({ effects })
     setShow(false)
-  }, [setReviewPanelOpen, setView, setShow, view, openRailTab, newEditor])
+  }, [openReviewPanel, setView, setShow, view])
 
   useEventListener('add-new-review-comment', addComment)
 

services/web/frontend/js/features/review-panel-new/hooks/use-review-panel-layout.ts

@@ -4,16 +4,25 @@ import { useThreadsContext } from '@/features/review-panel-new/context/threads-c
 import { hasActiveRange } from '@/features/review-panel-new/utils/has-active-range'
 import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
 import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
+import { useCallback } from 'react'
 
 export default function useReviewPanelLayout(): {
   showPanel: boolean
   showHeader: boolean
   mini: boolean
+  openReviewPanel: () => void
+  closeReviewPanel: () => void
 } {
   const ranges = useRangesContext()
   const threads = useThreadsContext()
-  const { selectedTab: selectedRailTab, isOpen: railIsOpen } = useRailContext()
-  const { reviewPanelOpen: reviewPanelOpenOldEditor } = useLayoutContext()
+  const {
+    selectedTab: selectedRailTab,
+    isOpen: railIsOpen,
+    openTab: openRailTab,
+    setIsOpen: setRailIsOpen,
+  } = useRailContext()
+  const { reviewPanelOpen: reviewPanelOpenOldEditor, setReviewPanelOpen } =
+    useLayoutContext()
 
   const newEditor = useIsNewEditorEnabled()
 
@@ -21,10 +30,26 @@ export default function useReviewPanelLayout(): {
     ? selectedRailTab === 'review-panel' && railIsOpen
     : reviewPanelOpenOldEditor
 
+  const openReviewPanel = useCallback(() => {
+    if (newEditor) {
+      openRailTab('review-panel')
+    } else {
+      setReviewPanelOpen(true)
+    }
+  }, [newEditor, setReviewPanelOpen, openRailTab])
+
+  const closeReviewPanel = useCallback(() => {
+    if (newEditor) {
+      setRailIsOpen(false)
+    } else {
+      setReviewPanelOpen(false)
+    }
+  }, [newEditor, setReviewPanelOpen, setRailIsOpen])
+
   const hasCommentOrChange = hasActiveRange(ranges, threads)
   const showPanel = reviewPanelOpen || !!hasCommentOrChange
   const mini = !reviewPanelOpen
   const showHeader = showPanel && !mini
 
-  return { showPanel, showHeader, mini }
+  return { showPanel, showHeader, mini, openReviewPanel, closeReviewPanel }
 }