diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx index dd29bdbafd..1e59906ed6 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-add-comment.tsx @@ -15,11 +15,12 @@ import { ThreadId } from '../../../../../types/review-panel/review-panel' import { Decoration } from '@codemirror/view' export const ReviewPanelAddComment: FC<{ + docId: string from: number to: number value: Decoration top: number | undefined -}> = ({ from, to, value, top }) => { +}> = ({ from, to, value, top, docId }) => { const { t } = useTranslation() const view = useCodeMirrorViewContext() const state = useCodeMirrorStateContext() @@ -113,6 +114,7 @@ export const ReviewPanelAddComment: FC<{ return ( top?: number editable?: boolean -}>(({ change, aggregate, top, editable = true }) => { + docId: string + hoverRanges?: boolean +}>(({ change, aggregate, top, docId, hoverRanges, editable = true }) => { const { t } = useTranslation() const { acceptChanges, rejectChanges } = useRangesActionsContext() const permissions = usePermissionsContext() @@ -42,6 +44,8 @@ export const ReviewPanelChange = memo<{ top={top} op={change.op} position={change.op.p} + docId={docId} + hoverRanges={hoverRanges} >
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx index 5a43e1f23b..44f6a4eeed 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx @@ -8,8 +8,10 @@ import { ReviewPanelCommentContent } from './review-panel-comment-content' export const ReviewPanelComment = memo<{ comment: Change + docId: string top?: number -}>(({ comment, top }) => { + hoverRanges?: boolean +}>(({ comment, top, docId, hoverRanges }) => { const threads = useThreadsContext() const thread = threads?.[comment.op.t] @@ -22,9 +24,11 @@ export const ReviewPanelComment = memo<{ className={classnames('review-panel-entry-comment', { 'review-panel-entry-loaded': !!threads?.[comment.op.t], })} + docId={docId} top={top} op={comment.op} position={comment.op.p} + hoverRanges={hoverRanges} >
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx index 8a8cfdef2e..3ca9508eaa 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx @@ -251,6 +251,7 @@ const ReviewPanelCurrentFile: FC = () => { const { id, from, to, value, top } = entry return ( { change => positions.has(change.id) && ( { comment => positions.has(comment.id) && ( = ({ children, position, top, op, className, selectLineOnFocus = true }) => { + hoverRanges?: boolean +}> = ({ + children, + position, + top, + op, + className, + selectLineOnFocus = true, + docId, + hoverRanges = true, +}) => { const state = useCodeMirrorStateContext() const view = useCodeMirrorViewContext() + const { openDocId } = useEditorManagerContext() const [focused, setFocused] = useState(false) const highlighted = isSelectionWithinOp(op, state.selection.main) const focusHandler = useCallback(() => { - setTimeout(() => { - // without setTimeout, error "EditorView.update are not allowed while an update is in progress" can occur - // this can be avoided by using onClick rather than onFocus but it will then not pick up or events for focusing entries - if (selectLineOnFocus) { - view.dispatch({ - selection: EditorSelection.cursor(position), - effects: EditorView.scrollIntoView(position, { y: 'center' }), - }) - } - }, 0) + if (selectLineOnFocus) { + openDocId(docId, { gotoOffset: position, keepCurrentView: true }) + } setFocused(true) - }, [view, position, selectLineOnFocus]) + }, [selectLineOnFocus, docId, openDocId, position]) return (
setFocused(false)} - onMouseEnter={() => view.dispatch(highlightRanges(op))} - onMouseLeave={() => view.dispatch(highlightRanges())} + onMouseEnter={() => { + if (hoverRanges) { + view.dispatch(highlightRanges(op)) + } + }} + onMouseLeave={() => { + if (hoverRanges) { + view.dispatch(highlightRanges()) + } + }} role="button" tabIndex={position + 1} className={classNames( diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx index dbb0682925..78c32570cb 100644 --- a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx +++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx @@ -82,11 +82,18 @@ export const ReviewPanelOverviewFile: FC<{ change={change} aggregate={aggregates.get(change.id)} editable={false} + docId={doc.doc.id} + hoverRanges={false} /> ))} {unresolvedComments.map(comment => ( - + ))}
)}