Biz/dj 2780 add support for configurationerror in connect react (#15479)

* Fix linter error

* Surface configuration and sdk errors

* Update pnpm lock

* Render SDK errors in an alert

* Add getEnvironment to BaseClient

* Add isDevelopment flag to context

* Set sdk version to 1.3.1 in example app

* Update pnpm

* Bump sdk version in nextjs app

* Json stringify sdk errors

* Update sdk version

* Handle sdk errors

* Cleanup

* Cleanup page.tsx

* Commit pnpm-lock.yaml

* Undo sdk changes

* Use enableDebugging flag instead of environment

* Update version and README

* Cleanup

* Update version

* Cleanup

* Merge pnpm changes

* Refactor sdk error handler

* Add types file

* Refactor Errors.tsx

* Always show ConfigurationError

Author: bzwrk

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,10 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.28] - 2025-02-05
+
+- Surface SDK errors in the form
+
 # [1.0.0-preview.27] - 2025-01-30
 
 - Add styling to alerts

packages/connect-react/README.md

@@ -149,6 +149,11 @@ type ComponentFormProps = {
   onUpdateConfiguredProps: (v: Record<string, any>) => void;
   /** Hide optional props section */
   hideOptionalProps: boolean;
+  /** SDK response payload. Used in conjunction with enableDebugging to 
+   * show errors in the form. */
+  sdkResponse: unknown[] | unknown | undefined;
+  /** Whether to show show errors in the form. Requires sdkErrors to be set. */
+  enableDebugging?: boolean;
 };
 ```
 

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

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@pipedream/connect-react": "file:../..",
-    "@pipedream/sdk": "^1.1.4",
+    "@pipedream/sdk": "^1.3.2",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106"

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

@@ -10,7 +10,6 @@ import { fetchToken } from "./actions";
 export default function Home() {
   const userId = "my-authed-user-id";
   const client = createFrontendClient({
-    environment: "development",
     externalUserId: userId,
     tokenCallback: fetchToken,
   });
@@ -26,6 +25,11 @@ export default function Home() {
     setDynamicPropsId,
   ] = useState<string | undefined>();
 
+  const [
+    sdkResponse,
+    setSdkResponse,
+  ] = useState<unknown | undefined>(undefined);
+
   const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
     setDynamicPropsId(dynamicProps.id)
   }
@@ -40,14 +44,17 @@ export default function Home() {
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
+          sdkResponse={sdkResponse}
+          enableDebugging={true}
           onSubmit={async () => {
             try {
-              await client.actionRun({
+              const response = await client.runAction({
                 userId,
                 actionId: "slack-send-message",
                 configuredProps,
                 dynamicPropsId,
               });
+              setSdkResponse(response)
             } catch (error) {
               console.error("Action run failed:", error);
             }

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

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.27",
+  "version": "1.0.0-preview.28",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

packages/connect-react/package.json

@@ -7,8 +7,9 @@ type AlertProps = {
 
 export function Alert({ prop }: AlertProps) {
   const baseStyles = {
+    width: "100%",
     background: "#e2e3e5",
-    borderRadius: "10px",
+    borderRadius: "5px",
     paddingTop: "2px",
     paddingLeft: "10px",
     paddingRight: "10px",

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

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

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

@@ -1,6 +1,8 @@
 import type { CSSProperties } from "react";
 import Markdown from "react-markdown";
-import { ConfigurableProp, ConfigurableProps } from "@pipedream/sdk";
+import {
+  ConfigurableProp, ConfigurableProps,
+} from "@pipedream/sdk";
 import { useCustomize } from "../hooks/customization-context";
 import { FormFieldContext } from "../hooks/form-field-context";
 import { FormContext } from "../hooks/form-context";
@@ -14,9 +16,6 @@ export type DescriptionProps<T extends ConfigurableProps, U extends Configurable
 // XXX should we rename to FieldDescription (so shared prefix + clear we need field context
 // eg. cannot be used in OptionalFieldButton, or they need to be set up better)
 export function Description<T extends ConfigurableProps, U extends ConfigurableProp>(props: DescriptionProps<T, U>) {
-  if (!props.field) {
-    console.log("props", props);
-  }
   const {
     field, markdown,
   } = props;

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

@@ -1,38 +1,50 @@
 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();
+    errors = {}, prop = {}, enableDebugging,
+  } = field
 
-  const baseStyles: CSSProperties = {
-    color: theme.colors.danger,
-    gridArea: "errors",
-  };
+  if (!enableDebugging) {
+    return null
+  }
 
-  if (!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[] = errors[prop.name].map((e) => {
+    return {
+      type: "alert",
+      alertType: "error",
+      content: e,
+    }
+  })
+
+  const baseStyles = {
+    display: "grid",
+    gridTemplateColumns: "max-content",
+  }
+
+  const FormattedErrors = () => {
+    return <>{formattedErrors.map((fe, idx: number) => <Alert prop={fe} key={idx}/>)}</>
+  }
+
   return (
-    <ul {...getProps("errors", baseStyles, props)}>
-      {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
-    </ul>
+    <div className="pd-errors" style={baseStyles}><FormattedErrors/></div>
   );
 }