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 { 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 (

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 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'
export type SubView = 'cur_file' | 'overview'
import { useReviewPanelViewContext } from '../context/review-panel-view-context'
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>

View file

@ -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(
new CustomEvent<{ isOpen: boolean }>('set-review-panel-open', {
detail: { isOpen: true },
})
)
setReviewPanelOpen(true)
setView('cur_file')
view.dispatch({
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 { 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>
<TrackChangesStateProvider>
<ThreadsProvider>
<RangesProvider>{children}</RangesProvider>
</ThreadsProvider>
</TrackChangesStateProvider>
</ChangesUsersProvider>
<ReviewPanelViewProvider>
<ChangesUsersProvider>
<TrackChangesStateProvider>
<ThreadsProvider>
<RangesProvider>{children}</RangesProvider>
</ThreadsProvider>
</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 { 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,