Confirmation before deleting in the Dashboard (#13035)

- Close enso-org/cloud-v2#1948
- Unconditionally show dialog to confirm deleting an asset, even if it is 'just' moving it to the Trash in the Cloud

# Important Notes
None

Author: somebody1234

app/common/src/services/Backend.ts

@@ -900,6 +900,18 @@ export enum AssetType {
   specialUp = 'specialUp',
 }
 
+export const ASSET_TYPE_TO_TEXT_ID: Readonly<Record<AssetType, TextId>> = {
+  [AssetType.directory]: 'directoryAssetType',
+  [AssetType.project]: 'projectAssetType',
+  [AssetType.file]: 'fileAssetType',
+  [AssetType.secret]: 'secretAssetType',
+  [AssetType.specialEmpty]: 'specialEmptyAssetType',
+  [AssetType.specialError]: 'specialErrorAssetType',
+  [AssetType.specialLoading]: 'specialLoadingAssetType',
+  [AssetType.specialUp]: 'specialUpAssetType',
+  [AssetType.datalink]: 'datalinkAssetType',
+} satisfies { [Type in AssetType]: `${Type}AssetType` }
+
 export enum ReplaceableAssetType {
   project = 'project',
   file = 'file',

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

@@ -371,18 +371,10 @@ export default class DrivePageActions<Context> extends PageActions<Context> {
 
   /** Create a new empty project. */
   newEmptyProject() {
-    return this.step('Create empty project', (page) =>
-      page.getByText(TEXT.newEmptyProject, { exact: true }).click(),
-    ).into(EditorPageActions<Context>)
-  }
-
-  // FIXME[sb]: https://github.com/enso-org/cloud-v2/issues/1615
-  // Delete once cloud execution in the browser is re-enabled.
-  /** Create a new empty project. */
-  newEmptyProjectTest() {
-    return this.step('Create empty project', (page) =>
-      page.getByText(TEXT.newEmptyProject, { exact: true }).click(),
-    ).into(EditorPageActions<Context>)
+    return this.step('Create empty project', async (page) => {
+      await page.getByText(TEXT.newEmptyProject, { exact: true }).click()
+      await expect(page.getByTestId('editor')).toBeVisible()
+    }).into(EditorPageActions<Context>)
   }
 
   /** Interact with the drive view (the main container of this page). */

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

@@ -10,9 +10,8 @@ export interface ContextMenuActions<T extends BaseActions<Context>, Context> {
   readonly uploadToCloud: () => T
   readonly rename: () => T
   readonly snapshot: () => T
-  readonly moveNonFolderToTrash: () => T
-  readonly moveFolderToTrash: () => T
-  readonly moveAllToTrash: (confirm?: boolean) => T
+  readonly moveToTrash: () => T
+  readonly moveAllToTrash: () => T
   readonly restoreFromTrash: () => T
   readonly restoreAllFromTrash: () => T
   readonly share: () => T
@@ -60,14 +59,7 @@ export function contextMenuActions<T extends BaseActions<Context>, Context>(
           .getByText(TEXT.snapshotShortcut)
           .click(),
       ),
-    moveNonFolderToTrash: () =>
-      step('Move to trash (context menu)', async (page) => {
-        await page
-          .getByRole('button', { name: TEXT.moveToTrashShortcut })
-          .getByText(TEXT.moveToTrashShortcut)
-          .click()
-      }),
-    moveFolderToTrash: () =>
+    moveToTrash: () =>
       step('Move folder to trash (context menu)', async (page) => {
         await page
           .getByRole('button', { name: TEXT.moveToTrashShortcut })
@@ -77,15 +69,15 @@ export function contextMenuActions<T extends BaseActions<Context>, Context>(
         // Confirm the deletion in the dialog
         await page.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
       }),
-    moveAllToTrash: (hasFolder = false) =>
+    moveAllToTrash: () =>
       step('Move all to trash (context menu)', async (page) => {
         await page
           .getByRole('button', { name: TEXT.moveAllToTrashShortcut })
           .getByText(TEXT.moveAllToTrashShortcut)
           .click()
-        if (hasFolder) {
-          await page.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
-        }
+
+        // Confirm the deletion in the dialog
+        await page.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
       }),
     restoreFromTrash: () =>
       step('Restore from trash (context menu)', (page) =>

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

@@ -69,12 +69,12 @@ test('can navigate to parent directory of an asset in the Trash category', ({ pa
   })
     // Project in the root (a)
     .driveTable.rightClickRow('a')
-    .contextMenu.moveNonFolderToTrash()
+    .contextMenu.moveToTrash()
     .driveTable.openDirectory('d')
     .driveTable.openDirectory('e')
     // Project in the nested directory (c)
     .driveTable.rightClickRow('c')
-    .contextMenu.moveNonFolderToTrash()
+    .contextMenu.moveToTrash()
     .goToCategory.trash()
     .driveTable.withPathColumnCell('a', async (cell) => {
       await expect(cell).toBeVisible()

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

@@ -1,7 +1,7 @@
 /** @file Test copying, moving, cutting and pasting. */
 import { expect, test, type Page } from '@playwright/test'
 
-import { mockAllAndLogin } from './actions'
+import { mockAllAndLogin, TEXT } from './actions'
 
 /** Find a button for the "Trash" category. */
 function locateTrashCategory(page: Page) {
@@ -99,6 +99,10 @@ test('move to trash', ({ page }) =>
       modActions.driveTable.clickRow('New Folder 1').driveTable.clickRow('New Folder 2'),
     )
     .driveTable.dragRow('New Folder 1', locateTrashCategory(page))
+    .do(async (page) => {
+      // Confirm the deletion in the dialog
+      await page.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
+    })
     .driveTable.expectPlaceholderRow()
     .goToCategory.trash()
     .driveTable.withRows(async (rows) => {

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

@@ -11,7 +11,32 @@ test('delete and restore', ({ page }) =>
       await expect(rows).toHaveCount(1)
     })
     .driveTable.rightClickRow(0)
-    .contextMenu.moveFolderToTrash()
+    .contextMenu.moveToTrash()
+    .driveTable.expectPlaceholderRow()
+    .goToCategory.trash()
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(1)
+    })
+    .driveTable.rightClickRow(0)
+    .contextMenu.restoreFromTrash()
+    .driveTable.expectTrashPlaceholderRow()
+    .goToCategory.cloud()
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(1)
+    }))
+
+test('delete and restore project', ({ page }) =>
+  mockAllAndLogin({
+    page,
+    setupAPI: (api) => {
+      api.addProject()
+    },
+  })
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(1)
+    })
+    .driveTable.rightClickRow(0)
+    .contextMenu.moveToTrash()
     .driveTable.expectPlaceholderRow()
     .goToCategory.trash()
     .driveTable.withRows(async (rows) => {
@@ -49,6 +74,34 @@ test('delete and restore (keyboard)', ({ page }) =>
       await expect(rows).toHaveCount(1)
     }))
 
+test('delete and restore project (keyboard)', ({ page }) =>
+  mockAllAndLogin({
+    page,
+    setupAPI: (api) => {
+      api.addProject()
+    },
+  })
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(1)
+    })
+    .driveTable.clickRow(0)
+    .press('Delete')
+    .do(async (thePage) => {
+      await thePage.getByRole('button', { name: TEXT.delete }).getByText(TEXT.delete).click()
+    })
+    .driveTable.expectPlaceholderRow()
+    .goToCategory.trash()
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(1)
+    })
+    .driveTable.clickRow(0)
+    .press('Mod+R')
+    .driveTable.expectTrashPlaceholderRow()
+    .goToCategory.cloud()
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(1)
+    }))
+
 test('clear trash', ({ page }) =>
   mockAllAndLogin({
     page,
@@ -74,7 +127,7 @@ test('clear trash', ({ page }) =>
       }
     })
     .driveTable.rightClickRow(0)
-    .contextMenu.moveAllToTrash(true)
+    .contextMenu.moveAllToTrash()
     .driveTable.expectPlaceholderRow()
     .goToCategory.trash()
     .driveTable.withRows(async (rows) => {
@@ -86,3 +139,39 @@ test('clear trash', ({ page }) =>
     .driveTable.withRows(async (rows) => {
       await expect(rows).toHaveCount(0)
     }))
+
+test('clear trash (without directories)', ({ page }) =>
+  mockAllAndLogin({
+    page,
+    setupAPI: (api) => {
+      api.addProject()
+      api.addProject()
+      api.addFile()
+      api.addSecret()
+      api.addDatalink()
+    },
+  })
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(5)
+    })
+    .driveTable.withRows(async (rows, _nonRows, _context, page) => {
+      const mod = await modModifier(page)
+      // Parallelizing this using `Promise.all` makes it inconsistent.
+      const rowEls = await rows.all()
+      for (const row of rowEls) {
+        await row.click({ modifiers: [mod] })
+      }
+    })
+    .driveTable.rightClickRow(0)
+    .contextMenu.moveAllToTrash()
+    .driveTable.expectPlaceholderRow()
+    .goToCategory.trash()
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(5)
+    })
+    .clearTrash()
+    .driveTable.expectTrashPlaceholderRow()
+    .goToCategory.cloud()
+    .driveTable.withRows(async (rows) => {
+      await expect(rows).toHaveCount(0)
+    }))

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

@@ -36,7 +36,7 @@ test('drive view', ({ page }) =>
       await locateStopProjectButton(rows.nth(0)).click()
     })
     .driveTable.rightClickRow(0)
-    .contextMenu.moveNonFolderToTrash()
+    .contextMenu.moveToTrash()
     .driveTable.withRows(async (rows) => {
       await expect(rows).toHaveCount(1)
     }))

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

@@ -20,8 +20,7 @@ test('page switcher', ({ page }) =>
     page,
     setupAPI: (api) => api.setFeatureFlags({ enableCloudExecution: true }),
   })
-    // Create a new project so that the editor page can be switched to.
-    .newEmptyProjectTest()
+    .newEmptyProject()
     .do(async (thePage) => {
       await expect(locateDriveView(thePage)).not.toBeVisible()
       await expect(locateEditor(thePage)).toBeVisible()

app/gui/playwright.config.ts

@@ -89,9 +89,9 @@ export default defineConfig({
             '--headless=new',
             // Required for `backdrop-filter: blur` to work.
             '--use-angle=swiftshader',
-            // FIXME: `--disable-gpu` disables `backdrop-filter: blur`, which is not handled by
-            // the software (CPU) compositor. This SHOULD be fixed eventually, but this flag
-            // MUST stay as CI does not have a GPU.
+            // `--disable-gpu` disables `backdrop-filter: blur`, which is not handled by
+            // the software (CPU) compositor. This flag MUST stay if screenshot testing/
+            // visual regression testing is needed, as CI does not have a GPU.
             '--disable-gpu',
             // Fully disable GPU process.
             '--disable-software-rasterizer',

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

@@ -3,8 +3,6 @@ import * as React from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type * as text from 'enso-common/src/text'
-
 import { backendMutationOptions } from '#/hooks/backendHooks'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
@@ -18,18 +16,6 @@ import * as backendModule from '#/services/Backend'
 import { Text } from '#/components/AriaComponents'
 import * as object from '#/utilities/object'
 
-const ASSET_TYPE_TO_TEXT_ID: Readonly<Record<backendModule.AssetType, text.TextId>> = {
-  [backendModule.AssetType.directory]: 'directoryAssetType',
-  [backendModule.AssetType.project]: 'projectAssetType',
-  [backendModule.AssetType.file]: 'fileAssetType',
-  [backendModule.AssetType.secret]: 'secretAssetType',
-  [backendModule.AssetType.specialEmpty]: 'specialEmptyAssetType',
-  [backendModule.AssetType.specialError]: 'specialErrorAssetType',
-  [backendModule.AssetType.specialLoading]: 'specialLoadingAssetType',
-  [backendModule.AssetType.specialUp]: 'specialUpAssetType',
-  [backendModule.AssetType.datalink]: 'datalinkAssetType',
-} satisfies { [Type in backendModule.AssetType]: `${Type}AssetType` }
-
 /** Props for a {@link Permission}. */
 export interface PermissionProps {
   readonly backend: Backend
@@ -51,7 +37,7 @@ export default function Permission(props: PermissionProps) {
   const [permission, setPermission] = React.useState(initialPermission)
   const permissionId = backendModule.getAssetPermissionId(permission)
   const isDisabled = isOnlyOwner && backendModule.getAssetPermissionId(self) === permissionId
-  const assetTypeName = getText(ASSET_TYPE_TO_TEXT_ID[asset.type])
+  const assetTypeName = getText(backendModule.ASSET_TYPE_TO_TEXT_ID[asset.type])
 
   const createPermission = useMutation(
     backendMutationOptions(backend, 'createPermission'),