Expand combobox flexibility

app/components/form/fields/ComboboxField.tsx

@@ -25,7 +25,7 @@ export type ComboboxFieldProps<
   name: TName
   control: Control<TFieldValues>
   onChange?: (value: string | null | undefined) => void
-  disabled?: boolean
+  allowArbitraryValues?: boolean
 } & ComboboxBaseProps
 
 export function ComboboxField<
@@ -38,22 +38,37 @@ export function ComboboxField<
   label = capitalize(name),
   required,
   onChange,
-  disabled,
+  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'.
+   */
+  description = placeholder
+    ? undefined
+    : allowArbitraryValues
+      ? 'Select an option or enter a custom value'
+      : 'Select an option',
   ...props
 }: ComboboxFieldProps<TFieldValues, TName>) {
   const { field, fieldState } = useController({ name, control, rules: { required } })
   return (
     <div className="max-w-lg">
       <Combobox
-        isDisabled={disabled}
         label={label}
+        placeholder={placeholder}
+        description={description}
         required={required}
         selected={field.value || null}
         hasError={fieldState.error !== undefined}
         onChange={(value) => {
           field.onChange(value)
           onChange?.(value)
         }}
+        allowArbitraryValues={allowArbitraryValues}
         {...props}
       />
       <ErrorMessage error={fieldState.error} label={label} />

app/components/form/fields/ListboxField.tsx

@@ -35,6 +35,7 @@ export type ListboxFieldProps<
   onChange?: (value: string | null | undefined) => void
   isLoading?: boolean
   noItemsPlaceholder?: string
+  showOptionalTag?: boolean
 }
 
 export function ListboxField<
@@ -54,6 +55,7 @@ export function ListboxField<
   onChange,
   isLoading,
   noItemsPlaceholder,
+  showOptionalTag,
 }: ListboxFieldProps<TFieldValues, TName>) {
   // TODO: recreate this logic
   //   validate: (v) => (required && !v ? `${name} is required` : undefined),
@@ -80,6 +82,7 @@ export function ListboxField<
         hasError={fieldState.error !== undefined}
         isLoading={isLoading}
         buttonRef={field.ref}
+        showOptionalTag={showOptionalTag}
       />
       <ErrorMessage error={fieldState.error} label={label} />
     </div>

app/components/form/fields/useItemsList.ts

@@ -42,3 +42,14 @@ export const useCustomRouterItems = () => {
 
   return { isLoading, items: routerItems }
 }
+
+// Get a list of subnets for a given VPC; If no project/VPC is provided, use the VPC from the VpcSelector
+export const useVpcSubnets = ({ project, vpc }: { project?: string; vpc?: string }) => {
+  const vpcSelector = useVpcSelector()
+  const { isLoading, data } = useApiQuery(
+    'vpcSubnetList',
+    { query: { project: project || vpcSelector.project, vpc: vpc || vpcSelector.vpc } },
+    { enabled: !!vpc }
+  )
+  return { isLoading, items: data?.items }
+}