From 5720afcf4268b7c308e2299888372b8194ef2571 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 10 Dec 2024 20:35:24 -0800
Subject: [PATCH 1/4] Add confirmation modal for disk detachment

---
 .../instances/instance/tabs/StorageTab.tsx     | 18 ++++++++++++++----
 test/e2e/instance-disks.e2e.ts                 |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index 8008d5aed..c3dd53ac3 100644
--- 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
@@ -257,9 +257,19 @@ 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>
+            ),
+            actionType: 'primary',
+          }),
       },
     ],
     [detachDisk, instanceUpdate, instance, getSnapshotAction, bootDisks, ncpus, memory]
diff --git a/test/e2e/instance-disks.e2e.ts b/test/e2e/instance-disks.e2e.ts
index b53e872e4..f67a6a6bc 100644
--- a/test/e2e/instance-disks.e2e.ts
+++ b/test/e2e/instance-disks.e2e.ts
@@ -138,6 +138,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
 })

From 0035c402c1645325b4af3d67d63599500276ed18 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 11 Dec 2024 09:41:17 -0800
Subject: [PATCH 2/4] add in a few confirmation clicks in tests

---
 test/e2e/instance-disks.e2e.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/e2e/instance-disks.e2e.ts b/test/e2e/instance-disks.e2e.ts
index f67a6a6bc..0c6a08010 100644
--- a/test/e2e/instance-disks.e2e.ts
+++ b/test/e2e/instance-disks.e2e.ts
@@ -203,6 +203,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()
 
@@ -220,6 +221,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()
 

From 7965e13f79e40a5a7bd3227b1c8d58fa73f680df Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 11 Dec 2024 17:16:42 -0800
Subject: [PATCH 3/4] danger, will robinson

---
 app/pages/project/instances/instance/tabs/StorageTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index c3dd53ac3..140e68ad5 100644
--- a/app/pages/project/instances/instance/tabs/StorageTab.tsx
+++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -268,7 +268,7 @@ export function Component() {
                 Are you sure you want to detach <HL>{disk.name}</HL>?
               </p>
             ),
-            actionType: 'primary',
+            actionType: 'danger',
           }),
       },
     ],

From 3cecea323ccbe2dd43716b6ac576575acfe34e2c Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 13 Dec 2024 11:28:10 -0600
Subject: [PATCH 4/4] save 4 lines

---
 app/pages/project/instances/instance/tabs/StorageTab.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index 140e68ad5..610e0aa70 100644
--- a/app/pages/project/instances/instance/tabs/StorageTab.tsx
+++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -263,11 +263,7 @@ export function Component() {
               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>
-            ),
+            modalContent: <p>Are you sure you want to detach <HL>{disk.name}</HL>?</p>, // prettier-ignore
             actionType: 'danger',
           }),
       },