Expand combobox flexibility

app/forms/firewall-rules-create.tsx

@@ -18,22 +18,32 @@ import {
   useApiQueryClient,
   usePrefetchedApiQuery,
   type ApiError,
+  type Instance,
+  type Vpc,
   type VpcFirewallRule,
   type VpcFirewallRuleHostFilter,
   type VpcFirewallRuleTarget,
   type VpcFirewallRuleUpdate,
 } from '@oxide/api'
 
 import { CheckboxField } from '~/components/form/fields/CheckboxField'
+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 { NumberField } from '~/components/form/fields/NumberField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField, TextFieldInner } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { getVpcSelector, useForm, useVpcSelector } from '~/hooks'
+import {
+  getProjectSelector,
+  getVpcSelector,
+  useForm,
+  useProjectSelector,
+  useVpcSelector,
+} from '~/hooks'
 import { addToast } from '~/stores/toast'
+import { PAGE_SIZE } from '~/table/QueryTable'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -123,6 +133,8 @@ const targetDefaultValues: TargetFormValues = {
 type CommonFieldsProps = {
   error: ApiError | null
   control: Control<FirewallRuleValues>
+  instances: Array<Instance>
+  vpcs: Array<Vpc>
 }
 
 function getFilterValueProps(hostType: VpcFirewallRuleHostFilter['type']) {
@@ -174,7 +186,7 @@ const DocsLinkMessage = () => (
   />
 )
 
-export const CommonFields = ({ error, control }: CommonFieldsProps) => {
+export const CommonFields = ({ error, control, instances, vpcs }: CommonFieldsProps) => {
   const portRangeForm = useForm({ defaultValues: portRangeDefaultValues })
   const ports = useController({ name: 'ports', control }).field
   const submitPortRange = portRangeForm.handleSubmit(({ portRange }) => {
@@ -210,6 +222,22 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
     targetForm.reset()
   })
 
+  const hostFilterItems = {
+    vpc: vpcs.map((v) => ({ value: v.name, label: v.name })),
+    // todo: this should be a list of subnets in the selected VPC,
+    // so we'll need to have the user first specify a VPC and then load these in
+    subnet: [
+      { value: 'subnet-1', label: 'subnet-one' },
+      { value: 'subnet-2', label: 'subnet-two' },
+      { value: 'subnet-3', label: 'subnet-three' },
+      { value: 'subnet-4', label: 'subnet-four' },
+      { value: 'subnet-5', label: 'subnet-five' },
+    ],
+    instance: instances.map((i) => ({ value: i.name, label: i.name })),
+    ip: [],
+    ip_net: [],
+  }
+
   return (
     <>
       <DocsLinkMessage />
@@ -482,7 +510,7 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
           So we should probably have the label on this field change when the
           host type changes. Also need to confirm that it's just an IP and
           not a block. */}
-        <TextField
+        <ComboboxField
           name="value"
           {...getFilterValueProps(hostForm.watch('type'))}
           required
@@ -493,6 +521,11 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
               submitHost(e)
             }
           }}
+          onInputChange={(value) => {
+            hostForm.setValue('value', value)
+          }}
+          items={hostFilterItems[hostForm.watch('type')]}
+          showNoMatchPlaceholder={false}
           // TODO: validate here, but it's complicated because it's conditional
           // on which type is selected
         />
@@ -560,13 +593,22 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
 }
 
 CreateFirewallRuleForm.loader = async ({ params }: LoaderFunctionArgs) => {
-  await apiQueryClient.prefetchQuery('vpcFirewallRulesView', {
-    query: getVpcSelector(params),
-  })
+  const { project } = getProjectSelector(params)
+  await Promise.all([
+    apiQueryClient.prefetchQuery('vpcFirewallRulesView', {
+      query: getVpcSelector(params),
+    }),
+    apiQueryClient.prefetchQuery('instanceList', {
+      query: { project, limit: PAGE_SIZE },
+    }),
+    apiQueryClient.prefetchQuery('vpcList', { query: { project, limit: PAGE_SIZE } }),
+  ])
+
   return null
 }
 
 export function CreateFirewallRuleForm() {
+  const { project } = useProjectSelector()
   const vpcSelector = useVpcSelector()
   const queryClient = useApiQueryClient()
 
@@ -581,10 +623,19 @@ export function CreateFirewallRuleForm() {
     },
   })
 
-  const { data } = usePrefetchedApiQuery('vpcFirewallRulesView', {
+  const { data: vpcFirewallRules } = usePrefetchedApiQuery('vpcFirewallRulesView', {
     query: vpcSelector,
   })
-  const existingRules = useMemo(() => R.sortBy(data.rules, (r) => r.priority), [data])
+  const existingRules = useMemo(
+    () => R.sortBy(vpcFirewallRules.rules, (r) => r.priority),
+    [vpcFirewallRules]
+  )
+  const { data: instances } = usePrefetchedApiQuery('instanceList', {
+    query: { project, limit: PAGE_SIZE },
+  })
+  const { data: vpcs } = usePrefetchedApiQuery('vpcList', {
+    query: { project, limit: PAGE_SIZE },
+  })
 
   const form = useForm({ defaultValues })
 
@@ -612,7 +663,12 @@ export function CreateFirewallRuleForm() {
       submitError={updateRules.error}
       submitLabel="Add rule"
     >
-      <CommonFields error={updateRules.error} control={form.control} />
+      <CommonFields
+        error={updateRules.error}
+        control={form.control}
+        instances={instances.items}
+        vpcs={vpcs.items}
+      />
     </SideModalForm>
   )
 }

app/ui/lib/Combobox.tsx

@@ -31,11 +31,17 @@ export type ComboboxBaseProps = {
   description?: React.ReactNode
   isDisabled?: boolean
   isLoading?: boolean
-  items: ComboboxItem[]
+  // without items, the combobox acts as a regular text input
+  items?: ComboboxItem[]
   label: string
   placeholder?: string
   required?: boolean
   tooltipText?: string
+  onInputChange?: (value: string) => void
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  // set to false in situations where the user should be able to type in new values
+  // to decide: should we even give a placeholder / warning?
+  showNoMatchPlaceholder?: boolean
 }
 
 type ComboboxProps = {
@@ -46,7 +52,7 @@ type ComboboxProps = {
 
 export const Combobox = ({
   description,
-  items,
+  items = [],
   selected,
   label,
   placeholder,
@@ -56,6 +62,9 @@ export const Combobox = ({
   isDisabled,
   isLoading,
   onChange,
+  onInputChange,
+  onKeyDown,
+  showNoMatchPlaceholder = true,
 }: ComboboxProps) => {
   const [query, setQuery] = useState(selected || '')
 
@@ -102,7 +111,11 @@ export const Combobox = ({
           <ComboboxInput
             aria-label="Select a disk"
             displayValue={() => (selected ? selected : query)}
-            onChange={(event) => setQuery(event.target.value)}
+            onChange={(event) => {
+              setQuery(event.target.value)
+              onInputChange?.(event.target.value)
+            }}
+            onKeyDown={onKeyDown}
             placeholder={placeholder}
             disabled={isDisabled || isLoading}
             className={cn(
@@ -113,48 +126,52 @@ export const Combobox = ({
               hasError && 'focus-error'
             )}
           />
-          <div className="flex items-center border-l px-3 border-secondary" aria-hidden>
-            <SelectArrows6Icon title="Select" className="w-2 text-tertiary" />
-          </div>
-        </ComboboxButton>
-        <ComboboxOptions
-          anchor="bottom start"
-          // 14px gap is presumably because it's measured from inside the outline or something
-          className={`ox-menu pointer-events-auto ${zIndex} relative w-[var(--button-width)] overflow-y-auto border !outline-none border-secondary [--anchor-gap:14px] empty:hidden`}
-          modal={false}
-        >
-          {filteredItems.length === 0 && (
-            <ComboboxOption disabled value="no-matches" className="relative">
-              <div className="ox-menu-item !text-disabled">No items match</div>
-            </ComboboxOption>
+          {items.length > 0 && (
+            <div className="flex items-center border-l px-3 border-secondary" aria-hidden>
+              <SelectArrows6Icon title="Select" className="w-2 text-tertiary" />
+            </div>
           )}
-          {filteredItems.map((item) => (
-            <ComboboxOption
-              key={item.label}
-              value={item.label}
-              className="relative border-b border-secondary last:border-0"
-              onSelect={() => {
-                onChange(item.label)
-                setQuery(item.label)
-              }}
-            >
-              {({ focus, selected }) => (
-                // This *could* be done with data-[focus] and data-[selected] instead, but
-                // it would be a lot more verbose. those can only be used with TW classes,
-                // not our .is-selected and .is-highlighted, so we'd have to copy the pieces
-                // of those rules one by one. Better to rely on the shared classes.
-                <div
-                  className={cn('ox-menu-item', {
-                    'is-selected': selected,
-                    'is-highlighted': focus,
-                  })}
-                >
-                  {item.label}
-                </div>
-              )}
-            </ComboboxOption>
-          ))}
-        </ComboboxOptions>
+        </ComboboxButton>
+        {items.length > 0 && (
+          <ComboboxOptions
+            anchor="bottom start"
+            // 14px gap is presumably because it's measured from inside the outline or something
+            className={`ox-menu pointer-events-auto ${zIndex} relative w-[var(--button-width)] overflow-y-auto border !outline-none border-secondary [--anchor-gap:14px] empty:hidden`}
+            modal={false}
+          >
+            {showNoMatchPlaceholder && filteredItems.length === 0 && (
+              <ComboboxOption disabled value="no-matches" className="relative">
+                <div className="ox-menu-item !text-disabled">No items match</div>
+              </ComboboxOption>
+            )}
+            {filteredItems.map((item) => (
+              <ComboboxOption
+                key={item.label}
+                value={item.label}
+                className="relative border-b border-secondary last:border-0"
+                onSelect={() => {
+                  onChange(item.label)
+                  setQuery(item.label)
+                }}
+              >
+                {({ focus, selected }) => (
+                  // This *could* be done with data-[focus] and data-[selected] instead, but
+                  // it would be a lot more verbose. those can only be used with TW classes,
+                  // not our .is-selected and .is-highlighted, so we'd have to copy the pieces
+                  // of those rules one by one. Better to rely on the shared classes.
+                  <div
+                    className={cn('ox-menu-item', {
+                      'is-selected': selected,
+                      'is-highlighted': focus,
+                    })}
+                  >
+                    {item.label}
+                  </div>
+                )}
+              </ComboboxOption>
+            ))}
+          </ComboboxOptions>
+        )}
       </HCombobox>
     </>
   )