form: fix switch required, add root form error to media settings

app/src/ui/routes/media/media.settings.tsx

@@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { useBknd } from "ui/client/BkndProvider";
 import { useBkndMedia } from "ui/client/schema/media/use-bknd-media";
 import { Button } from "ui/components/buttons/Button";
+import { Alert } from "ui/components/display/Alert";
 import { Message } from "ui/components/display/Message";
 import * as Formy from "ui/components/form/Formy";
 import {
@@ -14,7 +15,8 @@ import {
    FormContextOverride,
    FormDebug,
    ObjectField,
-   Subscribe
+   Subscribe,
+   useFormError
 } from "ui/components/form/json-schema-form";
 import { Media } from "ui/elements";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
@@ -37,7 +39,12 @@ const formConfig = {
 };
 
 function MediaSettingsInternal() {
-   const { config, schema, actions } = useBkndMedia();
+   const { config, schema: _schema, actions } = useBkndMedia();
+   const schema = JSON.parse(JSON.stringify(_schema));
+
+   schema.if = { properties: { enabled: { const: true } } };
+   // biome-ignore lint/suspicious/noThenProperty: <explanation>
+   schema.then = { required: ["adapter"] };
 
    async function onSubmit(data: any) {
       console.log("submit", data);
@@ -71,6 +78,7 @@ function MediaSettingsInternal() {
                )}
             </Subscribe>
             <AppShell.Scrollable>
+               <RootFormError />
                <div className="flex flex-col gap-3 p-3">
                   <Field name="enabled" />
                   <div className="flex flex-col gap-3 relative">
@@ -92,6 +100,19 @@ function MediaSettingsInternal() {
    );
 }
 
+const RootFormError = () => {
+   const errors = useFormError("", { strict: true });
+   if (errors.length === 0) return null;
+
+   return (
+      <Alert.Exception>
+         {errors.map((error, i) => (
+            <div key={i}>{error.message}</div>
+         ))}
+      </Alert.Exception>
+   );
+};
+
 const Icons = [IconBrandAws, IconCloud, IconServer];
 
 const AdapterIcon = ({ index }: { index: number }) => {

app/src/ui/routes/test/tests/json-schema-form3.tsx

@@ -8,7 +8,8 @@ import {
    Form,
    FormContextOverride,
    FormDebug,
-   ObjectField
+   ObjectField,
+   useFormError
 } from "ui/components/form/json-schema-form";
 import { Scrollable } from "ui/layouts/AppShell/AppShell";
 
@@ -32,10 +33,14 @@ const schema2 = {
 };
 
 export default function JsonSchemaForm3() {
-   const { schema, config } = useBknd();
+   const { schema: _schema, config } = useBknd();
+   const schema = JSON.parse(JSON.stringify(_schema));
 
    config.media.storage.body_max_size = 1;
    schema.media.properties.storage.properties.body_max_size.minimum = 0;
+   schema.media.if = { properties: { enabled: { const: true } } };
+   // biome-ignore lint/suspicious/noThenProperty: <explanation>
+   schema.media.then = { required: ["adapter"] };
    //schema.media.properties.adapter.anyOf[2].properties.config.properties.path.minLength = 1;
 
    return (
@@ -243,11 +248,9 @@ export default function JsonSchemaForm3() {
             <Form
                schema={schema.media}
                initialValues={config.media as any}
-               /* validateOn="change"*/
                onSubmit={console.log}
-            >
-               <Field name="" />
-            </Form>
+               validateOn="change"
+            />
 
             {/*<Form
                schema={removeKeyRecursively(schema.media, "pattern") as any}
@@ -301,18 +304,23 @@ const ss = {
 } as const satisfies JSONSchema;
 
 function CustomMediaForm() {
-   const { schema, config } = useBknd();
+   const { schema: _schema, config } = useBknd();
+   const schema = JSON.parse(JSON.stringify(_schema));
 
    config.media.storage.body_max_size = 1;
    schema.media.properties.storage.properties.body_max_size.minimum = 0;
+   schema.media.if = { properties: { enabled: { const: true } } };
+   // biome-ignore lint/suspicious/noThenProperty: <explanation>
+   schema.media.then = { required: ["adapter"] };
 
    return (
       <Form
          schema={schema.media}
-         initialValues={config.media as any}
+         /*initialValues={config.media as any}*/
          className="flex flex-col gap-3"
          validateOn="change"
       >
+         <Test />
          <Field name="enabled" />
          <Field name="basepath" />
          <Field name="entity_name" />
@@ -320,11 +328,17 @@ function CustomMediaForm() {
          <AnyOf.Root path="adapter">
             <CustomMediaFormAdapter />
          </AnyOf.Root>
-         <FormDebug force />
+         {/*<FormDebug force />*/}
       </Form>
    );
 }
 
+const Test = () => {
+   const errors = useFormError("", { strict: true });
+   return <div>{errors.map((e) => e.message).join("\n")}</div>;
+   //return <pre>{JSON.stringify(errors, null, 2)}</pre>;
+};
+
 function CustomMediaFormAdapter() {
    const ctx = AnyOf.useContext();