From 03f4609012cd677b525c40e08b5cdbb461eee4eb Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 21:01:21 +0530 Subject: [PATCH 01/12] FIX: Use Ant Design Form pattern for name and description fields MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace controlled inputs (value prop) with Form-managed inputs (name prop) - Use Form.useForm() hook and form.setFieldsValue() to set values when editing existing connections - Remove getValueFromEvent which conflicted with controlled input pattern - Move collapseSpaces transformation to onChange handler This fixes the issue where the form fields wouldn't properly display values when editing existing connections. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/ConnectionDetailsSection.jsx | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index 5b7e0c6..29e373b 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -1,4 +1,4 @@ -import { memo } from "react"; +import { memo, useEffect } from "react"; import PropTypes from "prop-types"; import { Typography, Input, Select, Form } from "antd"; @@ -18,17 +18,24 @@ const ConnectionDetailsSection = memo( mappedDataSources, dbUsage, }) => { + const [form] = Form.useForm(); + + // Update form values when dbSelectionInfo changes (e.g., when editing a connection) + useEffect(() => { + form.setFieldsValue({ + name: dbSelectionInfo.name, + description: dbSelectionInfo.description, + }); + }, [form, dbSelectionInfo.name, dbSelectionInfo.description]); + return (
Connection Details
-
+ - // collapse any run of 2+ spaces only when followed by non-space - collapseSpaces(value) - } + name="name" rules={[ { required: true, message: "Please enter the connection name" }, { validator: validateFormFieldName }, @@ -37,21 +44,23 @@ const ConnectionDetailsSection = memo( > - handleConnectionNameDesc("name", e.target.value) + handleConnectionNameDesc( + "name", + collapseSpaces(e.target.value) + ) } /> handleConnectionNameDesc("description", e.target.value) } From d17ace16878556526dd5f6007b8de9fc5cb6f5ab Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 21:01:42 +0530 Subject: [PATCH 02/12] FIX: Debounce name/description state updates to prevent stale closure MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add debounced state update for name and description fields (300ms) - Prevents the handleCreateOrUpdate callback from capturing stale dbSelectionInfo values during rapid typing - Ensures the last character is not lost when updating a connection This fixes the bug where editing connection name from "test_pg" to "test_pg_edited" would save as "test_pg_edite" (missing last character). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/CreateConnection.jsx | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/frontend/src/base/components/environment/CreateConnection.jsx b/frontend/src/base/components/environment/CreateConnection.jsx index 3b8df5c..1a99e42 100644 --- a/frontend/src/base/components/environment/CreateConnection.jsx +++ b/frontend/src/base/components/environment/CreateConnection.jsx @@ -1,4 +1,5 @@ import { useEffect, useState, useCallback, useMemo } from "react"; +import { debounce } from "lodash"; import Cookies from "js-cookie"; import PropTypes from "prop-types"; @@ -118,9 +119,26 @@ const CreateConnection = ({ getConnectionFields(); }, [getConnectionFields]); - const handleConnectionNameDesc = useCallback((name, value) => { - setDbSelectionInfo((prev) => ({ ...prev, [name]: value })); - }, []); + const debouncedSetDbSelectionInfo = useMemo( + () => + debounce((name, value) => { + setDbSelectionInfo((prev) => ({ ...prev, [name]: value })); + }, 300), + [] + ); + + useEffect(() => { + return () => { + debouncedSetDbSelectionInfo.cancel(); + }; + }, [debouncedSetDbSelectionInfo]); + + const handleConnectionNameDesc = useCallback( + (name, value) => { + debouncedSetDbSelectionInfo(name, value); + }, + [debouncedSetDbSelectionInfo] + ); const handleCreateOrUpdate = useCallback(async () => { setIsCreateOrUpdateLoading(true); From 25f0cb3cd745977c58c11b25c2693c540c7817f5 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 21:30:53 +0530 Subject: [PATCH 03/12] FIX: Remove unnecessary debounce from name/description state updates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The debounce was introduced to fix stale closure issues, but it actually creates a worse bug - a 300ms window where clicking Update could submit pre-edit values. The root cause is already fixed in ConnectionDetailsSection.jsx by using Ant Design's Form pattern (Form.useForm + form.setFieldsValue). With uncontrolled inputs, the direct state update works correctly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/CreateConnection.jsx | 24 +++---------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/frontend/src/base/components/environment/CreateConnection.jsx b/frontend/src/base/components/environment/CreateConnection.jsx index 1a99e42..3b8df5c 100644 --- a/frontend/src/base/components/environment/CreateConnection.jsx +++ b/frontend/src/base/components/environment/CreateConnection.jsx @@ -1,5 +1,4 @@ import { useEffect, useState, useCallback, useMemo } from "react"; -import { debounce } from "lodash"; import Cookies from "js-cookie"; import PropTypes from "prop-types"; @@ -119,26 +118,9 @@ const CreateConnection = ({ getConnectionFields(); }, [getConnectionFields]); - const debouncedSetDbSelectionInfo = useMemo( - () => - debounce((name, value) => { - setDbSelectionInfo((prev) => ({ ...prev, [name]: value })); - }, 300), - [] - ); - - useEffect(() => { - return () => { - debouncedSetDbSelectionInfo.cancel(); - }; - }, [debouncedSetDbSelectionInfo]); - - const handleConnectionNameDesc = useCallback( - (name, value) => { - debouncedSetDbSelectionInfo(name, value); - }, - [debouncedSetDbSelectionInfo] - ); + const handleConnectionNameDesc = useCallback((name, value) => { + setDbSelectionInfo((prev) => ({ ...prev, [name]: value })); + }, []); const handleCreateOrUpdate = useCallback(async () => { setIsCreateOrUpdateLoading(true); From 2fbcad7d2366647b946185f7f3c5ec40096de950 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 21:38:17 +0530 Subject: [PATCH 04/12] FIX: Add debounce to parent state update in ConnectionDetailsSection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Debounce the handleConnectionNameDesc callback (300ms) to ensure the parent's handleCreateOrUpdate closure captures the latest state value. The form input remains responsive since Ant Design manages the input internally, while the parent state update is debounced. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/ConnectionDetailsSection.jsx | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index 29e373b..a19c074 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -1,6 +1,7 @@ -import { memo, useEffect } from "react"; +import { memo, useEffect, useMemo } from "react"; import PropTypes from "prop-types"; import { Typography, Input, Select, Form } from "antd"; +import { debounce } from "lodash"; import ConnectionUsageSection from "./ConnectionUsageSection"; import { @@ -20,6 +21,19 @@ const ConnectionDetailsSection = memo( }) => { const [form] = Form.useForm(); + // Debounce the parent state update to avoid stale closure issues + const debouncedHandleConnectionNameDesc = useMemo( + () => debounce(handleConnectionNameDesc, 300), + [handleConnectionNameDesc] + ); + + // Cleanup debounce on unmount + useEffect(() => { + return () => { + debouncedHandleConnectionNameDesc.cancel(); + }; + }, [debouncedHandleConnectionNameDesc]); + // Update form values when dbSelectionInfo changes (e.g., when editing a connection) useEffect(() => { form.setFieldsValue({ @@ -45,7 +59,7 @@ const ConnectionDetailsSection = memo( - handleConnectionNameDesc( + debouncedHandleConnectionNameDesc( "name", collapseSpaces(e.target.value) ) @@ -62,7 +76,10 @@ const ConnectionDetailsSection = memo( className="field" rows={2} onChange={(e) => - handleConnectionNameDesc("description", e.target.value) + debouncedHandleConnectionNameDesc( + "description", + e.target.value + ) } /> From ffb4cbabef870b92c28beb97ef7c06d89df05f3d Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 21:49:31 +0530 Subject: [PATCH 05/12] FIX: Apply collapseSpaces synchronously to form value for validation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update form value synchronously with collapsed spaces so the validator always sees the processed value, preventing spurious validation errors when consecutive spaces are typed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/ConnectionDetailsSection.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index a19c074..81ef300 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -58,12 +58,11 @@ const ConnectionDetailsSection = memo( > - debouncedHandleConnectionNameDesc( - "name", - collapseSpaces(e.target.value) - ) - } + onChange={(e) => { + const collapsed = collapseSpaces(e.target.value); + form.setFieldValue("name", collapsed); + debouncedHandleConnectionNameDesc("name", collapsed); + }} /> From 61fbb4d1f13b19539b02be3ace9207a4c40febc6 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 21:56:52 +0530 Subject: [PATCH 06/12] FIX: Only populate form values when connectionId changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change useEffect dependency from dbSelectionInfo fields to connectionId to prevent form values from being overwritten during typing due to debounced state updates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../base/components/environment/ConnectionDetailsSection.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index 81ef300..de297ff 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -34,13 +34,13 @@ const ConnectionDetailsSection = memo( }; }, [debouncedHandleConnectionNameDesc]); - // Update form values when dbSelectionInfo changes (e.g., when editing a connection) + // Populate form values only when connection is first loaded (connectionId changes) useEffect(() => { form.setFieldsValue({ name: dbSelectionInfo.name, description: dbSelectionInfo.description, }); - }, [form, dbSelectionInfo.name, dbSelectionInfo.description]); + }, [form, connectionId]); return (
From 2d2cac7c22b7a118b30115a2b2ed2712ba59e83a Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 22:15:17 +0530 Subject: [PATCH 07/12] FIX: Add isUserEditingRef to prevent form overwrites during typing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Restore debounce for parent state updates - Add isUserEditingRef to track when user is actively editing - Only populate form values when not in editing mode - Reset editing flag when connectionId changes (new connection loaded) This ensures: 1. Form populates correctly when async connection data arrives 2. User edits are not overwritten by the useEffect 3. Parent state updates are debounced to prevent stale closure issues 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/ConnectionDetailsSection.jsx | 50 +++++++++++-------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index de297ff..66f432d 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -1,4 +1,4 @@ -import { memo, useEffect, useMemo } from "react"; +import { memo, useEffect, useMemo, useRef } from "react"; import PropTypes from "prop-types"; import { Typography, Input, Select, Form } from "antd"; import { debounce } from "lodash"; @@ -20,6 +20,7 @@ const ConnectionDetailsSection = memo( dbUsage, }) => { const [form] = Form.useForm(); + const isUserEditingRef = useRef(false); // Debounce the parent state update to avoid stale closure issues const debouncedHandleConnectionNameDesc = useMemo( @@ -34,13 +35,32 @@ const ConnectionDetailsSection = memo( }; }, [debouncedHandleConnectionNameDesc]); - // Populate form values only when connection is first loaded (connectionId changes) + // Reset editing flag when connectionId changes (new connection loaded) useEffect(() => { - form.setFieldsValue({ - name: dbSelectionInfo.name, - description: dbSelectionInfo.description, - }); - }, [form, connectionId]); + isUserEditingRef.current = false; + }, [connectionId]); + + // Populate form values when connection data is loaded (not during user edits) + useEffect(() => { + if (!isUserEditingRef.current) { + form.setFieldsValue({ + name: dbSelectionInfo.name, + description: dbSelectionInfo.description, + }); + } + }, [form, connectionId, dbSelectionInfo.name, dbSelectionInfo.description]); + + const handleNameChange = (e) => { + isUserEditingRef.current = true; + const collapsed = collapseSpaces(e.target.value); + form.setFieldValue("name", collapsed); + debouncedHandleConnectionNameDesc("name", collapsed); + }; + + const handleDescriptionChange = (e) => { + isUserEditingRef.current = true; + debouncedHandleConnectionNameDesc("description", e.target.value); + }; return (
@@ -56,14 +76,7 @@ const ConnectionDetailsSection = memo( ]} required > - { - const collapsed = collapseSpaces(e.target.value); - form.setFieldValue("name", collapsed); - debouncedHandleConnectionNameDesc("name", collapsed); - }} - /> + - debouncedHandleConnectionNameDesc( - "description", - e.target.value - ) - } + onChange={handleDescriptionChange} /> From f3f9da1f97cdf7329d42a7a3b01b2b092dc7fc22 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Mon, 13 Apr 2026 23:00:10 +0530 Subject: [PATCH 08/12] FIX: Use normalize prop for collapseSpaces transformation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace manual form.setFieldValue with normalize prop on Form.Item. This ensures collapseSpaces is applied before storage and validation, preventing false validation errors when consecutive spaces are typed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../base/components/environment/ConnectionDetailsSection.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index 66f432d..fbbb9c1 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -52,9 +52,7 @@ const ConnectionDetailsSection = memo( const handleNameChange = (e) => { isUserEditingRef.current = true; - const collapsed = collapseSpaces(e.target.value); - form.setFieldValue("name", collapsed); - debouncedHandleConnectionNameDesc("name", collapsed); + debouncedHandleConnectionNameDesc("name", collapseSpaces(e.target.value)); }; const handleDescriptionChange = (e) => { @@ -70,6 +68,7 @@ const ConnectionDetailsSection = memo( Date: Mon, 13 Apr 2026 23:16:15 +0530 Subject: [PATCH 09/12] FIX: Apply collapseSpaces when populating form from server data MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit setFieldsValue bypasses the normalize prop, so apply collapseSpaces manually when loading connection data to ensure consistent formatting. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../base/components/environment/ConnectionDetailsSection.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index fbbb9c1..b136d87 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -41,10 +41,11 @@ const ConnectionDetailsSection = memo( }, [connectionId]); // Populate form values when connection data is loaded (not during user edits) + // Apply collapseSpaces since setFieldsValue bypasses the normalize prop useEffect(() => { if (!isUserEditingRef.current) { form.setFieldsValue({ - name: dbSelectionInfo.name, + name: collapseSpaces(dbSelectionInfo.name || ""), description: dbSelectionInfo.description, }); } From 3b00753a4685c0dcf53f5087721250e4d163adf1 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Wed, 15 Apr 2026 10:45:50 +0530 Subject: [PATCH 10/12] FIX: Move form to parent and use Form.useWatch for hasDetailsChanged MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move Form.useForm() to CreateConnection.jsx and pass form as prop - Remove debounce logic from ConnectionDetailsSection (no longer needed) - Read name/description directly from form in handleCreateOrUpdate - Use Form.useWatch to reactively track form values for hasDetailsChanged - This eliminates the race condition and fixes Update button not enabling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/ConnectionDetailsSection.jsx | 57 ++++--------------- .../environment/CreateConnection.jsx | 24 +++++--- 2 files changed, 27 insertions(+), 54 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index b136d87..d8b9624 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -1,7 +1,6 @@ -import { memo, useEffect, useMemo, useRef } from "react"; +import { memo, useEffect } from "react"; import PropTypes from "prop-types"; import { Typography, Input, Select, Form } from "antd"; -import { debounce } from "lodash"; import ConnectionUsageSection from "./ConnectionUsageSection"; import { @@ -14,58 +13,25 @@ const ConnectionDetailsSection = memo( ({ connectionId, dbSelectionInfo, - handleConnectionNameDesc, + connectionDetailsForm, handleCardClick, mappedDataSources, dbUsage, }) => { - const [form] = Form.useForm(); - const isUserEditingRef = useRef(false); - - // Debounce the parent state update to avoid stale closure issues - const debouncedHandleConnectionNameDesc = useMemo( - () => debounce(handleConnectionNameDesc, 300), - [handleConnectionNameDesc] - ); - - // Cleanup debounce on unmount - useEffect(() => { - return () => { - debouncedHandleConnectionNameDesc.cancel(); - }; - }, [debouncedHandleConnectionNameDesc]); - - // Reset editing flag when connectionId changes (new connection loaded) - useEffect(() => { - isUserEditingRef.current = false; - }, [connectionId]); - - // Populate form values when connection data is loaded (not during user edits) + // Populate form values when connection data is loaded // Apply collapseSpaces since setFieldsValue bypasses the normalize prop useEffect(() => { - if (!isUserEditingRef.current) { - form.setFieldsValue({ - name: collapseSpaces(dbSelectionInfo.name || ""), - description: dbSelectionInfo.description, - }); - } - }, [form, connectionId, dbSelectionInfo.name, dbSelectionInfo.description]); - - const handleNameChange = (e) => { - isUserEditingRef.current = true; - debouncedHandleConnectionNameDesc("name", collapseSpaces(e.target.value)); - }; - - const handleDescriptionChange = (e) => { - isUserEditingRef.current = true; - debouncedHandleConnectionNameDesc("description", e.target.value); - }; + connectionDetailsForm.setFieldsValue({ + name: collapseSpaces(dbSelectionInfo.name || ""), + description: dbSelectionInfo.description, + }); + }, [connectionDetailsForm, connectionId, dbSelectionInfo.name, dbSelectionInfo.description]); return (
Connection Details
- + - + @@ -123,7 +88,7 @@ ConnectionDetailsSection.propTypes = { description: PropTypes.string, icon: PropTypes.string, }).isRequired, - handleConnectionNameDesc: PropTypes.func.isRequired, + connectionDetailsForm: PropTypes.object.isRequired, handleCardClick: PropTypes.func.isRequired, mappedDataSources: PropTypes.array.isRequired, dbUsage: PropTypes.shape({ diff --git a/frontend/src/base/components/environment/CreateConnection.jsx b/frontend/src/base/components/environment/CreateConnection.jsx index 3b8df5c..f81a9c6 100644 --- a/frontend/src/base/components/environment/CreateConnection.jsx +++ b/frontend/src/base/components/environment/CreateConnection.jsx @@ -1,6 +1,7 @@ import { useEffect, useState, useCallback, useMemo } from "react"; import Cookies from "js-cookie"; import PropTypes from "prop-types"; +import { Form } from "antd"; import { useAxiosPrivate } from "../../../service/axios-service.js"; import { orgStore } from "../../../store/org-store.js"; @@ -54,6 +55,11 @@ const CreateConnection = ({ const [isCredentialsRevealed, setIsCredentialsRevealed] = useState(false); const [isRevealLoading, setIsRevealLoading] = useState(false); const { notify } = useNotificationService(); + const [connectionDetailsForm] = Form.useForm(); + + // Watch form fields reactively for hasDetailsChanged comparison + const formName = Form.useWatch("name", connectionDetailsForm); + const formDescription = Form.useWatch("description", connectionDetailsForm); // Initialize encryption service useEffect(() => { @@ -118,16 +124,17 @@ const CreateConnection = ({ getConnectionFields(); }, [getConnectionFields]); - const handleConnectionNameDesc = useCallback((name, value) => { - setDbSelectionInfo((prev) => ({ ...prev, [name]: value })); - }, []); - const handleCreateOrUpdate = useCallback(async () => { setIsCreateOrUpdateLoading(true); try { + // Get name and description directly from the form (source of truth) + const { name, description } = connectionDetailsForm.getFieldsValue(); + // Prepare connection data const connectionData = { ...dbSelectionInfo, + name, + description, connection_details: { ...inputFields, ...(["postgres", "snowflake"].includes( @@ -199,6 +206,7 @@ const CreateConnection = ({ } }, [ connectionId, + connectionDetailsForm, dbSelectionInfo, inputFields, connType, @@ -398,10 +406,10 @@ const CreateConnection = ({ const hasDetailsChanged = useMemo(() => { if (!connectionId || !originalDbSelectionInfo) return false; return ( - dbSelectionInfo.name !== originalDbSelectionInfo.name || - dbSelectionInfo.description !== originalDbSelectionInfo.description + formName !== originalDbSelectionInfo.name || + formDescription !== originalDbSelectionInfo.description ); - }, [connectionId, dbSelectionInfo, originalDbSelectionInfo]); + }, [connectionId, formName, formDescription, originalDbSelectionInfo]); const mappedDataSources = useMemo( () => @@ -428,7 +436,7 @@ const CreateConnection = ({ { // Clear input fields when datasource changes to prevent old fields from being sent setInputFields({}); From b901cb208aec2310f26e247cfacfa16aca3fce72 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Wed, 15 Apr 2026 10:48:40 +0530 Subject: [PATCH 11/12] chore: fix eslint formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../environment/ConnectionDetailsSection.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx index d8b9624..6bcd20d 100644 --- a/frontend/src/base/components/environment/ConnectionDetailsSection.jsx +++ b/frontend/src/base/components/environment/ConnectionDetailsSection.jsx @@ -25,7 +25,12 @@ const ConnectionDetailsSection = memo( name: collapseSpaces(dbSelectionInfo.name || ""), description: dbSelectionInfo.description, }); - }, [connectionDetailsForm, connectionId, dbSelectionInfo.name, dbSelectionInfo.description]); + }, [ + connectionDetailsForm, + connectionId, + dbSelectionInfo.name, + dbSelectionInfo.description, + ]); return (
@@ -50,10 +55,7 @@ const ConnectionDetailsSection = memo( name="description" rules={[{ validator: validateFormFieldDescription }]} > - + From 4e9c5182244fa4f1628f2cc9d7fe20f120e3aba3 Mon Sep 17 00:00:00 2001 From: Tahier Hussain Date: Wed, 15 Apr 2026 10:55:20 +0530 Subject: [PATCH 12/12] fix: add hasDetailsChanged to deps and normalize original name MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add hasDetailsChanged to handleCreateOrUpdate dependency array to fix stale closure issue - Apply collapseSpaces when storing originalDbSelectionInfo.name to ensure consistent comparison with form values 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../src/base/components/environment/CreateConnection.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/base/components/environment/CreateConnection.jsx b/frontend/src/base/components/environment/CreateConnection.jsx index f81a9c6..81ff920 100644 --- a/frontend/src/base/components/environment/CreateConnection.jsx +++ b/frontend/src/base/components/environment/CreateConnection.jsx @@ -20,6 +20,7 @@ import { } from "./environment-api-service.js"; import "./environment.css"; import { useNotificationService } from "../../../service/notification-service.js"; +import { collapseSpaces } from "./helper"; const CreateConnection = ({ setIsModalOpen, @@ -207,6 +208,7 @@ const CreateConnection = ({ }, [ connectionId, connectionDetailsForm, + hasDetailsChanged, dbSelectionInfo, inputFields, connType, @@ -240,7 +242,10 @@ const CreateConnection = ({ icon: db_icon, }; setDbSelectionInfo(selectionInfo); - setOriginalDbSelectionInfo({ ...selectionInfo }); + setOriginalDbSelectionInfo({ + ...selectionInfo, + name: collapseSpaces(selectionInfo.name || ""), + }); // Process connection details to handle JSON objects for textarea fields const processedConnectionDetails = { ...connection_details };