Pipedream v2 migration (#1710)

Author: csansoon

apps/web/package.json

@@ -34,7 +34,7 @@
     "@monaco-editor/react": "4.6.0",
     "@napi-rs/canvas": "0.1.68",
     "@pilcrowjs/object-parser": "0.0.4",
-    "@pipedream/sdk": "^1.6.9",
+    "@pipedream/sdk": "^2.0.0",
     "@sentry/nextjs": "9.10.1",
     "@sindresorhus/slugify": "2.2.1",
     "@t3-oss/env-nextjs": "0.10.1",

apps/web/src/actions/integrations/pipedream/createToken.ts

@@ -1,12 +1,21 @@
 'use server'
 
+import { z } from 'zod'
 import { authProcedure } from '../../procedures'
 import { createConnectToken } from '@latitude-data/core/services/integrations/pipedream/createConnectToken'
 
 export const createPipedreamTokenAction = authProcedure
   .createServerAction()
-  .handler(async ({ ctx }) => {
-    return createConnectToken({ workspace: ctx.workspace }).then((r) =>
-      r.unwrap(),
-    )
+  .input(
+    z.object({
+      externalUserId: z.string(),
+    }),
+  )
+  .handler(async ({ input, ctx }) => {
+    const { externalUserId } = input
+
+    return createConnectToken({
+      workspace: ctx.workspace,
+      externalUserId,
+    }).then((r) => r.unwrap())
   })

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/preview/@modal/(.)triggers/new/_components/IntegrationsList/index.tsx

@@ -63,19 +63,19 @@ export function IntegrationsList({
 
     const availableApps: SearchableOptionItem<TriggerIntegrationType>[] =
       pipedreamApps
-        .filter((app) => !connectedSlugs[app.name_slug])
+        .filter((app) => !connectedSlugs[app.nameSlug])
         .map(
           (app) =>
             ({
               type: 'item',
-              value: app.name_slug,
-              keywords: [app.name, app.name_slug],
+              value: app.nameSlug,
+              keywords: [app.name, app.nameSlug],
               metadata: { type: DocumentTriggerType.Integration },
               title: app.name,
-              description: `${app.triggerCount} triggers`,
+              description: `${app.triggers.length} triggers`,
               imageIcon: {
                 type: 'image',
-                src: app.img_src,
+                src: app.imgSrc,
                 alt: app.name,
               },
             }) satisfies SearchableOptionItem<TriggerIntegrationType>,

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/preview/@modal/(.)triggers/new/_components/TriggerTypes/PipedreamTrigger/TriggerConfiguration/ConnectAccount/PipedreamConnect/index.tsx

@@ -56,14 +56,14 @@ export function PipedreamConnect({
       const [integration, createError] = await create({
         type: IntegrationType.Pipedream,
         configuration: {
-          appName: app.name_slug,
+          appName: app.nameSlug,
           connectionId,
           externalUserId,
-          authType: app.auth_type,
+          authType: app.authType ?? 'none',
           oauthAppId: app.id,
           metadata: {
             displayName: app.name,
-            imageUrl: app.img_src,
+            imageUrl: app.imgSrc,
           },
         },
         name: integrationName,

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/preview/@modal/(.)triggers/new/_components/TriggerTypes/PipedreamTrigger/TriggerConfiguration/ConnectAccount/index.tsx

@@ -45,7 +45,7 @@ export function ConnectAccount({
 }) {
   const [showConnect, setShowConnect] = useState(false)
   const { options, accounts, isLoading } = useConnectedPipedreamAccounts({
-    pipedreamSlug: pipedreamApp.name_slug,
+    pipedreamSlug: pipedreamApp.nameSlug,
   })
   const onSelectAccount = useCallback(
     (accountId: number) => {

apps/web/src/app/(private)/settings/_components/Integrations/New/_components/Configuration/Pipedream.tsx

@@ -30,14 +30,14 @@ export const PipedreamIntegrationConfiguration = forwardRef<{
         return {
           type: IntegrationType.Pipedream,
           configuration: {
-            appName: app.name_slug,
+            appName: app.nameSlug,
             connectionId,
             externalUserId,
-            authType: app.auth_type,
+            authType: app.authType ?? 'none',
             oauthAppId: app.id,
             metadata: {
               displayName: app.name,
-              imageUrl: app.img_src,
+              imageUrl: app.imgSrc,
             },
           },
         }

apps/web/src/app/(private)/settings/_components/Integrations/New/_components/Configuration/Pipedream/AppCard.tsx

@@ -98,7 +98,7 @@ function AppComponentsCard<C extends PipedreamComponentType>({
 
 function AppComponents({ app }: { app: App }) {
   const { data, isLoading: isLoadingPipedreamApp } = usePipedreamApp(
-    app.name_slug,
+    app.nameSlug,
   )
   const isLoading = isLoadingPipedreamApp
 
@@ -149,7 +149,7 @@ export function PipedreamAppCard({ app }: { app: App | undefined }) {
     <div className='w-full flex flex-col gap-4 border border-border p-4 rounded-lg'>
       <div className='flex gap-2 items-center'>
         <Image
-          src={app.img_src}
+          src={app.imgSrc}
           alt={app.name}
           width={24}
           height={24}

apps/web/src/app/(private)/settings/_components/Integrations/New/_components/Configuration/Pipedream/AppSelector.tsx

@@ -56,12 +56,12 @@ export function AppSelector({
       onChange={onChange}
       fetch={fetchOptions}
       serialize={(app: App) => ({
-        value: app.name_slug,
+        value: app.nameSlug,
         label: app.name,
         description: app.description,
         icon: (
           <Image
-            src={app.img_src}
+            src={app.imgSrc}
             alt={app.name}
             width={16}
             height={16}

apps/web/src/components/Pipedream/PipedreamPropsForm.tsx

@@ -7,10 +7,14 @@ import {
 import { SwitchToggle } from '@latitude-data/web-ui/atoms/Switch'
 import { Text } from '@latitude-data/web-ui/atoms/Text'
 import { cn } from '@latitude-data/web-ui/utils'
-import {
+import type {
   ConfigurableProp,
+  ConfigurablePropAlert,
   ConfigurablePropBoolean,
+  ConfigurablePropInteger,
+  ConfigurablePropIntegerArray,
   ConfigurableProps,
+  ConfigurablePropStringArray,
   ConfiguredProps,
 } from '@pipedream/sdk/browser'
 import DynamicPipedreamProp, { isDynamicProp } from './Props/DynamicProp'
@@ -19,13 +23,14 @@ import { Alert } from '@latitude-data/web-ui/atoms/Alert'
 import { AlertProps } from '@latitude-data/web-ui/atoms/Alert/Primitives'
 import PipedreamTimerProp from './Props/TimerProp'
 import ArrayPipedreamProp from './Props/ArrayProp'
+import type {
+  ConfigurablePropAlertType,
+  ConfigurablePropTimer,
+} from '@pipedream/sdk'
 
 type Defined<T> = Exclude<T, undefined | null>
-type AlertType = Defined<
-  Extract<ConfigurableProp, { type: 'alert' }>['alertType']
->
 type AlertVariant = Defined<AlertProps['variant']>
-const ALERT_VARIANTS: Record<AlertType, AlertVariant> = {
+const ALERT_VARIANTS: Record<ConfigurablePropAlertType, AlertVariant> = {
   info: 'default',
   neutral: 'default',
   warning: 'warning',
@@ -159,7 +164,7 @@ function PipedreamPropsForm({
   if (prop.type === 'boolean') {
     return (
       <BooleanPipedreamProp
-        prop={prop}
+        prop={prop as ConfigurablePropBoolean}
         value={value}
         setValue={setValue}
         disabled={disabled}
@@ -178,16 +183,26 @@ function PipedreamPropsForm({
         description={prop.description}
         type={prop.type === 'string' ? 'text' : 'number'}
         disabled={disabled || prop.disabled}
-        min={prop.type === 'integer' ? prop.min : undefined}
-        max={prop.type === 'integer' ? prop.max : undefined}
+        min={
+          prop.type === 'integer'
+            ? (prop as ConfigurablePropInteger).min
+            : undefined
+        }
+        max={
+          prop.type === 'integer'
+            ? (prop as ConfigurablePropInteger).max
+            : undefined
+        }
       />
     )
   }
 
   if (prop.type === 'string[]' || prop.type === 'integer[]') {
     return (
       <ArrayPipedreamProp
-        prop={prop}
+        prop={
+          prop as ConfigurablePropStringArray | ConfigurablePropIntegerArray
+        }
         type={prop.type === 'string[]' ? 'text' : 'number'}
         value={value}
         setValue={setValue}
@@ -199,8 +214,10 @@ function PipedreamPropsForm({
   if (prop.type === 'alert') {
     return (
       <Alert
-        variant={ALERT_VARIANTS[prop.alertType ?? 'info']}
-        description={prop.content}
+        variant={
+          ALERT_VARIANTS[(prop as ConfigurablePropAlert).alertType ?? 'info']
+        }
+        description={(prop as ConfigurablePropAlert).content}
       />
     )
   }
@@ -209,7 +226,7 @@ function PipedreamPropsForm({
     return (
       <PipedreamTimerProp
         integration={integration}
-        prop={prop}
+        prop={prop as ConfigurablePropTimer}
         component={component}
         configuredProps={configuredProps}
         value={value}

apps/web/src/components/Pipedream/Props/ArrayProp.tsx

@@ -1,10 +1,11 @@
-import {
+import type {
   ConfigurablePropIntegerArray,
   ConfigurablePropStringArray,
 } from '@pipedream/sdk/browser'
 import { MultipleInput } from '@latitude-data/web-ui/molecules/MultipleInput'
 import { MultiSelect } from '@latitude-data/web-ui/molecules/MultiSelect'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
+import { getPropOptions } from '@latitude-data/core/browser'
 
 export default function ArrayPipedreamProp<
   T extends 'text' | 'number' = 'text',
@@ -27,7 +28,9 @@ export default function ArrayPipedreamProp<
     return value.map((v) => String(v))
   })
 
-  if (prop.options) {
+  const options = useMemo(() => getPropOptions(prop), [prop])
+
+  if (options) {
     return (
       <MultiSelect
         label={prop.label ?? prop.name}
@@ -36,15 +39,10 @@ export default function ArrayPipedreamProp<
           if (type === 'text') return newValues
           return newValues.map((v) => Number(v)) as V[]
         }}
-        options={prop.options.map((option) => {
-          if (typeof option === 'object') {
-            return {
-              label: option.label,
-              value: String(option.value),
-            }
-          }
-          return { label: String(option), value: String(option) }
-        })}
+        options={Object.entries(options).map(([label, value]) => ({
+          label,
+          value,
+        }))}
         defaultValue={initialValue}
         required={!prop.optional}
         disabled={disabled || prop.disabled}