Combobox

app/components/form/fields/ComboboxField.tsx

@@ -0,0 +1,62 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import {
+  useController,
+  type Control,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form'
+
+import { Combobox, type ComboboxBaseProps } from '~/ui/lib/Combobox'
+import { capitalize } from '~/util/str'
+
+import { ErrorMessage } from './ErrorMessage'
+
+export type ComboboxFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = {
+  name: TName
+  control: Control<TFieldValues>
+  onChange?: (value: string | null | undefined) => void
+  disabled?: boolean
+} & ComboboxBaseProps
+
+export function ComboboxField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+  // TODO: constrain TValue to extend string
+>({
+  control,
+  name,
+  label = capitalize(name),
+  required,
+  onChange,
+  disabled,
+  ...props
+}: ComboboxFieldProps<TFieldValues, TName>) {
+  const { field, fieldState } = useController({ name, control, rules: { required } })
+  return (
+    <div className="max-w-lg">
+      <Combobox
+        isDisabled={disabled}
+        label={label}
+        required={required}
+        selected={field.value || null}
+        hasError={fieldState.error !== undefined}
+        onChange={(value) => {
+          field.onChange(value)
+          onChange?.(value)
+        }}
+        {...props}
+      />
+      <ErrorMessage error={fieldState.error} label={label} />
+    </div>
+  )
+}

app/components/form/fields/ImageSelectField.tsx

@@ -32,6 +32,8 @@ export function BootDiskImageSelectField({
 }: ImageSelectFieldProps) {
   const diskSizeField = useController({ control, name: 'bootDiskSize' }).field
   return (
+    // This should be migrated to a `ComboboxField` (and with a `toComboboxItem`), once
+    // we have a combobox that supports more elaborate labels (beyond just strings).
     <ListboxField
       disabled={disabled}
       control={control}

app/components/form/fields/SubnetListbox.tsx

@@ -11,12 +11,12 @@ import { useApiQuery } from '@oxide/api'
 
 import { useProjectSelector } from '~/hooks'
 
-import { ListboxField, type ListboxFieldProps } from './ListboxField'
+import { ComboboxField, type ComboboxFieldProps } from './ComboboxField'
 
 type SubnetListboxProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
-> = Omit<ListboxFieldProps<TFieldValues, TName>, 'items'> & {
+> = Omit<ComboboxFieldProps<TFieldValues, TName>, 'items'> & {
   vpcNameField: FieldPath<TFieldValues>
 }
 
@@ -47,7 +47,7 @@ export function SubnetListbox<
     ).data?.items || []
 
   return (
-    <ListboxField
+    <ComboboxField
       {...fieldProps}
       items={subnets.map(({ name }) => ({ value: name, label: name }))}
       disabled={!vpcExists}

app/forms/disk-attach.tsx

@@ -7,7 +7,7 @@
  */
 import { useApiQuery, type ApiError } from '@oxide/api'
 
-import { ListboxField } from '~/components/form/fields/ListboxField'
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm, useProjectSelector } from '~/hooks'
 
@@ -33,14 +33,11 @@ export function AttachDiskSideModalForm({
   loading,
   submitError = null,
 }: AttachDiskProps) {
-  const projectSelector = useProjectSelector()
+  const { project } = useProjectSelector()
 
-  // TODO: loading state? because this fires when the modal opens and not when
-  // they focus the combobox, it will almost always be done by the time they
-  // click in
-  // TODO: error handling
+  const { data } = useApiQuery('diskList', { query: { project, limit: 1000 } })
   const detachedDisks =
-    useApiQuery('diskList', { query: projectSelector }).data?.items.filter(
+    data?.items.filter(
       (d) => d.state.state === 'detached' && !diskNamesToExclude.includes(d.name)
     ) || []
 
@@ -51,14 +48,15 @@ export function AttachDiskSideModalForm({
       form={form}
       formType="create"
       resourceName="disk"
-      title="Attach Disk"
+      title="Attach disk"
       onSubmit={onSubmit}
       loading={loading}
       submitError={submitError}
       onDismiss={onDismiss}
     >
-      <ListboxField
+      <ComboboxField
         label="Disk name"
+        placeholder="Select a disk"
         name="name"
         items={detachedDisks.map(({ name }) => ({ value: name, label: name }))}
         required

app/forms/instance-create.tsx

@@ -37,6 +37,7 @@ import {
 import { AccordionItem } from '~/components/AccordionItem'
 import { DocsPopover } from '~/components/DocsPopover'
 import { CheckboxField } from '~/components/form/fields/CheckboxField'
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { DiskSizeField } from '~/components/form/fields/DiskSizeField'
 import {
@@ -45,7 +46,6 @@ import {
 } from '~/components/form/fields/DisksTableField'
 import { FileField } from '~/components/form/fields/FileField'
 import { BootDiskImageSelectField as ImageSelectField } from '~/components/form/fields/ImageSelectField'
-import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { NetworkInterfaceField } from '~/components/form/fields/NetworkInterfaceField'
 import { NumberField } from '~/components/form/fields/NumberField'
@@ -550,13 +550,14 @@ export function CreateInstanceForm() {
                 />
               </div>
             ) : (
-              <ListboxField
+              <ComboboxField
                 label="Disk"
                 name="diskSource"
                 description="Existing disks that are not attached to an instance"
                 items={disks}
                 required
                 control={control}
+                placeholder="Select a disk"
               />
             )}
           </Tabs.Content>

app/forms/network-interface-create.tsx

@@ -9,8 +9,8 @@ import { useMemo } from 'react'
 
 import { useApiQuery, type ApiError, type InstanceNetworkInterfaceCreate } from '@oxide/api'
 
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
-import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SubnetListbox } from '~/components/form/fields/SubnetListbox'
 import { TextField } from '~/components/form/fields/TextField'
@@ -65,7 +65,7 @@ export function CreateNetworkInterfaceForm({
       <DescriptionField name="description" control={form.control} />
       <FormDivider />
 
-      <ListboxField
+      <ComboboxField
         name="vpcName"
         label="VPC"
         items={vpcs.map(({ name }) => ({ label: name, value: name }))}

app/forms/snapshot-create.tsx

@@ -16,8 +16,8 @@ import {
   type SnapshotCreate,
 } from '@oxide/api'
 
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
-import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm, useProjectSelector } from '~/hooks'
@@ -73,7 +73,13 @@ export function CreateSnapshotSideModalForm() {
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
-      <ListboxField name="disk" items={diskItems} required control={form.control} />
+      <ComboboxField
+        label="Disk"
+        name="disk"
+        items={diskItems}
+        required
+        control={form.control}
+      />
     </SideModalForm>
   )
 }

app/pages/system/SiloImagesPage.tsx

@@ -20,6 +20,7 @@ import {
 import { Images16Icon, Images24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { toListboxItem } from '~/components/form/fields/ImageSelectField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { useForm } from '~/hooks'
@@ -167,7 +168,7 @@ const PromoteImageModal = ({ onDismiss }: { onDismiss: () => void }) => {
       <Modal.Body>
         <Modal.Section>
           <form autoComplete="off" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-            <ListboxField
+            <ComboboxField
               placeholder="Filter images by project"
               name="project"
               label="Project"
@@ -268,7 +269,7 @@ const DemoteImageModal = ({
               content="Once an image has been demoted it is only visible to the project that it is demoted into. This will not affect disks already created with the image."
             />
 
-            <ListboxField
+            <ComboboxField
               placeholder="Select project for image"
               name="project"
               label="Project"

app/pages/system/networking/IpPoolPage.tsx

@@ -24,7 +24,7 @@ import { IpGlobal16Icon, IpGlobal24Icon } from '@oxide/design-system/icons/react
 
 import { CapacityBar } from '~/components/CapacityBar'
 import { DocsPopover } from '~/components/DocsPopover'
-import { ListboxField } from '~/components/form/fields/ListboxField'
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { HL } from '~/components/HL'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { getIpPoolSelector, useForm, useIpPoolSelector } from '~/hooks'
@@ -368,7 +368,7 @@ function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
               content="Users in the selected silo will be able to allocate IPs from this pool."
             />
 
-            <ListboxField
+            <ComboboxField
               placeholder="Select silo"
               name="silo"
               label="Silo"

app/pages/system/silos/SiloIpPoolsTab.tsx

@@ -12,7 +12,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { useApiMutation, useApiQuery, useApiQueryClient, type SiloIpPool } from '@oxide/api'
 import { Networking24Icon } from '@oxide/design-system/icons/react'
 
-import { ListboxField } from '~/components/form/fields/ListboxField'
+import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { HL } from '~/components/HL'
 import { useForm, useSiloSelector } from '~/hooks'
 import { confirmAction } from '~/stores/confirm-action'
@@ -235,7 +235,7 @@ function LinkPoolModal({ onDismiss }: { onDismiss: () => void }) {
               content="Users in this silo will be able to allocate IPs from the selected pool."
             />
 
-            <ListboxField
+            <ComboboxField
               placeholder="Select pool"
               name="pool"
               label="IP pool"