Merge pull request #15221 from overleaf/ii-ide-page-prototype-file-tree-history

FileTree for history React IDE page

GitOrigin-RevId: 56fadced9f507297ba16dc54715811f36dcfd5b5

services/web/frontend/js/features/ide-react/components/editor-and-sidebar.tsx

@@ -3,7 +3,10 @@ import TwoColumnMainContent from '@/features/ide-react/components/layout/two-col
 import Editor from '@/features/ide-react/components/editor/editor'
 import EditorSidebar from '@/features/ide-react/components/editor-sidebar'
 import customLocalStorage from '@/infrastructure/local-storage'
+import History from '@/features/ide-react/components/history'
+import { HistoryProvider } from '@/features/history/context/history-context'
 import { useProjectContext } from '@/shared/context/project-context'
+import { useLayoutContext } from '@/shared/context/layout-context'
 import { FileTreeFindResult } from '@/features/ide-react/types/file-tree'
 
 type EditorAndSidebarProps = {
@@ -19,6 +22,8 @@ export function EditorAndSidebar({
 }: EditorAndSidebarProps) {
   const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true)
   const { rootDocId, _id: projectId } = useProjectContext()
+  const { view } = useLayoutContext()
+  const historyIsOpen = view === 'history'
 
   const [openDocId, setOpenDocId] = useState(
     () => customLocalStorage.getItem(`doc.open_id.${projectId}`) || rootDocId
@@ -46,12 +51,21 @@ export function EditorAndSidebar({
       onFileTreeSelect={handleFileTreeSelect}
     />
   )
+
   const rightColumnContent = (
-    <Editor
-      shouldPersistLayout={shouldPersistLayout}
-      openDocId={openDocId}
-      fileTreeReady={fileTreeReady}
-    />
+    <>
+      {/* Recreate the history context when the history view is toggled */}
+      {historyIsOpen && (
+        <HistoryProvider>
+          <History />
+        </HistoryProvider>
+      )}
+      <Editor
+        shouldPersistLayout={shouldPersistLayout}
+        openDocId={openDocId}
+        fileTreeReady={fileTreeReady}
+      />
+    </>
   )
 
   return (

services/web/frontend/js/features/ide-react/components/editor-sidebar.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { Panel, PanelGroup } from 'react-resizable-panels'
 import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
 import { FileTree } from '@/features/ide-react/components/file-tree'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import classnames from 'classnames'
 import { FileTreeSelectHandler } from '@/features/ide-react/types/file-tree'
 
 type EditorSidebarProps = {
@@ -15,22 +17,32 @@ export default function EditorSidebar({
   onFileTreeInit,
   onFileTreeSelect,
 }: EditorSidebarProps) {
+  const { view } = useLayoutContext()
+  const historyIsOpen = view === 'history'
+
   return (
-    <aside className="ide-react-placeholder-editor-sidebar">
-      <PanelGroup
-        autoSaveId={
-          shouldPersistLayout ? 'ide-react-editor-sidebar-layout' : undefined
-        }
-        direction="vertical"
+    <>
+      <aside
+        className={classnames('ide-react-placeholder-editor-sidebar', {
+          hide: historyIsOpen,
+        })}
       >
-        <Panel defaultSize={75} className="ide-react-file-tree-panel">
-          <FileTree onInit={onFileTreeInit} onSelect={onFileTreeSelect} />
-        </Panel>
-        <VerticalResizeHandle />
-        <Panel defaultSize={25}>
-          <div className="outline-container" />
-        </Panel>
-      </PanelGroup>
-    </aside>
+        <PanelGroup
+          autoSaveId={
+            shouldPersistLayout ? 'ide-react-editor-sidebar-layout' : undefined
+          }
+          direction="vertical"
+        >
+          <Panel defaultSize={75} className="ide-react-file-tree-panel">
+            <FileTree onInit={onFileTreeInit} onSelect={onFileTreeSelect} />
+          </Panel>
+          <VerticalResizeHandle />
+          <Panel defaultSize={25}>
+            <div className="outline-container" />
+          </Panel>
+        </PanelGroup>
+      </aside>
+      <aside className="ide-react-placeholder-editor-sidebar history-file-tree" />
+    </>
   )
 }

services/web/frontend/js/features/ide-react/components/editor/editor.tsx

@@ -12,6 +12,7 @@ import { useLayoutContext } from '@/shared/context/layout-context'
 import { EditorPane } from '@/features/ide-react/components/editor/editor-pane'
 import PlaceholderFile from '@/features/ide-react/components/layout/placeholder/placeholder-file'
 import PlaceholderPdf from '@/features/ide-react/components/layout/placeholder/placeholder-pdf'
+import classnames from 'classnames'
 
 export type EditorProps = {
   shouldPersistLayout?: boolean
@@ -38,9 +39,7 @@ export default function Editor({
     return <PlaceholderFile />
   }
 
-  if (view === 'history') {
-    return null
-  }
+  const historyIsOpen = view === 'history'
 
   function setPdfIsOpen(isOpen: boolean) {
     if (isOpen) {
@@ -56,6 +55,7 @@ export default function Editor({
         shouldPersistLayout ? 'ide-react-editor-and-pdf-layout' : undefined
       }
       direction="horizontal"
+      className={classnames({ hide: historyIsOpen })}
     >
       {editorIsVisible ? (
         <Panel id="editor" order={1} defaultSize={50}>

services/web/frontend/js/features/ide-react/components/history.tsx

@@ -0,0 +1,23 @@
+import { createPortal } from 'react-dom'
+import HistoryFileTree from '@/features/history/components/history-file-tree'
+import LoadingSpinner from '@/shared/components/loading-spinner'
+import { useHistoryContext } from '@/features/history/context/history-context'
+
+export default function History() {
+  const { updatesInfo } = useHistoryContext()
+  const fileTreeContainer = document.querySelector('.history-file-tree')
+
+  return (
+    <>
+      {fileTreeContainer &&
+        createPortal(<HistoryFileTree />, fileTreeContainer)}
+      <div className="history-react">
+        {updatesInfo.loadingState === 'loadingInitial' ? (
+          <LoadingSpinner />
+        ) : (
+          'History document diff viewer and versions list placeholder'
+        )}
+      </div>
+    </>
+  )
+}

services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx

@@ -3,7 +3,6 @@ import useEventListener from '@/shared/hooks/use-event-listener'
 import { useCallback, useEffect, useState } from 'react'
 import { Alerts } from '@/features/ide-react/components/alerts/alerts'
 import { useLayoutContext } from '@/shared/context/layout-context'
-import PlaceholderHistory from '@/features/ide-react/components/layout/placeholder/placeholder-history'
 import MainLayout from '@/features/ide-react/components/layout/main-layout'
 import { EditorAndSidebar } from '@/features/ide-react/components/editor-and-sidebar'
 import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu'
@@ -34,16 +33,9 @@ export default function IdePage() {
     return () => document.body.removeEventListener('click', listener)
   }, [listener])
 
-  const { chatIsOpen, view } = useLayoutContext()
-  const historyIsOpen = view === 'history'
+  const { chatIsOpen } = useLayoutContext()
 
-  const mainContent = historyIsOpen ? (
-    <PlaceholderHistory
-      shouldPersistLayout
-      leftColumnDefaultSize={leftColumnDefaultSize}
-      setLeftColumnDefaultSize={setLeftColumnDefaultSize}
-    />
-  ) : (
+  const mainContent = (
     <EditorAndSidebar
       leftColumnDefaultSize={leftColumnDefaultSize}
       setLeftColumnDefaultSize={setLeftColumnDefaultSize}

services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-history.tsx

@@ -15,7 +15,7 @@ export default function PlaceholderHistory({
   const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true)
 
   const leftColumnContent = (
-    <aside className="ide-react-placeholder-editor-sidebar">
+    <aside className="ide-react-placeholder-editor-sidebar history-file-tree">
       History file tree placeholder
     </aside>
   )