use special None value in router picker

oxidecomputer · Aug 22, 2024 · 5b1dd2a · 5b1dd2a
1 parent 82169e9
commit 5b1dd2a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 31 deletions.
diff --git a/app/components/form/fields/ListboxField.tsx b/app/components/form/fields/ListboxField.tsx
@@ -35,8 +35,6 @@ export type ListboxFieldProps<
   onChange?: (value: string | null | undefined) => void
   isLoading?: boolean
   noItemsPlaceholder?: string
-  isClearable?: boolean
-  onClear?: () => void
 }
 
 export function ListboxField<
@@ -56,8 +54,6 @@ export function ListboxField<
   onChange,
   isLoading,
   noItemsPlaceholder,
-  isClearable,
-  onClear,
 }: ListboxFieldProps<TFieldValues, TName>) {
   // TODO: recreate this logic
   //   validate: (v) => (required && !v ? `${name} is required` : undefined),
@@ -86,11 +82,6 @@ export function ListboxField<
         buttonRef={field.ref}
       />
       <ErrorMessage error={fieldState.error} label={label} />
-      {isClearable && (
-        <button type="button" onClick={onClear}>
-          clear
-        </button>
-      )}
     </div>
   )
 }
diff --git a/app/components/form/fields/useItemsList.ts b/app/components/form/fields/useItemsList.ts
@@ -11,16 +11,23 @@ import { useMemo } from 'react'
 import { useApiQuery } from '~/api'
 import { useVpcSelector } from '~/hooks'
 
+/**
+ * Special value indicating no router. Must convert `undefined` to this when
+ * populating form, and must convert this to `undefined` in onSubmit.
+ */
+export const NO_ROUTER = '||no router||'
+
 export const useCustomRouterItems = () => {
   const vpcSelector = useVpcSelector()
-  const routers = useApiQuery('vpcRouterList', { query: { ...vpcSelector } })
+  const { data, isLoading } = useApiQuery('vpcRouterList', { query: { ...vpcSelector } })
+
   const routerItems = useMemo(() => {
-    return (
-      routers?.data?.items
-        .filter((item) => item.kind === 'custom')
-        .map((router) => ({ value: router.id, label: router.name })) || []
-    )
-  }, [routers])
+    const items = (data?.items || [])
+      .filter((item) => item.kind === 'custom')
+      .map((router) => ({ value: router.id, label: router.name }))
+
+    return [{ value: NO_ROUTER, label: 'None' }, ...items]
+  }, [data])
 
-  return { isLoading: routers.isLoading, items: routerItems }
+  return { isLoading, items: routerItems }
 }
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
@@ -13,15 +13,15 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
-import { useCustomRouterItems } from '~/components/form/fields/useItemsList'
+import { NO_ROUTER, useCustomRouterItems } from '~/components/form/fields/useItemsList'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm, useVpcSelector } from '~/hooks'
 import { FormDivider } from '~/ui/lib/Divider'
 import { pb } from '~/util/path-builder'
 
 const defaultValues: VpcSubnetCreate = {
   name: '',
-  customRouter: undefined,
+  customRouter: NO_ROUTER,
   description: '',
   ipv4Block: '',
 }
@@ -49,7 +49,15 @@ export function CreateSubnetForm() {
       formType="create"
       resourceName="subnet"
       onDismiss={onDismiss}
-      onSubmit={(body) => createSubnet.mutate({ query: vpcSelector, body })}
+      onSubmit={(body) =>
+        createSubnet.mutate({
+          query: vpcSelector,
+          body: {
+            ...body,
+            customRouter: body.customRouter === NO_ROUTER ? undefined : body.customRouter,
+          },
+        })
+      }
       loading={createSubnet.isPending}
       submitError={createSubnet.error}
     >
@@ -63,6 +71,7 @@ export function CreateSubnetForm() {
         isLoading={isLoading}
         items={items}
         control={form.control}
+        required
       />
       <FormDivider />
       <TextField name="ipv4Block" label="IPv4 block" required control={form.control} />

diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
@@ -18,7 +18,7 @@ import {
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
-import { useCustomRouterItems } from '~/components/form/fields/useItemsList'
+import { NO_ROUTER, useCustomRouterItems } from '~/components/form/fields/useItemsList'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { getVpcSubnetSelector, useForm, useVpcSubnetSelector } from '~/hooks'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -55,17 +55,11 @@ export function EditSubnetForm() {
   const defaultValues: VpcSubnetUpdate = {
     name: subnet.name,
     description: subnet.description,
-    customRouter: subnet.customRouterId,
+    customRouter: subnet.customRouterId || NO_ROUTER,
   }
 
   const form = useForm({ defaultValues })
   const { isLoading, items } = useCustomRouterItems()
-  const customRouterValue = form.watch('customRouter')
-  const clearCustomRouter = () => {
-    // Because this is `undefined`, the dropdown isn't behaving correctly; it should revert to the placeholder
-    // It works when the value is '', but that's not a valid value for this field and it trips zod's validator
-    form.setValue('customRouter', undefined)
-  }
 
   return (
     <SideModalForm
@@ -80,7 +74,7 @@ export function EditSubnetForm() {
           body: {
             name: body.name,
             description: body.description,
-            customRouter: body.customRouter,
+            customRouter: body.customRouter === NO_ROUTER ? undefined : body.customRouter,
           },
         })
       }}
@@ -97,8 +91,7 @@ export function EditSubnetForm() {
         isLoading={isLoading}
         items={items}
         control={form.control}
-        isClearable={!!customRouterValue}
-        onClear={clearCustomRouter}
+        required
       />
     </SideModalForm>
   )