fix(vue-components): handle string form validation errors

.changeset/tidy-forms-report.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+Handle string form validation errors in OmegaForm.Errors without crashing, and safely ignore unsupported error values.

packages/vue-components/__tests__/OmegaForm/GeneralErrors.test.ts

@@ -0,0 +1,59 @@
+import { mount } from "@vue/test-utils"
+import * as S from "effect-app/Schema"
+import { describe, expect, it } from "vitest"
+import { defineComponent, h, nextTick } from "vue"
+import { useOmegaForm } from "../../src/components/OmegaForm"
+import OmegaErrorsInternal from "../../src/components/OmegaForm/OmegaErrorsInternal.vue"
+
+describe("OmegaForm general errors", () => {
+  it("renders a string returned by an onSubmit validator and clears it after correction", async () => {
+    const message = "Passwörter stimmen nicht überein"
+    const Inner = defineComponent({
+      setup() {
+        const form = useOmegaForm(S.Struct({ password: S.String, confirmation: S.String }), {
+          defaultValues: { password: "secret", confirmation: "different" },
+          validators: {
+            onSubmit: ({ value }) => value.password === value.confirmation ? undefined : message
+          }
+        })
+        return { form }
+      },
+      template: `<component :is="form.Form"><component :is="form.Errors" /></component>`
+    })
+    const wrapper = mount(Inner)
+
+    await wrapper.vm.form.handleSubmit()
+    await nextTick()
+    expect(wrapper.get("[role=\"alert\"]").text()).toContain(message)
+
+    wrapper.vm.form.setFieldValue("confirmation", "secret")
+    await wrapper.vm.form.handleSubmit()
+    await nextTick()
+    expect(wrapper.find("[role=\"alert\"]").exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it("preserves schema messages alongside strings and ignores unsupported values", () => {
+    const wrapper = mount(OmegaErrorsInternal, {
+      props: {
+        errors: [],
+        generalErrors: [
+          "Form error",
+          { rows: [{ message: "Schema error" }, null, 42, { message: 123 }, { message: "" }] },
+          null,
+          undefined,
+          false,
+          42,
+          "",
+          { rows: "unsupported", other: null }
+        ]
+      },
+      slots: {
+        default: ({ showedGeneralErrors }) => h("div", JSON.stringify(showedGeneralErrors))
+      }
+    })
+
+    expect(wrapper.text()).toBe(JSON.stringify(["Form error", "Schema error"]))
+    wrapper.unmount()
+  })
+})

packages/vue-components/src/components/OmegaForm/OmegaErrorsInternal.vue

@@ -99,7 +99,6 @@
 </template>
 
 <script setup lang="ts">
-import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
 import { computed, getCurrentInstance } from "vue"
 import { useIntl } from "../../utils"
 import { type OmegaError } from "./types"
@@ -109,7 +108,7 @@ const vuetified = instance?.appContext.components["VAlert"]
 
 const props = defineProps<
   {
-    generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[]
+    generalErrors: unknown[]
     errors: OmegaError[]
     hideErrorDetails?: boolean
   }
@@ -120,21 +119,25 @@ const { trans } = useIntl()
 const showedGeneralErrors = computed(() => {
   if (!props.generalErrors) return []
 
-  return props
-    .generalErrors
-    .filter((record): record is Record<string, StandardSchemaV1Issue[]> => Boolean(record))
-    .flatMap((errorRecord) =>
-      Object
-        .values(errorRecord)
-        .filter((issues): issues is StandardSchemaV1Issue[] => Boolean(issues))
-        .flatMap((issues) =>
-          issues
-            .filter(
-              (issue): issue is StandardSchemaV1Issue & { message: string } => Boolean(issue?.message)
-            )
-            .map((issue) => issue.message)
+  return props.generalErrors.flatMap((record) => {
+    if (typeof record === "string") return record ? [record] : []
+    if (typeof record !== "object" || record === null) return []
+
+    return Object
+      .values(record)
+      .filter((issues): issues is unknown[] => Array.isArray(issues))
+      .flatMap((issues) =>
+        issues.flatMap((issue) =>
+          typeof issue === "object"
+            && issue !== null
+            && "message" in issue
+            && typeof issue.message === "string"
+            && issue.message
+            ? [issue.message]
+            : []
         )
-    )
+      )
+  })
 })
 </script>