Add confirmation modal for disk detachment (#2615)

* Add confirmation modal for disk detachment * add in a few confirmation clicks in tests * danger, will robinson * save 4 lines --------- Co-authored-by: David Crespo <[email protected]>
oxidecomputer · Dec 13, 2024 · 1dd25f6 · 1dd25f6
1 parent 11486f8
commit 1dd25f6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -87,7 +87,7 @@ export function Component() {
     [instanceName, project]
   )
 
-  const { mutate: detachDisk } = useApiMutation('instanceDiskDetach', {
+  const { mutateAsync: detachDisk } = useApiMutation('instanceDiskDetach', {
     onSuccess(disk) {
       queryClient.invalidateQueries('instanceDiskList')
       addToast(<>Disk <HL>{disk.name}</HL> detached</>) // prettier-ignore
@@ -262,9 +262,15 @@ export function Component() {
             detached
           </>
         ),
-        onActivate() {
-          detachDisk({ body: { disk: disk.name }, path: { instance: instance.id } })
-        },
+        onActivate: () =>
+          confirmAction({
+            doAction: () =>
+              detachDisk({ body: { disk: disk.name }, path: { instance: instance.id } }),
+            errorTitle: 'Could not detach disk',
+            modalTitle: 'Confirm detach disk',
+            modalContent: <p>Are you sure you want to detach <HL>{disk.name}</HL>?</p>, // prettier-ignore
+            actionType: 'danger',
+          }),
       },
     ],
     [

diff --git a/test/e2e/instance-disks.e2e.ts b/test/e2e/instance-disks.e2e.ts
@@ -140,6 +140,7 @@ test('Detach disk', async ({ page }) => {
   await expect(successMsg).toBeHidden()
 
   await clickRowAction(page, 'disk-2', 'Detach')
+  await page.getByRole('button', { name: 'Confirm' }).click()
   await expect(successMsg).toBeVisible()
   await expect(row).toBeHidden() // disk row goes away
 })
@@ -204,6 +205,7 @@ test('Change boot disk', async ({ page }) => {
 
   // detach disk so there's only one
   await clickRowAction(page, 'disk-2', 'Detach')
+  await page.getByRole('button', { name: 'Confirm' }).click()
 
   await expect(page.getByText('Instance will boot from disk-1')).toBeVisible()
 
@@ -221,6 +223,8 @@ test('Change boot disk', async ({ page }) => {
   await expectRowVisible(otherDisksTable, disk1)
 
   await clickRowAction(page, 'disk-1', 'Detach')
+  await page.getByRole('button', { name: 'Confirm' }).click()
+
   await expect(noBootDisk).toBeVisible()
   await expect(noOtherDisks).toBeVisible()