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

Author: charliepark

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,19 +20,21 @@ type ImageSelectFieldProps = {
   images: Image[]
   control: Control<InstanceCreateInput>
   disabled?: boolean
+  name: 'siloImageSource' | 'projectImageSource'
 }
 
 export function BootDiskImageSelectField({
   images,
   control,
   disabled,
+  name,
 }: ImageSelectFieldProps) {
   const diskSizeField = useController({ control, name: 'bootDiskSize' }).field
   return (
     <ListboxField
       disabled={disabled}
       control={control}
-      name="bootDiskSource"
+      name={name}
       label="Image"
       placeholder="Select an image"
       items={images.map((i) => toListboxItem(i))}
@@ -40,8 +43,7 @@ export function BootDiskImageSelectField({
         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))
         }
       }}
     />