diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index 8008d5aed..610e0aa70 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 {disk.name} detached>) // prettier-ignore
@@ -257,9 +257,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:
Are you sure you want to detach {disk.name}?
, // prettier-ignore
+ actionType: 'danger',
+ }),
},
],
[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..0c6a08010 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
})
@@ -202,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()
@@ -219,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()