Wire up the submit button to propsNeedConfiguring

Author: adolfo-pd

packages/connect-react/examples/nextjs/src/app/page.tsx

@@ -30,6 +30,12 @@ export default function Home() {
           componentKey="slack-send-message"
           configuredProps={configuredProps}
           onUpdateConfiguredProps={setConfiguredProps}
+          onSubmit={async () => {
+            await client.actionRun({
+              userId,
+              actionId: "slack-send-message",
+              configuredProps,
+            })}}
         />
       </FrontendClientProvider>
     </>

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

@@ -8,16 +8,22 @@ export type ControlSubmitProps = {
 
 export function ControlSubmit(props: ControlSubmitProps) {
   const { form } = props;
-  const { submitting } = form;
+  const {
+    propsNeedConfiguring, submitting,
+  } = form;
 
   const {
     getProps, theme,
   } = useCustomize();
-  const baseStyles: CSSProperties = {
+  const baseStyles = (disabled: boolean): CSSProperties => ({
     width: "fit-content",
     textTransform: "capitalize",
-    backgroundColor: theme.colors.primary,
-    color: theme.colors.neutral0,
+    backgroundColor: disabled
+      ? theme.colors.neutral10
+      : theme.colors.primary,
+    color: disabled
+      ? theme.colors.neutral40
+      : theme.colors.neutral0,
     padding: `${theme.spacing.baseUnit * 1.75}px ${
       theme.spacing.baseUnit * 16
     }px`,
@@ -29,9 +35,9 @@ export function ControlSubmit(props: ControlSubmitProps) {
       ? 0.5
       : undefined,
     margin: "0.5rem 0 0 0",
-  };
+  });
 
   return <input type="submit" value={submitting
     ? "Submitting..."
-    : "Submit"} {...getProps("controlSubmit", baseStyles, props)} disabled={submitting} />;
+    : "Submit"} {...getProps("controlSubmit", baseStyles(propsNeedConfiguring.length || submitting), props)} disabled={propsNeedConfiguring.length || submitting} />;
 }

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

@@ -4,11 +4,12 @@ import {
 import isEqual from "lodash.isequal";
 import { useQuery } from "@tanstack/react-query";
 import type {
-  ComponentReloadPropsOpts, ConfigurableProp, ConfigurableProps, ConfiguredProps, V1Component,
+  ComponentReloadPropsOpts, ConfigurableProp, ConfigurableProps, ConfiguredProps, V1Component, PropValue,
 } from "@pipedream/sdk";
 import { useFrontendClient } from "./frontend-client-context";
 import type { ComponentFormProps } from "../components/ComponentForm";
 import type { FormFieldContext } from "./form-field-context";
+import { appPropError } from "./use-app";
 
 export type DynamicProps<T extends ConfigurableProps> = { id: string; configurable_props: T; }; // TODO
 
@@ -24,6 +25,7 @@ export type FormContext<T extends ConfigurableProps> = {
   optionalPropIsEnabled: (prop: ConfigurableProp) => boolean;
   optionalPropSetEnabled: (prop: ConfigurableProp, enabled: boolean) => void;
   props: ComponentFormProps<T>;
+  propsNeedConfiguring: string[];
   queryDisabledIdx?: number;
   registerField: <T extends ConfigurableProp>(field: FormFieldContext<T>) => void;
   setConfiguredProp: (idx: number, value: unknown) => void; // XXX type safety for value (T will rarely be static right?)
@@ -136,6 +138,16 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     enabled: reloadPropIdx != null, // TODO or props.dynamicPropsId && !dynamicProps
   });
 
+  const [
+    propsNeedConfiguring,
+    setPropsNeedConfiguring,
+  ] = useState<string[]>([]);
+  useEffect(() => {
+    checkPropsNeedConfiguring()
+  }, [
+    configuredProps,
+  ]);
+
   // XXX fix types of dynamicProps, props.component so this type decl not needed
   let configurableProps: T = dynamicProps?.configurable_props || formProps.component.configurable_props || [];
   if (propNames?.length) {
@@ -154,7 +166,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
 
   // these validations are necessary because they might override PropInput for number case for instance
   // so can't rely on that base control form validation
-  const propErrors = (prop: ConfigurableProp, value: unknown): string[] => {
+  const propErrors = <T extends ConfigurableProps>(prop: ConfigurableProp, value: unknown): string[] => {
     const errs: string[] = [];
     if (value === undefined) {
       if (!prop.optional) {
@@ -181,13 +193,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       }
     } else if (prop.type === "app") {
       const field = fields[prop.name]
-      if (!field.extra.app) {
-        errs.push("app field not registered")
-      } else if (!value) {
-        errs.push("no app configured")
-      } else if (typeof value === "object" && "authProvisionId" in value && !value.authProvisionId) {
-        errs.push("no auth provision configured")
-      }
+      const app = field.extra.app
+      const err = appPropError(prop, value, app)
+      if (err) errs.push(err)
     }
     return errs;
   };
@@ -316,6 +324,20 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setEnabledOptionalProps(newEnabledOptionalProps);
   };
 
+  const checkPropsNeedConfiguring = () => {
+    const _propsNeedConfiguring = []
+    for (const prop of configurableProps) {
+      if (!prop || prop.optional || prop.hidden) continue
+      const value = configuredProps[prop.name as keyof ConfiguredProps<T>]
+      const errors = propErrors(prop, value)
+      if (errors.length) {
+        _propsNeedConfiguring.push(prop.name)
+      }
+    }
+    // propsNeedConfiguring.splice(0, propsNeedConfiguring.length, ..._propsNeedConfiguring)
+    setPropsNeedConfiguring(_propsNeedConfiguring)
+  }
+
   const registerField = <T extends ConfigurableProp>(field: FormFieldContext<T>) => {
     fields[field.prop.name] = field
     setFields(fields);
@@ -336,6 +358,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     fields,
     optionalPropIsEnabled,
     optionalPropSetEnabled,
+    propsNeedConfiguring,
     queryDisabledIdx,
     registerField,
     setConfiguredProp,

packages/connect-react/src/hooks/use-app.tsx

@@ -2,7 +2,10 @@ import {
   useQuery, type UseQueryOptions,
 } from "@tanstack/react-query";
 import { useFrontendClient } from "./frontend-client-context";
-import type { AppRequestResponse } from "@pipedream/sdk";
+import type {
+  AppRequestResponse, AppResponse, ConfigurablePropApp,
+  PropValue,
+} from "@pipedream/sdk";
 
 /**
  * Get details about an app
@@ -23,3 +26,63 @@ export const useApp = (slug: string, opts?:{ useQueryOpts?: Omit<UseQueryOptions
     app: query.data?.data,
   };
 };
+
+type AppResponseWithExtractedCustomFields = AppResponse & {
+  extracted_custom_fields_names: string[]
+}
+
+type AppCustomField = {
+  name: string
+  optional?: boolean
+}
+
+type OauthAppPropValue = PropValue<"app"> & {
+  oauth_access_token?: string
+}
+
+function getCustomFields(app: AppResponse): AppCustomField[] {
+  const isOauth = app.auth_type === "oauth"
+  const userDefinedCustomFields = JSON.parse(app.custom_fields_json || "[]")
+  if ("extracted_custom_fields_names" in app && app.extracted_custom_fields_names) {
+    const extractedCustomFields = ((app as AppResponseWithExtractedCustomFields).extracted_custom_fields_names || []).map(
+      (name) => ({
+        name,
+      }),
+    )
+    userDefinedCustomFields.push(...extractedCustomFields)
+  }
+  return userDefinedCustomFields.map((cf: AppCustomField) => {
+    return {
+      ...cf,
+      // if oauth, treat all as optional (they are usually needed for getting access token)
+      optional: cf.optional || isOauth,
+    }
+  })
+}
+
+export function appPropError(prop: ConfigurablePropApp, value: unknown, app: AppResponse | undefined): string | undefined {
+  console.log("appPropError", prop, value, app)
+  if (!app) {
+    return "app field not registered"
+  }
+  if (!value) {
+    return "no app configured"
+  }
+  if (typeof value !== "object") {
+    return "not an app"
+  }
+  const _value = value as PropValue<"app">
+  if ("authProvisionId" in _value && !_value.authProvisionId) {
+    if (app.auth_type) {
+      if (app.auth_type === "oauth" && !(_value as OauthAppPropValue).oauth_access_token) {
+        return "missing oauth token"
+      }
+      for (const cf of getCustomFields(app)) {
+        if (!cf.optional && !_value[cf.name]) {
+          return "missing custom field"
+        }
+      }
+      return "no auth provision configured"
+    }
+  }
+}