Open project improvements (#13778)

Fixes #13775

https://github.com/user-attachments/assets/b6fe118f-1bff-4bf7-a89d-901144de5ef3

(there's now no moment of dashboard being visible before opening Welcome Project)

Author: farmaazon

app/gui/src/components/AppContainer/AppContainerInner.vue

@@ -2,7 +2,12 @@
 import type { PaywallFeatureName } from '#/hooks/billing'
 import { UserBar as UserBarReact } from '#/pages/dashboard/UserBar'
 import { BackendType, EnsoPath, type ProjectId } from '#/services/Backend'
-import { useContainerData, type LaunchedProject, type TabId } from '$/providers/container'
+import {
+  OpenedProject,
+  useContainerData,
+  type LaunchedProject,
+  type TabId,
+} from '$/providers/container'
 import { RightPanelDataProviderForReact } from '$/providers/react/container'
 import { provideRightPanelData } from '$/providers/rightPanel'
 import { appContainerBindings } from '@/bindings'
@@ -41,7 +46,7 @@ const emit = defineEmits<{
 // with veaury's ref assignment implementation that runs during parent React component lifecycle.
 const fullscreenRoot = shallowRef<HTMLElement>()
 
-const { tab, openedProjects } = toRefs(useContainerData())
+const { tab, openingProjects, openedProjects } = toRefs(useContainerData())
 provideRightPanelData(tab, props.isFeatureUnderPaywall)
 provideFullscreenRoot(fullscreenRoot)
 
@@ -57,12 +62,22 @@ function setProjectReady(project: ProjectId, projectTab: TabId, ready: boolean)
   }
 }
 
-function loadingProjectSpinnerPhase(project: LaunchedProject) {
-  return project.hybrid != null || project.type === BackendType.local ?
+function loadingProjectSpinnerPhase(project: OpenedProject) {
+  return (
+      project.state === 'launched' && (project.hybrid != null || project.type === BackendType.local)
+    ) ?
       'loading-fast'
     : 'loading-slow'
 }
 
+function closeOpenedProject(project: OpenedProject) {
+  if (project.state === 'launched') {
+    emit('closeProject', project)
+  } else {
+    openingProjects.value.delete(project.id)
+  }
+}
+
 watch(openedProjects, (openedProjectsList) => {
   const openedProjectsSet = new Set(openedProjectsList.map((proj) => proj.id))
   for (const proj of readyProjects) {
@@ -92,7 +107,7 @@ function closeTab() {
     default: {
       // project id
       const project = openedProjects.value.find((proj) => proj.ensoPath === tab.value)
-      if (project) emit('closeProject', project)
+      if (project) closeOpenedProject(project)
       break
     }
   }
@@ -142,7 +157,7 @@ const onSignOut = () => {
           :icon="readyProjects.has(project.id) ? 'graph_editor' : undefined"
           :label="projectNames.get(project.id)"
           @update:selected="$event && (tab = EnsoPath(project.ensoPath))"
-          @close="emit('closeProject', project)"
+          @close="closeOpenedProject(project)"
         >
           <GrowingSpinner
             v-if="!readyProjects.has(project.id)"
@@ -166,19 +181,21 @@ const onSignOut = () => {
         <KeepAlive>
           <Drive v-if="tab === 'drive'" />
         </KeepAlive>
-        <div
-          v-for="project in openedProjects"
-          :key="project.id"
-          class="editor"
-          :class="{ hidden: !project.shown.value }"
-        >
-          <Editor
-            :hidden="!project.shown.value"
-            :project="project"
-            @readyUpdate="setProjectReady(project.id, EnsoPath(project.ensoPath), $event)"
-            @nameUpdate="projectNames.set(project.id, $event)"
-          />
-        </div>
+        <template v-for="project in openedProjects">
+          <div
+            v-if="project.state === 'launched'"
+            :key="project.id"
+            class="editor"
+            :class="{ hidden: !project.shown.value }"
+          >
+            <Editor
+              :hidden="!project.shown.value"
+              :project="project"
+              @readyUpdate="setProjectReady(project.id, EnsoPath(project.ensoPath), $event)"
+              @nameUpdate="projectNames.set(project.id, $event)"
+            />
+          </div>
+        </template>
 
         <KeepAlive>
           <Settings v-if="tab === 'settings'" />

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

@@ -10,15 +10,16 @@ import type { LaunchedProject, LaunchedProjectId } from '$/providers/container'
 import * as authProvider from '$/providers/react'
 import {
   useAddLaunchedProject,
+  useAddOpeningProject,
   useContainerData,
   useRemoveLaunchedProject,
+  useRemoveOpeningProject,
   useUpdateLaunchedProjects,
 } from '$/providers/react/container'
 
 import { useCanRunProjects } from '#/hooks/backendHooks'
 import { useUploadFileMutation } from '#/hooks/backendUploadFilesHooks'
 import { useToastAndLog } from '#/hooks/toastAndLogHooks'
-import { useAddOpeningProject, useRemoveOpeningProject } from '#/providers/ProjectsProvider/hooks'
 import type Backend from '#/services/Backend'
 import * as backendModule from '#/services/Backend'
 import { useBackends } from '$/providers/react'
@@ -206,7 +207,7 @@ createGetProjectDetailsQuery.getQueryKey = (id: LaunchedProjectId) => ['project'
 
 const OPEN_PROJECT_MUTATION_KEY = ['openProject'] as const
 
-/** A mutation to open a project. */
+/** A mutation to open a project in backend. */
 export function useOpenProjectMutation() {
   const client = reactQuery.useQueryClient()
   const session = authProvider.useFullUserSession()
@@ -225,8 +226,9 @@ export function useOpenProjectMutation() {
       hybrid,
       inBackground = false,
       suppressHybridProjectOpen: _ = false,
+      ensoPath,
     }: LaunchedProject & { inBackground?: boolean; suppressHybridProjectOpen?: boolean }) => {
-      addOpeningProject(hybrid?.cloudProjectId ?? id)
+      addOpeningProject(hybrid?.cloudProjectId ?? id, ensoPath)
       const backend = type === backendModule.BackendType.remote ? remoteBackend : localBackend
 
       invariant(backend != null, 'Backend is null')
@@ -460,7 +462,7 @@ function useOpenProject() {
       const queryKey = createGetProjectDetailsQuery.getQueryKey(project.id)
       client.setQueryData(queryKey, { state: { type: backendModule.ProjectState.openInProgress } })
 
-      addOpeningProject(project.hybrid?.cloudProjectId ?? project.id)
+      addOpeningProject(project.hybrid?.cloudProjectId ?? project.id, project.ensoPath)
 
       if (!enableMultitabs) {
         // Since multiple tabs cannot be opened at the same time, the opened projects need to be closed first.
@@ -516,7 +518,7 @@ function useOpenHybridProject() {
 
       try {
         invariant(localBackend != null, 'Local Backend is null')
-        addOpeningProject(asset.id)
+        addOpeningProject(asset.id, asset.ensoPath)
         const projectSessionId = await remoteBackend.setHybridOpenInProgress(asset.id, asset.title)
         const localProject = await remoteBackend.downloadProject(asset.id)
         const cloudProjectDirectoryPath = backendModule.EnsoPath(
@@ -537,7 +539,6 @@ function useOpenHybridProject() {
           }
         }
 
-        removeOpeningProject(asset.id)
         invariant(project, 'Downloaded cloud project does not exist in Local Backend.')
         launchedProject = {
           id: project.id,
@@ -555,12 +556,13 @@ function useOpenHybridProject() {
         }
         await openProject(launchedProject)
       } catch (error) {
-        removeOpeningProject(asset.id)
         toastAndLog('openProjectError', error, asset.title)
         await Promise.allSettled([
           closeProject({ ...asset, type: backendModule.BackendType.remote }),
           ...(launchedProject ? [closeProject(launchedProject)] : []),
         ])
+      } finally {
+        removeOpeningProject(asset.id)
       }
     },
   )
@@ -667,6 +669,7 @@ export function useCloseAllProjects() {
   const closeProject = useCloseProject()
   const containerData = useContainerData()
   const removeLaunchedProject = useRemoveLaunchedProject()
+  const removeOpeningProject = useRemoveOpeningProject()
   const { remoteBackend, localBackend } = useBackends()
   const ensureQueryData = useEnsureQueryData()
 
@@ -675,21 +678,25 @@ export function useCloseAllProjects() {
 
     await Promise.all(
       launchedProjects.map(async (project) => {
-        const backend =
-          project.type === backendModule.BackendType.remote || project.hybrid != null ?
-            remoteBackend
-          : localBackend
-        invariant(backend != null, 'Backend must not be async null')
-        const projectDetails = await ensureQueryData(
-          createGetProjectDetailsQuery({
-            assetId: project.hybrid != null ? project.hybrid.cloudProjectId : project.id,
-            backend,
-          }),
-        )
-        if (backendModule.IS_OPENING_OR_OPENED[projectDetails.state.type]) {
-          await closeProject(project)
+        if (project.state === 'launched') {
+          const backend =
+            project.type === backendModule.BackendType.remote || project.hybrid != null ?
+              remoteBackend
+            : localBackend
+          invariant(backend != null, 'Backend must not be async null')
+          const projectDetails = await ensureQueryData(
+            createGetProjectDetailsQuery({
+              assetId: project.hybrid != null ? project.hybrid.cloudProjectId : project.id,
+              backend,
+            }),
+          )
+          if (backendModule.IS_OPENING_OR_OPENED[projectDetails.state.type]) {
+            await closeProject(project)
+          } else {
+            removeLaunchedProject(project.id)
+          }
         } else {
-          removeLaunchedProject(project.id)
+          removeOpeningProject(project.id)
         }
       }),
     )

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

@@ -68,7 +68,7 @@ export function Dashboard(props: DashboardProps) {
     (lp) => lp.id === props.projectToOpen?.asset.id,
   )
   const initialAlreadyLaunchedHybridProject = launchedProjects.find(
-    (lp) => lp.hybrid?.cloudProjectId === props.projectToOpen?.asset.id,
+    (lp) => lp.state === 'launched' && lp.hybrid?.cloudProjectId === props.projectToOpen?.asset.id,
   )
 
   usePrefetchQuery({

app/gui/src/providers/container.ts

@@ -3,7 +3,7 @@ import LocalStorage from '#/utilities/LocalStorage'
 import { createContextStore } from '@/providers'
 import { proxyRefs } from '@/util/reactivity'
 import { normalizeRouteParamToString } from '@/util/router'
-import { computed } from 'vue'
+import { computed, reactive, Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import * as z from 'zod'
 
@@ -55,6 +55,22 @@ LocalStorage.registerKey('launchedProjects', {
   schema: LAUNCHED_PROJECT_SCHEMA,
 })
 
+/**
+ * A project opened by user
+ *
+ * State "opening" means that we still do some processing before actually opening
+ * (like downloading project for hybrid run). Usually we don't have all information to construct
+ * {@link LaunchedProject} at this stage.
+ *
+ * State "launched" is a state where {@link LaunchedProject} is available. The project may still
+ * be initializing, though.
+ */
+// TODO[ao]: this is convoluted and shall be improved in https://github.com/enso-org/enso/issues/13491
+export type OpenedProject = (
+  | { state: 'opening'; id: ProjectId; ensoPath: string }
+  | ({ state: 'launched' } & LaunchedProject)
+) & { shown: Ref<boolean> }
+
 /** Tab identifier, equal to the path of the view's URL. */
 export type TabId = 'drive' | 'settings' | EnsoPath
 
@@ -78,13 +94,27 @@ export const [provideContainerData, useContainerData] = createContextStore(
     const route = useRoute()
     const localStorage = LocalStorage.getInstance()
 
-    const openedProjects = computed(
-      () =>
-        localStorage.get('launchedProjects')?.map((lp) => ({
-          ...lp,
-          shown: computed(() => tab.value === lp.ensoPath),
-        })) ?? [],
-    )
+    const launchedProjects = computed(() => localStorage.get('launchedProjects') ?? [])
+
+    const openingProjects = reactive(new Map<ProjectId, EnsoPath>())
+
+    const openedProjects = computed<OpenedProject[]>(() => {
+      const launched = launchedProjects.value.map(
+        (project) => ({ state: 'launched', ...project }) as Omit<OpenedProject, 'shown'>,
+      )
+      const opened = [...openingProjects.entries()]
+        .map(
+          ([id, ensoPath]) => ({ state: 'opening', id, ensoPath }) as Omit<OpenedProject, 'shown'>,
+        )
+        .filter(({ ensoPath }) => launched.find((project) => project.ensoPath === ensoPath) == null)
+      return launched.concat(opened).map(
+        (project) =>
+          ({
+            ...project,
+            shown: computed(() => tab.value === project.ensoPath),
+          }) as OpenedProject,
+      )
+    })
 
     const isValidTab = (name: string | undefined): name is TabId =>
       name === 'drive' ||
@@ -119,6 +149,7 @@ export const [provideContainerData, useContainerData] = createContextStore(
 
     return proxyRefs({
       openedProjects,
+      openingProjects,
       tab,
       addLaunchedProject,
       removeLaunchedProject,

app/gui/src/providers/react/container.tsx

@@ -1,4 +1,5 @@
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { EnsoPath, ProjectId } from '#/services/Backend'
 import { ContainerData, useContainerData as useContainerDataVue } from '$/providers/container'
 import { RightPanelData, useRightPanelData as useRightPanelDataVue } from '$/providers/rightPanel'
 import { reactComponent } from '@/util/react'
@@ -88,3 +89,19 @@ export function useClearLaunchedProjects() {
     updateLaunchedProjects(() => [])
   })
 }
+
+/** A function to add project to "opening projects" list */
+export function useAddOpeningProject() {
+  const { openingProjects } = useContainerData()
+  return useEventCallback((id: ProjectId, ensoPath: string) => {
+    openingProjects.set(id, EnsoPath(ensoPath))
+  })
+}
+
+/** A function to remove project from "opening projects" list */
+export function useRemoveOpeningProject() {
+  const { openingProjects } = useContainerData()
+  return useEventCallback((id: ProjectId) => {
+    openingProjects.delete(id)
+  })
+}