add new integration creating cards to integration management

Author: jankuca

src/messageTypes.ts

@@ -179,6 +179,8 @@ export type LocalizedMessages = {
     integrationsConfigureTitle: string;
     integrationsCancel: string;
     integrationsSave: string;
+    integrationsAddNewIntegration: string;
+    integrationsDatabase: string;
     // Integration type labels
     integrationsPostgresTypeLabel: string;
     integrationsBigQueryTypeLabel: string;

src/notebooks/deepnote/integrations/integrationWebview.ts

@@ -127,6 +127,8 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsConfirmResetMessage: localize.Integrations.confirmResetMessage,
             integrationsConfirmResetDetails: localize.Integrations.confirmResetDetails,
             integrationsConfigureTitle: localize.Integrations.configureTitle,
+            integrationsAddNewIntegration: localize.Integrations.addNewIntegration,
+            integrationsDatabase: localize.Integrations.database,
             integrationsPostgresTypeLabel: localize.Integrations.postgresTypeLabel,
             integrationsBigQueryTypeLabel: localize.Integrations.bigQueryTypeLabel,
             integrationsSnowflakeTypeLabel: localize.Integrations.snowflakeTypeLabel,
@@ -464,9 +466,20 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             // Update local state
             const integration = this.integrations.get(integrationId);
             if (integration) {
+                // Existing integration - update it
                 integration.config = config;
                 integration.status = IntegrationStatus.Connected;
+                integration.integrationName = config.name;
+                integration.integrationType = config.type;
                 this.integrations.set(integrationId, integration);
+            } else {
+                // New integration - add it to the map
+                this.integrations.set(integrationId, {
+                    config,
+                    status: IntegrationStatus.Connected,
+                    integrationName: config.name,
+                    integrationType: config.type
+                });
             }
 
             // Update the project's integrations list

src/platform/common/utils/localize.ts

@@ -828,6 +828,8 @@ export namespace Integrations {
     export const configureTitle = l10n.t('Configure Integration: {0}');
     export const cancel = l10n.t('Cancel');
     export const save = l10n.t('Save');
+    export const addNewIntegration = l10n.t('Add New Integration');
+    export const database = l10n.t('Database');
     export const requiredField = l10n.t('*');
     export const optionalField = l10n.t('(optional)');
     export const unnamedIntegration = (id: string) => l10n.t('Unnamed Integration ({0})', id);

src/webviews/webview-side/integrations/IntegrationPanel.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IVsCodeApi } from '../react-common/postOffice';
 import { getLocString, storeLocStrings } from '../react-common/locReactSide';
 import { IntegrationList } from './IntegrationList';
+import { IntegrationTypeSelector } from './IntegrationTypeSelector';
 import { ConfigurationForm } from './ConfigurationForm';
 import {
     ConfigurableDatabaseIntegrationConfig,
@@ -143,6 +144,19 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
     const handleCancel = () => {
         setSelectedIntegrationId(null);
         setSelectedConfig(null);
+        setSelectedIntegrationDefaultName(undefined);
+        setSelectedIntegrationType(undefined);
+    };
+
+    const handleSelectIntegrationType = (type: ConfigurableDatabaseIntegrationType) => {
+        // Generate a new UUID for the integration
+        const newId = crypto.randomUUID();
+
+        // Set up the form for creating a new integration
+        setSelectedIntegrationId(newId);
+        setSelectedConfig(null);
+        setSelectedIntegrationDefaultName(undefined);
+        setSelectedIntegrationType(type);
     };
 
     return (
@@ -153,6 +167,8 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
             <IntegrationList integrations={integrations} onConfigure={handleConfigure} onDelete={handleDelete} />
 
+            <IntegrationTypeSelector onSelectType={handleSelectIntegrationType} />
+
             {selectedIntegrationId && selectedIntegrationType && (
                 <ConfigurationForm
                     integrationId={selectedIntegrationId}

src/webviews/webview-side/integrations/IntegrationTypeSelector.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
+import { ConfigurableDatabaseIntegrationType } from './types';
+
+export interface IIntegrationTypeSelectorProps {
+    onSelectType: (type: ConfigurableDatabaseIntegrationType) => void;
+}
+
+interface IntegrationTypeInfo {
+    type: ConfigurableDatabaseIntegrationType;
+    label: string;
+    icon: string;
+}
+
+const INTEGRATION_TYPES: IntegrationTypeInfo[] = [
+    {
+        type: 'pgsql',
+        label: 'PostgreSQL',
+        icon: '🐘'
+    },
+    {
+        type: 'mysql',
+        label: 'MySQL',
+        icon: '🐬'
+    },
+    {
+        type: 'mariadb',
+        label: 'MariaDB',
+        icon: '🦭'
+    },
+    {
+        type: 'mongodb',
+        label: 'MongoDB',
+        icon: '🍃'
+    },
+    {
+        type: 'sql-server',
+        label: 'Microsoft SQL Server',
+        icon: '🗄️'
+    },
+    {
+        type: 'big-query',
+        label: 'Google BigQuery',
+        icon: '📊'
+    },
+    {
+        type: 'snowflake',
+        label: 'Snowflake',
+        icon: '❄️'
+    },
+    {
+        type: 'alloydb',
+        label: 'Google AlloyDB',
+        icon: '🔷'
+    },
+    {
+        type: 'spanner',
+        label: 'Google Cloud Spanner',
+        icon: '🔧'
+    },
+    {
+        type: 'materialize',
+        label: 'Materialize',
+        icon: '⚡'
+    },
+    {
+        type: 'clickhouse',
+        label: 'ClickHouse',
+        icon: '🏠'
+    },
+    {
+        type: 'athena',
+        label: 'Amazon Athena',
+        icon: '🏛️'
+    },
+    {
+        type: 'redshift',
+        label: 'Amazon Redshift',
+        icon: '🔴'
+    },
+    {
+        type: 'databricks',
+        label: 'Databricks',
+        icon: '🧱'
+    },
+    {
+        type: 'dremio',
+        label: 'Dremio',
+        icon: '🚀'
+    },
+    {
+        type: 'mindsdb',
+        label: 'MindsDB',
+        icon: '🧠'
+    },
+    {
+        type: 'trino',
+        label: 'Trino',
+        icon: '⚙️'
+    }
+];
+
+export const IntegrationTypeSelector: React.FC<IIntegrationTypeSelectorProps> = ({ onSelectType }) => {
+    return (
+        <div className="integration-type-selector">
+            <h2>{getLocString('integrationsAddNewIntegration', 'Add New Integration')}</h2>
+            <div className="integration-type-grid">
+                {INTEGRATION_TYPES.map((integrationInfo) => (
+                    <button
+                        key={integrationInfo.type}
+                        type="button"
+                        className="integration-type-card"
+                        onClick={() => onSelectType(integrationInfo.type)}
+                    >
+                        <div className="integration-type-icon">{integrationInfo.icon}</div>
+                        <div className="integration-type-label">{integrationInfo.label}</div>
+                        <div className="integration-type-category">
+                            {getLocString('integrationsDatabase', 'Database')}
+                        </div>
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};
+

src/webviews/webview-side/integrations/integrations.css

@@ -1,5 +1,7 @@
 .integration-panel {
     padding: 20px;
+    max-width: 640px;
+    margin: 0 auto;
     color: var(--vscode-foreground);
     font-family: var(--vscode-font-family);
     font-size: var(--vscode-font-size);
@@ -263,3 +265,61 @@ form {
 .form-actions button {
     flex: 1;
 }
+
+/* Integration type selector */
+.integration-type-selector {
+    margin-top: 32px;
+    padding-top: 32px;
+    border-top: 1px solid var(--vscode-panel-border);
+}
+
+.integration-type-selector h2 {
+    margin-top: 0;
+    margin-bottom: 16px;
+    font-size: 1.2em;
+    font-weight: 600;
+}
+
+.integration-type-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+}
+
+.integration-type-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background-color: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: left;
+    transition:
+        background-color 0.2s,
+        border-color 0.2s;
+}
+
+.integration-type-card:hover {
+    background-color: var(--vscode-toolbar-hoverBackground);
+    border-color: var(--vscode-focusBorder);
+}
+
+.integration-type-icon {
+    font-size: 24px;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.integration-type-label {
+    font-weight: 400;
+    font-size: 13px;
+    flex: 1;
+    color: var(--vscode-foreground);
+}
+
+.integration-type-category {
+    display: none;
+}