From d1d7c39c689c9a5e022d30bad0d9ef05515132f4 Mon Sep 17 00:00:00 2001
From: Justin Bennett <git@just-be.dev>
Date: Thu, 30 Nov 2023 11:16:54 -0500
Subject: [PATCH] Add transform methods to text and number inputs

---
 app/components/form/fields/DescriptionField.tsx | 2 +-
 app/components/form/fields/DiskSizeField.tsx    | 2 +-
 app/components/form/fields/NameField.tsx        | 2 +-
 app/components/form/fields/NumberField.tsx      | 4 ++--
 app/components/form/fields/TextField.tsx        | 7 ++++---
 app/forms/network-interface-create.tsx          | 9 +++++++--
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/components/form/fields/DescriptionField.tsx b/app/components/form/fields/DescriptionField.tsx
index 51b2b4ed3..07f48e610 100644
--- 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
index 2cb72254c..2ae7f603a 100644
--- 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
index fa2e71b0a..16867058b 100644
--- 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
index 08c7fffc3..0167a5d21 100644
--- 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
index 6bd2509b6..b8e7fca33 100644
--- 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
index 45e1f0003..a459c9aa8 100644
--- 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>
   )
 }