Open review panel current file view when clicking add comment tooltip (#20891)

* Remove need for custom set-review-panel-open event

* Open current file view when clicking add comment tooltip

---------

Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
GitOrigin-RevId: 2b21061193f4270030d73174014aabbd017fd38e

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

@@ -1,13 +1,16 @@
-import { Dispatch, FC, memo, SetStateAction } from 'react'
+import { FC, memo } from 'react'
 import classnames from 'classnames'
-import { SubView } from '../components/review-panel'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
+import {
+  useReviewPanelViewActionsContext,
+  useReviewPanelViewContext,
+} from '../context/review-panel-view-context'
+
+const ReviewPanelTabs: FC = () => {
+  const subView = useReviewPanelViewContext()
+  const { setView: setSubView } = useReviewPanelViewActionsContext()
 
-const ReviewPanelTabs: FC<{
-  subView: SubView
-  setSubView: Dispatch<SetStateAction<SubView>>
-}> = ({ subView, setSubView }) => {
   const { t } = useTranslation()
 
   return (

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

@@ -1,15 +1,15 @@
-import { FC, memo, useMemo, useState } from 'react'
+import { FC, memo, useMemo } from 'react'
 import ReviewPanelTabs from './review-panel-tabs'
 import ReviewPanelHeader from './review-panel-header'
 import ReviewPanelCurrentFile from './review-panel-current-file'
 import { ReviewPanelOverview } from './review-panel-overview'
 import classnames from 'classnames'
 import { useReviewPanelStyles } from '@/features/review-panel-new/hooks/use-review-panel-styles'
-
+import { useReviewPanelViewContext } from '../context/review-panel-view-context'
-export type SubView = 'cur_file' | 'overview'
 
 const ReviewPanel: FC<{ mini?: boolean }> = ({ mini = false }) => {
-  const [choosenSubView, setSubView] = useState<SubView>('cur_file')
+  const choosenSubView = useReviewPanelViewContext()
+
   const activeSubView = useMemo(
     () => (mini ? 'cur_file' : choosenSubView),
     [choosenSubView, mini]
@@ -31,7 +31,7 @@ const ReviewPanel: FC<{ mini?: boolean }> = ({ mini = false }) => {
         {activeSubView === 'overview' && <ReviewPanelOverview />}
 
         <div className="review-panel-footer">
-          <ReviewPanelTabs subView={activeSubView} setSubView={setSubView} />
+          <ReviewPanelTabs />
         </div>
       </div>
     </div>

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

@@ -13,6 +13,8 @@ import {
 import { getTooltip } from '@codemirror/view'
 import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
 import usePreviousValue from '@/shared/hooks/use-previous-value'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import { useReviewPanelViewActionsContext } from '../context/review-panel-view-context'
 
 const ReviewTooltipMenu: FC = () => {
   const state = useCodeMirrorStateContext()
@@ -51,13 +53,12 @@ const ReviewTooltipMenuContent: FC<{
   const { t } = useTranslation()
   const view = useCodeMirrorViewContext()
   const state = useCodeMirrorStateContext()
+  const { setReviewPanelOpen } = useLayoutContext()
+  const { setView } = useReviewPanelViewActionsContext()
 
   const handleClick = () => {
-    window.dispatchEvent(
+    setReviewPanelOpen(true)
-      new CustomEvent<{ isOpen: boolean }>('set-review-panel-open', {
+    setView('cur_file')
-        detail: { isOpen: true },
-      })
-    )
 
     view.dispatch({
       effects: buildAddNewCommentRangeEffect(state.selection.main),

services/web/frontend/js/features/review-panel-new/context/review-panel-providers.tsx

@@ -4,6 +4,7 @@ import { ChangesUsersProvider } from './changes-users-context'
 import { TrackChangesStateProvider } from './track-changes-state-context'
 import { ThreadsProvider } from './threads-context'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import { ReviewPanelViewProvider } from './review-panel-view-context'
 
 export const ReviewPanelProviders: FC = ({ children }) => {
   if (!isSplitTestEnabled('review-panel-redesign')) {
@@ -11,12 +12,14 @@ export const ReviewPanelProviders: FC = ({ children }) => {
   }
 
   return (
-    <ChangesUsersProvider>
+    <ReviewPanelViewProvider>
-      <TrackChangesStateProvider>
+      <ChangesUsersProvider>
-        <ThreadsProvider>
+        <TrackChangesStateProvider>
-          <RangesProvider>{children}</RangesProvider>
+          <ThreadsProvider>
-        </ThreadsProvider>
+            <RangesProvider>{children}</RangesProvider>
-      </TrackChangesStateProvider>
+          </ThreadsProvider>
-    </ChangesUsersProvider>
+        </TrackChangesStateProvider>
+      </ChangesUsersProvider>
+    </ReviewPanelViewProvider>
   )
 }

services/web/frontend/js/features/review-panel-new/context/review-panel-view-context.tsx

@@ -0,0 +1,54 @@
+import {
+  createContext,
+  Dispatch,
+  FC,
+  SetStateAction,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+
+export type View = 'cur_file' | 'overview'
+
+export const ReviewPanelViewContext = createContext<View>('cur_file')
+
+type ViewActions = {
+  setView: Dispatch<SetStateAction<View>>
+}
+
+const ReviewPanelViewActionsContext = createContext<ViewActions | undefined>(
+  undefined
+)
+
+export const ReviewPanelViewProvider: FC = ({ children }) => {
+  const [view, setView] = useState<View>('cur_file')
+
+  const actions = useMemo(
+    () => ({
+      setView,
+    }),
+    [setView]
+  )
+
+  return (
+    <ReviewPanelViewActionsContext.Provider value={actions}>
+      <ReviewPanelViewContext.Provider value={view}>
+        {children}
+      </ReviewPanelViewContext.Provider>
+    </ReviewPanelViewActionsContext.Provider>
+  )
+}
+
+export const useReviewPanelViewContext = () => {
+  return useContext(ReviewPanelViewContext)
+}
+
+export const useReviewPanelViewActionsContext = () => {
+  const context = useContext(ReviewPanelViewActionsContext)
+  if (!context) {
+    throw new Error(
+      'useViewActionsContext is only available inside ViewProvider'
+    )
+  }
+  return context
+}

services/web/frontend/js/shared/context/layout-context.tsx

@@ -16,7 +16,6 @@ import { DetachRole } from './detach-context'
 import { debugConsole } from '@/utils/debugging'
 import { BinaryFile } from '@/features/file-view/types/binary-file'
 import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter'
-import useEventListener from '../hooks/use-event-listener'
 
 export type IdeLayout = 'sideBySide' | 'flat'
 export type IdeView = 'editor' | 'file' | 'pdf' | 'history'
@@ -166,17 +165,6 @@ export const LayoutProvider: FC = ({ children }) => {
     changeLayout,
   ])
 
-  const handleSetReviewPanelOpenEvent = useCallback(
-    (e: Event) => {
-      const event = e as CustomEvent<{ isOpen: boolean }>
-      const { isOpen } = event.detail
-      setReviewPanelOpen(isOpen)
-    },
-    [setReviewPanelOpen]
-  )
-
-  useEventListener('set-review-panel-open', handleSetReviewPanelOpenEvent)
-
   const value = useMemo<LayoutContextValue>(
     () => ({
       reattach,