add project name to integration management screen

Author: jankuca

src/notebooks/deepnote/integrations/integrationWebview.ts

@@ -409,8 +409,16 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
         }));
         logger.debug(`IntegrationWebviewProvider: Sending ${integrationsData.length} integrations to webview`);
 
+        // Get the project name from the notebook manager
+        let projectName: string | undefined;
+        if (this.projectId) {
+            const project = this.notebookManager.getOriginalProject(this.projectId);
+            projectName = project?.project.name;
+        }
+
         await this.currentPanel.webview.postMessage({
             integrations: integrationsData,
+            projectName,
             type: 'update'
         });
     }

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

@@ -20,6 +20,7 @@ export interface IIntegrationPanelProps {
 
 export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme, vscodeApi }) => {
     const [integrations, setIntegrations] = React.useState<IntegrationWithStatus[]>([]);
+    const [projectName, setProjectName] = React.useState<string | undefined>(undefined);
     const [selectedIntegrationId, setSelectedIntegrationId] = React.useState<string | null>(null);
     const [selectedConfig, setSelectedConfig] = React.useState<ConfigurableDatabaseIntegrationConfig | null>(null);
     const [selectedIntegrationDefaultName, setSelectedIntegrationDefaultName] = React.useState<string | undefined>(
@@ -66,6 +67,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
                 case 'update':
                     setIntegrations(msg.integrations);
+                    setProjectName(msg.projectName);
                     break;
 
                 case 'showForm':
@@ -205,6 +207,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
     return (
         <div className={`integration-panel theme-${baseTheme}`}>
             <h1>{getLocString('integrationsTitle', 'Deepnote Integrations')}</h1>
+            {projectName && <p className="project-name">{projectName}</p>}
 
             {message && <div className={`message message-${message.type}`}>{message.text}</div>}
 

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

@@ -9,11 +9,18 @@
 
 .integration-panel h1 {
     margin-top: 0;
-    margin-bottom: 20px;
+    margin-bottom: 8px;
     font-size: 1.5em;
     font-weight: 600;
 }
 
+.project-name {
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: var(--vscode-descriptionForeground);
+    font-size: 0.95em;
+}
+
 /* Message styles */
 .message {
     padding: 12px 16px;

src/webviews/webview-side/integrations/types.ts

@@ -23,6 +23,7 @@ export interface IVsCodeMessage {
 export interface UpdateMessage {
     type: 'update';
     integrations: IntegrationWithStatus[];
+    projectName?: string;
 }
 
 export interface ShowFormMessage {