improve error merging

Author: sheppard

packages/app/src/app.js

@@ -915,7 +915,7 @@ async function _displayItem(ctx) {
     }
 }
 
-function _addFKLabels(item, form) {
+function _addFKLabels(item, form = []) {
     for (const field of form) {
         const modelName = field["wq:ForeignKey"],
             idName = `${field.name}_id`,

packages/outbox/index.js

@@ -1,3 +1,3 @@
-import outbox, { Outbox, getOutbox } from "./src/outbox.js";
+import outbox, { Outbox, getOutbox, mergeErrors } from "./src/outbox.js";
 export default outbox;
-export { Outbox, getOutbox };
+export { Outbox, getOutbox, mergeErrors };

packages/outbox/src/__tests__/mergeErrors.js

@@ -0,0 +1,76 @@
+import { mergeErrors } from "../outbox.js";
+
+test("merge errors - simple", () => {
+    const error1 = { test: "invalid data" },
+        error2 = { test: "required", test2: "required" },
+        merged1 = { test: "invalid data • required", test2: "required" },
+        merged2 = { test: "required • invalid data", test2: "required" };
+    expect(mergeErrors(error1, error2)).toStrictEqual(merged1);
+    expect(mergeErrors(error2, error1)).toStrictEqual(merged2);
+});
+
+test("merge errors - array", () => {
+    const error1 = { test: [null, { value: "invalid data" }] },
+        error2 = { test: [{ value: "required" }, { value: "required" }] },
+        merged1 = {
+            test: [{ value: "required" }, { value: "invalid data • required" }],
+        },
+        merged2 = {
+            test: [{ value: "required" }, { value: "required • invalid data" }],
+        };
+    expect(mergeErrors(error1, error2)).toStrictEqual(merged1);
+    expect(mergeErrors(error2, error1)).toStrictEqual(merged2);
+});
+
+test("merge errors - mixed types", () => {
+    const error1 = { test: [null, { value: "invalid data" }] },
+        error2 = { test: "error" };
+    expect(mergeErrors(error1, error2)).toStrictEqual(error2);
+    expect(mergeErrors(error2, error1)).toStrictEqual(error1);
+});
+
+test("merge errors - nested array", () => {
+    const error1 = {
+            test: [null, { items: [null, { value: "invalid data" }] }],
+        },
+        error2 = {
+            test: [
+                null,
+                { items: [{ value: "required" }, { value: "required" }] },
+            ],
+        },
+        merged1 = {
+            test: [
+                {},
+                {
+                    items: [
+                        { value: "required" },
+                        { value: "invalid data • required" },
+                    ],
+                },
+            ],
+        },
+        merged2 = {
+            test: [
+                {},
+                {
+                    items: [
+                        { value: "required" },
+                        { value: "required • invalid data" },
+                    ],
+                },
+            ],
+        };
+    expect(mergeErrors(error1, error2)).toStrictEqual(merged1);
+    expect(mergeErrors(error2, error1)).toStrictEqual(merged2);
+});
+
+test("merge errors - diff array length", () => {
+    const error1 = { test: [null, { value: "invalid data" }] },
+        error2 = { test: [{ value: "required" }] },
+        merged = {
+            test: [{ value: "required" }, { value: "invalid data" }],
+        };
+    expect(mergeErrors(error1, error2)).toStrictEqual(merged);
+    expect(mergeErrors(error2, error1)).toStrictEqual(merged);
+});

packages/outbox/src/outbox.js

@@ -336,15 +336,19 @@ class Outbox {
 
     // Validate a record before adding it to the outbox
     validate(data, modelConf) {
-        const errors = {};
+        let errors = {};
         this.app
             .callPlugins("validate", [data, modelConf])
             .forEach((pluginErrors) => {
-                mergeErrors(errors, pluginErrors);
+                errors = this.mergeErrors(errors, pluginErrors);
             });
         return errors;
     }
 
+    mergeErrors(errors, nextErrors) {
+        return mergeErrors(errors, nextErrors);
+    }
+
     // Send a single item from the outbox to the server
     sendItem() {
         throw new Error(
@@ -1128,14 +1132,15 @@ class Outbox {
     }
 }
 
-function mergeErrors(errors, newErrors) {
+export function mergeErrors(errors, newErrors) {
     if (
         !newErrors ||
         typeof newErrors !== "object" ||
         !Object.keys(newErrors).length
     ) {
         return errors;
     }
+    errors = { ...errors };
     Object.entries(newErrors).forEach(([key, newError]) => {
         const error = errors[key];
         if (
@@ -1148,7 +1153,7 @@ function mergeErrors(errors, newErrors) {
             errors[key] = error + " • " + newError;
         } else if (Array.isArray(error)) {
             errors[key] = error
-                .map((err, i) => mergeErrors(err, newError[i]))
+                .map((err, i) => mergeErrors(err || {}, newError[i]))
                 .concat(newError.slice(error.length));
         } else if (typeof error === "object") {
             errors[key] = mergeErrors(error, newError);

wq/app/static/app/.sha256

@@ -2,5 +2,5 @@ c637d052aaddf8b0ad878819ee30facb74a3ba34cbed310a0fd1834fc02f46a2  css/mapbox-gl-
 731181d400d65a8b09d842f55b70bc4dc11010b15b8549e2c65a69d233fbdd2e  css/maplibre-gl.css
 cfb20121bd733aa6795e9f2f180c327d561c51cff783196f1eaa01ba42701bec  css/wq.css
 a222d0281caeab67157dc947f83971d219156060bd98a529c035de4cec92a8f5  js/maplibre-gl.js
-c856aaf7890b3ecf9e6921f31916044196ee15aa2e48a854a0455995b9e47882  js/wq.dev.js'
-68c09e974002ea85436e7aadfd575e1ee46dff4cedbfd3b75c3f2b3ccc314f6e  js/wq.js'
+d0bc262f5957ca3098a853d928e1449979ddec8ae582014867e5d4650121272c  js/wq.dev.js'
+1c595b9196ae26a9d3f330901cfd41a062b5ade4eaa10cd3df8ef865c856b4ef  js/wq.js'