fix integration config forms to consistently handle incoming config

jankuca · jankuca · commit 3696f8808e61 · 2025-11-02T16:02:30.000+01:00
diff --git a/src/webviews/webview-side/integrations/AlloyDBForm.tsx b/src/webviews/webview-side/integrations/AlloyDBForm.tsx
@@ -10,15 +10,15 @@ export interface IAlloyDBFormProps {
     onCancel: () => void;
 }
 
-function createEmptyAlloyDBConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'alloydb' }> {
+function createEmptyAlloyDBConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'alloydb' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'alloydb',
         metadata: {
             host: '',
@@ -37,14 +37,18 @@ export const AlloyDBForm: React.FC<IAlloyDBFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'alloydb' }>>(
-        () => existingConfig || createEmptyAlloyDBConfig(integrationId, defaultName)
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyAlloyDBConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyAlloyDBConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/ClickHouseForm.tsx b/src/webviews/webview-side/integrations/ClickHouseForm.tsx
@@ -10,15 +10,15 @@ export interface IClickHouseFormProps {
     onCancel: () => void;
 }
 
-function createEmptyClickHouseConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }> {
+function createEmptyClickHouseConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'clickhouse',
         metadata: {
             host: '',
@@ -37,13 +37,19 @@ export const ClickHouseForm: React.FC<IClickHouseFormProps> = ({
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<
         Extract<DatabaseIntegrationConfig, { type: 'clickhouse' }>
-    >(() => existingConfig || createEmptyClickHouseConfig(integrationId, defaultName));
+    >(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyClickHouseConfig({ id: integrationId, name: defaultName })
+    );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyClickHouseConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/MaterializeForm.tsx b/src/webviews/webview-side/integrations/MaterializeForm.tsx
@@ -10,15 +10,15 @@ export interface IMaterializeFormProps {
     onCancel: () => void;
 }
 
-function createEmptyMaterializeConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'materialize' }> {
+function createEmptyMaterializeConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'materialize' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'materialize',
         metadata: {
             host: '',
@@ -39,13 +39,19 @@ export const MaterializeForm: React.FC<IMaterializeFormProps> = ({
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<
         Extract<DatabaseIntegrationConfig, { type: 'materialize' }>
-    >(() => existingConfig || createEmptyMaterializeConfig(integrationId, defaultName));
+    >(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyMaterializeConfig({ id: integrationId, name: defaultName })
+    );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyMaterializeConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/MindsDBForm.tsx b/src/webviews/webview-side/integrations/MindsDBForm.tsx
@@ -10,15 +10,15 @@ export interface IMindsDBFormProps {
     onCancel: () => void;
 }
 
-function createEmptyMindsDBConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }> {
+function createEmptyMindsDBConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'mindsdb',
         metadata: {
             host: '',
@@ -37,14 +37,18 @@ export const MindsDBForm: React.FC<IMindsDBFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'mindsdb' }>>(
-        () => existingConfig || createEmptyMindsDBConfig(integrationId, defaultName)
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyMindsDBConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyMindsDBConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/SQLServerForm.tsx b/src/webviews/webview-side/integrations/SQLServerForm.tsx
@@ -10,15 +10,15 @@ export interface ISQLServerFormProps {
     onCancel: () => void;
 }
 
-function createEmptySQLServerConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'sql-server' }> {
+function createEmptySQLServerConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'sql-server' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'sql-server',
         metadata: {
             host: '',
@@ -39,13 +39,19 @@ export const SQLServerForm: React.FC<ISQLServerFormProps> = ({
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<
         Extract<DatabaseIntegrationConfig, { type: 'sql-server' }>
-    >(() => existingConfig || createEmptySQLServerConfig(integrationId, defaultName));
+    >(
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptySQLServerConfig({ id: integrationId, name: defaultName })
+    );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptySQLServerConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
diff --git a/src/webviews/webview-side/integrations/TrinoForm.tsx b/src/webviews/webview-side/integrations/TrinoForm.tsx
@@ -10,15 +10,15 @@ export interface ITrinoFormProps {
     onCancel: () => void;
 }
 
-function createEmptyTrinoConfig(
-    integrationId: string,
-    defaultName?: string
-): Extract<DatabaseIntegrationConfig, { type: 'trino' }> {
+function createEmptyTrinoConfig(params: {
+    id: string;
+    name?: string;
+}): Extract<DatabaseIntegrationConfig, { type: 'trino' }> {
     const unnamedIntegration = getLocString('integrationsUnnamedIntegration', 'Unnamed Integration ({0})');
 
     return {
-        id: integrationId,
-        name: (defaultName || format(unnamedIntegration, integrationId)).trim(),
+        id: params.id,
+        name: (params.name || format(unnamedIntegration, params.id)).trim(),
         type: 'trino',
         metadata: {
             host: '',
@@ -38,14 +38,18 @@ export const TrinoForm: React.FC<ITrinoFormProps> = ({
     onCancel
 }) => {
     const [pendingConfig, setPendingConfig] = React.useState<Extract<DatabaseIntegrationConfig, { type: 'trino' }>>(
-        () => existingConfig || createEmptyTrinoConfig(integrationId, defaultName)
+        existingConfig
+            ? structuredClone(existingConfig)
+            : createEmptyTrinoConfig({ id: integrationId, name: defaultName })
     );
 
     React.useEffect(() => {
-        if (existingConfig) {
-            setPendingConfig(existingConfig);
-        }
-    }, [existingConfig]);
+        setPendingConfig(
+            existingConfig
+                ? structuredClone(existingConfig)
+                : createEmptyTrinoConfig({ id: integrationId, name: defaultName })
+        );
+    }, [existingConfig, integrationId, defaultName]);
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
