add localization for integration management views

Author: jankuca

src/messageTypes.ts

@@ -165,6 +165,48 @@ export type LocalizedMessages = {
     dataframePageOf: string;
     dataframeCopyTable: string;
     dataframeExportTable: string;
+    // Integration panel strings
+    integrationsTitle: string;
+    integrationsNoIntegrationsFound: string;
+    integrationsConnected: string;
+    integrationsNotConfigured: string;
+    integrationsConfigure: string;
+    integrationsReconfigure: string;
+    integrationsReset: string;
+    integrationsConfirmResetTitle: string;
+    integrationsConfirmResetMessage: string;
+    integrationsConfirmResetDetails: string;
+    integrationsConfigureTitle: string;
+    integrationsCancel: string;
+    integrationsSave: string;
+    // PostgreSQL form strings
+    integrationsPostgresNameLabel: string;
+    integrationsPostgresNamePlaceholder: string;
+    integrationsPostgresHostLabel: string;
+    integrationsPostgresHostPlaceholder: string;
+    integrationsPostgresPortLabel: string;
+    integrationsPostgresPortPlaceholder: string;
+    integrationsPostgresDatabaseLabel: string;
+    integrationsPostgresDatabasePlaceholder: string;
+    integrationsPostgresUsernameLabel: string;
+    integrationsPostgresUsernamePlaceholder: string;
+    integrationsPostgresPasswordLabel: string;
+    integrationsPostgresPasswordPlaceholder: string;
+    integrationsPostgresSslLabel: string;
+    integrationsPostgresUnnamedIntegration: string;
+    // BigQuery form strings
+    integrationsBigQueryNameLabel: string;
+    integrationsBigQueryNamePlaceholder: string;
+    integrationsBigQueryProjectIdLabel: string;
+    integrationsBigQueryProjectIdPlaceholder: string;
+    integrationsBigQueryCredentialsLabel: string;
+    integrationsBigQueryCredentialsPlaceholder: string;
+    integrationsBigQueryCredentialsRequired: string;
+    integrationsBigQueryInvalidJson: string;
+    integrationsBigQueryUnnamedIntegration: string;
+    // Common form strings
+    integrationsRequiredField: string;
+    integrationsOptionalField: string;
 };
 // Map all messages to specific payloads
 export class IInteractiveWindowMapping {

src/notebooks/deepnote/integrations/integrationWebview.ts

@@ -2,7 +2,9 @@ import { inject, injectable } from 'inversify';
 import { Disposable, l10n, Uri, ViewColumn, WebviewPanel, window } from 'vscode';
 
 import { IExtensionContext } from '../../../platform/common/types';
+import * as localize from '../../../platform/common/utils/localize';
 import { logger } from '../../../platform/logging';
+import { LocalizedMessages, SharedMessages } from '../../../messageTypes';
 import { IIntegrationStorage, IIntegrationWebviewProvider } from './types';
 import { IntegrationConfig, IntegrationStatus, IntegrationWithStatus } from './integrationTypes';
 
@@ -82,6 +84,7 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
             this.disposables
         );
 
+        await this.sendLocStrings();
         await this.updateWebview();
 
         // If a specific integration was requested, show its configuration form
@@ -90,6 +93,61 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
         }
     }
 
+    /**
+     * Send localization strings to the webview
+     */
+    private async sendLocStrings(): Promise<void> {
+        if (!this.currentPanel) {
+            return;
+        }
+
+        const locStrings: Partial<LocalizedMessages> = {
+            integrationsTitle: localize.Integrations.title,
+            integrationsNoIntegrationsFound: localize.Integrations.noIntegrationsFound,
+            integrationsConnected: localize.Integrations.connected,
+            integrationsNotConfigured: localize.Integrations.notConfigured,
+            integrationsConfigure: localize.Integrations.configure,
+            integrationsReconfigure: localize.Integrations.reconfigure,
+            integrationsReset: localize.Integrations.reset,
+            integrationsConfirmResetTitle: localize.Integrations.confirmResetTitle,
+            integrationsConfirmResetMessage: localize.Integrations.confirmResetMessage,
+            integrationsConfirmResetDetails: localize.Integrations.confirmResetDetails,
+            integrationsConfigureTitle: localize.Integrations.configureTitle,
+            integrationsCancel: localize.Integrations.cancel,
+            integrationsSave: localize.Integrations.save,
+            integrationsRequiredField: localize.Integrations.requiredField,
+            integrationsOptionalField: localize.Integrations.optionalField,
+            integrationsPostgresNameLabel: localize.Integrations.postgresNameLabel,
+            integrationsPostgresNamePlaceholder: localize.Integrations.postgresNamePlaceholder,
+            integrationsPostgresHostLabel: localize.Integrations.postgresHostLabel,
+            integrationsPostgresHostPlaceholder: localize.Integrations.postgresHostPlaceholder,
+            integrationsPostgresPortLabel: localize.Integrations.postgresPortLabel,
+            integrationsPostgresPortPlaceholder: localize.Integrations.postgresPortPlaceholder,
+            integrationsPostgresDatabaseLabel: localize.Integrations.postgresDatabaseLabel,
+            integrationsPostgresDatabasePlaceholder: localize.Integrations.postgresDatabasePlaceholder,
+            integrationsPostgresUsernameLabel: localize.Integrations.postgresUsernameLabel,
+            integrationsPostgresUsernamePlaceholder: localize.Integrations.postgresUsernamePlaceholder,
+            integrationsPostgresPasswordLabel: localize.Integrations.postgresPasswordLabel,
+            integrationsPostgresPasswordPlaceholder: localize.Integrations.postgresPasswordPlaceholder,
+            integrationsPostgresSslLabel: localize.Integrations.postgresSslLabel,
+            integrationsPostgresUnnamedIntegration: '', // Will be formatted on the client side
+            integrationsBigQueryNameLabel: localize.Integrations.bigQueryNameLabel,
+            integrationsBigQueryNamePlaceholder: localize.Integrations.bigQueryNamePlaceholder,
+            integrationsBigQueryProjectIdLabel: localize.Integrations.bigQueryProjectIdLabel,
+            integrationsBigQueryProjectIdPlaceholder: localize.Integrations.bigQueryProjectIdPlaceholder,
+            integrationsBigQueryCredentialsLabel: localize.Integrations.bigQueryCredentialsLabel,
+            integrationsBigQueryCredentialsPlaceholder: localize.Integrations.bigQueryCredentialsPlaceholder,
+            integrationsBigQueryCredentialsRequired: localize.Integrations.bigQueryCredentialsRequired,
+            integrationsBigQueryInvalidJson: '', // Will be formatted on the client side
+            integrationsBigQueryUnnamedIntegration: '' // Will be formatted on the client side
+        };
+
+        await this.currentPanel.webview.postMessage({
+            type: SharedMessages.LocInit,
+            locStrings: JSON.stringify(locStrings)
+        });
+    }
+
     /**
      * Update the webview with current integration data
      */

src/platform/common/utils/localize.ts

@@ -814,6 +814,51 @@ export namespace WebViews {
     export const dataframeExportTable = l10n.t('Export table');
 }
 
+export namespace Integrations {
+    export const title = l10n.t('Deepnote Integrations');
+    export const noIntegrationsFound = l10n.t('No integrations found in this project.');
+    export const connected = l10n.t('Connected');
+    export const notConfigured = l10n.t('Not Configured');
+    export const configure = l10n.t('Configure');
+    export const reconfigure = l10n.t('Reconfigure');
+    export const reset = l10n.t('Reset');
+    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 configureTitle = l10n.t('Configure Integration: {0}');
+    export const cancel = l10n.t('Cancel');
+    export const save = l10n.t('Save');
+    export const requiredField = l10n.t('*');
+    export const optionalField = l10n.t('(optional)');
+
+    // PostgreSQL form strings
+    export const postgresNameLabel = l10n.t('Name (optional)');
+    export const postgresNamePlaceholder = l10n.t('My PostgreSQL Database');
+    export const postgresHostLabel = l10n.t('Host');
+    export const postgresHostPlaceholder = l10n.t('localhost');
+    export const postgresPortLabel = l10n.t('Port');
+    export const postgresPortPlaceholder = l10n.t('5432');
+    export const postgresDatabaseLabel = l10n.t('Database');
+    export const postgresDatabasePlaceholder = l10n.t('mydb');
+    export const postgresUsernameLabel = l10n.t('Username');
+    export const postgresUsernamePlaceholder = l10n.t('postgres');
+    export const postgresPasswordLabel = l10n.t('Password');
+    export const postgresPasswordPlaceholder = l10n.t('••••••••');
+    export const postgresSslLabel = l10n.t('Use SSL');
+    export const postgresUnnamedIntegration = (id: string) => l10n.t('Unnamed PostgreSQL Integration ({0})', id);
+
+    // BigQuery form strings
+    export const bigQueryNameLabel = l10n.t('Name (optional)');
+    export const bigQueryNamePlaceholder = l10n.t('My BigQuery Project');
+    export const bigQueryProjectIdLabel = l10n.t('Project ID');
+    export const bigQueryProjectIdPlaceholder = l10n.t('my-project-id');
+    export const bigQueryCredentialsLabel = l10n.t('Service Account Credentials (JSON)');
+    export const bigQueryCredentialsPlaceholder = l10n.t('{"type": "service_account", ...}');
+    export const bigQueryCredentialsRequired = l10n.t('Credentials are required');
+    export const bigQueryInvalidJson = (message: string) => l10n.t('Invalid JSON: {0}', message);
+    export const bigQueryUnnamedIntegration = (id: string) => l10n.t('Unnamed BigQuery Integration ({0})', id);
+}
+
 export namespace Deprecated {
     export const SHOW_DEPRECATED_FEATURE_PROMPT_FORMAT_ON_SAVE = l10n.t({
         message: "The setting 'python.formatting.formatOnSave' is deprecated, please use 'editor.formatOnSave'.",

src/platform/webviews/webviewHost.ts

@@ -265,7 +265,46 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
             dataframeNextPage: localize.WebViews.dataframeNextPage,
             dataframePageOf: localize.WebViews.dataframePageOf,
             dataframeCopyTable: localize.WebViews.dataframeCopyTable,
-            dataframeExportTable: localize.WebViews.dataframeExportTable
+            dataframeExportTable: localize.WebViews.dataframeExportTable,
+            // Integration panel strings (not used in this webview, but required by type)
+            integrationsTitle: '',
+            integrationsNoIntegrationsFound: '',
+            integrationsConnected: '',
+            integrationsNotConfigured: '',
+            integrationsConfigure: '',
+            integrationsReconfigure: '',
+            integrationsReset: '',
+            integrationsConfirmResetTitle: '',
+            integrationsConfirmResetMessage: '',
+            integrationsConfirmResetDetails: '',
+            integrationsConfigureTitle: '',
+            integrationsCancel: '',
+            integrationsSave: '',
+            integrationsPostgresNameLabel: '',
+            integrationsPostgresNamePlaceholder: '',
+            integrationsPostgresHostLabel: '',
+            integrationsPostgresHostPlaceholder: '',
+            integrationsPostgresPortLabel: '',
+            integrationsPostgresPortPlaceholder: '',
+            integrationsPostgresDatabaseLabel: '',
+            integrationsPostgresDatabasePlaceholder: '',
+            integrationsPostgresUsernameLabel: '',
+            integrationsPostgresUsernamePlaceholder: '',
+            integrationsPostgresPasswordLabel: '',
+            integrationsPostgresPasswordPlaceholder: '',
+            integrationsPostgresSslLabel: '',
+            integrationsPostgresUnnamedIntegration: '',
+            integrationsBigQueryNameLabel: '',
+            integrationsBigQueryNamePlaceholder: '',
+            integrationsBigQueryProjectIdLabel: '',
+            integrationsBigQueryProjectIdPlaceholder: '',
+            integrationsBigQueryCredentialsLabel: '',
+            integrationsBigQueryCredentialsPlaceholder: '',
+            integrationsBigQueryCredentialsRequired: '',
+            integrationsBigQueryInvalidJson: '',
+            integrationsBigQueryUnnamedIntegration: '',
+            integrationsRequiredField: '',
+            integrationsOptionalField: ''
         };
         this.postMessageInternal(SharedMessages.LocInit, JSON.stringify(locStrings)).catch(noop);
     }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import { getLocString } from '../react-common/locReactSide';
 import { BigQueryIntegrationConfig } from './types';
 
 export interface IBigQueryFormProps {
@@ -27,7 +27,7 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
     const validateCredentials = (value: string): boolean => {
         if (!value.trim()) {
-            setCredentialsError('Credentials are required');
+            setCredentialsError(getLocString('integrationsBigQueryCredentialsRequired', 'Credentials are required'));
             return false;
         }
 
@@ -37,7 +37,11 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             return true;
         } catch (error) {
             const errorMessage = error instanceof Error ? error.message : 'Invalid JSON format';
-            setCredentialsError(`Invalid JSON: ${errorMessage}`);
+            const invalidJsonMsg = getLocString('integrationsBigQueryInvalidJson', 'Invalid JSON: {0}').replace(
+                '{0}',
+                errorMessage
+            );
+            setCredentialsError(invalidJsonMsg);
             return false;
         }
     };
@@ -56,9 +60,14 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
             return;
         }
 
+        const unnamedIntegration = getLocString(
+            'integrationsBigQueryUnnamedIntegration',
+            'Unnamed BigQuery Integration ({0})'
+        ).replace('{0}', integrationId);
+
         const config: BigQueryIntegrationConfig = {
             id: integrationId,
-            name: name || `Unnamed BigQuery Integration (${integrationId})`,
+            name: name || unnamedIntegration,
             type: 'bigquery',
             projectId,
             credentials
@@ -70,41 +79,46 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
     return (
         <form onSubmit={handleSubmit}>
             <div className="form-group">
-                <label htmlFor="name">Name (optional)</label>
+                <label htmlFor="name">{getLocString('integrationsBigQueryNameLabel', 'Name (optional)')}</label>
                 <input
                     type="text"
                     id="name"
                     value={name}
                     onChange={(e) => setName(e.target.value)}
-                    placeholder="My BigQuery Project"
+                    placeholder={getLocString('integrationsBigQueryNamePlaceholder', 'My BigQuery Project')}
                     autoComplete="off"
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="projectId">
-                    Project ID <span className="required">*</span>
+                    {getLocString('integrationsBigQueryProjectIdLabel', 'Project ID')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <input
                     type="text"
                     id="projectId"
                     value={projectId}
                     onChange={(e) => setProjectId(e.target.value)}
-                    placeholder="my-project-id"
+                    placeholder={getLocString('integrationsBigQueryProjectIdPlaceholder', 'my-project-id')}
                     autoComplete="off"
                     required
                 />
             </div>
 
             <div className="form-group">
                 <label htmlFor="credentials">
-                    Service Account Credentials (JSON) <span className="required">*</span>
+                    {getLocString('integrationsBigQueryCredentialsLabel', 'Service Account Credentials (JSON)')}{' '}
+                    <span className="required">{getLocString('integrationsRequiredField', '*')}</span>
                 </label>
                 <textarea
                     id="credentials"
                     value={credentials}
                     onChange={handleCredentialsChange}
-                    placeholder='{"type": "service_account", ...}'
+                    placeholder={getLocString(
+                        'integrationsBigQueryCredentialsPlaceholder',
+                        '{"type": "service_account", ...}'
+                    )}
                     rows={10}
                     autoComplete="off"
                     spellCheck={false}
@@ -123,10 +137,10 @@ export const BigQueryForm: React.FC<IBigQueryFormProps> = ({ integrationId, exis
 
             <div className="form-actions">
                 <button type="submit" className="primary">
-                    Save
+                    {getLocString('integrationsSave', 'Save')}
                 </button>
                 <button type="button" className="secondary" onClick={onCancel}>
-                    Cancel
+                    {getLocString('integrationsCancel', 'Cancel')}
                 </button>
             </div>
         </form>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
 import { PostgresForm } from './PostgresForm';
 import { BigQueryForm } from './BigQueryForm';
 import { IntegrationConfig } from './types';
@@ -34,11 +35,16 @@ export const ConfigurationForm: React.FC<IConfigurationFormProps> = ({
 
     const integrationType = getIntegrationType();
 
+    const title = getLocString('integrationsConfigureTitle', 'Configure Integration: {0}').replace(
+        '{0}',
+        integrationId
+    );
+
     return (
         <div className="configuration-form-overlay">
             <div className="configuration-form-container">
                 <div className="configuration-form-header">
-                    <h2>Configure Integration: {integrationId}</h2>
+                    <h2>{title}</h2>
                     <button type="button" className="close-button" onClick={onCancel}>
                         ×
                     </button>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getLocString } from '../react-common/locReactSide';
 import { IntegrationWithStatus } from './types';
 
 export interface IIntegrationItemProps {
@@ -9,8 +10,13 @@ export interface IIntegrationItemProps {
 
 export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration, onConfigure, onDelete }) => {
     const statusClass = integration.status === 'connected' ? 'status-connected' : 'status-disconnected';
-    const statusText = integration.status === 'connected' ? 'Connected' : 'Not Configured';
-    const configureText = integration.config ? 'Reconfigure' : 'Configure';
+    const statusText =
+        integration.status === 'connected'
+            ? getLocString('integrationsConnected', 'Connected')
+            : getLocString('integrationsNotConfigured', 'Not Configured');
+    const configureText = integration.config
+        ? getLocString('integrationsReconfigure', 'Reconfigure')
+        : getLocString('integrationsConfigure', 'Configure');
     const displayName = integration.config?.name || integration.id;
 
     return (
@@ -25,7 +31,7 @@ export const IntegrationItem: React.FC<IIntegrationItemProps> = ({ integration,
                 </button>
                 {integration.config && (
                     <button type="button" className="secondary" onClick={() => onDelete(integration.id)}>
-                        Reset
+                        {getLocString('integrationsReset', 'Reset')}
                     </button>
                 )}
             </div>