Add realtime typing restrictions on NameField

oxidecomputer · Oct 21, 2024 · 5b0e3ff · 5b0e3ff
1 parent f7d6daf
commit 5b0e3ff
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/app/components/form/fields/NameField.tsx b/app/components/form/fields/NameField.tsx
@@ -30,6 +30,12 @@ export function NameField<
       required={required}
       label={label}
       name={name}
+      transform={(value) =>
+        value
+          .toLowerCase()
+          .replace(/\s+/g, '-')
+          .replace(/[^a-z0-9-]/g, '')
+      }
       {...textFieldProps}
     />
   )

diff --git a/app/components/form/fields/TextField.tsx b/app/components/form/fields/TextField.tsx
@@ -47,7 +47,7 @@ export interface TextFieldProps<
   validate?: Validate<FieldPathValue<TFieldValues, TName>, TFieldValues>
   control: Control<TFieldValues>
   /** Alters the value of the input during the field's onChange event. */
-  transform?: (value: string) => FieldPathValue<TFieldValues, TName>
+  transform?: (value: string) => string
 }
 
 export function TextField<

diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
@@ -7,6 +7,7 @@
  */
 import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
+import type { SetRequired } from 'type-fest'
 
 import { useApiQuery, type ApiError, type InstanceNetworkInterfaceCreate } from '@oxide/api'
 
@@ -19,10 +20,10 @@ import { SideModalForm } from '~/components/form/SideModalForm'
 import { useProjectSelector } from '~/hooks/use-params'
 import { FormDivider } from '~/ui/lib/Divider'
 
-const defaultValues: InstanceNetworkInterfaceCreate = {
+const defaultValues: SetRequired<InstanceNetworkInterfaceCreate, 'ip'> = {
   name: '',
   description: '',
-  ip: undefined,
+  ip: '',
   subnetName: '',
   vpcName: '',
 }
@@ -58,7 +59,7 @@ export function CreateNetworkInterfaceForm({
       resourceName="network interface"
       title="Add network interface"
       onDismiss={onDismiss}
-      onSubmit={onSubmit}
+      onSubmit={({ ip, ...rest }) => onSubmit({ ip: ip.trim() || undefined, ...rest })}
       loading={loading}
       submitError={submitError}
     >
@@ -81,12 +82,7 @@ export function CreateNetworkInterfaceForm({
         required
         control={form.control}
       />
-      <TextField
-        name="ip"
-        label="IP Address"
-        control={form.control}
-        transform={(ip) => (ip.trim() === '' ? undefined : ip)}
-      />
+      <TextField name="ip" label="IP Address" control={form.control} />
     </SideModalForm>
   )
 }