From 5dc5e625823ecc98e5c8cf8bf794a91353146f9c Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Thu, 5 Jun 2025 10:12:29 -0700 Subject: [PATCH 1/9] Getting the UI working, SQL isn't yet working --- .../connect-react/src/components/Control.tsx | 3 ++ .../src/components/ControlSql.tsx | 41 +++++++++++++++++++ .../src/hooks/customization-context.tsx | 2 + packages/connect-react/src/index.ts | 1 + packages/sdk/src/shared/component.ts | 7 +++- 5 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 packages/connect-react/src/components/ControlSql.tsx 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..24f75c3b4b4c0 --- /dev/null +++ b/packages/connect-react/src/components/ControlSql.tsx @@ -0,0 +1,41 @@ +import { useFormFieldContext } from "../hooks/form-field-context"; +import { useCustomize } from "../hooks/customization-context"; +import type { CSSProperties } from "react"; + +export function ControlSql() { + const formFieldContext = useFormFieldContext(); + const { + id, onChange, prop, value, + } = formFieldContext; + const { + getProps, theme, + } = useCustomize(); + + 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 ( +