Show size of attached disks in mini table

app/components/form/fields/DisksTableField.tsx

@@ -13,7 +13,6 @@ import type { DiskCreate } from '@oxide/api'
 import { AttachDiskModalForm } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import type { InstanceCreateInput } from '~/forms/instance-create'
-import { EmptyCell } from '~/table/cells/EmptyCell'
 import { sizeCellInner } from '~/table/columns/common'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
@@ -22,7 +21,7 @@ import { Truncate } from '~/ui/lib/Truncate'
 
 export type DiskTableItem =
   | (DiskCreate & { type: 'create' })
-  | { name: string; type: 'attach' }
+  | { name: string; type: 'attach'; size: number }
 
 /**
  * Designed less for reuse, more to encapsulate logic that would otherwise
@@ -61,8 +60,7 @@ export function DisksTableField({
             },
             {
               header: 'Size',
-              cell: (item) =>
-                item.type === 'attach' ? <EmptyCell /> : sizeCellInner(item.size),
+              cell: (item) => sizeCellInner(item.size),
             },
           ]}
           rowKey={(item) => item.name}
@@ -99,8 +97,8 @@ export function DisksTableField({
       {showDiskAttach && (
         <AttachDiskModalForm
           onDismiss={() => setShowDiskAttach(false)}
-          onSubmit={(values) => {
-            onChange([...items, { type: 'attach', ...values }])
+          onSubmit={({ name, size }: { name: string; size: number }) => {
+            onChange([...items, { type: 'attach', name, size } satisfies DiskTableItem])
             setShowDiskAttach(false)
           }}
           diskNamesToExclude={items.filter((i) => i.type === 'attach').map((i) => i.name)}

app/forms/disk-attach.tsx

@@ -20,7 +20,7 @@ const defaultValues = { name: '' }
 
 type AttachDiskProps = {
   /** If defined, this overrides the usual mutation */
-  onSubmit: (diskAttach: { name: string }) => void
+  onSubmit: (diskAttach: { name: string; size: number }) => void
   onDismiss: () => void
   diskNamesToExclude?: string[]
   loading?: boolean
@@ -64,7 +64,13 @@ export function AttachDiskModalForm({
       submitError={submitError}
       loading={loading}
       title="Attach disk"
-      onSubmit={onSubmit}
+      onSubmit={({ name }) => {
+        // because the ComboboxField is required and does not allow arbitrary
+        // values (values not in the list of disks), we can only get here if the
+        // disk is defined and in the list
+        const disk = data!.items.find((d) => d.name === name)!
+        onSubmit({ name, size: disk.size })
+      }}
     >
       <ComboboxField
         label="Disk name"

test/e2e/instance-create.e2e.ts

@@ -597,7 +597,7 @@ test('create instance with additional disks', async ({ page }) => {
   await selectOption(page, 'Disk name', 'disk-3')
   await page.getByRole('button', { name: 'Attach disk' }).click()
 
-  await expectRowVisible(disksTable, { Name: 'disk-3', Type: 'attach', Size: '—' })
+  await expectRowVisible(disksTable, { Name: 'disk-3', Type: 'attach', Size: '6 GiB' })
 
   // Create the instance
   await page.getByRole('button', { name: 'Create instance' }).click()