Connectors JSON Schema

web-common/src/components/forms/Input.svelte

@@ -166,7 +166,8 @@
           contenteditable
           class="multiline-input"
           class:pointer-events-none={disabled}
-          {placeholder}
+          data-placeholder={placeholder}
+          aria-label={label || title || placeholder}
           role="textbox"
           tabindex="0"
           aria-multiline="true"
@@ -327,6 +328,11 @@
     word-wrap: break-word;
   }
 
+  .multiline-input:empty:before {
+    content: attr(data-placeholder);
+    @apply text-gray-400;
+  }
+
   .input-wrapper:focus-within {
     @apply border-primary-500;
     @apply ring-2 ring-primary-100;

web-common/src/features/connectors/code-utils.ts

@@ -1,7 +1,6 @@
 import { QueryClient } from "@tanstack/svelte-query";
 import { get } from "svelte/store";
 import {
-  ConnectorDriverPropertyType,
   type V1ConnectorDriver,
   type ConnectorDriverProperty,
   getRuntimeServiceGetFileQueryKey,
@@ -37,9 +36,18 @@ export function compileConnectorYAML(
   connector: V1ConnectorDriver,
   formValues: Record<string, unknown>,
   options?: {
-    fieldFilter?: (property: ConnectorDriverProperty) => boolean;
-    orderedProperties?: ConnectorDriverProperty[];
+    fieldFilter?: (
+      property:
+        | ConnectorDriverProperty
+        | { key?: string; type?: string; secret?: boolean; internal?: boolean },
+    ) => boolean;
+    orderedProperties?: Array<
+      | ConnectorDriverProperty
+      | { key?: string; type?: string; secret?: boolean }
+    >;
     connectorInstanceName?: string;
+    secretKeys?: string[];
+    stringKeys?: string[];
   },
 ) {
   // Add instructions to the top of the file
@@ -50,31 +58,19 @@ type: connector
 
 driver: ${getDriverNameForConnector(connector.name as string)}`;
 
-  // Use the provided orderedProperties if available, otherwise fall back to configProperties/sourceProperties
-  let properties =
-    options?.orderedProperties ??
-    connector.configProperties ??
-    connector.sourceProperties ??
-    [];
+  // Use the provided orderedProperties if available.
+  let properties = options?.orderedProperties ?? [];
 
   // Optionally filter properties
   if (options?.fieldFilter) {
     properties = properties.filter(options.fieldFilter);
   }
 
   // Get the secret property keys
-  const secretPropertyKeys =
-    connector.configProperties
-      ?.filter((property) => property.secret)
-      .map((property) => property.key) || [];
+  const secretPropertyKeys = options?.secretKeys ?? [];
 
   // Get the string property keys
-  const stringPropertyKeys =
-    connector.configProperties
-      ?.filter(
-        (property) => property.type === ConnectorDriverPropertyType.TYPE_STRING,
-      )
-      .map((property) => property.key) || [];
+  const stringPropertyKeys = options?.stringKeys ?? [];
 
   // Compile key value pairs in the order of properties
   const compiledKeyValues = properties
@@ -100,11 +96,12 @@ driver: ${getDriverNameForConnector(connector.name as string)}`;
 
       const isSecretProperty = secretPropertyKeys.includes(key);
       if (isSecretProperty) {
-        return `${key}: "{{ .env.${makeDotEnvConnectorKey(
+        const placeholder = `{{ .env.${makeDotEnvConnectorKey(
           connector.name as string,
           key,
           options?.connectorInstanceName,
-        )} }}"`;
+        )} }}`;
+        return `${key}: "${placeholder}"`;
       }
 
       const isStringProperty = stringPropertyKeys.includes(key);
@@ -126,6 +123,7 @@ export async function updateDotEnvWithSecrets(
   formValues: Record<string, unknown>,
   formType: "source" | "connector",
   connectorInstanceName?: string,
+  opts?: { secretKeys?: string[] },
 ): Promise<string> {
   const instanceId = get(runtime).instanceId;
 
@@ -147,13 +145,7 @@ export async function updateDotEnvWithSecrets(
   }
 
   // Get the secret keys
-  const properties =
-    formType === "source"
-      ? connector.sourceProperties
-      : connector.configProperties;
-  const secretKeys = properties
-    ?.filter((property) => property.secret)
-    .map((property) => property.key);
+  const secretKeys = opts?.secretKeys ?? [];
 
   // In reality, all connectors have secret keys, but this is a safeguard
   if (!secretKeys) {