[workbench] Improve asynchronous tool use (#30184)

GitOrigin-RevId: d1bd33469b557c29968049af99b9c3c85731151d

services/web/frontend/js/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root.tsx

@@ -20,7 +20,10 @@ const EditorNavigationToolbarRoot = React.memo(
     openShareProjectModal,
   }: {
     onlineUsersArray: OnlineUser[]
-    openDoc: (doc: Doc, { gotoLine }: { gotoLine: number }) => void
+    openDoc: (
+      doc: Doc,
+      { gotoLine }: { gotoLine: number }
+    ) => Promise<Doc | undefined>
     openShareProjectModal: () => void
   }) {
     const {
@@ -93,9 +96,9 @@ const EditorNavigationToolbarRoot = React.memo(
     }, [setLeftMenuShown])
 
     const goToUser = useCallback(
-      (user: OnlineUser) => {
+      async (user: OnlineUser) => {
         if (user.doc && typeof user.row === 'number') {
-          openDoc(user.doc, { gotoLine: user.row + 1 })
+          return await openDoc(user.doc, { gotoLine: user.row + 1 })
         }
       },
       [openDoc]

services/web/frontend/js/features/editor-navigation-toolbar/components/online-users-widget.tsx

@@ -11,13 +11,14 @@ import { getBackgroundColorForUserId } from '@/shared/utils/colors'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 import { OnlineUser } from '@/features/ide-react/context/online-users-context'
+import { Doc } from '@ol-types/doc'
 
 function OnlineUsersWidget({
   onlineUsers,
   goToUser,
 }: {
   onlineUsers: OnlineUser[]
-  goToUser: (user: OnlineUser) => void
+  goToUser: (user: OnlineUser) => Promise<Doc | undefined>
 }) {
   const { t } = useTranslation()
 

services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.tsx

@@ -19,6 +19,7 @@ import TryNewEditorButton from '../try-new-editor-button'
 import { OnlineUser } from '@/features/ide-react/context/online-users-context'
 import { Cobranding } from '../../../../../types/cobranding'
 import { canUseNewEditor } from '@/features/ide-redesign/utils/new-editor-utils'
+import { Doc } from '@ol-types/doc'
 
 const [publishModalModules] = importOverleafModules('publishModal') as {
   import: { default: ElementType }
@@ -50,7 +51,7 @@ export type ToolbarHeaderProps = {
   toggleHistoryOpen: () => void
   unreadMessageCount: number
   onlineUsers: OnlineUser[]
-  goToUser: (user: OnlineUser) => void
+  goToUser: (user: OnlineUser) => Promise<Doc | undefined>
   isRestrictedTokenMember: boolean | undefined
   hasPublishPermissions: boolean
   chatVisible: boolean

services/web/frontend/js/features/file-tree/components/file-tree-create/modes/file-tree-create-new-doc.tsx

@@ -31,7 +31,7 @@ export default function FileTreeCreateNewDoc() {
       })
 
       if (doc) {
-        openDoc(doc)
+        return await openDoc(doc)
       }
     },
     [finishCreatingDoc, name, openDoc]

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

@@ -54,11 +54,14 @@ export type EditorManager = {
   getCurrentDocValue: () => string | null
   getCurrentDocumentId: () => DocId | null
   setIgnoringExternalUpdates: (value: boolean) => void
-  openDocWithId: (docId: string, options?: OpenDocOptions) => void
+  openDocWithId: (
+    docId: string,
+    options?: OpenDocOptions
+  ) => Promise<Doc | undefined>
   openDoc: (document: Doc, options?: OpenDocOptions) => Promise<Doc | undefined>
   openDocs: OpenDocuments
   openFileWithId: (fileId: string) => void
-  openInitialDoc: (docId?: string) => void
+  openInitialDoc: (docId?: string) => Promise<Doc | undefined>
   isLoading: boolean
   jumpToLine: (options: GotoLineOptions) => void
   debugTimers: React.MutableRefObject<Record<string, number>>
@@ -486,12 +489,12 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
   )
 
   const openDocWithId = useCallback(
-    (docId: string, options: OpenDocOptions = {}) => {
+    async (docId: string, options: OpenDocOptions = {}) => {
       const doc = findDocEntityById(fileTreeData, docId)
       if (!doc) {
         return
       }
-      openDoc(doc, options)
+      return await openDoc(doc, options)
     },
     [fileTreeData, openDoc]
   )
@@ -513,11 +516,11 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
   )
 
   const openInitialDoc = useCallback(
-    (fallbackDocId?: string) => {
+    async (fallbackDocId?: string) => {
       const docId =
         customLocalStorage.getItem(currentDocumentIdStorageKey) || fallbackDocId
       if (docId) {
-        openDocWithId(docId)
+        return await openDocWithId(docId)
       }
     },
     [currentDocumentIdStorageKey, openDocWithId]
@@ -580,7 +583,7 @@ export const EditorManagerProvider: FC<React.PropsWithChildren> = ({
       }
 
       const handleProjectJoined = () => {
-        openDoc(doc, { forceReopen: true })
+        return openDoc(doc, { forceReopen: true })
       }
 
       eventEmitter.once('project:joined', handleProjectJoined)

services/web/frontend/js/features/ide-redesign/components/online-users/online-users-widget.tsx

@@ -14,6 +14,7 @@ import {
 import classNames from 'classnames'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Doc } from '@ol-types/doc'
 
 // Should be kept in sync with $max-user-circles-displayed CSS constant
 const MAX_USER_CIRCLES_DISPLAYED = 5
@@ -26,7 +27,7 @@ export const OnlineUsersWidget = ({
   goToUser,
 }: {
   onlineUsers: OnlineUser[]
-  goToUser: (user: OnlineUser) => void
+  goToUser: (user: OnlineUser) => Promise<Doc | undefined>
 }) => {
   const hasOverflow = onlineUsers.length > MAX_USER_CIRCLES_DISPLAYED
   const usersBeforeOverflow = useMemo(

services/web/frontend/js/features/ide-redesign/components/toolbar/online-users.tsx

@@ -11,9 +11,9 @@ export const OnlineUsers = () => {
   const { onlineUsersArray } = useOnlineUsersContext()
 
   const goToUser = useCallback(
-    (user: OnlineUser) => {
+    async (user: OnlineUser) => {
       if (user.doc && typeof user.row === 'number') {
-        openDoc(user.doc, { gotoLine: user.row + 1 })
+        return await openDoc(user.doc, { gotoLine: user.row + 1 })
       }
     },
     [openDoc]

services/web/frontend/js/features/pdf-preview/hooks/use-compile-triggers.ts

@@ -33,7 +33,7 @@ export const startCompileKeypress = (
 }
 
 export default function useCompileTriggers(
-  startCompile: (...args: any[]) => void,
+  startCompile: (...args: any[]) => Promise<void>,
   setChangedAt: (...args: any[]) => void
 ) {
   const handleKeyDown = useCallback(

services/web/frontend/js/shared/context/local-compile-context.tsx

@@ -120,7 +120,7 @@ export type CompileContext = {
   setAnimateCompileDropdownArrow: (value: boolean) => void
   recompileFromScratch: () => void
   setCompiling: (value: boolean) => void
-  startCompile: (options?: any) => void
+  startCompile: (options?: any) => Promise<void>
   stopCompile: () => void
   setChangedAt: (value: any) => void
   clearCache: () => void
@@ -700,14 +700,14 @@ export const LocalCompileProvider: FC<React.PropsWithChildren> = ({
   const startCompile = useCallback(
     (options: any) => {
       setCompiledOnce(true)
-      compiler.compile(options)
+      return compiler.compile(options)
     },
     [compiler, setCompiledOnce]
   )
 
   // stop a compile manually
   const stopCompile = useCallback(() => {
-    compiler.stopCompile()
+    return compiler.stopCompile()
   }, [compiler])
 
   // clear the compile cache

services/web/frontend/js/shared/hooks/use-detach-action.js

@@ -21,7 +21,7 @@ export default function useDetachAction(
       if (role === senderRole) {
         broadcastEvent(eventName, { args })
       } else {
-        actionFunction(...args)
+        return actionFunction(...args)
       }
     },
     [role, senderRole, eventName, actionFunction, broadcastEvent]

services/web/frontend/stories/online-users.stories.tsx

@@ -40,7 +40,10 @@ export const OnlineUsersRedesign = ({ users }: { users: number }) => {
         padding: '20px',
       }}
     >
-      <OnlineUsersWidget onlineUsers={generatedUsers} goToUser={() => {}} />
+      <OnlineUsersWidget
+        onlineUsers={generatedUsers}
+        goToUser={(async () => {}) as any}
+      />
     </div>
   )
 }
@@ -54,7 +57,10 @@ export const OnlineUsersOld = ({ users }: { users: number }) => {
         padding: '20px',
       }}
     >
-      <OnlineUsersWidgetOld onlineUsers={generatedUsers} goToUser={() => {}} />
+      <OnlineUsersWidgetOld
+        onlineUsers={generatedUsers}
+        goToUser={(async () => {}) as any}
+      />
     </div>
   )
 }

services/web/test/frontend/features/editor-navigation-toolbar/components/online-users-widget.test.tsx

@@ -20,7 +20,7 @@ describe('<OnlineUsersWidget />', function () {
         email: 'another_test_email',
       },
     ],
-    goToUser: () => {},
+    goToUser: (async () => {}) as any,
   }
 
   describe('with less than 4 users', function () {

services/web/test/frontend/features/editor-navigation-toolbar/components/toolbar-header.test.tsx

@@ -14,7 +14,7 @@ describe('<ToolbarHeader />', function () {
     toggleHistoryOpen: () => {},
     unreadMessageCount: 0,
     onlineUsers: [],
-    goToUser: () => {},
+    goToUser: (async () => {}) as any,
     projectName: 'test project',
     renameProject: () => {},
     openShareModal: () => {},