From f910a4d624b65a438361e3d8d337fe7cd5790001 Mon Sep 17 00:00:00 2001 From: David <33458145+davidmcpowell@users.noreply.github.com> Date: Thu, 1 May 2025 11:24:35 +0100 Subject: [PATCH] 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 --- .../components/review-panel-entry.tsx | 8 ++--- .../components/review-panel-header.tsx | 14 ++------- .../components/review-tooltip-menu.tsx | 16 +++------- .../hooks/use-review-panel-layout.ts | 31 +++++++++++++++++-- 4 files changed, 37 insertions(+), 32 deletions(-) diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx index 2bb91087ea..4192dd518e 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-entry.tsx +++ b/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(null) const mousePressedRef = useRef(false) - const openReviewPanel = useCallback(() => { - setReviewPanelOpen(true) - }, [setReviewPanelOpen]) - const selectEntry = useCallback( (event: React.FocusEvent | React.MouseEvent) => { setFocused(true) diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-header.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-header.tsx index 8f127f59c4..258922479c 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-header.tsx +++ b/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 (
- + {isReviewerRoleEnabled && } {!isReviewerRoleEnabled && ( diff --git a/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx b/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx index 5547829de9..066cffae56 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx +++ b/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) diff --git a/services/web/frontend/js/features/review-panel-new/hooks/use-review-panel-layout.ts b/services/web/frontend/js/features/review-panel-new/hooks/use-review-panel-layout.ts index 4e49aa2e8a..97f3deac16 100644 --- a/services/web/frontend/js/features/review-panel-new/hooks/use-review-panel-layout.ts +++ b/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 } }