Upgrade to the v2 SDK (#18520)

Use the new v2 version of the Pipedream SDK in the `connect-react`
package. This change involves migrating to the new types mostly, but
also runtime changes involving the API calls.

The runtime behaviour should not be affected from a user's
perspective, except for consumers of the `connect-react` package
itself, since some components (e.g. `FrontendClientProvider`) expect
their consumers to inject a client instance of the same SDK
version. For this reason, this change bumps the **major** version of
this package.

Author: jverce

components/apex/apex.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/openthesaurus/openthesaurus.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

packages/connect-react/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 # Changelog
 
+## [2.0.0] - 2025-10-02
+
+### Breaking Changes
+
+Use the new v2 version of the Pipedream SDK (i.e. `@pipedreamhq/pipedream-sdk`).
+This change involves migrating to the new types mostly, but also runtime changes
+involving the API calls.
+
+The runtime behavior should not be affected from a user's perspective, except
+for consumers of the `connect-react` package itself, since some components (e.g.
+`FrontendClientProvider`) expect their consumers to inject a client instance of
+the same SDK version. For this reason, this change bumps the **major** version
+of this package.
+
 ## [1.5.0] - 2025-08-18
 
 ### Fixed

packages/connect-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"
@@ -30,7 +30,7 @@
   "author": "Pipedream Engineering",
   "license": "MIT",
   "dependencies": {
-    "@pipedream/sdk": "^1.8.0",
+    "@pipedream/sdk": "^2.0.13",
     "@tanstack/react-query": "^5.59.16",
     "lodash.isequal": "^4.5.0",
     "react-markdown": "^9.0.1",

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

@@ -1,12 +1,14 @@
-import {
-  FormContextProvider, type FormContext,
-} from "../hooks/form-context";
-import { DynamicProps } from "../types";
 import type {
+  Component,
   ConfigurableProps,
   ConfiguredProps,
-  V1Component,
+  DynamicProps,
 } from "@pipedream/sdk";
+
+import {
+  type FormContext,
+  FormContextProvider,
+} from "../hooks/form-context";
 import { InternalComponentForm } from "./InternalComponentForm";
 
 export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<T>> = {
@@ -18,7 +20,7 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
    * @deprecated Use `externalUserId` instead.
    */
   userId?: string;
-  component: V1Component<T>;
+  component: Component;
   configuredProps?: U; // XXX value?
   disableQueryDisabling?: boolean;
   // dynamicPropsId?: string // XXX need to load this initially when passed

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

@@ -38,7 +38,7 @@ export function Control<T extends ConfigurableProps, U extends ConfigurableProp>
     return <RemoteOptionsContainer queryEnabled={queryDisabledIdx == null || queryDisabledIdx >= idx} />;
   }
 
-  if ("options" in prop && prop.options) {
+  if ("options" in prop && Array.isArray(prop.options) && prop.options.length > 0) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const options: LabelValueOption<any>[] = prop.options.map(sanitizeOption);
     return <ControlSelect options={options} components={{

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

@@ -1,7 +1,14 @@
-import { useFormFieldContext } from "../hooks/form-field-context";
-import { useCustomize } from "../hooks/customization-context";
+import {
+  ConfiguredPropValueInteger,
+  ConfiguredPropValueObject,
+  ConfiguredPropValueString,
+  ConfiguredPropValueStringArray,
+} from "@pipedream/sdk";
 import type { CSSProperties } from "react";
 
+import { useCustomize } from "../hooks/customization-context";
+import { useFormFieldContext } from "../hooks/form-field-context";
+
 export function ControlAny() {
   const formFieldContext = useFormFieldContext();
   const {
@@ -18,7 +25,11 @@ export function ControlAny() {
     boxShadow: theme.boxShadow.input,
   };
 
-  let jsonValue = value;
+  let jsonValue = value as
+    | ConfiguredPropValueInteger
+    | ConfiguredPropValueObject
+    | ConfiguredPropValueString
+    | ConfiguredPropValueStringArray;
   if (typeof jsonValue === "object") {
     jsonValue = JSON.stringify(jsonValue);
   }

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

@@ -77,7 +77,7 @@ export function ControlApp({ app }: ControlAppProps) {
   };
   const selectProps = select.getProps("controlAppSelect", baseSelectProps);
 
-  const oauthAppId = oauthAppConfig?.[app.name_slug];
+  const oauthAppId = oauthAppConfig?.[app.nameSlug];
   const {
     isLoading: isLoadingAccounts,
     // TODO error
@@ -86,14 +86,12 @@ export function ControlApp({ app }: ControlAppProps) {
   } = useAccounts(
     {
       external_user_id: externalUserId,
-      app: app.name_slug,
+      app: app.nameSlug,
       oauth_app_id: oauthAppId,
     },
     {
       useQueryOpts: {
         enabled: !!app,
-
-        // @ts-expect-error this seems to work (this overrides enabled so don't just set to true)
         suspense: !!app,
       },
     },
@@ -161,7 +159,7 @@ export function ControlApp({ app }: ControlAppProps) {
             isLoading={isLoadingAccounts}
             isClearable={true}
             isSearchable={true}
-            getOptionLabel={(a) => a.name}
+            getOptionLabel={(a) => a.name ?? ""}
             getOptionValue={(a) => a.id}
             onChange={(a) => {
               if (a) {

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

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "react";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import { useCustomize } from "../hooks/customization-context";
+import { isConfigurablePropOfType } from "../utils/type-guards";
 
 export function ControlInput() {
   const formFieldContextProps = useFormFieldContext();
@@ -46,20 +47,23 @@ export function ControlInput() {
     autoComplete = "new-password"; // in chrome, this is better than "off" here
   }
 
+  const min = isConfigurablePropOfType(prop, "integer")
+    ? prop.min
+    : undefined;
+  const max = isConfigurablePropOfType(prop, "integer")
+    ? prop.max
+    : undefined;
+
   return (
     <input
       id={id}
       type={inputType}
       name={prop.name}
-      value={value ?? ""}
+      value={String(value ?? "")}
       onChange={(e) => onChange(toOnChangeValue(e.target.value))}
       {...getProps("controlInput", baseStyles, formFieldContextProps)}
-      min={"min" in prop
-        ? prop.min
-        : undefined}
-      max={"max" in prop
-        ? prop.max
-        : undefined}
+      min={min}
+      max={max}
       autoComplete={autoComplete}
       data-lpignore="true"
       data-1p-ignore="true"

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

@@ -1,3 +1,4 @@
+import type { PropOptionValue } from "@pipedream/sdk";
 import {
   useEffect,
   useMemo,
@@ -22,7 +23,7 @@ import {
 import { LoadMoreButton } from "./LoadMoreButton";
 
 // XXX T and ConfigurableProp should be related
-type ControlSelectProps<T> = {
+type ControlSelectProps<T extends PropOptionValue> = {
   isCreatable?: boolean;
   options: LabelValueOption<T>[];
   selectProps?: ReactSelectProps<LabelValueOption<T>, boolean>;
@@ -31,7 +32,7 @@ type ControlSelectProps<T> = {
   components?: ReactSelectProps<LabelValueOption<T>, boolean>["components"];
 };
 
-export function ControlSelect<T>({
+export function ControlSelect<T extends PropOptionValue>({
   isCreatable,
   options,
   selectProps,
@@ -83,37 +84,29 @@ export function ControlSelect<T>({
       return null;
     }
 
-    let ret = rawValue;
-    if (Array.isArray(ret)) {
+    if (Array.isArray(rawValue)) {
       // if simple, make lv (XXX combine this with other place this happens)
-      if (!isOptionWithLabel(ret[0])) {
-        return ret.map((o) =>
-          selectOptions.find((item) => item.value === o) || {
-            label: String(o),
-            value: o,
-          });
+      if (!isOptionWithLabel(rawValue[0])) {
+        return rawValue.map((o) =>
+          selectOptions.find((item) => item.value === o) || sanitizeOption(o as T));
       }
-    } else if (ret && typeof ret === "object" && "__lv" in ret) {
-      // Extract the actual option from __lv wrapper
-      ret = ret.__lv;
-    } else if (!isOptionWithLabel(ret)) {
+    } else if (rawValue && typeof rawValue === "object" && "__lv" in (rawValue as Record<string, unknown>)) {
+      // Extract the actual option from __lv wrapper and sanitize to LV
+      return sanitizeOption(((rawValue as Record<string, unknown>).__lv) as T);
+    } else if (!isOptionWithLabel(rawValue)) {
       const lvOptions = selectOptions?.[0] && isOptionWithLabel(selectOptions[0]);
       if (lvOptions) {
         for (const item of selectOptions) {
           if (item.value === rawValue) {
-            ret = item;
-            break;
+            return item;
           }
         }
       } else {
-        ret = {
-          label: String(rawValue),
-          value: rawValue,
-        }
+        return sanitizeOption(rawValue as T);
       }
     }
 
-    return ret;
+    return null;
   }, [
     rawValue,
     selectOptions,