chore(next): RMT-1584: mutate field properties based on conditional schemas (#155)

* chore: add getField util and improve json-schema-form schema type

* chore: remove test code

* chore: remove unnecessary Array.isArray checks

* chore: remove unnecessary type check

* feat: update field properties

* chore: rename file and functions

* add mutation tests

* fix type check and linter warnings

---------

Co-authored-by: Luka Dornhecker <[email protected]>

Author: antoniocapelo

next/src/form.ts

@@ -4,9 +4,9 @@ import type { JsfObjectSchema, JsfSchema, NonBooleanJsfSchema, SchemaValue } fro
 import type { ValidationOptions } from './validation/schema'
 import { getErrorMessage } from './errors/messages'
 import { buildFieldObject } from './field/object'
+import { mutateFields } from './mutations'
 import { validateSchema } from './validation/schema'
 import { isObjectValue } from './validation/util'
-import { updateFieldVisibility } from './visibility'
 
 export { ValidationOptions } from './validation/schema'
 
@@ -295,17 +295,20 @@ export function createHeadlessForm(
   const initialValues = options.initialValues || {}
   const fields = buildFields({ schema })
 
-  // Making sure visibility is set correctly upon form creation, for initial values
-  updateFieldVisibility(fields, initialValues, schema)
+  // Making sure field properties are correct for the initial values
+  mutateFields(fields, initialValues, schema)
 
   // TODO: check if we need this isError variable exposed
   const isError = false
 
   const handleValidation = (value: SchemaValue) => {
     const result = validate(value, schema, options.validationOptions)
 
-    // Updating field visibility based on the new value
-    updateFieldVisibility(fields, value, schema, options.validationOptions)
+    // Fields properties might have changed, so we need to reset the fields by updating them in place
+    buildFieldsInPlace(fields, schema)
+
+    // Updating field properties based on the new form value
+    mutateFields(fields, value, schema, options.validationOptions)
 
     return result
   }
@@ -317,3 +320,28 @@ export function createHeadlessForm(
     handleValidation,
   }
 }
+
+/**
+ * Updates fields in place based on a schema, recursively if needed
+ * @param fields - The fields array to mutate
+ * @param schema - The schema to use for updating fields
+ */
+function buildFieldsInPlace(fields: Field[], schema: JsfObjectSchema): void {
+  // Clear existing fields array
+  fields.length = 0
+
+  // Get new fields from schema
+  const newFields = buildFieldObject(schema, 'root', true).fields || []
+
+  // Push all new fields into existing array
+  fields.push(...newFields)
+
+  // Recursively update any nested fields
+  for (const field of fields) {
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-expect-error
+    if (field.fields && schema.properties?.[field.name]?.type === 'object') {
+      buildFieldsInPlace(field.fields, schema.properties[field.name] as JsfObjectSchema)
+    }
+  }
+}

next/src/visibility.ts renamed to next/src/mutations.ts

@@ -1,29 +1,18 @@
 import type { Field } from './field/type'
 import type { JsfObjectSchema, JsfSchema, NonBooleanJsfSchema, ObjectValue, SchemaValue } from './types'
 import type { ValidationOptions } from './validation/schema'
+import { buildFieldSchema } from './field/schema'
 import { validateSchema } from './validation/schema'
 import { isObjectValue } from './validation/util'
 
-/**
- * Resets the visibility of all fields to true
- * @param fields - The fields to reset
- */
-function resetVisibility(fields: Field[]) {
-  for (const field of fields) {
-    field.isVisible = true
-    if (field.fields) {
-      resetVisibility(field.fields)
-    }
-  }
-}
 /**
  * Updates field visibility based on JSON schema conditional rules
  * @param fields - The fields to update
  * @param values - The current form values
  * @param schema - The JSON schema definition
  * @param options - Validation options
  */
-export function updateFieldVisibility(
+export function mutateFields(
   fields: Field[],
   values: SchemaValue,
   schema: JsfObjectSchema,
@@ -33,9 +22,6 @@ export function updateFieldVisibility(
     return
   }
 
-  // Reseting fields visibility to the default before re-calculating it
-  resetVisibility(fields)
-
   // Apply rules to current level of fields
   applySchemaRules(fields, values, schema, options)
 
@@ -125,21 +111,23 @@ function applySchemaRules(
   for (const { rule, matches } of conditionalRules) {
     // If the rule matches, process the then branch
     if (matches && rule.then) {
-      processBranch(fields, rule.then)
+      processBranch(fields, values, rule.then, options)
     }
     // If the rule doesn't match, process the else branch
     else if (!matches && rule.else) {
-      processBranch(fields, rule.else)
+      processBranch(fields, values, rule.else, options)
     }
   }
 }
 
 /**
  * Processes a branch of a conditional rule, updating the visibility of fields based on the branch's schema
  * @param fields - The fields to process
+ * @param values - The current form values
  * @param branch - The branch (schema representing and then/else) to process
+ * @param options - Validation options
  */
-function processBranch(fields: Field[], branch: JsfSchema) {
+function processBranch(fields: Field[], values: SchemaValue, branch: JsfSchema, options: ValidationOptions = {}) {
   if (branch.properties) {
     // Cycle through each property in the schema and search for any (possibly nested)
     // fields that have a false boolean schema. If found, set the field's visibility to false
@@ -148,15 +136,26 @@ function processBranch(fields: Field[], branch: JsfSchema) {
       const field = fields.find(e => e.name === fieldName)
       if (field) {
         if (field?.fields) {
-          processBranch(field.fields, fieldSchema)
+          processBranch(field.fields, values, fieldSchema)
         }
         else if (fieldSchema === false) {
           field.isVisible = false
         }
         else {
-          field.isVisible = true
+          // If the field has properties being declared on this branch, we need to update the field
+          // with the new properties
+          const newField = buildFieldSchema(fieldSchema as JsfObjectSchema, fieldName, true)
+          for (const key in newField) {
+            // We don't want to override the type property
+            if (!['type'].includes(key)) {
+              field[key] = newField[key]
+            }
+          }
         }
       }
     }
   }
+
+  // Apply rules to the branch
+  applySchemaRules(fields, values, branch as JsfObjectSchema, options)
 }