Merge pull request #16138 from overleaf/ii-ide-page-prototype-review-panel-overview-loading

[web] React ide page overview switch

GitOrigin-RevId: 9a24a8ba9ed8e86d486a12a65259d25c1352c864

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -139,9 +139,8 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
 
   const [subView, setSubView] =
     useState<ReviewPanel.Value<'subView'>>('cur_file')
-  const [loading] = useScopeValue<ReviewPanel.Value<'loading'>>(
+  const [isOverviewLoading, setIsOverviewLoading] =
-    'reviewPanel.overview.loading'
+    useState<ReviewPanel.Value<'isOverviewLoading'>>(false)
-  )
   // All selected changes. If an aggregated change (insertion + deletion) is selected, the two ids
   // will be present. The length of this array will differ from the count below (see explanation).
   const selectedEntryIds = useRef<ThreadId[]>([])
@@ -844,9 +843,9 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     if (!trackChangesVisible) {
       return
     }
-    setReviewPanelOpen(value => !value)
+    setReviewPanelOpen(!reviewPanelOpen)
     sendMB('rp-toggle-panel', {
-      value: reviewPanelOpen,
+      value: !reviewPanelOpen,
     })
   }, [reviewPanelOpen, setReviewPanelOpen, trackChangesVisible])
 
@@ -1404,6 +1403,52 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
     )
   )
 
+  const openSubView = useRef<typeof subView>('cur_file')
+  useEffect(() => {
+    if (!reviewPanelOpen) {
+      // Always show current file when not open, but save current state
+      setSubView(prevState => {
+        openSubView.current = prevState
+        return 'cur_file'
+      })
+    } else {
+      // Reset back to what we had when previously open
+      setSubView(openSubView.current)
+    }
+    handleLayoutChange({ async: true, animate: false })
+  }, [reviewPanelOpen])
+
+  const canRefreshRanges = useRef(false)
+  useEffect(() => {
+    if (subView === 'overview' && canRefreshRanges.current) {
+      canRefreshRanges.current = false
+
+      setIsOverviewLoading(true)
+      refreshRanges().finally(() => {
+        setIsOverviewLoading(false)
+      })
+    }
+  }, [subView, refreshRanges])
+
+  const prevSubView = useRef(subView)
+  const initializedPrevSubView = useRef(false)
+  useEffect(() => {
+    // Prevent setting a computed value for `prevSubView` on mount
+    if (!initializedPrevSubView.current) {
+      initializedPrevSubView.current = true
+      return
+    }
+    prevSubView.current = subView === 'cur_file' ? 'overview' : 'cur_file'
+    // Allow refreshing ranges once for each `subView` change
+    canRefreshRanges.current = true
+  }, [subView])
+
+  useEffect(() => {
+    if (subView === 'cur_file' && prevSubView.current === 'overview') {
+      dispatchReviewPanelEvent('overview-closed', subView)
+    }
+  }, [subView])
+
   const values = useMemo<ReviewPanelStateReactIde['values']>(
     () => ({
       collapsed,
@@ -1421,7 +1466,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       toolbarHeight,
       subView,
       wantTrackChanges,
-      loading,
+      isOverviewLoading,
       openDocId,
       lineHeight,
       trackChangesState,
@@ -1448,7 +1493,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       toolbarHeight,
       subView,
       wantTrackChanges,
-      loading,
+      isOverviewLoading,
       openDocId,
       lineHeight,
       trackChangesState,

services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts

@@ -1,8 +1,6 @@
 import { ReactScopeValueStore } from '@/features/ide-react/scope-value-store/react-scope-value-store'
 
 export default function populateReviewPanelScope(store: ReactScopeValueStore) {
-  store.set('reviewPanel.overview.loading', false)
-  store.set('reviewPanel.nVisibleSelectedChanges', 0)
   store.set('users', {})
   store.set('reviewPanel.layoutToLeft', false)
   store.set('gotoEntry', () => {})

services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx

@@ -9,7 +9,7 @@ import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { MainDocument } from '../../../../../../types/project-settings'
 
 function OverviewContainer() {
-  const { loading } = useReviewPanelValueContext()
+  const { isOverviewLoading } = useReviewPanelValueContext()
   const docs: MainDocument[] = useFileTreeData().docs
 
   return (
@@ -23,7 +23,7 @@ function OverviewContainer() {
         tabIndex={0}
         aria-labelledby="review-panel-tab-overview"
       >
-        {loading ? (
+        {isOverviewLoading ? (
           <div className="rp-loading">
             <Icon type="spinner" spin />
           </div>

services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts

@@ -14,9 +14,9 @@ function useAngularReviewPanelState(): ReviewPanelState {
   const [subView, setSubView] = useScopeValue<ReviewPanel.Value<'subView'>>(
     'reviewPanel.subView'
   )
-  const [loading] = useScopeValue<ReviewPanel.Value<'loading'>>(
+  const [isOverviewLoading] = useScopeValue<
-    'reviewPanel.overview.loading'
+    ReviewPanel.Value<'isOverviewLoading'>
-  )
+  >('reviewPanel.overview.loading')
   const [nVisibleSelectedChanges] = useScopeValue<
     ReviewPanel.Value<'nVisibleSelectedChanges'>
   >('reviewPanel.nVisibleSelectedChanges')
@@ -170,7 +170,7 @@ function useAngularReviewPanelState(): ReviewPanelState {
       toolbarHeight,
       subView,
       wantTrackChanges,
-      loading,
+      isOverviewLoading,
       openDocId,
       lineHeight,
       trackChangesState,
@@ -197,7 +197,7 @@ function useAngularReviewPanelState(): ReviewPanelState {
       toolbarHeight,
       subView,
       wantTrackChanges,
-      loading,
+      isOverviewLoading,
       openDocId,
       lineHeight,
       trackChangesState,

services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts

@@ -30,7 +30,7 @@ export interface ReviewPanelState {
     toolbarHeight: number
     subView: SubView
     wantTrackChanges: boolean
-    loading: boolean
+    isOverviewLoading: boolean
     openDocId: DocId | null
     lineHeight: number
     trackChangesState: