Fix displayed name in the project tab in hybrid mode (#12805)

Author: MrFlashAccount

app/common/src/text/english.json

@@ -1,5 +1,6 @@
 {
   "ellipsis": "...",
+  "projectTabBarErrorTitle": "Error loading project",
   "arbitraryMutationError": "An error occurred while performing an action. Please try again.",
   "arbitraryFetchError": "An error occurred while fetching data",
   "arbitraryFetchImageError": "An error occurred while fetching an image",
@@ -299,7 +300,6 @@
   "forward": "Forward",
   "more": "More",
   "close": "Close",
-
   "snowflakeCredentialType": "Snowflake",
   "snowflakeCredentialAccount": "Account",
   "snowflakeCredentialClientId": "Client ID",
@@ -320,7 +320,6 @@
   "credentialStateWaitingForAuthentication": "Authentication not finished",
   "credentialStateExpired": "Expired",
   "credentialExpiresAt": "Expires at",
-
   "enterSecretPath": "Enter secret path",
   "enterText": "Enter text",
   "enterNumber": "Enter number",

app/gui/src/dashboard/hooks/projectHooks.ts

@@ -256,24 +256,18 @@ export function useOpenProjectMutation() {
         ...asset,
         projectState: { ...asset.projectState, type: backendModule.ProjectState.openInProgress },
       }))
-
-      void client.cancelQueries({ queryKey })
     },
-    onSuccess: async (_, { type, id, title, parentId, hybrid }) => {
+    onSuccess: async (_, { title, hybrid }) => {
+      await client.cancelQueries({ queryKey: ['project'] })
       if (hybrid) {
         await remoteBackend.setHybridOpened(hybrid.cloudProjectId, title)
       }
-      await client.resetQueries({ queryKey: createGetProjectDetailsQuery.getQueryKey(id) })
-      await client.invalidateQueries({ queryKey: [type, 'listDirectory', parentId] })
     },
-    onError: async (_, { type, id, parentId }) => {
-      await client.invalidateQueries({ queryKey: createGetProjectDetailsQuery.getQueryKey(id) })
+    onError: async (_, { type, parentId }) => {
+      await client.invalidateQueries({ queryKey: ['project'] })
       await client.invalidateQueries({ queryKey: [type, 'listDirectory', parentId] })
     },
-    meta: {
-      invalidates: [['listDirectory']],
-      awaitInvalidates: true,
-    },
+    meta: { invalidates: [['listDirectory', 'project']], awaitInvalidates: true },
   })
 }
 
@@ -374,17 +368,20 @@ export function useCloseProjectMutation() {
 /** Mutation to rename a project. */
 export function useRenameProjectMutation() {
   const client = reactQuery.useQueryClient()
-  const remoteBackend = backendProvider.useRemoteBackend()
-  const localBackend = backendProvider.useLocalBackend()
   const updateLaunchedProjects = useUpdateLaunchedProjects()
 
   return reactQuery.useMutation({
     mutationKey: ['renameProject'],
-    mutationFn: ({ newName, project }: { newName: string; project: LaunchedProject }) => {
-      const { type, id, title } = project
-      const backend = type === backendModule.BackendType.remote ? remoteBackend : localBackend
-
-      invariant(backend != null, 'Backend is null')
+    mutationFn: ({
+      newName,
+      project,
+      backend,
+    }: {
+      newName: string
+      project: LaunchedProject
+      backend: Backend
+    }) => {
+      const { id, title } = project
 
       return backend.updateProject(id, { projectName: newName }, title)
     },

app/gui/src/dashboard/layouts/Editor.tsx

@@ -4,6 +4,7 @@ import * as suspense from '#/components/Suspense'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import * as gtagHooks from '#/hooks/gtagHooks'
 import * as projectHooks from '#/hooks/projectHooks'
+import { useTimeoutCallback } from '#/hooks/timeoutHooks'
 import * as backendProvider from '#/providers/BackendProvider'
 import type { LaunchedProject } from '#/providers/ProjectsProvider'
 import * as textProvider from '#/providers/TextProvider'
@@ -12,7 +13,7 @@ import * as twMerge from '#/utilities/tailwindMerge'
 import { vueComponent } from '#/utilities/vue'
 import * as reactQuery from '@tanstack/react-query'
 import * as React from 'react'
-import { useTimeoutCallback } from '../hooks/timeoutHooks'
+import invariant from 'tiny-invariant'
 
 const ProjectViewTab = React.lazy(() =>
   import('@/ProjectViewTab.vue').then(({ default: vue }) => vueComponent(vue)),
@@ -34,10 +35,11 @@ export interface EditorProps {
 }
 
 /** The container that launches the IDE. */
-function Editor(props: EditorProps) {
+export default function Editor(props: EditorProps) {
   const { project, hidden, startProject, isOpeningFailed, openingError } = props
 
   const backend = backendProvider.useBackendForProjectType(project.type)
+  const remoteBackend = backendProvider.useRemoteBackend()
 
   const projectStatusQuery = projectHooks.createGetProjectDetailsQuery({
     assetId: project.id,
@@ -46,6 +48,8 @@ function Editor(props: EditorProps) {
 
   const queryClient = reactQuery.useQueryClient()
 
+  const isHybrid = project.hybrid != null
+
   const projectQuery = reactQuery.useSuspenseQuery({
     ...projectStatusQuery,
     select: (data) => {
@@ -58,6 +62,17 @@ function Editor(props: EditorProps) {
     },
   })
 
+  // If it's a hybrid project, we need to fetch the project details from the remote backend.
+  const {
+    data: { name },
+  } = reactQuery.useSuspenseQuery({
+    ...projectHooks.createGetProjectDetailsQuery({
+      assetId: isHybrid ? project.hybrid.cloudProjectId : project.id,
+      backend: isHybrid ? remoteBackend : backend,
+    }),
+    select: (projectDetails) => ({ name: projectDetails.name }),
+  })
+
   const { isProjectClosed, isProjectOpening, isProjectOpened, isProjectClosing } = projectQuery.data
 
   React.useEffect(() => {
@@ -121,6 +136,7 @@ function Editor(props: EditorProps) {
                 {...props}
                 openedProject={projectQuery.data}
                 backendType={project.type}
+                projectName={name}
               />
             )
 
@@ -136,11 +152,12 @@ function Editor(props: EditorProps) {
 interface EditorInternalProps extends Omit<EditorProps, 'project'> {
   readonly openedProject: backendModule.Project
   readonly backendType: backendModule.BackendType
+  readonly projectName: string
 }
 
 /** An internal editor. */
 function EditorInternal(props: EditorInternalProps) {
-  const { hidden, ydocUrl, renameProject, openedProject, backendType } = props
+  const { hidden, ydocUrl, renameProject, openedProject, backendType, projectName } = props
 
   const { getText } = textProvider.useText()
   const gtagEvent = gtagHooks.useGtagEvent()
@@ -158,48 +175,31 @@ function EditorInternal(props: EditorInternalProps) {
     renameProject(newName, openedProject.projectId)
   })
 
-  const appProps = React.useMemo<ProjectViewTabProps>(() => {
-    const jsonAddress = openedProject.jsonAddress
-    const binaryAddress = openedProject.binaryAddress
-    const ydocAddress = openedProject.ydocAddress ?? ydocUrl ?? ''
-    const projectBackend =
-      backendType === backendModule.BackendType.remote ? remoteBackend : localBackend
-
-    if (jsonAddress == null) {
-      throw new Error(getText('noJSONEndpointError'))
-    } else if (binaryAddress == null) {
-      throw new Error(getText('noBinaryEndpointError'))
-    } else {
-      return {
-        hidden,
-        projectViewProps: {
-          projectId: openedProject.projectId,
-          projectName: openedProject.packageName,
-          projectDisplayedName: openedProject.name,
-          engine: { rpcUrl: jsonAddress, dataUrl: binaryAddress, ydocUrl: ydocAddress },
-          renameProject: onRenameProject,
-          projectBackend,
-          remoteBackend,
-        },
-      }
-    }
-  }, [
-    openedProject,
-    ydocUrl,
-    getText,
+  const jsonAddress = openedProject.jsonAddress
+  const binaryAddress = openedProject.binaryAddress
+  const ydocAddress = openedProject.ydocAddress ?? ydocUrl ?? ''
+  const projectBackend =
+    backendType === backendModule.BackendType.remote ? remoteBackend : localBackend
+
+  invariant(jsonAddress != null, getText('noJSONEndpointError'))
+  invariant(binaryAddress != null, getText('noBinaryEndpointError'))
+
+  const appProps = {
     hidden,
-    onRenameProject,
-    backendType,
-    localBackend,
-    remoteBackend,
-  ])
-  // EsLint does not handle types imported from vue files and their dependences.
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    projectViewProps: {
+      projectId: openedProject.projectId,
+      projectName: openedProject.packageName,
+      projectDisplayedName: projectName,
+      engine: { rpcUrl: jsonAddress, dataUrl: binaryAddress, ydocUrl: ydocAddress },
+      renameProject: onRenameProject,
+      projectBackend,
+      remoteBackend,
+    },
+  } as const
+
   const key: string = appProps.projectViewProps.projectId
 
   // Currently the GUI component needs to be fully rerendered whenever the project is changed. Once
   // this is no longer necessary, the `key` could be removed.
   return <ProjectViewTab key={key} {...appProps} />
 }
-
-export default React.memo(Editor)

app/gui/src/dashboard/layouts/TabBar.tsx

@@ -18,8 +18,9 @@ import SvgMask from '#/components/SvgMask'
 import { AnimatedBackground } from '#/components/AnimatedBackground'
 import { Await } from '#/components/Await'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import { useBackendForProjectType } from '#/providers/BackendProvider'
+import { useBackendForProjectType, useRemoteBackend } from '#/providers/BackendProvider'
 import { useInputBindings } from '#/providers/InputBindingsProvider'
+import { useText } from '#/providers/TextProvider'
 import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 import { twJoin } from '#/utilities/tailwindMerge'
@@ -144,8 +145,10 @@ const SPINNER = <StatelessSpinner state="loading-medium" size={16} />
 export function ProjectTab(props: ProjectTabProps) {
   const { project, onLoadEnd, onClose, icon: iconRaw, ...rest } = props
 
+  const { getText } = useText()
   const didNotifyOnLoadEnd = React.useRef(false)
   const backend = useBackendForProjectType(project.type)
+  const remoteBackend = useRemoteBackend()
 
   const stableOnLoadEnd = useEventCallback(() => {
     onLoadEnd?.(project)
@@ -155,14 +158,27 @@ export function ProjectTab(props: ProjectTabProps) {
     onClose?.(project)
   })
 
-  const { data, isSuccess, isError, promise } = reactQuery.useQuery({
+  const isHybrid = project.hybrid != null
+  const projectId = isHybrid ? project.hybrid.cloudProjectId : project.id
+
+  const { data, isSuccess, isError } = reactQuery.useQuery({
     ...projectHooks.createGetProjectDetailsQuery({ assetId: project.id, backend }),
     select: (projectDetails) => ({
-      title: projectDetails.name,
       isOpened: projectHooks.OPENED_PROJECT_STATES.has(projectDetails.state.type),
     }),
   })
 
+  // We get title separately because the title differs depending on whenever project is in hybrid mode
+  // but it's fine, because react-query will deduplicate the queries automatically
+  const { promise } = reactQuery.useQuery({
+    ...projectHooks.createGetProjectDetailsQuery({
+      assetId: projectId,
+      // If it's a hybrid project, we need to fetch the project details from the remote backend.
+      backend: isHybrid ? remoteBackend : backend,
+    }),
+    select: (projectDetails) => ({ title: projectDetails.name }),
+  })
+
   const isReady = isSuccess && data.isOpened
 
   React.useEffect(() => {
@@ -192,7 +208,11 @@ export function ProjectTab(props: ProjectTabProps) {
 
   return (
     <Tab {...rest} icon={icon} onClose={stableOnClose}>
-      <Await promise={promise} fallback={null}>
+      <Await
+        promise={promise}
+        fallback={<></>}
+        FallbackComponent={() => getText('projectTabBarErrorTitle')}
+      >
         {({ title }) => title}
       </Await>
     </Tab>

app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx

@@ -9,11 +9,13 @@ import { Suspense } from '#/components/Suspense'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useOpenProjectMutation, useRenameProjectMutation } from '#/hooks/projectHooks'
 import type { AssetManagementApi } from '#/layouts/AssetsTable'
+import { useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
 import { useLaunchedProjects, usePage } from '#/providers/ProjectsProvider'
-import type { ProjectId } from '#/services/Backend'
+import { BackendType, type ProjectId } from '#/services/Backend'
 import { omit } from 'enso-common/src/utilities/data/object'
 import { lazy, type ReactNode } from 'react'
 import { Collection } from 'react-aria-components'
+import invariant from 'tiny-invariant'
 
 /** The props for the {@link DashboardTabPanels} component. */
 export interface DashboardTabPanelsProps {
@@ -35,6 +37,8 @@ export function DashboardTabPanels(props: DashboardTabPanelsProps) {
   const launchedProjects = useLaunchedProjects()
   const openProjectMutation = useOpenProjectMutation()
   const renameProjectMutation = useRenameProjectMutation()
+  const remoteBackend = useRemoteBackend()
+  const localBackend = useLocalBackend()
 
   const onRenameProject = useEventCallback(async (newName: string, projectId: ProjectId) => {
     const project = launchedProjects.find((proj) => proj.id === projectId)
@@ -43,7 +47,17 @@ export function DashboardTabPanels(props: DashboardTabPanelsProps) {
       return
     }
 
-    await renameProjectMutation.mutateAsync({ newName, project })
+    const isHybrid = project.hybrid != null
+    const backendType = isHybrid ? BackendType.remote : project.type
+    const backend = backendType === BackendType.remote ? remoteBackend : localBackend
+    const id = isHybrid ? project.hybrid.cloudProjectId : project.id
+    invariant(backend != null, 'Backend is null')
+
+    await renameProjectMutation.mutateAsync({
+      newName,
+      backend,
+      project: { ...project, id },
+    })
   })
 
   const tabPanels = [