working button on sql block

Author: jankuca

src/notebooks/deepnote/integrations/integrationManager.ts

@@ -27,10 +27,26 @@ export class IntegrationManager implements IIntegrationManager {
     public activate(): void {
         // Register the manage integrations command
         // The command can optionally receive an integration ID to select/configure
+        // Note: When invoked from a notebook cell status bar, VSCode passes context object first,
+        // then the actual arguments from the command definition
         this.extensionContext.subscriptions.push(
-            commands.registerCommand(Commands.ManageIntegrations, (integrationId?: string) =>
-                this.showIntegrationsUI(integrationId)
-            )
+            commands.registerCommand(Commands.ManageIntegrations, (...args: unknown[]) => {
+                logger.debug(`IntegrationManager: Command invoked with args:`, args);
+
+                // Find the integration ID from the arguments
+                // It could be the first arg (if called directly) or in the args array (if called from UI)
+                let integrationId: string | undefined;
+
+                for (const arg of args) {
+                    if (typeof arg === 'string') {
+                        integrationId = arg;
+                        break;
+                    }
+                }
+
+                logger.debug(`IntegrationManager: Extracted integrationId: ${integrationId}`);
+                return this.showIntegrationsUI(integrationId);
+            })
         );
 
         // Listen for active notebook changes to update context
@@ -129,6 +145,17 @@ export class IntegrationManager implements IIntegrationManager {
 
         logger.debug(`IntegrationManager: Found ${integrations.size} integrations`);
 
+        // If a specific integration was requested (e.g., from status bar click),
+        // ensure it's in the map even if not detected from the project
+        if (selectedIntegrationId && !integrations.has(selectedIntegrationId)) {
+            logger.debug(`IntegrationManager: Adding requested integration ${selectedIntegrationId} to the map`);
+            const config = await this.integrationStorage.get(selectedIntegrationId);
+            integrations.set(selectedIntegrationId, {
+                config: config || null,
+                status: config ? IntegrationStatus.Connected : IntegrationStatus.Disconnected
+            });
+        }
+
         if (integrations.size === 0) {
             void window.showInformationMessage(`No integrations found in this project.`);
             return;

src/notebooks/deepnote/integrations/integrationWebview.ts

@@ -95,14 +95,42 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
      */
     private async updateWebview(): Promise<void> {
         if (!this.currentPanel) {
+            logger.debug('IntegrationWebviewProvider: No current panel, skipping update');
             return;
         }
 
-        const integrationsData = Array.from(this.integrations.entries()).map(([id, integration]) => ({
-            config: integration.config,
-            id,
-            status: integration.status
-        }));
+        const integrationsData = Array.from(this.integrations.entries()).map(([id, integration]) => {
+            // Ensure we're sending plain objects, not enums or other complex types
+            const plainConfig = integration.config
+                ? {
+                      id: integration.config.id,
+                      name: integration.config.name,
+                      type: String(integration.config.type), // Convert enum to string
+                      ...(integration.config.type === 'postgres'
+                          ? {
+                                host: (integration.config as any).host,
+                                port: (integration.config as any).port,
+                                database: (integration.config as any).database,
+                                username: (integration.config as any).username,
+                                password: (integration.config as any).password,
+                                ssl: (integration.config as any).ssl
+                            }
+                          : {
+                                projectId: (integration.config as any).projectId,
+                                credentials: (integration.config as any).credentials
+                            })
+                  }
+                : null;
+
+            return {
+                id,
+                config: plainConfig,
+                status: String(integration.status) // Convert enum to string
+            };
+        });
+
+        logger.debug(`IntegrationWebviewProvider: Sending ${integrationsData.length} integrations to webview`);
+        logger.trace('IntegrationWebviewProvider: Integration data:', JSON.stringify(integrationsData, null, 2));
 
         await this.currentPanel.webview.postMessage({
             integrations: integrationsData,

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

@@ -12,6 +12,7 @@ export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration,
     const statusText = integration.status === 'connected' ? 'Connected' : 'Not Configured';
     const configureText = integration.config ? 'Reconfigure' : 'Configure';
     const displayName = integration.config?.name || integration.id;
+    console.log('INTGGGG', integration);
 
     return (
         <div className="integration-item">

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

@@ -37,9 +37,11 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
     React.useEffect(() => {
         const handleMessage = (event: MessageEvent<WebviewMessage>) => {
             const msg = event.data;
+            console.log('IntegrationPanel: Received message:', msg);
 
             switch (msg.type) {
                 case 'update':
+                    console.log('IntegrationPanel: Updating integrations:', msg.integrations);
                     setIntegrations(msg.integrations);
                     break;
 
@@ -66,6 +68,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
             }
         };
 
+        console.log('IntegrationPanel: Component mounted, adding message listener');
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
     }, []);