fix: show integration name/type from project when not configured

Author: jankuca

src/messageTypes.ts

@@ -179,6 +179,9 @@ export type LocalizedMessages = {
     integrationsConfigureTitle: string;
     integrationsCancel: string;
     integrationsSave: string;
+    // Integration type labels
+    integrationsPostgresTypeLabel: string;
+    integrationsBigQueryTypeLabel: string;
     // PostgreSQL form strings
     integrationsPostgresNameLabel: string;
     integrationsPostgresNamePlaceholder: string;

src/notebooks/deepnote/integrations/integrationWebview.ts

@@ -128,6 +128,8 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsConfirmResetMessage: localize.Integrations.confirmResetMessage,
             integrationsConfirmResetDetails: localize.Integrations.confirmResetDetails,
             integrationsConfigureTitle: localize.Integrations.configureTitle,
+            integrationsPostgresTypeLabel: localize.Integrations.postgresTypeLabel,
+            integrationsBigQueryTypeLabel: localize.Integrations.bigQueryTypeLabel,
             integrationsCancel: localize.Integrations.cancel,
             integrationsSave: localize.Integrations.save,
             integrationsRequiredField: localize.Integrations.requiredField,

src/platform/common/utils/localize.ts

@@ -831,6 +831,10 @@ export namespace Integrations {
     export const requiredField = l10n.t('*');
     export const optionalField = l10n.t('(optional)');
 
+    // Integration type labels
+    export const postgresTypeLabel = l10n.t('PostgreSQL');
+    export const bigQueryTypeLabel = l10n.t('BigQuery');
+
     // PostgreSQL form strings
     export const postgresNameLabel = l10n.t('Name (optional)');
     export const postgresNamePlaceholder = l10n.t('My PostgreSQL Database');

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

@@ -1,13 +1,24 @@
 import * as React from 'react';
 import { getLocString } from '../react-common/locReactSide';
-import { IntegrationWithStatus } from './types';
+import { IntegrationWithStatus, IntegrationType } from './types';
 
 export interface IIntegrationItemProps {
     integration: IntegrationWithStatus;
     onConfigure: (integrationId: string) => void;
     onDelete: (integrationId: string) => void;
 }
 
+const getIntegrationTypeLabel = (type: IntegrationType): string => {
+    switch (type) {
+        case 'postgres':
+            return getLocString('integrationsPostgresTypeLabel', 'PostgreSQL');
+        case 'bigquery':
+            return getLocString('integrationsBigQueryTypeLabel', 'BigQuery');
+        default:
+            return type;
+    }
+};
+
 export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration, onConfigure, onDelete }) => {
     const statusClass = integration.status === 'connected' ? 'status-connected' : 'status-disconnected';
     const statusText =
@@ -17,7 +28,15 @@ export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration,
     const configureText = integration.config
         ? getLocString('integrationsReconfigure', 'Reconfigure')
         : getLocString('integrationsConfigure', 'Configure');
-    const displayName = integration.config?.name || integration.id;
+
+    // Get the name: prefer config name, then project name, then ID
+    const name = integration.config?.name || integration.projectName || integration.id;
+
+    // Get the type: prefer config type, then project type
+    const type = integration.config?.type || integration.projectType;
+
+    // Build display name with type
+    const displayName = type ? `${name} (${getIntegrationTypeLabel(type)})` : name;
 
     return (
         <div className="integration-item">