Merge pull request #15653 from overleaf/td-ide-page-wait-before-open-doc

React IDE page: open a document after project:joined handling has finished

GitOrigin-RevId: ce48b5fabf7124c37b811b4be132cb28f1eb9857

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

@@ -71,6 +71,7 @@ export function EditorAndSidebar({
     openInitialDoc,
   } = useEditorManagerContext()
   const { view } = useLayoutContext()
+  const { projectJoined } = useIdeReactContext()
   const [, setOpenFile] = useScopeValue<BinaryFile | null>('openFile')
 
   const historyIsOpen = view === 'history'
@@ -143,14 +144,14 @@ export function EditorAndSidebar({
     )
   }, [openDocId])
 
-  // Open a document once the file tree is ready
+  // Open a document once the file tree and project are ready
   const initialOpenDoneRef = useRef(false)
   useEffect(() => {
-    if (fileTreeReady && !initialOpenDoneRef.current) {
+    if (fileTreeReady && projectJoined && !initialOpenDoneRef.current) {
       initialOpenDoneRef.current = true
       openInitialDoc(rootDocId)
     }
-  }, [fileTreeReady, openInitialDoc, rootDocId])
+  }, [fileTreeReady, openInitialDoc, projectJoined, rootDocId])
 
   // Keep the editor file tree around so that it is available and up to date
   // when restoring a file

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

@@ -463,6 +463,7 @@ export const EditorManagerProvider: FC = ({ children }) => {
           )
           return
         }
+        debugConsole.error('Error opening document', error)
         showGenericMessageModal(
           t('error_opening_document'),
           t('error_opening_document_detail')

services/web/frontend/js/features/ide-react/context/ide-react-context.tsx

@@ -36,6 +36,7 @@ type IdeReactContextValue = {
     React.SetStateAction<IdeReactContextValue['startedFreeTrial']>
   >
   reportError: (error: any, meta?: Record<string, any>) => void
+  projectJoined: boolean
 }
 
 const IdeReactContext = createContext<IdeReactContextValue | undefined>(
@@ -95,6 +96,10 @@ export const IdeReactProvider: FC = ({ children }) => {
   const [eventLog] = useState(() => new EventLog())
   const [startedFreeTrial, setStartedFreeTrial] = useState(false)
 
+  // Set to true only after project:joined has fired and all its listeners have
+  // been called
+  const [projectJoined, setProjectJoined] = useState(false)
+
   const { socket } = useConnectionContext()
 
   const reportError = useCallback(
@@ -140,6 +145,7 @@ export const IdeReactProvider: FC = ({ children }) => {
       // Make watchers update immediately
       scopeStore.flushUpdates()
       eventEmitter.emit('project:joined', { project, permissionsLevel })
+      setProjectJoined(true)
     }
 
     socket.on('joinProjectResponse', handleJoinProjectResponse)
@@ -154,13 +160,6 @@ export const IdeReactProvider: FC = ({ children }) => {
       ...getMockIde(),
       socket,
       reportError,
-      // TODO: MIGRATION: Remove this once it's no longer used
-      fileTreeManager: {
-        findEntityByPath: () => null,
-        selectEntity: () => {},
-        getPreviewByPath: () => null,
-        getRootDocDirname: () => '',
-      },
     }
   }, [socket, reportError])
 
@@ -172,8 +171,9 @@ export const IdeReactProvider: FC = ({ children }) => {
       setStartedFreeTrial,
       projectId,
       reportError,
+      projectJoined,
     }),
-    [eventEmitter, eventLog, reportError, startedFreeTrial]
+    [eventEmitter, eventLog, projectJoined, reportError, startedFreeTrial]
   )
 
   return (