Fix error handling in disk attach modal (#3346)

Fixes two bugs found while doing #3345:

1. **Silent attach failure in the create-then-attach flow.** In the
unlikely event you create a disk from the storage tab and the subsequent
attach call fails (e.g., the instance started in the meantime), there
was no visible error: the error only rendered inside the attach modal,
which isn't open anymore. You'd get the "Disk created" toast but the
disk just wouldn't be attached. Now it shows an error toast.

2. **Stale error leaking between modal uses.** In that failure scenario,
the error stuck to the shared mutation, so the *next* time you opened
the "Attach existing disk" modal, it displayed the old error from the
create flow before you'd done anything. Now the attach modal's mutation
is its own, created fresh on each open.

Moving the mutation inside its own component means we don't have to do
`reset()`s to avoid holding onto state across different openings of the
attach modal.

Author: david-crespo

app/forms/disk-attach.tsx

@@ -9,16 +9,55 @@ import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { api, q, type ApiError, type DiskType } from '@oxide/api'
+import {
+  api,
+  q,
+  queryClient,
+  useApiMutation,
+  type ApiError,
+  type DiskType,
+} from '@oxide/api'
 
 import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { ModalForm } from '~/components/form/ModalForm'
-import { useProjectSelector } from '~/hooks/use-params'
+import { HL } from '~/components/HL'
+import { useInstanceSelector, useProjectSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
 import { toComboboxItems } from '~/ui/lib/Combobox'
 import { ALL_ISH } from '~/util/consts'
 
 const defaultValues = { name: '' }
 
+/**
+ * Attach modal for the instance storage tab. Owns the attach mutation so its
+ * loading and error state can't outlive the modal. `AttachDiskModalForm` below
+ * stays mutation-free because the instance create form also uses it (with a
+ * setState `onSubmit`) on a route where no instance exists yet.
+ */
+export function AttachDiskModal({ onDismiss }: { onDismiss: () => void }) {
+  const { project, instance } = useInstanceSelector()
+
+  const attachDisk = useApiMutation(api.instanceDiskAttach, {
+    onSuccess(disk) {
+      queryClient.invalidateEndpoint('instanceDiskList')
+      onDismiss()
+      // prettier-ignore
+      addToast(<>Disk <HL>{disk.name}</HL> attached</>)
+    },
+  })
+
+  return (
+    <AttachDiskModalForm
+      onDismiss={onDismiss}
+      onSubmit={({ name }) => {
+        attachDisk.mutate({ path: { instance }, query: { project }, body: { disk: name } })
+      }}
+      loading={attachDisk.isPending}
+      submitError={attachDisk.error}
+    />
+  )
+}
+
 type AttachDiskProps = {
   /** If defined, this overrides the usual mutation */
   onSubmit: (diskAttach: { name: string; size: number; diskType: DiskType }) => void

app/pages/project/instances/StorageTab.tsx

@@ -25,7 +25,7 @@ import { Storage24Icon } from '@oxide/design-system/icons/react'
 
 import { HL } from '~/components/HL'
 import { DiskStateBadge, DiskTypeBadge, ReadOnlyBadge } from '~/components/StateBadge'
-import { AttachDiskModalForm } from '~/forms/disk-attach'
+import { AttachDiskModal } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import { getInstanceSelector, useInstanceSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
@@ -320,14 +320,22 @@ export default function StorageTab() {
     ]
   )
 
-  const attachDisk = useApiMutation(api.instanceDiskAttach, {
+  // attach step of the create-then-attach flow only; the attach modal owns its
+  // own mutation. The create modal closes on create success, so this runs in
+  // the background and failures must surface as a toast.
+  const attachCreatedDisk = useApiMutation(api.instanceDiskAttach, {
     onSuccess(disk) {
       queryClient.invalidateEndpoint('instanceDiskList')
-      setShowDiskCreate(false)
-      setShowDiskAttach(false)
       // prettier-ignore
       addToast(<>Disk <HL>{disk.name}</HL> attached</>)
     },
+    onError(err, variables) {
+      addToast({
+        title: `Failed to attach disk ${variables.body.disk}`,
+        content: err.message,
+        variant: 'error',
+      })
+    },
   })
 
   const bootDisksTable = useReactTable({
@@ -434,24 +442,11 @@ export default function StorageTab() {
           onSuccess={({ name }) => {
             // TODO: this should probably be done with `mutateAsync` and
             // awaited, but it's a pain, so punt for now
-            attachDisk.mutate({ ...instancePathQuery, body: { disk: name } })
-          }}
-        />
-      )}
-      {showDiskAttach && (
-        <AttachDiskModalForm
-          onDismiss={() => {
-            setShowDiskAttach(false)
-            // clear API errors on the mutation
-            attachDisk.reset()
-          }}
-          onSubmit={({ name }) => {
-            attachDisk.mutate({ ...instancePathQuery, body: { disk: name } })
+            attachCreatedDisk.mutate({ ...instancePathQuery, body: { disk: name } })
           }}
-          loading={attachDisk.isPending}
-          submitError={attachDisk.error}
         />
       )}
+      {showDiskAttach && <AttachDiskModal onDismiss={() => setShowDiskAttach(false)} />}
       {selectedDisk && (
         <DiskDetailSideModal
           disk={selectedDisk}