Expand parent directories of opened projects

app/common/src/detect.ts

@@ -122,9 +122,7 @@ export function browser(): Browser {
 }
 /**
  * Returns `true` if running in Electron, else `false`.
- * This is used to determine whether to use a `MemoryRouter` (stores history in an array)
- * or a `BrowserRouter` (stores history in the path of the URL).
- * It is also used to determine whether to send custom state to Amplify for a workaround.
+ * It is used to determine whether to send custom state to Amplify for a workaround.
  */
 export function isOnElectron() {
   return /electron/i.test(navigator.userAgent)

app/common/src/services/Backend.ts

@@ -40,11 +40,14 @@ export function isUserGroupId(id: string): id is UserGroupId {
 /** Unique identifier for a directory. */
 export type DirectoryId = newtype.Newtype<`directory-${string}`, 'DirectoryId'>
 export const DirectoryId = newtype.newtypeConstructor<DirectoryId>()
-/** Whether a given {@link string} is an {@link DirectoryId}. */
+/** Whether a given {@link string} is a {@link DirectoryId}. */
 export function isDirectoryId(id: string): id is DirectoryId {
   return id.startsWith('directory-')
 }
 
+/** Unique identifier for a category. */
+export type CategoryId = 'cloud' | 'local' | 'recent' | 'trash' | DirectoryId | UserGroupId | UserId
+
 /**
  * Unique identifier for an asset representing the items inside a directory for which the
  * request to retrive the items has not yet completed.
@@ -66,6 +69,10 @@ export const ErrorAssetId = newtype.newtypeConstructor<ErrorAssetId>()
 /** Unique identifier for a user's project. */
 export type ProjectId = newtype.Newtype<string, 'ProjectId'>
 export const ProjectId = newtype.newtypeConstructor<ProjectId>()
+/** Whether a given {@link string} is a {@link ProjectId}. */
+export function isProjectId(id: string): id is ProjectId {
+  return id.startsWith('project-')
+}
 
 /** Unique identifier for an uploaded file. */
 export type FileId = newtype.Newtype<string, 'FileId'>
@@ -317,8 +324,10 @@ export interface UpdatedProject extends BaseProject {
 
 /** A user/organization's project containing and/or currently executing code. */
 export interface ProjectRaw extends ListedProjectRaw {
-  readonly ide_version: VersionNumber | null
-  readonly engine_version: VersionNumber | null
+  readonly ideVersion: VersionNumber | null
+  readonly engineVersion: VersionNumber | null
+  readonly parentsPath: string
+  readonly virtualParentsPath: string
 }
 
 /** A user/organization's project containing and/or currently executing code. */
@@ -328,6 +337,8 @@ export interface Project extends ListedProject {
   readonly openedBy?: EmailAddress
   /** On the Remote (Cloud) Backend, this is a S3 url that is valid for only 120 seconds. */
   readonly url?: HttpsUrl
+  readonly parentsPath: string
+  readonly virtualParentsPath: string
 }
 
 /** A user/organization's project containing and/or currently executing code. */
@@ -1793,6 +1804,15 @@ export default abstract class Backend {
   ): Promise<void>
   /** Download an asset. */
   abstract download(assetId: AssetId, title: string): Promise<void>
+  /**
+   * The list of the asset's ancestors, if and only if the asset is in the given category.
+   * Note: The `null` in the return type exists to prevent accidentally implicitly returning
+   * `undefined`.
+   */
+  abstract tryGetAssetAncestors(
+    asset: Pick<AnyAsset, 'id' | 'parentId'>,
+    category: CategoryId,
+  ): Promise<readonly DirectoryId[] | null>
 
   /**
    * Get the URL for the customer portal.

app/common/src/utilities/data/object.ts

@@ -116,7 +116,7 @@ export function unsafeRemoveUndefined<T extends object>(
 export function mapEntries<K extends PropertyKey, V, W>(
   object: Record<K, V>,
   map: (key: K, value: V) => W,
-): Readonly<Record<K, W>> {
+): Record<K, W> {
   // @ts-expect-error It is known that the set of keys is the same for the input and the output,
   // because the output is dynamically generated based on the input.
   return Object.fromEntries(

app/gui/integration-test/dashboard/actions/api.ts

@@ -23,6 +23,15 @@ import invariant from 'tiny-invariant'
 // === Constants ===
 // =================
 
+/** Return a new date that has not yet been returned. */
+function newUniqueDate(): Date {
+  const timestamp = Number(new Date())
+  while (Number(new Date()) <= timestamp) {
+    // Busy loop
+  }
+  return new Date()
+}
+
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 const MOCK_SVG = `
@@ -328,7 +337,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
     )
 
   const createUserGroupPermission = (
-    userGroup: backend.UserGroupInfo,
+    userGroup: backend.UserGroup,
     permission: permissions.PermissionAction = permissions.PermissionAction.own,
     rest: Partial<backend.UserGroupPermission> = {},
   ): backend.UserGroupPermission =>
@@ -358,7 +367,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         projectState: null,
         extension: null,
         title,
-        modifiedAt: dateTime.toRfc3339(new Date()),
+        modifiedAt: dateTime.toRfc3339(newUniqueDate()),
         description: rest.description ?? '',
         labels: [],
         parentId,
@@ -411,7 +420,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         },
         extension: null,
         title,
-        modifiedAt: dateTime.toRfc3339(new Date()),
+        modifiedAt: dateTime.toRfc3339(newUniqueDate()),
         description: rest.description ?? '',
         labels: [],
         parentId: defaultDirectoryId,
@@ -452,7 +461,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         projectState: null,
         extension: '',
         title: rest.title ?? '',
-        modifiedAt: dateTime.toRfc3339(new Date()),
+        modifiedAt: dateTime.toRfc3339(newUniqueDate()),
         description: rest.description ?? '',
         labels: [],
         parentId: defaultDirectoryId,
@@ -494,7 +503,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         projectState: null,
         extension: null,
         title: rest.title ?? '',
-        modifiedAt: dateTime.toRfc3339(new Date()),
+        modifiedAt: dateTime.toRfc3339(newUniqueDate()),
         description: rest.description ?? '',
         labels: [],
         parentId: defaultDirectoryId,
@@ -536,7 +545,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         projectState: null,
         extension: null,
         title: rest.title ?? '',
-        modifiedAt: dateTime.toRfc3339(new Date()),
+        modifiedAt: dateTime.toRfc3339(newUniqueDate()),
         description: rest.description ?? '',
         labels: [],
         parentId: defaultDirectoryId,
@@ -808,9 +817,13 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
           break
         }
       }
-      filteredAssets.sort(
-        (a, b) => backend.ASSET_TYPE_ORDER[a.type] - backend.ASSET_TYPE_ORDER[b.type],
-      )
+      filteredAssets.sort((a, b) => {
+        const order = backend.ASSET_TYPE_ORDER[a.type] - backend.ASSET_TYPE_ORDER[b.type]
+        if (order !== 0) {
+          return order
+        }
+        return Number(new Date(b.modifiedAt)) - Number(new Date(a.modifiedAt))
+      })
       const json: remoteBackend.ListDirectoryResponseBody = { assets: filteredAssets }
 
       route.fulfill({ json })
@@ -875,14 +888,14 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         name: 'example project name',
         state: project.projectState,
         packageName: 'Project_root',
-        // eslint-disable-next-line camelcase
-        ide_version: null,
-        // eslint-disable-next-line camelcase
-        engine_version: {
+        ideVersion: null,
+        engineVersion: {
           value: '2023.2.1-nightly.2023.9.29',
           lifecycle: backend.VersionLifecycle.development,
         },
         address: backend.Address('ws://localhost/'),
+        parentsPath: getParentPath(project.parentId),
+        virtualParentsPath: getVirtualParentPath(project.parentId, project.title),
       } satisfies backend.ProjectRaw
     })
 
@@ -1322,7 +1335,7 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
         description: null,
         id,
         labels: [],
-        modifiedAt: dateTime.toRfc3339(new Date()),
+        modifiedAt: dateTime.toRfc3339(newUniqueDate()),
         parentId,
         permissions: [
           {

app/gui/integration-test/dashboard/assetsTableFeatures.spec.ts

@@ -130,13 +130,19 @@ test('can navigate to parent directory of an asset in the Recent category', ({ p
       api.addProject({ title: 'c', parentId: subDirectory.id })
     },
   })
+    .driveTable.withRows(async (rows) => {
+      await test.expect(rows).toHaveText([/^d/, /^b/, /^a/])
+    })
     .driveTable.expandDirectory(0)
     .driveTable.expandDirectory(1)
     // Project in the nested directory (c)
     .driveTable.rightClickRow(2)
     .contextMenu.moveNonFolderToTrash()
+    .driveTable.withRows(async (rows) => {
+      await test.expect(rows).toHaveText([/^d/, /^e/, /^b/, /^a/])
+    })
     // Project in the root (a)
-    .driveTable.rightClickRow(2)
+    .driveTable.rightClickRow(3)
     .contextMenu.moveNonFolderToTrash()
     .goToCategory.trash()
     .driveTable.withPathColumnCell('a', async (cell) => {
@@ -174,7 +180,7 @@ test("can't run a project in browser by default", ({ page }) =>
     await expect(startProjectButton).toBeDisabled()
   }))
 
-test("can't start an already running by another user", ({ page }) =>
+test("can't start a project already being run by another user", ({ page }) =>
   mockAllAndLogin({
     page,
     setupAPI: async (api) => {

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

@@ -500,7 +500,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                 window.setTimeout(() => {
                   setSelected(false)
                 })
-                toggleDirectoryExpansion(asset.id)
+                toggleDirectoryExpansion([asset.id], category.id)
               }
             }}
             onContextMenu={(event) => {
@@ -544,7 +544,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
               }
               if (asset.type === backendModule.AssetType.directory) {
                 dragOverTimeoutHandle.current = window.setTimeout(() => {
-                  toggleDirectoryExpansion(asset.id, true)
+                  toggleDirectoryExpansion([asset.id], category.id, true)
                 }, DRAG_EXPAND_DELAY_MS)
               }
               // Required because `dragover` does not fire on `mouseenter`.
@@ -591,7 +591,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                   event.preventDefault()
                   event.stopPropagation()
                   unsetModal()
-                  toggleDirectoryExpansion(directoryId, true)
+                  toggleDirectoryExpansion([directoryId], category.id, true)
                   const ids = payload
                     .filter((payloadItem) => payloadItem.asset.parentId !== directoryId)
                     .map((dragItem) => dragItem.key)
@@ -604,7 +604,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                 } else if (event.dataTransfer.types.includes('Files')) {
                   event.preventDefault()
                   event.stopPropagation()
-                  toggleDirectoryExpansion(directoryId, true)
+                  toggleDirectoryExpansion([directoryId], category.id, true)
                   void uploadFiles(Array.from(event.dataTransfer.files), directoryId, null)
                 }
               }

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

@@ -6,7 +6,11 @@ import FolderArrowIcon from '#/assets/folder_arrow.svg'
 
 import { backendMutationOptions } from '#/hooks/backendHooks'
 
-import { useDriveStore, useToggleDirectoryExpansion } from '#/providers/DriveProvider'
+import {
+  useDriveStore,
+  useIsDirectoryExpanded,
+  useToggleDirectoryExpansion,
+} from '#/providers/DriveProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import type * as column from '#/components/dashboard/column'
@@ -15,7 +19,6 @@ import EditableSpan from '#/components/EditableSpan'
 import * as backendModule from '#/services/Backend'
 
 import { Button } from '#/components/AriaComponents'
-import { useStore } from '#/hooks/storeHooks'
 import * as eventModule from '#/utilities/event'
 import * as indent from '#/utilities/indent'
 import * as object from '#/utilities/object'
@@ -38,13 +41,11 @@ 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 = useIsDirectoryExpanded(item.id, category.id)
 
   const updateDirectoryMutation = useMutation(backendMutationOptions(backend, 'updateDirectory'))
 
@@ -98,7 +99,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
           isExpanded && 'rotate-90',
         )}
         onPress={() => {
-          toggleDirectoryExpansion(item.id)
+          toggleDirectoryExpansion([item.id], category.id)
         }}
       />