@webiny/app-admin 6.3.0-beta.2 → 6.3.0-beta.3

package/features/formModel/FormModel.js

@@ -1,83 +1,97 @@
 import { makeAutoObservable, computed, toJS, runInAction, observable } from "mobx";
 import { Field } from "./Field.js";
 import { ObjectField, isObjectField } from "./ObjectField.js";
-import { createFieldBuilderRegistry } from "./FieldBuilder.js";
-const layoutAPI = {
-  row(...fieldIds) {
-    return {
-      type: "row",
-      fieldIds
-    };
-  },
-  separator() {
-    return {
-      type: "separator"
-    };
-  },
-  tabs(config) {
-    return {
-      type: "tabs",
-      id: config.id,
-      renderer: config.renderer,
-      tabs: config.tabs
-    };
-  },
-  element(renderer, props) {
-    return {
-      type: "element",
-      renderer,
-      props
-    };
-  }
-};
+import { LayoutBuilderFactory } from "./LayoutBuilderFactory.js";
+import { LayoutMutator } from "./LayoutMutator.js";
+import { LayoutResolver } from "./LayoutResolver.js";
+import { FocusManager } from "./FocusManager.js";
 export class FormModel {
   _fields = new Map();
+  _builders = new Map();
   _layout = [];
   _baseline = new Map();
   _submitted = false;
   _validateOnChange = false;
   _isValid = null;
-  _errors = [];
+  _formRuleErrors = [];
   _activeTabs = observable.map();
-  constructor(config) {
-    const registry = createFieldBuilderRegistry();
+  _ruleEvaluators = [];
+  _warnedRuleTypes = new Set();
+  _formRules = [];
+  _lastFocusedField = null;
+  _layoutMutator = new LayoutMutator();
+  _layoutResolver = null;
+  _focusManager = null;
+  constructor(config, registry) {
+    this._registry = registry;
+    this._ruleEvaluators = config.ruleEvaluators ?? [];
     const builders = config.fields(registry);
-
-    // Build fields from builders
     for (const [name, builder] of Object.entries(builders)) {
+      this._builders.set(name, builder);
       const fieldConfig = builder.build(name);
       const field = this._createField(fieldConfig);
       field.setForm(this);
       this._fields.set(name, field);
     }
-
-    // Build layout
     if (config.layout) {
-      this._layout = config.layout(layoutAPI);
+      this._layout = LayoutBuilderFactory.buildNodes(config.layout(LayoutBuilderFactory.create()));
       this._warnOrphanFields();
     } else {
       this._layout = this._generateDefaultLayout();
     }
-
-    // Validation strategy
+    this._registerObjectNodeLayouts(this._layout);
+    this._propagateAncestorRules();
     this._validateOnChange = config.validateOnSubmit === false;
-
-    // Snapshot baseline from defaults
     this._snapshotBaseline();
     makeAutoObservable(this, {
-      vm: computed
+      vm: computed,
+      _layoutMutator: false,
+      _layoutResolver: false,
+      _focusManager: false
     }, {
       autoBind: true
     });
+    this._layoutResolver = new LayoutResolver(this._fields, this._activeTabs, this.evaluateRules.bind(this));
+    this._focusManager = new FocusManager(this._fields);
+  }
+  evaluateRules(rules) {
+    let visible = true;
+    let disabled = false;
+    if (!rules || rules.length === 0) {
+      return {
+        visible,
+        disabled
+      };
+    }
+    for (const rule of rules) {
+      const evaluator = this._ruleEvaluators.find(e => e.canEvaluate(rule));
+      if (!evaluator) {
+        if (process.env.NODE_ENV === "development" && !this._warnedRuleTypes.has(rule.type)) {
+          this._warnedRuleTypes.add(rule.type);
+          console.warn(`[FormModel] No evaluator registered for rule type "${rule.type}". Rule is ignored.`);
+        }
+        continue;
+      }
+      const matched = evaluator.evaluate(rule, this);
+      if (!matched) {
+        continue;
+      }
+      if (rule.action === "hide") {
+        visible = false;
+      } else if (rule.action === "disable") {
+        disabled = true;
+      }
+    }
+    return {
+      visible,
+      disabled
+    };
   }
   field(name) {
-    // Try exact match first (supports dotted field names like "properties.language").
     const field = this._fields.get(name);
     if (field) {
       return field;
     }
-
-    // Try dot-notation traversal through ObjectField children.
     const parts = name.split(".");
     if (parts.length > 1) {
       let current = this._fields.get(parts[0]);
@@ -94,63 +108,59 @@ export class FormModel {
     }
     throw new Error(`Field "${name}" not found.`);
   }
+  focusField(name) {
+    if (this._lastFocusedField) {
+      this._lastFocusedField.clearFocusRequest();
+      this._lastFocusedField = null;
+    }
+    const activations = this._focusManager.buildFocusPath(name, this._layout);
+    let field;
+    try {
+      field = this.field(name);
+    } catch {
+      // Field not found — no-op.
+    }
+    runInAction(() => {
+      if (activations) {
+        for (const act of activations) {
+          this._activeTabs.set(act.tabKey, act.tabId);
+        }
+      }
+      if (field) {
+        field.requestFocus();
+        this._lastFocusedField = field;
+      }
+    });
+  }
   fields(factory) {
-    const registry = createFieldBuilderRegistry();
-    const builders = factory(registry);
+    const builders = factory(this._registry);
     for (const [name, builder] of Object.entries(builders)) {
       if (builder === undefined) {
-        // undefined = remove
+        this._builders.delete(name);
         this.removeField(name);
         continue;
       }
+      this._builders.set(name, builder);
       const fieldConfig = builder.build(name);
       const field = this._createField(fieldConfig);
       field.setForm(this);
-
-      // Replace or add — same operation on the map
       this._fields.set(name, field);
     }
-
-    // Re-snapshot baseline to include new fields
     this._snapshotBaseline();
+    this._propagateAncestorRules();
   }
   layout(factoryOrNodeId) {
     if (typeof factoryOrNodeId === "string") {
-      return this._accessLayoutNode(factoryOrNodeId);
-    }
-    const factory = factoryOrNodeId;
-    const removals = [];
-    const modifierLayoutAPI = this._createModifierLayoutAPI(removals);
-    const entries = factory(modifierLayoutAPI);
-
-    // Process removals first
-    for (const target of removals) {
-      this._layout = this._removeFromLayout(this._layout, target);
-    }
-
-    // Process additions with positional modifiers
-    for (const entry of entries) {
-      if (this._isPositionedNode(entry)) {
-        const {
-          node,
-          position
-        } = entry;
-        if (position) {
-          this._layout = this._insertIntoLayout(this._layout, node, position);
-        } else {
-          this._layout.push(node);
-        }
-      } else {
-        this._layout.push(entry);
-      }
+      return this._layoutMutator.accessNode(this._layout, factoryOrNodeId);
     }
+    this._layout = this._layoutMutator.applyModifications(this._layout, factoryOrNodeId);
+    this._registerObjectNodeLayouts(this._layout);
+    this._propagateAncestorRules();
   }
   removeField(name) {
     this._fields.delete(name);
     this._baseline.delete(name);
-
-    // Remove from layout
-    this._layout = this._removeFromLayout(this._layout, name);
+    this._layout = this._layoutMutator.removeFromLayout(this._layout, name);
   }
   getData() {
     const data = {};
@@ -174,7 +184,7 @@ export class FormModel {
     this._resetAllValidation();
     this._submitted = false;
     this._isValid = null;
-    this._errors = [];
+    this._formRuleErrors = [];
   }
   reset() {
     for (const [name, field] of this._fields) {
@@ -184,7 +194,7 @@ export class FormModel {
     this._resetAllValidation();
     this._submitted = false;
     this._isValid = null;
-    this._errors = [];
+    this._formRuleErrors = [];
   }
   get isDirty() {
     for (const [name, field] of this._fields) {
@@ -199,14 +209,17 @@ export class FormModel {
   get isValid() {
     return this._isValid;
   }
-  get errors() {
-    return this._errors;
+  get submitted() {
+    return this._submitted;
   }
-  async validate() {
+  get errors() {
+    if (!this._submitted) {
+      return [];
+    }
+    const ruleErrorPaths = new Set(this._formRuleErrors.filter(e => e.path).map(e => e.path));
     const errors = [];
     for (const [, field] of this._fields) {
-      const valid = await field.validate();
-      if (!valid) {
+      if (field.vm.validation.isValid === false && !ruleErrorPaths.has(field.name)) {
         errors.push({
           path: field.name,
           label: field.config.label,
@@ -214,9 +227,46 @@ export class FormModel {
         });
       }
     }
-    const isValid = errors.length === 0;
+    return [...errors, ...this._formRuleErrors];
+  }
+  addRule(rule) {
+    this._formRules.push(rule);
+  }
+  setLayout(factory) {
+    this._layout = LayoutBuilderFactory.buildNodes(factory(LayoutBuilderFactory.create()));
+    this._warnOrphanFields();
+    this._registerObjectNodeLayouts(this._layout);
+    this._propagateAncestorRules();
+  }
+  async validate() {
+    let allFieldsValid = true;
+    for (const [, field] of this._fields) {
+      const valid = await field.validate({
+        force: true
+      });
+      if (!valid) {
+        allFieldsValid = false;
+      }
+    }
+    const ruleErrors = [];
+    for (const rule of this._formRules) {
+      const errors = await this._runFormRule(rule);
+      for (const err of errors) {
+        ruleErrors.push(err);
+        if (err.path) {
+          const target = this._tryGetField(err.path);
+          if (target) {
+            target.setValidation({
+              isValid: false,
+              message: err.message
+            });
+          }
+        }
+      }
+    }
+    const isValid = allFieldsValid && ruleErrors.length === 0;
     runInAction(() => {
-      this._errors = errors;
+      this._formRuleErrors = ruleErrors;
       this._isValid = isValid;
       this._submitted = true;
     });
@@ -231,121 +281,97 @@ export class FormModel {
   }
   get vm() {
     return {
-      layout: this._resolveLayout(),
-      errors: this._errors,
+      layout: this._layoutResolver.resolve(this._layout),
+      errors: this.errors,
       isDirty: this.isDirty,
       isValid: this._isValid
     };
   }
+  get registry() {
+    return this._registry;
+  }
+  resolveChildLayout(layout, children) {
+    return this._layoutResolver.resolveChildLayout(layout, children);
+  }
   getField(name) {
     return this._fields.get(name);
   }
   getFields() {
     return this._fields;
   }
-  _resolveLayout() {
-    return this._layout.map(node => this._resolveLayoutNode(node)).filter(Boolean);
-  }
-  _resolveLayoutNode(node) {
-    switch (node.type) {
-      case "row":
-        return this._resolveRowNode(node);
-      case "separator":
-        return this._resolveSeparatorNode();
-      case "tabs":
-        return this._resolveTabsNode(node);
-      case "element":
-        return this._resolveElementNode(node);
-      default:
-        return null;
-    }
-  }
-  _resolveRowNode(node) {
-    const fields = node.fieldIds.map(id => this._fields.get(id)).filter(f => f !== undefined && f.visible).map(f => f.vm);
-    if (fields.length === 0) {
-      return null;
-    }
-    return {
-      type: "row",
-      fields
-    };
-  }
-  _resolveSeparatorNode() {
-    return {
-      type: "separator"
-    };
+  getFieldBuilders(predicate) {
+    const pred = predicate ?? (() => true);
+    const result = [];
+    LayoutBuilderFactory.collectBuilders(this._fields, this._builders, pred, result);
+    return result;
   }
-  _resolveTabsNode(node) {
-    if (node.tabs.length === 0) {
-      return null;
+  async _runFormRule(rule) {
+    if (typeof rule === "function") {
+      const fn = rule;
+      const result = await fn(this);
+      return Array.isArray(result) ? result : [];
     }
-    const tabKey = node.id || this._tabsNodeKey(node);
-    const tabs = node.tabs.map(tab => ({
-      id: tab.id,
-      label: tab.label,
-      description: tab.description,
-      icon: tab.icon,
-      hasErrors: this._tabHasErrors(tab.layout),
-      layout: tab.layout.map(child => this._resolveLayoutNode(child)).filter(Boolean)
-    }));
-    if (tabs.length === 0) {
-      return null;
+    const data = this.getData();
+    const result = await rule.safeParseAsync(data);
+    if (result.success) {
+      return [];
     }
-
-    // Resolve active tab — fall back to first tab if stored value is invalid
-    const storedActive = this._activeTabs.get(tabKey);
-    const validActive = tabs.find(t => t.id === storedActive) ? storedActive : tabs[0].id;
-    return {
-      type: "tabs",
-      id: node.id,
-      renderer: node.renderer,
-      tabs,
-      activeTabId: validActive,
-      setActiveTab: id => {
-        runInAction(() => {
-          this._activeTabs.set(tabKey, id);
-        });
-      }
-    };
-  }
-  _resolveElementNode(node) {
-    return {
-      type: "element",
-      renderer: node.renderer,
-      props: node.props
-    };
+    return result.error.issues.map(issue => {
+      const path = issue.path.map(String).join(".");
+      const field = path ? this._tryGetField(path) : undefined;
+      return {
+        path,
+        label: field?.config.label,
+        message: issue.message || "Invalid value."
+      };
+    });
   }
-  _tabHasErrors(layout) {
-    const fieldIds = this._collectFieldIdsFromLayout(layout);
-    for (const id of fieldIds) {
-      const field = this._fields.get(id);
-      if (!field) {
-        continue;
-      }
-      if (field.vm.validation.isValid === false) {
-        return true;
-      }
-      if (isObjectField(field) && field.hasErrors) {
-        return true;
-      }
+  _tryGetField(path) {
+    try {
+      return this.field(path);
+    } catch {
+      return undefined;
     }
-    return false;
   }
-  _collectFieldIdsFromLayout(layout) {
-    const ids = [];
+  _registerObjectNodeLayouts(layout) {
     for (const node of layout) {
-      if (node.type === "row") {
-        ids.push(...node.fieldIds);
+      if (node.type === "object") {
+        const field = this._fields.get(node.fieldName);
+        if (field && isObjectField(field)) {
+          field.setInnerLayout(node.inner);
+        }
       } else if (node.type === "tabs") {
         for (const tab of node.tabs) {
-          ids.push(...this._collectFieldIdsFromLayout(tab.layout));
+          this._registerObjectNodeLayouts(tab.layout);
         }
       }
     }
-    return ids;
   }
-  _tabsNodeKey(node) {
-    return `__tabs_${node.tabs.map(t => t.id).join("_")}`;
+  _propagateAncestorRules() {
+    const ancestry = new Map();
+    const walk = (nodes, rules) => {
+      for (const node of nodes) {
+        if (node.type === "row") {
+          for (const id of node.fieldIds) {
+            const existing = ancestry.get(id) ?? [];
+            ancestry.set(id, [...existing, ...rules]);
+          }
+        } else if (node.type === "tabs") {
+          const containerRules = [...rules, ...(node.rules ?? [])];
+          for (const tab of node.tabs) {
+            const tabRules = [...containerRules, ...(tab.rules ?? [])];
+            walk(tab.layout, tabRules);
+          }
+        } else if (node.type === "object") {
+          const existing = ancestry.get(node.fieldName) ?? [];
+          ancestry.set(node.fieldName, [...existing, ...rules]);
+        }
+      }
+    };
+    walk(this._layout, []);
+    for (const [, field] of this._fields) {
+      field.setAncestorRules(ancestry.get(field.name) ?? []);
+    }
   }
   _generateDefaultLayout() {
     const layout = [];
@@ -360,7 +386,7 @@ export class FormModel {
     return layout;
   }
   _warnOrphanFields() {
-    const layoutFieldIds = new Set(this._collectFieldIdsFromLayout(this._layout));
+    const layoutFieldIds = new Set(LayoutBuilderFactory.collectFieldIds(this._layout));
     for (const [name, field] of this._fields) {
       if (field.visible && !layoutFieldIds.has(name)) {
         console.warn(`[FormModel] Field "${name}" is not in the layout and not marked as .hidden(). ` + `Add it to the layout or mark it as .hidden() to suppress this warning.`);
@@ -378,231 +404,12 @@ export class FormModel {
       field.resetValidation();
     }
   }
-
-  /**
-   * Find the index of a layout node that matches the given target.
-   * Matches: row containing fieldId, tabs by id, element by id/renderer.
-   * Returns -1 if not found.
-   */
-  _findLayoutIndex(layout, target) {
-    return layout.findIndex(node => this._nodeMatchesTarget(node, target));
-  }
-  _nodeMatchesTarget(node, target) {
-    switch (node.type) {
-      case "row":
-        return node.fieldIds.includes(target);
-      case "tabs":
-        return node.id === target;
-      case "element":
-        return node.id === target || node.renderer === target;
-      default:
-        return false;
-    }
-  }
-
-  /**
-   * Remove a target from the layout tree. Handles field IDs in rows,
-   * and node IDs for tabs/elements. Drops rows that become empty.
-   */
-  _removeFromLayout(layout, target) {
-    return layout.map(node => {
-      if (node.type === "row") {
-        const filtered = node.fieldIds.filter(id => id !== target);
-        if (filtered.length === 0) {
-          return null;
-        }
-        return {
-          ...node,
-          fieldIds: filtered
-        };
-      }
-      // Remove tabs/elements by their ID
-      if (node.type === "tabs" && node.id === target || node.type === "element" && (node.id === target || node.renderer === target)) {
-        return null;
-      }
-      return node;
-    }).filter(Boolean);
-  }
-
-  /**
-   * Insert a layout node relative to a target field ID.
-   */
-  _insertIntoLayout(layout, node, position) {
-    const targetIndex = this._findLayoutIndex(layout, position.target);
-    if (targetIndex === -1) {
-      // Target not found — append
-      return [...layout, node];
-    }
-    const result = [...layout];
-    switch (position.type) {
-      case "before":
-        result.splice(targetIndex, 0, node);
-        break;
-      case "after":
-        result.splice(targetIndex + 1, 0, node);
-        break;
-      case "replace":
-        result.splice(targetIndex, 1, node);
-        break;
-    }
-    return result;
-  }
-  _createModifierLayoutAPI(removals) {
-    return {
-      row(...fieldIds) {
-        const node = {
-          type: "row",
-          fieldIds
-        };
-        return createLayoutNodeHandle(node);
-      },
-      separator() {
-        const node = {
-          type: "separator"
-        };
-        return createLayoutNodeHandle(node);
-      },
-      tabs(config) {
-        const node = {
-          type: "tabs",
-          id: config.id,
-          renderer: config.renderer,
-          tabs: config.tabs
-        };
-        return createLayoutNodeHandle(node);
-      },
-      element(renderer, props) {
-        const node = {
-          type: "element",
-          renderer,
-          props
-        };
-        return createLayoutNodeHandle(node);
-      },
-      remove(target) {
-        removals.push(target);
-      }
-    };
-  }
-  _accessLayoutNode(nodeId) {
-    const findTabsNode = layout => {
-      for (const node of layout) {
-        if (node.type === "tabs" && node.id === nodeId) {
-          return node;
-        }
-        // Search inside nested tabs
-        if (node.type === "tabs") {
-          for (const tab of node.tabs) {
-            const found = findTabsNode(tab.layout);
-            if (found) {
-              return found;
-            }
-          }
-        }
-      }
-      return undefined;
-    };
-    return {
-      as: type => {
-        const tabsNode = findTabsNode(this._layout);
-        if (!tabsNode) {
-          throw new Error(`Layout node "${nodeId}" not found.`);
-        }
-        if (tabsNode.type !== type) {
-          throw new Error(`Layout node "${nodeId}" is type "${tabsNode.type}", not "${type}".`);
-        }
-        return {
-          tab: definitionOrId => {
-            if (typeof definitionOrId === "string") {
-              // Access existing tab
-              const tab = tabsNode.tabs.find(t => t.id === definitionOrId);
-              if (!tab) {
-                throw new Error(`Tab "${definitionOrId}" not found in tabs node "${nodeId}".`);
-              }
-              return {
-                layout: factory => {
-                  const nodes = factory(layoutAPI);
-                  tab.layout.push(...nodes);
-                },
-                before: () => {
-                  /* no-op for existing tabs */
-                },
-                after: () => {
-                  /* no-op for existing tabs */
-                }
-              };
-            } else {
-              // Add new tab
-              const newTab = {
-                ...definitionOrId
-              };
-              // Resolve layout if it's a factory
-              if (typeof definitionOrId.layout === "function") {
-                newTab.layout = definitionOrId.layout(layoutAPI);
-              }
-              return {
-                layout: factory => {
-                  newTab.layout = factory(layoutAPI);
-                },
-                before: targetTabId => {
-                  const idx = tabsNode.tabs.findIndex(t => t.id === targetTabId);
-                  if (idx !== -1) {
-                    tabsNode.tabs.splice(idx, 0, newTab);
-                  } else {
-                    tabsNode.tabs.push(newTab);
-                  }
-                },
-                after: targetTabId => {
-                  const idx = tabsNode.tabs.findIndex(t => t.id === targetTabId);
-                  if (idx !== -1) {
-                    tabsNode.tabs.splice(idx + 1, 0, newTab);
-                  } else {
-                    tabsNode.tabs.push(newTab);
-                  }
-                }
-              };
-            }
-          }
-        };
-      }
-    };
-  }
   _createField(config) {
     if (config.childBuilders) {
       return new ObjectField(config);
     }
     return new Field(config);
   }
-  _isPositionedNode(entry) {
-    return "node" in entry;
-  }
-}
-function createLayoutNodeHandle(node) {
-  const handle = {
-    node,
-    before(target) {
-      handle.position = {
-        type: "before",
-        target
-      };
-      return handle;
-    },
-    after(target) {
-      handle.position = {
-        type: "after",
-        target
-      };
-      return handle;
-    },
-    replace(target) {
-      handle.position = {
-        type: "replace",
-        target
-      };
-      return handle;
-    }
-  };
-  return handle;
 }
 
 //# sourceMappingURL=FormModel.js.map