Create instance from existing boot disk (#2076)

* Create instance from existing boot disk

* Remove setting undefined on tab change (for now)

* Improve descriptions

* copy tweaks

* tweak empty states copy, fix diskList prefetch

* Fix issue with sourceType overload on project vs silo images and disks (#2097)

* Fix issue with sourceType collision on project vs silo images and disks

* refactor

* Refactoring, and updating types

* Maintain state of fields across tab navigation (#2100)

* Simplify test; make it work for Safari

* Clean up and add comments

* verify in test that correct image used

* clean up comment

* imageSize -> imageSizeGiB

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>
Co-authored-by: Charlie Park <charlie@oxidecomputer.com>

Author: 3 people

app/api/util.ts

@@ -118,6 +118,8 @@ export const diskCan = mapValues(
     delete: ['detached', 'creating', 'faulted'],
     // TODO: link to API source
     snapshot: ['attached', 'detached'],
+    // https://github.com/oxidecomputer/omicron/blob/4970c71e/nexus/db-queries/src/db/datastore/disk.rs#L169-L172
+    attach: ['creating', 'detached'],
   },
   (states: DiskState['state'][]) => {
     // only have to Pick because we want this to work for both Disk and

app/components/form/fields/ImageSelectField.tsx

@@ -11,6 +11,7 @@ import type { Image } from '@oxide/api'
 
 import type { InstanceCreateInput } from '~/forms/instance-create'
 import type { ListboxItem } from '~/ui/lib/Listbox'
+import { nearest10 } from '~/util/math'
 import { bytesToGiB, GiB } from '~/util/units'
 
 import { ListboxField } from './ListboxField'
@@ -19,24 +20,30 @@ type ImageSelectFieldProps = {
   images: Image[]
   control: Control<InstanceCreateInput>
   disabled?: boolean
+  name: 'siloImageSource' | 'projectImageSource'
 }
 
-export function ImageSelectField({ images, control, disabled }: ImageSelectFieldProps) {
+export function BootDiskImageSelectField({
+  images,
+  control,
+  disabled,
+  name,
+}: ImageSelectFieldProps) {
   const diskSizeField = useController({ control, name: 'bootDiskSize' }).field
   return (
     <ListboxField
       disabled={disabled}
       control={control}
-      name="image"
+      name={name}
+      label="Image"
       placeholder="Select an image"
       items={images.map((i) => toListboxItem(i))}
       required
       onChange={(id) => {
         const image = images.find((i) => i.id === id)! // if it's selected, it must be present
         const imageSizeGiB = image.size / GiB
         if (diskSizeField.value < imageSizeGiB) {
-          const nearest10 = Math.ceil(imageSizeGiB / 10) * 10
-          diskSizeField.onChange(nearest10)
+          diskSizeField.onChange(nearest10(imageSizeGiB))
         }
       }}
     />