add icons to existing integration items

jankuca · jankuca · commit 6dcb177787ff · 2025-11-03T15:05:22.000+01:00
diff --git a/src/webviews/webview-side/integrations/IntegrationItem.tsx b/src/webviews/webview-side/integrations/IntegrationItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getLocString } from '../react-common/locReactSide';
 import { ConfigurableDatabaseIntegrationType, IntegrationWithStatus } from './types';
+import { integrationTypeIcons } from './integrationUtils';
 
 export interface IIntegrationItemProps {
     integration: IntegrationWithStatus;
@@ -66,14 +67,24 @@ export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration,
     // Get the type: prefer config type, then integration type from project
     const type = integration.config?.type || integration.integrationType;
 
-    // Build display name with type
-    const displayName = type ? `${name} (${getIntegrationTypeLabel(type)})` : name;
+    // Get the type label and icon
+    const typeLabel = type ? getIntegrationTypeLabel(type) : undefined;
+    const typeIcon = type ? integrationTypeIcons[type] : undefined;
 
     return (
         <div className="integration-item">
+            {typeIcon && (
+                <div className="integration-item-icon">
+                    <img src={typeIcon} alt={typeLabel || ''} />
+                </div>
+            )}
             <div className="integration-info">
-                <div className="integration-name">{displayName}</div>
-                <div className={`integration-status ${statusClass}`}>{statusText}</div>
+                <div className="integration-name">{name}</div>
+                <div className="integration-meta">
+                    {typeLabel && <span className="integration-type">{typeLabel}</span>}
+                    {typeLabel && <span className="integration-meta-separator"> • </span>}
+                    <span className={`integration-status ${statusClass}`}>{statusText}</span>
+                </div>
             </div>
             <div className="integration-actions">
                 <button type="button" onClick={() => onConfigure(integration.id)}>
diff --git a/src/webviews/webview-side/integrations/IntegrationPanel.tsx b/src/webviews/webview-side/integrations/IntegrationPanel.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+
+import { generateUuid } from '../../../platform/common/uuid';
 import { IVsCodeApi } from '../react-common/postOffice';
 import { getLocString, storeLocStrings } from '../react-common/locReactSide';
 import { IntegrationList } from './IntegrationList';
@@ -191,7 +193,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
     const handleSelectIntegrationType = (type: ConfigurableDatabaseIntegrationType) => {
         // Generate a new UUID for the integration
-        const newId = crypto.randomUUID();
+        const newId = generateUuid();
 
         // Set up the form for creating a new integration
         setSelectedIntegrationId(newId);
diff --git a/src/webviews/webview-side/integrations/IntegrationTypeSelector.tsx b/src/webviews/webview-side/integrations/IntegrationTypeSelector.tsx
@@ -1,28 +1,7 @@
 import * as React from 'react';
 import { getLocString } from '../react-common/locReactSide';
 import { ConfigurableDatabaseIntegrationType } from './types';
-import { integrationTypeLabels } from './integrationUtils';
-
-// Import integration logos
-/* eslint-disable @typescript-eslint/no-require-imports */
-const postgresqlLogo: string = require('./icons/postgresql.svg');
-const mysqlLogo: string = require('./icons/mysql.svg');
-const mariadbLogo: string = require('./icons/mariadb.svg');
-const mongodbLogo: string = require('./icons/mongodb.svg');
-const sqlServerLogo: string = require('./icons/sql-server.svg');
-const bigqueryLogo: string = require('./icons/bigquery.svg');
-const snowflakeLogo: string = require('./icons/snowflake.svg');
-const alloydbLogo: string = require('./icons/alloydb.svg');
-const spannerLogo: string = require('./icons/spanner.svg');
-const materializeLogo: string = require('./icons/materialize.svg');
-const clickhouseLogo: string = require('./icons/clickhouse.svg');
-const athenaLogo: string = require('./icons/athena.svg');
-const redshiftLogo: string = require('./icons/redshift.svg');
-const databricksLogo: string = require('./icons/databricks.svg');
-const dremioLogo: string = require('./icons/dremio.svg');
-const mindsdbLogo: string = require('./icons/mindsdb.svg');
-const trinoLogo: string = require('./icons/trino.svg');
-/* eslint-enable @typescript-eslint/no-require-imports */
+import { integrationTypeLabels, integrationTypeIcons } from './integrationUtils';
 
 export interface IIntegrationTypeSelectorProps {
     onSelectType: (type: ConfigurableDatabaseIntegrationType) => void;
@@ -39,42 +18,42 @@ const WAREHOUSE_INTEGRATION_TYPES: IntegrationTypeInfo[] = [
     {
         type: 'clickhouse',
         label: integrationTypeLabels['clickhouse'],
-        icon: clickhouseLogo
+        icon: integrationTypeIcons['clickhouse']
     },
     {
         type: 'redshift',
         label: integrationTypeLabels['redshift'],
-        icon: redshiftLogo
+        icon: integrationTypeIcons['redshift']
     },
     {
         type: 'athena',
         label: integrationTypeLabels['athena'],
-        icon: athenaLogo
+        icon: integrationTypeIcons['athena']
     },
     {
         type: 'big-query',
         label: integrationTypeLabels['big-query'],
-        icon: bigqueryLogo
+        icon: integrationTypeIcons['big-query']
     },
     {
         type: 'snowflake',
         label: integrationTypeLabels['snowflake'],
-        icon: snowflakeLogo
+        icon: integrationTypeIcons['snowflake']
     },
     {
         type: 'databricks',
         label: integrationTypeLabels['databricks'],
-        icon: databricksLogo
+        icon: integrationTypeIcons['databricks']
     },
     {
         type: 'dremio',
         label: integrationTypeLabels['dremio'],
-        icon: dremioLogo
+        icon: integrationTypeIcons['dremio']
     },
     {
         type: 'trino',
         label: integrationTypeLabels['trino'],
-        icon: trinoLogo
+        icon: integrationTypeIcons['trino']
     }
 ];
 
@@ -83,47 +62,47 @@ const DATABASE_INTEGRATION_TYPES: IntegrationTypeInfo[] = [
     {
         type: 'mongodb',
         label: integrationTypeLabels['mongodb'],
-        icon: mongodbLogo
+        icon: integrationTypeIcons['mongodb']
     },
     {
         type: 'pgsql',
         label: integrationTypeLabels['pgsql'],
-        icon: postgresqlLogo
+        icon: integrationTypeIcons['pgsql']
     },
     {
         type: 'mysql',
         label: integrationTypeLabels['mysql'],
-        icon: mysqlLogo
+        icon: integrationTypeIcons['mysql']
     },
     {
         type: 'mariadb',
         label: integrationTypeLabels['mariadb'],
-        icon: mariadbLogo
+        icon: integrationTypeIcons['mariadb']
     },
     {
         type: 'sql-server',
         label: integrationTypeLabels['sql-server'],
-        icon: sqlServerLogo
+        icon: integrationTypeIcons['sql-server']
     },
     {
         type: 'alloydb',
         label: integrationTypeLabels['alloydb'],
-        icon: alloydbLogo
+        icon: integrationTypeIcons['alloydb']
     },
     {
         type: 'spanner',
         label: integrationTypeLabels['spanner'],
-        icon: spannerLogo
+        icon: integrationTypeIcons['spanner']
     },
     {
         type: 'materialize',
         label: integrationTypeLabels['materialize'],
-        icon: materializeLogo
+        icon: integrationTypeIcons['materialize']
     },
     {
         type: 'mindsdb',
         label: integrationTypeLabels['mindsdb'],
-        icon: mindsdbLogo
+        icon: integrationTypeIcons['mindsdb']
     }
 ];
 
diff --git a/src/webviews/webview-side/integrations/integrationUtils.ts b/src/webviews/webview-side/integrations/integrationUtils.ts
@@ -1,6 +1,27 @@
 import { getLocString } from '../react-common/locReactSide';
 import { ConfigurableDatabaseIntegrationType } from './types';
 
+// Import integration logos
+/* eslint-disable @typescript-eslint/no-require-imports */
+const postgresqlLogo: string = require('./icons/postgresql.svg');
+const mysqlLogo: string = require('./icons/mysql.svg');
+const mariadbLogo: string = require('./icons/mariadb.svg');
+const mongodbLogo: string = require('./icons/mongodb.svg');
+const sqlServerLogo: string = require('./icons/sql-server.svg');
+const bigqueryLogo: string = require('./icons/bigquery.svg');
+const snowflakeLogo: string = require('./icons/snowflake.svg');
+const alloydbLogo: string = require('./icons/alloydb.svg');
+const spannerLogo: string = require('./icons/spanner.svg');
+const materializeLogo: string = require('./icons/materialize.svg');
+const clickhouseLogo: string = require('./icons/clickhouse.svg');
+const athenaLogo: string = require('./icons/athena.svg');
+const redshiftLogo: string = require('./icons/redshift.svg');
+const databricksLogo: string = require('./icons/databricks.svg');
+const dremioLogo: string = require('./icons/dremio.svg');
+const mindsdbLogo: string = require('./icons/mindsdb.svg');
+const trinoLogo: string = require('./icons/trino.svg');
+/* eslint-enable @typescript-eslint/no-require-imports */
+
 // Localized labels for integration types (duplicated from sqlCellStatusBarProvider.ts due to import restrictions)
 export const integrationTypeLabels: Record<ConfigurableDatabaseIntegrationType, string> = {
     alloydb: 'AlloyDB',
@@ -22,6 +43,27 @@ export const integrationTypeLabels: Record<ConfigurableDatabaseIntegrationType,
     trino: 'Trino'
 };
 
+// Icon mapping for integration types
+export const integrationTypeIcons: Record<ConfigurableDatabaseIntegrationType, string> = {
+    alloydb: alloydbLogo,
+    athena: athenaLogo,
+    'big-query': bigqueryLogo,
+    clickhouse: clickhouseLogo,
+    databricks: databricksLogo,
+    dremio: dremioLogo,
+    mariadb: mariadbLogo,
+    materialize: materializeLogo,
+    mindsdb: mindsdbLogo,
+    mongodb: mongodbLogo,
+    mysql: mysqlLogo,
+    pgsql: postgresqlLogo,
+    redshift: redshiftLogo,
+    snowflake: snowflakeLogo,
+    spanner: spannerLogo,
+    'sql-server': sqlServerLogo,
+    trino: trinoLogo
+};
+
 /**
  * Get the default name for a new integration
  * @param type The integration type
diff --git a/src/webviews/webview-side/integrations/integrations.css b/src/webviews/webview-side/integrations/integrations.css
@@ -51,23 +51,55 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 16px;
     padding: 16px;
     background-color: var(--vscode-editor-background);
     border: 1px solid var(--vscode-panel-border);
     border-radius: 4px;
 }
 
+.integration-item-icon {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.integration-item-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
 .integration-info {
     flex: 1;
+    min-width: 0;
 }
 
 .integration-name {
     font-weight: 600;
     margin-bottom: 4px;
 }
 
-.integration-status {
+.integration-meta {
+    display: flex;
+    align-items: center;
     font-size: 0.9em;
+    color: var(--vscode-descriptionForeground);
+}
+
+.integration-type {
+    color: var(--vscode-foreground);
+}
+
+.integration-meta-separator {
+    margin: 0 4px;
+}
+
+.integration-status {
+    font-size: inherit;
 }
 
 .status-connected {
@@ -81,6 +113,7 @@
 .integration-actions {
     display: flex;
     gap: 8px;
+    flex-shrink: 0;
 }
 
 /* Buttons */
