Extend comboboxes to allow for arbitrary entries (#2296)

* Add functionality: users can now type new entries into comboboxes
* Refactor firewall forms
* Improve TS error messages
* Refactor comboboxes

Author: charliepark

app/components/form/fields/ComboboxField.tsx

@@ -25,7 +25,6 @@ export type ComboboxFieldProps<
   name: TName
   control: Control<TFieldValues>
   onChange?: (value: string | null | undefined) => void
-  disabled?: boolean
 } & ComboboxBaseProps
 
 export function ComboboxField<
@@ -38,22 +37,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
+  hideOptionalTag?: boolean
 }
 
 export function ListboxField<
@@ -54,6 +55,7 @@ export function ListboxField<
   onChange,
   isLoading,
   noItemsPlaceholder,
+  hideOptionalTag,
 }: 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}
+        hideOptionalTag={hideOptionalTag}
       />
       <ErrorMessage error={fieldState.error} label={label} />
     </div>