Adding support for oauthAppId in connect-react

dannyroosevelt · dannyroosevelt · commit a135d403aca3 · 2025-06-13T12:10:00.000-07:00
And patching Discord sentViaPipedream prop label and handling
diff --git a/components/discord/actions/common/common.mjs b/components/discord/actions/common/common.mjs
@@ -66,7 +66,16 @@ export default {
     },
     getSentViaPipedreamText() {
       const workflowId = process.env.PIPEDREAM_WORKFLOW_ID;
-      return `Sent via [Pipedream](<https://pipedream.com/@/${workflowId}?o=a&a=discord>)`;
+      const baseLink = "https://pipedream.com";
+      const linkText = !workflowId
+        ? "Pipedream Connect"
+        : "Pipedream";
+
+      const link = !workflowId
+        ? `${baseLink}/connect`
+        : `${baseLink}/@/${workflowId}?o=a&a=discord`;
+
+      return `Sent via [${linkText}](<${link}>)`;
     },
     getMessageFlags(suppressNotifications) {
       let flags = 0;
diff --git a/components/discord/actions/send-message-advanced/send-message-advanced.mjs b/components/discord/actions/send-message-advanced/send-message-advanced.mjs
@@ -6,7 +6,7 @@ export default {
   key: "discord-send-message-advanced",
   name: "Send Message (Advanced)",
   description: "Send a simple or structured message (using embeds) to a Discord channel",
-  version: "1.0.2",
+  version: "1.0.3",
   type: "action",
   props: {
     ...common.props,
diff --git a/components/discord/actions/send-message-with-file/send-message-with-file.mjs b/components/discord/actions/send-message-with-file/send-message-with-file.mjs
@@ -8,7 +8,7 @@ export default {
   key: "discord-send-message-with-file",
   name: "Send Message With File",
   description: "Post a message with an attached file",
-  version: "1.1.1",
+  version: "1.1.2",
   type: "action",
   props: {
     ...common.props,
diff --git a/components/discord/actions/send-message/send-message.mjs b/components/discord/actions/send-message/send-message.mjs
@@ -5,7 +5,7 @@ export default {
   key: "discord-send-message",
   name: "Send Message",
   description: "Send a simple message to a Discord channel",
-  version: "1.0.2",
+  version: "1.0.3",
   type: "action",
   async run({ $ }) {
     const {
diff --git a/components/discord/discord.app.mjs b/components/discord/discord.app.mjs
@@ -11,8 +11,8 @@ export default {
       type: "boolean",
       optional: true,
       default: true,
-      label: "Include link to workflow",
-      description: "Defaults to `true`, includes a link to this workflow at the end of your Discord message.",
+      label: "Include link to Pipedream",
+      description: "Defaults to `true`, includes a link to Pipedream at the end of your Discord message.",
     },
     embeds: {
       type: "any",
diff --git a/components/discord/package.json b/components/discord/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/discord",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Pipedream Discord Components",
   "main": "discord.app.mjs",
   "keywords": [
diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md
@@ -2,6 +2,26 @@
 
 # Changelog
 
+# [1.3.1] - 2025-06-13
+
+## Added
+
+- Support for `oauthAppId` parameter in `ComponentForm` and `ComponentFormContainer` components
+- Pass `oauthAppId` through to `ControlApp` component for OAuth app-specific account connections
+
+## Usage
+
+```typescript
+<ComponentForm
+  externalUserId="user123"
+  component={component}
+  oauthAppId="your-oauth-app-id"  // New optional prop
+  // ... other props
+/>
+```
+
+This allows you to specify which OAuth app to use when connecting accounts, matching the behavior of the SDK's `connectAccount` method.
+
 # [1.3.0] - 2025-06-10
 
 ## Added
diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"
diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx
@@ -29,6 +29,10 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   hideOptionalProps?: boolean;
   sdkResponse?: unknown | undefined;
   enableDebugging?: boolean;
+  /**
+   * The OAuth app ID to use when connecting accounts for app props.
+   */
+  oauthAppId?: string;
 } & (
   | { externalUserId: string; userId?: never }
   | { userId: string; externalUserId?: never }
diff --git a/packages/connect-react/src/components/Control.tsx b/packages/connect-react/src/components/Control.tsx
@@ -74,7 +74,7 @@ export function Control<T extends ConfigurableProps, U extends ConfigurableProp>
   // case "any":
   //   return <ControlAny />
   case "app":
-    return <ControlApp app={app!} />;
+    return <ControlApp app={app!} oauthAppId={field.extra.oauthAppId} />;
   case "boolean":
     return <ControlBoolean />;
   case "string":
diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
@@ -25,9 +25,10 @@ const BaseOption = (props: OptionProps<AppResponse>) => {
 
 type ControlAppProps = {
   app: AppResponse;
+  oauthAppId?: string;
 };
 
-export function ControlApp({ app }: ControlAppProps) {
+export function ControlApp({ app, oauthAppId }: ControlAppProps) {
   const client = useFrontendClient();
   const { externalUserId } = useFormContext();
   const formFieldCtx = useFormFieldContext<ConfigurablePropApp>();
@@ -67,15 +68,14 @@ export function ControlApp({ app }: ControlAppProps) {
   };
   const selectProps =  select.getProps("controlAppSelect", baseSelectProps);
 
-  const oauthAppId = undefined; // XXX allow customizing
   const {
     isLoading: isLoadingAccounts,
     // TODO error
     accounts,
     refetch: refetchAccounts,
   } = useAccounts(
     {
-      externalUserId,
+      external_user_id: externalUserId,
       app: app.name_slug,
       oauth_app_id: oauthAppId,
     },
diff --git a/packages/connect-react/src/components/InternalField.tsx b/packages/connect-react/src/components/InternalField.tsx
@@ -15,7 +15,7 @@ export function InternalField<T extends ConfigurableProp>({
 }: FieldInternalProps<T>) {
   const formCtx = useFormContext();
   const {
-    id: formId, configuredProps, registerField, setConfiguredProp, errors, enableDebugging,
+    id: formId, configuredProps, registerField, setConfiguredProp, errors, enableDebugging, oauthAppId,
   } = formCtx;
 
   const appSlug = prop.type === "app" && "app" in prop
@@ -43,6 +43,7 @@ export function InternalField<T extends ConfigurableProp>({
     },
     extra: {
       app, // XXX fix ts
+      oauthAppId,
     },
     errors,
     enableDebugging,
diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx
@@ -44,6 +44,7 @@ export type FormContext<T extends ConfigurableProps> = {
   /** @deprecated Use externalUserId instead */
   userId: string;
   enableDebugging?: boolean;
+  oauthAppId?: string;
 };
 
 export const skippablePropTypes = [
@@ -80,7 +81,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, externalUserId, userId, sdkResponse, enableDebugging,
+    component, configuredProps: __configuredProps, propNames, externalUserId, userId, sdkResponse, enableDebugging, oauthAppId,
   } = formProps;
 
   // Resolve user ID with deprecation warning
@@ -593,6 +594,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     submitting,
     sdkErrors,
     enableDebugging,
+    oauthAppId,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };
diff --git a/packages/connect-react/src/hooks/form-field-context.tsx b/packages/connect-react/src/hooks/form-field-context.tsx
@@ -7,6 +7,7 @@ import type {
 
 export type FormFieldContextExtra<T extends ConfigurableProp> = T extends ConfigurablePropApp ? {
   app?: AppResponse;
+  oauthAppId?: string;
 } : Record<string, never>;
 
 export type FormFieldContext<T extends ConfigurableProp> = {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@pipedream/discord",`
`3`		`- "version": "1.2.4",`
	`3`	`+ "version": "1.2.5",`
`4`	`4`	`"description": "Pipedream Discord Components",`
`5`	`5`	`"main": "discord.app.mjs",`
`6`	`6`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@pipedream/connect-react",`
`3`		`- "version": "1.3.0",`
	`3`	`+ "version": "1.3.1",`
`4`	`4`	`"description": "Pipedream Connect library for React",`
`5`	`5`	`"files": [`
`6`	`6`	`"dist"`