Expand parent directories of opened projects

app/common/src/services/Backend.ts

@@ -134,6 +134,11 @@ export type UserPermissionIdentifier = UserGroupId | UserId
 export type Path = newtype.Newtype<string, 'Path'>
 export const Path = newtype.newtypeConstructor<Path>()
 
+/** Whether the given path is a descendant of another path. */
+export function isDescendantPath(path: Path, possibleAncestor: Path) {
+  return path.startsWith(`${possibleAncestor}/`)
+}
+
 const PLACEHOLDER_USER_GROUP_PREFIX = 'usergroup-placeholder-'
 
 /**

app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx

@@ -38,12 +38,13 @@ export interface DirectoryNameColumnProps extends column.AssetColumnProps {
  */
 export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
   const { item, depth, selected, state, rowState, setRowState, isEditable } = props
-  const { backend, nodeMap } = state
+  const { backend, nodeMap, category } = state
   const { getText } = textProvider.useText()
   const driveStore = useDriveStore()
   const toggleDirectoryExpansion = useToggleDirectoryExpansion()
-  const isExpanded = useStore(driveStore, (storeState) =>
-    storeState.expandedDirectoryIds.includes(item.id),
+  const isExpanded = useStore(
+    driveStore,
+    (storeState) => storeState.expandedDirectories[category.rootPath]?.includes(item.id) ?? false,
   )
 
   const updateDirectoryMutation = useMutation(backendMutationOptions(backend, 'updateDirectory'))

app/gui/src/dashboard/components/dashboard/column/PathColumn.tsx

@@ -7,9 +7,14 @@ import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useCategoriesAPI, useCloudCategoryList } from '#/layouts/Drive/Categories/categoriesHooks'
 import type { AnyCloudCategory } from '#/layouts/Drive/Categories/Category'
 import { useUser } from '#/providers/AuthProvider'
-import { useSetExpandedDirectoryIds, useSetSelectedKeys } from '#/providers/DriveProvider'
+import {
+  useDriveStore,
+  useSetExpandedDirectories,
+  useSetSelectedKeys,
+} from '#/providers/DriveProvider'
 import type { DirectoryId } from '#/services/Backend'
 import { isDirectoryId } from '#/services/Backend'
+import { unsafeMutable } from 'enso-common/src/utilities/data/object'
 import { Fragment, useTransition } from 'react'
 import invariant from 'tiny-invariant'
 import type { AssetColumnProps } from '../column'
@@ -20,11 +25,12 @@ export default function PathColumn(props: AssetColumnProps) {
 
   const { virtualParentsPath, parentsPath } = item
 
-  const { getAssetNodeById } = state
+  const { getAssetNodeById, category } = state
 
+  const driveStore = useDriveStore()
   const { setCategory } = useCategoriesAPI()
   const setSelectedKeys = useSetSelectedKeys()
-  const setExpandedDirectoryIds = useSetExpandedDirectoryIds()
+  const setExpandedDirectories = useSetExpandedDirectories()
 
   // Path navigation exist only for cloud categories.
   const { getCategoryByDirectoryId } = useCloudCategoryList()
@@ -65,11 +71,16 @@ export default function PathColumn(props: AssetColumnProps) {
     const targetDirectoryNode = getAssetNodeById(targetDirectory)
 
     if (targetDirectoryNode == null && rootDirectoryInThePath.categoryId != null) {
-      // We reassign the variable only to make TypeScript happy here.
-      const categoryId = rootDirectoryInThePath.categoryId
-
-      setCategory(categoryId)
-      setExpandedDirectoryIds(pathToDirectory.map(({ id }) => id).concat(targetDirectory))
+      setCategory(rootDirectoryInThePath.categoryId)
+      const expandedDirectories = structuredClone(driveStore.getState().expandedDirectories)
+      // This is SAFE, as it is a fresh copy that has been deep cloned above.
+      const directoryList = expandedDirectories[category.rootPath]
+      if (directoryList) {
+        unsafeMutable(directoryList).push(
+          ...pathToDirectory.map(({ id }) => id).concat(targetDirectory),
+        )
+      }
+      setExpandedDirectories(expandedDirectories)
     }
 
     setSelectedKeys(new Set([targetDirectory]))

app/gui/src/dashboard/layouts/Drive/Categories/Category.ts

@@ -25,7 +25,11 @@ import { newDirectoryId } from '#/services/LocalBackend'
 const PATH_SCHEMA = z.string().refine((s): s is Path => true)
 const DIRECTORY_ID_SCHEMA = z.string().refine((s): s is DirectoryId => true)
 
-const EACH_CATEGORY_SCHEMA = z.object({ label: z.string(), icon: z.string() })
+const EACH_CATEGORY_SCHEMA = z.object({
+  label: z.string(),
+  icon: z.string(),
+  rootPath: PATH_SCHEMA,
+})
 
 /** A category corresponding to the root of the user or organization. */
 const CLOUD_CATEGORY_SCHEMA = z
@@ -61,7 +65,6 @@ export const USER_CATEGORY_SCHEMA = z
     type: z.literal('user'),
     user: z.custom<User>(() => true),
     id: z.custom<UserId>(() => true),
-    rootPath: PATH_SCHEMA,
     homeDirectoryId: DIRECTORY_ID_SCHEMA,
   })
   .merge(EACH_CATEGORY_SCHEMA)
@@ -74,7 +77,6 @@ export const TEAM_CATEGORY_SCHEMA = z
     type: z.literal('team'),
     id: z.custom<UserGroupId>(() => true),
     team: z.custom<UserGroupInfo>(() => true),
-    rootPath: PATH_SCHEMA,
     homeDirectoryId: DIRECTORY_ID_SCHEMA,
   })
   .merge(EACH_CATEGORY_SCHEMA)
@@ -96,7 +98,6 @@ export const LOCAL_DIRECTORY_CATEGORY_SCHEMA = z
   .object({
     type: z.literal('local-directory'),
     id: z.custom<DirectoryId>(() => true),
-    rootPath: PATH_SCHEMA,
     homeDirectoryId: DIRECTORY_ID_SCHEMA,
   })
   .merge(EACH_CATEGORY_SCHEMA)

app/gui/src/dashboard/layouts/Drive/Categories/categoriesHooks.tsx

@@ -84,28 +84,31 @@ export function useCloudCategoryList() {
 
   const hasUserAndTeamSpaces = userHasUserAndTeamSpaces(user)
 
+  const homeDirectoryId =
+    hasUserAndTeamSpaces ? organizationIdToDirectoryId(organizationId) : userIdToDirectoryId(userId)
+
   const cloudCategory: CloudCategory = {
     type: 'cloud',
     id: 'cloud',
     label: getText('cloudCategory'),
     icon: CloudIcon,
-    homeDirectoryId:
-      hasUserAndTeamSpaces ?
-        organizationIdToDirectoryId(organizationId)
-      : userIdToDirectoryId(userId),
+    rootPath: Path(`enso://${hasUserAndTeamSpaces ? `Users/${user.name}` : ''}`),
+    homeDirectoryId,
   }
 
   const recentCategory: RecentCategory = {
     type: 'recent',
     id: 'recent',
     label: getText('recentCategory'),
+    rootPath: Path(`(Recent)`),
     icon: RecentIcon,
   }
 
   const trashCategory: TrashCategory = {
     type: 'trash',
     id: 'trash',
     label: getText('trashCategory'),
+    rootPath: Path(`(Trash)`),
     icon: Trash2Icon,
   }
 
@@ -219,6 +222,10 @@ export function useLocalCategoryList() {
     type: 'local',
     id: 'local',
     label: getText('localCategory'),
+    /** The root path of this category. */
+    get rootPath() {
+      return localBackend?.rootPath() ?? Path('')
+    },
     icon: ComputerIcon,
   }
 

app/gui/src/dashboard/layouts/Drive/directoryIdsHooks.tsx

@@ -9,7 +9,7 @@ import { Path, createRootDirectoryAsset } from 'enso-common/src/services/Backend
 import type { Category } from '#/layouts/CategorySwitcher/Category'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useBackend } from '#/providers/BackendProvider'
-import { useExpandedDirectoryIds, useSetExpandedDirectoryIds } from '#/providers/DriveProvider'
+import { useExpandedDirectories, useSetExpandedDirectories } from '#/providers/DriveProvider'
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 
 /** Options for {@link useDirectoryIds}. */
@@ -35,8 +35,8 @@ export function useDirectoryIds(options: UseDirectoryIdsOptions) {
    * The root directory is not included as it might change when a user switches
    * between items in sidebar and we don't want to reset the expanded state using `useEffect`.
    */
-  const privateExpandedDirectoryIds = useExpandedDirectoryIds()
-  const setExpandedDirectoryIds = useSetExpandedDirectoryIds()
+  const privateExpandedDirectoryIds = useExpandedDirectories()
+  const setExpandedDirectoryIds = useSetExpandedDirectories()
 
   const [localRootDirectory] = useLocalStorageState('localRootDirectory')
 
@@ -53,8 +53,8 @@ export function useDirectoryIds(options: UseDirectoryIdsOptions) {
   const rootDirectory = useMemo(() => createRootDirectoryAsset(rootDirectoryId), [rootDirectoryId])
 
   const expandedDirectoryIds = useMemo(
-    () => [rootDirectoryId].concat(privateExpandedDirectoryIds),
-    [privateExpandedDirectoryIds, rootDirectoryId],
+    () => [rootDirectoryId].concat(privateExpandedDirectoryIds[category.rootPath] ?? []),
+    [category.rootPath, privateExpandedDirectoryIds, rootDirectoryId],
   )
 
   return { setExpandedDirectoryIds, rootDirectoryId, rootDirectory, expandedDirectoryIds } as const

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

@@ -45,12 +45,19 @@ import * as backendModule from '#/services/Backend'
 import * as localBackendModule from '#/services/LocalBackend'
 import * as projectManager from '#/services/ProjectManager'
 
+import { listDirectoryQueryOptions, useBackendQuery } from '#/hooks/backendHooks'
 import { useCategoriesAPI } from '#/layouts/Drive/Categories/categoriesHooks'
+import { useDriveStore, useSetExpandedDirectories } from '#/providers/DriveProvider'
+import { userGroupIdToDirectoryId, userIdToDirectoryId } from '#/services/RemoteBackend'
+import { TEAMS_DIRECTORY_ID, USERS_DIRECTORY_ID } from '#/services/remoteBackendPaths'
 import { baseName } from '#/utilities/fileInfo'
 import { tryFindSelfPermission } from '#/utilities/permissions'
 import { STATIC_QUERY_OPTIONS } from '#/utilities/reactQuery'
 import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
-import { usePrefetchQuery } from '@tanstack/react-query'
+import { usePrefetchQuery, useQueryClient } from '@tanstack/react-query'
+import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
+import { unsafeEntries, unsafeMutable } from 'enso-common/src/utilities/data/object'
+import invariant from 'tiny-invariant'
 import { DashboardTabPanels } from './DashboardTabPanels'
 
 // =================
@@ -76,6 +83,7 @@ export default function Dashboard(props: DashboardProps) {
         <CategoriesProvider onCategoryChange={resetAssetTableState}>
           <EventListProvider>
             <ProjectsProvider>
+              <OpenedProjectsParentsExpander />
               <DashboardInner {...props} />
             </ProjectsProvider>
           </EventListProvider>
@@ -308,3 +316,130 @@ function DashboardInner(props: DashboardProps) {
     </Page>
   )
 }
+
+/** Expand the list of parents for opened projects. */
+function OpenedProjectsParentsExpander() {
+  const queryClient = useQueryClient()
+  const remoteBackend = backendProvider.useRemoteBackend()
+  const localBackend = backendProvider.useLocalBackend()
+  const categoriesAPI = useCategoriesAPI()
+  const { category, cloudCategories, localCategories } = categoriesAPI
+  const driveStore = useDriveStore()
+  const launchedProjects = useLaunchedProjects()
+  const setExpandedDirectories = useSetExpandedDirectories()
+  const { user } = authProvider.useFullUserSession()
+  const { data: userGroups } = useBackendQuery(remoteBackend, 'listUserGroups', [])
+  const { data: users } = useBackendQuery(remoteBackend, 'listUsers', [])
+
+  const updateOpenedProjects = eventCallbacks.useEventCallback(async () => {
+    const userGroupDirectoryIds = new Set(
+      (user.userGroups ?? EMPTY_ARRAY).map(userGroupIdToDirectoryId),
+    )
+
+    const expandedDirectories = structuredClone(driveStore.getState().expandedDirectories)
+    for (const otherCategory of [...cloudCategories.categories, ...localCategories.categories]) {
+      expandedDirectories[otherCategory.rootPath] ??= []
+    }
+
+    if (localBackend) {
+      const localProjects = launchedProjects.filter(
+        (project) => project.type === backendModule.BackendType.local,
+      )
+      for (const project of localProjects) {
+        const path = localBackendModule.extractTypeAndId(project.parentId).id
+        for (const [rootPath, directoriesInCategory] of unsafeEntries(expandedDirectories)) {
+          const strippedPath = path.replace(`${rootPath}/`, '')
+          if (strippedPath !== path) {
+            let parentPath = String(rootPath)
+            const parents = strippedPath.split('/')
+            for (const parent of parents) {
+              parentPath += `/${parent}`
+              const currentParentPath = backendModule.Path(parentPath)
+              const currentParentId = localBackendModule.newDirectoryId(currentParentPath)
+              if (!backendModule.isDescendantPath(currentParentPath, rootPath)) {
+                continue
+              }
+              if (directoriesInCategory.includes(currentParentId)) {
+                continue
+              }
+              const id = localBackendModule.newDirectoryId(currentParentPath)
+              // This is SAFE as the value has been `structuredClone`d above.
+              unsafeMutable(directoriesInCategory).push(id)
+            }
+          }
+        }
+      }
+    }
+
+    const cloudProjects = launchedProjects.filter(
+      (project) => project.type === backendModule.BackendType.remote,
+    )
+    const promises = cloudProjects.map((project) =>
+      queryClient.ensureQueryData(
+        listDirectoryQueryOptions({
+          backend: remoteBackend,
+          parentId: project.parentId,
+          category,
+        }),
+      ),
+    )
+    const projectsSiblings = await Promise.allSettled(promises)
+    const projects = projectsSiblings.flatMap((directoryResult, i) => {
+      const projectInfo = cloudProjects[i]
+      const project =
+        projectInfo && directoryResult.status === 'fulfilled' ?
+          directoryResult.value
+            .filter(backendModule.assetIsProject)
+            .find((asset) => asset.id === projectInfo.id)
+        : null
+      return project ? [project] : []
+    })
+    for (const project of projects) {
+      const parents = project.parentsPath.split('/').filter(backendModule.isDirectoryId)
+      const rootDirectoryId = parents[0]
+      const baseVirtualPath = (() => {
+        const userGroupName = userGroups?.find(
+          (userGroup) => userGroupIdToDirectoryId(userGroup.id) === rootDirectoryId,
+        )?.groupName
+        if (userGroupName != null) {
+          return `enso://Teams/${userGroupName}`
+        }
+        const userName = users?.find(
+          (otherUser) => userIdToDirectoryId(otherUser.userId) === rootDirectoryId,
+        )?.name
+        if (userName != null) {
+          return `enso://Users/${userGroupName}`
+        }
+      })()
+      const virtualPath = backendModule.Path(`${baseVirtualPath}/${project.virtualParentsPath}`)
+      invariant(
+        baseVirtualPath != null,
+        'The root directory must be either a user directory or a team directory.',
+      )
+      for (const [categoryRootPath, directoriesInCategoryRaw] of unsafeEntries(
+        expandedDirectories,
+      )) {
+        const directoriesInCategory = unsafeMutable(directoriesInCategoryRaw)
+        if (!backendModule.isDescendantPath(virtualPath, categoryRootPath)) {
+          continue
+        }
+        if ((rootDirectoryId && userGroupDirectoryIds.has(rootDirectoryId)) ?? false) {
+          directoriesInCategory.push(TEAMS_DIRECTORY_ID)
+        } else {
+          directoriesInCategory.push(USERS_DIRECTORY_ID)
+        }
+        for (const parent of parents) {
+          directoriesInCategory.push(parent)
+        }
+      }
+    }
+
+    setExpandedDirectories(expandedDirectories)
+  })
+
+  React.useEffect(() => {
+    void updateOpenedProjects()
+  }, [updateOpenedProjects])
+
+  return null
+}