Refactor and cleanup

Author: dannyroosevelt

components/discord/sources/message-deleted/message-deleted.mjs

@@ -4,7 +4,7 @@ export default {
   key: "discord-message-deleted",
   name: "Message Deleted (Instant)",
   description: "Emit new event for each message deleted",
-  version: "0.0.3",
+  version: "0.0.4",
   dedupe: "unique",
   type: "source",
   props: {

components/discord/sources/new-command-received/new-command-received.mjs

@@ -6,7 +6,7 @@ export default {
   key: "discord-new-command-received",
   name: "New Command Received (Instant)",
   description: "Emit new event for each command posted to one or more channels in a Discord server",
-  version: "0.0.3",
+  version: "0.0.4",
   dedupe: "unique",
   props: {
     discord,

components/discord/sources/new-guild-member/new-guild-member.mjs

@@ -4,7 +4,7 @@ export default {
   key: "discord-new-guild-member",
   name: "New Guild Member (Instant)",
   description: "Emit new event for each new member added to a guild",
-  version: "0.0.3",
+  version: "0.0.4",
   dedupe: "unique",
   type: "source",
   props: {

components/discord/sources/new-message/new-message.mjs

@@ -6,7 +6,7 @@ export default {
   key: "discord-new-message",
   name: "New Message (Instant)",
   description: "Emit new event for each message posted to one or more channels in a Discord server",
-  version: "1.0.3",
+  version: "1.0.4",
 
   dedupe: "unique",
   props: {

components/discord/sources/reaction-added/reaction-added.mjs

@@ -4,7 +4,7 @@ export default {
   key: "discord-reaction-added",
   name: "Reaction Added (Instant)",
   description: "Emit new event for each reaction added to a message",
-  version: "0.0.3",
+  version: "0.0.4",
   type: "source",
   props: {
     discord,

packages/connect-react/README.md

@@ -97,7 +97,7 @@ export default function Page() {
       <div>My application</div>
       <FrontendClientProvider client={client}>
         <ComponentFormContainer
-          userId={userId}
+          externalUserId={userId}
           componentKey="slack-send-message"
           configuredProps={configuredProps}
           onUpdateConfiguredProps={setConfiguredProps}
@@ -137,25 +137,51 @@ type ComponentFormContainerProps = {
 type ComponentFormProps = {
   component: typeof import("@pipedream/sdk").V1Component;
   /** External user configuring the form */
-  userId: string;
+  externalUserId: string;
+  /** @deprecated Use externalUserId instead */
+  userId?: string;
   /** Form configured values */
   configuredProps?: Record<string, any>;
   /** Filtering configurable props */
   propNames?: string[];
   /** Shows submit button + callback when clicked */
-  onSubmit: (ctx: FormContext) => Awaitable<void>;
+  onSubmit?: (ctx: FormContext) => Awaitable<void>;
   /** To control and store configured values on form updates, can be used to call actionRun or triggerDeploy */
-  onUpdateConfiguredProps: (v: Record<string, any>) => void;
+  onUpdateConfiguredProps?: (v: Record<string, any>) => void;
   /** Hide optional props section */
-  hideOptionalProps: boolean;
+  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. */
+  sdkResponse?: unknown[] | unknown | undefined;
+  /** Whether to show errors in the form. Requires sdkResponse to be set. */
   enableDebugging?: boolean;
+  /** Optional OAuth app ID for app-specific account connections */
+  oauthAppId?: string;
 };
 ```
 
+## OAuth Configuration
+
+By default, apps use Pipedream OAuth clients. To configured your own, refer to the docs [here](https://pipedream.com/docs/connect/managed-auth/oauth-clients).
+
+### Using a custom OAuth client
+
+1. Create an OAuth app in your target service (e.g., Slack, Google, etc.)
+2. Configure the client in Pipedream ([refer to the docs](https://pipedream.com/docs/connect/managed-auth/oauth-clients))
+3. Use the `oauthAppId` prop to specify which OAuth client to use for account connections
+
+```typescript
+<ComponentFormContainer
+  externalUserId={userId}
+  componentKey="slack-send-message-to-channel"
+  configuredProps={configuredProps}
+  onUpdateConfiguredProps={setConfiguredProps}
+  oauthAppId="your-custom-oauth-app-id" // oa_xxxxxxx
+/>
+```
+
+When `oauthAppId` is provided, all app connections within that component form will use your specified OAuth app instead of Pipedream's default.
+
 ## Customization
 
 Style individual components using the `CustomizeProvider` and a `CustomizationConfig`.
@@ -164,7 +190,8 @@ Style individual components using the `CustomizeProvider` and a `CustomizationCo
 <FrontendClientProvider client={client}>
   <CustomizeProvider {...customizationConfig}>
     <ComponentFormContainer
-      key="slack-send-message"
+      externalUserId={userId}
+      componentKey="slack-send-message"
       configuredProps={configuredProps}
       onUpdateConfiguredProps={setConfiguredProps}
     />

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

@@ -8,6 +8,7 @@ import type {
   V1Component,
 } from "@pipedream/sdk";
 import { InternalComponentForm } from "./InternalComponentForm";
+import { OAuthAppProvider } from "../hooks/oauth-app-context";
 
 export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<T>> = {
   /**
@@ -30,18 +31,19 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   sdkResponse?: unknown | undefined;
   enableDebugging?: boolean;
   /**
-   * The OAuth app ID to use when connecting accounts for app props.
+   * Optional OAuth app ID for app-specific account connections
    */
   oauthAppId?: string;
-} & (
-  | { externalUserId: string; userId?: never }
-  | { userId: string; externalUserId?: never }
-);
+};
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {
+  const { oauthAppId, ...formProps } = props;
+  
   return (
-    <FormContextProvider props={props}>
-      <InternalComponentForm />
-    </FormContextProvider>
+    <OAuthAppProvider oauthAppId={oauthAppId}>
+      <FormContextProvider props={formProps}>
+        <InternalComponentForm />
+      </FormContextProvider>
+    </OAuthAppProvider>
   );
 }

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

@@ -37,5 +37,6 @@ export function ComponentFormContainer<T extends ConfigurableProps>(props: Compo
   }
 
   // TODO move / improve lib.ts and make sure V1Component and it match / are shared
-  return <ComponentForm component={component} {...props} />;
+  const { componentKey, ...componentFormProps } = props;
+  return <ComponentForm component={component} {...componentFormProps} />;
 }

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!} oauthAppId={field.extra.oauthAppId} />;
+    return <ControlApp app={app!} />;
   case "boolean":
     return <ControlBoolean />;
   case "string":

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

@@ -4,6 +4,7 @@ import { useAccounts } from "../hooks/use-accounts";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import { useFormContext } from "../hooks/form-context";
 import { useCustomize } from "../hooks/customization-context";
+import { useOAuthAppContext } from "../hooks/oauth-app-context";
 import type { BaseReactSelectProps } from "../hooks/customization-context";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
@@ -25,12 +26,12 @@ const BaseOption = (props: OptionProps<AppResponse>) => {
 
 type ControlAppProps = {
   app: AppResponse;
-  oauthAppId?: string;
 };
 
-export function ControlApp({ app, oauthAppId }: ControlAppProps) {
+export function ControlApp({ app }: ControlAppProps) {
   const client = useFrontendClient();
   const { externalUserId } = useFormContext();
+  const { oauthAppId } = useOAuthAppContext();
   const formFieldCtx = useFormFieldContext<ConfigurablePropApp>();
   const {
     id, prop, value, onChange,