add integration deletion button

Author: jankuca

src/messageTypes.ts

@@ -173,9 +173,13 @@ export type LocalizedMessages = {
     integrationsConfigure: string;
     integrationsReconfigure: string;
     integrationsReset: string;
+    integrationsDelete: string;
     integrationsConfirmResetTitle: string;
     integrationsConfirmResetMessage: string;
     integrationsConfirmResetDetails: string;
+    integrationsConfirmDeleteTitle: string;
+    integrationsConfirmDeleteMessage: string;
+    integrationsConfirmDeleteDetails: string;
     integrationsConfigureTitle: string;
     integrationsCancel: string;
     integrationsSave: string;

src/notebooks/deepnote/integrations/integrationWebview.ts

@@ -123,9 +123,13 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             integrationsConfigure: localize.Integrations.configure,
             integrationsReconfigure: localize.Integrations.reconfigure,
             integrationsReset: localize.Integrations.reset,
+            integrationsDelete: localize.Integrations.deleteIntegration,
             integrationsConfirmResetTitle: localize.Integrations.confirmResetTitle,
             integrationsConfirmResetMessage: localize.Integrations.confirmResetMessage,
             integrationsConfirmResetDetails: localize.Integrations.confirmResetDetails,
+            integrationsConfirmDeleteTitle: localize.Integrations.confirmDeleteTitle,
+            integrationsConfirmDeleteMessage: localize.Integrations.confirmDeleteMessage,
+            integrationsConfirmDeleteDetails: localize.Integrations.confirmDeleteDetails,
             integrationsConfigureTitle: localize.Integrations.configureTitle,
             integrationsAddNewIntegration: localize.Integrations.addNewIntegration,
             integrationsDatabase: localize.Integrations.database,

src/platform/common/utils/localize.ts

@@ -822,9 +822,15 @@ export namespace Integrations {
     export const configure = l10n.t('Configure');
     export const reconfigure = l10n.t('Reconfigure');
     export const reset = l10n.t('Reset');
+    export const deleteIntegration = l10n.t('Delete');
     export const confirmResetTitle = l10n.t('Confirm Reset');
     export const confirmResetMessage = l10n.t('Are you sure you want to reset this integration configuration?');
     export const confirmResetDetails = l10n.t('This will remove the stored credentials. You can reconfigure it later.');
+    export const confirmDeleteTitle = l10n.t('Confirm Delete');
+    export const confirmDeleteMessage = l10n.t('Are you sure you want to permanently delete this integration?');
+    export const confirmDeleteDetails = l10n.t(
+        'This will permanently remove the integration from your project. This action cannot be undone.'
+    );
     export const configureTitle = l10n.t('Configure Integration: {0}');
     export const cancel = l10n.t('Cancel');
     export const save = l10n.t('Save');

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

@@ -5,6 +5,7 @@ import { ConfigurableDatabaseIntegrationType, IntegrationWithStatus } from './ty
 export interface IIntegrationItemProps {
     integration: IntegrationWithStatus;
     onConfigure: (integrationId: string) => void;
+    onReset: (integrationId: string) => void;
     onDelete: (integrationId: string) => void;
 }
 
@@ -49,7 +50,7 @@ const getIntegrationTypeLabel = (type: ConfigurableDatabaseIntegrationType): str
     }
 };
 
-export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration, onConfigure, onDelete }) => {
+export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration, onConfigure, onReset, onDelete }) => {
     const statusClass = integration.status === 'connected' ? 'status-connected' : 'status-disconnected';
     const statusText =
         integration.status === 'connected'
@@ -79,10 +80,21 @@ export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration,
                     {configureText}
                 </button>
                 {integration.config && (
-                    <button type="button" className="secondary" onClick={() => onDelete(integration.id)}>
+                    <button type="button" className="secondary" onClick={() => onReset(integration.id)}>
                         {getLocString('integrationsReset', 'Reset')}
                     </button>
                 )}
+                {integration.config && (
+                    <button
+                        type="button"
+                        className="icon-button"
+                        onClick={() => onDelete(integration.id)}
+                        title={getLocString('integrationsDelete', 'Delete')}
+                        aria-label={getLocString('integrationsDelete', 'Delete')}
+                    >
+                        <span className="codicon codicon-trash" />
+                    </button>
+                )}
             </div>
         </div>
     );

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

@@ -6,10 +6,11 @@ import { IntegrationWithStatus } from './types';
 export interface IIntegrationListProps {
     integrations: IntegrationWithStatus[];
     onConfigure: (integrationId: string) => void;
+    onReset: (integrationId: string) => void;
     onDelete: (integrationId: string) => void;
 }
 
-export const IntegrationList: React.FC<IIntegrationListProps> = ({ integrations, onConfigure, onDelete }) => {
+export const IntegrationList: React.FC<IIntegrationListProps> = ({ integrations, onConfigure, onReset, onDelete }) => {
     if (integrations.length === 0) {
         return (
             <p className="no-integrations">
@@ -25,6 +26,7 @@ export const IntegrationList: React.FC<IIntegrationListProps> = ({ integrations,
                     key={integration.id}
                     integration={integration}
                     onConfigure={onConfigure}
+                    onReset={onReset}
                     onDelete={onDelete}
                 />
             ))}

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

@@ -27,9 +27,11 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
         ConfigurableDatabaseIntegrationType | undefined
     >(undefined);
     const [message, setMessage] = React.useState<{ type: 'success' | 'error'; text: string } | null>(null);
+    const [confirmReset, setConfirmReset] = React.useState<string | null>(null);
     const [confirmDelete, setConfirmDelete] = React.useState<string | null>(null);
 
     const messageTimerRef = React.useRef<NodeJS.Timeout | null>(null);
+    const confirmResetTimerRef = React.useRef<NodeJS.Timeout | null>(null);
     const confirmDeleteTimerRef = React.useRef<NodeJS.Timeout | null>(null);
 
     // Cleanup timers on unmount
@@ -39,6 +41,10 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
                 clearTimeout(messageTimerRef.current);
                 messageTimerRef.current = null;
             }
+            if (confirmResetTimerRef.current) {
+                clearTimeout(confirmResetTimerRef.current);
+                confirmResetTimerRef.current = null;
+            }
             if (confirmDeleteTimerRef.current) {
                 clearTimeout(confirmDeleteTimerRef.current);
                 confirmDeleteTimerRef.current = null;
@@ -96,6 +102,41 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
         });
     };
 
+    const handleReset = (integrationId: string) => {
+        // Clear any existing confirmReset timer before creating a new one
+        if (confirmResetTimerRef.current) {
+            clearTimeout(confirmResetTimerRef.current);
+        }
+
+        setConfirmReset(integrationId);
+    };
+
+    const handleConfirmReset = () => {
+        if (confirmReset) {
+            // Clear the timer when user confirms
+            if (confirmResetTimerRef.current) {
+                clearTimeout(confirmResetTimerRef.current);
+                confirmResetTimerRef.current = null;
+            }
+
+            vscodeApi.postMessage({
+                type: 'delete',
+                integrationId: confirmReset
+            });
+            setConfirmReset(null);
+        }
+    };
+
+    const handleCancelReset = () => {
+        // Clear the timer when user cancels
+        if (confirmResetTimerRef.current) {
+            clearTimeout(confirmResetTimerRef.current);
+            confirmResetTimerRef.current = null;
+        }
+
+        setConfirmReset(null);
+    };
+
     const handleDelete = (integrationId: string) => {
         // Clear any existing confirmDelete timer before creating a new one
         if (confirmDeleteTimerRef.current) {
@@ -165,7 +206,12 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
 
             {message && <div className={`message message-${message.type}`}>{message.text}</div>}
 
-            <IntegrationList integrations={integrations} onConfigure={handleConfigure} onDelete={handleDelete} />
+            <IntegrationList
+                integrations={integrations}
+                onConfigure={handleConfigure}
+                onReset={handleReset}
+                onDelete={handleDelete}
+            />
 
             <IntegrationTypeSelector onSelectType={handleSelectIntegrationType} />
 
@@ -180,7 +226,7 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
                 />
             )}
 
-            {confirmDelete && (
+            {confirmReset && (
                 <div className="configuration-form-overlay">
                     <div className="configuration-form-container" style={{ maxWidth: '400px' }}>
                         <div className="configuration-form-header">
@@ -201,9 +247,41 @@ export const IntegrationPanel: React.FC<IIntegrationPanelProps> = ({ baseTheme,
                             </p>
                         </div>
                         <div className="form-actions">
-                            <button type="button" className="primary" onClick={handleConfirmDelete}>
+                            <button type="button" className="primary" onClick={handleConfirmReset}>
                                 {getLocString('integrationsReset', 'Reset')}
                             </button>
+                            <button type="button" className="secondary" onClick={handleCancelReset}>
+                                {getLocString('integrationsCancel', 'Cancel')}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {confirmDelete && (
+                <div className="configuration-form-overlay">
+                    <div className="configuration-form-container" style={{ maxWidth: '400px' }}>
+                        <div className="configuration-form-header">
+                            <h2>{getLocString('integrationsConfirmDeleteTitle', 'Confirm Delete')}</h2>
+                        </div>
+                        <div className="configuration-form-body">
+                            <p>
+                                {getLocString(
+                                    'integrationsConfirmDeleteMessage',
+                                    'Are you sure you want to permanently delete this integration?'
+                                )}
+                            </p>
+                            <p style={{ marginTop: '10px', fontSize: '0.9em', opacity: 0.8 }}>
+                                {getLocString(
+                                    'integrationsConfirmDeleteDetails',
+                                    'This will permanently remove the integration from your project. This action cannot be undone.'
+                                )}
+                            </p>
+                        </div>
+                        <div className="form-actions">
+                            <button type="button" className="primary" onClick={handleConfirmDelete}>
+                                {getLocString('integrationsDelete', 'Delete')}
+                            </button>
                             <button type="button" className="secondary" onClick={handleCancelDelete}>
                                 {getLocString('integrationsCancel', 'Cancel')}
                             </button>

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

@@ -6,6 +6,7 @@ import { detectBaseTheme } from '../react-common/themeDetector';
 import { IntegrationPanel } from './IntegrationPanel';
 
 import '../common/index.css';
+import '../react-common/codicon/codicon.css';
 import './integrations.css';
 
 // This special function talks to vscode from a web panel

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

@@ -118,6 +118,23 @@ button.primary {
     color: var(--vscode-button-foreground);
 }
 
+button.icon-button {
+    padding: 6px 8px;
+    min-width: auto;
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: var(--vscode-foreground);
+}
+
+button.icon-button:hover {
+    background-color: var(--vscode-toolbar-hoverBackground);
+    border-color: var(--vscode-button-border);
+}
+
+button.icon-button .codicon {
+    font-size: 16px;
+}
+
 /* Configuration form overlay */
 .configuration-form-overlay {
     position: fixed;