fix: network isolation form validation (#637)

* fix: enforce type number for port field

* fix: show specific validation message

* fix: validate form on change

* test: update

Author: peppescg

renderer/src/features/registry-servers/components/__tests__/form-run-from-registry.test.tsx

@@ -970,6 +970,13 @@ describe('FormRunFromRegistry', () => {
     await userEvent.click(addPortButton)
     await userEvent.type(screen.getByLabelText('Port 1'), '8080')
     await userEvent.click(addPortButton)
+    await userEvent.type(screen.getByLabelText('Port 2'), '666666666')
+    await waitFor(() => {
+      expect(
+        screen.getByText(/port must be a number between 1 and 65535/i)
+      ).toBeInTheDocument()
+    })
+    await userEvent.clear(screen.getByLabelText('Port 2'))
     await userEvent.type(screen.getByLabelText('Port 2'), '443')
     // Submit
     const configTab = screen.getByRole('tab', { name: /configuration/i })
@@ -1151,7 +1158,7 @@ describe('Allowed Hosts field', () => {
     await userEvent.click(
       screen.getByRole('button', { name: /install server/i })
     )
-    expect(screen.getByText(/invalid host/i)).toBeInTheDocument()
+    expect(screen.getByText(/invalid host format/i)).toBeInTheDocument()
     // Valid host
     let hostInputRef = screen.queryByLabelText('Host 1')
     if (hostInputRef) {
@@ -1161,7 +1168,7 @@ describe('Allowed Hosts field', () => {
       await userEvent.click(
         screen.getByRole('button', { name: /install server/i })
       )
-      expect(screen.queryByText(/invalid host/i)).not.toBeInTheDocument()
+      expect(screen.queryByText(/invalid host format/i)).not.toBeInTheDocument()
     }
     // Valid host with dot
     hostInputRef = screen.queryByLabelText('Host 1')
@@ -1172,7 +1179,7 @@ describe('Allowed Hosts field', () => {
       await userEvent.click(
         screen.getByRole('button', { name: /install server/i })
       )
-      expect(screen.queryByText(/invalid host/i)).not.toBeInTheDocument()
+      expect(screen.queryByText(/invalid host format/i)).not.toBeInTheDocument()
     }
   })
 

renderer/src/features/registry-servers/components/dynamic-array-field.tsx

@@ -32,6 +32,7 @@ interface DynamicArrayFieldProps<
   inputLabelPrefix?: string
   tooltipContent?: string
   addButtonText?: string
+  type?: 'text' | 'number'
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>
 }
 
@@ -42,6 +43,7 @@ export function DynamicArrayField<TFieldValues extends FieldValues>({
   tooltipContent,
   inputLabelPrefix = 'Item',
   addButtonText = 'Add',
+  type = 'text',
   inputProps = {},
 }: DynamicArrayFieldProps<TFieldValues>) {
   const { fields, append, remove } = useFieldArray<
@@ -81,6 +83,7 @@ export function DynamicArrayField<TFieldValues extends FieldValues>({
                   <FormControl className="w-full">
                     <Input
                       {...field}
+                      type={type}
                       id={`${name}-${idx}`}
                       aria-label={`${inputLabelPrefix} ${idx + 1}`}
                       className="min-w-0 grow"

renderer/src/features/registry-servers/components/form-run-from-registry/index.tsx

@@ -111,6 +111,8 @@ export function FormRunFromRegistry({
         ) || [],
       allowedHosts: server?.permissions?.network?.outbound?.allow_host || [],
     },
+    reValidateMode: 'onChange',
+    mode: 'onChange',
   })
 
   const onSubmitForm = (data: FormSchemaRunFromRegistry) => {

renderer/src/features/registry-servers/components/form-run-from-registry/network-isolation-tab-content.tsx

@@ -72,11 +72,12 @@ export function NetworkIsolationTabContent({
                     <DynamicArrayField<FormSchemaRunFromRegistry>
                       /*
                          // @ts-expect-error no time to fix this */
-                      name={'allowedPorts'}
+                      name="allowedPorts"
                       label="Allowed ports"
                       control={form.control}
                       inputLabelPrefix="Port"
                       addButtonText="Add a port"
+                      type="number"
                     />
                   )}
                 />

renderer/src/features/registry-servers/lib/get-form-schema-run-from-registry.ts

@@ -39,20 +39,6 @@ function refineEnvVar(
   return true
 }
 
-const validatePort = (val: string) => {
-  if (!val.trim()) return 'Port is required'
-  if (!/^[0-9]+$/.test(val)) return 'Port must be a number'
-  const num = Number(val)
-  if (isNaN(num) || num < 1 || num > 65535) return 'Port must be 1-65535'
-  return null
-}
-
-const validateHost = (val: string) => {
-  if (!val.trim()) return 'Host is required'
-  if (!/^\.?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/.test(val)) return 'Invalid host'
-  return null
-}
-
 /**
  * Returns the form schema used to validate the "run from registry" form.
  * The schema is dynamically generated based on the server's environment variables.
@@ -98,15 +84,22 @@ export function getFormSchemaRunFromRegistry({
     networkIsolation: z.boolean(),
     allowedHosts: z
       .string()
-      .refine((val) => validateHost(val) === null, {
-        message: 'Invalid host',
+      .refine((val) => /^\.?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/.test(val), {
+        message: 'Invalid host format',
       })
       .array(),
     allowedPorts: z
       .string()
-      .refine((val) => validatePort(val.toString()) === null, {
-        message: 'Invalid port',
-      })
+
+      .refine(
+        (val) => {
+          const num = parseInt(val, 10)
+          return !isNaN(num) && num >= 1 && num <= 65535
+        },
+        {
+          message: 'Port must be a number between 1 and 65535',
+        }
+      )
       .array(),
   })
 }