Adding support for the sql prop type in connect-react (#17011)

* Getting the UI working, SQL isn't yet working

* SQL queries are working

* Update pnpm-lock.yaml

* Update pnpm-lock.yaml

* Fixing up sql prop handling and PR feedback

* Changelog, versions, and linting

* Update ControlSql.tsx

* Revert SDK changes to isolate connect-react changes

Remove SQL prop type definitions from SDK to separate
into standalone PR, keeping only connect-react component changes.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* Reverting version and changelog from /sdk

---------

Co-authored-by: Claude <[email protected]>

Author: dannyroosevelt

packages/connect-react/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 # Changelog
 
+# [1.2.0] - 2025-06-05
+
+- Adding basic support for 'sql' prop types
+
 # [1.1.0] - 2025-06-04
 
 - Adding support for 'object' prop types

packages/connect-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

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

@@ -11,6 +11,7 @@ import { ControlBoolean } from "./ControlBoolean";
 import { ControlInput } from "./ControlInput";
 import { ControlObject } from "./ControlObject";
 import { ControlSelect } from "./ControlSelect";
+import { ControlSql } from "./ControlSql";
 import { RemoteOptionsContainer } from "./RemoteOptionsContainer";
 
 export type ControlProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
@@ -82,6 +83,8 @@ export function Control<T extends ConfigurableProps, U extends ConfigurableProp>
     return <ControlInput />;
   case "object":
     return <ControlObject />;
+  case "sql":
+    return <ControlSql />;
   default:
     // TODO "not supported prop type should bubble up"
     throw new Error("Unsupported property type: " + prop.type);

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

@@ -0,0 +1,76 @@
+import { useFormFieldContext } from "../hooks/form-field-context";
+import { useCustomize } from "../hooks/customization-context";
+import type { CSSProperties } from "react";
+import type { ConfigurablePropSql } from "@pipedream/sdk";
+
+// Type guard to check if value is a structured SQL object
+const isSqlStructuredValue = (value: unknown): value is { app: string; query: string; params: unknown[] } => {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "query" in value &&
+    typeof (value as Record<string, unknown>).query === "string"
+  );
+};
+
+export function ControlSql() {
+  const formFieldContext = useFormFieldContext();
+  const {
+    id, onChange, prop, value,
+  } = formFieldContext;
+  const {
+    getProps, theme,
+  } = useCustomize();
+
+  // Cast prop to SQL prop type (this component is only used for SQL props)
+  const sqlProp = prop as ConfigurablePropSql;
+
+  // Get the app name from the SQL prop's auth configuration
+  const appName = sqlProp.auth?.app || "postgresql"; // Default to postgresql
+
+  // Extract the query string from the structured value or use empty string
+  let queryValue = "";
+  if (isSqlStructuredValue(value)) {
+    queryValue = value.query;
+  } else if (typeof value === "string") {
+    queryValue = value;
+  }
+
+  const handleChange = (queryText: string) => {
+    // Transform the simple query string into the structured SQL object
+    const sqlObject = {
+      app: appName,
+      query: queryText,
+      params: [], // For now, always empty array
+    };
+    onChange(sqlObject);
+  };
+
+  const baseStyles: CSSProperties = {
+    color: theme.colors.neutral60,
+    display: "block",
+    border: "1px solid",
+    borderColor: theme.colors.neutral20,
+    padding: 6,
+    width: "100%",
+    borderRadius: theme.borderRadius,
+    gridArea: "control",
+    boxShadow: theme.boxShadow.input,
+    fontSize: "0.875rem",
+    fontFamily: "monospace",
+    minHeight: "120px",
+    resize: "vertical",
+  };
+
+  return (
+    <textarea
+      id={id}
+      name={prop.name}
+      value={queryValue}
+      onChange={(e) => handleChange(e.target.value)}
+      placeholder="SELECT * FROM table_name"
+      required={!prop.optional}
+      {...getProps("controlSql", baseStyles, formFieldContext)}
+    />
+  );
+}

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

@@ -29,6 +29,7 @@ import { ControlBoolean } from "../components/ControlBoolean";
 import { ControlInput } from "../components/ControlInput";
 import { ControlObject } from "../components/ControlObject";
 import { ControlSelect } from "../components/ControlSelect";
+import { ControlSql } from "../components/ControlSql";
 import { ControlSubmit } from "../components/ControlSubmit";
 import { Description } from "../components/Description";
 import { Errors } from "../components/Errors";
@@ -73,6 +74,7 @@ export type CustomizableProps = {
   controlBoolean: ComponentProps<typeof ControlBoolean> & FormFieldContext<ConfigurableProp>;
   controlInput: ComponentProps<typeof ControlInput> & FormFieldContext<ConfigurableProp>;
   controlObject: ComponentProps<typeof ControlObject> & FormFieldContext<ConfigurableProp>;
+  controlSql: ComponentProps<typeof ControlSql> & FormFieldContext<ConfigurableProp>;
   controlSubmit: ComponentProps<typeof ControlSubmit>;
   description: ComponentProps<typeof Description>;
   error: ComponentProps<typeof Errors>;

packages/connect-react/src/index.ts

@@ -8,6 +8,7 @@ export { ControlApp } from "./components/ControlApp";
 export { ControlBoolean } from "./components/ControlBoolean";
 export { ControlInput } from "./components/ControlInput";
 export { ControlSelect } from "./components/ControlSelect";
+export { ControlSql } from "./components/ControlSql";
 export { ControlSubmit } from "./components/ControlSubmit";
 export { Description } from "./components/Description";
 export { ErrorBoundary } from "./components/ErrorBoundary";