Merge pull request #15474 from overleaf/td-ide-page-file-and-multiple-view

React IDE page: implement file views and file delete handling

GitOrigin-RevId: 491cad7b147e55bc4a250da387916c7e2dff14ae

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

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { ReactNode, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ImperativePanelHandle,
@@ -9,21 +9,18 @@ import { HorizontalResizeHandle } from '@/features/ide-react/components/resize/h
 import { HorizontalToggler } from '@/features/ide-react/components/resize/horizontal-toggler'
 import useCollapsiblePanel from '@/features/ide-react/hooks/use-collapsible-panel'
 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 PdfPreview from '@/features/pdf-preview/components/pdf-preview'
+import { DefaultSynctexControl } from '@/features/pdf-preview/components/detach-synctex-control'
 import classnames from 'classnames'
 
 export type EditorProps = {
   shouldPersistLayout?: boolean
-  openDocId: string | null
-  fileTreeReady: boolean
+  editorContent: ReactNode
 }
 
-export default function Editor({
+export default function EditorAndPdf({
   shouldPersistLayout = false,
-  openDocId,
-  fileTreeReady,
+  editorContent,
 }: EditorProps) {
   const { t } = useTranslation()
   const { view, pdfLayout, changeLayout } = useLayoutContext()
@@ -35,10 +32,6 @@ export default function Editor({
 
   useCollapsiblePanel(pdfIsOpen, pdfPanelRef)
 
-  if (view === 'file') {
-    return <PlaceholderFile />
-  }
-
   const historyIsOpen = view === 'history'
 
   function setPdfIsOpen(isOpen: boolean) {
@@ -58,12 +51,13 @@ export default function Editor({
       className={classnames({ hide: historyIsOpen })}
     >
       {editorIsVisible ? (
-        <Panel id="editor" order={1} defaultSize={50}>
-          <EditorPane
-            shouldPersistLayout={shouldPersistLayout}
-            openDocId={openDocId}
-            fileTreeReady={fileTreeReady}
-          />
+        <Panel
+          id="editor"
+          order={1}
+          defaultSize={50}
+          className="ide-react-panel"
+        >
+          {editorContent}
         </Panel>
       ) : null}
       {isDualPane ? (
@@ -76,6 +70,9 @@ export default function Editor({
             tooltipWhenOpen={t('tooltip_hide_pdf')}
             tooltipWhenClosed={t('tooltip_show_pdf')}
           />
+          <div className="synctex-controls">
+            <DefaultSynctexControl />
+          </div>
         </HorizontalResizeHandle>
       ) : null}
       {pdfIsOpen ? (
@@ -87,8 +84,9 @@ export default function Editor({
           minSize={5}
           collapsible
           onCollapse={collapsed => setPdfIsOpen(!collapsed)}
+          className="ide-react-panel"
         >
-          <PlaceholderPdf />
+          <PdfPreview />
         </Panel>
       ) : null}
     </PanelGroup>

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

@@ -1,13 +1,28 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import TwoColumnMainContent from '@/features/ide-react/components/layout/two-column-main-content'
-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'
+import {
+  FileTreeDeleteHandler,
+  FileTreeDocumentFindResult,
+  FileTreeFileRefFindResult,
+  FileTreeFindResult,
+} from '@/features/ide-react/types/file-tree'
+import usePersistedState from '@/shared/hooks/use-persisted-state'
+import FileView from '@/features/file-view/components/file-view'
+import { FileRef } from '../../../../../types/file-ref'
+import { EditorPane } from '@/features/ide-react/components/editor/editor-pane'
+import EditorAndPdf from '@/features/ide-react/components/editor-and-pdf'
+import MultipleSelectionPane from '@/features/ide-react/components/editor/multiple-selection-pane'
+import NoSelectionPane from '@/features/ide-react/components/editor/no-selection-pane'
+import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
+import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
+import NoOpenDocPane from '@/features/ide-react/components/editor/no-open-doc-pane'
+import { debugConsole } from '@/utils/debugging'
+import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
 
 type EditorAndSidebarProps = {
   shouldPersistLayout: boolean
@@ -15,6 +30,25 @@ type EditorAndSidebarProps = {
   setLeftColumnDefaultSize: React.Dispatch<React.SetStateAction<number>>
 }
 
+// `FileViewHeader`, which is TypeScript, expects a BinaryFile, which has a
+// `created` property of type `Date`, while `TPRFileViewInfo`, written in JS,
+// into which `FileViewHeader` passes its BinaryFile, expects a file object with
+// `created` property of type `string`, which is a mismatch. `TPRFileViewInfo`
+// is the only one making runtime complaints and it seems that other uses of
+// `FileViewHeader` pass in a string for `created`, so that's what this function
+// does too.
+function fileViewFile(fileRef: FileRef) {
+  return {
+    _id: fileRef._id,
+    name: fileRef.name,
+    id: fileRef._id,
+    type: 'file',
+    selected: true,
+    linkedFileData: fileRef.linkedFileData,
+    created: fileRef.created,
+  }
+}
+
 export function EditorAndSidebar({
   shouldPersistLayout,
   leftColumnDefaultSize,
@@ -22,12 +56,21 @@ export function EditorAndSidebar({
 }: EditorAndSidebarProps) {
   const [leftColumnIsOpen, setLeftColumnIsOpen] = useState(true)
   const { rootDocId, _id: projectId } = useProjectContext()
+  const { eventEmitter } = useIdeReactContext()
+  const { openDocId: openDocWithId, currentDocumentId } =
+    useEditorManagerContext()
   const { view } = useLayoutContext()
   const historyIsOpen = view === 'history'
 
-  const [openDocId, setOpenDocId] = useState(
-    () => customLocalStorage.getItem(`doc.open_id.${projectId}`) || rootDocId
+  // Persist the open document ID in local storage
+  const [openDocId, setOpenDocId] = usePersistedState(
+    `doc.open_id.${projectId}`,
+    rootDocId
   )
+  const [openEntity, setOpenEntity] = useState<
+    FileTreeDocumentFindResult | FileTreeFileRefFindResult | null
+  >(null)
+  const [selectedEntityCount, setSelectedEntityCount] = useState(0)
   const [fileTreeReady, setFileTreeReady] = useState(false)
 
   const handleFileTreeInit = useCallback(() => {
@@ -36,37 +79,140 @@ export function EditorAndSidebar({
 
   const handleFileTreeSelect = useCallback(
     (selectedEntities: FileTreeFindResult[]) => {
-      const firstDocId =
-        selectedEntities.find(result => result.type === 'doc')?.entity._id ||
-        null
-      setOpenDocId(firstDocId)
+      debugConsole.log('File tree selection changed', selectedEntities)
+      setSelectedEntityCount(selectedEntities.length)
+      if (selectedEntities.length !== 1) {
+        setOpenEntity(null)
+        return
+      }
+      const [selected] = selectedEntities
+
+      if (selected.type === 'folder') {
+        return
+      }
+
+      setOpenEntity(selected)
+      if (selected.type === 'doc') {
+        setOpenDocId(selected.entity._id)
+      }
     },
-    []
+    [setOpenDocId]
   )
 
-  const leftColumnContent = (
+  const handleFileTreeDelete: FileTreeDeleteHandler = useCallback(
+    entity => {
+      eventEmitter.emit('entity:deleted', entity)
+      // Select the root document if the current document was deleted
+      if (entity.entity._id === openDocId) {
+        openDocWithId(rootDocId)
+      }
+    },
+    [eventEmitter, openDocId, openDocWithId, rootDocId]
+  )
+
+  // Synchronize the file tree when openDoc or openDocId is called on the editor
+  // manager context from elsewhere. If the file tree does change, it will
+  // trigger the onSelect handler in this component, which will update the local
+  // state.
+  useEffect(() => {
+    debugConsole.log(
+      `currentDocumentId changed to ${currentDocumentId}. Updating file tree`
+    )
+    if (currentDocumentId === null) {
+      return
+    }
+
+    window.dispatchEvent(
+      new CustomEvent('editor.openDoc', { detail: currentDocumentId })
+    )
+  }, [currentDocumentId])
+
+  // Store openDocWithId, which is unstable, in a ref and keep the ref
+  // synchronized with the source
+  const openDocWithIdRef = useRef(openDocWithId)
+
+  useEffect(() => {
+    openDocWithIdRef.current = openDocWithId
+  }, [openDocWithId])
+
+  // Open a document in the editor when the local document ID changes
+  useEffect(() => {
+    if (!fileTreeReady || !openDocId) {
+      return
+    }
+    debugConsole.log(
+      `Observed change in local state. Opening document with ID ${openDocId}`
+    )
+    openDocWithIdRef.current(openDocId)
+  }, [fileTreeReady, openDocId])
+
+  const leftColumnContent = historyIsOpen ? (
+    <HistorySidebar />
+  ) : (
     <EditorSidebar
       shouldPersistLayout={shouldPersistLayout}
       onFileTreeInit={handleFileTreeInit}
       onFileTreeSelect={handleFileTreeSelect}
+      onFileTreeDelete={handleFileTreeDelete}
     />
   )
 
-  const rightColumnContent = (
-    <>
-      {/* Recreate the history context when the history view is toggled */}
-      {historyIsOpen && (
-        <HistoryProvider>
-          <History />
-        </HistoryProvider>
-      )}
-      <Editor
+  let rightColumnContent
+
+  if (historyIsOpen) {
+    rightColumnContent = (
+      <HistoryProvider>
+        <History />
+      </HistoryProvider>
+    )
+  } else {
+    let editorContent = null
+
+    // Always have the editor mounted when not in history view, and hide and
+    // show it as necessary
+    const editorPane = (
+      <EditorPane
         shouldPersistLayout={shouldPersistLayout}
-        openDocId={openDocId}
-        fileTreeReady={fileTreeReady}
+        show={openEntity?.type === 'doc' && selectedEntityCount === 1}
       />
-    </>
-  )
+    )
+    if (openDocId === undefined) {
+      rightColumnContent = <NoOpenDocPane />
+    } else if (selectedEntityCount === 0) {
+      rightColumnContent = (
+        <>
+          {editorPane}
+          <NoSelectionPane />
+        </>
+      )
+    } else if (selectedEntityCount > 1) {
+      editorContent = (
+        <>
+          {editorPane}
+          <MultipleSelectionPane selectedEntityCount={selectedEntityCount} />
+        </>
+      )
+    } else if (openEntity) {
+      editorContent =
+        openEntity.type === 'doc' ? (
+          editorPane
+        ) : (
+          <>
+            {editorPane}
+            <FileView file={fileViewFile(openEntity.entity)} />
+          </>
+        )
+    }
+
+    if (editorContent) {
+      rightColumnContent = (
+        <EditorAndPdf
+          editorContent={editorContent}
+          shouldPersistLayout={shouldPersistLayout}
+        />
+      )
+    }
+  }
 
   return (
     <TwoColumnMainContent

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

@@ -2,31 +2,27 @@ 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'
+import {
+  FileTreeDeleteHandler,
+  FileTreeSelectHandler,
+} from '@/features/ide-react/types/file-tree'
 
 type EditorSidebarProps = {
   shouldPersistLayout: boolean
   onFileTreeInit: () => void
   onFileTreeSelect: FileTreeSelectHandler
+  onFileTreeDelete: FileTreeDeleteHandler
 }
 
 export default function EditorSidebar({
   shouldPersistLayout,
   onFileTreeInit,
   onFileTreeSelect,
+  onFileTreeDelete,
 }: EditorSidebarProps) {
-  const { view } = useLayoutContext()
-  const historyIsOpen = view === 'history'
-
   return (
     <>
-      <aside
-        className={classnames('ide-react-placeholder-editor-sidebar', {
-          hide: historyIsOpen,
-        })}
-      >
+      <aside className="ide-react-editor-sidebar">
         <PanelGroup
           autoSaveId={
             shouldPersistLayout ? 'ide-react-editor-sidebar-layout' : undefined
@@ -34,7 +30,11 @@ export default function EditorSidebar({
           direction="vertical"
         >
           <Panel defaultSize={75} className="ide-react-file-tree-panel">
-            <FileTree onInit={onFileTreeInit} onSelect={onFileTreeSelect} />
+            <FileTree
+              onInit={onFileTreeInit}
+              onSelect={onFileTreeSelect}
+              onDelete={onFileTreeDelete}
+            />
           </Panel>
           <VerticalResizeHandle />
           <Panel defaultSize={25}>
@@ -42,7 +42,6 @@ export default function EditorSidebar({
           </Panel>
         </PanelGroup>
       </aside>
-      <aside className="ide-react-placeholder-editor-sidebar history-file-tree" />
     </>
   )
 }

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

@@ -1,35 +1,26 @@
 import { Panel, PanelGroup } from 'react-resizable-panels'
 import { VerticalResizeHandle } from '@/features/ide-react/components/resize/vertical-resize-handle'
-import React, { ElementType, useEffect } from 'react'
+import React, { ElementType } from 'react'
 import useScopeValue from '@/shared/hooks/use-scope-value'
 import SourceEditor from '@/features/source-editor/components/source-editor'
-import {
-  EditorScopeValue,
-  useEditorManagerContext,
-} from '@/features/ide-react/context/editor-manager-context'
+import { EditorScopeValue } from '@/features/ide-react/context/editor-manager-context'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
-import { EditorProps } from '@/features/ide-react/components/editor/editor'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
 
 const symbolPaletteComponents = importOverleafModules(
   'sourceEditorSymbolPalette'
 ) as { import: { default: ElementType }; path: string }[]
 
-export function EditorPane({
-  shouldPersistLayout,
-  openDocId,
-  fileTreeReady,
-}: EditorProps) {
-  const { openDocId: openDocWithId } = useEditorManagerContext()
+export type EditorPaneProps = {
+  shouldPersistLayout?: boolean
+  show: boolean
+}
 
+export function EditorPane({ shouldPersistLayout, show }: EditorPaneProps) {
+  const { t } = useTranslation()
   const [editor] = useScopeValue<EditorScopeValue>('editor')
 
-  useEffect(() => {
-    if (!fileTreeReady || !openDocId) {
-      return
-    }
-    openDocWithId(openDocId)
-  }, [fileTreeReady, openDocId, openDocWithId])
-
   return (
     <PanelGroup
       autoSaveId={
@@ -39,21 +30,27 @@ export function EditorPane({
       }
       direction="vertical"
       units="pixels"
+      className={classNames({ hidden: !show })}
     >
       <Panel
-        id="editor"
+        id="sourceEditor"
         order={1}
         style={{
           display: 'flex',
           flexDirection: 'column',
         }}
       >
-        {!!editor.sharejs_doc &&
-        !editor.opening &&
-        editor.multiSelectedCount === 0 &&
-        !editor.error_state ? (
-          <SourceEditor />
+        {(!editor.sharejs_doc || editor.opening) &&
+        !editor.error_state &&
+        !!editor.open_doc_id ? (
+          <div className="loading-panel">
+            <span>
+              <i className="fa fa-spin fa-refresh" />
+              &nbsp;&nbsp;{t('loading')}…
+            </span>
+          </div>
         ) : null}
+        <SourceEditor />
       </Panel>
       {editor.showSymbolPalette ? (
         <>
@@ -65,7 +62,7 @@ export function EditorPane({
             minSize={250}
             maxSize={336}
           >
-            <div className="ide-react-placeholder-symbol-palette">
+            <div className="ide-react-symbol-palette">
               {symbolPaletteComponents.map(
                 ({ import: { default: Component }, path }) => (
                   <Component key={path} />

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

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+
+export default function MultipleSelectionPane({
+  selectedEntityCount,
+}: {
+  selectedEntityCount: number
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="multi-selection-ongoing">
+      <div className="multi-selection-message">
+        <h4>{`${selectedEntityCount} ${t('files_selected')}`}</h4>
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/ide-react/components/editor/no-open-doc-pane.tsx

@@ -0,0 +1,14 @@
+import { useTranslation } from 'react-i18next'
+
+export default function NoOpenDocPane() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="loading-panel">
+      <span>
+        <i className="fa fa-arrow-left" />
+        &nbsp;&nbsp;{t('open_a_file_on_the_left')}
+      </span>
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next'
+
+export default function NoSelectionPane() {
+  const { t } = useTranslation()
+
+  return (
+    <div className="no-file-selection">
+      <div className="no-file-selection-message">
+        <h3>{t('no_selection_select_file')}</h3>
+      </div>
+    </div>
+  )
+}

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

@@ -4,15 +4,19 @@ import { useUserContext } from '@/shared/context/user-context'
 import { useReferencesContext } from '@/features/ide-react/context/references-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
-import { FileTreeSelectHandler } from '@/features/ide-react/types/file-tree'
+import {
+  FileTreeDeleteHandler,
+  FileTreeSelectHandler,
+} from '@/features/ide-react/types/file-tree'
 import { RefProviders } from '../../../../../types/user'
 
 type FileTreeProps = {
   onInit: () => void
   onSelect: FileTreeSelectHandler
+  onDelete: FileTreeDeleteHandler
 }
 
-export function FileTree({ onInit, onSelect }: FileTreeProps) {
+export function FileTree({ onInit, onSelect, onDelete }: FileTreeProps) {
   const user = useUserContext()
   const { indexAllReferences } = useReferencesContext()
   const { setStartedFreeTrial } = useIdeReactContext()
@@ -43,6 +47,7 @@ export function FileTree({ onInit, onSelect }: FileTreeProps) {
         isConnected={isConnected}
         onInit={onInit}
         onSelect={onSelect}
+        onDelete={onDelete}
       />
     </div>
   )

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

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function HistorySidebar() {
+  return <aside className="ide-react-editor-sidebar history-file-tree" />
+}

services/web/frontend/js/features/ide-react/components/layout/placeholder/placeholder-editor-and-pdf.tsx

@@ -58,7 +58,7 @@ export default function PlaceholderEditorAndPdf({
                 minSize={250}
                 maxSize={336}
               >
-                <div className="ide-react-placeholder-symbol-palette ">
+                <div className="ide-react-symbol-palette ">
                   Symbol palette placeholder
                 </div>
               </Panel>

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

@@ -10,7 +10,7 @@ export default function PlaceholderEditorSidebar({
   shouldPersistLayout,
 }: PlaceholderEditorSidebarProps) {
   return (
-    <aside className="ide-react-placeholder-editor-sidebar">
+    <aside className="ide-react-editor-sidebar">
       <PanelGroup
         autoSaveId={
           shouldPersistLayout ? 'ide-react-editor-sidebar-layout' : undefined

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

@@ -1,8 +1,6 @@
 import React from 'react'
 import ChatToggleButton from '@/features/editor-navigation-toolbar/components/chat-toggle-button'
-import ShareProjectButton from '@/features/editor-navigation-toolbar/components/share-project-button'
 import HistoryToggleButton from '@/features/editor-navigation-toolbar/components/history-toggle-button'
-import LayoutDropdownButton from '@/features/editor-navigation-toolbar/components/layout-dropdown-button'
 
 type PlaceholderHeaderProps = {
   chatIsOpen: boolean
@@ -17,8 +15,6 @@ export default function PlaceholderHeader({
   historyIsOpen,
   setHistoryIsOpen,
 }: PlaceholderHeaderProps) {
-  function handleOpenShareModal() {}
-
   function toggleChatOpen() {
     setChatIsOpen(!chatIsOpen)
   }
@@ -31,12 +27,10 @@ export default function PlaceholderHeader({
     <header className="toolbar toolbar-header">
       <div className="toolbar-left">Header placeholder</div>
       <div className="toolbar-right">
-        <ShareProjectButton onClick={handleOpenShareModal} />
         <HistoryToggleButton
           historyIsOpen={historyIsOpen}
           onClick={toggleHistoryOpen}
         />
-        <LayoutDropdownButton />
         <ChatToggleButton
           chatIsOpen={chatIsOpen}
           onClick={toggleChatOpen}

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 history-file-tree">
+    <aside className="ide-react-editor-sidebar history-file-tree">
       History file tree placeholder
     </aside>
   )

services/web/frontend/js/features/ide-react/components/layout/two-column-main-content.tsx

@@ -74,7 +74,7 @@ export default function TwoColumnMainContent({
           tooltipWhenClosed={t('tooltip_show_filetree')}
         />
       </HorizontalResizeHandle>
-      <Panel>{rightColumnContent}</Panel>
+      <Panel className="ide-react-panel">{rightColumnContent}</Panel>
     </PanelGroup>
   )
 }