Je/connect react triggers (#14985)

* some progress, need to add apphook support

* cleanup

* .

* remove

* linting

* package.json

* lock

* add timer to skips for now

* don't need to remove apphook

* changelog and package.json updates

* Don't need this since we're punting on the timer control for now

* fix

* lock

Author: jsendo

components/boldsign/boldsign.app.mjs

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

components/callerapi/callerapi.app.mjs

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

components/calllerapi/calllerapi.app.mjs

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

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,10 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.13] - 2024-12-17
+
+- Added skippable prop types to support triggers
+
 # [1.0.0-preview.12] - 2024-12-13
 
 - Don't throw when validating unexpected values from the api

packages/connect-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.12",
+  "version": "1.0.0-preview.13",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

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

@@ -1,6 +1,9 @@
 import { FormContext } from "../hooks/form-context";
 import { FormFieldContext } from "../hooks/form-field-context";
-import { ConfigurableProp, ConfigurableProps } from "@pipedream/sdk";
+import {
+  ConfigurableProp,
+  ConfigurableProps,
+} from "@pipedream/sdk";
 // import { ControlAny } from "./ControlAny"
 import { ControlApp } from "./ControlApp";
 import { ControlBoolean } from "./ControlBoolean";

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

@@ -3,7 +3,10 @@ import type {
   CSSProperties, FormEventHandler,
 } from "react";
 import { useCustomize } from "../hooks/customization-context";
-import { useFormContext } from "../hooks/form-context";
+import {
+  useFormContext,
+  skippablePropTypes,
+} from "../hooks/form-context";
 import { InternalField } from "./InternalField";
 import { Alert } from "./Alert";
 import { ErrorBoundary } from "./ErrorBoundary";
@@ -73,6 +76,9 @@ export function InternalComponentForm() {
     if (prop.hidden) {
       continue;
     }
+    if (skippablePropTypes.includes(prop.type)) {
+      continue;
+    }
     if (prop.optional) {
       const enabled = optionalPropIsEnabled(prop);
       optionalProps.push([

packages/connect-react/src/hooks/form-context.tsx

@@ -38,6 +38,13 @@ export type FormContext<T extends ConfigurableProps> = {
   userId: string;
 };
 
+export const skippablePropTypes = [
+  "$.service.db",
+  "$.interface.http",
+  "$.interface.apphook",
+  "$.interface.timer", // TODO add support for this (cron string and timers)
+]
+
 export const FormContext = createContext<FormContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any
 
 export const useFormContext = () => {
@@ -172,7 +179,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   // so can't rely on that base control form validation
   const propErrors = (prop: ConfigurableProp, value: unknown): string[] => {
     const errs: string[] = [];
-    if (prop.optional || prop.hidden || prop.disabled) return []
+    if (prop.optional || prop.hidden || prop.disabled || skippablePropTypes.includes(prop.type)) return []
     if (prop.type === "app") {
       const field = fields[prop.name]
       if (field) {
@@ -247,6 +254,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       if (prop.hidden) {
         continue;
       }
+      if (skippablePropTypes.includes(prop.type)) {
+        continue;
+      }
       // if prop.optional and not shown, we skip and do on un-collapse
       if (prop.optional && !optionalPropIsEnabled(prop)) {
         continue;
@@ -336,7 +346,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const checkPropsNeedConfiguring = () => {
     const _propsNeedConfiguring = []
     for (const prop of configurableProps) {
-      if (!prop || prop.optional || prop.hidden) continue
+      if (!prop || prop.optional || prop.hidden || skippablePropTypes.includes(prop.type)) continue
       const value = configuredProps[prop.name as keyof ConfiguredProps<T>]
       const errors = propErrors(prop, value)
       if (errors.length) {