Render SDK errors in an alert

Author: bzwrk

packages/connect-react/src/components/Errors.tsx

@@ -27,37 +27,20 @@ export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(
   // TODO depending on type does different shit... we might need async loader around the label, etc.?
   // maybe that should just be handled by FormFieldContext instead of container?
 
-  const formattedErrors: ConfigurablePropAlert[] = []
-  // for (const key in fieldErrors) {
-  const key = "xxx"
-  if (key === "sdkErrors") {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    formattedErrors.push(...errors[key].map((e) => {
-      const o = JSON.parse(e)
-      return {
-        type: "alert",
-        alertType: "error",
-        content: `#${o.name}\n${o.message}`,
-      }
-    }))
-  } else {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    formattedErrors.push(...errors[prop.name].map((e) => {
-      return {
-        type: "alert",
-        alertType: "error",
-        content: e,
-      }
-    }))
+  const formattedErrors: ConfigurablePropAlert[] = errors[prop.name].map((e) => {
+    return {
+      type: "alert",
+      alertType: "error",
+      content: e,
+    }
+  })
+
+  const baseStyles = {
+    display: "grid",
+    gridTemplateColumns: "max-content",
   }
-  // }
 
   return (
-    // <ul {...getProps("errors", baseStyles, props)}>
-    //   {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
-    // </ul>
-    <>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</>
+    <div className="pd-errors" style={baseStyles}>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</div>
   );
 }

packages/connect-react/src/components/InternalComponentForm.tsx

@@ -1,4 +1,6 @@
-import { Suspense } from "react";
+import {
+  Suspense, useEffect, useState,
+} from "react";
 import type {
   CSSProperties, FormEventHandler,
 } from "react";
@@ -23,12 +25,37 @@ export function InternalComponentForm() {
     optionalPropSetEnabled,
     props: formContextProps,
     setSubmitting,
+    sdkErrors: __sdkErrors,
+    submitting,
   } = formContext;
 
   const {
     hideOptionalProps, onSubmit,
   } = formContextProps;
 
+  const [
+    sdkErrors,
+    setSdkErrors,
+  ] = useState<ConfigurablePropAlert[]>([])
+
+  useEffect(() => {
+    if (submitting) setSdkErrors([])
+    else {
+      if (__sdkErrors && __sdkErrors.length) {
+        setSdkErrors(__sdkErrors.map((e) => {
+          return {
+            type: "alert",
+            alertType: "error",
+            content: `# ${e.name}\n${e.message}`,
+          }
+        }))
+      }
+    }
+  }, [
+    __sdkErrors,
+    submitting,
+  ]);
+
   const {
     getComponents, getProps, theme,
   } = useCustomize();
@@ -96,6 +123,7 @@ export function InternalComponentForm() {
   }
 
   // TODO improve the error boundary thing (use default Alert component maybe)
+
   return (
     <ErrorBoundary fallback={(err) => <p style={{
       color: "red",
@@ -130,6 +158,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
+          { sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>

packages/connect-react/src/hooks/form-context.tsx

@@ -24,6 +24,7 @@ export type FormContext<T extends ConfigurableProps> = {
   dynamicProps?: DynamicProps<T>; // lots of calls require dynamicProps?.id, so need to expose
   dynamicPropsQueryIsFetching?: boolean;
   errors: Record<string, string[]>;
+  sdkErrors: Record<string, string>[];
   fields: Record<string, FormFieldContext<ConfigurableProp>>;
   id: string;
   isValid: boolean;
@@ -73,7 +74,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId, sdkErrors,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors,
   } = formProps;
   const componentId = component.key;
 
@@ -95,9 +96,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ] = useState<Record<string, string[]>>({});
 
   const [
-    configurationErrors,
-    setConfigurationErrors,
-  ] = useState<string[]>([]);
+    sdkErrors,
+    setSdkErrors,
+  ] = useState<Record<string, string>[]>([])
 
   const [
     enabledOptionalProps,
@@ -270,9 +271,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   ]);
 
   useEffect(() => {
-    handleSdkErrors(sdkErrors)
+    handleSdkErrors(__sdkErrors)
   }, [
-    sdkErrors,
+    __sdkErrors,
   ]);
 
   useEffect(() => {
@@ -411,18 +412,15 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     const os = o
     if (Array.isArray(os) && os.length > 0) {
       const newErrors = os.map((it) => {
-        const name = it.err?.name
-        const message = it.err?.message
-        if (name && message) return JSON.stringify({
+        const name: string = it.err?.name
+        const message: string = it.err?.message
+        if (name && message) return {
           name,
           message,
-        })
+        } as Record<string, string>
         return undefined
       }).filter((e) => e !== undefined)
-      if (newErrors) setErrors({
-        ...errors,
-        sdkErrors: newErrors,
-      })
+      setSdkErrors(newErrors)
     } else if (typeof o === "object") {
       // TODO: handle rails api errors here
     }
@@ -449,6 +447,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setConfiguredProp,
     setSubmitting,
     submitting,
+    sdkErrors,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };