SQL queries are working

Author: dannyroosevelt

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

@@ -1,16 +1,39 @@
 import { useFormFieldContext } from "../hooks/form-field-context";
+import { useFormContext } from "../hooks/form-context";
 import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
 
 export function ControlSql() {
   const formFieldContext = useFormFieldContext();
+  const formContext = useFormContext();
   const {
     id, onChange, prop, value,
   } = formFieldContext;
   const {
     getProps, theme,
   } = useCustomize();
 
+  // Find the first app prop to determine which database app to use
+  const appProp = formContext.configurableProps.find((p: any) => p.type === "app");
+  const appName = appProp?.app || "postgresql"; // Default to postgresql
+  
+  // Extract the query string from the structured value or use empty string
+  const queryValue = typeof value === "object" && value && "query" in value 
+    ? (value as any).query 
+    : typeof value === "string" 
+    ? 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",
@@ -31,8 +54,8 @@ export function ControlSql() {
     <textarea
       id={id}
       name={prop.name}
-      value={value ?? ""}
-      onChange={(e) => onChange(e.target.value)}
+      value={queryValue}
+      onChange={(e) => handleChange(e.target.value)}
       placeholder="SELECT * FROM table_name"
       required={!prop.optional}
       {...getProps("controlSql", baseStyles, formFieldContext)}

packages/sdk/src/shared/component.ts

@@ -125,7 +125,7 @@ export type PropValue<T extends ConfigurableProp["type"]> = T extends "alert"
   : T extends "string[]"
   ? string[] // XXX support arrays differently?
   : T extends "sql"
-  ? string
+  ? { app: string; query: string; params: any[]; }
   : never;
 
 export type ConfiguredProps<T extends ConfigurableProps> = {