Surface configuration and sdk errors

Author: bzwrk

packages/connect-react/examples/nextjs/package-lock.json

@@ -8,7 +8,7 @@ import {
 import { fetchToken } from "./actions";
 
 export default function Home() {
-  const userId = "my-authed-user-id";
+  const userId = "demo-32aaf9cd-5df0-4ffe-86b5-db43a61a842c"; //gmail-new-email-received
   const client = createFrontendClient({
     environment: "development",
     externalUserId: userId,
@@ -26,6 +26,11 @@ export default function Home() {
     setDynamicPropsId,
   ] = useState<string | undefined>();
 
+  const [
+    errors,
+    setErrors,
+  ] = useState<unknown[] | unknown | undefined>(undefined);
+
   const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
     setDynamicPropsId(dynamicProps.id)
   }
@@ -36,19 +41,22 @@ export default function Home() {
       <FrontendClientProvider client={client}>
         <ComponentFormContainer
           userId={userId}
-          componentKey="slack-send-message"
+          componentKey="gmail-new-email-received"
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
+          sdkErrors={errors}
           onSubmit={async () => {
             try {
-              await client.actionRun({
+              const result = await client.actionRun({
                 userId,
-                actionId: "slack-send-message",
+                actionId: "gmail-new-email-received",
                 configuredProps,
                 dynamicPropsId,
               });
+              setErrors(result?.os)
             } catch (error) {
+              setErrors(error as unknown)
               console.error("Action run failed:", error);
             }
           }}

packages/connect-react/examples/nextjs/src/app/page.tsx

@@ -20,6 +20,7 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   onUpdateConfiguredProps?: (v: U) => void; // XXX onChange?
   onUpdateDynamicProps?: (dp: DynamicProps<T>) => void;
   hideOptionalProps?: boolean;
+  sdkErrors?: unknown[] | unknown | undefined;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {

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

@@ -1,38 +1,63 @@
 import { FormContext } from "../hooks/form-context";
 import type { FormFieldContext } from "../hooks/form-field-context";
 import {
-  ConfigurableProp, ConfigurableProps,
+  ConfigurableProp, ConfigurablePropAlert, ConfigurableProps,
 } from "@pipedream/sdk";
-import { useCustomize } from "../hooks/customization-context";
-import type { CSSProperties } from "react";
+import { Alert } from "./Alert";
 
 export type ErrorsProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
-  errors: string[];
   field: FormFieldContext<U>;
   form: FormContext<T>;
 };
 
 export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(props: ErrorsProps<T, U>) {
-  const { errors } = props;
-
+  const { field } = props;
   const {
-    getProps, theme,
-  } = useCustomize();
-
-  const baseStyles: CSSProperties = {
-    color: theme.colors.danger,
-    gridArea: "errors",
-  };
+    errors, prop,
+  } = field
 
-  if (!errors.length) {
+  if (!Object.keys(errors || {}).length) {
     return null;
   }
 
+  if (!errors[prop.name]) {
+    return null
+  }
+
   // 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,
+      }
+    }))
+  }
+  // }
+
   return (
-    <ul {...getProps("errors", baseStyles, props)}>
-      {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
-    </ul>
+    // <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}/>)}</>
   );
 }

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

@@ -40,8 +40,6 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
     Label, Description, Errors,
   } = getComponents();
 
-  const errors: string[] = []; // TODO get from field context, can be added or removed by Control, etc.
-
   const app = "app" in field.extra
     ? field.extra.app
     : undefined;
@@ -59,12 +57,13 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
   // maybe that should just be handled by FormFieldContext instead of container?
   // XXX rename to FieldErrors + add FormErrors (to ComponentFormInternal)
   // XXX use similar pattern as app below for boolean and checkboxing DOM re-ordering?
+
   return (
     <div {...getProps("field", baseStyles, props)}>
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />
-      <Errors errors={errors} field={field} form={form} />
+      <Errors field={field} form={form} />
     </div>
   );
 }

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

@@ -15,7 +15,7 @@ export function InternalField<T extends ConfigurableProp>({
 }: FieldInternalProps<T>) {
   const formCtx = useFormContext();
   const {
-    id: formId, configuredProps, registerField, setConfiguredProp,
+    id: formId, configuredProps, registerField, setConfiguredProp, errors,
   } = formCtx;
 
   const appSlug = prop.type === "app" && "app" in prop
@@ -44,6 +44,7 @@ export function InternalField<T extends ConfigurableProp>({
     extra: {
       app, // XXX fix ts
     },
+    errors,
   };
   useEffect(() => registerField(fieldCtx), [
     fieldCtx,

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

@@ -73,7 +73,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors,
   } = formProps;
   const componentId = component.key;
 
@@ -94,6 +94,11 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setErrors,
   ] = useState<Record<string, string[]>>({});
 
+  const [
+    configurationErrors,
+    setConfigurationErrors,
+  ] = useState<string[]>([]);
+
   const [
     enabledOptionalProps,
     setEnabledOptionalProps,
@@ -264,6 +269,12 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     _configuredProps,
   ]);
 
+  useEffect(() => {
+    handleSdkErrors(sdkErrors)
+  }, [
+    sdkErrors,
+  ]);
+
   useEffect(() => {
     const newConfiguredProps: ConfiguredProps<T> = {};
     for (const prop of configurableProps) {
@@ -395,6 +406,28 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     checkPropsNeedConfiguring()
   };
 
+  const handleSdkErrors = (o: unknown[] | unknown | undefined) => {
+    if (!o) return
+    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({
+          name,
+          message,
+        })
+        return undefined
+      }).filter((e) => e !== undefined)
+      if (newErrors) setErrors({
+        ...errors,
+        sdkErrors: newErrors,
+      })
+    } else if (typeof o === "object") {
+      // TODO: handle rails api errors here
+    }
+  }
+
   // console.log("***", configurableProps, configuredProps)
   const value: FormContext<T> = {
     id,

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

@@ -16,6 +16,7 @@ export type FormFieldContext<T extends ConfigurableProp> = {
   value: PropValue<T["type"]> | undefined;
   onChange: (value: PropValue<T["type"]> | undefined) => void;
   extra: FormFieldContextExtra<T>;
+  errors: Record<string, string[]>;
 };
 
 export const FormFieldContext = createContext<FormFieldContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any