Fixing up sql prop handling and PR feedback

Author: dannyroosevelt

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

@@ -1,28 +1,40 @@
 import { useFormFieldContext } from "../hooks/form-field-context";
-import { useFormContext } from "../hooks/form-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: any[] } => {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "query" in value &&
+    typeof (value as any).query === "string"
+  );
+};
 
 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
+  // 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
-  const queryValue = typeof value === "object" && value && "query" in value 
-    ? (value as any).query 
-    : typeof value === "string" 
-    ? value 
-    : "";
+  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

packages/sdk/src/shared/component.ts

@@ -88,6 +88,9 @@ export type ConfigurablePropStringArray = BaseConfigurableProp & {
 } & Defaultable<string[]>; // TODO
 export type ConfigurablePropSql = BaseConfigurableProp & {
   type: "sql";
+  auth: {
+    app: string;
+  };
 } & Defaultable<string>;
 // | { type: "$.interface.http" } // source only
 // | { type: "$.interface.timer" } // source only