OLAP Connectors: Test the connection before exiting the "Add Data" modal

runtime/drivers/clickhouse/clickhouse.go

@@ -38,7 +38,8 @@ var spec = drivers.Spec{
 			Type:        drivers.StringPropertyType,
 			Required:    false,
 			DisplayName: "Connection string",
-			Placeholder: "clickhouse://localhost:9000?username=default&password=",
+			Placeholder: "clickhouse://localhost:9000?username=default&password=password",
+			Secret:      true,
 			NoPrompt:    true,
 		},
 		{
@@ -81,13 +82,6 @@ var spec = drivers.Spec{
 			DisplayName: "SSL",
 			Description: "Use SSL to connect to the ClickHouse server",
 		},
-		{
-			Key:         "database",
-			Type:        drivers.StringPropertyType,
-			Required:    false,
-			DisplayName: "Database",
-			Description: "Specify the database within the ClickHouse server",
-		},
 	},
 	ImplementsOLAP: true,
 }

runtime/drivers/mysql/mysql.go

@@ -43,6 +43,7 @@ var spec = drivers.Spec{
 			DocsURL:     "https://github.com/go-sql-driver/mysql?tab=readme-ov-file#dsn-data-source-name",
 			Placeholder: "username:password@tcp(example.com:3306)/my-db",
 			Hint:        "Can be configured here or by setting the 'connector.mysql.dsn' environment variable (using '.env' or '--env')",
+			Secret:      true,
 		},
 		{
 			Key:         "name",

runtime/drivers/postgres/postgres.go

@@ -41,6 +41,7 @@ var spec = drivers.Spec{
 			DocsURL:     "https://www.postgresql.org/docs/current/libpq-connect.html#LIBPQ-CONNSTRING",
 			Placeholder: "postgresql://postgres:postgres@localhost:5432/postgres",
 			Hint:        "Can be configured here or by setting the 'connector.postgres.database_url' environment variable (using '.env' or '--env')",
+			Secret:      true,
 		},
 		{
 			Key:         "name",

runtime/drivers/salesforce/salesforce.go

@@ -90,13 +90,15 @@ var spec = drivers.Spec{
 			DisplayName: "Salesforce Password",
 			Required:    false,
 			Hint:        "Either set this or pass --env connector.salesforce.password=... to rill start",
+			Secret:      true,
 		},
 		{
 			Key:         "key",
 			Type:        drivers.StringPropertyType,
 			DisplayName: "JWT Key for Authentication",
 			Required:    false,
 			Hint:        "Either set this or pass --env connector.salesforce.key=... to rill start",
+			Secret:      true,
 		},
 		{
 			Key:         "endpoint",

runtime/drivers/snowflake/snowflake.go

@@ -46,6 +46,7 @@ var spec = drivers.Spec{
 			DocsURL:     "https://pkg.go.dev/github.com/snowflakedb/gosnowflake#hdr-Connection_String",
 			Placeholder: "my_user_name:my_password@ac123456/my_database/my_schema?warehouse=my_warehouse&role=my_user_role",
 			Hint:        "Can be configured here or by setting the 'connector.snowflake.dsn' environment variable (using '.env' or '--env')",
+			Secret:      true,
 		},
 		{
 			Key:         "name",

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

@@ -5,7 +5,7 @@
 </script>
 
 <div>
-  <AlertTriangle size="16px" />
+  <AlertTriangle size="16px" className="shrink-0" />
   <p class="ml-2">
     {message}
   </p>

web-common/src/components/icons/AlertTriangle.svelte

@@ -1,13 +1,15 @@
-<script>
+<script lang="ts">
   export let size = "1em";
   export let color = "currentColor";
+  export let className = "";
 </script>
 
 <svg
   height={size}
   viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
+  class={className}
 >
   <path
     fill-rule="evenodd"

web-common/src/features/connectors/ConnectorEntry.svelte

@@ -28,9 +28,10 @@
 <!-- For now, only show OLAP connectors -->
 {#if implementsOlap}
   {#if connector.name}
-    <li aria-label={connector.name} class="connector-entry">
+    <li class="connector-entry">
       <button
         class="connector-entry-header"
+        aria-label={connector.name}
         on:click={() => {
           store.toggleItem(connectorName);
         }}

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

@@ -65,6 +65,7 @@ export async function updateDotEnvWithSecrets(
   queryClient: QueryClient,
   connector: V1ConnectorDriver,
   formValues: Record<string, unknown>,
+  formType: "source" | "connector",
 ): Promise<string> {
   const instanceId = get(runtime).instanceId;
 
@@ -86,7 +87,11 @@ export async function updateDotEnvWithSecrets(
   }
 
   // Get the secret keys
-  const secretKeys = connector.configProperties
+  const properties =
+    formType === "source"
+      ? connector.sourceProperties
+      : connector.configProperties;
+  const secretKeys = properties
     ?.filter((property) => property.secret)
     .map((property) => property.key);
 
@@ -144,6 +149,20 @@ export function replaceOrAddEnvVariable(
   return newBlob;
 }
 
+export function deleteEnvVariable(
+  existingEnvBlob: string,
+  key: string,
+): string {
+  const lines = existingEnvBlob.split("\n");
+  const updatedLines = lines.filter((line) => !line.startsWith(`${key}=`));
+  const newBlob = updatedLines
+    .filter((line, index) => !(line === "" && index === 0))
+    .join("\n")
+    .trim();
+
+  return newBlob;
+}
+
 export function makeDotEnvConnectorKey(connectorName: string, key: string) {
   // Note: The connector name, not driver, is used. This enables configuring multiple connectors that use the same driver.
   return `connector.${connectorName}.${key}`;

web-common/src/features/connectors/olap/test-connection.ts

@@ -0,0 +1,66 @@
+import { get } from "svelte/store";
+import { queryClient } from "../../../lib/svelte-query/globalQueryClient";
+import { waitUntil } from "../../../lib/waitUtils";
+import {
+  connectorServiceOLAPListTables,
+  getConnectorServiceOLAPListTablesQueryKey,
+} from "../../../runtime-client";
+import { fileArtifacts } from "../../entity-management/file-artifacts";
+import { humanReadableErrorMessage } from "../../sources/modal/errors";
+
+interface TestConnectorResult {
+  success: boolean;
+  error?: string;
+}
+
+export async function testOLAPConnector(
+  instanceId: string,
+  newConnectorFilePath: string,
+  newConnectorName: string,
+): Promise<TestConnectorResult> {
+  // Wait a sec – give the runtime time to start reconciling the file
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  // Wait for the file to reconcile
+  const fileArtifact = fileArtifacts.getFileArtifact(newConnectorFilePath);
+  await waitUntil(() => !get(fileArtifact.reconciling), 500);
+
+  // Check for errors
+  const hasErrorsStore = fileArtifact.getHasErrors(queryClient, instanceId);
+  const hasErrors = get(hasErrorsStore);
+  if (hasErrors) {
+    // Get the first error message
+    const firstError = get(
+      fileArtifact.getAllErrors(queryClient, instanceId),
+    )[0].message;
+
+    return {
+      success: false,
+      error: firstError,
+    };
+  }
+
+  // Test the connection by calling `GetTables`
+  const queryKey = getConnectorServiceOLAPListTablesQueryKey({
+    instanceId,
+    connector: newConnectorName,
+  });
+  const queryFn = () =>
+    connectorServiceOLAPListTables({
+      instanceId,
+      connector: newConnectorName,
+    });
+  try {
+    await queryClient.fetchQuery({ queryKey, queryFn });
+    return { success: true };
+  } catch (e) {
+    return {
+      success: false,
+      error: humanReadableErrorMessage(
+        newConnectorName,
+        e?.response?.data?.code,
+        e?.response?.data?.message,
+      ),
+    };
+  }
+}

web-common/src/features/entity-management/AddAssetButton.svelte

@@ -172,7 +172,7 @@
   </DropdownMenu.Trigger>
   <DropdownMenu.Content align="start" class="w-[240px]">
     <DropdownMenu.Item
-      aria-label="Add Source"
+      aria-label="Add Data"
       class="flex gap-x-2"
       on:click={handleAddData}
     >