Notification tray for displaying in-flight requests

app/common/src/services/Backend.ts

@@ -1154,6 +1154,11 @@ export function isErrorAssetId(id: string): id is ErrorAssetId {
   return id.startsWith(`${AssetType.specialError}-`)
 }
 
+/** Whether a given {@link string} is a special frontend-only asset id. */
+export function isSpecialAssetId(id: string) {
+  return isLoadingAssetId(id) || isEmptyAssetId(id) || isErrorAssetId(id)
+}
+
 /** Any object with a `type` field matching the given `AssetType`. */
 interface HasType<Type extends AssetType> {
   readonly type: Type

app/common/src/text.ts

@@ -1,5 +1,4 @@
 /** @file Functions related to displaying text. */
-
 import ENGLISH from './text/english.json' with { type: 'json' }
 import { unsafeKeys } from './utilities/data/object'
 
@@ -53,10 +52,6 @@ interface PlaceholderOverrides {
   readonly youAreAlreadyAddingUser: [userEmail: string]
   readonly lastModifiedOn: [dateString: string]
   readonly versionX: [version: number | string]
-  readonly buildX: [build: string]
-  readonly electronVersionX: [electronVersion: string]
-  readonly chromeVersionX: [chromeVersion: string]
-  readonly userAgentX: [userAgent: string]
   readonly compareVersionXWithLatest: [versionNumber: number]
   readonly projectSessionX: [count: number]
   readonly onDateX: [dateString: string]
@@ -134,7 +129,6 @@ interface PlaceholderOverrides {
 
   readonly upgradeCTA: [plan: string]
   readonly priceTemplate: [price: string, interval: string]
-  readonly months: [months: number]
   readonly teamPlanSeatsDescription: [seats: number]
   readonly tryFree: [days: number]
   readonly organizationNameSettingsInputDescription: [howLong: number]
@@ -143,14 +137,33 @@ interface PlaceholderOverrides {
   readonly xMinutes: [minutes: number]
   readonly xAm: [hour: string]
   readonly xPm: [hour: string]
-  readonly everyHourXMinute: [minute: string]
   readonly groupNameSettingsInputDescription: [howLong: number]
   readonly xIsUsingTheProject: [userName: string]
   readonly xItemsCopied: [count: number]
   readonly xItemsCut: [count: number]
-  readonly ordinalFallback: [number: number]
+  readonly deletingXAssetsNotification: [count: number]
+  readonly permanentlyDeletingXAssetsNotification: [count: number]
+  readonly restoringXAssetsNotification: [count: number]
+  readonly copyingXAssetsNotification: [count: number]
+  readonly movingXAssetsNotification: [count: number]
+  readonly deletedXAssetsNotification: [count: number]
+  readonly permanentlyDeletedXAssetsNotification: [count: number]
+  readonly restoredXAssetsNotification: [count: number]
+  readonly copiedXAssetsNotification: [count: number]
+  readonly movedXAssetsNotification: [count: number]
+  readonly couldNotDeleteXAssetsNotification: [count: number]
+  readonly couldNotPermanentlyDeleteXAssetsNotification: [count: number]
+  readonly couldNotRestoreXAssetsNotification: [count: number]
+  readonly couldNotCopyXAssetsNotification: [count: number]
+  readonly couldNotMoveXAssetsNotification: [count: number]
+  readonly uploadedXFilesNotification: [count: number]
+  readonly uploadingXFilesWithProgressNotification: [
+    sentFiles: number,
+    totalFiles: number,
+    progressMb: string,
+    totalMb: string,
+  ]
   readonly dateXTimeX: [date: string, time: string]
-  readonly hourlyBetweenX: [startTime: string, endTime: string]
   readonly projectSessionsOnX: [date: string]
   readonly monthlyXthDay: [dateOrdinal: string]
   readonly monthlyXthXDay: [weekOrdinal: string, dayOfWeek: string]
@@ -163,20 +176,21 @@ interface PlaceholderOverrides {
 
   readonly arbitraryFieldTooLarge: [maxSize: string]
   readonly arbitraryFieldTooSmall: [minSize: string]
-  readonly uploadLargeFileStatus: [uploadedParts: number, totalParts: number]
+  readonly uploadLargeFileStatus: [uploadedMb: string, totalMb: string]
 
   readonly latestVersion: [version: string, date: string]
 }
 
+// This is intentionally unused. This line throws an error if `PlaceholderOverrides` ever becomes
+// out of sync with `TextId`.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type SanityCheck<T extends TextId = keyof PlaceholderOverrides> = T
+
 /** An tuple of `string` for placeholders for each {@link TextId}. */
 export interface Replacements
   extends PlaceholderOverrides,
     Record<Exclude<TextId, keyof PlaceholderOverrides>, []> {}
 
-// =================
-// === Constants ===
-// =================
-
 export const TEXTS: Readonly<Record<Language, Texts>> = {
   [Language.english]: ENGLISH,
 }
@@ -193,9 +207,7 @@ export type GetText = <K extends TextId>(
   ...replacements: Replacements[K]
 ) => string
 
-/**
- * Resolves the language texts based on the user's preferred language.
- */
+/** Resolves the language texts based on the user's preferred language. */
 export function resolveUserLanguage() {
   const locale = navigator.language
   const language =

app/common/src/text/english.json

@@ -200,6 +200,24 @@
   "specialEmptyAssetType": "special empty asset",
   "specialErrorAssetType": "special error asset",
 
+  "deletingXAssetsNotification": "Deleting $0 asset(s)...",
+  "permanentlyDeletingXAssetsNotification": "Permanently deleting $0 asset(s)...",
+  "restoringXAssetsNotification": "Restoring $0 asset(s)...",
+  "copyingXAssetsNotification": "Copying $0 asset(s)...",
+  "movingXAssetsNotification": "Moving $0 asset(s)...",
+  "deletedXAssetsNotification": "Deleted $0 asset(s).",
+  "permanentlyDeletedXAssetsNotification": "Permanently deleted $0 asset(s).",
+  "restoredXAssetsNotification": "Restored $0 asset(s).",
+  "copiedXAssetsNotification": "Copied $0 asset(s).",
+  "movedXAssetsNotification": "Moved $0 asset(s).",
+  "couldNotDeleteXAssetsNotification": "Could not delete $0 asset(s).",
+  "couldNotPermanentlyDeleteXAssetsNotification": "Could not permanently delete $0 asset(s).",
+  "couldNotRestoreXAssetsNotification": "Could not restore $0 asset(s).",
+  "couldNotCopyXAssetsNotification": "Could not copy $0 asset(s).",
+  "couldNotMoveXAssetsNotification": "Could not move $0 asset(s).",
+  "uploadingXFilesWithProgressNotification": "Uploading $0/$1 file(s)... ($2/$3MB)",
+  "uploadedXFilesNotification": "Uploaded $0 file(s).",
+
   "couldNotConnectToPM": "Could not connect to the Project Manager. Please try restarting Enso, or manually launching the Project Manager.",
   "upgradeToUseCloud": "Upgrade your plan to use Enso Cloud.",
 
@@ -304,6 +322,7 @@
   "forward": "Forward",
   "more": "More",
   "close": "Close",
+  "notifications": "Notifications",
 
   "enterSecretPath": "Enter secret path",
   "enterText": "Enter text",
@@ -530,6 +549,8 @@
   "uploadLargeFileError": "Could not upload file",
   "closeWindowDialogTitle": "Close window?",
   "anUploadIsInProgress": "An upload is in progress.",
+  "youAreAllCaughtUp": "You're all caught up!",
+  "clearCacheAndReload": "Clear cache and reload",
 
   "deleteLabelActionText": "delete the label '$0'",
   "deleteSelectedAssetActionText": "delete '$0'",

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

@@ -143,6 +143,14 @@ export interface MockParams {
   readonly setupAPI?: SetupAPI | null | undefined
 }
 
+/** The type for the search query for the "list directory" endpoint. */
+interface ListDirectoryQuery {
+  readonly parent_id?: string
+  readonly filter_by?: backend.FilterBy
+  readonly labels?: backend.LabelName[]
+  readonly recent_projects?: boolean
+}
+
 /**
  * Setup function for the mock API.
  * use it to setup the mock API with custom handlers.
@@ -285,6 +293,43 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
     }
   }
 
+  function listDirectory(query: ListDirectoryQuery) {
+    called('listDirectory', query)
+    const parentId = query.parent_id ?? defaultDirectoryId
+    let filteredAssets = assets.filter((asset) => asset.parentId === parentId)
+
+    switch (query.filter_by) {
+      case backend.FilterBy.active: {
+        filteredAssets = filteredAssets.filter((asset) => !deletedAssets.has(asset.id))
+        break
+      }
+      case backend.FilterBy.trashed: {
+        filteredAssets = assets.filter((asset) => deletedAssets.has(asset.id))
+        break
+      }
+      case backend.FilterBy.recent: {
+        filteredAssets = assets.filter((asset) => !deletedAssets.has(asset.id)).slice(0, 10)
+        break
+      }
+      case backend.FilterBy.all:
+      case null: {
+        // do nothing
+        break
+      }
+      case undefined: {
+        // do nothing
+        break
+      }
+    }
+    return filteredAssets.sort(
+      (a, b) => backend.ASSET_TYPE_ORDER[a.type] - backend.ASSET_TYPE_ORDER[b.type],
+    )
+  }
+
+  function listRootDirectory() {
+    return listDirectory({})
+  }
+
   const addAsset = <T extends backend.AnyAsset>(asset: T) => {
     assetMap.set(asset.id, asset)
     assets = Array.from(assetMap.values())
@@ -780,49 +825,11 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
     // === Endpoints returning arrays ===
 
     await get(remoteBackendPaths.LIST_DIRECTORY_PATH + '*', (route, request) => {
-      /** The type for the search query for this endpoint. */
-      interface Query {
-        readonly parent_id?: string
-        readonly filter_by?: backend.FilterBy
-        readonly labels?: backend.LabelName[]
-        readonly recent_projects?: boolean
-      }
       const query = Object.fromEntries(
         new URL(request.url()).searchParams.entries(),
-      ) as unknown as Query
+      ) as unknown as ListDirectoryQuery
       called('listDirectory', query)
-      const parentId = query.parent_id ?? defaultDirectoryId
-      let filteredAssets = assets.filter((asset) => asset.parentId === parentId)
-
-      // This lint rule is broken; there is clearly a case for `undefined` below.
-      switch (query.filter_by) {
-        case backend.FilterBy.active: {
-          filteredAssets = filteredAssets.filter((asset) => !deletedAssets.has(asset.id))
-          break
-        }
-        case backend.FilterBy.trashed: {
-          filteredAssets = assets.filter((asset) => deletedAssets.has(asset.id))
-          break
-        }
-        case backend.FilterBy.recent: {
-          filteredAssets = assets.filter((asset) => !deletedAssets.has(asset.id)).slice(0, 10)
-          break
-        }
-        case backend.FilterBy.all:
-        case null: {
-          // do nothing
-          break
-        }
-        case undefined: {
-          // do nothing
-          break
-        }
-      }
-      filteredAssets.sort(
-        (a, b) => backend.ASSET_TYPE_ORDER[a.type] - backend.ASSET_TYPE_ORDER[b.type],
-      )
-      const json: remoteBackend.ListDirectoryResponseBody = { assets: filteredAssets }
-
+      const json: remoteBackend.ListDirectoryResponseBody = { assets: listDirectory(query) }
       route.fulfill({ json })
     })
     await get(remoteBackendPaths.LIST_FILES_PATH + '*', () => {
@@ -1463,6 +1470,8 @@ async function mockApiInternal({ page, setupAPI }: MockParams) {
       currentOrganization = organization
     },
     currentOrganizationProfilePicture: () => currentOrganizationProfilePicture,
+    listDirectory,
+    listRootDirectory,
     addAsset,
     deleteAsset,
     editAsset,

app/gui/package.json

@@ -159,7 +159,6 @@
     "@tanstack/react-query-devtools": "5.59.20",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
-    "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
     "@tsconfig/node20": "^20.1.4",
     "@types/css.escape": "^1.5.2",

app/gui/src/dashboard/App.tsx

@@ -98,10 +98,6 @@ import { CloudBrowserDisabledLayout } from '#/providers/AuthProvider'
 import { useMutation } from '@tanstack/react-query'
 import { useOffline } from './hooks/offlineHooks'
 
-// ============================
-// === Global configuration ===
-// ============================
-
 declare module '#/utilities/LocalStorage' {
   /** */
   interface LocalStorageData {