@webiny/app-admin 6.4.5 → 6.6.0-alpha.0

package/features/formModel/FormModel.test.js

@@ -364,9 +364,9 @@ describe("FormModel", ()=>{
         it("should support cross-field afterChange triggering target field pipeline", ()=>{
             const form = createForm({
                 fields: (fields)=>({
-                        title: fields.text().label("Title").afterChange((value, f)=>{
+                        title: fields.text().label("Title").afterChange((value, { form })=>{
                             const path = "/" + String(value).toLowerCase().replace(/\s+/g, "-");
-                            f.field("path").setValue(path);
+                            form.field("path").setValue(path);
                         }),
                         path: fields.text().label("Path").beforeChange((value)=>{
                             const str = String(value);
@@ -401,10 +401,10 @@ describe("FormModel", ()=>{
         it("should demonstrate title→path with path-dirty tracking", ()=>{
             const form = createForm({
                 fields: (fields)=>({
-                        title: fields.text().label("Title").required("Title is required").afterChange((value, f)=>{
-                            if (f.field("path").getValue()) return;
+                        title: fields.text().label("Title").required("Title is required").afterChange((value, { form })=>{
+                            if (form.field("path").getValue()) return;
                             const slug = String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-                            f.field("path").setValue("/" + slug);
+                            form.field("path").setValue("/" + slug);
                         }),
                         path: fields.text().label("Path").required("Path is required").beforeChange((value)=>{
                             const str = String(value);
@@ -606,9 +606,9 @@ describe("FormModel", ()=>{
                             path: fields.text().label("Path")
                         })
                 });
-                form.field("title").addAfterChange((value, f)=>{
+                form.field("title").addAfterChange((value, { form })=>{
                     received.push(value);
-                    f.field("path").setValue("/" + String(value).toLowerCase());
+                    form.field("path").setValue("/" + String(value).toLowerCase());
                 });
                 form.field("title").setValue("Hello");
                 expect(received).toEqual([
@@ -751,11 +751,11 @@ describe("FormModel", ()=>{
                                         label: "German",
                                         value: "de"
                                     }
-                                ]).afterChange((value, f)=>{
-                                    const current = String(f.field("path").getValue() || "");
+                                ]).afterChange((value, { form })=>{
+                                    const current = String(form.field("path").getValue() || "");
                                     const stripped = current.replace(/^\/[a-z]{2}\//, "/");
-                                    if (value && "en" !== value) f.field("path").setValue("/" + value + stripped);
-                                    else f.field("path").setValue(stripped);
+                                    if (value && "en" !== value) form.field("path").setValue("/" + value + stripped);
+                                    else form.field("path").setValue(stripped);
                                 })
                             }));
                         form.layout((layout)=>[
@@ -2957,7 +2957,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         plan: fields.text().defaultValue("free"),
-                        seats: fields.text().requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Seats required")
+                        seats: fields.text().requiredWhen(({ form })=>"pro" === form.field("plan").getValue(), "Seats required")
                     })
             });
             expect(form.field("seats").vm.required).toBe(false);
@@ -2972,7 +2972,7 @@ describe("FormModel", ()=>{
                 fields: (fields)=>({
                         plan: fields.text().defaultValue("free"),
                         flag: fields.text().defaultValue("off"),
-                        seats: fields.text().requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Pro requires it").requiredWhen((f)=>"on" === f.field("flag").getValue(), "Flag requires it")
+                        seats: fields.text().requiredWhen(({ form })=>"pro" === form.field("plan").getValue(), "Pro requires it").requiredWhen(({ form })=>"on" === form.field("flag").getValue(), "Flag requires it")
                     })
             });
             form.field("flag").setValue("on");
@@ -2997,10 +2997,10 @@ describe("FormModel", ()=>{
                 fields: (fields)=>({
                         plan: fields.text().defaultValue("free"),
                         other: fields.text().defaultValue("off"),
-                        seats: fields.text().requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Pro required")
+                        seats: fields.text().requiredWhen(({ form })=>"pro" === form.field("plan").getValue(), "Pro required")
                     })
             });
-            form.field("seats").addRequiredWhen((f)=>"on" === f.field("other").getValue(), "Other required");
+            form.field("seats").addRequiredWhen(({ form })=>"on" === form.field("other").getValue(), "Other required");
             expect(form.field("seats").vm.required).toBe(false);
             form.field("other").setValue("on");
             await form.validate();
@@ -3013,7 +3013,7 @@ describe("FormModel", ()=>{
                 fields: (fields)=>({
                         first: fields.text().defaultValue("Ada"),
                         last: fields.text().defaultValue("Lovelace"),
-                        full: fields.text().computed((f)=>`${f.field("first").getValue()} ${f.field("last").getValue()}`)
+                        full: fields.text().computed(({ form })=>`${form.field("first").getValue()} ${form.field("last").getValue()}`)
                     })
             });
             expect(form.field("full").getValue()).toBe("Ada Lovelace");
@@ -3024,7 +3024,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         src: fields.text().defaultValue("A"),
-                        derived: fields.text().computed((f)=>f.field("src").getValue())
+                        derived: fields.text().computed(({ form })=>form.field("src").getValue())
                     })
             });
             expect(form.field("derived").vm.disabled).toBe(false);
@@ -3035,7 +3035,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         src: fields.text().defaultValue("A"),
-                        derived: fields.text().computedUntilDirty((f)=>`derived-${f.field("src").getValue()}`)
+                        derived: fields.text().computedUntilDirty(({ form })=>`derived-${form.field("src").getValue()}`)
                     })
             });
             expect(form.field("derived").getValue()).toBe("derived-A");
@@ -3048,7 +3048,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         src: fields.text().defaultValue(""),
-                        derived: fields.text().required("Derived must not be empty").computed((f)=>f.field("src").getValue())
+                        derived: fields.text().required("Derived must not be empty").computed(({ form })=>form.field("src").getValue())
                     })
             });
             const valid = await form.validate();
@@ -3057,6 +3057,77 @@ describe("FormModel", ()=>{
             form.field("src").setValue("hello");
             expect(await form.validate()).toBe(true);
         });
+        it("computedUntilDirty can access nested fields inside object via dot notation", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        group: fields.object().renderer("passthrough").fields((f)=>({
+                                label: f.text().defaultValue("Hello World"),
+                                fieldId: f.text().computedUntilDirty(({ form })=>String(form.field("group.label").getValue() || "").toLowerCase().replace(/\s+/g, "-"))
+                            }))
+                    })
+            });
+            expect(form.field("group.fieldId").getValue()).toBe("hello-world");
+            form.field("group.label").setValue("New Title");
+            expect(form.field("group.fieldId").getValue()).toBe("new-title");
+            form.field("group.fieldId").vm.onChange("custom-id");
+            expect(form.field("group.fieldId").getValue()).toBe("custom-id");
+            form.field("group.label").setValue("Another");
+            expect(form.field("group.fieldId").getValue()).toBe("custom-id");
+        });
+        it("computedUntilDirty works after setData for nested object fields", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        general: fields.object().renderer("passthrough").fields((f)=>({
+                                label: f.text(),
+                                fieldId: f.text().computedUntilDirty(({ form })=>String(form.field("general.label").getValue() || "").toLowerCase().replace(/\s+/g, "-"))
+                            }))
+                    })
+            });
+            expect(form.field("general.fieldId").getValue()).toBe("");
+            form.setData({
+                general: {
+                    label: "My Field"
+                }
+            });
+            expect(form.field("general.fieldId").getValue()).toBe("my-field");
+            form.field("general.label").setValue("Updated Label");
+            expect(form.field("general.fieldId").getValue()).toBe("updated-label");
+            form.field("general.fieldId").vm.onChange("custom");
+            expect(form.field("general.fieldId").getValue()).toBe("custom");
+            form.field("general.label").setValue("Ignored");
+            expect(form.field("general.fieldId").getValue()).toBe("custom");
+        });
+        it("field.parent().field() resolves sibling fields relative to the parent object", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        group: fields.object().renderer("passthrough").fields((f)=>({
+                                label: f.text().defaultValue("Hello"),
+                                slug: f.text().computedUntilDirty(({ field })=>String(field.parent().field("label").getValue() || "").toLowerCase().replace(/\s+/g, "-"))
+                            }))
+                    })
+            });
+            expect(form.field("group.slug").getValue()).toBe("hello");
+            form.field("group.label").setValue("New Title");
+            expect(form.field("group.slug").getValue()).toBe("new-title");
+        });
+        it("field.parent().field() can traverse into sibling objects", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        wrapper: fields.object().renderer("passthrough").fields((f)=>({
+                                message: f.text().defaultValue("default").computedUntilDirty(({ field })=>{
+                                    const preset = field.parent().field("settings.preset").getValue();
+                                    return "custom" === preset ? "Custom message" : `Preset: ${preset}`;
+                                }),
+                                settings: f.object().renderer("passthrough").fields((inner)=>({
+                                        preset: inner.text().defaultValue("custom")
+                                    }))
+                            }))
+                    })
+            });
+            expect(form.field("wrapper.message").getValue()).toBe("Custom message");
+            form.field("wrapper.settings.preset").setValue("email");
+            expect(form.field("wrapper.message").getValue()).toBe("Preset: email");
+        });
         it("modifier setComputed converts a regular field into a computed one", ()=>{
             const form = createForm({
                 fields: (fields)=>({
@@ -3064,7 +3135,7 @@ describe("FormModel", ()=>{
                         derived: fields.text().defaultValue("initial")
                     })
             });
-            form.field("derived").setComputed((f)=>`from-${f.field("src").getValue()}`);
+            form.field("derived").setComputed(({ form })=>`from-${form.field("src").getValue()}`);
             expect(form.field("derived").getValue()).toBe("from-X");
             form.field("src").setValue("Y");
             expect(form.field("derived").getValue()).toBe("from-Y");
@@ -3786,7 +3857,7 @@ describe("FormModel", ()=>{
                 fields: (f)=>({
                         tags: f.text().list().defaultValue([
                             "a"
-                        ]).beforeChange((value, _form)=>{
+                        ]).beforeChange((value, _params)=>{
                             log.push(value);
                             return value;
                         })
@@ -3808,54 +3879,178 @@ describe("FormModel", ()=>{
             ]);
         });
     });
-    describe("$. static references in rules", ()=>{
-        it("$. resolves rule targets relative to the parent object", ()=>{
+    describe("field context", ()=>{
+        it("should expose context derived from sibling fields via form param", ()=>{
             const form = createForm({
                 fields: (fields)=>({
-                        wrapper: fields.object().renderer("passthrough").fields((f)=>({
-                                status: f.text().defaultValue("draft"),
-                                details: f.text().rules([
-                                    {
-                                        type: "condition",
-                                        target: "$.status",
-                                        operator: "eq",
-                                        value: "draft",
-                                        action: "hide"
-                                    }
-                                ])
+                        title: fields.text().defaultValue("My Article"),
+                        description: fields.text().defaultValue("A great article"),
+                        media: fields.file().context(({ form })=>({
+                                title: form.field("title").getValue(),
+                                description: form.field("description").getValue()
+                            }))
+                    })
+            });
+            expect(form.field("media").vm.context).toEqual({
+                title: "My Article",
+                description: "A great article"
+            });
+        });
+        it("should access root-level siblings via field.parent().field()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Root Sibling"),
+                        media: fields.file().context(({ field })=>({
+                                title: field.parent().field("title").getValue()
+                            }))
+                    })
+            });
+            expect(form.field("media").vm.context).toEqual({
+                title: "Root Sibling"
+            });
+        });
+        it("should reactively update context when source fields change", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Original"),
+                        media: fields.file().context(({ form })=>({
+                                title: form.field("title").getValue()
+                            }))
+                    })
+            });
+            expect(form.field("media").vm.context).toEqual({
+                title: "Original"
+            });
+            form.field("title").setValue("Updated");
+            expect(form.field("media").vm.context).toEqual({
+                title: "Updated"
+            });
+        });
+        it("should default to empty object when no context callback is set", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text()
+                    })
+            });
+            expect(form.field("title").vm.context).toEqual({});
+        });
+        it("should access root fields via form param from nested object", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Page Title"),
+                        settings: fields.object().fields((f)=>({
+                                media: f.file().context(({ form })=>({
+                                        title: form.field("title").getValue()
+                                    }))
                             }))
                     }),
                 layout: (l)=>[
-                        l.row("wrapper")
+                        l.row("title"),
+                        l.row("settings")
                     ]
             });
-            expect(form.field("wrapper.details").visible).toBe(false);
-            form.field("wrapper.status").setValue("published");
-            expect(form.field("wrapper.details").visible).toBe(true);
+            expect(form.field("settings.media").vm.context).toEqual({
+                title: "Page Title"
+            });
+            form.field("title").setValue("New Title");
+            expect(form.field("settings.media").vm.context).toEqual({
+                title: "New Title"
+            });
         });
-        it("$. in rules with disable action", ()=>{
+        it("should navigate to siblings via field.parent().field()", ()=>{
             const form = createForm({
                 fields: (fields)=>({
-                        wrapper: fields.object().renderer("passthrough").fields((f)=>({
-                                locked: f.text().defaultValue("yes"),
-                                editable: f.text().rules([
-                                    {
-                                        type: "condition",
-                                        target: "$.locked",
-                                        operator: "eq",
-                                        value: "yes",
-                                        action: "disable"
-                                    }
-                                ])
+                        wrapper: fields.object().fields((f)=>({
+                                title: f.text().defaultValue("Nested Title"),
+                                media: f.file().context(({ field })=>({
+                                        title: field.parent().field("title").getValue()
+                                    }))
                             }))
                     }),
                 layout: (l)=>[
                         l.row("wrapper")
                     ]
             });
-            expect(form.field("wrapper.editable").disabled).toBe(true);
-            form.field("wrapper.locked").setValue("no");
-            expect(form.field("wrapper.editable").disabled).toBe(false);
+            expect(form.field("wrapper.media").vm.context).toEqual({
+                title: "Nested Title"
+            });
+        });
+        it("should navigate multiple levels up via chained parent()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Root Title"),
+                        settings: fields.object().fields((f)=>({
+                                nested: f.object().fields((inner)=>({
+                                        media: inner.file().context(({ field })=>({
+                                                title: field.parent().parent().parent().field("title").getValue()
+                                            }))
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("title"),
+                        l.row("settings")
+                    ]
+            });
+            expect(form.field("settings.nested.media").vm.context).toEqual({
+                title: "Root Title"
+            });
+            form.field("title").setValue("Updated Root");
+            expect(form.field("settings.nested.media").vm.context).toEqual({
+                title: "Updated Root"
+            });
+        });
+        it("should navigate past parent to grandparent scope", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        settings: fields.object().fields((f)=>({
+                                label: f.text().defaultValue("Settings Label"),
+                                nested: f.object().fields((inner)=>({
+                                        media: inner.file().context(({ field })=>({
+                                                label: field.parent().parent().field("label").getValue()
+                                            }))
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("settings")
+                    ]
+            });
+            expect(form.field("settings.nested.media").vm.context).toEqual({
+                label: "Settings Label"
+            });
+        });
+        it("should throw when navigating above root level", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        media: fields.file().context(({ field })=>({
+                                bad: field.parent().parent().field("x").getValue()
+                            }))
+                    })
+            });
+            expect(()=>form.field("media").vm.context).toThrow("Cannot navigate above root level.");
+        });
+        it("should use both field navigator and form in the same callback", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        slug: fields.text().defaultValue("my-slug"),
+                        settings: fields.object().fields((f)=>({
+                                label: f.text().defaultValue("Settings Label"),
+                                media: f.file().context(({ field, form })=>({
+                                        label: field.parent().field("label").getValue(),
+                                        slug: form.field("slug").getValue()
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("slug"),
+                        l.row("settings")
+                    ]
+            });
+            expect(form.field("settings.media").vm.context).toEqual({
+                label: "Settings Label",
+                slug: "my-slug"
+            });
         });
     });
 });