Add confirmation modal to instance stop (#2157)

Author: charliepark

app/pages/project/instances/actions.tsx

@@ -10,6 +10,8 @@ import { useNavigate } from 'react-router-dom'
 
 import { instanceCan, useApiMutation, type Instance } from '@oxide/api'
 
+import { HL } from '~/components/HL'
+import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import type { MakeActions } from '~/table/columns/action-col'
@@ -65,14 +67,28 @@ export const useMakeInstanceActions = (
         {
           label: 'Stop',
           onActivate() {
-            stopInstance.mutate(instanceParams, {
-              onSuccess: () => addToast({ title: `Stopping instance '${instance.name}'` }),
-              onError: (error) =>
-                addToast({
-                  variant: 'error',
-                  title: `Error stopping instance '${instance.name}'`,
-                  content: error.message,
+            confirmAction({
+              actionType: 'danger',
+              doAction: async () =>
+                stopInstance.mutate(instanceParams, {
+                  onSuccess: () =>
+                    addToast({ title: `Stopping instance '${instance.name}'` }),
+                  onError: (error) =>
+                    addToast({
+                      variant: 'error',
+                      title: `Error stopping instance '${instance.name}'`,
+                      content: error.message,
+                    }),
                 }),
+              modalTitle: 'Confirm stop instance',
+              modalContent: (
+                <p>
+                  Are you sure you want to stop <HL>{instance.name}</HL>? Stopped instances
+                  retain attached disks and IP addresses, but allocated CPU and memory are
+                  freed.
+                </p>
+              ),
+              errorTitle: `Could not stop ${instance.name}`,
             })
           },
           disabled: !instanceCan.stop(instance) && (
@@ -113,6 +129,7 @@ export const useMakeInstanceActions = (
                 },
               }),
             label: instance.name,
+            resourceKind: 'instance',
           }),
           disabled: !instanceCan.delete(instance) && (
             <>Only {fancifyStates(instanceCan.delete.states)} instances can be deleted</>

app/stores/confirm-delete.tsx

@@ -23,18 +23,20 @@ type DeleteConfig = {
    * directly.
    */
   label: React.ReactNode
+  resourceKind?: string
 }
 
 export const confirmDelete =
-  ({ doDelete, label }: DeleteConfig) =>
+  ({ doDelete, label, resourceKind }: DeleteConfig) =>
   () => {
     const displayLabel = typeof label === 'string' ? <HL>{label}</HL> : label
+    const modalTitle = resourceKind ? `Confirm delete ${resourceKind}` : 'Confirm delete'
     useConfirmAction.setState({
       actionConfig: {
         doAction: doDelete,
         modalContent: <p>Are you sure you want to delete {displayLabel}?</p>,
         errorTitle: 'Could not delete resource',
-        modalTitle: 'Confirm delete',
+        modalTitle,
         actionType: 'danger',
       },
     })

test/e2e/instance/list.e2e.ts

@@ -34,6 +34,7 @@ test('can stop and delete a running instance', async ({ page }) => {
   await row.getByRole('button', { name: 'Row actions' }).click()
   await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeDisabled()
   await page.getByRole('menuitem', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
 
   // now it's stopped
   await expect(row.getByRole('cell', { name: /stopped/ })).toBeVisible()
@@ -55,6 +56,7 @@ test('can stop a starting instance', async ({ page }) => {
 
   await row.getByRole('button', { name: 'Row actions' }).click()
   await page.getByRole('menuitem', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
 
   await expect(row.getByRole('cell', { name: /stopped/ })).toBeVisible()
 })

test/e2e/network-interface-create.e2e.ts

@@ -16,6 +16,7 @@ test('can create a NIC with a specified IP address', async ({ page }) => {
   // stop the instance
   await page.getByRole('button', { name: 'Instance actions' }).click()
   await page.getByRole('menuitem', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
 
   // open the add network interface side modal
   await page.getByRole('button', { name: 'Add network interface' }).click()
@@ -45,6 +46,7 @@ test('can create a NIC with a blank IP address', async ({ page }) => {
   // stop the instance
   await page.getByRole('button', { name: 'Instance actions' }).click()
   await page.getByRole('menuitem', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
 
   // open the add network interface side modal
   await page.getByRole('button', { name: 'Add network interface' }).click()

test/e2e/utils.ts

@@ -106,6 +106,7 @@ export async function expectRowVisible(
 export async function stopInstance(page: Page) {
   await page.click('role=button[name="Instance actions"]')
   await page.click('role=menuitem[name="Stop"]')
+  await page.click('role=button[name="Confirm"]')
   await closeToast(page)
 }
 

test/e2e/z-index.e2e.ts

@@ -48,6 +48,7 @@ test('Dropdown content in SidebarModal shows on screen', async ({ page }) => {
   // stop the instance
   await page.getByRole('button', { name: 'Instance actions' }).click()
   await page.getByRole('menuitem', { name: 'Stop' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
 
   // open the add network interface side modal
   await page.getByRole('button', { name: 'Add network interface' }).click()