Refactoring

app/components/form/fields/ComboboxField.tsx

@@ -41,10 +41,12 @@ export function ComboboxField<
   allowArbitraryValues,
   placeholder,
   // Intent is to not show both a placeholder and a description, while still having good defaults; prefer a description to a placeholder
-  // If description is provided, use it
-  // If not, but a placeholder is provided, the default description should be undefined
-  // If no placeholder is provided and arbitrary values are allowed, the default description should be 'Select an option or enter a custom value'
-  // If no placeholder is provided and arbitrary values are not allowed, the default description should be 'Select an option'
+  /*
+   * If description is provided, use it.
+   * If not, but a placeholder is provided, the default description should be undefined.
+   * If no placeholder is provided and arbitrary values are allowed, the default description should be 'Select an option or enter a custom value'.
+   * If no placeholder is provided and arbitrary values are not allowed, the default description should be 'Select an option'.
+   */
   description = placeholder
     ? undefined
     : allowArbitraryValues

app/forms/disk-attach.tsx

@@ -57,7 +57,6 @@ export function AttachDiskSideModalForm({
       <ComboboxField
         label="Disk name"
         placeholder="Select a disk"
-        description=""
         name="name"
         items={detachedDisks.map(({ name }) => ({ value: name, label: name }))}
         required

app/forms/firewall-rules-common.tsx

@@ -286,14 +286,16 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
   const targetAndHostDefaultValues: TargetAndHostFormValues = { type: 'vpc', value: '' }
   const { project } = useProjectSelector()
   // prefetchedApiQueries below are prefetched in firewall-rules-create and -edit
-  const { data: instancesData } = usePrefetchedApiQuery('instanceList', {
+  const {
+    data: { items: instances },
+  } = usePrefetchedApiQuery('instanceList', {
     query: { project, limit: PAGE_SIZE },
   })
-  const instances = instancesData?.items ?? []
-  const { data: vpcData } = usePrefetchedApiQuery('vpcList', {
+  const {
+    data: { items: vpcs },
+  } = usePrefetchedApiQuery('vpcList', {
     query: { project, limit: PAGE_SIZE },
   })
-  const vpcs = vpcData?.items ?? []
 
   // Targets
   const targetForm = useForm({ defaultValues: targetAndHostDefaultValues })

app/forms/snapshot-create.tsx

@@ -77,7 +77,6 @@ export function CreateSnapshotSideModalForm() {
         label="Disk"
         name="disk"
         placeholder="Select a disk"
-        description=""
         items={diskItems}
         required
         control={form.control}

app/pages/system/SiloImagesPage.tsx

@@ -170,7 +170,6 @@ const PromoteImageModal = ({ onDismiss }: { onDismiss: () => void }) => {
           <form autoComplete="off" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <ComboboxField
               placeholder="Select a project"
-              description=""
               name="project"
               label="Project"
               items={projectItems}