From d494206efd8a0da58f9af421c26d4bbb7fce9ce4 Mon Sep 17 00:00:00 2001 From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Date: Fri, 8 Dec 2023 14:12:58 +0200 Subject: [PATCH] Merge pull request #16152 from overleaf/ii-ide-page-prototype-review-panel-mini [web] React ide page mini review panel GitOrigin-RevId: 4c4ee8095446a2f72371024b93a07dbd1dbd2a63 --- .../hooks/use-review-panel-state.ts | 21 ++++++++++++++++++- .../scope-adapters/layout-context-adapter.ts | 1 + .../components/review-panel/review-panel.tsx | 4 ++-- .../js/shared/context/layout-context.tsx | 12 +++++++++++ 4 files changed, 35 insertions(+), 3 deletions(-) diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts index 913e1ebb8e..a2a0bfbef0 100644 --- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts +++ b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts @@ -119,7 +119,8 @@ const formatComment = ( function useReviewPanelState(): ReviewPanelStateReactIde { const { t } = useTranslation() - const { reviewPanelOpen, setReviewPanelOpen } = useLayoutContext() + const { reviewPanelOpen, setReviewPanelOpen, setMiniReviewPanelVisible } = + useLayoutContext() const { projectId } = useIdeReactContext() const project = useProjectContext() const user = useUserContext() @@ -1149,6 +1150,24 @@ function useReviewPanelState(): ReviewPanelStateReactIde { const [layoutSuspended, setLayoutSuspended] = useState(false) const [unsavedComment, setUnsavedComment] = useState('') + useEffect(() => { + if (!trackChangesVisible) { + setReviewPanelOpen(false) + } + }, [trackChangesVisible, setReviewPanelOpen]) + + const hasEntries = useMemo(() => { + const docEntries = getDocEntries(currentDocumentId) + const permEntriesCount = Object.keys(docEntries).filter(key => { + return !['add-comment', 'bulk-actions'].includes(key) + }).length + return permEntriesCount > 0 && trackChangesVisible + }, [currentDocumentId, getDocEntries, trackChangesVisible]) + + useEffect(() => { + setMiniReviewPanelVisible(!reviewPanelOpen && hasEntries) + }, [reviewPanelOpen, hasEntries, setMiniReviewPanelVisible]) + // listen for events from the CodeMirror 6 track changes extension useEffect(() => { const toggleTrackChangesFromKbdShortcut = () => { diff --git a/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts b/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts index a608de63ed..fa722db38f 100644 --- a/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts +++ b/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts @@ -9,6 +9,7 @@ export default function populateLayoutScope(store: ReactScopeValueStore) { store.persisted('ui.chatOpen', false, 'ui.chatOpen') store.persisted('ui.reviewPanelOpen', false, reviewPanelStorageKey) store.set('ui.leftMenuShown', false) + store.set('ui.miniReviewPanelVisible', false) store.set('ui.pdfLayout', 'sideBySide') store.set('ui.loadingStyleSheet', false) } diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx index b984d6db43..ae5252c76e 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx @@ -19,7 +19,7 @@ type ReviewPanelViewProps = { function ReviewPanelView({ parentDomNode }: ReviewPanelViewProps) { const { subView, loadingThreads } = useReviewPanelValueContext() - const { reviewPanelOpen } = useLayoutContext() + const { reviewPanelOpen, miniReviewPanelVisible } = useLayoutContext() const { isReactIde } = useIdeContext() const content = ( @@ -44,7 +44,7 @@ function ReviewPanelView({ parentDomNode }: ReviewPanelViewProps) { 'rp-state-current-file-mini': subView === 'cur_file' && !reviewPanelOpen, 'rp-state-overview': subView === 'overview', - // 'rp-size-mini': ui.miniReviewPanelVisible, + 'rp-size-mini': miniReviewPanelVisible, 'rp-size-expanded': reviewPanelOpen, // 'rp-layout-left': reviewPanel.layoutToLeft, 'rp-loading-threads': loadingThreads, diff --git a/services/web/frontend/js/shared/context/layout-context.tsx b/services/web/frontend/js/shared/context/layout-context.tsx index 44a547217a..6f3e6b0485 100644 --- a/services/web/frontend/js/shared/context/layout-context.tsx +++ b/services/web/frontend/js/shared/context/layout-context.tsx @@ -33,6 +33,10 @@ type LayoutContextValue = { setReviewPanelOpen: Dispatch< SetStateAction > + miniReviewPanelVisible: boolean + setMiniReviewPanelVisible: Dispatch< + SetStateAction + > leftMenuShown: boolean setLeftMenuShown: Dispatch< SetStateAction @@ -93,6 +97,10 @@ export const LayoutProvider: FC = ({ children }) => { const [reviewPanelOpen, setReviewPanelOpen] = useScopeValue('ui.reviewPanelOpen') + // whether the review pane is collapsed + const [miniReviewPanelVisible, setMiniReviewPanelVisible] = + useScopeValue('ui.miniReviewPanelVisible') + // whether the menu pane is open const [leftMenuShown, setLeftMenuShown] = useScopeValue('ui.leftMenuShown') @@ -168,11 +176,13 @@ export const LayoutProvider: FC = ({ children }) => { pdfLayout, pdfPreviewOpen, reviewPanelOpen, + miniReviewPanelVisible, loadingStyleSheet, setChatIsOpen, setLeftMenuShown, setPdfLayout, setReviewPanelOpen, + setMiniReviewPanelVisible, setLoadingStyleSheet, setView, view, @@ -188,11 +198,13 @@ export const LayoutProvider: FC = ({ children }) => { pdfLayout, pdfPreviewOpen, reviewPanelOpen, + miniReviewPanelVisible, loadingStyleSheet, setChatIsOpen, setLeftMenuShown, setPdfLayout, setReviewPanelOpen, + setMiniReviewPanelVisible, setLoadingStyleSheet, setView, view,