diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md index a2d8eb451213b..ecf02d4922374 100644 --- a/packages/connect-react/CHANGELOG.md +++ b/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 diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index 76b1bd5b2d100..deccc7509f710 100644 --- a/packages/connect-react/package.json +++ b/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" diff --git a/packages/connect-react/src/components/Control.tsx b/packages/connect-react/src/components/Control.tsx index 3706a06be4a4d..ac18a8754662c 100644 --- a/packages/connect-react/src/components/Control.tsx +++ b/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 = { @@ -82,6 +83,8 @@ export function Control return ; case "object": return ; + case "sql": + return ; default: // TODO "not supported prop type should bubble up" throw new Error("Unsupported property type: " + prop.type); diff --git a/packages/connect-react/src/components/ControlSql.tsx b/packages/connect-react/src/components/ControlSql.tsx new file mode 100644 index 0000000000000..a04dc99c1708b --- /dev/null +++ b/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).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 ( +