Use existing types for forms

Author: charliepark

app/forms/anti-affinity-group-create.tsx

@@ -12,7 +12,7 @@ import {
   queryClient,
   useApiMutation,
   usePrefetchedQuery,
-  type AffinityPolicy,
+  type AntiAffinityGroupCreate,
 } from '@oxide/api'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
@@ -29,13 +29,6 @@ import { affinityGroupList, antiAffinityGroupList } from './affinity-util'
 
 export const handle = titleCrumb('New anti-affinity group')
 
-type AntiAffinityGroupFormValues = {
-  name: string
-  description: string
-  policy: AffinityPolicy
-  affinityGroupMembers: string[]
-}
-
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project } = getProjectSelector(params)
   await Promise.all([
@@ -62,13 +55,13 @@ export default function CreateAntiAffintyGroupForm() {
   const {
     data: { items: existingAntiAffinityGroups },
   } = usePrefetchedQuery(antiAffinityGroupList({ project }))
-  const defaultValues: AntiAffinityGroupFormValues = {
+  const defaultValues = {
     name: '',
     description: '',
-    policy: 'allow',
-    affinityGroupMembers: [],
+    failureDomain: 'sled' as const,
+    policy: 'allow' as const,
   }
-  const form = useForm({ defaultValues })
+  const form = useForm<AntiAffinityGroupCreate>({ defaultValues })
   const control = form.control
 
   return (
@@ -81,12 +74,7 @@ export default function CreateAntiAffintyGroupForm() {
       onSubmit={(values) => {
         createAntiAffinityGroup.mutate({
           query: { project },
-          body: {
-            name: values.name,
-            description: values.description,
-            policy: values.policy,
-            failureDomain: 'sled',
-          },
+          body: { ...values },
         })
       }}
       loading={createAntiAffinityGroup.isPending}

app/forms/anti-affinity-group-edit.tsx

@@ -61,18 +61,17 @@ export default function EditAntiAffintyGroupForm() {
     },
   })
 
-  const {
-    data: { items: existingAntiAffinityGroups },
-  } = usePrefetchedQuery(antiAffinityGroupList({ project }))
+  const { data: existingAntiAffinityGroups } = usePrefetchedQuery(
+    antiAffinityGroupList({ project })
+  )
+
   const { data: antiAffinityGroupData } = usePrefetchedQuery(
     antiAffinityGroupView({ project, antiAffinityGroup })
   )
-  const defaultValues: AntiAffinityGroupUpdate = {
-    name: antiAffinityGroupData.name,
-    description: antiAffinityGroupData.description,
-  }
-  const form = useForm({ defaultValues })
-  const control = form.control
+
+  const form = useForm<AntiAffinityGroupUpdate>({
+    defaultValues: { ...antiAffinityGroupData },
+  })
 
   return (
     <SideModalForm
@@ -85,10 +84,7 @@ export default function EditAntiAffintyGroupForm() {
         editAntiAffinityGroup.mutate({
           path: { antiAffinityGroup },
           query: { project },
-          body: {
-            name: values.name || antiAffinityGroupData.name,
-            description: values.description || '',
-          },
+          body: { ...values },
         })
       }}
       loading={editAntiAffinityGroup.isPending}
@@ -97,14 +93,14 @@ export default function EditAntiAffintyGroupForm() {
     >
       <NameField
         name="name"
-        control={control}
+        control={form.control}
         validate={(name) => {
-          if (existingAntiAffinityGroups.find((g) => g.name === name)) {
+          if (existingAntiAffinityGroups.items.find((g) => g.name === name)) {
             return 'Name taken. To update an existing group, edit it directly.'
           }
         }}
       />
-      <DescriptionField name="description" control={control} />
+      <DescriptionField name="description" control={form.control} />
     </SideModalForm>
   )
 }

app/forms/anti-affinity-group-member-add.tsx

@@ -8,7 +8,12 @@
 
 import { useForm } from 'react-hook-form'
 
-import { queryClient, useApiMutation, type Instance } from '~/api'
+import {
+  queryClient,
+  useApiMutation,
+  type AntiAffinityGroupMemberInstanceAddPathParams,
+  type Instance,
+} from '~/api'
 import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { HL } from '~/components/HL'
 import { useAntiAffinityGroupSelector } from '~/hooks/use-params'
@@ -27,9 +32,9 @@ export function AddAntiAffinityGroupMemberForm({
 }) {
   const { project, antiAffinityGroup } = useAntiAffinityGroupSelector()
 
-  const form = useForm({
+  const form = useForm<AntiAffinityGroupMemberInstanceAddPathParams>({
     defaultValues: {
-      antiAffinityGroupMember: '',
+      instance: '',
     },
   })
 
@@ -58,7 +63,7 @@ export function AddAntiAffinityGroupMemberForm({
           <ComboboxField
             label="Instance"
             placeholder="Select an instance"
-            name="antiAffinityGroupMember"
+            name="instance"
             items={toComboboxItems(availableInstances)}
             required
             control={form.control}
@@ -71,7 +76,7 @@ export function AddAntiAffinityGroupMemberForm({
           addMember({
             path: {
               antiAffinityGroup,
-              instance: form.getValues('antiAffinityGroupMember'),
+              instance: form.getValues('instance'),
             },
             query: { project },
           })