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
This commit is contained in:
David 2024-10-10 15:13:01 +02:00 committed by Copybot
parent 4a3eed35d6
commit 438192fc11
6 changed files with 84 additions and 35 deletions

View file

@ -1,13 +1,16 @@
import { Dispatch, FC, memo, SetStateAction } from 'react' import { FC, memo } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import { SubView } from '../components/review-panel'
import MaterialIcon from '@/shared/components/material-icon' import MaterialIcon from '@/shared/components/material-icon'
import { useTranslation } from 'react-i18next' 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() const { t } = useTranslation()
return ( return (

View file

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

View file

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

View file

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

View file

@ -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
}

View file

@ -16,7 +16,6 @@ import { DetachRole } from './detach-context'
import { debugConsole } from '@/utils/debugging' import { debugConsole } from '@/utils/debugging'
import { BinaryFile } from '@/features/file-view/types/binary-file' import { BinaryFile } from '@/features/file-view/types/binary-file'
import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter' import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter'
import useEventListener from '../hooks/use-event-listener'
export type IdeLayout = 'sideBySide' | 'flat' export type IdeLayout = 'sideBySide' | 'flat'
export type IdeView = 'editor' | 'file' | 'pdf' | 'history' export type IdeView = 'editor' | 'file' | 'pdf' | 'history'
@ -166,17 +165,6 @@ export const LayoutProvider: FC = ({ children }) => {
changeLayout, 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>( const value = useMemo<LayoutContextValue>(
() => ({ () => ({
reattach, reattach,