From 5d0b560f6f0f86eb1c72af604257b87a6944d592 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 15:27:06 +0100
Subject: [PATCH 01/13] introduce narrower ConfigurableDatabaseIntegration*
 types

---
 .../deepnoteNotebookManager.unit.test.ts      |  9 ++++---
 .../integrations/integrationDetector.ts       | 15 ++++++++---
 .../integrations/integrationManager.ts        |  5 ++++
 .../integrations/integrationWebview.ts        | 20 +++++++-------
 .../deepnote/sqlCellStatusBarProvider.ts      | 18 +++++++++----
 src/notebooks/types.ts                        |  3 ++-
 .../notebooks/deepnote/integrationStorage.ts  | 26 ++++++++-----------
 .../deepnote/integrationStorage.unit.test.ts  |  4 +--
 .../notebooks/deepnote/integrationTypes.ts    | 11 ++++++--
 ...IntegrationEnvironmentVariablesProvider.ts |  4 +--
 src/platform/notebooks/deepnote/types.ts      | 10 +++----
 .../integrations/ConfigurationForm.tsx        |  8 +++---
 .../integrations/IntegrationItem.tsx          |  5 ++--
 .../integrations/IntegrationPanel.tsx         | 18 ++++++++-----
 .../webview-side/integrations/types.ts        | 12 ++++++---
 15 files changed, 100 insertions(+), 68 deletions(-)

diff --git a/src/notebooks/deepnote/deepnoteNotebookManager.unit.test.ts b/src/notebooks/deepnote/deepnoteNotebookManager.unit.test.ts
index f81edcaa07..820953d063 100644
--- a/src/notebooks/deepnote/deepnoteNotebookManager.unit.test.ts
+++ b/src/notebooks/deepnote/deepnoteNotebookManager.unit.test.ts
@@ -2,6 +2,7 @@ import * as assert from 'assert';
 
 import { DeepnoteNotebookManager } from './deepnoteNotebookManager';
 import type { DeepnoteProject } from '../../platform/deepnote/deepnoteTypes';
+import { ProjectIntegration } from '../types';
 
 suite('DeepnoteNotebookManager', () => {
     let manager: DeepnoteNotebookManager;
@@ -187,7 +188,7 @@ suite('DeepnoteNotebookManager', () => {
         test('should update integrations list for existing project and return true', () => {
             manager.storeOriginalProject('project-123', mockProject, 'notebook-456');
 
-            const integrations = [
+            const integrations: ProjectIntegration[] = [
                 { id: 'int-1', name: 'PostgreSQL', type: 'pgsql' },
                 { id: 'int-2', name: 'BigQuery', type: 'big-query' }
             ];
@@ -211,7 +212,7 @@ suite('DeepnoteNotebookManager', () => {
 
             manager.storeOriginalProject('project-123', projectWithIntegrations, 'notebook-456');
 
-            const newIntegrations = [
+            const newIntegrations: ProjectIntegration[] = [
                 { id: 'new-int-1', name: 'New Integration 1', type: 'pgsql' },
                 { id: 'new-int-2', name: 'New Integration 2', type: 'big-query' }
             ];
@@ -257,7 +258,7 @@ suite('DeepnoteNotebookManager', () => {
         test('should preserve other project properties and return true', () => {
             manager.storeOriginalProject('project-123', mockProject, 'notebook-456');
 
-            const integrations = [{ id: 'int-1', name: 'PostgreSQL', type: 'pgsql' }];
+            const integrations: ProjectIntegration[] = [{ id: 'int-1', name: 'PostgreSQL', type: 'pgsql' }];
 
             const result = manager.updateProjectIntegrations('project-123', integrations);
 
@@ -275,7 +276,7 @@ suite('DeepnoteNotebookManager', () => {
             manager.storeOriginalProject('project-123', mockProject, 'notebook-456');
             manager.updateCurrentNotebookId('project-123', undefined as any);
 
-            const integrations = [
+            const integrations: ProjectIntegration[] = [
                 { id: 'int-1', name: 'PostgreSQL', type: 'pgsql' },
                 { id: 'int-2', name: 'BigQuery', type: 'big-query' }
             ];
diff --git a/src/notebooks/deepnote/integrations/integrationDetector.ts b/src/notebooks/deepnote/integrations/integrationDetector.ts
index a17fc2ba30..fe64c64a7e 100644
--- a/src/notebooks/deepnote/integrations/integrationDetector.ts
+++ b/src/notebooks/deepnote/integrations/integrationDetector.ts
@@ -2,9 +2,13 @@ import { inject, injectable } from 'inversify';
 
 import { logger } from '../../../platform/logging';
 import { IDeepnoteNotebookManager } from '../../types';
-import { IntegrationStatus, IntegrationWithStatus } from '../../../platform/notebooks/deepnote/integrationTypes';
+import {
+    ConfigurableDatabaseIntegrationType,
+    IntegrationStatus,
+    IntegrationWithStatus
+} from '../../../platform/notebooks/deepnote/integrationTypes';
 import { IIntegrationDetector, IIntegrationStorage } from './types';
-import { DatabaseIntegrationType, databaseIntegrationTypes } from '@deepnote/database-integrations';
+import { databaseIntegrationTypes } from '@deepnote/database-integrations';
 
 /**
  * Service for detecting integrations used in Deepnote notebooks
@@ -41,7 +45,10 @@ export class IntegrationDetector implements IIntegrationDetector {
         for (const projectIntegration of projectIntegrations) {
             const integrationId = projectIntegration.id;
             const integrationType = projectIntegration.type;
-            if (!(databaseIntegrationTypes as readonly string[]).includes(integrationType)) {
+            if (
+                !(databaseIntegrationTypes as readonly string[]).includes(integrationType) ||
+                integrationType === 'pandas-dataframe'
+            ) {
                 logger.debug(`IntegrationDetector: Skipping unsupported integration type: ${integrationType}`);
                 continue;
             }
@@ -53,7 +60,7 @@ export class IntegrationDetector implements IIntegrationDetector {
                 status: config ? IntegrationStatus.Connected : IntegrationStatus.Disconnected,
                 // Include integration metadata from project for prefilling when config is null
                 integrationName: projectIntegration.name,
-                integrationType: integrationType as DatabaseIntegrationType
+                integrationType: integrationType as ConfigurableDatabaseIntegrationType
             };
 
             integrations.set(integrationId, status);
diff --git a/src/notebooks/deepnote/integrations/integrationManager.ts b/src/notebooks/deepnote/integrations/integrationManager.ts
index 24456c59b7..3ad0bc592f 100644
--- a/src/notebooks/deepnote/integrations/integrationManager.ts
+++ b/src/notebooks/deepnote/integrations/integrationManager.ts
@@ -161,6 +161,11 @@ export class IntegrationManager implements IIntegrationManager {
                 integrationType = projectIntegration.type as DatabaseIntegrationType;
             }
 
+            if (integrationType === 'pandas-dataframe') {
+                logger.debug(`IntegrationManager: Skipping internal DuckDB integration ${selectedIntegrationId}`);
+                return;
+            }
+
             integrations.set(selectedIntegrationId, {
                 config: config || null,
                 status: config ? IntegrationStatus.Connected : IntegrationStatus.Disconnected,
diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index d6be608a77..5c82d1090b 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -7,8 +7,11 @@ import { logger } from '../../../platform/logging';
 import { LocalizedMessages, SharedMessages } from '../../../messageTypes';
 import { IDeepnoteNotebookManager, ProjectIntegration } from '../../types';
 import { IIntegrationStorage, IIntegrationWebviewProvider } from './types';
-import { IntegrationStatus, IntegrationWithStatus } from '../../../platform/notebooks/deepnote/integrationTypes';
-import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import {
+    ConfigurableDatabaseIntegrationConfig,
+    IntegrationStatus,
+    IntegrationWithStatus
+} from '../../../platform/notebooks/deepnote/integrationTypes';
 
 /**
  * Manages the webview panel for integration configuration
@@ -217,7 +220,7 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
     private async handleMessage(message: {
         type: string;
         integrationId?: string;
-        config?: DatabaseIntegrationConfig;
+        config?: ConfigurableDatabaseIntegrationConfig;
     }): Promise<void> {
         switch (message.type) {
             case 'configure':
@@ -259,7 +262,10 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
     /**
      * Save the configuration for an integration
      */
-    private async saveConfiguration(integrationId: string, config: DatabaseIntegrationConfig): Promise<void> {
+    private async saveConfiguration(
+        integrationId: string,
+        config: ConfigurableDatabaseIntegrationConfig
+    ): Promise<void> {
         try {
             await this.integrationStorage.save(config);
 
@@ -345,12 +351,6 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
                     return null;
                 }
 
-                // Skip DuckDB integration (internal, not a real Deepnote integration)
-                if (type === 'pandas-dataframe') {
-                    logger.trace(`IntegrationWebviewProvider: Skipping internal DuckDB integration ${id}`);
-                    return null;
-                }
-
                 return {
                     id,
                     name: integration.config?.name || integration.integrationName || id,
diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
index 20ca8f45ec..7d905b2ed7 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
@@ -22,7 +22,10 @@ import { IExtensionSyncActivationService } from '../../platform/activation/types
 import { IDisposableRegistry } from '../../platform/common/types';
 import { IIntegrationStorage } from './integrations/types';
 import { Commands } from '../../platform/common/constants';
-import { DATAFRAME_SQL_INTEGRATION_ID } from '../../platform/notebooks/deepnote/integrationTypes';
+import {
+    ConfigurableDatabaseIntegrationType,
+    DATAFRAME_SQL_INTEGRATION_ID
+} from '../../platform/notebooks/deepnote/integrationTypes';
 import { IDeepnoteNotebookManager } from '../types';
 import { DatabaseIntegrationType, databaseIntegrationTypes } from '@deepnote/database-integrations';
 
@@ -338,15 +341,20 @@ export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvid
 
         // Add all project integrations
         for (const projectIntegration of projectIntegrations) {
+            const integrationType =
+                projectIntegration.type &&
+                (databaseIntegrationTypes as readonly string[]).includes(projectIntegration.type)
+                    ? (projectIntegration.type as DatabaseIntegrationType)
+                    : null;
+
             // Skip the internal DuckDB integration
-            if (projectIntegration.id === DATAFRAME_SQL_INTEGRATION_ID) {
+            if (projectIntegration.id === DATAFRAME_SQL_INTEGRATION_ID || integrationType === 'pandas-dataframe') {
                 continue;
             }
 
-            const integrationType = projectIntegration.type;
             const typeLabel =
                 integrationType && (databaseIntegrationTypes as readonly string[]).includes(integrationType)
-                    ? this.getIntegrationTypeLabel(integrationType as DatabaseIntegrationType)
+                    ? this.getIntegrationTypeLabel(integrationType)
                     : projectIntegration.type;
 
             const item: LocalQuickPickItem = {
@@ -430,7 +438,7 @@ export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvid
         this._onDidChangeCellStatusBarItems.fire();
     }
 
-    private getIntegrationTypeLabel(type: DatabaseIntegrationType): string {
+    private getIntegrationTypeLabel(type: ConfigurableDatabaseIntegrationType): string {
         switch (type) {
             case 'pgsql':
                 return l10n.t('PostgreSQL');
diff --git a/src/notebooks/types.ts b/src/notebooks/types.ts
index a83797fc8a..a12dacf52a 100644
--- a/src/notebooks/types.ts
+++ b/src/notebooks/types.ts
@@ -5,6 +5,7 @@ import { NotebookDocument, NotebookEditor, Uri, type Event } from 'vscode';
 import { Resource } from '../platform/common/types';
 import type { EnvironmentPath } from '@vscode/python-extension';
 import { DeepnoteProject } from '../platform/deepnote/deepnoteTypes';
+import { ConfigurableDatabaseIntegrationType } from '../platform/notebooks/deepnote/integrationTypes';
 
 export interface IEmbedNotebookEditorProvider {
     findNotebookEditor(resource: Resource): NotebookEditor | undefined;
@@ -31,7 +32,7 @@ export interface INotebookPythonEnvironmentService {
 export interface ProjectIntegration {
     id: string;
     name: string;
-    type: string;
+    type: ConfigurableDatabaseIntegrationType;
 }
 
 export const IDeepnoteNotebookManager = Symbol('IDeepnoteNotebookManager');
diff --git a/src/platform/notebooks/deepnote/integrationStorage.ts b/src/platform/notebooks/deepnote/integrationStorage.ts
index 2d57fbf132..23a21c1e52 100644
--- a/src/platform/notebooks/deepnote/integrationStorage.ts
+++ b/src/platform/notebooks/deepnote/integrationStorage.ts
@@ -6,17 +6,13 @@ import { IAsyncDisposableRegistry } from '../../common/types';
 import { logger } from '../../logging';
 import { IIntegrationStorage } from './types';
 import { upgradeLegacyIntegrationConfig } from './legacyIntegrationConfigUtils';
-import {
-    DatabaseIntegrationConfig,
-    databaseIntegrationTypes,
-    databaseMetadataSchemasByType
-} from '@deepnote/database-integrations';
-import { DATAFRAME_SQL_INTEGRATION_ID } from './integrationTypes';
+import { databaseIntegrationTypes, databaseMetadataSchemasByType } from '@deepnote/database-integrations';
+import { ConfigurableDatabaseIntegrationConfig, DATAFRAME_SQL_INTEGRATION_ID } from './integrationTypes';
 
 const INTEGRATION_SERVICE_NAME = 'deepnote-integrations';
 
 // NOTE: We need a way to upgrade existing configurations to the new format of deepnote/database-integrations.
-type VersionedDatabaseIntegrationConfig = DatabaseIntegrationConfig & { version: 1 };
+type VersionedDatabaseIntegrationConfig = ConfigurableDatabaseIntegrationConfig & { version: 1 };
 
 function storeEncryptedIntegrationConfig(
     encryptedStorage: IEncryptedStorage,
@@ -33,7 +29,7 @@ function storeEncryptedIntegrationConfig(
  */
 @injectable()
 export class IntegrationStorage implements IIntegrationStorage {
-    private readonly cache: Map<string, DatabaseIntegrationConfig> = new Map();
+    private readonly cache: Map<string, ConfigurableDatabaseIntegrationConfig> = new Map();
 
     private cacheLoaded = false;
 
@@ -52,7 +48,7 @@ export class IntegrationStorage implements IIntegrationStorage {
     /**
      * Get all stored integration configurations.
      */
-    async getAll(): Promise<DatabaseIntegrationConfig[]> {
+    async getAll(): Promise<ConfigurableDatabaseIntegrationConfig[]> {
         await this.ensureCacheLoaded();
         return Array.from(this.cache.values());
     }
@@ -60,7 +56,7 @@ export class IntegrationStorage implements IIntegrationStorage {
     /**
      * Get a specific integration configuration by ID
      */
-    async getIntegrationConfig(integrationId: string): Promise<DatabaseIntegrationConfig | undefined> {
+    async getIntegrationConfig(integrationId: string): Promise<ConfigurableDatabaseIntegrationConfig | undefined> {
         await this.ensureCacheLoaded();
         return this.cache.get(integrationId);
     }
@@ -73,15 +69,15 @@ export class IntegrationStorage implements IIntegrationStorage {
     async getProjectIntegrationConfig(
         _projectId: string,
         integrationId: string
-    ): Promise<DatabaseIntegrationConfig | undefined> {
+    ): Promise<ConfigurableDatabaseIntegrationConfig | undefined> {
         return this.getIntegrationConfig(integrationId);
     }
 
     /**
      * Save or update an integration configuration
      */
-    async save(config: DatabaseIntegrationConfig): Promise<void> {
-        if (config.type === 'pandas-dataframe' || config.id === DATAFRAME_SQL_INTEGRATION_ID) {
+    async save(config: ConfigurableDatabaseIntegrationConfig): Promise<void> {
+        if ((config.type as string) === 'pandas-dataframe' || config.id === DATAFRAME_SQL_INTEGRATION_ID) {
             logger.warn(`IntegrationStorage: Skipping save for internal DuckDB integration ${config.id}`);
             return;
         }
@@ -210,7 +206,7 @@ export class IntegrationStorage implements IIntegrationStorage {
                             const config =
                                 databaseIntegrationTypes.includes(rawConfig.type) &&
                                 rawConfig.type !== 'pandas-dataframe'
-                                    ? (rawConfig as DatabaseIntegrationConfig)
+                                    ? (rawConfig as ConfigurableDatabaseIntegrationConfig)
                                     : null;
                             const validMetadata = config
                                 ? databaseMetadataSchemasByType[config.type].safeParse(config.metadata).data
@@ -219,7 +215,7 @@ export class IntegrationStorage implements IIntegrationStorage {
                                 this.cache.set(
                                     id,
                                     // NOTE: We must cast here because there is no union-wide schema parser at the moment.
-                                    { ...config, metadata: validMetadata } as DatabaseIntegrationConfig
+                                    { ...config, metadata: validMetadata } as ConfigurableDatabaseIntegrationConfig
                                 );
                             } else {
                                 logger.warn(`Invalid integration config for ${id}, marking for deletion`);
diff --git a/src/platform/notebooks/deepnote/integrationStorage.unit.test.ts b/src/platform/notebooks/deepnote/integrationStorage.unit.test.ts
index 6808269ed2..356add1040 100644
--- a/src/platform/notebooks/deepnote/integrationStorage.unit.test.ts
+++ b/src/platform/notebooks/deepnote/integrationStorage.unit.test.ts
@@ -197,7 +197,7 @@ suite('IntegrationStorage', () => {
                 metadata: {}
             };
 
-            await storage.save(config);
+            await storage.save(config as any);
             const result = await storage.getIntegrationConfig('dataframe-1');
 
             assert.strictEqual(result, undefined);
@@ -211,7 +211,7 @@ suite('IntegrationStorage', () => {
                 metadata: {}
             };
 
-            await storage.save(config);
+            await storage.save(config as any);
             const result = await storage.getIntegrationConfig(DATAFRAME_SQL_INTEGRATION_ID);
 
             assert.strictEqual(result, undefined);
diff --git a/src/platform/notebooks/deepnote/integrationTypes.ts b/src/platform/notebooks/deepnote/integrationTypes.ts
index 19da67bcdf..3176e39027 100644
--- a/src/platform/notebooks/deepnote/integrationTypes.ts
+++ b/src/platform/notebooks/deepnote/integrationTypes.ts
@@ -136,6 +136,13 @@ export type LegacyIntegrationConfig =
     | LegacySnowflakeIntegrationConfig
     | LegacyDuckDBIntegrationConfig;
 
+export type ConfigurableDatabaseIntegrationConfig = Extract<
+    DatabaseIntegrationConfig,
+    { type: ConfigurableDatabaseIntegrationType }
+>;
+
+export type ConfigurableDatabaseIntegrationType = Exclude<DatabaseIntegrationType, 'pandas-dataframe'>;
+
 /**
  * Integration connection status
  */
@@ -149,7 +156,7 @@ export enum IntegrationStatus {
  * Integration with its current status
  */
 export interface IntegrationWithStatus {
-    config: DatabaseIntegrationConfig | null;
+    config: ConfigurableDatabaseIntegrationConfig | null;
     status: IntegrationStatus;
     error?: string;
     /**
@@ -159,5 +166,5 @@ export interface IntegrationWithStatus {
     /**
      * Type from the project's integrations list (used for prefilling when config is null)
      */
-    integrationType?: DatabaseIntegrationType;
+    integrationType?: ConfigurableDatabaseIntegrationType;
 }
diff --git a/src/platform/notebooks/deepnote/sqlIntegrationEnvironmentVariablesProvider.ts b/src/platform/notebooks/deepnote/sqlIntegrationEnvironmentVariablesProvider.ts
index 54f2a69295..57c449cff2 100644
--- a/src/platform/notebooks/deepnote/sqlIntegrationEnvironmentVariablesProvider.ts
+++ b/src/platform/notebooks/deepnote/sqlIntegrationEnvironmentVariablesProvider.ts
@@ -11,7 +11,7 @@ import {
     IPlatformDeepnoteNotebookManager
 } from './types';
 import { DATAFRAME_SQL_INTEGRATION_ID } from './integrationTypes';
-import { getEnvironmentVariablesForIntegrations } from '@deepnote/database-integrations';
+import { DatabaseIntegrationConfig, getEnvironmentVariablesForIntegrations } from '@deepnote/database-integrations';
 
 /**
  * Provides environment variables for SQL integrations.
@@ -88,7 +88,7 @@ export class SqlIntegrationEnvironmentVariablesProvider implements ISqlIntegrati
             `SqlIntegrationEnvironmentVariablesProvider: Found ${projectIntegrations.length} integrations in project`
         );
 
-        const projectIntegrationConfigs = (
+        const projectIntegrationConfigs: Array<DatabaseIntegrationConfig> = (
             await Promise.all(
                 projectIntegrations.map((integration) => {
                     return this.integrationStorage.getIntegrationConfig(integration.id);
diff --git a/src/platform/notebooks/deepnote/types.ts b/src/platform/notebooks/deepnote/types.ts
index 2632483c99..cb51200e37 100644
--- a/src/platform/notebooks/deepnote/types.ts
+++ b/src/platform/notebooks/deepnote/types.ts
@@ -2,7 +2,7 @@ import { CancellationToken, Event, NotebookDocument, Uri } from 'vscode';
 import { IDisposable, Resource } from '../../common/types';
 import { EnvironmentVariables } from '../../common/variables/types';
 import { DeepnoteProject } from '../../deepnote/deepnoteTypes';
-import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { ConfigurableDatabaseIntegrationConfig } from './integrationTypes';
 
 /**
  * Settings for select input blocks
@@ -31,7 +31,7 @@ export interface IIntegrationStorage extends IDisposable {
      */
     readonly onDidChangeIntegrations: Event<void>;
 
-    getAll(): Promise<DatabaseIntegrationConfig[]>;
+    getAll(): Promise<ConfigurableDatabaseIntegrationConfig[]>;
 
     /**
      * Retrieves the global (non-project-scoped) integration configuration by integration ID.
@@ -49,7 +49,7 @@ export interface IIntegrationStorage extends IDisposable {
      *          - The `IntegrationConfig` object if a global configuration exists for the given ID
      *          - `undefined` if no global configuration exists for the given integration ID
      */
-    getIntegrationConfig(integrationId: string): Promise<DatabaseIntegrationConfig | undefined>;
+    getIntegrationConfig(integrationId: string): Promise<ConfigurableDatabaseIntegrationConfig | undefined>;
 
     /**
      * Get integration configuration for a specific project and integration
@@ -57,9 +57,9 @@ export interface IIntegrationStorage extends IDisposable {
     getProjectIntegrationConfig(
         projectId: string,
         integrationId: string
-    ): Promise<DatabaseIntegrationConfig | undefined>;
+    ): Promise<ConfigurableDatabaseIntegrationConfig | undefined>;
 
-    save(config: DatabaseIntegrationConfig): Promise<void>;
+    save(config: ConfigurableDatabaseIntegrationConfig): Promise<void>;
     delete(integrationId: string): Promise<void>;
     exists(integrationId: string): Promise<boolean>;
     clear(): Promise<void>;
diff --git a/src/webviews/webview-side/integrations/ConfigurationForm.tsx b/src/webviews/webview-side/integrations/ConfigurationForm.tsx
index 597935450e..ac8dfc256e 100644
--- a/src/webviews/webview-side/integrations/ConfigurationForm.tsx
+++ b/src/webviews/webview-side/integrations/ConfigurationForm.tsx
@@ -3,14 +3,14 @@ import { format, getLocString } from '../react-common/locReactSide';
 import { PostgresForm } from './PostgresForm';
 import { BigQueryForm } from './BigQueryForm';
 import { SnowflakeForm } from './SnowflakeForm';
-import { DatabaseIntegrationConfig, DatabaseIntegrationType } from '@deepnote/database-integrations';
+import { ConfigurableDatabaseIntegrationConfig, ConfigurableDatabaseIntegrationType } from './types';
 
 export interface IConfigurationFormProps {
     integrationId: string;
-    existingConfig: DatabaseIntegrationConfig | null;
+    existingConfig: ConfigurableDatabaseIntegrationConfig | null;
     defaultName?: string;
-    integrationType: DatabaseIntegrationType;
-    onSave: (config: DatabaseIntegrationConfig) => void;
+    integrationType: ConfigurableDatabaseIntegrationType;
+    onSave: (config: ConfigurableDatabaseIntegrationConfig) => void;
     onCancel: () => void;
 }
 
diff --git a/src/webviews/webview-side/integrations/IntegrationItem.tsx b/src/webviews/webview-side/integrations/IntegrationItem.tsx
index 83944830a6..2eaad767b1 100644
--- a/src/webviews/webview-side/integrations/IntegrationItem.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationItem.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { getLocString } from '../react-common/locReactSide';
-import { IntegrationWithStatus } from './types';
-import { DatabaseIntegrationType } from '@deepnote/database-integrations';
+import { ConfigurableDatabaseIntegrationType, IntegrationWithStatus } from './types';
 
 export interface IIntegrationItemProps {
     integration: IntegrationWithStatus;
@@ -9,7 +8,7 @@ export interface IIntegrationItemProps {
     onDelete: (integrationId: string) => void;
 }
 
-const getIntegrationTypeLabel = (type: DatabaseIntegrationType): string => {
+const getIntegrationTypeLabel = (type: ConfigurableDatabaseIntegrationType): string => {
     switch (type) {
         case 'pgsql':
             return getLocString('integrationsPostgresTypeLabel', 'PostgreSQL');
diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
index fbcc43481f..e493f30ab5 100644
--- a/src/webviews/webview-side/integrations/IntegrationPanel.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -3,8 +3,12 @@ import { IVsCodeApi } from '../react-common/postOffice';
 import { getLocString, storeLocStrings } from '../react-common/locReactSide';
 import { IntegrationList } from './IntegrationList';
 import { ConfigurationForm } from './ConfigurationForm';
-import { IntegrationWithStatus, WebviewMessage } from './types';
-import { DatabaseIntegrationConfig, DatabaseIntegrationType } from '@deepnote/database-integrations';
+import {
+    ConfigurableDatabaseIntegrationConfig,
+    ConfigurableDatabaseIntegrationType,
+    IntegrationWithStatus,
+    WebviewMessage
+} from './types';
 
 export interface IIntegrationPanelProps {
     baseTheme: string;
@@ -14,13 +18,13 @@ export interface IIntegrationPanelProps {
 export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme, vscodeApi }) => {
     const [integrations, setIntegrations] = React.useState<IntegrationWithStatus[]>([]);
     const [selectedIntegrationId, setSelectedIntegrationId] = React.useState<string | null>(null);
-    const [selectedConfig, setSelectedConfig] = React.useState<DatabaseIntegrationConfig | null>(null);
+    const [selectedConfig, setSelectedConfig] = React.useState<ConfigurableDatabaseIntegrationConfig | null>(null);
     const [selectedIntegrationDefaultName, setSelectedIntegrationDefaultName] = React.useState<string | undefined>(
         undefined
     );
-    const [selectedIntegrationType, setSelectedIntegrationType] = React.useState<DatabaseIntegrationType | undefined>(
-        undefined
-    );
+    const [selectedIntegrationType, setSelectedIntegrationType] = React.useState<
+        ConfigurableDatabaseIntegrationType | undefined
+    >(undefined);
     const [message, setMessage] = React.useState<{ type: 'success' | 'error'; text: string } | null>(null);
     const [confirmDelete, setConfirmDelete] = React.useState<string | null>(null);
 
@@ -126,7 +130,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
         setConfirmDelete(null);
     };
 
-    const handleSave = (config: DatabaseIntegrationConfig) => {
+    const handleSave = (config: ConfigurableDatabaseIntegrationConfig) => {
         vscodeApi.postMessage({
             type: 'save',
             integrationId: config.id,
diff --git a/src/webviews/webview-side/integrations/types.ts b/src/webviews/webview-side/integrations/types.ts
index 80ab12f2a3..2312282ee7 100644
--- a/src/webviews/webview-side/integrations/types.ts
+++ b/src/webviews/webview-side/integrations/types.ts
@@ -1,13 +1,17 @@
 import { DatabaseIntegrationConfig, type DatabaseIntegrationType } from '@deepnote/database-integrations';
 
+export type ConfigurableDatabaseIntegrationType = Exclude<DatabaseIntegrationType, 'pandas-dataframe'>;
+
+export type ConfigurableDatabaseIntegrationConfig = Exclude<DatabaseIntegrationConfig, { type: 'pandas-dataframe' }>;
+
 export type IntegrationStatus = 'connected' | 'disconnected' | 'error';
 
 export interface IntegrationWithStatus {
     id: string;
-    config: DatabaseIntegrationConfig | null;
+    config: ConfigurableDatabaseIntegrationConfig | null;
     status: IntegrationStatus;
     integrationName?: string;
-    integrationType?: DatabaseIntegrationType;
+    integrationType?: ConfigurableDatabaseIntegrationType;
 }
 
 export interface IVsCodeMessage {
@@ -24,9 +28,9 @@ export interface UpdateMessage {
 export interface ShowFormMessage {
     type: 'showForm';
     integrationId: string;
-    config: DatabaseIntegrationConfig | null;
+    config: ConfigurableDatabaseIntegrationConfig | null;
     integrationName?: string;
-    integrationType?: DatabaseIntegrationType;
+    integrationType?: ConfigurableDatabaseIntegrationType;
 }
 
 export interface StatusMessage {

From 1a7f341164e79e61b0785e369ea0010e509476ad Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 15:27:28 +0100
Subject: [PATCH 02/13] add support and configuration forms for all remaining
 database integrations

---
 INTEGRATIONS_CREDENTIALS.md                   | 338 ++++++++++++++++--
 src/messageTypes.ts                           | 185 ++++++++++
 .../integrations/integrationWebview.ts        | 172 +++++++++
 .../deepnote/sqlCellStatusBarProvider.ts      |  32 +-
 src/platform/common/utils/localize.ts         | 209 +++++++++++
 .../webview-side/integrations/AlloyDBForm.tsx | 196 ++++++++++
 .../webview-side/integrations/AthenaForm.tsx  | 184 ++++++++++
 .../integrations/ClickHouseForm.tsx           | 191 ++++++++++
 .../integrations/ConfigurationForm.tsx        | 156 +++++++-
 .../integrations/DatabricksForm.tsx           | 197 ++++++++++
 .../webview-side/integrations/DremioForm.tsx  | 163 +++++++++
 .../integrations/IntegrationItem.tsx          |  32 +-
 .../webview-side/integrations/MariaDBForm.tsx | 184 ++++++++++
 .../integrations/MaterializeForm.tsx          | 223 ++++++++++++
 .../webview-side/integrations/MindsDBForm.tsx | 196 ++++++++++
 .../webview-side/integrations/MongoDBForm.tsx | 112 ++++++
 .../webview-side/integrations/MySQLForm.tsx   | 182 ++++++++++
 .../integrations/RedshiftForm.tsx             | 238 ++++++++++++
 .../integrations/SQLServerForm.tsx            | 201 +++++++++++
 .../webview-side/integrations/SpannerForm.tsx | 207 +++++++++++
 .../webview-side/integrations/TrinoForm.tsx   | 193 ++++++++++
 21 files changed, 3762 insertions(+), 29 deletions(-)
 create mode 100644 src/webviews/webview-side/integrations/AlloyDBForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/AthenaForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/ClickHouseForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/DatabricksForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/DremioForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/MariaDBForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/MaterializeForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/MindsDBForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/MongoDBForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/MySQLForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/RedshiftForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/SQLServerForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/SpannerForm.tsx
 create mode 100644 src/webviews/webview-side/integrations/TrinoForm.tsx

diff --git a/INTEGRATIONS_CREDENTIALS.md b/INTEGRATIONS_CREDENTIALS.md
index c68ed7244b..ae7be6861f 100644
--- a/INTEGRATIONS_CREDENTIALS.md
+++ b/INTEGRATIONS_CREDENTIALS.md
@@ -33,10 +33,43 @@ This ensures consistency between the VSCode extension and Deepnote's cloud platf
 
 **Supported Integration Types:**
 
+The extension supports all 18 database integration types from the `@deepnote/database-integrations` package:
+
+**SQL Databases (standard authentication):**
+
 - `'pgsql'` - PostgreSQL
-- `'big-query'` - BigQuery
-- `'snowflake'` - Snowflake
-- `'pandas-dataframe'` - DuckDB (internal)
+- `'mysql'` - MySQL
+- `'mariadb'` - MariaDB
+- `'alloydb'` - Google Cloud AlloyDB
+- `'clickhouse'` - ClickHouse
+- `'materialize'` - Materialize
+- `'mindsdb'` - MindsDB
+- `'sql-server'` - Microsoft SQL Server
+- `'trino'` - Trino
+
+**Cloud Databases (service account/key-based auth):**
+
+- `'big-query'` - Google BigQuery (service account JSON)
+- `'snowflake'` - Snowflake (password or key-pair auth)
+- `'spanner'` - Google Cloud Spanner (service account JSON)
+
+**Cloud Databases (AWS credentials):**
+
+- `'athena'` - Amazon Athena (access key and secret)
+- `'redshift'` - Amazon Redshift (username/password or IAM)
+
+**Cloud Databases (token-based auth):**
+
+- `'databricks'` - Databricks (personal access token)
+- `'dremio'` - Dremio (personal access token)
+
+**NoSQL:**
+
+- `'mongodb'` - MongoDB (connection string)
+
+**Internal:**
+
+- `'pandas-dataframe'` - DuckDB (automatically configured, not user-editable)
 
 ### Core Components
 
@@ -85,12 +118,124 @@ The system uses `DatabaseIntegrationConfig` from `@deepnote/database-integration
     host: string;
     port: string;
     database: string;
-    username: string;
+    user: string;
     password: string;
     sslEnabled: boolean;
   }
 }
 
+// MySQL (type: 'mysql')
+{
+  id: string;
+  name: string;
+  type: 'mysql';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
+// MariaDB (type: 'mariadb')
+{
+  id: string;
+  name: string;
+  type: 'mariadb';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
+// AlloyDB (type: 'alloydb')
+{
+  id: string;
+  name: string;
+  type: 'alloydb';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
+// ClickHouse (type: 'clickhouse')
+{
+  id: string;
+  name: string;
+  type: 'clickhouse';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
+// Materialize (type: 'materialize')
+{
+  id: string;
+  name: string;
+  type: 'materialize';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
+// MindsDB (type: 'mindsdb')
+{
+  id: string;
+  name: string;
+  type: 'mindsdb';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
+// SQL Server (type: 'sql-server')
+{
+  id: string;
+  name: string;
+  type: 'sql-server';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
+// Trino (type: 'trino')
+{
+  id: string;
+  name: string;
+  type: 'trino';
+  metadata: {
+    host: string;
+    port: string;
+    database: string;
+    user: string;
+    password: string;
+  }
+}
+
 // BigQuery (type: 'big-query')
 {
   id: string;
@@ -122,8 +267,92 @@ The system uses `DatabaseIntegrationConfig` from `@deepnote/database-integration
     privateKeyPassphrase?: string;
   }
 }
+
+// Athena (type: 'athena')
+{
+  id: string;
+  name: string;
+  type: 'athena';
+  metadata: {
+    access_key_id: string;
+    secret_access_key: string;
+    region: string;
+    s3_output_path: string;
+    workgroup?: string;
+  }
+}
+
+// Databricks (type: 'databricks')
+{
+  id: string;
+  name: string;
+  type: 'databricks';
+  metadata: {
+    host: string;
+    port: string;
+    httpPath: string;
+    token: string;
+    schema?: string;
+    catalog?: string;
+  }
+}
+
+// Dremio (type: 'dremio')
+{
+  id: string;
+  name: string;
+  type: 'dremio';
+  metadata: {
+    host: string;
+    port: string;
+    schema: string;
+    token: string;
+  }
+}
+
+// MongoDB (type: 'mongodb')
+{
+  id: string;
+  name: string;
+  type: 'mongodb';
+  metadata: {
+    connection_string: string;
+  }
+}
+
+// Redshift (type: 'redshift')
+{
+  id: string;
+  name: string;
+  type: 'redshift';
+  metadata: {
+    authMethod: 'username-and-password' | 'individual-credentials';
+    host: string;
+    port?: string;
+    database: string;
+    // For username-and-password auth:
+    user: string;
+    password: string;
+    // For individual-credentials auth (uses AWS credentials from environment)
+  }
+}
+
+// Spanner (type: 'spanner')
+{
+  id: string;
+  name: string;
+  type: 'spanner';
+  metadata: {
+    instance: string;
+    database: string;
+    service_account: string; // JSON string
+    dataBoostEnabled: boolean;
+  }
+}
 ```
 
+**Note:** The `pandas-dataframe` type is an internal integration that is automatically configured and cannot be modified by users.
+
 **Legacy Config Upgrade:**
 
 When loading configurations from storage, the system automatically detects and upgrades legacy configs (pre-`@deepnote/database-integrations`) using `upgradeLegacyIntegrationConfig()`. Invalid or unsupported configs are filtered out during loading.
@@ -273,27 +502,41 @@ Main React component that manages the webview UI state.
 5. Extension removes credentials
 6. Panel updates status to "Disconnected"
 
-#### 6. **Configuration Forms** (`PostgresForm.tsx`, `BigQueryForm.tsx`)
+#### 6. **Configuration Forms**
 
 Type-specific forms for entering integration credentials.
 
-**PostgreSQL Form Fields:**
+**Standard Database Forms** (`PostgresForm.tsx`, `MySQLForm.tsx`, `MariaDBForm.tsx`, `GenericDatabaseForm.tsx`):
+
+Most SQL databases use a standard form with these fields:
 
 - Name (display name)
 - Host
-- Port (default: 5432)
+- Port (with database-specific defaults)
 - Database
 - Username
 - Password
-- SSL (checkbox)
+- SSL (PostgreSQL only)
+
+Supported databases with standard forms:
+
+- PostgreSQL (port 5432, with SSL option)
+- MySQL (port 3306)
+- MariaDB (port 3306)
+- AlloyDB (port 5432)
+- ClickHouse (port 8123)
+- Materialize (port 6875)
+- MindsDB (port 47334)
+- SQL Server (port 1433)
+- Trino (port 8080)
 
-**BigQuery Form Fields:**
+**BigQuery Form** (`BigQueryForm.tsx`):
 
 - Name (display name)
 - Project ID
 - Service Account Credentials (JSON textarea)
 
-**Snowflake Form Fields:**
+**Snowflake Form** (`SnowflakeForm.tsx`):
 
 - Name (display name)
 - Account Name
@@ -310,6 +553,24 @@ Type-specific forms for entering integration credentials.
   - Private Key (textarea)
   - Private Key Passphrase (optional)
 
+**AWS Integration Forms** (`AthenaForm.tsx`, `RedshiftForm.tsx`):
+
+- **Athena**: AWS Access Key ID, Secret Access Key, Region, S3 Output Path, Workgroup (optional)
+- **Redshift**: Authentication Method (username/password or IAM), Cluster Endpoint, Port, Database, Username/Password (for username/password auth)
+
+**Token-Based Forms** (`DatabricksForm.tsx`, `DremioForm.tsx`):
+
+- **Databricks**: Server Hostname, HTTP Path, Access Token, Port, Catalog (optional), Schema (optional)
+- **Dremio**: Host, Port, Schema, Personal Access Token
+
+**NoSQL Forms** (`MongoDBForm.tsx`):
+
+- **MongoDB**: Connection String (supports mongodb:// and mongodb+srv:// formats)
+
+**Google Cloud Forms** (`SpannerForm.tsx`):
+
+- **Spanner**: Instance ID, Database, Service Account JSON, Data Boost Enabled (checkbox)
+
 **Validation:**
 
 - All required fields must be filled
@@ -556,7 +817,7 @@ The system was refactored to use the `@deepnote/database-integrations` package (
 
 ## Adding New Integration Types
 
-To add a new integration type (e.g., MySQL):
+The extension now supports all 18 integration types from the `@deepnote/database-integrations` package (v1.1.1). To add support for a new integration type in the future:
 
 1. **Add support to `@deepnote/database-integrations` package** (if not already supported):
 
@@ -564,32 +825,61 @@ To add a new integration type (e.g., MySQL):
    - Add conversion logic for environment variables
    - This is the source of truth for integration types
 
-2. **Create UI form component** (`MySQLForm.tsx`):
+2. **Determine the form type needed**:
 
-   - Follow the pattern of `PostgresForm.tsx` or `BigQueryForm.tsx`
-   - Use the metadata structure from `@deepnote/database-integrations`
-   - Validate inputs according to the package's schema
+   - **Standard database** (host, port, database, user, password): Use `GenericDatabaseForm`
+   - **Complex authentication**: Create a custom form component or use `UnsupportedIntegrationForm`
+
+3. **For standard databases using `GenericDatabaseForm`**:
 
-3. **Update `ConfigurationForm.tsx`** to render the new form:
+   Update `ConfigurationForm.tsx` to add a case:
 
    ```typescript
-   case 'mysql':
-     return <MySQLForm ... />;
+   case 'new-database':
+     return (
+       <GenericDatabaseForm
+         integrationId={integrationId}
+         existingConfig={existingConfig?.type === 'new-database' ? existingConfig : null}
+         defaultName={defaultName}
+         formConfig={{
+           type: 'new-database',
+           displayName: 'New Database',
+           defaultPort: '5432',
+           localizationPrefix: 'integrationsNewDatabase'
+         }}
+         onSave={onSave}
+         onCancel={onCancel}
+       />
+     );
    ```
 
-4. **Update webview types** (`src/webviews/webview-side/integrations/types.ts`):
+4. **For complex authentication**:
+
+   Create a custom form component following the pattern of `BigQueryForm.tsx` or `SnowflakeForm.tsx`:
+
+   - Use the metadata structure from `@deepnote/database-integrations`
+   - Validate inputs according to the package's schema
+   - Add the form to `ConfigurationForm.tsx`
+
+5. **Update type labels**:
 
-   - Import types from `@deepnote/database-integrations`
-   - Add any UI-specific types needed
+   - Add case to `getIntegrationTypeLabel()` in `sqlCellStatusBarProvider.ts`
+   - Add case to `getIntegrationTypeLabel()` in `IntegrationItem.tsx`
 
-5. **Add localization strings** for the new integration type:
+6. **Add localization strings** for the new integration type:
 
    - Integration name
    - Form field labels
    - Error messages
 
-6. **Add tests**:
-   - Unit tests for the form component
+7. **Update documentation** (`integrations_credentials.md`):
+
+   - Add to supported integration types list
+   - Add metadata schema example
+   - Update configuration forms section
+
+8. **Add tests**:
+   - Unit tests for the form component (if custom)
    - Integration tests for storage and environment variable generation
 
 **Note:** The credential-to-environment-variable conversion is handled automatically by `@deepnote/database-integrations`, so no manual conversion logic is needed in the VSCode extension.
diff --git a/src/messageTypes.ts b/src/messageTypes.ts
index 6c90a08cbd..d24d6bc735 100644
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -183,6 +183,21 @@ export type LocalizedMessages = {
     integrationsPostgresTypeLabel: string;
     integrationsBigQueryTypeLabel: string;
     integrationsSnowflakeTypeLabel: string;
+    integrationsAlloyDBTypeLabel: string;
+    integrationsAthenaTypeLabel: string;
+    integrationsClickHouseTypeLabel: string;
+    integrationsDatabricksTypeLabel: string;
+    integrationsDremioTypeLabel: string;
+    integrationsMariaDBTypeLabel: string;
+    integrationsMaterializeTypeLabel: string;
+    integrationsMindsDBTypeLabel: string;
+    integrationsMongoDBTypeLabel: string;
+    integrationsMySQLTypeLabel: string;
+    integrationsDuckDBTypeLabel: string;
+    integrationsRedshiftTypeLabel: string;
+    integrationsSpannerTypeLabel: string;
+    integrationsSQLServerTypeLabel: string;
+    integrationsTrinoTypeLabel: string;
     // PostgreSQL form strings
     integrationsPostgresNameLabel: string;
     integrationsPostgresNamePlaceholder: string;
@@ -231,6 +246,176 @@ export type LocalizedMessages = {
     integrationsSnowflakeRolePlaceholder: string;
     integrationsSnowflakeWarehouseLabel: string;
     integrationsSnowflakeWarehousePlaceholder: string;
+    // MySQL form strings
+    integrationsMySQLNameLabel: string;
+    integrationsMySQLNamePlaceholder: string;
+    integrationsMySQLHostLabel: string;
+    integrationsMySQLHostPlaceholder: string;
+    integrationsMySQLPortLabel: string;
+    integrationsMySQLDatabaseLabel: string;
+    integrationsMySQLDatabasePlaceholder: string;
+    integrationsMySQLUsernameLabel: string;
+    integrationsMySQLUsernamePlaceholder: string;
+    integrationsMySQLPasswordLabel: string;
+    integrationsMySQLPasswordPlaceholder: string;
+    // MariaDB form strings
+    integrationsMariaDBNameLabel: string;
+    integrationsMariaDBNamePlaceholder: string;
+    integrationsMariaDBHostLabel: string;
+    integrationsMariaDBHostPlaceholder: string;
+    integrationsMariaDBPortLabel: string;
+    integrationsMariaDBDatabaseLabel: string;
+    integrationsMariaDBDatabasePlaceholder: string;
+    integrationsMariaDBUsernameLabel: string;
+    integrationsMariaDBUsernamePlaceholder: string;
+    integrationsMariaDBPasswordLabel: string;
+    integrationsMariaDBPasswordPlaceholder: string;
+    // Athena form strings
+    integrationsAthenaNameLabel: string;
+    integrationsAthenaNamePlaceholder: string;
+    integrationsAthenaAccessKeyIdLabel: string;
+    integrationsAthenaAccessKeyIdPlaceholder: string;
+    integrationsAthenaSecretAccessKeyLabel: string;
+    integrationsAthenaSecretAccessKeyPlaceholder: string;
+    integrationsAthenaRegionLabel: string;
+    integrationsAthenaRegionPlaceholder: string;
+    integrationsAthenaS3OutputPathLabel: string;
+    integrationsAthenaS3OutputPathPlaceholder: string;
+    integrationsAthenaWorkgroupLabel: string;
+    integrationsAthenaWorkgroupPlaceholder: string;
+    // Databricks form strings
+    integrationsDatabricksNameLabel: string;
+    integrationsDatabricksNamePlaceholder: string;
+    integrationsDatabricksHostLabel: string;
+    integrationsDatabricksHostPlaceholder: string;
+    integrationsDatabricksHttpPathLabel: string;
+    integrationsDatabricksHttpPathPlaceholder: string;
+    integrationsDatabricksTokenLabel: string;
+    integrationsDatabricksTokenPlaceholder: string;
+    integrationsDatabricksPortLabel: string;
+    integrationsDatabricksCatalogLabel: string;
+    integrationsDatabricksCatalogPlaceholder: string;
+    integrationsDatabricksSchemaLabel: string;
+    integrationsDatabricksSchemaPlaceholder: string;
+    // Dremio form strings
+    integrationsDremioNameLabel: string;
+    integrationsDremioNamePlaceholder: string;
+    integrationsDremioHostLabel: string;
+    integrationsDremioHostPlaceholder: string;
+    integrationsDremioPortLabel: string;
+    integrationsDremioSchemaLabel: string;
+    integrationsDremioSchemaPlaceholder: string;
+    integrationsDremioTokenLabel: string;
+    integrationsDremioTokenPlaceholder: string;
+    // MongoDB form strings
+    integrationsMongoDBNameLabel: string;
+    integrationsMongoDBNamePlaceholder: string;
+    integrationsMongoDBConnectionStringLabel: string;
+    integrationsMongoDBConnectionStringPlaceholder: string;
+    integrationsMongoDBConnectionStringHelp: string;
+    // Redshift form strings
+    integrationsRedshiftNameLabel: string;
+    integrationsRedshiftNamePlaceholder: string;
+    integrationsRedshiftAuthMethodLabel: string;
+    integrationsRedshiftAuthMethodUsernamePassword: string;
+    integrationsRedshiftAuthMethodIndividualCredentials: string;
+    integrationsRedshiftAuthMethodHelp: string;
+    integrationsRedshiftHostLabel: string;
+    integrationsRedshiftHostPlaceholder: string;
+    integrationsRedshiftPortLabel: string;
+    integrationsRedshiftDatabaseLabel: string;
+    integrationsRedshiftDatabasePlaceholder: string;
+    integrationsRedshiftUsernameLabel: string;
+    integrationsRedshiftUsernamePlaceholder: string;
+    integrationsRedshiftPasswordLabel: string;
+    integrationsRedshiftPasswordPlaceholder: string;
+    // Spanner form strings
+    integrationsSpannerNameLabel: string;
+    integrationsSpannerNamePlaceholder: string;
+    integrationsSpannerInstanceLabel: string;
+    integrationsSpannerInstancePlaceholder: string;
+    integrationsSpannerDatabaseLabel: string;
+    integrationsSpannerDatabasePlaceholder: string;
+    integrationsSpannerServiceAccountLabel: string;
+    integrationsSpannerServiceAccountPlaceholder: string;
+    integrationsSpannerServiceAccountHelp: string;
+    integrationsSpannerServiceAccountInvalidJson: string;
+    integrationsSpannerDataBoostLabel: string;
+    integrationsSpannerDataBoostHelp: string;
+    // AlloyDB form strings
+    integrationsAlloyDBNameLabel: string;
+    integrationsAlloyDBNamePlaceholder: string;
+    integrationsAlloyDBHostLabel: string;
+    integrationsAlloyDBHostPlaceholder: string;
+    integrationsAlloyDBPortLabel: string;
+    integrationsAlloyDBDatabaseLabel: string;
+    integrationsAlloyDBDatabasePlaceholder: string;
+    integrationsAlloyDBUsernameLabel: string;
+    integrationsAlloyDBUsernamePlaceholder: string;
+    integrationsAlloyDBPasswordLabel: string;
+    integrationsAlloyDBPasswordPlaceholder: string;
+    // ClickHouse form strings
+    integrationsClickHouseNameLabel: string;
+    integrationsClickHouseNamePlaceholder: string;
+    integrationsClickHouseHostLabel: string;
+    integrationsClickHouseHostPlaceholder: string;
+    integrationsClickHousePortLabel: string;
+    integrationsClickHouseDatabaseLabel: string;
+    integrationsClickHouseDatabasePlaceholder: string;
+    integrationsClickHouseUsernameLabel: string;
+    integrationsClickHouseUsernamePlaceholder: string;
+    integrationsClickHousePasswordLabel: string;
+    integrationsClickHousePasswordPlaceholder: string;
+    // Materialize form strings
+    integrationsMaterializeNameLabel: string;
+    integrationsMaterializeNamePlaceholder: string;
+    integrationsMaterializeHostLabel: string;
+    integrationsMaterializeHostPlaceholder: string;
+    integrationsMaterializePortLabel: string;
+    integrationsMaterializeDatabaseLabel: string;
+    integrationsMaterializeDatabasePlaceholder: string;
+    integrationsMaterializeClusterLabel: string;
+    integrationsMaterializeClusterPlaceholder: string;
+    integrationsMaterializeUsernameLabel: string;
+    integrationsMaterializeUsernamePlaceholder: string;
+    integrationsMaterializePasswordLabel: string;
+    integrationsMaterializePasswordPlaceholder: string;
+    // MindsDB form strings
+    integrationsMindsDBNameLabel: string;
+    integrationsMindsDBNamePlaceholder: string;
+    integrationsMindsDBHostLabel: string;
+    integrationsMindsDBHostPlaceholder: string;
+    integrationsMindsDBPortLabel: string;
+    integrationsMindsDBDatabaseLabel: string;
+    integrationsMindsDBDatabasePlaceholder: string;
+    integrationsMindsDBUsernameLabel: string;
+    integrationsMindsDBUsernamePlaceholder: string;
+    integrationsMindsDBPasswordLabel: string;
+    integrationsMindsDBPasswordPlaceholder: string;
+    // SQL Server form strings
+    integrationsSQLServerNameLabel: string;
+    integrationsSQLServerNamePlaceholder: string;
+    integrationsSQLServerHostLabel: string;
+    integrationsSQLServerHostPlaceholder: string;
+    integrationsSQLServerPortLabel: string;
+    integrationsSQLServerDatabaseLabel: string;
+    integrationsSQLServerDatabasePlaceholder: string;
+    integrationsSQLServerUsernameLabel: string;
+    integrationsSQLServerUsernamePlaceholder: string;
+    integrationsSQLServerPasswordLabel: string;
+    integrationsSQLServerPasswordPlaceholder: string;
+    // Trino form strings
+    integrationsTrinoNameLabel: string;
+    integrationsTrinoNamePlaceholder: string;
+    integrationsTrinoHostLabel: string;
+    integrationsTrinoHostPlaceholder: string;
+    integrationsTrinoPortLabel: string;
+    integrationsTrinoDatabaseLabel: string;
+    integrationsTrinoDatabasePlaceholder: string;
+    integrationsTrinoUsernameLabel: string;
+    integrationsTrinoUsernamePlaceholder: string;
+    integrationsTrinoPasswordLabel: string;
+    integrationsTrinoPasswordPlaceholder: string;
     // Common form strings
     integrationsRequiredField: string;
     integrationsOptionalField: string;
diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index 5c82d1090b..671674e819 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -130,6 +130,21 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsPostgresTypeLabel: localize.Integrations.postgresTypeLabel,
             integrationsBigQueryTypeLabel: localize.Integrations.bigQueryTypeLabel,
             integrationsSnowflakeTypeLabel: localize.Integrations.snowflakeTypeLabel,
+            integrationsAlloyDBTypeLabel: localize.Integrations.alloyDBTypeLabel,
+            integrationsAthenaTypeLabel: localize.Integrations.athenaTypeLabel,
+            integrationsClickHouseTypeLabel: localize.Integrations.clickHouseTypeLabel,
+            integrationsDatabricksTypeLabel: localize.Integrations.databricksTypeLabel,
+            integrationsDremioTypeLabel: localize.Integrations.dremioTypeLabel,
+            integrationsMariaDBTypeLabel: localize.Integrations.mariaDBTypeLabel,
+            integrationsMaterializeTypeLabel: localize.Integrations.materializeTypeLabel,
+            integrationsMindsDBTypeLabel: localize.Integrations.mindsDBTypeLabel,
+            integrationsMongoDBTypeLabel: localize.Integrations.mongoDBTypeLabel,
+            integrationsMySQLTypeLabel: localize.Integrations.mySQLTypeLabel,
+            integrationsDuckDBTypeLabel: localize.Integrations.duckDBTypeLabel,
+            integrationsRedshiftTypeLabel: localize.Integrations.redshiftTypeLabel,
+            integrationsSpannerTypeLabel: localize.Integrations.spannerTypeLabel,
+            integrationsSQLServerTypeLabel: localize.Integrations.sqlServerTypeLabel,
+            integrationsTrinoTypeLabel: localize.Integrations.trinoTypeLabel,
             integrationsCancel: localize.Integrations.cancel,
             integrationsSave: localize.Integrations.save,
             integrationsRequiredField: localize.Integrations.requiredField,
@@ -180,6 +195,163 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsSnowflakeRolePlaceholder: localize.Integrations.snowflakeRolePlaceholder,
             integrationsSnowflakeWarehouseLabel: localize.Integrations.snowflakeWarehouseLabel,
             integrationsSnowflakeWarehousePlaceholder: localize.Integrations.snowflakeWarehousePlaceholder,
+            integrationsMySQLNameLabel: localize.Integrations.mySQLNameLabel,
+            integrationsMySQLNamePlaceholder: localize.Integrations.mySQLNamePlaceholder,
+            integrationsMySQLHostLabel: localize.Integrations.mySQLHostLabel,
+            integrationsMySQLHostPlaceholder: localize.Integrations.mySQLHostPlaceholder,
+            integrationsMySQLPortLabel: localize.Integrations.mySQLPortLabel,
+            integrationsMySQLDatabaseLabel: localize.Integrations.mySQLDatabaseLabel,
+            integrationsMySQLDatabasePlaceholder: localize.Integrations.mySQLDatabasePlaceholder,
+            integrationsMySQLUsernameLabel: localize.Integrations.mySQLUsernameLabel,
+            integrationsMySQLUsernamePlaceholder: localize.Integrations.mySQLUsernamePlaceholder,
+            integrationsMySQLPasswordLabel: localize.Integrations.mySQLPasswordLabel,
+            integrationsMySQLPasswordPlaceholder: localize.Integrations.mySQLPasswordPlaceholder,
+            integrationsMariaDBNameLabel: localize.Integrations.mariaDBNameLabel,
+            integrationsMariaDBNamePlaceholder: localize.Integrations.mariaDBNamePlaceholder,
+            integrationsMariaDBHostLabel: localize.Integrations.mariaDBHostLabel,
+            integrationsMariaDBHostPlaceholder: localize.Integrations.mariaDBHostPlaceholder,
+            integrationsMariaDBPortLabel: localize.Integrations.mariaDBPortLabel,
+            integrationsMariaDBDatabaseLabel: localize.Integrations.mariaDBDatabaseLabel,
+            integrationsMariaDBDatabasePlaceholder: localize.Integrations.mariaDBDatabasePlaceholder,
+            integrationsMariaDBUsernameLabel: localize.Integrations.mariaDBUsernameLabel,
+            integrationsMariaDBUsernamePlaceholder: localize.Integrations.mariaDBUsernamePlaceholder,
+            integrationsMariaDBPasswordLabel: localize.Integrations.mariaDBPasswordLabel,
+            integrationsMariaDBPasswordPlaceholder: localize.Integrations.mariaDBPasswordPlaceholder,
+            integrationsAthenaNameLabel: localize.Integrations.athenaNameLabel,
+            integrationsAthenaNamePlaceholder: localize.Integrations.athenaNamePlaceholder,
+            integrationsAthenaAccessKeyIdLabel: localize.Integrations.athenaAccessKeyIdLabel,
+            integrationsAthenaAccessKeyIdPlaceholder: localize.Integrations.athenaAccessKeyIdPlaceholder,
+            integrationsAthenaSecretAccessKeyLabel: localize.Integrations.athenaSecretAccessKeyLabel,
+            integrationsAthenaSecretAccessKeyPlaceholder: localize.Integrations.athenaSecretAccessKeyPlaceholder,
+            integrationsAthenaRegionLabel: localize.Integrations.athenaRegionLabel,
+            integrationsAthenaRegionPlaceholder: localize.Integrations.athenaRegionPlaceholder,
+            integrationsAthenaS3OutputPathLabel: localize.Integrations.athenaS3OutputPathLabel,
+            integrationsAthenaS3OutputPathPlaceholder: localize.Integrations.athenaS3OutputPathPlaceholder,
+            integrationsAthenaWorkgroupLabel: localize.Integrations.athenaWorkgroupLabel,
+            integrationsAthenaWorkgroupPlaceholder: localize.Integrations.athenaWorkgroupPlaceholder,
+            integrationsDatabricksNameLabel: localize.Integrations.databricksNameLabel,
+            integrationsDatabricksNamePlaceholder: localize.Integrations.databricksNamePlaceholder,
+            integrationsDatabricksHostLabel: localize.Integrations.databricksHostLabel,
+            integrationsDatabricksHostPlaceholder: localize.Integrations.databricksHostPlaceholder,
+            integrationsDatabricksHttpPathLabel: localize.Integrations.databricksHttpPathLabel,
+            integrationsDatabricksHttpPathPlaceholder: localize.Integrations.databricksHttpPathPlaceholder,
+            integrationsDatabricksTokenLabel: localize.Integrations.databricksTokenLabel,
+            integrationsDatabricksTokenPlaceholder: localize.Integrations.databricksTokenPlaceholder,
+            integrationsDatabricksPortLabel: localize.Integrations.databricksPortLabel,
+            integrationsDatabricksCatalogLabel: localize.Integrations.databricksCatalogLabel,
+            integrationsDatabricksCatalogPlaceholder: localize.Integrations.databricksCatalogPlaceholder,
+            integrationsDatabricksSchemaLabel: localize.Integrations.databricksSchemaLabel,
+            integrationsDatabricksSchemaPlaceholder: localize.Integrations.databricksSchemaPlaceholder,
+            integrationsDremioNameLabel: localize.Integrations.dremioNameLabel,
+            integrationsDremioNamePlaceholder: localize.Integrations.dremioNamePlaceholder,
+            integrationsDremioHostLabel: localize.Integrations.dremioHostLabel,
+            integrationsDremioHostPlaceholder: localize.Integrations.dremioHostPlaceholder,
+            integrationsDremioPortLabel: localize.Integrations.dremioPortLabel,
+            integrationsDremioSchemaLabel: localize.Integrations.dremioSchemaLabel,
+            integrationsDremioSchemaPlaceholder: localize.Integrations.dremioSchemaPlaceholder,
+            integrationsDremioTokenLabel: localize.Integrations.dremioTokenLabel,
+            integrationsDremioTokenPlaceholder: localize.Integrations.dremioTokenPlaceholder,
+            integrationsMongoDBNameLabel: localize.Integrations.mongoDBNameLabel,
+            integrationsMongoDBNamePlaceholder: localize.Integrations.mongoDBNamePlaceholder,
+            integrationsMongoDBConnectionStringLabel: localize.Integrations.mongoDBConnectionStringLabel,
+            integrationsMongoDBConnectionStringPlaceholder: localize.Integrations.mongoDBConnectionStringPlaceholder,
+            integrationsMongoDBConnectionStringHelp: localize.Integrations.mongoDBConnectionStringHelp,
+            integrationsRedshiftNameLabel: localize.Integrations.redshiftNameLabel,
+            integrationsRedshiftNamePlaceholder: localize.Integrations.redshiftNamePlaceholder,
+            integrationsRedshiftAuthMethodLabel: localize.Integrations.redshiftAuthMethodLabel,
+            integrationsRedshiftAuthMethodUsernamePassword: localize.Integrations.redshiftAuthMethodUsernamePassword,
+            integrationsRedshiftAuthMethodIndividualCredentials:
+                localize.Integrations.redshiftAuthMethodIndividualCredentials,
+            integrationsRedshiftAuthMethodHelp: localize.Integrations.redshiftAuthMethodHelp,
+            integrationsRedshiftHostLabel: localize.Integrations.redshiftHostLabel,
+            integrationsRedshiftHostPlaceholder: localize.Integrations.redshiftHostPlaceholder,
+            integrationsRedshiftPortLabel: localize.Integrations.redshiftPortLabel,
+            integrationsRedshiftDatabaseLabel: localize.Integrations.redshiftDatabaseLabel,
+            integrationsRedshiftDatabasePlaceholder: localize.Integrations.redshiftDatabasePlaceholder,
+            integrationsRedshiftUsernameLabel: localize.Integrations.redshiftUsernameLabel,
+            integrationsRedshiftUsernamePlaceholder: localize.Integrations.redshiftUsernamePlaceholder,
+            integrationsRedshiftPasswordLabel: localize.Integrations.redshiftPasswordLabel,
+            integrationsRedshiftPasswordPlaceholder: localize.Integrations.redshiftPasswordPlaceholder,
+            integrationsSpannerNameLabel: localize.Integrations.spannerNameLabel,
+            integrationsSpannerNamePlaceholder: localize.Integrations.spannerNamePlaceholder,
+            integrationsSpannerInstanceLabel: localize.Integrations.spannerInstanceLabel,
+            integrationsSpannerInstancePlaceholder: localize.Integrations.spannerInstancePlaceholder,
+            integrationsSpannerDatabaseLabel: localize.Integrations.spannerDatabaseLabel,
+            integrationsSpannerDatabasePlaceholder: localize.Integrations.spannerDatabasePlaceholder,
+            integrationsSpannerServiceAccountLabel: localize.Integrations.spannerServiceAccountLabel,
+            integrationsSpannerServiceAccountPlaceholder: localize.Integrations.spannerServiceAccountPlaceholder,
+            integrationsSpannerServiceAccountHelp: localize.Integrations.spannerServiceAccountHelp,
+            integrationsSpannerServiceAccountInvalidJson: localize.Integrations.spannerServiceAccountInvalidJson,
+            integrationsSpannerDataBoostLabel: localize.Integrations.spannerDataBoostLabel,
+            integrationsSpannerDataBoostHelp: localize.Integrations.spannerDataBoostHelp,
+            integrationsAlloyDBNameLabel: localize.Integrations.alloyDBNameLabel,
+            integrationsAlloyDBNamePlaceholder: localize.Integrations.alloyDBNamePlaceholder,
+            integrationsAlloyDBHostLabel: localize.Integrations.alloyDBHostLabel,
+            integrationsAlloyDBHostPlaceholder: localize.Integrations.alloyDBHostPlaceholder,
+            integrationsAlloyDBPortLabel: localize.Integrations.alloyDBPortLabel,
+            integrationsAlloyDBDatabaseLabel: localize.Integrations.alloyDBDatabaseLabel,
+            integrationsAlloyDBDatabasePlaceholder: localize.Integrations.alloyDBDatabasePlaceholder,
+            integrationsAlloyDBUsernameLabel: localize.Integrations.alloyDBUsernameLabel,
+            integrationsAlloyDBUsernamePlaceholder: localize.Integrations.alloyDBUsernamePlaceholder,
+            integrationsAlloyDBPasswordLabel: localize.Integrations.alloyDBPasswordLabel,
+            integrationsAlloyDBPasswordPlaceholder: localize.Integrations.alloyDBPasswordPlaceholder,
+            integrationsClickHouseNameLabel: localize.Integrations.clickHouseNameLabel,
+            integrationsClickHouseNamePlaceholder: localize.Integrations.clickHouseNamePlaceholder,
+            integrationsClickHouseHostLabel: localize.Integrations.clickHouseHostLabel,
+            integrationsClickHouseHostPlaceholder: localize.Integrations.clickHouseHostPlaceholder,
+            integrationsClickHousePortLabel: localize.Integrations.clickHousePortLabel,
+            integrationsClickHouseDatabaseLabel: localize.Integrations.clickHouseDatabaseLabel,
+            integrationsClickHouseDatabasePlaceholder: localize.Integrations.clickHouseDatabasePlaceholder,
+            integrationsClickHouseUsernameLabel: localize.Integrations.clickHouseUsernameLabel,
+            integrationsClickHouseUsernamePlaceholder: localize.Integrations.clickHouseUsernamePlaceholder,
+            integrationsClickHousePasswordLabel: localize.Integrations.clickHousePasswordLabel,
+            integrationsClickHousePasswordPlaceholder: localize.Integrations.clickHousePasswordPlaceholder,
+            integrationsMaterializeNameLabel: localize.Integrations.materializeNameLabel,
+            integrationsMaterializeNamePlaceholder: localize.Integrations.materializeNamePlaceholder,
+            integrationsMaterializeHostLabel: localize.Integrations.materializeHostLabel,
+            integrationsMaterializeHostPlaceholder: localize.Integrations.materializeHostPlaceholder,
+            integrationsMaterializePortLabel: localize.Integrations.materializePortLabel,
+            integrationsMaterializeDatabaseLabel: localize.Integrations.materializeDatabaseLabel,
+            integrationsMaterializeDatabasePlaceholder: localize.Integrations.materializeDatabasePlaceholder,
+            integrationsMaterializeClusterLabel: localize.Integrations.materializeClusterLabel,
+            integrationsMaterializeClusterPlaceholder: localize.Integrations.materializeClusterPlaceholder,
+            integrationsMaterializeUsernameLabel: localize.Integrations.materializeUsernameLabel,
+            integrationsMaterializeUsernamePlaceholder: localize.Integrations.materializeUsernamePlaceholder,
+            integrationsMaterializePasswordLabel: localize.Integrations.materializePasswordLabel,
+            integrationsMaterializePasswordPlaceholder: localize.Integrations.materializePasswordPlaceholder,
+            integrationsMindsDBNameLabel: localize.Integrations.mindsDBNameLabel,
+            integrationsMindsDBNamePlaceholder: localize.Integrations.mindsDBNamePlaceholder,
+            integrationsMindsDBHostLabel: localize.Integrations.mindsDBHostLabel,
+            integrationsMindsDBHostPlaceholder: localize.Integrations.mindsDBHostPlaceholder,
+            integrationsMindsDBPortLabel: localize.Integrations.mindsDBPortLabel,
+            integrationsMindsDBDatabaseLabel: localize.Integrations.mindsDBDatabaseLabel,
+            integrationsMindsDBDatabasePlaceholder: localize.Integrations.mindsDBDatabasePlaceholder,
+            integrationsMindsDBUsernameLabel: localize.Integrations.mindsDBUsernameLabel,
+            integrationsMindsDBUsernamePlaceholder: localize.Integrations.mindsDBUsernamePlaceholder,
+            integrationsMindsDBPasswordLabel: localize.Integrations.mindsDBPasswordLabel,
+            integrationsMindsDBPasswordPlaceholder: localize.Integrations.mindsDBPasswordPlaceholder,
+            integrationsSQLServerNameLabel: localize.Integrations.sqlServerNameLabel,
+            integrationsSQLServerNamePlaceholder: localize.Integrations.sqlServerNamePlaceholder,
+            integrationsSQLServerHostLabel: localize.Integrations.sqlServerHostLabel,
+            integrationsSQLServerHostPlaceholder: localize.Integrations.sqlServerHostPlaceholder,
+            integrationsSQLServerPortLabel: localize.Integrations.sqlServerPortLabel,
+            integrationsSQLServerDatabaseLabel: localize.Integrations.sqlServerDatabaseLabel,
+            integrationsSQLServerDatabasePlaceholder: localize.Integrations.sqlServerDatabasePlaceholder,
+            integrationsSQLServerUsernameLabel: localize.Integrations.sqlServerUsernameLabel,
+            integrationsSQLServerUsernamePlaceholder: localize.Integrations.sqlServerUsernamePlaceholder,
+            integrationsSQLServerPasswordLabel: localize.Integrations.sqlServerPasswordLabel,
+            integrationsSQLServerPasswordPlaceholder: localize.Integrations.sqlServerPasswordPlaceholder,
+            integrationsTrinoNameLabel: localize.Integrations.trinoNameLabel,
+            integrationsTrinoNamePlaceholder: localize.Integrations.trinoNamePlaceholder,
+            integrationsTrinoHostLabel: localize.Integrations.trinoHostLabel,
+            integrationsTrinoHostPlaceholder: localize.Integrations.trinoHostPlaceholder,
+            integrationsTrinoPortLabel: localize.Integrations.trinoPortLabel,
+            integrationsTrinoDatabaseLabel: localize.Integrations.trinoDatabaseLabel,
+            integrationsTrinoDatabasePlaceholder: localize.Integrations.trinoDatabasePlaceholder,
+            integrationsTrinoUsernameLabel: localize.Integrations.trinoUsernameLabel,
+            integrationsTrinoUsernamePlaceholder: localize.Integrations.trinoUsernamePlaceholder,
+            integrationsTrinoPasswordLabel: localize.Integrations.trinoPasswordLabel,
+            integrationsTrinoPasswordPlaceholder: localize.Integrations.trinoPasswordPlaceholder,
             integrationsUnnamedIntegration: localize.Integrations.unnamedIntegration('{0}'),
             integrationsUnsupportedIntegrationType: localize.Integrations.unsupportedIntegrationType('{0}')
         };
diff --git a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
index 7d905b2ed7..b7fade350f 100644
--- a/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
+++ b/src/notebooks/deepnote/sqlCellStatusBarProvider.ts
@@ -440,12 +440,40 @@ export class SqlCellStatusBarProvider implements NotebookCellStatusBarItemProvid
 
     private getIntegrationTypeLabel(type: ConfigurableDatabaseIntegrationType): string {
         switch (type) {
-            case 'pgsql':
-                return l10n.t('PostgreSQL');
+            case 'alloydb':
+                return l10n.t('AlloyDB');
+            case 'athena':
+                return l10n.t('Amazon Athena');
             case 'big-query':
                 return l10n.t('BigQuery');
+            case 'clickhouse':
+                return l10n.t('ClickHouse');
+            case 'databricks':
+                return l10n.t('Databricks');
+            case 'dremio':
+                return l10n.t('Dremio');
+            case 'mariadb':
+                return l10n.t('MariaDB');
+            case 'materialize':
+                return l10n.t('Materialize');
+            case 'mindsdb':
+                return l10n.t('MindsDB');
+            case 'mongodb':
+                return l10n.t('MongoDB');
+            case 'mysql':
+                return l10n.t('MySQL');
+            case 'pgsql':
+                return l10n.t('PostgreSQL');
+            case 'redshift':
+                return l10n.t('Amazon Redshift');
             case 'snowflake':
                 return l10n.t('Snowflake');
+            case 'spanner':
+                return l10n.t('Google Cloud Spanner');
+            case 'sql-server':
+                return l10n.t('SQL Server');
+            case 'trino':
+                return l10n.t('Trino');
             default:
                 return String(type);
         }
diff --git a/src/platform/common/utils/localize.ts b/src/platform/common/utils/localize.ts
index 73ae5d2c09..ad22d9bd38 100644
--- a/src/platform/common/utils/localize.ts
+++ b/src/platform/common/utils/localize.ts
@@ -837,6 +837,21 @@ export namespace Integrations {
     export const postgresTypeLabel = l10n.t('PostgreSQL');
     export const bigQueryTypeLabel = l10n.t('BigQuery');
     export const snowflakeTypeLabel = l10n.t('Snowflake');
+    export const alloyDBTypeLabel = l10n.t('AlloyDB');
+    export const athenaTypeLabel = l10n.t('Amazon Athena');
+    export const clickHouseTypeLabel = l10n.t('ClickHouse');
+    export const databricksTypeLabel = l10n.t('Databricks');
+    export const dremioTypeLabel = l10n.t('Dremio');
+    export const mariaDBTypeLabel = l10n.t('MariaDB');
+    export const materializeTypeLabel = l10n.t('Materialize');
+    export const mindsDBTypeLabel = l10n.t('MindsDB');
+    export const mongoDBTypeLabel = l10n.t('MongoDB');
+    export const mySQLTypeLabel = l10n.t('MySQL');
+    export const duckDBTypeLabel = l10n.t('DuckDB');
+    export const redshiftTypeLabel = l10n.t('Amazon Redshift');
+    export const spannerTypeLabel = l10n.t('Google Cloud Spanner');
+    export const sqlServerTypeLabel = l10n.t('SQL Server');
+    export const trinoTypeLabel = l10n.t('Trino');
 
     // PostgreSQL form strings
     export const postgresNameLabel = l10n.t('Name (optional)');
@@ -899,6 +914,200 @@ export namespace Integrations {
     export const snowflakeRolePlaceholder = l10n.t('');
     export const snowflakeWarehouseLabel = l10n.t('Warehouse (optional)');
     export const snowflakeWarehousePlaceholder = l10n.t('');
+
+    // MySQL form strings
+    export const mySQLNameLabel = l10n.t('Name (optional)');
+    export const mySQLNamePlaceholder = l10n.t('My MySQL Database');
+    export const mySQLHostLabel = l10n.t('Host');
+    export const mySQLHostPlaceholder = l10n.t('localhost');
+    export const mySQLPortLabel = l10n.t('Port');
+    export const mySQLDatabaseLabel = l10n.t('Database');
+    export const mySQLDatabasePlaceholder = l10n.t('my_database');
+    export const mySQLUsernameLabel = l10n.t('Username');
+    export const mySQLUsernamePlaceholder = l10n.t('username');
+    export const mySQLPasswordLabel = l10n.t('Password');
+    export const mySQLPasswordPlaceholder = l10n.t('••••••••');
+
+    // MariaDB form strings
+    export const mariaDBNameLabel = l10n.t('Name (optional)');
+    export const mariaDBNamePlaceholder = l10n.t('My MariaDB Database');
+    export const mariaDBHostLabel = l10n.t('Host');
+    export const mariaDBHostPlaceholder = l10n.t('localhost');
+    export const mariaDBPortLabel = l10n.t('Port');
+    export const mariaDBDatabaseLabel = l10n.t('Database');
+    export const mariaDBDatabasePlaceholder = l10n.t('my_database');
+    export const mariaDBUsernameLabel = l10n.t('Username');
+    export const mariaDBUsernamePlaceholder = l10n.t('username');
+    export const mariaDBPasswordLabel = l10n.t('Password');
+    export const mariaDBPasswordPlaceholder = l10n.t('••••••••');
+
+    // Athena form strings
+    export const athenaNameLabel = l10n.t('Name (optional)');
+    export const athenaNamePlaceholder = l10n.t('My Athena Database');
+    export const athenaAccessKeyIdLabel = l10n.t('AWS Access Key ID');
+    export const athenaAccessKeyIdPlaceholder = l10n.t('AKIAIOSFODNN7EXAMPLE');
+    export const athenaSecretAccessKeyLabel = l10n.t('AWS Secret Access Key');
+    export const athenaSecretAccessKeyPlaceholder = l10n.t('••••••••');
+    export const athenaRegionLabel = l10n.t('AWS Region');
+    export const athenaRegionPlaceholder = l10n.t('us-east-1');
+    export const athenaS3OutputPathLabel = l10n.t('S3 Output Path');
+    export const athenaS3OutputPathPlaceholder = l10n.t('s3://my-bucket/path/');
+    export const athenaWorkgroupLabel = l10n.t('Workgroup (optional)');
+    export const athenaWorkgroupPlaceholder = l10n.t('primary');
+
+    // Databricks form strings
+    export const databricksNameLabel = l10n.t('Name (optional)');
+    export const databricksNamePlaceholder = l10n.t('My Databricks Workspace');
+    export const databricksHostLabel = l10n.t('Server Hostname');
+    export const databricksHostPlaceholder = l10n.t('dbc-1234abcd-5678.cloud.databricks.com');
+    export const databricksHttpPathLabel = l10n.t('HTTP Path');
+    export const databricksHttpPathPlaceholder = l10n.t('/sql/1.0/warehouses/abc123');
+    export const databricksTokenLabel = l10n.t('Access Token');
+    export const databricksTokenPlaceholder = l10n.t('••••••••');
+    export const databricksPortLabel = l10n.t('Port');
+    export const databricksCatalogLabel = l10n.t('Catalog (optional)');
+    export const databricksCatalogPlaceholder = l10n.t('main');
+    export const databricksSchemaLabel = l10n.t('Schema (optional)');
+    export const databricksSchemaPlaceholder = l10n.t('default');
+
+    // Dremio form strings
+    export const dremioNameLabel = l10n.t('Name (optional)');
+    export const dremioNamePlaceholder = l10n.t('My Dremio Instance');
+    export const dremioHostLabel = l10n.t('Host');
+    export const dremioHostPlaceholder = l10n.t('dremio.example.com');
+    export const dremioPortLabel = l10n.t('Port');
+    export const dremioSchemaLabel = l10n.t('Schema');
+    export const dremioSchemaPlaceholder = l10n.t('my_schema');
+    export const dremioTokenLabel = l10n.t('Personal Access Token');
+    export const dremioTokenPlaceholder = l10n.t('••••••••');
+
+    // MongoDB form strings
+    export const mongoDBNameLabel = l10n.t('Name (optional)');
+    export const mongoDBNamePlaceholder = l10n.t('My MongoDB Database');
+    export const mongoDBConnectionStringLabel = l10n.t('Connection String');
+    export const mongoDBConnectionStringPlaceholder = l10n.t('mongodb://username:password@host:port/database');
+    export const mongoDBConnectionStringHelp = l10n.t(
+        'Enter your MongoDB connection string. Example: mongodb://user:pass@host:27017/mydb or mongodb+srv://user:pass@cluster.mongodb.net/mydb'
+    );
+
+    // Redshift form strings
+    export const redshiftNameLabel = l10n.t('Name (optional)');
+    export const redshiftNamePlaceholder = l10n.t('My Redshift Cluster');
+    export const redshiftAuthMethodLabel = l10n.t('Authentication Method');
+    export const redshiftAuthMethodUsernamePassword = l10n.t('Username and Password');
+    export const redshiftAuthMethodIndividualCredentials = l10n.t('Individual Credentials (IAM)');
+    export const redshiftAuthMethodHelp = l10n.t(
+        'Individual Credentials uses your AWS credentials configured in the environment.'
+    );
+    export const redshiftHostLabel = l10n.t('Cluster Endpoint');
+    export const redshiftHostPlaceholder = l10n.t('my-cluster.abc123.us-east-1.redshift.amazonaws.com');
+    export const redshiftPortLabel = l10n.t('Port');
+    export const redshiftDatabaseLabel = l10n.t('Database');
+    export const redshiftDatabasePlaceholder = l10n.t('dev');
+    export const redshiftUsernameLabel = l10n.t('Username');
+    export const redshiftUsernamePlaceholder = l10n.t('admin');
+    export const redshiftPasswordLabel = l10n.t('Password');
+    export const redshiftPasswordPlaceholder = l10n.t('••••••••');
+
+    // Spanner form strings
+    export const spannerNameLabel = l10n.t('Name (optional)');
+    export const spannerNamePlaceholder = l10n.t('My Spanner Database');
+    export const spannerInstanceLabel = l10n.t('Instance ID');
+    export const spannerInstancePlaceholder = l10n.t('my-instance');
+    export const spannerDatabaseLabel = l10n.t('Database');
+    export const spannerDatabasePlaceholder = l10n.t('my-database');
+    export const spannerServiceAccountLabel = l10n.t('Service Account JSON');
+    export const spannerServiceAccountPlaceholder = l10n.t(
+        '{\n  "type": "service_account",\n  "project_id": "...",\n  ...\n}'
+    );
+    export const spannerServiceAccountHelp = l10n.t(
+        'Paste the contents of your Google Cloud service account JSON key file.'
+    );
+    export const spannerServiceAccountInvalidJson = l10n.t('Invalid JSON format');
+    export const spannerDataBoostLabel = l10n.t('Enable Data Boost');
+    export const spannerDataBoostHelp = l10n.t(
+        'Data Boost provides independent compute resources for analytics queries.'
+    );
+
+    // AlloyDB form strings
+    export const alloyDBNameLabel = l10n.t('Name (optional)');
+    export const alloyDBNamePlaceholder = l10n.t('My AlloyDB Database');
+    export const alloyDBHostLabel = l10n.t('Host');
+    export const alloyDBHostPlaceholder = l10n.t('localhost');
+    export const alloyDBPortLabel = l10n.t('Port');
+    export const alloyDBDatabaseLabel = l10n.t('Database');
+    export const alloyDBDatabasePlaceholder = l10n.t('my_database');
+    export const alloyDBUsernameLabel = l10n.t('Username');
+    export const alloyDBUsernamePlaceholder = l10n.t('username');
+    export const alloyDBPasswordLabel = l10n.t('Password');
+    export const alloyDBPasswordPlaceholder = l10n.t('••••••••');
+
+    // ClickHouse form strings
+    export const clickHouseNameLabel = l10n.t('Name (optional)');
+    export const clickHouseNamePlaceholder = l10n.t('My ClickHouse Database');
+    export const clickHouseHostLabel = l10n.t('Host');
+    export const clickHouseHostPlaceholder = l10n.t('localhost');
+    export const clickHousePortLabel = l10n.t('Port');
+    export const clickHouseDatabaseLabel = l10n.t('Database');
+    export const clickHouseDatabasePlaceholder = l10n.t('my_database');
+    export const clickHouseUsernameLabel = l10n.t('Username');
+    export const clickHouseUsernamePlaceholder = l10n.t('username');
+    export const clickHousePasswordLabel = l10n.t('Password');
+    export const clickHousePasswordPlaceholder = l10n.t('••••••••');
+
+    // Materialize form strings
+    export const materializeNameLabel = l10n.t('Name (optional)');
+    export const materializeNamePlaceholder = l10n.t('My Materialize Database');
+    export const materializeHostLabel = l10n.t('Host');
+    export const materializeHostPlaceholder = l10n.t('localhost');
+    export const materializePortLabel = l10n.t('Port');
+    export const materializeDatabaseLabel = l10n.t('Database');
+    export const materializeDatabasePlaceholder = l10n.t('my_database');
+    export const materializeClusterLabel = l10n.t('Cluster');
+    export const materializeClusterPlaceholder = l10n.t('quickstart');
+    export const materializeUsernameLabel = l10n.t('Username');
+    export const materializeUsernamePlaceholder = l10n.t('username');
+    export const materializePasswordLabel = l10n.t('Password');
+    export const materializePasswordPlaceholder = l10n.t('••••••••');
+
+    // MindsDB form strings
+    export const mindsDBNameLabel = l10n.t('Name (optional)');
+    export const mindsDBNamePlaceholder = l10n.t('My MindsDB Database');
+    export const mindsDBHostLabel = l10n.t('Host');
+    export const mindsDBHostPlaceholder = l10n.t('localhost');
+    export const mindsDBPortLabel = l10n.t('Port');
+    export const mindsDBDatabaseLabel = l10n.t('Database');
+    export const mindsDBDatabasePlaceholder = l10n.t('my_database');
+    export const mindsDBUsernameLabel = l10n.t('Username');
+    export const mindsDBUsernamePlaceholder = l10n.t('username');
+    export const mindsDBPasswordLabel = l10n.t('Password');
+    export const mindsDBPasswordPlaceholder = l10n.t('••••••••');
+
+    // SQL Server form strings
+    export const sqlServerNameLabel = l10n.t('Name (optional)');
+    export const sqlServerNamePlaceholder = l10n.t('My SQL Server Database');
+    export const sqlServerHostLabel = l10n.t('Host');
+    export const sqlServerHostPlaceholder = l10n.t('localhost');
+    export const sqlServerPortLabel = l10n.t('Port');
+    export const sqlServerDatabaseLabel = l10n.t('Database');
+    export const sqlServerDatabasePlaceholder = l10n.t('my_database');
+    export const sqlServerUsernameLabel = l10n.t('Username');
+    export const sqlServerUsernamePlaceholder = l10n.t('username');
+    export const sqlServerPasswordLabel = l10n.t('Password');
+    export const sqlServerPasswordPlaceholder = l10n.t('••••••••');
+
+    // Trino form strings
+    export const trinoNameLabel = l10n.t('Name (optional)');
+    export const trinoNamePlaceholder = l10n.t('My Trino Database');
+    export const trinoHostLabel = l10n.t('Host');
+    export const trinoHostPlaceholder = l10n.t('localhost');
+    export const trinoPortLabel = l10n.t('Port');
+    export const trinoDatabaseLabel = l10n.t('Database');
+    export const trinoDatabasePlaceholder = l10n.t('my_database');
+    export const trinoUsernameLabel = l10n.t('Username');
+    export const trinoUsernamePlaceholder = l10n.t('username');
+    export const trinoPasswordLabel = l10n.t('Password');
+    export const trinoPasswordPlaceholder = l10n.t('••••••••');
 }
 
 export namespace SelectInputSettings {
diff --git a/src/webviews/webview-side/integrations/AlloyDBForm.tsx b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
new file mode 100644
index 0000000000..fbdc65318a
--- /dev/null
+++ b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+export interface IAlloyDBFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'alloydb' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'alloydb' }>) => void;
+    onCancel: () => void;
+}
+
+function createEmptyAlloyDBConfig(
+    integrationId: string,
+    defaultName?: string
+): Extract<DatabaseIntegrationConfig, { type: 'alloydb' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: integrationId,
+        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        type: 'alloydb',
+        metadata: {
+            host: '',
+            user: '',
+            password: '',
+            database: ''
+        }
+    };
+}
+
+export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'alloydb' }>>(
+        () => existingConfig || createEmptyAlloyDBConfig(integrationId, defaultName)
+    );
+
+    React.useEffect(() => {
+        if (existingConfig) {
+            setPendingConfig(existingConfig);
+        }
+    }, [existingConfig]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({ ...pendingConfig, name: e.target.value });
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, host: e.target.value }
+        });
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+        });
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, database: e.target.value }
+        });
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, user: e.target.value }
+        });
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, password: e.target.value }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">
+                    {getLocString('integrationsAlloyDBNameLabel' as any, 'Name (optional)')}
+                </label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsAlloyDBNamePlaceholder' as any, 'My AlloyDB Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsAlloyDBHostLabel' as any, 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsAlloyDBHostPlaceholder' as any, 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsAlloyDBPortLabel' as any, 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port || ''}
+                    onChange={handlePortChange}
+                    placeholder="5432"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsAlloyDBDatabaseLabel' as any, 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsAlloyDBDatabasePlaceholder' as any, 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsAlloyDBUsernameLabel' as any, 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsAlloyDBUsernamePlaceholder' as any, 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsAlloyDBPasswordLabel' as any, 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsAlloyDBPasswordPlaceholder' as any, '••••••••')}
+                    autoComplete="current-password"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/AthenaForm.tsx b/src/webviews/webview-side/integrations/AthenaForm.tsx
new file mode 100644
index 0000000000..7026a2c84a
--- /dev/null
+++ b/src/webviews/webview-side/integrations/AthenaForm.tsx
@@ -0,0 +1,184 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+function createEmptyAthenaConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'athena' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'athena',
+        metadata: {
+            access_key_id: '',
+            secret_access_key: '',
+            region: '',
+            s3_output_path: '',
+            workgroup: ''
+        }
+    };
+}
+
+export interface IAthenaFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'athena' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'athena' }>) => void;
+    onCancel: () => void;
+}
+
+export const AthenaForm: React.FC<IAthenaFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'athena' }>>(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyAthenaConfig({ id: integrationId, name: defaultName })
+    );
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyAthenaConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleAccessKeyIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, access_key_id: e.target.value } }));
+    };
+
+    const handleSecretAccessKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, secret_access_key: e.target.value } }));
+    };
+
+    const handleRegionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, region: e.target.value } }));
+    };
+
+    const handleS3OutputPathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, s3_output_path: e.target.value } }));
+    };
+
+    const handleWorkgroupChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, workgroup: e.target.value } }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsAthenaNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsAthenaNamePlaceholder', 'My Athena Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="access_key_id">
+                    {getLocString('integrationsAthenaAccessKeyIdLabel', 'AWS Access Key ID')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="access_key_id"
+                    value={pendingConfig.metadata.access_key_id}
+                    onChange={handleAccessKeyIdChange}
+                    placeholder={getLocString('integrationsAthenaAccessKeyIdPlaceholder', 'AKIAIOSFODNN7EXAMPLE')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="secret_access_key">
+                    {getLocString('integrationsAthenaSecretAccessKeyLabel', 'AWS Secret Access Key')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="secret_access_key"
+                    value={pendingConfig.metadata.secret_access_key}
+                    onChange={handleSecretAccessKeyChange}
+                    placeholder={getLocString('integrationsAthenaSecretAccessKeyPlaceholder', '••••••••')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="region">
+                    {getLocString('integrationsAthenaRegionLabel', 'AWS Region')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="region"
+                    value={pendingConfig.metadata.region}
+                    onChange={handleRegionChange}
+                    placeholder={getLocString('integrationsAthenaRegionPlaceholder', 'us-east-1')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="s3_output_path">
+                    {getLocString('integrationsAthenaS3OutputPathLabel', 'S3 Output Path')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="s3_output_path"
+                    value={pendingConfig.metadata.s3_output_path}
+                    onChange={handleS3OutputPathChange}
+                    placeholder={getLocString('integrationsAthenaS3OutputPathPlaceholder', 's3://my-bucket/path/')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="workgroup">{getLocString('integrationsAthenaWorkgroupLabel', 'Workgroup (optional)')}</label>
+                <input
+                    type="text"
+                    id="workgroup"
+                    value={pendingConfig.metadata.workgroup || ''}
+                    onChange={handleWorkgroupChange}
+                    placeholder={getLocString('integrationsAthenaWorkgroupPlaceholder', 'primary')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/ClickHouseForm.tsx b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
new file mode 100644
index 0000000000..f5a1caadf4
--- /dev/null
+++ b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+export interface IClickHouseFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }>) => void;
+    onCancel: () => void;
+}
+
+function createEmptyClickHouseConfig(
+    integrationId: string,
+    defaultName?: string
+): Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: integrationId,
+        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        type: 'clickhouse',
+        metadata: {
+            host: '',
+            user: '',
+            database: ''
+        }
+    };
+}
+
+export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }>>(
+        () => existingConfig || createEmptyClickHouseConfig(integrationId, defaultName)
+    );
+
+    React.useEffect(() => {
+        if (existingConfig) {
+            setPendingConfig(existingConfig);
+        }
+    }, [existingConfig]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({ ...pendingConfig, name: e.target.value });
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, host: e.target.value }
+        });
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+        });
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, database: e.target.value }
+        });
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, user: e.target.value }
+        });
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, password: e.target.value || undefined }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">
+                    {getLocString('integrationsClickHouseNameLabel' as any, 'Name (optional)')}
+                </label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsClickHouseNamePlaceholder' as any, 'My ClickHouse Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsClickHouseHostLabel' as any, 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsClickHouseHostPlaceholder' as any, 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsClickHousePortLabel' as any, 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port || ''}
+                    onChange={handlePortChange}
+                    placeholder="8123"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsClickHouseDatabaseLabel' as any, 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsClickHouseDatabasePlaceholder' as any, 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsClickHouseUsernameLabel' as any, 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsClickHouseUsernamePlaceholder' as any, 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">{getLocString('integrationsClickHousePasswordLabel' as any, 'Password')}</label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password || ''}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsClickHousePasswordPlaceholder' as any, '••••••••')}
+                    autoComplete="current-password"
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/ConfigurationForm.tsx b/src/webviews/webview-side/integrations/ConfigurationForm.tsx
index ac8dfc256e..62e4fc94b8 100644
--- a/src/webviews/webview-side/integrations/ConfigurationForm.tsx
+++ b/src/webviews/webview-side/integrations/ConfigurationForm.tsx
@@ -1,8 +1,22 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
-import { PostgresForm } from './PostgresForm';
+import { AlloyDBForm } from './AlloyDBForm';
+import { AthenaForm } from './AthenaForm';
 import { BigQueryForm } from './BigQueryForm';
+import { ClickHouseForm } from './ClickHouseForm';
+import { DatabricksForm } from './DatabricksForm';
+import { DremioForm } from './DremioForm';
+import { MariaDBForm } from './MariaDBForm';
+import { MaterializeForm } from './MaterializeForm';
+import { MindsDBForm } from './MindsDBForm';
+import { MongoDBForm } from './MongoDBForm';
+import { MySQLForm } from './MySQLForm';
+import { PostgresForm } from './PostgresForm';
+import { RedshiftForm } from './RedshiftForm';
 import { SnowflakeForm } from './SnowflakeForm';
+import { SpannerForm } from './SpannerForm';
+import { SQLServerForm } from './SQLServerForm';
+import { TrinoForm } from './TrinoForm';
 import { ConfigurableDatabaseIntegrationConfig, ConfigurableDatabaseIntegrationType } from './types';
 
 export interface IConfigurationFormProps {
@@ -70,6 +84,146 @@ export const ConfigurationForm: React.FC<IConfigurationFormProps> = ({
                                         onCancel={onCancel}
                                     />
                                 );
+                            case 'mysql':
+                                return (
+                                    <MySQLForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'mysql' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'mariadb':
+                                return (
+                                    <MariaDBForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'mariadb' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'alloydb':
+                                return (
+                                    <AlloyDBForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'alloydb' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'clickhouse':
+                                return (
+                                    <ClickHouseForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'clickhouse' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'materialize':
+                                return (
+                                    <MaterializeForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'materialize' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'mindsdb':
+                                return (
+                                    <MindsDBForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'mindsdb' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'sql-server':
+                                return (
+                                    <SQLServerForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'sql-server' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'trino':
+                                return (
+                                    <TrinoForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'trino' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'athena':
+                                return (
+                                    <AthenaForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'athena' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'databricks':
+                                return (
+                                    <DatabricksForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'databricks' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'dremio':
+                                return (
+                                    <DremioForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'dremio' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'mongodb':
+                                return (
+                                    <MongoDBForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'mongodb' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'redshift':
+                                return (
+                                    <RedshiftForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'redshift' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
+                            case 'spanner':
+                                return (
+                                    <SpannerForm
+                                        integrationId={integrationId}
+                                        existingConfig={existingConfig?.type === 'spanner' ? existingConfig : null}
+                                        defaultName={defaultName}
+                                        onSave={onSave}
+                                        onCancel={onCancel}
+                                    />
+                                );
                             default: {
                                 const unsupportedMessage = getLocString(
                                     'integrationsUnsupportedIntegrationType',
diff --git a/src/webviews/webview-side/integrations/DatabricksForm.tsx b/src/webviews/webview-side/integrations/DatabricksForm.tsx
new file mode 100644
index 0000000000..03d9c92612
--- /dev/null
+++ b/src/webviews/webview-side/integrations/DatabricksForm.tsx
@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+function createEmptyDatabricksConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'databricks' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'databricks',
+        metadata: {
+            host: '',
+            port: '443',
+            httpPath: '',
+            token: '',
+            schema: '',
+            catalog: ''
+        }
+    };
+}
+
+export interface IDatabricksFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'databricks' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'databricks' }>) => void;
+    onCancel: () => void;
+}
+
+export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'databricks' }>>(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyDatabricksConfig({ id: integrationId, name: defaultName })
+    );
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyDatabricksConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+    };
+
+    const handleHttpPathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, httpPath: e.target.value } }));
+    };
+
+    const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, token: e.target.value } }));
+    };
+
+    const handleSchemaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, schema: e.target.value } }));
+    };
+
+    const handleCatalogChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, catalog: e.target.value } }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsDatabricksNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsDatabricksNamePlaceholder', 'My Databricks Workspace')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsDatabricksHostLabel', 'Server Hostname')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsDatabricksHostPlaceholder', 'dbc-1234abcd-5678.cloud.databricks.com')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="httpPath">
+                    {getLocString('integrationsDatabricksHttpPathLabel', 'HTTP Path')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="httpPath"
+                    value={pendingConfig.metadata.httpPath}
+                    onChange={handleHttpPathChange}
+                    placeholder={getLocString('integrationsDatabricksHttpPathPlaceholder', '/sql/1.0/warehouses/abc123')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="token">
+                    {getLocString('integrationsDatabricksTokenLabel', 'Access Token')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="token"
+                    value={pendingConfig.metadata.token}
+                    onChange={handleTokenChange}
+                    placeholder={getLocString('integrationsDatabricksTokenPlaceholder', '••••••••')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsDatabricksPortLabel', 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port}
+                    onChange={handlePortChange}
+                    placeholder="443"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="catalog">{getLocString('integrationsDatabricksCatalogLabel', 'Catalog (optional)')}</label>
+                <input
+                    type="text"
+                    id="catalog"
+                    value={pendingConfig.metadata.catalog || ''}
+                    onChange={handleCatalogChange}
+                    placeholder={getLocString('integrationsDatabricksCatalogPlaceholder', 'main')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="schema">{getLocString('integrationsDatabricksSchemaLabel', 'Schema (optional)')}</label>
+                <input
+                    type="text"
+                    id="schema"
+                    value={pendingConfig.metadata.schema || ''}
+                    onChange={handleSchemaChange}
+                    placeholder={getLocString('integrationsDatabricksSchemaPlaceholder', 'default')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/DremioForm.tsx b/src/webviews/webview-side/integrations/DremioForm.tsx
new file mode 100644
index 0000000000..f7e140cd80
--- /dev/null
+++ b/src/webviews/webview-side/integrations/DremioForm.tsx
@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+function createEmptyDremioConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'dremio' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'dremio',
+        metadata: {
+            host: '',
+            port: '9047',
+            schema: '',
+            token: ''
+        }
+    };
+}
+
+export interface IDremioFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'dremio' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'dremio' }>) => void;
+    onCancel: () => void;
+}
+
+export const DremioForm: React.FC<IDremioFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'dremio' }>>(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyDremioConfig({ id: integrationId, name: defaultName })
+    );
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyDremioConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+    };
+
+    const handleSchemaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, schema: e.target.value } }));
+    };
+
+    const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, token: e.target.value } }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsDremioNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsDremioNamePlaceholder', 'My Dremio Instance')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsDremioHostLabel', 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsDremioHostPlaceholder', 'dremio.example.com')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsDremioPortLabel', 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port}
+                    onChange={handlePortChange}
+                    placeholder="9047"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="schema">
+                    {getLocString('integrationsDremioSchemaLabel', 'Schema')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="schema"
+                    value={pendingConfig.metadata.schema}
+                    onChange={handleSchemaChange}
+                    placeholder={getLocString('integrationsDremioSchemaPlaceholder', 'my_schema')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="token">
+                    {getLocString('integrationsDremioTokenLabel', 'Personal Access Token')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="token"
+                    value={pendingConfig.metadata.token}
+                    onChange={handleTokenChange}
+                    placeholder={getLocString('integrationsDremioTokenPlaceholder', '••••••••')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/IntegrationItem.tsx b/src/webviews/webview-side/integrations/IntegrationItem.tsx
index 2eaad767b1..20332bddb6 100644
--- a/src/webviews/webview-side/integrations/IntegrationItem.tsx
+++ b/src/webviews/webview-side/integrations/IntegrationItem.tsx
@@ -10,12 +10,40 @@ export interface IIntegrationItemProps {
 
 const getIntegrationTypeLabel = (type: ConfigurableDatabaseIntegrationType): string => {
     switch (type) {
-        case 'pgsql':
-            return getLocString('integrationsPostgresTypeLabel', 'PostgreSQL');
+        case 'alloydb':
+            return getLocString('integrationsAlloyDBTypeLabel', 'AlloyDB');
+        case 'athena':
+            return getLocString('integrationsAthenaTypeLabel', 'Amazon Athena');
         case 'big-query':
             return getLocString('integrationsBigQueryTypeLabel', 'BigQuery');
+        case 'clickhouse':
+            return getLocString('integrationsClickHouseTypeLabel', 'ClickHouse');
+        case 'databricks':
+            return getLocString('integrationsDatabricksTypeLabel', 'Databricks');
+        case 'dremio':
+            return getLocString('integrationsDremioTypeLabel', 'Dremio');
+        case 'mariadb':
+            return getLocString('integrationsMariaDBTypeLabel', 'MariaDB');
+        case 'materialize':
+            return getLocString('integrationsMaterializeTypeLabel', 'Materialize');
+        case 'mindsdb':
+            return getLocString('integrationsMindsDBTypeLabel', 'MindsDB');
+        case 'mongodb':
+            return getLocString('integrationsMongoDBTypeLabel', 'MongoDB');
+        case 'mysql':
+            return getLocString('integrationsMySQLTypeLabel', 'MySQL');
+        case 'pgsql':
+            return getLocString('integrationsPostgresTypeLabel', 'PostgreSQL');
+        case 'redshift':
+            return getLocString('integrationsRedshiftTypeLabel', 'Amazon Redshift');
         case 'snowflake':
             return getLocString('integrationsSnowflakeTypeLabel', 'Snowflake');
+        case 'spanner':
+            return getLocString('integrationsSpannerTypeLabel', 'Google Cloud Spanner');
+        case 'sql-server':
+            return getLocString('integrationsSQLServerTypeLabel', 'SQL Server');
+        case 'trino':
+            return getLocString('integrationsTrinoTypeLabel', 'Trino');
         default:
             return type;
     }
diff --git a/src/webviews/webview-side/integrations/MariaDBForm.tsx b/src/webviews/webview-side/integrations/MariaDBForm.tsx
new file mode 100644
index 0000000000..aeab80a964
--- /dev/null
+++ b/src/webviews/webview-side/integrations/MariaDBForm.tsx
@@ -0,0 +1,184 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+function createEmptyMariaDBConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'mariadb' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'mariadb',
+        metadata: {
+            host: '',
+            port: '3306',
+            database: '',
+            user: '',
+            password: ''
+        }
+    };
+}
+
+export interface IMariaDBFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'mariadb' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'mariadb' }>) => void;
+    onCancel: () => void;
+}
+
+export const MariaDBForm: React.FC<IMariaDBFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'mariadb' }>>(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyMariaDBConfig({ id: integrationId, name: defaultName })
+    );
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyMariaDBConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: e.target.value } }));
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsMariaDBNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsMariaDBNamePlaceholder', 'My MariaDB Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsMariaDBHostLabel', 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsMariaDBHostPlaceholder', 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsMariaDBPortLabel', 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port}
+                    onChange={handlePortChange}
+                    placeholder="3306"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsMariaDBDatabaseLabel', 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsMariaDBDatabasePlaceholder', 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsMariaDBUsernameLabel', 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsMariaDBUsernamePlaceholder', 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsMariaDBPasswordLabel', 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsMariaDBPasswordPlaceholder', '••••••••')}
+                    autoComplete="current-password"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
new file mode 100644
index 0000000000..9934f9a123
--- /dev/null
+++ b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -0,0 +1,223 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+export interface IMaterializeFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'materialize' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'materialize' }>) => void;
+    onCancel: () => void;
+}
+
+function createEmptyMaterializeConfig(
+    integrationId: string,
+    defaultName?: string
+): Extract<DatabaseIntegrationConfig, { type: 'materialize' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: integrationId,
+        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        type: 'materialize',
+        metadata: {
+            host: '',
+            user: '',
+            password: '',
+            database: '',
+            cluster: ''
+        }
+    };
+}
+
+export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'materialize' }>>(
+        () => existingConfig || createEmptyMaterializeConfig(integrationId, defaultName)
+    );
+
+    React.useEffect(() => {
+        if (existingConfig) {
+            setPendingConfig(existingConfig);
+        }
+    }, [existingConfig]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({ ...pendingConfig, name: e.target.value });
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, host: e.target.value }
+        });
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+        });
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, database: e.target.value }
+        });
+    };
+
+    const handleClusterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, cluster: e.target.value }
+        });
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, user: e.target.value }
+        });
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, password: e.target.value }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">
+                    {getLocString('integrationsMaterializeNameLabel' as any, 'Name (optional)')}
+                </label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString(
+                        'integrationsMaterializeNamePlaceholder' as any,
+                        'My Materialize Database'
+                    )}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsMaterializeHostLabel' as any, 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsMaterializeHostPlaceholder' as any, 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsMaterializePortLabel' as any, 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port || ''}
+                    onChange={handlePortChange}
+                    placeholder="6875"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsMaterializeDatabaseLabel' as any, 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsMaterializeDatabasePlaceholder' as any, 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="cluster">
+                    {getLocString('integrationsMaterializeClusterLabel' as any, 'Cluster')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="cluster"
+                    value={pendingConfig.metadata.cluster}
+                    onChange={handleClusterChange}
+                    placeholder={getLocString('integrationsMaterializeClusterPlaceholder' as any, 'quickstart')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsMaterializeUsernameLabel' as any, 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsMaterializeUsernamePlaceholder' as any, 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsMaterializePasswordLabel' as any, 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsMaterializePasswordPlaceholder' as any, '••••••••')}
+                    autoComplete="current-password"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/MindsDBForm.tsx b/src/webviews/webview-side/integrations/MindsDBForm.tsx
new file mode 100644
index 0000000000..d4032de4cd
--- /dev/null
+++ b/src/webviews/webview-side/integrations/MindsDBForm.tsx
@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+export interface IMindsDBFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }>) => void;
+    onCancel: () => void;
+}
+
+function createEmptyMindsDBConfig(
+    integrationId: string,
+    defaultName?: string
+): Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: integrationId,
+        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        type: 'mindsdb',
+        metadata: {
+            host: '',
+            user: '',
+            password: '',
+            database: ''
+        }
+    };
+}
+
+export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }>>(
+        () => existingConfig || createEmptyMindsDBConfig(integrationId, defaultName)
+    );
+
+    React.useEffect(() => {
+        if (existingConfig) {
+            setPendingConfig(existingConfig);
+        }
+    }, [existingConfig]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({ ...pendingConfig, name: e.target.value });
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, host: e.target.value }
+        });
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+        });
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, database: e.target.value }
+        });
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, user: e.target.value }
+        });
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, password: e.target.value }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">
+                    {getLocString('integrationsMindsDBNameLabel' as any, 'Name (optional)')}
+                </label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsMindsDBNamePlaceholder' as any, 'My MindsDB Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsMindsDBHostLabel' as any, 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsMindsDBHostPlaceholder' as any, 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsMindsDBPortLabel' as any, 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port || ''}
+                    onChange={handlePortChange}
+                    placeholder="47334"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsMindsDBDatabaseLabel' as any, 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsMindsDBDatabasePlaceholder' as any, 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsMindsDBUsernameLabel' as any, 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsMindsDBUsernamePlaceholder' as any, 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsMindsDBPasswordLabel' as any, 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsMindsDBPasswordPlaceholder' as any, '••••••••')}
+                    autoComplete="current-password"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/MongoDBForm.tsx b/src/webviews/webview-side/integrations/MongoDBForm.tsx
new file mode 100644
index 0000000000..468999589e
--- /dev/null
+++ b/src/webviews/webview-side/integrations/MongoDBForm.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+function createEmptyMongoDBConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'mongodb' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'mongodb',
+        metadata: {
+            connection_string: ''
+        }
+    };
+}
+
+export interface IMongoDBFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'mongodb' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'mongodb' }>) => void;
+    onCancel: () => void;
+}
+
+export const MongoDBForm: React.FC<IMongoDBFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'mongodb' }>>(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyMongoDBConfig({ id: integrationId, name: defaultName })
+    );
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyMongoDBConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleConnectionStringChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, connection_string: e.target.value } }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsMongoDBNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsMongoDBNamePlaceholder', 'My MongoDB Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="connection_string">
+                    {getLocString('integrationsMongoDBConnectionStringLabel', 'Connection String')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <textarea
+                    id="connection_string"
+                    value={pendingConfig.metadata.connection_string}
+                    onChange={handleConnectionStringChange}
+                    placeholder={getLocString(
+                        'integrationsMongoDBConnectionStringPlaceholder',
+                        'mongodb://username:password@host:port/database'
+                    )}
+                    rows={4}
+                    required
+                />
+                <small className="form-help">
+                    {getLocString(
+                        'integrationsMongoDBConnectionStringHelp',
+                        'Enter your MongoDB connection string. Example: mongodb://user:pass@host:27017/mydb or mongodb+srv://user:pass@cluster.mongodb.net/mydb'
+                    )}
+                </small>
+            </div>
+
+            <div className="form-actions">
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/MySQLForm.tsx b/src/webviews/webview-side/integrations/MySQLForm.tsx
new file mode 100644
index 0000000000..e46e0b7d03
--- /dev/null
+++ b/src/webviews/webview-side/integrations/MySQLForm.tsx
@@ -0,0 +1,182 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+function createEmptyMySQLConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'mysql' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'mysql',
+        metadata: {
+            host: '',
+            port: '3306',
+            database: '',
+            user: '',
+            password: ''
+        }
+    };
+}
+
+export interface IMySQLFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'mysql' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'mysql' }>) => void;
+    onCancel: () => void;
+}
+
+export const MySQLForm: React.FC<IMySQLFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'mysql' }>>(
+        existingConfig ? structuredClone(existingConfig) : createEmptyMySQLConfig({ id: integrationId, name: defaultName })
+    );
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyMySQLConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: e.target.value } }));
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsMySQLNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsMySQLNamePlaceholder', 'My MySQL Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsMySQLHostLabel', 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsMySQLHostPlaceholder', 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsMySQLPortLabel', 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port}
+                    onChange={handlePortChange}
+                    placeholder="3306"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsMySQLDatabaseLabel', 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsMySQLDatabasePlaceholder', 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsMySQLUsernameLabel', 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsMySQLUsernamePlaceholder', 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsMySQLPasswordLabel', 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsMySQLPasswordPlaceholder', '••••••••')}
+                    autoComplete="current-password"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/RedshiftForm.tsx b/src/webviews/webview-side/integrations/RedshiftForm.tsx
new file mode 100644
index 0000000000..e3c826f4bf
--- /dev/null
+++ b/src/webviews/webview-side/integrations/RedshiftForm.tsx
@@ -0,0 +1,238 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+type RedshiftConfig = Extract<DatabaseIntegrationConfig, { type: 'redshift' }>;
+
+function createEmptyRedshiftConfig(params: { id: string; name?: string }): RedshiftConfig {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'redshift',
+        metadata: {
+            authMethod: 'username-and-password',
+            host: '',
+            port: '5439',
+            database: '',
+            user: '',
+            password: ''
+        }
+    };
+}
+
+export interface IRedshiftFormProps {
+    integrationId: string;
+    existingConfig: RedshiftConfig | null;
+    defaultName?: string;
+    onSave: (config: RedshiftConfig) => void;
+    onCancel: () => void;
+}
+
+export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<RedshiftConfig>(
+        existingConfig ? structuredClone(existingConfig) : createEmptyRedshiftConfig({ id: integrationId, name: defaultName })
+    );
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyRedshiftConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleAuthMethodChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const authMethod = e.target.value as 'username-and-password' | 'individual-credentials';
+        if (authMethod === 'username-and-password') {
+            setPendingConfig((prev) => ({
+                ...prev,
+                metadata: {
+                    authMethod: 'username-and-password',
+                    host: prev.metadata.host,
+                    port: prev.metadata.port,
+                    database: prev.metadata.database,
+                    user: '',
+                    password: ''
+                }
+            }));
+        } else {
+            setPendingConfig((prev) => ({
+                ...prev,
+                metadata: {
+                    authMethod: 'individual-credentials',
+                    host: prev.metadata.host,
+                    port: prev.metadata.port,
+                    database: prev.metadata.database
+                }
+            }));
+        }
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (pendingConfig.metadata.authMethod === 'username-and-password') {
+            setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: e.target.value } }));
+        }
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (pendingConfig.metadata.authMethod === 'username-and-password') {
+            setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
+        }
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsRedshiftNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsRedshiftNamePlaceholder', 'My Redshift Cluster')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="authMethod">
+                    {getLocString('integrationsRedshiftAuthMethodLabel', 'Authentication Method')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <select id="authMethod" value={pendingConfig.metadata.authMethod} onChange={handleAuthMethodChange}>
+                    <option value="username-and-password">
+                        {getLocString('integrationsRedshiftAuthMethodUsernamePassword', 'Username and Password')}
+                    </option>
+                    <option value="individual-credentials">
+                        {getLocString('integrationsRedshiftAuthMethodIndividualCredentials', 'Individual Credentials (IAM)')}
+                    </option>
+                </select>
+                <small className="form-help">
+                    {getLocString(
+                        'integrationsRedshiftAuthMethodHelp',
+                        'Individual Credentials uses your AWS credentials configured in the environment.'
+                    )}
+                </small>
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsRedshiftHostLabel', 'Cluster Endpoint')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsRedshiftHostPlaceholder', 'my-cluster.abc123.us-east-1.redshift.amazonaws.com')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsRedshiftPortLabel', 'Port')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port || '5439'}
+                    onChange={handlePortChange}
+                    placeholder="5439"
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsRedshiftDatabaseLabel', 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsRedshiftDatabasePlaceholder', 'dev')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            {pendingConfig.metadata.authMethod === 'username-and-password' && (
+                <>
+                    <div className="form-group">
+                        <label htmlFor="username">
+                            {getLocString('integrationsRedshiftUsernameLabel', 'Username')}{' '}
+                            <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="username"
+                            value={pendingConfig.metadata.user}
+                            onChange={handleUsernameChange}
+                            placeholder={getLocString('integrationsRedshiftUsernamePlaceholder', 'admin')}
+                            autoComplete="username"
+                            required
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="password">
+                            {getLocString('integrationsRedshiftPasswordLabel', 'Password')}{' '}
+                            <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                        </label>
+                        <input
+                            type="password"
+                            id="password"
+                            value={pendingConfig.metadata.password}
+                            onChange={handlePasswordChange}
+                            placeholder={getLocString('integrationsRedshiftPasswordPlaceholder', '••••••••')}
+                            autoComplete="current-password"
+                            required
+                        />
+                    </div>
+                </>
+            )}
+
+            <div className="form-actions">
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/SQLServerForm.tsx b/src/webviews/webview-side/integrations/SQLServerForm.tsx
new file mode 100644
index 0000000000..6d29bc1648
--- /dev/null
+++ b/src/webviews/webview-side/integrations/SQLServerForm.tsx
@@ -0,0 +1,201 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+export interface ISQLServerFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'sql-server' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'sql-server' }>) => void;
+    onCancel: () => void;
+}
+
+function createEmptySQLServerConfig(
+    integrationId: string,
+    defaultName?: string
+): Extract<DatabaseIntegrationConfig, { type: 'sql-server' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: integrationId,
+        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        type: 'sql-server',
+        metadata: {
+            host: '',
+            user: '',
+            password: '',
+            database: '',
+            port: '1433'
+        }
+    };
+}
+
+export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'sql-server' }>>(
+        () => existingConfig || createEmptySQLServerConfig(integrationId, defaultName)
+    );
+
+    React.useEffect(() => {
+        if (existingConfig) {
+            setPendingConfig(existingConfig);
+        }
+    }, [existingConfig]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({ ...pendingConfig, name: e.target.value });
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, host: e.target.value }
+        });
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, port: e.target.value }
+        });
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, database: e.target.value }
+        });
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, user: e.target.value }
+        });
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, password: e.target.value }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">
+                    {getLocString('integrationsSQLServerNameLabel' as any, 'Name (optional)')}
+                </label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsSQLServerNamePlaceholder' as any, 'My SQL Server Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsSQLServerHostLabel' as any, 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsSQLServerHostPlaceholder' as any, 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">
+                    {getLocString('integrationsSQLServerPortLabel' as any, 'Port')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port}
+                    onChange={handlePortChange}
+                    placeholder="1433"
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsSQLServerDatabaseLabel' as any, 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsSQLServerDatabasePlaceholder' as any, 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsSQLServerUsernameLabel' as any, 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsSQLServerUsernamePlaceholder' as any, 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsSQLServerPasswordLabel' as any, 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsSQLServerPasswordPlaceholder' as any, '••••••••')}
+                    autoComplete="current-password"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/SpannerForm.tsx b/src/webviews/webview-side/integrations/SpannerForm.tsx
new file mode 100644
index 0000000000..a08bbb0e7d
--- /dev/null
+++ b/src/webviews/webview-side/integrations/SpannerForm.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+function createEmptySpannerConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'spanner' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
+        type: 'spanner',
+        metadata: {
+            instance: '',
+            database: '',
+            service_account: '',
+            dataBoostEnabled: false
+        }
+    };
+}
+
+export interface ISpannerFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'spanner' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'spanner' }>) => void;
+    onCancel: () => void;
+}
+
+export const SpannerForm: React.FC<ISpannerFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'spanner' }>>(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptySpannerConfig({ id: integrationId, name: defaultName })
+    );
+    const [serviceAccountError, setServiceAccountError] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptySpannerConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+    };
+
+    const handleInstanceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, instance: e.target.value } }));
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+    };
+
+    const handleServiceAccountChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = e.target.value;
+        setServiceAccountError(null);
+
+        // Try to parse as JSON to validate
+        if (value.trim()) {
+            try {
+                JSON.parse(value);
+            } catch (err) {
+                setServiceAccountError(
+                    getLocString('integrationsSpannerServiceAccountInvalidJson', 'Invalid JSON format')
+                );
+            }
+        }
+
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, service_account: value } }));
+    };
+
+    const handleDataBoostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, dataBoostEnabled: e.target.checked } }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        // Validate service account JSON
+        if (pendingConfig.metadata.service_account.trim()) {
+            try {
+                JSON.parse(pendingConfig.metadata.service_account);
+            } catch (err) {
+                setServiceAccountError(
+                    getLocString('integrationsSpannerServiceAccountInvalidJson', 'Invalid JSON format')
+                );
+                return;
+            }
+        }
+
+        onSave(pendingConfig);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsSpannerNameLabel', 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsSpannerNamePlaceholder', 'My Spanner Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="instance">
+                    {getLocString('integrationsSpannerInstanceLabel', 'Instance ID')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="instance"
+                    value={pendingConfig.metadata.instance}
+                    onChange={handleInstanceChange}
+                    placeholder={getLocString('integrationsSpannerInstancePlaceholder', 'my-instance')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsSpannerDatabaseLabel', 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsSpannerDatabasePlaceholder', 'my-database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="service_account">
+                    {getLocString('integrationsSpannerServiceAccountLabel', 'Service Account JSON')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <textarea
+                    id="service_account"
+                    value={pendingConfig.metadata.service_account}
+                    onChange={handleServiceAccountChange}
+                    placeholder={getLocString(
+                        'integrationsSpannerServiceAccountPlaceholder',
+                        '{\n  "type": "service_account",\n  "project_id": "...",\n  ...\n}'
+                    )}
+                    rows={8}
+                    required
+                    className={serviceAccountError ? 'error' : ''}
+                />
+                {serviceAccountError && <div className="error-message">{serviceAccountError}</div>}
+                <small className="form-help">
+                    {getLocString(
+                        'integrationsSpannerServiceAccountHelp',
+                        'Paste the contents of your Google Cloud service account JSON key file.'
+                    )}
+                </small>
+            </div>
+
+            <div className="form-group">
+                <label>
+                    <input
+                        type="checkbox"
+                        checked={pendingConfig.metadata.dataBoostEnabled}
+                        onChange={handleDataBoostChange}
+                    />
+                    {' '}
+                    {getLocString('integrationsSpannerDataBoostLabel', 'Enable Data Boost')}
+                </label>
+                <small className="form-help">
+                    {getLocString(
+                        'integrationsSpannerDataBoostHelp',
+                        'Data Boost provides independent compute resources for analytics queries.'
+                    )}
+                </small>
+            </div>
+
+            <div className="form-actions">
+                <button type="submit" className="primary" disabled={!!serviceAccountError}>
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+            </div>
+        </form>
+    );
+};
+
diff --git a/src/webviews/webview-side/integrations/TrinoForm.tsx b/src/webviews/webview-side/integrations/TrinoForm.tsx
new file mode 100644
index 0000000000..b667644995
--- /dev/null
+++ b/src/webviews/webview-side/integrations/TrinoForm.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react';
+import { format, getLocString } from '../react-common/locReactSide';
+import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+
+export interface ITrinoFormProps {
+    integrationId: string;
+    existingConfig: Extract<DatabaseIntegrationConfig, { type: 'trino' }> | null;
+    defaultName?: string;
+    onSave: (config: Extract<DatabaseIntegrationConfig, { type: 'trino' }>) => void;
+    onCancel: () => void;
+}
+
+function createEmptyTrinoConfig(
+    integrationId: string,
+    defaultName?: string
+): Extract<DatabaseIntegrationConfig, { type: 'trino' }> {
+    const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
+
+    return {
+        id: integrationId,
+        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        type: 'trino',
+        metadata: {
+            host: '',
+            user: '',
+            password: '',
+            database: '',
+            port: '8080'
+        }
+    };
+}
+
+export const TrinoForm: React.FC<ITrinoFormProps> = ({ integrationId, existingConfig, defaultName, onSave, onCancel }) => {
+    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'trino' }>>(
+        () => existingConfig || createEmptyTrinoConfig(integrationId, defaultName)
+    );
+
+    React.useEffect(() => {
+        if (existingConfig) {
+            setPendingConfig(existingConfig);
+        }
+    }, [existingConfig]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSave(pendingConfig);
+    };
+
+    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({ ...pendingConfig, name: e.target.value });
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, host: e.target.value }
+        });
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, port: e.target.value }
+        });
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, database: e.target.value }
+        });
+    };
+
+    const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, user: e.target.value }
+        });
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, password: e.target.value }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">{getLocString('integrationsTrinoNameLabel' as any, 'Name (optional)')}</label>
+                <input
+                    type="text"
+                    id="name"
+                    value={pendingConfig.name}
+                    onChange={handleNameChange}
+                    placeholder={getLocString('integrationsTrinoNamePlaceholder' as any, 'My Trino Database')}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">
+                    {getLocString('integrationsTrinoHostLabel' as any, 'Host')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host}
+                    onChange={handleHostChange}
+                    placeholder={getLocString('integrationsTrinoHostPlaceholder' as any, 'localhost')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">
+                    {getLocString('integrationsTrinoPortLabel' as any, 'Port')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port}
+                    onChange={handlePortChange}
+                    placeholder="8080"
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsTrinoDatabaseLabel' as any, 'Database')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database}
+                    onChange={handleDatabaseChange}
+                    placeholder={getLocString('integrationsTrinoDatabasePlaceholder' as any, 'my_database')}
+                    autoComplete="off"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="username">
+                    {getLocString('integrationsTrinoUsernameLabel' as any, 'Username')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="text"
+                    id="username"
+                    value={pendingConfig.metadata.user}
+                    onChange={handleUsernameChange}
+                    placeholder={getLocString('integrationsTrinoUsernamePlaceholder' as any, 'username')}
+                    autoComplete="username"
+                    required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsTrinoPasswordLabel' as any, 'Password')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password}
+                    onChange={handlePasswordChange}
+                    placeholder={getLocString('integrationsTrinoPasswordPlaceholder' as any, '••••••••')}
+                    autoComplete="current-password"
+                    required
+                />
+            </div>
+
+            <div className="form-actions">
+                <button type="button" className="secondary" onClick={onCancel}>
+                    {getLocString('integrationsCancel', 'Cancel')}
+                </button>
+                <button type="submit" className="primary">
+                    {getLocString('integrationsSave', 'Save')}
+                </button>
+            </div>
+        </form>
+    );
+};
+

From 711b388b6b61ade72c6a8bafcf0493e60b31284c Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 15:30:11 +0100
Subject: [PATCH 03/13] add db names to cspell dictionary

---
 cspell.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/cspell.json b/cspell.json
index 7a17159642..decac63f4b 100644
--- a/cspell.json
+++ b/cspell.json
@@ -21,8 +21,10 @@
     ],
     "language": "en",
     "words": [
+        "alloydb",
         "blockgroup",
         "channeldef",
+        "clickhouse",
         "dataframe",
         "datascience",
         "deepnote",
@@ -30,6 +32,8 @@
         "dntk",
         "dont",
         "DONT",
+        "dremio",
+        "Dremio",
         "duckdb",
         "ename",
         "evalue",
@@ -42,6 +46,7 @@
         "jupyterlab",
         "JVSC",
         "millis",
+        "mindsdb",
         "nbformat",
         "nbinsx",
         "numpy",
@@ -53,12 +58,14 @@
         "Reselecting",
         "taskkill",
         "toolsai",
+        "trino",
+        "Trino",
         "unconfigured",
         "Unconfigured",
         "unittests",
         "vegalite",
-        "venv",
         "venv's",
+        "venv",
         "Venv",
         "venvs",
         "vscode",

From cf5262deadc1c888f6756a58e650f9238ccb5897 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 15:32:18 +0100
Subject: [PATCH 04/13] fix formatting

---
 .../webview-side/integrations/AlloyDBForm.tsx |  5 +----
 .../webview-side/integrations/AthenaForm.tsx  |  5 +++--
 .../integrations/ClickHouseForm.tsx           | 11 ++++++-----
 .../integrations/DatabricksForm.tsx           | 19 ++++++++++++++-----
 .../webview-side/integrations/DremioForm.tsx  |  1 -
 .../webview-side/integrations/MariaDBForm.tsx |  1 -
 .../integrations/MaterializeForm.tsx          |  7 +++----
 .../webview-side/integrations/MindsDBForm.tsx |  5 +----
 .../webview-side/integrations/MongoDBForm.tsx |  1 -
 .../webview-side/integrations/MySQLForm.tsx   |  5 +++--
 .../integrations/RedshiftForm.tsx             | 15 +++++++++++----
 .../integrations/SQLServerForm.tsx            | 11 ++++-------
 .../webview-side/integrations/SpannerForm.tsx |  4 +---
 .../webview-side/integrations/TrinoForm.tsx   |  9 +++++++--
 14 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/webviews/webview-side/integrations/AlloyDBForm.tsx b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
index fbdc65318a..eb3fd3c6f1 100644
--- a/src/webviews/webview-side/integrations/AlloyDBForm.tsx
+++ b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
@@ -93,9 +93,7 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">
-                    {getLocString('integrationsAlloyDBNameLabel' as any, 'Name (optional)')}
-                </label>
+                <label htmlFor="name">{getLocString('integrationsAlloyDBNameLabel' as any, 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
@@ -193,4 +191,3 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/AthenaForm.tsx b/src/webviews/webview-side/integrations/AthenaForm.tsx
index 7026a2c84a..148451f486 100644
--- a/src/webviews/webview-side/integrations/AthenaForm.tsx
+++ b/src/webviews/webview-side/integrations/AthenaForm.tsx
@@ -159,7 +159,9 @@ export const AthenaForm: React.FC<IAthenaFormProps> = ({
             </div>
 
             <div className="form-group">
-                <label htmlFor="workgroup">{getLocString('integrationsAthenaWorkgroupLabel', 'Workgroup (optional)')}</label>
+                <label htmlFor="workgroup">
+                    {getLocString('integrationsAthenaWorkgroupLabel', 'Workgroup (optional)')}
+                </label>
                 <input
                     type="text"
                     id="workgroup"
@@ -181,4 +183,3 @@ export const AthenaForm: React.FC<IAthenaFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/ClickHouseForm.tsx b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
index f5a1caadf4..2853f7cd51 100644
--- a/src/webviews/webview-side/integrations/ClickHouseForm.tsx
+++ b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
@@ -35,9 +35,9 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
     onSave,
     onCancel
 }) => {
-    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }>>(
-        () => existingConfig || createEmptyClickHouseConfig(integrationId, defaultName)
-    );
+    const [pendingConfig, setPendingConfig] = React.useState<
+        Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }>
+    >(() => existingConfig || createEmptyClickHouseConfig(integrationId, defaultName));
 
     React.useEffect(() => {
         if (existingConfig) {
@@ -166,7 +166,9 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
             </div>
 
             <div className="form-group">
-                <label htmlFor="password">{getLocString('integrationsClickHousePasswordLabel' as any, 'Password')}</label>
+                <label htmlFor="password">
+                    {getLocString('integrationsClickHousePasswordLabel' as any, 'Password')}
+                </label>
                 <input
                     type="password"
                     id="password"
@@ -188,4 +190,3 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/DatabricksForm.tsx b/src/webviews/webview-side/integrations/DatabricksForm.tsx
index 03d9c92612..32d5b64d13 100644
--- a/src/webviews/webview-side/integrations/DatabricksForm.tsx
+++ b/src/webviews/webview-side/integrations/DatabricksForm.tsx
@@ -38,7 +38,9 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
     onSave,
     onCancel
 }) => {
-    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'databricks' }>>(
+    const [pendingConfig, setPendingConfig] = React.useState<
+        Extract<DatabaseIntegrationConfig, { type: 'databricks' }>
+    >(
         existingConfig
             ? structuredClone(existingConfig)
             : createEmptyDatabricksConfig({ id: integrationId, name: defaultName })
@@ -109,7 +111,10 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsDatabricksHostPlaceholder', 'dbc-1234abcd-5678.cloud.databricks.com')}
+                    placeholder={getLocString(
+                        'integrationsDatabricksHostPlaceholder',
+                        'dbc-1234abcd-5678.cloud.databricks.com'
+                    )}
                     autoComplete="off"
                     required
                 />
@@ -125,7 +130,10 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
                     id="httpPath"
                     value={pendingConfig.metadata.httpPath}
                     onChange={handleHttpPathChange}
-                    placeholder={getLocString('integrationsDatabricksHttpPathPlaceholder', '/sql/1.0/warehouses/abc123')}
+                    placeholder={getLocString(
+                        'integrationsDatabricksHttpPathPlaceholder',
+                        '/sql/1.0/warehouses/abc123'
+                    )}
                     autoComplete="off"
                     required
                 />
@@ -160,7 +168,9 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
             </div>
 
             <div className="form-group">
-                <label htmlFor="catalog">{getLocString('integrationsDatabricksCatalogLabel', 'Catalog (optional)')}</label>
+                <label htmlFor="catalog">
+                    {getLocString('integrationsDatabricksCatalogLabel', 'Catalog (optional)')}
+                </label>
                 <input
                     type="text"
                     id="catalog"
@@ -194,4 +204,3 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/DremioForm.tsx b/src/webviews/webview-side/integrations/DremioForm.tsx
index f7e140cd80..4b74f7096e 100644
--- a/src/webviews/webview-side/integrations/DremioForm.tsx
+++ b/src/webviews/webview-side/integrations/DremioForm.tsx
@@ -160,4 +160,3 @@ export const DremioForm: React.FC<IDremioFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/MariaDBForm.tsx b/src/webviews/webview-side/integrations/MariaDBForm.tsx
index aeab80a964..1fdd91c03b 100644
--- a/src/webviews/webview-side/integrations/MariaDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MariaDBForm.tsx
@@ -181,4 +181,3 @@ export const MariaDBForm: React.FC<IMariaDBFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
index 9934f9a123..58e605236a 100644
--- a/src/webviews/webview-side/integrations/MaterializeForm.tsx
+++ b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -37,9 +37,9 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
     onSave,
     onCancel
 }) => {
-    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'materialize' }>>(
-        () => existingConfig || createEmptyMaterializeConfig(integrationId, defaultName)
-    );
+    const [pendingConfig, setPendingConfig] = React.useState<
+        Extract<DatabaseIntegrationConfig, { type: 'materialize' }>
+    >(() => existingConfig || createEmptyMaterializeConfig(integrationId, defaultName));
 
     React.useEffect(() => {
         if (existingConfig) {
@@ -220,4 +220,3 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/MindsDBForm.tsx b/src/webviews/webview-side/integrations/MindsDBForm.tsx
index d4032de4cd..37f5c753f3 100644
--- a/src/webviews/webview-side/integrations/MindsDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MindsDBForm.tsx
@@ -93,9 +93,7 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">
-                    {getLocString('integrationsMindsDBNameLabel' as any, 'Name (optional)')}
-                </label>
+                <label htmlFor="name">{getLocString('integrationsMindsDBNameLabel' as any, 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
@@ -193,4 +191,3 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/MongoDBForm.tsx b/src/webviews/webview-side/integrations/MongoDBForm.tsx
index 468999589e..054259f161 100644
--- a/src/webviews/webview-side/integrations/MongoDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MongoDBForm.tsx
@@ -109,4 +109,3 @@ export const MongoDBForm: React.FC<IMongoDBFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/MySQLForm.tsx b/src/webviews/webview-side/integrations/MySQLForm.tsx
index e46e0b7d03..51cb18f625 100644
--- a/src/webviews/webview-side/integrations/MySQLForm.tsx
+++ b/src/webviews/webview-side/integrations/MySQLForm.tsx
@@ -38,7 +38,9 @@ export const MySQLForm: React.FC<IMySQLFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'mysql' }>>(
-        existingConfig ? structuredClone(existingConfig) : createEmptyMySQLConfig({ id: integrationId, name: defaultName })
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyMySQLConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
@@ -179,4 +181,3 @@ export const MySQLForm: React.FC<IMySQLFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/RedshiftForm.tsx b/src/webviews/webview-side/integrations/RedshiftForm.tsx
index e3c826f4bf..810a6ad54f 100644
--- a/src/webviews/webview-side/integrations/RedshiftForm.tsx
+++ b/src/webviews/webview-side/integrations/RedshiftForm.tsx
@@ -38,7 +38,9 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<RedshiftConfig>(
-        existingConfig ? structuredClone(existingConfig) : createEmptyRedshiftConfig({ id: integrationId, name: defaultName })
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyRedshiftConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
@@ -133,7 +135,10 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
                         {getLocString('integrationsRedshiftAuthMethodUsernamePassword', 'Username and Password')}
                     </option>
                     <option value="individual-credentials">
-                        {getLocString('integrationsRedshiftAuthMethodIndividualCredentials', 'Individual Credentials (IAM)')}
+                        {getLocString(
+                            'integrationsRedshiftAuthMethodIndividualCredentials',
+                            'Individual Credentials (IAM)'
+                        )}
                     </option>
                 </select>
                 <small className="form-help">
@@ -154,7 +159,10 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsRedshiftHostPlaceholder', 'my-cluster.abc123.us-east-1.redshift.amazonaws.com')}
+                    placeholder={getLocString(
+                        'integrationsRedshiftHostPlaceholder',
+                        'my-cluster.abc123.us-east-1.redshift.amazonaws.com'
+                    )}
                     autoComplete="off"
                     required
                 />
@@ -235,4 +243,3 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/SQLServerForm.tsx b/src/webviews/webview-side/integrations/SQLServerForm.tsx
index 6d29bc1648..cd4ca026ac 100644
--- a/src/webviews/webview-side/integrations/SQLServerForm.tsx
+++ b/src/webviews/webview-side/integrations/SQLServerForm.tsx
@@ -37,9 +37,9 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
     onSave,
     onCancel
 }) => {
-    const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'sql-server' }>>(
-        () => existingConfig || createEmptySQLServerConfig(integrationId, defaultName)
-    );
+    const [pendingConfig, setPendingConfig] = React.useState<
+        Extract<DatabaseIntegrationConfig, { type: 'sql-server' }>
+    >(() => existingConfig || createEmptySQLServerConfig(integrationId, defaultName));
 
     React.useEffect(() => {
         if (existingConfig) {
@@ -94,9 +94,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">
-                    {getLocString('integrationsSQLServerNameLabel' as any, 'Name (optional)')}
-                </label>
+                <label htmlFor="name">{getLocString('integrationsSQLServerNameLabel' as any, 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
@@ -198,4 +196,3 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/SpannerForm.tsx b/src/webviews/webview-side/integrations/SpannerForm.tsx
index a08bbb0e7d..7f9a5d8e2b 100644
--- a/src/webviews/webview-side/integrations/SpannerForm.tsx
+++ b/src/webviews/webview-side/integrations/SpannerForm.tsx
@@ -181,8 +181,7 @@ export const SpannerForm: React.FC<ISpannerFormProps> = ({
                         type="checkbox"
                         checked={pendingConfig.metadata.dataBoostEnabled}
                         onChange={handleDataBoostChange}
-                    />
-                    {' '}
+                    />{' '}
                     {getLocString('integrationsSpannerDataBoostLabel', 'Enable Data Boost')}
                 </label>
                 <small className="form-help">
@@ -204,4 +203,3 @@ export const SpannerForm: React.FC<ISpannerFormProps> = ({
         </form>
     );
 };
-
diff --git a/src/webviews/webview-side/integrations/TrinoForm.tsx b/src/webviews/webview-side/integrations/TrinoForm.tsx
index b667644995..abd8e963e7 100644
--- a/src/webviews/webview-side/integrations/TrinoForm.tsx
+++ b/src/webviews/webview-side/integrations/TrinoForm.tsx
@@ -30,7 +30,13 @@ function createEmptyTrinoConfig(
     };
 }
 
-export const TrinoForm: React.FC<ITrinoFormProps> = ({ integrationId, existingConfig, defaultName, onSave, onCancel }) => {
+export const TrinoForm: React.FC<ITrinoFormProps> = ({
+    integrationId,
+    existingConfig,
+    defaultName,
+    onSave,
+    onCancel
+}) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'trino' }>>(
         () => existingConfig || createEmptyTrinoConfig(integrationId, defaultName)
     );
@@ -190,4 +196,3 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({ integrationId, existingCo
         </form>
     );
 };
-

From c70e5c9d23be3de9cb25fcf2fe5c064782285e46 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 15:55:08 +0100
Subject: [PATCH 05/13] remove inconsistency from integration credentials docs

---
 INTEGRATIONS_CREDENTIALS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INTEGRATIONS_CREDENTIALS.md b/INTEGRATIONS_CREDENTIALS.md
index ae7be6861f..6efa29ee6d 100644
--- a/INTEGRATIONS_CREDENTIALS.md
+++ b/INTEGRATIONS_CREDENTIALS.md
@@ -772,7 +772,7 @@ User executes SQL cell
 
 ### Migration to @deepnote/database-integrations
 
-The system was refactored to use the `@deepnote/database-integrations` package (v1.1.0) as the source of truth for integration types and credential formatting. This provides:
+The system was refactored to use the `@deepnote/database-integrations` package as the source of truth for integration types and credential formatting. This provides:
 
 **Benefits:**
 

From 3696f8808e61655170799c8238bf6fcf776896f5 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 16:02:30 +0100
Subject: [PATCH 06/13] fix integration config forms to consistently handle
 incoming config

---
 .../webview-side/integrations/AlloyDBForm.tsx | 26 +++++++++--------
 .../integrations/ClickHouseForm.tsx           | 28 +++++++++++--------
 .../integrations/MaterializeForm.tsx          | 28 +++++++++++--------
 .../webview-side/integrations/MindsDBForm.tsx | 26 +++++++++--------
 .../integrations/SQLServerForm.tsx            | 28 +++++++++++--------
 .../webview-side/integrations/TrinoForm.tsx   | 26 +++++++++--------
 6 files changed, 96 insertions(+), 66 deletions(-)

diff --git a/src/webviews/webview-side/integrations/AlloyDBForm.tsx b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
index eb3fd3c6f1..05674b13f8 100644
--- a/src/webviews/webview-side/integrations/AlloyDBForm.tsx
+++ b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
@@ -10,15 +10,15 @@ export interface IAlloyDBFormProps {
     onCancel: () => void;
 }
 
-function createEmptyAlloyDBConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'alloydb' }> {
+function createEmptyAlloyDBConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'alloydb' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'alloydb',
         metadata: {
             host: '',
@@ -37,14 +37,18 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'alloydb' }>>(
-        () => existingConfig || createEmptyAlloyDBConfig(integrationId, defaultName)
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyAlloyDBConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyAlloyDBConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/ClickHouseForm.tsx b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
index 2853f7cd51..b20bf24b64 100644
--- a/src/webviews/webview-side/integrations/ClickHouseForm.tsx
+++ b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
@@ -10,15 +10,15 @@ export interface IClickHouseFormProps {
     onCancel: () => void;
 }
 
-function createEmptyClickHouseConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }> {
+function createEmptyClickHouseConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'clickhouse',
         metadata: {
             host: '',
@@ -37,13 +37,19 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<
         Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }>
-    >(() => existingConfig || createEmptyClickHouseConfig(integrationId, defaultName));
+    >(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyClickHouseConfig({ id: integrationId, name: defaultName })
+    );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyClickHouseConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
index 58e605236a..59cf59972a 100644
--- a/src/webviews/webview-side/integrations/MaterializeForm.tsx
+++ b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -10,15 +10,15 @@ export interface IMaterializeFormProps {
     onCancel: () => void;
 }
 
-function createEmptyMaterializeConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'materialize' }> {
+function createEmptyMaterializeConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'materialize' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'materialize',
         metadata: {
             host: '',
@@ -39,13 +39,19 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<
         Extract<DatabaseIntegrationConfig, { type: 'materialize' }>
-    >(() => existingConfig || createEmptyMaterializeConfig(integrationId, defaultName));
+    >(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyMaterializeConfig({ id: integrationId, name: defaultName })
+    );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyMaterializeConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/MindsDBForm.tsx b/src/webviews/webview-side/integrations/MindsDBForm.tsx
index 37f5c753f3..b12b44380e 100644
--- a/src/webviews/webview-side/integrations/MindsDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MindsDBForm.tsx
@@ -10,15 +10,15 @@ export interface IMindsDBFormProps {
     onCancel: () => void;
 }
 
-function createEmptyMindsDBConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }> {
+function createEmptyMindsDBConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'mindsdb',
         metadata: {
             host: '',
@@ -37,14 +37,18 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }>>(
-        () => existingConfig || createEmptyMindsDBConfig(integrationId, defaultName)
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyMindsDBConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyMindsDBConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/SQLServerForm.tsx b/src/webviews/webview-side/integrations/SQLServerForm.tsx
index cd4ca026ac..9b7b31dd14 100644
--- a/src/webviews/webview-side/integrations/SQLServerForm.tsx
+++ b/src/webviews/webview-side/integrations/SQLServerForm.tsx
@@ -10,15 +10,15 @@ export interface ISQLServerFormProps {
     onCancel: () => void;
 }
 
-function createEmptySQLServerConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'sql-server' }> {
+function createEmptySQLServerConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'sql-server' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'sql-server',
         metadata: {
             host: '',
@@ -39,13 +39,19 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<
         Extract<DatabaseIntegrationConfig, { type: 'sql-server' }>
-    >(() => existingConfig || createEmptySQLServerConfig(integrationId, defaultName));
+    >(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptySQLServerConfig({ id: integrationId, name: defaultName })
+    );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptySQLServerConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/TrinoForm.tsx b/src/webviews/webview-side/integrations/TrinoForm.tsx
index abd8e963e7..2ea5103bd9 100644
--- a/src/webviews/webview-side/integrations/TrinoForm.tsx
+++ b/src/webviews/webview-side/integrations/TrinoForm.tsx
@@ -10,15 +10,15 @@ export interface ITrinoFormProps {
     onCancel: () => void;
 }
 
-function createEmptyTrinoConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'trino' }> {
+function createEmptyTrinoConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'trino' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'trino',
         metadata: {
             host: '',
@@ -38,14 +38,18 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'trino' }>>(
-        () => existingConfig || createEmptyTrinoConfig(integrationId, defaultName)
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyTrinoConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyTrinoConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();

From 23fb0444359577927cf079c5315b10d599dd8eaf Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 16:04:36 +0100
Subject: [PATCH 07/13] remove leftover "as any" casts from integration config
 forms

---
 .../webview-side/integrations/AlloyDBForm.tsx | 22 ++++++-------
 .../integrations/ClickHouseForm.tsx           | 26 +++++++---------
 .../integrations/MaterializeForm.tsx          | 31 ++++++++-----------
 .../webview-side/integrations/MindsDBForm.tsx | 22 ++++++-------
 .../integrations/SQLServerForm.tsx            | 22 ++++++-------
 .../webview-side/integrations/TrinoForm.tsx   | 22 ++++++-------
 6 files changed, 68 insertions(+), 77 deletions(-)

diff --git a/src/webviews/webview-side/integrations/AlloyDBForm.tsx b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
index 05674b13f8..b93418f06b 100644
--- a/src/webviews/webview-side/integrations/AlloyDBForm.tsx
+++ b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
@@ -97,20 +97,20 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">{getLocString('integrationsAlloyDBNameLabel' as any, 'Name (optional)')}</label>
+                <label htmlFor="name">{getLocString('integrationsAlloyDBNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={pendingConfig.name}
                     onChange={handleNameChange}
-                    placeholder={getLocString('integrationsAlloyDBNamePlaceholder' as any, 'My AlloyDB Database')}
+                    placeholder={getLocString('integrationsAlloyDBNamePlaceholder', 'My AlloyDB Database')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="host">
-                    {getLocString('integrationsAlloyDBHostLabel' as any, 'Host')}{' '}
+                    {getLocString('integrationsAlloyDBHostLabel', 'Host')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -118,14 +118,14 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsAlloyDBHostPlaceholder' as any, 'localhost')}
+                    placeholder={getLocString('integrationsAlloyDBHostPlaceholder', 'localhost')}
                     autoComplete="off"
                     required
                 />
             </div>
 
             <div className="form-group">
-                <label htmlFor="port">{getLocString('integrationsAlloyDBPortLabel' as any, 'Port')}</label>
+                <label htmlFor="port">{getLocString('integrationsAlloyDBPortLabel', 'Port')}</label>
                 <input
                     type="text"
                     id="port"
@@ -138,7 +138,7 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="database">
-                    {getLocString('integrationsAlloyDBDatabaseLabel' as any, 'Database')}{' '}
+                    {getLocString('integrationsAlloyDBDatabaseLabel', 'Database')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -146,7 +146,7 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
                     id="database"
                     value={pendingConfig.metadata.database}
                     onChange={handleDatabaseChange}
-                    placeholder={getLocString('integrationsAlloyDBDatabasePlaceholder' as any, 'my_database')}
+                    placeholder={getLocString('integrationsAlloyDBDatabasePlaceholder', 'my_database')}
                     autoComplete="off"
                     required
                 />
@@ -154,7 +154,7 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="username">
-                    {getLocString('integrationsAlloyDBUsernameLabel' as any, 'Username')}{' '}
+                    {getLocString('integrationsAlloyDBUsernameLabel', 'Username')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -162,7 +162,7 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
                     id="username"
                     value={pendingConfig.metadata.user}
                     onChange={handleUsernameChange}
-                    placeholder={getLocString('integrationsAlloyDBUsernamePlaceholder' as any, 'username')}
+                    placeholder={getLocString('integrationsAlloyDBUsernamePlaceholder', 'username')}
                     autoComplete="username"
                     required
                 />
@@ -170,7 +170,7 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="password">
-                    {getLocString('integrationsAlloyDBPasswordLabel' as any, 'Password')}{' '}
+                    {getLocString('integrationsAlloyDBPasswordLabel', 'Password')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -178,7 +178,7 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
                     id="password"
                     value={pendingConfig.metadata.password}
                     onChange={handlePasswordChange}
-                    placeholder={getLocString('integrationsAlloyDBPasswordPlaceholder' as any, '••••••••')}
+                    placeholder={getLocString('integrationsAlloyDBPasswordPlaceholder', '••••••••')}
                     autoComplete="current-password"
                     required
                 />
diff --git a/src/webviews/webview-side/integrations/ClickHouseForm.tsx b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
index b20bf24b64..3dd9ac4a15 100644
--- a/src/webviews/webview-side/integrations/ClickHouseForm.tsx
+++ b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
@@ -98,22 +98,20 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">
-                    {getLocString('integrationsClickHouseNameLabel' as any, 'Name (optional)')}
-                </label>
+                <label htmlFor="name">{getLocString('integrationsClickHouseNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={pendingConfig.name}
                     onChange={handleNameChange}
-                    placeholder={getLocString('integrationsClickHouseNamePlaceholder' as any, 'My ClickHouse Database')}
+                    placeholder={getLocString('integrationsClickHouseNamePlaceholder', 'My ClickHouse Database')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="host">
-                    {getLocString('integrationsClickHouseHostLabel' as any, 'Host')}{' '}
+                    {getLocString('integrationsClickHouseHostLabel', 'Host')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -121,14 +119,14 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsClickHouseHostPlaceholder' as any, 'localhost')}
+                    placeholder={getLocString('integrationsClickHouseHostPlaceholder', 'localhost')}
                     autoComplete="off"
                     required
                 />
             </div>
 
             <div className="form-group">
-                <label htmlFor="port">{getLocString('integrationsClickHousePortLabel' as any, 'Port')}</label>
+                <label htmlFor="port">{getLocString('integrationsClickHousePortLabel', 'Port')}</label>
                 <input
                     type="text"
                     id="port"
@@ -141,7 +139,7 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="database">
-                    {getLocString('integrationsClickHouseDatabaseLabel' as any, 'Database')}{' '}
+                    {getLocString('integrationsClickHouseDatabaseLabel', 'Database')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -149,7 +147,7 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
                     id="database"
                     value={pendingConfig.metadata.database}
                     onChange={handleDatabaseChange}
-                    placeholder={getLocString('integrationsClickHouseDatabasePlaceholder' as any, 'my_database')}
+                    placeholder={getLocString('integrationsClickHouseDatabasePlaceholder', 'my_database')}
                     autoComplete="off"
                     required
                 />
@@ -157,7 +155,7 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="username">
-                    {getLocString('integrationsClickHouseUsernameLabel' as any, 'Username')}{' '}
+                    {getLocString('integrationsClickHouseUsernameLabel', 'Username')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -165,22 +163,20 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
                     id="username"
                     value={pendingConfig.metadata.user}
                     onChange={handleUsernameChange}
-                    placeholder={getLocString('integrationsClickHouseUsernamePlaceholder' as any, 'username')}
+                    placeholder={getLocString('integrationsClickHouseUsernamePlaceholder', 'username')}
                     autoComplete="username"
                     required
                 />
             </div>
 
             <div className="form-group">
-                <label htmlFor="password">
-                    {getLocString('integrationsClickHousePasswordLabel' as any, 'Password')}
-                </label>
+                <label htmlFor="password">{getLocString('integrationsClickHousePasswordLabel', 'Password')}</label>
                 <input
                     type="password"
                     id="password"
                     value={pendingConfig.metadata.password || ''}
                     onChange={handlePasswordChange}
-                    placeholder={getLocString('integrationsClickHousePasswordPlaceholder' as any, '••••••••')}
+                    placeholder={getLocString('integrationsClickHousePasswordPlaceholder', '••••••••')}
                     autoComplete="current-password"
                 />
             </div>
diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
index 59cf59972a..4945ade745 100644
--- a/src/webviews/webview-side/integrations/MaterializeForm.tsx
+++ b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -107,25 +107,20 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">
-                    {getLocString('integrationsMaterializeNameLabel' as any, 'Name (optional)')}
-                </label>
+                <label htmlFor="name">{getLocString('integrationsMaterializeNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={pendingConfig.name}
                     onChange={handleNameChange}
-                    placeholder={getLocString(
-                        'integrationsMaterializeNamePlaceholder' as any,
-                        'My Materialize Database'
-                    )}
+                    placeholder={getLocString('integrationsMaterializeNamePlaceholder', 'My Materialize Database')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="host">
-                    {getLocString('integrationsMaterializeHostLabel' as any, 'Host')}{' '}
+                    {getLocString('integrationsMaterializeHostLabel', 'Host')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -133,14 +128,14 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsMaterializeHostPlaceholder' as any, 'localhost')}
+                    placeholder={getLocString('integrationsMaterializeHostPlaceholder', 'localhost')}
                     autoComplete="off"
                     required
                 />
             </div>
 
             <div className="form-group">
-                <label htmlFor="port">{getLocString('integrationsMaterializePortLabel' as any, 'Port')}</label>
+                <label htmlFor="port">{getLocString('integrationsMaterializePortLabel', 'Port')}</label>
                 <input
                     type="text"
                     id="port"
@@ -153,7 +148,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="database">
-                    {getLocString('integrationsMaterializeDatabaseLabel' as any, 'Database')}{' '}
+                    {getLocString('integrationsMaterializeDatabaseLabel', 'Database')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -161,7 +156,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
                     id="database"
                     value={pendingConfig.metadata.database}
                     onChange={handleDatabaseChange}
-                    placeholder={getLocString('integrationsMaterializeDatabasePlaceholder' as any, 'my_database')}
+                    placeholder={getLocString('integrationsMaterializeDatabasePlaceholder', 'my_database')}
                     autoComplete="off"
                     required
                 />
@@ -169,7 +164,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="cluster">
-                    {getLocString('integrationsMaterializeClusterLabel' as any, 'Cluster')}{' '}
+                    {getLocString('integrationsMaterializeClusterLabel', 'Cluster')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -177,7 +172,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
                     id="cluster"
                     value={pendingConfig.metadata.cluster}
                     onChange={handleClusterChange}
-                    placeholder={getLocString('integrationsMaterializeClusterPlaceholder' as any, 'quickstart')}
+                    placeholder={getLocString('integrationsMaterializeClusterPlaceholder', 'quickstart')}
                     autoComplete="off"
                     required
                 />
@@ -185,7 +180,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="username">
-                    {getLocString('integrationsMaterializeUsernameLabel' as any, 'Username')}{' '}
+                    {getLocString('integrationsMaterializeUsernameLabel', 'Username')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -193,7 +188,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
                     id="username"
                     value={pendingConfig.metadata.user}
                     onChange={handleUsernameChange}
-                    placeholder={getLocString('integrationsMaterializeUsernamePlaceholder' as any, 'username')}
+                    placeholder={getLocString('integrationsMaterializeUsernamePlaceholder', 'username')}
                     autoComplete="username"
                     required
                 />
@@ -201,7 +196,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="password">
-                    {getLocString('integrationsMaterializePasswordLabel' as any, 'Password')}{' '}
+                    {getLocString('integrationsMaterializePasswordLabel', 'Password')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -209,7 +204,7 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
                     id="password"
                     value={pendingConfig.metadata.password}
                     onChange={handlePasswordChange}
-                    placeholder={getLocString('integrationsMaterializePasswordPlaceholder' as any, '••••••••')}
+                    placeholder={getLocString('integrationsMaterializePasswordPlaceholder', '••••••••')}
                     autoComplete="current-password"
                     required
                 />
diff --git a/src/webviews/webview-side/integrations/MindsDBForm.tsx b/src/webviews/webview-side/integrations/MindsDBForm.tsx
index b12b44380e..6350f63909 100644
--- a/src/webviews/webview-side/integrations/MindsDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MindsDBForm.tsx
@@ -97,20 +97,20 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">{getLocString('integrationsMindsDBNameLabel' as any, 'Name (optional)')}</label>
+                <label htmlFor="name">{getLocString('integrationsMindsDBNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={pendingConfig.name}
                     onChange={handleNameChange}
-                    placeholder={getLocString('integrationsMindsDBNamePlaceholder' as any, 'My MindsDB Database')}
+                    placeholder={getLocString('integrationsMindsDBNamePlaceholder', 'My MindsDB Database')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="host">
-                    {getLocString('integrationsMindsDBHostLabel' as any, 'Host')}{' '}
+                    {getLocString('integrationsMindsDBHostLabel', 'Host')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -118,14 +118,14 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsMindsDBHostPlaceholder' as any, 'localhost')}
+                    placeholder={getLocString('integrationsMindsDBHostPlaceholder', 'localhost')}
                     autoComplete="off"
                     required
                 />
             </div>
 
             <div className="form-group">
-                <label htmlFor="port">{getLocString('integrationsMindsDBPortLabel' as any, 'Port')}</label>
+                <label htmlFor="port">{getLocString('integrationsMindsDBPortLabel', 'Port')}</label>
                 <input
                     type="text"
                     id="port"
@@ -138,7 +138,7 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="database">
-                    {getLocString('integrationsMindsDBDatabaseLabel' as any, 'Database')}{' '}
+                    {getLocString('integrationsMindsDBDatabaseLabel', 'Database')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -146,7 +146,7 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
                     id="database"
                     value={pendingConfig.metadata.database}
                     onChange={handleDatabaseChange}
-                    placeholder={getLocString('integrationsMindsDBDatabasePlaceholder' as any, 'my_database')}
+                    placeholder={getLocString('integrationsMindsDBDatabasePlaceholder', 'my_database')}
                     autoComplete="off"
                     required
                 />
@@ -154,7 +154,7 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="username">
-                    {getLocString('integrationsMindsDBUsernameLabel' as any, 'Username')}{' '}
+                    {getLocString('integrationsMindsDBUsernameLabel', 'Username')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -162,7 +162,7 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
                     id="username"
                     value={pendingConfig.metadata.user}
                     onChange={handleUsernameChange}
-                    placeholder={getLocString('integrationsMindsDBUsernamePlaceholder' as any, 'username')}
+                    placeholder={getLocString('integrationsMindsDBUsernamePlaceholder', 'username')}
                     autoComplete="username"
                     required
                 />
@@ -170,7 +170,7 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="password">
-                    {getLocString('integrationsMindsDBPasswordLabel' as any, 'Password')}{' '}
+                    {getLocString('integrationsMindsDBPasswordLabel', 'Password')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -178,7 +178,7 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
                     id="password"
                     value={pendingConfig.metadata.password}
                     onChange={handlePasswordChange}
-                    placeholder={getLocString('integrationsMindsDBPasswordPlaceholder' as any, '••••••••')}
+                    placeholder={getLocString('integrationsMindsDBPasswordPlaceholder', '••••••••')}
                     autoComplete="current-password"
                     required
                 />
diff --git a/src/webviews/webview-side/integrations/SQLServerForm.tsx b/src/webviews/webview-side/integrations/SQLServerForm.tsx
index 9b7b31dd14..751e4fa201 100644
--- a/src/webviews/webview-side/integrations/SQLServerForm.tsx
+++ b/src/webviews/webview-side/integrations/SQLServerForm.tsx
@@ -100,20 +100,20 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">{getLocString('integrationsSQLServerNameLabel' as any, 'Name (optional)')}</label>
+                <label htmlFor="name">{getLocString('integrationsSQLServerNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={pendingConfig.name}
                     onChange={handleNameChange}
-                    placeholder={getLocString('integrationsSQLServerNamePlaceholder' as any, 'My SQL Server Database')}
+                    placeholder={getLocString('integrationsSQLServerNamePlaceholder', 'My SQL Server Database')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="host">
-                    {getLocString('integrationsSQLServerHostLabel' as any, 'Host')}{' '}
+                    {getLocString('integrationsSQLServerHostLabel', 'Host')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -121,7 +121,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsSQLServerHostPlaceholder' as any, 'localhost')}
+                    placeholder={getLocString('integrationsSQLServerHostPlaceholder', 'localhost')}
                     autoComplete="off"
                     required
                 />
@@ -129,7 +129,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="port">
-                    {getLocString('integrationsSQLServerPortLabel' as any, 'Port')}{' '}
+                    {getLocString('integrationsSQLServerPortLabel', 'Port')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -145,7 +145,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="database">
-                    {getLocString('integrationsSQLServerDatabaseLabel' as any, 'Database')}{' '}
+                    {getLocString('integrationsSQLServerDatabaseLabel', 'Database')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -153,7 +153,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
                     id="database"
                     value={pendingConfig.metadata.database}
                     onChange={handleDatabaseChange}
-                    placeholder={getLocString('integrationsSQLServerDatabasePlaceholder' as any, 'my_database')}
+                    placeholder={getLocString('integrationsSQLServerDatabasePlaceholder', 'my_database')}
                     autoComplete="off"
                     required
                 />
@@ -161,7 +161,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="username">
-                    {getLocString('integrationsSQLServerUsernameLabel' as any, 'Username')}{' '}
+                    {getLocString('integrationsSQLServerUsernameLabel', 'Username')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -169,7 +169,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
                     id="username"
                     value={pendingConfig.metadata.user}
                     onChange={handleUsernameChange}
-                    placeholder={getLocString('integrationsSQLServerUsernamePlaceholder' as any, 'username')}
+                    placeholder={getLocString('integrationsSQLServerUsernamePlaceholder', 'username')}
                     autoComplete="username"
                     required
                 />
@@ -177,7 +177,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="password">
-                    {getLocString('integrationsSQLServerPasswordLabel' as any, 'Password')}{' '}
+                    {getLocString('integrationsSQLServerPasswordLabel', 'Password')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -185,7 +185,7 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
                     id="password"
                     value={pendingConfig.metadata.password}
                     onChange={handlePasswordChange}
-                    placeholder={getLocString('integrationsSQLServerPasswordPlaceholder' as any, '••••••••')}
+                    placeholder={getLocString('integrationsSQLServerPasswordPlaceholder', '••••••••')}
                     autoComplete="current-password"
                     required
                 />
diff --git a/src/webviews/webview-side/integrations/TrinoForm.tsx b/src/webviews/webview-side/integrations/TrinoForm.tsx
index 2ea5103bd9..149eff3e9f 100644
--- a/src/webviews/webview-side/integrations/TrinoForm.tsx
+++ b/src/webviews/webview-side/integrations/TrinoForm.tsx
@@ -98,20 +98,20 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">{getLocString('integrationsTrinoNameLabel' as any, 'Name (optional)')}</label>
+                <label htmlFor="name">{getLocString('integrationsTrinoNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={pendingConfig.name}
                     onChange={handleNameChange}
-                    placeholder={getLocString('integrationsTrinoNamePlaceholder' as any, 'My Trino Database')}
+                    placeholder={getLocString('integrationsTrinoNamePlaceholder', 'My Trino Database')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="host">
-                    {getLocString('integrationsTrinoHostLabel' as any, 'Host')}{' '}
+                    {getLocString('integrationsTrinoHostLabel', 'Host')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -119,7 +119,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
                     id="host"
                     value={pendingConfig.metadata.host}
                     onChange={handleHostChange}
-                    placeholder={getLocString('integrationsTrinoHostPlaceholder' as any, 'localhost')}
+                    placeholder={getLocString('integrationsTrinoHostPlaceholder', 'localhost')}
                     autoComplete="off"
                     required
                 />
@@ -127,7 +127,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="port">
-                    {getLocString('integrationsTrinoPortLabel' as any, 'Port')}{' '}
+                    {getLocString('integrationsTrinoPortLabel', 'Port')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -143,7 +143,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="database">
-                    {getLocString('integrationsTrinoDatabaseLabel' as any, 'Database')}{' '}
+                    {getLocString('integrationsTrinoDatabaseLabel', 'Database')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -151,7 +151,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
                     id="database"
                     value={pendingConfig.metadata.database}
                     onChange={handleDatabaseChange}
-                    placeholder={getLocString('integrationsTrinoDatabasePlaceholder' as any, 'my_database')}
+                    placeholder={getLocString('integrationsTrinoDatabasePlaceholder', 'my_database')}
                     autoComplete="off"
                     required
                 />
@@ -159,7 +159,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="username">
-                    {getLocString('integrationsTrinoUsernameLabel' as any, 'Username')}{' '}
+                    {getLocString('integrationsTrinoUsernameLabel', 'Username')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -167,7 +167,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
                     id="username"
                     value={pendingConfig.metadata.user}
                     onChange={handleUsernameChange}
-                    placeholder={getLocString('integrationsTrinoUsernamePlaceholder' as any, 'username')}
+                    placeholder={getLocString('integrationsTrinoUsernamePlaceholder', 'username')}
                     autoComplete="username"
                     required
                 />
@@ -175,7 +175,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
 
             <div className="form-group">
                 <label htmlFor="password">
-                    {getLocString('integrationsTrinoPasswordLabel' as any, 'Password')}{' '}
+                    {getLocString('integrationsTrinoPasswordLabel', 'Password')}{' '}
                     <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
@@ -183,7 +183,7 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
                     id="password"
                     value={pendingConfig.metadata.password}
                     onChange={handlePasswordChange}
-                    placeholder={getLocString('integrationsTrinoPasswordPlaceholder' as any, '••••••••')}
+                    placeholder={getLocString('integrationsTrinoPasswordPlaceholder', '••••••••')}
                     autoComplete="current-password"
                     required
                 />

From 3e5750da7f1eb55c6ca7af93c3380b8deb954d3f Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 16:32:24 +0100
Subject: [PATCH 08/13] fix pandas-dataframe exclusion in integration manager

---
 .../deepnote/integrations/integrationManager.ts   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/notebooks/deepnote/integrations/integrationManager.ts b/src/notebooks/deepnote/integrations/integrationManager.ts
index 3ad0bc592f..5a9c307f2f 100644
--- a/src/notebooks/deepnote/integrations/integrationManager.ts
+++ b/src/notebooks/deepnote/integrations/integrationManager.ts
@@ -163,15 +163,14 @@ export class IntegrationManager implements IIntegrationManager {
 
             if (integrationType === 'pandas-dataframe') {
                 logger.debug(`IntegrationManager: Skipping internal DuckDB integration ${selectedIntegrationId}`);
-                return;
+            } else {
+                integrations.set(selectedIntegrationId, {
+                    config: config || null,
+                    status: config ? IntegrationStatus.Connected : IntegrationStatus.Disconnected,
+                    integrationName,
+                    integrationType
+                });
             }
-
-            integrations.set(selectedIntegrationId, {
-                config: config || null,
-                status: config ? IntegrationStatus.Connected : IntegrationStatus.Disconnected,
-                integrationName,
-                integrationType
-            });
         }
 
         if (integrations.size === 0) {

From 3aca8816dbfc750a30207c78b80d3acc9cc8497e Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 16:41:33 +0100
Subject: [PATCH 09/13] add missing SSH/SSL options in integration config forms

---
 src/messageTypes.ts                           |  22 ++
 .../integrations/integrationWebview.ts        |  20 ++
 src/platform/common/utils/localize.ts         |  26 ++
 .../webview-side/integrations/AlloyDBForm.tsx |  73 ++++++
 .../integrations/CaCertificateFields.tsx      |  80 ++++++
 .../integrations/ClickHouseForm.tsx           |  73 ++++++
 .../integrations/DatabricksForm.tsx           |  40 +++
 .../webview-side/integrations/DremioForm.tsx  |  40 +++
 .../webview-side/integrations/MariaDBForm.tsx |  55 +++++
 .../integrations/MaterializeForm.tsx          |  73 ++++++
 .../webview-side/integrations/MindsDBForm.tsx |  55 +++++
 .../webview-side/integrations/MongoDBForm.tsx | 230 ++++++++++++++++++
 .../webview-side/integrations/MySQLForm.tsx   |  55 +++++
 .../integrations/PostgresForm.tsx             |  93 ++++++-
 .../integrations/RedshiftForm.tsx             |  73 ++++++
 .../integrations/SQLServerForm.tsx            |  40 +++
 .../integrations/SshOptionsFields.tsx         |  87 +++++++
 .../webview-side/integrations/TrinoForm.tsx   |  73 ++++++
 18 files changed, 1200 insertions(+), 8 deletions(-)
 create mode 100644 src/webviews/webview-side/integrations/CaCertificateFields.tsx
 create mode 100644 src/webviews/webview-side/integrations/SshOptionsFields.tsx

diff --git a/src/messageTypes.ts b/src/messageTypes.ts
index d24d6bc735..53b36b44cb 100644
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -313,6 +313,15 @@ export type LocalizedMessages = {
     integrationsMongoDBConnectionStringLabel: string;
     integrationsMongoDBConnectionStringPlaceholder: string;
     integrationsMongoDBConnectionStringHelp: string;
+    integrationsMongoDBOptionalFieldsNote: string;
+    integrationsMongoDBRawConnectionStringLabel: string;
+    integrationsMongoDBPrefixLabel: string;
+    integrationsMongoDBHostLabel: string;
+    integrationsMongoDBPortLabel: string;
+    integrationsMongoDBUserLabel: string;
+    integrationsMongoDBPasswordLabel: string;
+    integrationsMongoDBDatabaseLabel: string;
+    integrationsMongoDBOptionsLabel: string;
     // Redshift form strings
     integrationsRedshiftNameLabel: string;
     integrationsRedshiftNamePlaceholder: string;
@@ -416,6 +425,19 @@ export type LocalizedMessages = {
     integrationsTrinoUsernamePlaceholder: string;
     integrationsTrinoPasswordLabel: string;
     integrationsTrinoPasswordPlaceholder: string;
+    // SSH options strings
+    integrationsSshEnabled: string;
+    integrationsSshHost: string;
+    integrationsSshHostPlaceholder: string;
+    integrationsSshPort: string;
+    integrationsSshUser: string;
+    integrationsSshUserPlaceholder: string;
+    // SSL/CA certificate strings
+    integrationsSslEnabled: string;
+    integrationsCaCertificateName: string;
+    integrationsCaCertificateNamePlaceholder: string;
+    integrationsCaCertificateText: string;
+    integrationsCaCertificateTextPlaceholder: string;
     // Common form strings
     integrationsRequiredField: string;
     integrationsOptionalField: string;
diff --git a/src/notebooks/deepnote/integrations/integrationWebview.ts b/src/notebooks/deepnote/integrations/integrationWebview.ts
index 671674e819..99d6b1239e 100644
--- a/src/notebooks/deepnote/integrations/integrationWebview.ts
+++ b/src/notebooks/deepnote/integrations/integrationWebview.ts
@@ -256,6 +256,15 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsMongoDBConnectionStringLabel: localize.Integrations.mongoDBConnectionStringLabel,
             integrationsMongoDBConnectionStringPlaceholder: localize.Integrations.mongoDBConnectionStringPlaceholder,
             integrationsMongoDBConnectionStringHelp: localize.Integrations.mongoDBConnectionStringHelp,
+            integrationsMongoDBOptionalFieldsNote: localize.Integrations.mongoDBOptionalFieldsNote,
+            integrationsMongoDBRawConnectionStringLabel: localize.Integrations.mongoDBRawConnectionStringLabel,
+            integrationsMongoDBPrefixLabel: localize.Integrations.mongoDBPrefixLabel,
+            integrationsMongoDBHostLabel: localize.Integrations.mongoDBHostLabel,
+            integrationsMongoDBPortLabel: localize.Integrations.mongoDBPortLabel,
+            integrationsMongoDBUserLabel: localize.Integrations.mongoDBUserLabel,
+            integrationsMongoDBPasswordLabel: localize.Integrations.mongoDBPasswordLabel,
+            integrationsMongoDBDatabaseLabel: localize.Integrations.mongoDBDatabaseLabel,
+            integrationsMongoDBOptionsLabel: localize.Integrations.mongoDBOptionsLabel,
             integrationsRedshiftNameLabel: localize.Integrations.redshiftNameLabel,
             integrationsRedshiftNamePlaceholder: localize.Integrations.redshiftNamePlaceholder,
             integrationsRedshiftAuthMethodLabel: localize.Integrations.redshiftAuthMethodLabel,
@@ -352,6 +361,17 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsTrinoUsernamePlaceholder: localize.Integrations.trinoUsernamePlaceholder,
             integrationsTrinoPasswordLabel: localize.Integrations.trinoPasswordLabel,
             integrationsTrinoPasswordPlaceholder: localize.Integrations.trinoPasswordPlaceholder,
+            integrationsSshEnabled: localize.Integrations.sshEnabled,
+            integrationsSshHost: localize.Integrations.sshHost,
+            integrationsSshHostPlaceholder: localize.Integrations.sshHostPlaceholder,
+            integrationsSshPort: localize.Integrations.sshPort,
+            integrationsSshUser: localize.Integrations.sshUser,
+            integrationsSshUserPlaceholder: localize.Integrations.sshUserPlaceholder,
+            integrationsSslEnabled: localize.Integrations.sslEnabled,
+            integrationsCaCertificateName: localize.Integrations.caCertificateName,
+            integrationsCaCertificateNamePlaceholder: localize.Integrations.caCertificateNamePlaceholder,
+            integrationsCaCertificateText: localize.Integrations.caCertificateText,
+            integrationsCaCertificateTextPlaceholder: localize.Integrations.caCertificateTextPlaceholder,
             integrationsUnnamedIntegration: localize.Integrations.unnamedIntegration('{0}'),
             integrationsUnsupportedIntegrationType: localize.Integrations.unsupportedIntegrationType('{0}')
         };
diff --git a/src/platform/common/utils/localize.ts b/src/platform/common/utils/localize.ts
index ad22d9bd38..6296b4b2eb 100644
--- a/src/platform/common/utils/localize.ts
+++ b/src/platform/common/utils/localize.ts
@@ -989,6 +989,17 @@ export namespace Integrations {
     export const mongoDBConnectionStringHelp = l10n.t(
         'Enter your MongoDB connection string. Example: mongodb://user:pass@host:27017/mydb or mongodb+srv://user:pass@cluster.mongodb.net/mydb'
     );
+    export const mongoDBOptionalFieldsNote = l10n.t(
+        'The following fields are optional and redundant with the connection string. They create environment variables for use in your code.'
+    );
+    export const mongoDBRawConnectionStringLabel = l10n.t('Raw Connection String (optional)');
+    export const mongoDBPrefixLabel = l10n.t('Prefix (optional)');
+    export const mongoDBHostLabel = l10n.t('Host (optional)');
+    export const mongoDBPortLabel = l10n.t('Port (optional)');
+    export const mongoDBUserLabel = l10n.t('User (optional)');
+    export const mongoDBPasswordLabel = l10n.t('Password (optional)');
+    export const mongoDBDatabaseLabel = l10n.t('Database (optional)');
+    export const mongoDBOptionsLabel = l10n.t('Options (optional)');
 
     // Redshift form strings
     export const redshiftNameLabel = l10n.t('Name (optional)');
@@ -1108,6 +1119,21 @@ export namespace Integrations {
     export const trinoUsernamePlaceholder = l10n.t('username');
     export const trinoPasswordLabel = l10n.t('Password');
     export const trinoPasswordPlaceholder = l10n.t('••••••••');
+
+    // SSH options strings
+    export const sshEnabled = l10n.t('Enable SSH Tunnel');
+    export const sshHost = l10n.t('SSH Host');
+    export const sshHostPlaceholder = l10n.t('ssh.example.com');
+    export const sshPort = l10n.t('SSH Port');
+    export const sshUser = l10n.t('SSH User');
+    export const sshUserPlaceholder = l10n.t('ubuntu');
+
+    // SSL/CA certificate strings
+    export const sslEnabled = l10n.t('Enable SSL');
+    export const caCertificateName = l10n.t('CA Certificate Name');
+    export const caCertificateNamePlaceholder = l10n.t('my-ca-certificate');
+    export const caCertificateText = l10n.t('CA Certificate (PEM)');
+    export const caCertificateTextPlaceholder = l10n.t('-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----');
 }
 
 export namespace SelectInputSettings {
diff --git a/src/webviews/webview-side/integrations/AlloyDBForm.tsx b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
index b93418f06b..82fd65250a 100644
--- a/src/webviews/webview-side/integrations/AlloyDBForm.tsx
+++ b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 export interface IAlloyDBFormProps {
     integrationId: string;
@@ -94,6 +96,55 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
         });
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshEnabled: enabled || undefined }
+        });
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshHost: host || undefined }
+        });
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshPort: port || undefined }
+        });
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshUser: user || undefined }
+        });
+    };
+
+    const handleSslEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sslEnabled: enabled || undefined }
+        });
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateName: name || undefined }
+        });
+    };
+
+    const handleCaCertificateTextChange = (text: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateText: text || undefined }
+        });
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
@@ -184,6 +235,28 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                sslEnabled={pendingConfig.metadata.sslEnabled}
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                caCertificateText={pendingConfig.metadata.caCertificateText}
+                onSslEnabledChange={handleSslEnabledChange}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                onCaCertificateTextChange={handleCaCertificateTextChange}
+                showSslEnabled={true}
+                showCertificateText={true}
+            />
+
             <div className="form-actions">
                 <button type="button" className="secondary" onClick={onCancel}>
                     {getLocString('integrationsCancel', 'Cancel')}
diff --git a/src/webviews/webview-side/integrations/CaCertificateFields.tsx b/src/webviews/webview-side/integrations/CaCertificateFields.tsx
new file mode 100644
index 0000000000..66ebb52b3c
--- /dev/null
+++ b/src/webviews/webview-side/integrations/CaCertificateFields.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
+
+export interface ICaCertificateFieldsProps {
+    sslEnabled?: boolean;
+    caCertificateName?: string;
+    caCertificateText?: string;
+    onSslEnabledChange?: (enabled: boolean) => void;
+    onCaCertificateNameChange: (name: string) => void;
+    onCaCertificateTextChange?: (text: string) => void;
+    /** Whether to show the SSL enabled checkbox (default: true) */
+    showSslEnabled?: boolean;
+    /** Whether to show the certificate text field (default: true) */
+    showCertificateText?: boolean;
+}
+
+export const CaCertificateFields: React.FC<ICaCertificateFieldsProps> = ({
+    sslEnabled,
+    caCertificateName,
+    caCertificateText,
+    onSslEnabledChange,
+    onCaCertificateNameChange,
+    onCaCertificateTextChange,
+    showSslEnabled = true,
+    showCertificateText = true
+}) => {
+    return (
+        <>
+            {showSslEnabled && onSslEnabledChange && (
+                <div className="form-group">
+                    <label>
+                        <input
+                            type="checkbox"
+                            checked={sslEnabled || false}
+                            onChange={(e) => onSslEnabledChange(e.target.checked)}
+                        />{' '}
+                        {getLocString('integrationsSslEnabled', 'Enable SSL')}
+                    </label>
+                </div>
+            )}
+
+            {(!showSslEnabled || sslEnabled) && (
+                <>
+                    <div className="form-group">
+                        <label htmlFor="caCertificateName">
+                            {getLocString('integrationsCaCertificateName', 'CA Certificate Name')}
+                        </label>
+                        <input
+                            type="text"
+                            id="caCertificateName"
+                            value={caCertificateName || ''}
+                            onChange={(e) => onCaCertificateNameChange(e.target.value)}
+                            placeholder={getLocString('integrationsCaCertificateNamePlaceholder', 'my-ca-certificate')}
+                            autoComplete="off"
+                        />
+                    </div>
+
+                    {showCertificateText && onCaCertificateTextChange && (
+                        <div className="form-group">
+                            <label htmlFor="caCertificateText">
+                                {getLocString('integrationsCaCertificateText', 'CA Certificate (PEM)')}
+                            </label>
+                            <textarea
+                                id="caCertificateText"
+                                value={caCertificateText || ''}
+                                onChange={(e) => onCaCertificateTextChange(e.target.value)}
+                                placeholder={getLocString(
+                                    'integrationsCaCertificateTextPlaceholder',
+                                    '-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----'
+                                )}
+                                rows={6}
+                                autoComplete="off"
+                            />
+                        </div>
+                    )}
+                </>
+            )}
+        </>
+    );
+};
diff --git a/src/webviews/webview-side/integrations/ClickHouseForm.tsx b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
index 3dd9ac4a15..6ffaa15506 100644
--- a/src/webviews/webview-side/integrations/ClickHouseForm.tsx
+++ b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 export interface IClickHouseFormProps {
     integrationId: string;
@@ -95,6 +97,55 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
         });
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshEnabled: enabled || undefined }
+        });
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshHost: host || undefined }
+        });
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshPort: port || undefined }
+        });
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshUser: user || undefined }
+        });
+    };
+
+    const handleSslEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sslEnabled: enabled || undefined }
+        });
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateName: name || undefined }
+        });
+    };
+
+    const handleCaCertificateTextChange = (text: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateText: text || undefined }
+        });
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
@@ -181,6 +232,28 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                sslEnabled={pendingConfig.metadata.sslEnabled}
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                caCertificateText={pendingConfig.metadata.caCertificateText}
+                onSslEnabledChange={handleSslEnabledChange}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                onCaCertificateTextChange={handleCaCertificateTextChange}
+                showSslEnabled={true}
+                showCertificateText={true}
+            />
+
             <div className="form-actions">
                 <button type="button" className="secondary" onClick={onCancel}>
                     {getLocString('integrationsCancel', 'Cancel')}
diff --git a/src/webviews/webview-side/integrations/DatabricksForm.tsx b/src/webviews/webview-side/integrations/DatabricksForm.tsx
index 32d5b64d13..2888044e86 100644
--- a/src/webviews/webview-side/integrations/DatabricksForm.tsx
+++ b/src/webviews/webview-side/integrations/DatabricksForm.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
 
 function createEmptyDatabricksConfig(params: {
     id: string;
@@ -82,6 +83,34 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
         setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, catalog: e.target.value } }));
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshHost: host || undefined }
+        }));
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshPort: port || undefined }
+        }));
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshUser: user || undefined }
+        }));
+    };
+
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         onSave(pendingConfig);
@@ -193,6 +222,17 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
             <div className="form-actions">
                 <button type="submit" className="primary">
                     {getLocString('integrationsSave', 'Save')}
diff --git a/src/webviews/webview-side/integrations/DremioForm.tsx b/src/webviews/webview-side/integrations/DremioForm.tsx
index 4b74f7096e..a3b19464b3 100644
--- a/src/webviews/webview-side/integrations/DremioForm.tsx
+++ b/src/webviews/webview-side/integrations/DremioForm.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
 
 function createEmptyDremioConfig(params: {
     id: string;
@@ -70,6 +71,34 @@ export const DremioForm: React.FC<IDremioFormProps> = ({
         setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, token: e.target.value } }));
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshHost: host || undefined }
+        }));
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshPort: port || undefined }
+        }));
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshUser: user || undefined }
+        }));
+    };
+
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         onSave(pendingConfig);
@@ -149,6 +178,17 @@ export const DremioForm: React.FC<IDremioFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
             <div className="form-actions">
                 <button type="submit" className="primary">
                     {getLocString('integrationsSave', 'Save')}
diff --git a/src/webviews/webview-side/integrations/MariaDBForm.tsx b/src/webviews/webview-side/integrations/MariaDBForm.tsx
index 1fdd91c03b..c1d608e865 100644
--- a/src/webviews/webview-side/integrations/MariaDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MariaDBForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 function createEmptyMariaDBConfig(params: {
     id: string;
@@ -75,6 +77,41 @@ export const MariaDBForm: React.FC<IMariaDBFormProps> = ({
         setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshHost: host || undefined }
+        }));
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshPort: port || undefined }
+        }));
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshUser: user || undefined }
+        }));
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, caCertificateName: name || undefined }
+        }));
+    };
+
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         onSave(pendingConfig);
@@ -170,6 +207,24 @@ export const MariaDBForm: React.FC<IMariaDBFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                showSslEnabled={false}
+                showCertificateText={false}
+            />
+
             <div className="form-actions">
                 <button type="submit" className="primary">
                     {getLocString('integrationsSave', 'Save')}
diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
index 4945ade745..84e88de0c4 100644
--- a/src/webviews/webview-side/integrations/MaterializeForm.tsx
+++ b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 export interface IMaterializeFormProps {
     integrationId: string;
@@ -104,6 +106,55 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
         });
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshEnabled: enabled || undefined }
+        });
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshHost: host || undefined }
+        });
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshPort: port || undefined }
+        });
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshUser: user || undefined }
+        });
+    };
+
+    const handleSslEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sslEnabled: enabled || undefined }
+        });
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateName: name || undefined }
+        });
+    };
+
+    const handleCaCertificateTextChange = (text: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateText: text || undefined }
+        });
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
@@ -210,6 +261,28 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                sslEnabled={pendingConfig.metadata.sslEnabled}
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                caCertificateText={pendingConfig.metadata.caCertificateText}
+                onSslEnabledChange={handleSslEnabledChange}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                onCaCertificateTextChange={handleCaCertificateTextChange}
+                showSslEnabled={true}
+                showCertificateText={true}
+            />
+
             <div className="form-actions">
                 <button type="button" className="secondary" onClick={onCancel}>
                     {getLocString('integrationsCancel', 'Cancel')}
diff --git a/src/webviews/webview-side/integrations/MindsDBForm.tsx b/src/webviews/webview-side/integrations/MindsDBForm.tsx
index 6350f63909..98aa7be9e1 100644
--- a/src/webviews/webview-side/integrations/MindsDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MindsDBForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 export interface IMindsDBFormProps {
     integrationId: string;
@@ -94,6 +96,41 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
         });
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshEnabled: enabled || undefined }
+        });
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshHost: host || undefined }
+        });
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshPort: port || undefined }
+        });
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshUser: user || undefined }
+        });
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateName: name || undefined }
+        });
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
@@ -184,6 +221,24 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                showSslEnabled={false}
+                showCertificateText={false}
+            />
+
             <div className="form-actions">
                 <button type="button" className="secondary" onClick={onCancel}>
                     {getLocString('integrationsCancel', 'Cancel')}
diff --git a/src/webviews/webview-side/integrations/MongoDBForm.tsx b/src/webviews/webview-side/integrations/MongoDBForm.tsx
index 054259f161..fec6142b0a 100644
--- a/src/webviews/webview-side/integrations/MongoDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MongoDBForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 function createEmptyMongoDBConfig(params: {
     id: string;
@@ -55,6 +57,111 @@ export const MongoDBForm: React.FC<IMongoDBFormProps> = ({
         setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, connection_string: e.target.value } }));
     };
 
+    const handleRawConnectionStringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, rawConnectionString: e.target.value || undefined }
+        }));
+    };
+
+    const handlePrefixChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, prefix: e.target.value || undefined }
+        }));
+    };
+
+    const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, host: e.target.value || undefined }
+        }));
+    };
+
+    const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, port: e.target.value || undefined }
+        }));
+    };
+
+    const handleUserChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, user: e.target.value || undefined }
+        }));
+    };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, password: e.target.value || undefined }
+        }));
+    };
+
+    const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, database: e.target.value || undefined }
+        }));
+    };
+
+    const handleOptionsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, options: e.target.value || undefined }
+        }));
+    };
+
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshHost: host || undefined }
+        }));
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshPort: port || undefined }
+        }));
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshUser: user || undefined }
+        }));
+    };
+
+    const handleSslEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sslEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, caCertificateName: name || undefined }
+        }));
+    };
+
+    const handleCaCertificateTextChange = (text: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, caCertificateText: text || undefined }
+        }));
+    };
+
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         onSave(pendingConfig);
@@ -98,6 +205,129 @@ export const MongoDBForm: React.FC<IMongoDBFormProps> = ({
                 </small>
             </div>
 
+            <div className="form-section-note">
+                {getLocString(
+                    'integrationsMongoDBOptionalFieldsNote',
+                    'The following fields are optional and redundant with the connection string. They create environment variables for use in your code.'
+                )}
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="rawConnectionString">
+                    {getLocString('integrationsMongoDBRawConnectionStringLabel', 'Raw Connection String (optional)')}
+                </label>
+                <input
+                    type="text"
+                    id="rawConnectionString"
+                    value={pendingConfig.metadata.rawConnectionString || ''}
+                    onChange={handleRawConnectionStringChange}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="prefix">{getLocString('integrationsMongoDBPrefixLabel', 'Prefix (optional)')}</label>
+                <input
+                    type="text"
+                    id="prefix"
+                    value={pendingConfig.metadata.prefix || ''}
+                    onChange={handlePrefixChange}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="host">{getLocString('integrationsMongoDBHostLabel', 'Host (optional)')}</label>
+                <input
+                    type="text"
+                    id="host"
+                    value={pendingConfig.metadata.host || ''}
+                    onChange={handleHostChange}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="port">{getLocString('integrationsMongoDBPortLabel', 'Port (optional)')}</label>
+                <input
+                    type="text"
+                    id="port"
+                    value={pendingConfig.metadata.port || ''}
+                    onChange={handlePortChange}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="user">{getLocString('integrationsMongoDBUserLabel', 'User (optional)')}</label>
+                <input
+                    type="text"
+                    id="user"
+                    value={pendingConfig.metadata.user || ''}
+                    onChange={handleUserChange}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="password">
+                    {getLocString('integrationsMongoDBPasswordLabel', 'Password (optional)')}
+                </label>
+                <input
+                    type="password"
+                    id="password"
+                    value={pendingConfig.metadata.password || ''}
+                    onChange={handlePasswordChange}
+                    autoComplete="current-password"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="database">
+                    {getLocString('integrationsMongoDBDatabaseLabel', 'Database (optional)')}
+                </label>
+                <input
+                    type="text"
+                    id="database"
+                    value={pendingConfig.metadata.database || ''}
+                    onChange={handleDatabaseChange}
+                    autoComplete="off"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="options">{getLocString('integrationsMongoDBOptionsLabel', 'Options (optional)')}</label>
+                <input
+                    type="text"
+                    id="options"
+                    value={pendingConfig.metadata.options || ''}
+                    onChange={handleOptionsChange}
+                    autoComplete="off"
+                />
+            </div>
+
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                sslEnabled={pendingConfig.metadata.sslEnabled}
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                caCertificateText={pendingConfig.metadata.caCertificateText}
+                onSslEnabledChange={handleSslEnabledChange}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                onCaCertificateTextChange={handleCaCertificateTextChange}
+                showSslEnabled={true}
+                showCertificateText={true}
+            />
+
             <div className="form-actions">
                 <button type="submit" className="primary">
                     {getLocString('integrationsSave', 'Save')}
diff --git a/src/webviews/webview-side/integrations/MySQLForm.tsx b/src/webviews/webview-side/integrations/MySQLForm.tsx
index 51cb18f625..4f538ca148 100644
--- a/src/webviews/webview-side/integrations/MySQLForm.tsx
+++ b/src/webviews/webview-side/integrations/MySQLForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 function createEmptyMySQLConfig(params: {
     id: string;
@@ -75,6 +77,41 @@ export const MySQLForm: React.FC<IMySQLFormProps> = ({
         setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshHost: host || undefined }
+        }));
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshPort: port || undefined }
+        }));
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshUser: user || undefined }
+        }));
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, caCertificateName: name || undefined }
+        }));
+    };
+
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         onSave(pendingConfig);
@@ -170,6 +207,24 @@ export const MySQLForm: React.FC<IMySQLFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                showSslEnabled={false}
+                showCertificateText={false}
+            />
+
             <div className="form-actions">
                 <button type="submit" className="primary">
                     {getLocString('integrationsSave', 'Save')}
diff --git a/src/webviews/webview-side/integrations/PostgresForm.tsx b/src/webviews/webview-side/integrations/PostgresForm.tsx
index d36d5f1522..b071c4bc33 100644
--- a/src/webviews/webview-side/integrations/PostgresForm.tsx
+++ b/src/webviews/webview-side/integrations/PostgresForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 function createEmptyPostgresConfig(params: {
     id: string;
@@ -109,12 +111,72 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({
         }));
     };
 
-    const handleSslChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleSshEnabledChange = (enabled: boolean) => {
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                sslEnabled: e.target.checked
+                sshEnabled: enabled || undefined
+            }
+        }));
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: {
+                ...prev.metadata,
+                sshHost: host || undefined
+            }
+        }));
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: {
+                ...prev.metadata,
+                sshPort: port || undefined
+            }
+        }));
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: {
+                ...prev.metadata,
+                sshUser: user || undefined
+            }
+        }));
+    };
+
+    const handleSslEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: {
+                ...prev.metadata,
+                sslEnabled: enabled || undefined
+            }
+        }));
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: {
+                ...prev.metadata,
+                caCertificateName: name || undefined
+            }
+        }));
+    };
+
+    const handleCaCertificateTextChange = (text: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: {
+                ...prev.metadata,
+                caCertificateText: text || undefined
             }
         }));
     };
@@ -221,12 +283,27 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({
                 />
             </div>
 
-            <div className="form-group checkbox-group">
-                <label>
-                    <input type="checkbox" checked={pendingConfig.metadata.sslEnabled} onChange={handleSslChange} />
-                    {getLocString('integrationsPostgresSslLabel', 'Use SSL')}
-                </label>
-            </div>
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                sslEnabled={pendingConfig.metadata.sslEnabled}
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                caCertificateText={pendingConfig.metadata.caCertificateText}
+                onSslEnabledChange={handleSslEnabledChange}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                onCaCertificateTextChange={handleCaCertificateTextChange}
+                showSslEnabled={true}
+                showCertificateText={true}
+            />
 
             <div className="form-actions">
                 <button type="submit" className="primary">
diff --git a/src/webviews/webview-side/integrations/RedshiftForm.tsx b/src/webviews/webview-side/integrations/RedshiftForm.tsx
index 810a6ad54f..34f427fcfd 100644
--- a/src/webviews/webview-side/integrations/RedshiftForm.tsx
+++ b/src/webviews/webview-side/integrations/RedshiftForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 type RedshiftConfig = Extract<DatabaseIntegrationConfig, { type: 'redshift' }>;
 
@@ -106,6 +108,55 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
         }
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshHost: host || undefined }
+        }));
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshPort: port || undefined }
+        }));
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sshUser: user || undefined }
+        }));
+    };
+
+    const handleSslEnabledChange = (enabled: boolean) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, sslEnabled: enabled || undefined }
+        }));
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, caCertificateName: name || undefined }
+        }));
+    };
+
+    const handleCaCertificateTextChange = (text: string) => {
+        setPendingConfig((prev) => ({
+            ...prev,
+            metadata: { ...prev.metadata, caCertificateText: text || undefined }
+        }));
+    };
+
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         onSave(pendingConfig);
@@ -232,6 +283,28 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
                 </>
             )}
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                sslEnabled={pendingConfig.metadata.sslEnabled}
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                caCertificateText={pendingConfig.metadata.caCertificateText}
+                onSslEnabledChange={handleSslEnabledChange}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                onCaCertificateTextChange={handleCaCertificateTextChange}
+                showSslEnabled={true}
+                showCertificateText={true}
+            />
+
             <div className="form-actions">
                 <button type="submit" className="primary">
                     {getLocString('integrationsSave', 'Save')}
diff --git a/src/webviews/webview-side/integrations/SQLServerForm.tsx b/src/webviews/webview-side/integrations/SQLServerForm.tsx
index 751e4fa201..832077fadc 100644
--- a/src/webviews/webview-side/integrations/SQLServerForm.tsx
+++ b/src/webviews/webview-side/integrations/SQLServerForm.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
 
 export interface ISQLServerFormProps {
     integrationId: string;
@@ -97,6 +98,34 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
         });
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshEnabled: enabled || undefined }
+        });
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshHost: host || undefined }
+        });
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshPort: port || undefined }
+        });
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshUser: user || undefined }
+        });
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
@@ -191,6 +220,17 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
             <div className="form-actions">
                 <button type="button" className="secondary" onClick={onCancel}>
                     {getLocString('integrationsCancel', 'Cancel')}
diff --git a/src/webviews/webview-side/integrations/SshOptionsFields.tsx b/src/webviews/webview-side/integrations/SshOptionsFields.tsx
new file mode 100644
index 0000000000..30e10228df
--- /dev/null
+++ b/src/webviews/webview-side/integrations/SshOptionsFields.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
+
+export interface ISshOptionsFieldsProps {
+    sshEnabled?: boolean;
+    sshHost?: string;
+    sshPort?: string;
+    sshUser?: string;
+    onSshEnabledChange: (enabled: boolean) => void;
+    onSshHostChange: (host: string) => void;
+    onSshPortChange: (port: string) => void;
+    onSshUserChange: (user: string) => void;
+}
+
+export const SshOptionsFields: React.FC<ISshOptionsFieldsProps> = ({
+    sshEnabled,
+    sshHost,
+    sshPort,
+    sshUser,
+    onSshEnabledChange,
+    onSshHostChange,
+    onSshPortChange,
+    onSshUserChange
+}) => {
+    return (
+        <>
+            <div className="form-group">
+                <label>
+                    <input
+                        type="checkbox"
+                        checked={sshEnabled || false}
+                        onChange={(e) => onSshEnabledChange(e.target.checked)}
+                    />{' '}
+                    {getLocString('integrationsSshEnabled', 'Enable SSH Tunnel')}
+                </label>
+            </div>
+
+            {sshEnabled && (
+                <>
+                    <div className="form-group">
+                        <label htmlFor="sshHost">
+                            {getLocString('integrationsSshHost', 'SSH Host')}{' '}
+                            <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="sshHost"
+                            value={sshHost || ''}
+                            onChange={(e) => onSshHostChange(e.target.value)}
+                            placeholder={getLocString('integrationsSshHostPlaceholder', 'ssh.example.com')}
+                            autoComplete="off"
+                            required
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="sshPort">{getLocString('integrationsSshPort', 'SSH Port')}</label>
+                        <input
+                            type="text"
+                            id="sshPort"
+                            value={sshPort || ''}
+                            onChange={(e) => onSshPortChange(e.target.value)}
+                            placeholder="22"
+                            autoComplete="off"
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="sshUser">
+                            {getLocString('integrationsSshUser', 'SSH User')}{' '}
+                            <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="sshUser"
+                            value={sshUser || ''}
+                            onChange={(e) => onSshUserChange(e.target.value)}
+                            placeholder={getLocString('integrationsSshUserPlaceholder', 'ubuntu')}
+                            autoComplete="off"
+                            required
+                        />
+                    </div>
+                </>
+            )}
+        </>
+    );
+};
diff --git a/src/webviews/webview-side/integrations/TrinoForm.tsx b/src/webviews/webview-side/integrations/TrinoForm.tsx
index 149eff3e9f..cf046bda97 100644
--- a/src/webviews/webview-side/integrations/TrinoForm.tsx
+++ b/src/webviews/webview-side/integrations/TrinoForm.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { format, getLocString } from '../react-common/locReactSide';
 import { DatabaseIntegrationConfig } from '@deepnote/database-integrations';
+import { SshOptionsFields } from './SshOptionsFields';
+import { CaCertificateFields } from './CaCertificateFields';
 
 export interface ITrinoFormProps {
     integrationId: string;
@@ -95,6 +97,55 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
         });
     };
 
+    const handleSshEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshEnabled: enabled || undefined }
+        });
+    };
+
+    const handleSshHostChange = (host: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshHost: host || undefined }
+        });
+    };
+
+    const handleSshPortChange = (port: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshPort: port || undefined }
+        });
+    };
+
+    const handleSshUserChange = (user: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sshUser: user || undefined }
+        });
+    };
+
+    const handleSslEnabledChange = (enabled: boolean) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, sslEnabled: enabled || undefined }
+        });
+    };
+
+    const handleCaCertificateNameChange = (name: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateName: name || undefined }
+        });
+    };
+
+    const handleCaCertificateTextChange = (text: string) => {
+        setPendingConfig({
+            ...pendingConfig,
+            metadata: { ...pendingConfig.metadata, caCertificateText: text || undefined }
+        });
+    };
+
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
@@ -189,6 +240,28 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
                 />
             </div>
 
+            <SshOptionsFields
+                sshEnabled={pendingConfig.metadata.sshEnabled}
+                sshHost={pendingConfig.metadata.sshHost}
+                sshPort={pendingConfig.metadata.sshPort}
+                sshUser={pendingConfig.metadata.sshUser}
+                onSshEnabledChange={handleSshEnabledChange}
+                onSshHostChange={handleSshHostChange}
+                onSshPortChange={handleSshPortChange}
+                onSshUserChange={handleSshUserChange}
+            />
+
+            <CaCertificateFields
+                sslEnabled={pendingConfig.metadata.sslEnabled}
+                caCertificateName={pendingConfig.metadata.caCertificateName}
+                caCertificateText={pendingConfig.metadata.caCertificateText}
+                onSslEnabledChange={handleSslEnabledChange}
+                onCaCertificateNameChange={handleCaCertificateNameChange}
+                onCaCertificateTextChange={handleCaCertificateTextChange}
+                showSslEnabled={true}
+                showCertificateText={true}
+            />
+
             <div className="form-actions">
                 <button type="button" className="secondary" onClick={onCancel}>
                     {getLocString('integrationsCancel', 'Cancel')}

From 8dc7397fe7c03ac66f7ab83acebe15c69d80abeb Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 17:06:30 +0100
Subject: [PATCH 10/13] remove MS header requirement from copilot guidelines

---
 .github/copilot-instructions.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 16afe323f2..fdc375ae84 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -40,7 +40,6 @@ Read `.github/typescript-instructions.md` for detailed TypeScript development st
 - Preserve error details, scrub PII
 
 ### Code Quality
-- Include Microsoft copyright header
 - Prefer async/await, handle cancellation with CancellationToken
 - Use lint/format tools
 

From 2e383f6ea1aa79c9869fcadd3784626bf42d0582 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 17:09:16 +0100
Subject: [PATCH 11/13] add default port to redshift form

---
 src/webviews/webview-side/integrations/MaterializeForm.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
index 84e88de0c4..005111a312 100644
--- a/src/webviews/webview-side/integrations/MaterializeForm.tsx
+++ b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -24,6 +24,7 @@ function createEmptyMaterializeConfig(params: {
         type: 'materialize',
         metadata: {
             host: '',
+            port: '6875',
             user: '',
             password: '',
             database: '',

From d7547418e411b39873c3e66c901cc4d8036c4ba1 Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 17:09:27 +0100
Subject: [PATCH 12/13] avoid losing redshift credentials when switching auth
 method

---
 .../webview-side/integrations/RedshiftForm.tsx   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/webviews/webview-side/integrations/RedshiftForm.tsx b/src/webviews/webview-side/integrations/RedshiftForm.tsx
index 34f427fcfd..0ee31ff5ed 100644
--- a/src/webviews/webview-side/integrations/RedshiftForm.tsx
+++ b/src/webviews/webview-side/integrations/RedshiftForm.tsx
@@ -44,6 +44,11 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
             ? structuredClone(existingConfig)
             : createEmptyRedshiftConfig({ id: integrationId, name: defaultName })
     );
+    // Store credentials temporarily when switching to individual-credentials
+    const [savedCredentials, setSavedCredentials] = React.useState<{ user: string; password: string }>({
+        user: '',
+        password: ''
+    });
 
     React.useEffect(() => {
         setPendingConfig(
@@ -67,11 +72,18 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
                     host: prev.metadata.host,
                     port: prev.metadata.port,
                     database: prev.metadata.database,
-                    user: '',
-                    password: ''
+                    user: savedCredentials.user,
+                    password: savedCredentials.password
                 }
             }));
         } else {
+            // Save current credentials before switching
+            if (pendingConfig.metadata.authMethod === 'username-and-password') {
+                setSavedCredentials({
+                    user: pendingConfig.metadata.user,
+                    password: pendingConfig.metadata.password
+                });
+            }
             setPendingConfig((prev) => ({
                 ...prev,
                 metadata: {

From ebf0c2697cd3da9ed829d0f7a43374955feb5b7c Mon Sep 17 00:00:00 2001
From: jankuca <jan@jankuca.com>
Date: Sun, 2 Nov 2025 18:12:00 +0100
Subject: [PATCH 13/13] fix react event use in integration config forms to
 avoid RC with async state updates

---
 .../webview-side/integrations/AlloyDBForm.tsx | 18 +++++++----
 .../webview-side/integrations/AthenaForm.tsx  | 18 +++++++----
 .../integrations/BigQueryForm.tsx             |  3 +-
 .../integrations/ClickHouseForm.tsx           | 18 +++++++----
 .../integrations/DatabricksForm.tsx           | 21 ++++++++-----
 .../webview-side/integrations/DremioForm.tsx  | 15 ++++++----
 .../webview-side/integrations/MariaDBForm.tsx | 18 +++++++----
 .../integrations/MaterializeForm.tsx          | 21 ++++++++-----
 .../webview-side/integrations/MindsDBForm.tsx | 18 +++++++----
 .../webview-side/integrations/MongoDBForm.tsx | 30 ++++++++++++-------
 .../webview-side/integrations/MySQLForm.tsx   | 18 +++++++----
 .../integrations/PostgresForm.tsx             | 18 +++++++----
 .../integrations/RedshiftForm.tsx             | 21 ++++++++-----
 .../integrations/SQLServerForm.tsx            | 18 +++++++----
 .../integrations/SnowflakeForm.tsx            | 30 ++++++++++++-------
 .../webview-side/integrations/SpannerForm.tsx | 12 +++++---
 .../webview-side/integrations/TrinoForm.tsx   | 18 +++++++----
 17 files changed, 210 insertions(+), 105 deletions(-)

diff --git a/src/webviews/webview-side/integrations/AlloyDBForm.tsx b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
index 82fd65250a..02e7721356 100644
--- a/src/webviews/webview-side/integrations/AlloyDBForm.tsx
+++ b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
@@ -58,41 +58,47 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
     };
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig({ ...pendingConfig, name: e.target.value });
+        const value = e.target.value;
+        setPendingConfig({ ...pendingConfig, name: value });
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, host: e.target.value }
+            metadata: { ...pendingConfig.metadata, host: value }
         });
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+            metadata: { ...pendingConfig.metadata, port: value || undefined }
         });
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, database: e.target.value }
+            metadata: { ...pendingConfig.metadata, database: value }
         });
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, user: e.target.value }
+            metadata: { ...pendingConfig.metadata, user: value }
         });
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, password: e.target.value }
+            metadata: { ...pendingConfig.metadata, password: value }
         });
     };
 
diff --git a/src/webviews/webview-side/integrations/AthenaForm.tsx b/src/webviews/webview-side/integrations/AthenaForm.tsx
index 148451f486..13f10297db 100644
--- a/src/webviews/webview-side/integrations/AthenaForm.tsx
+++ b/src/webviews/webview-side/integrations/AthenaForm.tsx
@@ -52,27 +52,33 @@ export const AthenaForm: React.FC<IAthenaFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleAccessKeyIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, access_key_id: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, access_key_id: value } }));
     };
 
     const handleSecretAccessKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, secret_access_key: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, secret_access_key: value } }));
     };
 
     const handleRegionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, region: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, region: value } }));
     };
 
     const handleS3OutputPathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, s3_output_path: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, s3_output_path: value } }));
     };
 
     const handleWorkgroupChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, workgroup: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, workgroup: value } }));
     };
 
     const handleSubmit = (e: React.FormEvent) => {
diff --git a/src/webviews/webview-side/integrations/BigQueryForm.tsx b/src/webviews/webview-side/integrations/BigQueryForm.tsx
index 54cf987898..b535e71aff 100644
--- a/src/webviews/webview-side/integrations/BigQueryForm.tsx
+++ b/src/webviews/webview-side/integrations/BigQueryForm.tsx
@@ -57,9 +57,10 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({
             : '';
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            name: e.target.value
+            name: value
         }));
     };
 
diff --git a/src/webviews/webview-side/integrations/ClickHouseForm.tsx b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
index 6ffaa15506..587f06ebd8 100644
--- a/src/webviews/webview-side/integrations/ClickHouseForm.tsx
+++ b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
@@ -59,41 +59,47 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
     };
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig({ ...pendingConfig, name: e.target.value });
+        const value = e.target.value;
+        setPendingConfig({ ...pendingConfig, name: value });
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, host: e.target.value }
+            metadata: { ...pendingConfig.metadata, host: value }
         });
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+            metadata: { ...pendingConfig.metadata, port: value || undefined }
         });
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, database: e.target.value }
+            metadata: { ...pendingConfig.metadata, database: value }
         });
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, user: e.target.value }
+            metadata: { ...pendingConfig.metadata, user: value }
         });
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, password: e.target.value || undefined }
+            metadata: { ...pendingConfig.metadata, password: value || undefined }
         });
     };
 
diff --git a/src/webviews/webview-side/integrations/DatabricksForm.tsx b/src/webviews/webview-side/integrations/DatabricksForm.tsx
index 2888044e86..e590de0864 100644
--- a/src/webviews/webview-side/integrations/DatabricksForm.tsx
+++ b/src/webviews/webview-side/integrations/DatabricksForm.tsx
@@ -56,31 +56,38 @@ export const DatabricksForm: React.FC<IDatabricksFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: value } }));
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: value } }));
     };
 
     const handleHttpPathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, httpPath: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, httpPath: value } }));
     };
 
     const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, token: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, token: value } }));
     };
 
     const handleSchemaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, schema: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, schema: value } }));
     };
 
     const handleCatalogChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, catalog: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, catalog: value } }));
     };
 
     const handleSshEnabledChange = (enabled: boolean) => {
diff --git a/src/webviews/webview-side/integrations/DremioForm.tsx b/src/webviews/webview-side/integrations/DremioForm.tsx
index a3b19464b3..3483819afd 100644
--- a/src/webviews/webview-side/integrations/DremioForm.tsx
+++ b/src/webviews/webview-side/integrations/DremioForm.tsx
@@ -52,23 +52,28 @@ export const DremioForm: React.FC<IDremioFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: value } }));
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: value } }));
     };
 
     const handleSchemaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, schema: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, schema: value } }));
     };
 
     const handleTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, token: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, token: value } }));
     };
 
     const handleSshEnabledChange = (enabled: boolean) => {
diff --git a/src/webviews/webview-side/integrations/MariaDBForm.tsx b/src/webviews/webview-side/integrations/MariaDBForm.tsx
index c1d608e865..0f3ded1372 100644
--- a/src/webviews/webview-side/integrations/MariaDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MariaDBForm.tsx
@@ -54,27 +54,33 @@ export const MariaDBForm: React.FC<IMariaDBFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: value } }));
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: value } }));
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: value } }));
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: value } }));
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: value } }));
     };
 
     const handleSshEnabledChange = (enabled: boolean) => {
diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
index 005111a312..031ccc5d08 100644
--- a/src/webviews/webview-side/integrations/MaterializeForm.tsx
+++ b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -62,48 +62,55 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
     };
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig({ ...pendingConfig, name: e.target.value });
+        const value = e.target.value;
+        setPendingConfig({ ...pendingConfig, name: value });
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, host: e.target.value }
+            metadata: { ...pendingConfig.metadata, host: value }
         });
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+            metadata: { ...pendingConfig.metadata, port: value || undefined }
         });
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, database: e.target.value }
+            metadata: { ...pendingConfig.metadata, database: value }
         });
     };
 
     const handleClusterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, cluster: e.target.value }
+            metadata: { ...pendingConfig.metadata, cluster: value }
         });
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, user: e.target.value }
+            metadata: { ...pendingConfig.metadata, user: value }
         });
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, password: e.target.value }
+            metadata: { ...pendingConfig.metadata, password: value }
         });
     };
 
diff --git a/src/webviews/webview-side/integrations/MindsDBForm.tsx b/src/webviews/webview-side/integrations/MindsDBForm.tsx
index 98aa7be9e1..928724305c 100644
--- a/src/webviews/webview-side/integrations/MindsDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MindsDBForm.tsx
@@ -58,41 +58,47 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
     };
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig({ ...pendingConfig, name: e.target.value });
+        const value = e.target.value;
+        setPendingConfig({ ...pendingConfig, name: value });
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, host: e.target.value }
+            metadata: { ...pendingConfig.metadata, host: value }
         });
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, port: e.target.value || undefined }
+            metadata: { ...pendingConfig.metadata, port: value || undefined }
         });
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, database: e.target.value }
+            metadata: { ...pendingConfig.metadata, database: value }
         });
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, user: e.target.value }
+            metadata: { ...pendingConfig.metadata, user: value }
         });
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, password: e.target.value }
+            metadata: { ...pendingConfig.metadata, password: value }
         });
     };
 
diff --git a/src/webviews/webview-side/integrations/MongoDBForm.tsx b/src/webviews/webview-side/integrations/MongoDBForm.tsx
index fec6142b0a..e169aaa6dd 100644
--- a/src/webviews/webview-side/integrations/MongoDBForm.tsx
+++ b/src/webviews/webview-side/integrations/MongoDBForm.tsx
@@ -50,66 +50,76 @@ export const MongoDBForm: React.FC<IMongoDBFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleConnectionStringChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, connection_string: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, connection_string: value } }));
     };
 
     const handleRawConnectionStringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, rawConnectionString: e.target.value || undefined }
+            metadata: { ...prev.metadata, rawConnectionString: value || undefined }
         }));
     };
 
     const handlePrefixChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, prefix: e.target.value || undefined }
+            metadata: { ...prev.metadata, prefix: value || undefined }
         }));
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, host: e.target.value || undefined }
+            metadata: { ...prev.metadata, host: value || undefined }
         }));
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, port: e.target.value || undefined }
+            metadata: { ...prev.metadata, port: value || undefined }
         }));
     };
 
     const handleUserChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, user: e.target.value || undefined }
+            metadata: { ...prev.metadata, user: value || undefined }
         }));
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, password: e.target.value || undefined }
+            metadata: { ...prev.metadata, password: value || undefined }
         }));
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, database: e.target.value || undefined }
+            metadata: { ...prev.metadata, database: value || undefined }
         }));
     };
 
     const handleOptionsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            metadata: { ...prev.metadata, options: e.target.value || undefined }
+            metadata: { ...prev.metadata, options: value || undefined }
         }));
     };
 
diff --git a/src/webviews/webview-side/integrations/MySQLForm.tsx b/src/webviews/webview-side/integrations/MySQLForm.tsx
index 4f538ca148..37903bcba9 100644
--- a/src/webviews/webview-side/integrations/MySQLForm.tsx
+++ b/src/webviews/webview-side/integrations/MySQLForm.tsx
@@ -54,27 +54,33 @@ export const MySQLForm: React.FC<IMySQLFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: value } }));
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: value } }));
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: value } }));
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: value } }));
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: value } }));
     };
 
     const handleSshEnabledChange = (enabled: boolean) => {
diff --git a/src/webviews/webview-side/integrations/PostgresForm.tsx b/src/webviews/webview-side/integrations/PostgresForm.tsx
index b071c4bc33..b6b12efab8 100644
--- a/src/webviews/webview-side/integrations/PostgresForm.tsx
+++ b/src/webviews/webview-side/integrations/PostgresForm.tsx
@@ -55,58 +55,64 @@ export const PostgresForm: React.FC<IPostgresFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            name: e.target.value
+            name: value
         }));
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                host: e.target.value
+                host: value
             }
         }));
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                port: e.target.value
+                port: value
             }
         }));
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                database: e.target.value
+                database: value
             }
         }));
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                user: e.target.value
+                user: value
             }
         }));
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                password: e.target.value
+                password: value
             }
         }));
     };
diff --git a/src/webviews/webview-side/integrations/RedshiftForm.tsx b/src/webviews/webview-side/integrations/RedshiftForm.tsx
index 0ee31ff5ed..0cd07d6910 100644
--- a/src/webviews/webview-side/integrations/RedshiftForm.tsx
+++ b/src/webviews/webview-side/integrations/RedshiftForm.tsx
@@ -59,11 +59,13 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleAuthMethodChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const authMethod = e.target.value as 'username-and-password' | 'individual-credentials';
+        const value = e.target.value;
+        const authMethod = value as 'username-and-password' | 'individual-credentials';
         if (authMethod === 'username-and-password') {
             setPendingConfig((prev) => ({
                 ...prev,
@@ -97,26 +99,31 @@ export const RedshiftForm: React.FC<IRedshiftFormProps> = ({
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, host: value } }));
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, port: value } }));
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: value } }));
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         if (pendingConfig.metadata.authMethod === 'username-and-password') {
-            setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: e.target.value } }));
+            setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, user: value } }));
         }
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         if (pendingConfig.metadata.authMethod === 'username-and-password') {
-            setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: e.target.value } }));
+            setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, password: value } }));
         }
     };
 
diff --git a/src/webviews/webview-side/integrations/SQLServerForm.tsx b/src/webviews/webview-side/integrations/SQLServerForm.tsx
index 832077fadc..ad36470724 100644
--- a/src/webviews/webview-side/integrations/SQLServerForm.tsx
+++ b/src/webviews/webview-side/integrations/SQLServerForm.tsx
@@ -60,41 +60,47 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
     };
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig({ ...pendingConfig, name: e.target.value });
+        const value = e.target.value;
+        setPendingConfig({ ...pendingConfig, name: value });
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, host: e.target.value }
+            metadata: { ...pendingConfig.metadata, host: value }
         });
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, port: e.target.value }
+            metadata: { ...pendingConfig.metadata, port: value }
         });
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, database: e.target.value }
+            metadata: { ...pendingConfig.metadata, database: value }
         });
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, user: e.target.value }
+            metadata: { ...pendingConfig.metadata, user: value }
         });
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, password: e.target.value }
+            metadata: { ...pendingConfig.metadata, password: value }
         });
     };
 
diff --git a/src/webviews/webview-side/integrations/SnowflakeForm.tsx b/src/webviews/webview-side/integrations/SnowflakeForm.tsx
index 097d87e784..637cf381ea 100644
--- a/src/webviews/webview-side/integrations/SnowflakeForm.tsx
+++ b/src/webviews/webview-side/integrations/SnowflakeForm.tsx
@@ -77,24 +77,27 @@ export const SnowflakeForm: React.FC<ISnowflakeFormProps> = ({
             : '';
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
-            name: e.target.value
+            name: value
         }));
     };
 
     const handleAccountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                accountName: e.target.value
+                accountName: value
             }
         }));
     };
 
     const handleAuthMethodChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const newAuthMethod = e.target.value as SnowflakeAuthMethod;
+        const value = e.target.value;
+        const newAuthMethod = value as SnowflakeAuthMethod;
 
         setPendingConfig((prev) => {
             if (newAuthMethod === SnowflakeAuthMethods.Password) {
@@ -128,6 +131,7 @@ export const SnowflakeForm: React.FC<ISnowflakeFormProps> = ({
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => {
             if (
                 prev.metadata.authMethod === SnowflakeAuthMethods.Password ||
@@ -137,7 +141,7 @@ export const SnowflakeForm: React.FC<ISnowflakeFormProps> = ({
                     ...prev,
                     metadata: {
                         ...prev.metadata,
-                        username: e.target.value
+                        username: value
                     }
                 };
             }
@@ -146,13 +150,14 @@ export const SnowflakeForm: React.FC<ISnowflakeFormProps> = ({
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => {
             if (prev.metadata.authMethod === SnowflakeAuthMethods.Password) {
                 return {
                     ...prev,
                     metadata: {
                         ...prev.metadata,
-                        password: e.target.value
+                        password: value
                     }
                 };
             }
@@ -161,13 +166,14 @@ export const SnowflakeForm: React.FC<ISnowflakeFormProps> = ({
     };
 
     const handlePrivateKeyChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => {
             if (prev.metadata.authMethod === SnowflakeAuthMethods.ServiceAccountKeyPair) {
                 return {
                     ...prev,
                     metadata: {
                         ...prev.metadata,
-                        privateKey: e.target.value
+                        privateKey: value
                     }
                 };
             }
@@ -176,13 +182,14 @@ export const SnowflakeForm: React.FC<ISnowflakeFormProps> = ({
     };
 
     const handlePrivateKeyPassphraseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => {
             if (prev.metadata.authMethod === SnowflakeAuthMethods.ServiceAccountKeyPair) {
                 return {
                     ...prev,
                     metadata: {
                         ...prev.metadata,
-                        privateKeyPassphrase: e.target.value
+                        privateKeyPassphrase: value
                     }
                 };
             }
@@ -191,31 +198,34 @@ export const SnowflakeForm: React.FC<ISnowflakeFormProps> = ({
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                database: e.target.value || undefined
+                database: value || undefined
             }
         }));
     };
 
     const handleWarehouseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                warehouse: e.target.value || undefined
+                warehouse: value || undefined
             }
         }));
     };
 
     const handleRoleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig((prev) => ({
             ...prev,
             metadata: {
                 ...prev.metadata,
-                role: e.target.value || undefined
+                role: value || undefined
             }
         }));
     };
diff --git a/src/webviews/webview-side/integrations/SpannerForm.tsx b/src/webviews/webview-side/integrations/SpannerForm.tsx
index 7f9a5d8e2b..a130ca97b2 100644
--- a/src/webviews/webview-side/integrations/SpannerForm.tsx
+++ b/src/webviews/webview-side/integrations/SpannerForm.tsx
@@ -52,15 +52,18 @@ export const SpannerForm: React.FC<ISpannerFormProps> = ({
     }, [existingConfig, integrationId, defaultName]);
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, name: e.target.value }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, name: value }));
     };
 
     const handleInstanceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, instance: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, instance: value } }));
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: e.target.value } }));
+        const value = e.target.value;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, database: value } }));
     };
 
     const handleServiceAccountChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -82,7 +85,8 @@ export const SpannerForm: React.FC<ISpannerFormProps> = ({
     };
 
     const handleDataBoostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, dataBoostEnabled: e.target.checked } }));
+        const checked = e.target.checked;
+        setPendingConfig((prev) => ({ ...prev, metadata: { ...prev.metadata, dataBoostEnabled: checked } }));
     };
 
     const handleSubmit = (e: React.FormEvent) => {
diff --git a/src/webviews/webview-side/integrations/TrinoForm.tsx b/src/webviews/webview-side/integrations/TrinoForm.tsx
index cf046bda97..61ef215e0a 100644
--- a/src/webviews/webview-side/integrations/TrinoForm.tsx
+++ b/src/webviews/webview-side/integrations/TrinoForm.tsx
@@ -59,41 +59,47 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
     };
 
     const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setPendingConfig({ ...pendingConfig, name: e.target.value });
+        const value = e.target.value;
+        setPendingConfig({ ...pendingConfig, name: value });
     };
 
     const handleHostChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, host: e.target.value }
+            metadata: { ...pendingConfig.metadata, host: value }
         });
     };
 
     const handlePortChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, port: e.target.value }
+            metadata: { ...pendingConfig.metadata, port: value }
         });
     };
 
     const handleDatabaseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, database: e.target.value }
+            metadata: { ...pendingConfig.metadata, database: value }
         });
     };
 
     const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, user: e.target.value }
+            metadata: { ...pendingConfig.metadata, user: value }
         });
     };
 
     const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
         setPendingConfig({
             ...pendingConfig,
-            metadata: { ...pendingConfig.metadata, password: e.target.value }
+            metadata: { ...pendingConfig.metadata, password: value }
         });
     };