Add transform methods to text and number inputs

oxidecomputer · Nov 30, 2023 · d1d7c39 · d1d7c39
1 parent 1d41ae3
commit d1d7c39
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 10 deletions.
diff --git a/app/components/form/fields/DescriptionField.tsx b/app/components/form/fields/DescriptionField.tsx
@@ -15,7 +15,7 @@ const MAX_LEN = 512
 export function DescriptionField<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
->(props: Omit<TextFieldProps<TFieldValues, TName>, 'validate'>) {
+>(props: Omit<TextFieldProps<string, TFieldValues, TName>, 'validate'>) {
   return <TextField as="textarea" validate={validateDescription} {...props} />
 }
 

diff --git a/app/components/form/fields/DiskSizeField.tsx b/app/components/form/fields/DiskSizeField.tsx
@@ -15,7 +15,7 @@ import type { TextFieldProps } from './TextField'
 interface DiskSizeProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
-> extends TextFieldProps<TFieldValues, TName> {
+> extends TextFieldProps<number, TFieldValues, TName> {
   minSize?: number
 }
 

diff --git a/app/components/form/fields/NameField.tsx b/app/components/form/fields/NameField.tsx
@@ -19,7 +19,7 @@ export function NameField<
   name,
   label = capitalize(name),
   ...textFieldProps
-}: Omit<TextFieldProps<TFieldValues, TName>, 'validate'> & { label?: string }) {
+}: Omit<TextFieldProps<string, TFieldValues, TName>, 'validate'> & { label?: string }) {
   return (
     <TextField
       validate={(name) => validateName(name, label, required)}

diff --git a/app/components/form/fields/NumberField.tsx b/app/components/form/fields/NumberField.tsx
@@ -27,7 +27,7 @@ export function NumberField<
   helpText,
   required,
   ...props
-}: Omit<TextFieldProps<TFieldValues, TName>, 'id' | 'type'>) {
+}: Omit<TextFieldProps<number, TFieldValues, TName>, 'id' | 'type'>) {
   // id is omitted from props because we generate it here
   const id = useId()
   return (
@@ -69,7 +69,7 @@ export const NumberFieldInner = <
   required,
   id: idProp,
   transform,
-}: TextFieldProps<TFieldValues, TName>) => {
+}: TextFieldProps<number, TFieldValues, TName>) => {
   const generatedId = useId()
   const id = idProp || generatedId
 

diff --git a/app/components/form/fields/TextField.tsx b/app/components/form/fields/TextField.tsx
@@ -28,6 +28,7 @@ import { capitalize } from '@oxide/util'
 import { ErrorMessage } from './ErrorMessage'
 
 export interface TextFieldProps<
+  Type,
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
 > extends Omit<UITextFieldProps, 'type'> {
@@ -56,7 +57,7 @@ export interface TextFieldProps<
   units?: string
   validate?: Validate<FieldPathValue<TFieldValues, TName>, TFieldValues>
   control: Control<TFieldValues>
-  transform?: <T>(value: T) => T
+  transform?: (value: Type) => Type | undefined
 }
 
 export function TextField<
@@ -70,7 +71,7 @@ export function TextField<
   helpText,
   required,
   ...props
-}: Omit<TextFieldProps<TFieldValues, TName>, 'id'> & UITextAreaProps) {
+}: Omit<TextFieldProps<string, TFieldValues, TName>, 'id'> & UITextAreaProps) {
   // id is omitted from props because we generate it here
   const id = useId()
   return (
@@ -114,7 +115,7 @@ export const TextFieldInner = <
   id: idProp,
   transform,
   ...props
-}: TextFieldProps<TFieldValues, TName> & UITextAreaProps) => {
+}: TextFieldProps<string, TFieldValues, TName> & UITextAreaProps) => {
   const generatedId = useId()
   const id = idProp || generatedId
   return (

diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
@@ -23,7 +23,7 @@ import { useForm, useProjectSelector } from 'app/hooks'
 const defaultValues: InstanceNetworkInterfaceCreate = {
   name: '',
   description: '',
-  ip: '',
+  ip: undefined,
   subnetName: '',
   vpcName: '',
 }
@@ -80,7 +80,12 @@ export default function CreateNetworkInterfaceForm({
         required
         control={form.control}
       />
-      <TextField name="ip" label="IP Address" control={form.control} />
+      <TextField
+        name="ip"
+        label="IP Address"
+        control={form.control}
+        transform={(ip) => (ip.trim() === '' ? undefined : ip)}
+      />
     </SideModalForm>
   )
 }