diff --git a/connect-react-demo/app/components/ConfigPanel.tsx b/connect-react-demo/app/components/ConfigPanel.tsx index ebbf370..cc66684 100644 --- a/connect-react-demo/app/components/ConfigPanel.tsx +++ b/connect-react-demo/app/components/ConfigPanel.tsx @@ -227,6 +227,10 @@ export const ConfigPanel = () => { const id2 = useId(); const isValidWebhookUrl = () => { + if (!webhookUrl) { + return false + } + try { new URL(webhookUrl); } catch { @@ -252,10 +256,10 @@ export const ConfigPanel = () => { {selectedComponentType === "trigger" && ( { setWebhookUrl(e.target.value) }} placeholder="Enter a webhook URL to receive emitted events" - className={`w-full px-3 py-1.5 text-sm font-mono ${isValidWebhookUrl() ? "" : "border-2 border-red-500"} rounded bg-zinc-50/50`} + className={`w-full px-3 py-1.5 text-sm font-mono border-2 ${isValidWebhookUrl() ? "" : "border-red-500"} rounded bg-zinc-50/50`} /> )} @@ -394,10 +398,10 @@ export const ConfigPanel = () => {
  1. Configure the trigger and define a webhookUrl to receive events (use a{' '} - RequestBin diff --git a/connect-react-demo/app/components/DemoPanel.tsx b/connect-react-demo/app/components/DemoPanel.tsx index a255ff4..141939d 100644 --- a/connect-react-demo/app/components/DemoPanel.tsx +++ b/connect-react-demo/app/components/DemoPanel.tsx @@ -1,4 +1,4 @@ -import {ComponentForm, CustomizeProvider, useFrontendClient} from "@pipedream/connect-react" +import { ComponentForm, CustomizeProvider, useFrontendClient } from "@pipedream/connect-react" import { ScrollArea } from "@/components/ui/scroll-area" import { useAppState } from "@/lib/app-state" import { PageSkeleton } from "./PageSkeleton" @@ -26,6 +26,11 @@ export const DemoPanel = () => { setDynamicPropsId, ] = useState(); + const [ + sdkErrors, + setSdkErrors, + ] = useState(undefined); + const handleDynamicProps = (dynamicProps: { id: string | undefined }) => { setDynamicPropsId(dynamicProps.id) } @@ -148,28 +153,40 @@ export const DemoPanel = () => { configuredProps={configuredProps} onUpdateConfiguredProps={setConfiguredProps} onUpdateDynamicProps={handleDynamicProps} + sdkErrors={sdkErrors} + enableDebugging={true} onSubmit={async () => { setActionRunOutput(undefined) if (selectedComponentType === "action") { - const data = await frontendClient.actionRun({ - userId, - actionId: component.key, - configuredProps, - dynamicPropsId - }) - setActionRunOutput(data) + try { + const data = await frontendClient.actionRun({ + userId, + actionId: component.key, + configuredProps, + dynamicPropsId + }) + setActionRunOutput(data) + setSdkErrors(data) + } catch (e) { + setSdkErrors(e) + } } else if (selectedComponentType === "trigger") { if (!webhookUrl) { throw new Error("webhookUrl is required") } - const data = await frontendClient.deployTrigger({ - userId, - triggerId: component.key, - configuredProps, - webhookUrl, - dynamicPropsId, - }) - setActionRunOutput(data) + try { + const data = await frontendClient.deployTrigger({ + userId, + triggerId: component.key, + configuredProps, + webhookUrl, + dynamicPropsId, + }) + setActionRunOutput(data) + setSdkErrors(data) + } catch (e) { + setSdkErrors(e) + } } }} /> diff --git a/connect-react-demo/lib/backend-client.ts b/connect-react-demo/lib/backend-client.ts index 7db884f..4be58fc 100644 --- a/connect-react-demo/lib/backend-client.ts +++ b/connect-react-demo/lib/backend-client.ts @@ -5,11 +5,13 @@ import { env } from "@/lib/env"; export const backendClient = () => { return createBackendClient({ + apiHost: env.PIPEDREAM_API_HOST, environment: env.PIPEDREAM_PROJECT_ENVIRONMENT, projectId: env.PIPEDREAM_PROJECT_ID, credentials: { clientId: env.PIPEDREAM_CLIENT_ID, clientSecret: env.PIPEDREAM_CLIENT_SECRET, }, + workflowDomain: env.PIPEDREAM_WORKFLOW_DOMAIN, }) -} \ No newline at end of file +} diff --git a/connect-react-demo/lib/env.ts b/connect-react-demo/lib/env.ts index a204e2e..49be85f 100644 --- a/connect-react-demo/lib/env.ts +++ b/connect-react-demo/lib/env.ts @@ -25,6 +25,11 @@ const envSchema = z.object({ ) ), + // Optional environment variables, useful for different environments (e.g. + // local development, production, etc.). + PIPEDREAM_API_HOST: z.optional(z.string().default("api.pipedream.com")), + PIPEDREAM_WORKFLOW_DOMAIN: z.optional(z.string().default("m.pipedream.net")), + // Datadog DD_APPLICATION_ID: z.optional(z.string()), DD_CLIENT_TOKEN: z.optional(z.string()), diff --git a/connect-react-demo/package.json b/connect-react-demo/package.json index cb2fcdc..2ea07c3 100644 --- a/connect-react-demo/package.json +++ b/connect-react-demo/package.json @@ -1,6 +1,6 @@ { "name": "connect-react-demo", - "version": "0.1.6", + "version": "0.1.7", "private": true, "scripts": { "dev": "next dev", @@ -9,8 +9,8 @@ "lint": "next lint" }, "dependencies": { - "@pipedream/connect-react": "^1.0.0-preview.27", - "@pipedream/sdk": "^1.2.1", + "@pipedream/connect-react": "^1.0.0-preview.28", + "@pipedream/sdk": "^1.3.3", "@radix-ui/react-collapsible": "^1.1.1", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-navigation-menu": "^1.2.1", diff --git a/connect-react-demo/pnpm-lock.yaml b/connect-react-demo/pnpm-lock.yaml index 22bcbf8..918f574 100644 --- a/connect-react-demo/pnpm-lock.yaml +++ b/connect-react-demo/pnpm-lock.yaml @@ -6,11 +6,11 @@ settings: dependencies: '@pipedream/connect-react': - specifier: ^1.0.0-preview.27 - version: 1.0.0-preview.27(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + specifier: ^1.0.0-preview.28 + version: 1.0.0-preview.28(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@pipedream/sdk': - specifier: ^1.2.1 - version: 1.2.1 + specifier: ^1.3.3 + version: 1.3.3 '@radix-ui/react-collapsible': specifier: ^1.1.1 version: 1.1.1(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) @@ -327,38 +327,6 @@ packages: resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} dev: false - /@hapi/boom@10.0.1: - resolution: {integrity: sha512-ERcCZaEjdH3OgSJlyjVk8pHIFeus91CjKP3v+MpgBNp5IvGzP2l/bRiD78nqYcKPaZdbKkK5vDBVPd2ohHBlsA==} - dependencies: - '@hapi/hoek': 11.0.7 - dev: false - - /@hapi/bourne@3.0.0: - resolution: {integrity: sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==} - dev: false - - /@hapi/hoek@11.0.7: - resolution: {integrity: sha512-HV5undWkKzcB4RZUusqOpcgxOaq6VOAH7zhhIr2g3G8NF/MlFO75SjOr2NfuSx0Mh40+1FqCkagKLJRykUWoFQ==} - dev: false - - /@hapi/hoek@9.3.0: - resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==} - dev: false - - /@hapi/topo@5.1.0: - resolution: {integrity: sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==} - dependencies: - '@hapi/hoek': 9.3.0 - dev: false - - /@hapi/wreck@18.1.0: - resolution: {integrity: sha512-0z6ZRCmFEfV/MQqkQomJ7sl/hyxvcZM7LtuVqN3vdAO4vM9eBbowl0kaqQj9EJJQab+3Uuh1GxbGIBFy4NfJ4w==} - dependencies: - '@hapi/boom': 10.0.1 - '@hapi/bourne': 3.0.0 - '@hapi/hoek': 11.0.7 - dev: false - /@isaacs/cliui@8.0.2: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -505,13 +473,13 @@ packages: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 - /@pipedream/connect-react@1.0.0-preview.27(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): - resolution: {integrity: sha512-yL8g2dgwMPXsxiCDmEMInGvFL7vQXXz7BqSJwwoU+SvxHgR2UA2i9S41IZO8yetOq9wL8h59GGlCgW5KOjQAuQ==} + /@pipedream/connect-react@1.0.0-preview.28(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-vHgTp2mEt9pyl8ctnC/ZmvrFzqr50cfusrydQT3v8fZyK3Y7L1Gj+491zJUTqC0D9AZsCA8TJsh0f/9C9MI5Vw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@pipedream/sdk': 1.2.1 + '@pipedream/sdk': 1.3.3 '@tanstack/react-query': 5.62.16(react@18.0.0) lodash.isequal: 4.5.0 react: 18.0.0 @@ -525,17 +493,16 @@ packages: - utf-8-validate dev: false - /@pipedream/sdk@1.2.1: - resolution: {integrity: sha512-1d4pSfCwF6Ksaq2gPGrH6IKIYc2Thb8SB7xnayZ9s+12XqcWPkFQa8qoxBAanSeQGYQgBbGbNwtKbtNlaBLVvw==} + /@pipedream/sdk@1.3.3: + resolution: {integrity: sha512-sh0dZWdQlh7IprVs1Ka04+jMmpwTKf5SlyvaAJFmSbcvJ7So1fj/YLuU3BMXU91ehA1R6DGb66Yr+QzBsANcSA==} engines: {node: '>=18.0.0'} dependencies: '@rails/actioncable': 8.0.0 commander: 12.1.0 - simple-oauth2: 5.1.0 + oauth4webapi: 3.1.4 ws: 8.18.0 transitivePeerDependencies: - bufferutil - - supports-color - utf-8-validate dev: false @@ -1243,20 +1210,6 @@ packages: resolution: {integrity: sha512-9IXyJeaBggOzlD3pF4/yWELdyUWZm/KTyKBRqxNf9laLBXPqxJt3t6fO+X4s0WajMR8cIhzkxvq1gxsXVbn3LA==} dev: false - /@sideway/address@4.1.5: - resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==} - dependencies: - '@hapi/hoek': 9.3.0 - dev: false - - /@sideway/formula@3.0.1: - resolution: {integrity: sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==} - dev: false - - /@sideway/pinpoint@2.0.0: - resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==} - dev: false - /@swc/counter@0.1.3: resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} dev: false @@ -2234,16 +2187,6 @@ packages: resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==} hasBin: true - /joi@17.13.3: - resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==} - dependencies: - '@hapi/hoek': 9.3.0 - '@hapi/topo': 5.1.0 - '@sideway/address': 4.1.5 - '@sideway/formula': 3.0.1 - '@sideway/pinpoint': 2.0.0 - dev: false - /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} dev: false @@ -2720,6 +2663,10 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + /oauth4webapi@3.1.4: + resolution: {integrity: sha512-eVfN3nZNbok2s/ROifO0UAc5G8nRoLSbrcKJ09OqmucgnhXEfdIQOR4gq1eJH1rN3gV7rNw62bDEgftsgFtBEg==} + dev: false + /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -3208,17 +3155,6 @@ packages: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} - /simple-oauth2@5.1.0: - resolution: {integrity: sha512-gWDa38Ccm4MwlG5U7AlcJxPv3lvr80dU7ARJWrGdgvOKyzSj1gr3GBPN1rABTedAYvC/LsGYoFuFxwDBPtGEbw==} - dependencies: - '@hapi/hoek': 11.0.7 - '@hapi/wreck': 18.1.0 - debug: 4.3.7 - joi: 17.13.3 - transitivePeerDependencies: - - supports-color - dev: false - /source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'}