Toast on error when snapshotting from disks list (#1948)

* snapshot error toast

* test snapshot from disks list

Author: david-crespo

app/pages/project/disks/DisksPage.tsx

@@ -92,6 +92,13 @@ export function DisksPage() {
       queryClient.invalidateQueries('snapshotList')
       addToast({ content: 'Snapshot successfully created' })
     },
+    onError(err) {
+      addToast({
+        title: 'Failed to create snapshot',
+        content: err.message,
+        variant: 'error',
+      })
+    },
   })
 
   const makeActions = (disk: Disk): MenuAction[] => [

app/test/e2e/disk-create.e2e.ts app/test/e2e/disks.e2e.tsapp/test/e2e/disk-create.e2e.ts renamed to app/test/e2e/disks.e2e.ts

@@ -5,7 +5,44 @@
  *
  * Copyright Oxide Computer Company
  */
-import { expectVisible, test } from './utils'
+import { clickRowAction, expect, expectRowVisible, expectVisible, test } from './utils'
+
+test('List disks and snapshot', async ({ page }) => {
+  await page.goto('/projects/mock-project/disks')
+
+  const table = page.getByRole('table')
+  await expect(table.getByRole('row')).toHaveCount(12) // 11 + header
+
+  // check one attached and one not attached
+  await expectRowVisible(table, {
+    'Attached To': 'db1',
+    Disk: 'disk-1',
+    Size: '2 GiB',
+    status: 'attached',
+  })
+  await expectRowVisible(table, {
+    'Attached To': '',
+    Disk: 'disk-3',
+    Size: '6 GiB',
+    status: 'detached',
+  })
+
+  await clickRowAction(page, 'disk-1 db1', 'Snapshot')
+  await expect(page.getByText("Creating snapshot of disk 'disk-1'").nth(0)).toBeVisible()
+  await expect(page.getByText('Snapshot successfully created').nth(0)).toBeVisible()
+})
+
+test('Disk snapshot error', async ({ page }) => {
+  await page.goto('/projects/mock-project/disks')
+
+  // special disk that triggers snapshot error
+  await clickRowAction(page, 'disk-snapshot-error', 'Snapshot')
+  await expect(
+    page.getByText("Creating snapshot of disk 'disk-snapshot-error'").nth(0)
+  ).toBeVisible()
+  await expect(page.getByText('Failed to create snapshot').nth(0)).toBeVisible()
+  await expect(page.getByText('Cannot snapshot disk').nth(0)).toBeVisible()
+})
 
 test.describe('Disk create', () => {
   test.beforeEach(async ({ page }) => {

libs/api-mocks/disk.ts

@@ -135,7 +135,7 @@ export const disks: Json<Disk>[] = [
   },
   {
     id: '3f23c80f-c523-4d86-8292-2ca3f807bb12',
-    name: 'disk-11',
+    name: 'disk-snapshot-error',
     description: '',
     project_id: project.id,
     time_created: new Date().toISOString(),

libs/api-mocks/msw/handlers.ts

@@ -742,6 +742,10 @@ export const handlers = makeHandlers({
   snapshotCreate({ body, query }) {
     const project = lookup.project(query)
 
+    if (body.disk === 'disk-snapshot-error') {
+      throw 'Cannot snapshot disk'
+    }
+
     errIfExists(db.snapshots, { name: body.name })
 
     const disk = lookup.disk({ ...query, disk: body.disk })