FIX: Connection Name and Description Losing Last Character When Editing (#57)

* FIX: Use Ant Design Form pattern for name and description fields

- 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 <noreply@anthropic.com>

* FIX: Debounce name/description state updates to prevent stale closure

- 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 <noreply@anthropic.com>

* FIX: Remove unnecessary debounce from name/description state updates

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 <noreply@anthropic.com>

* FIX: Add debounce to parent state update in ConnectionDetailsSection

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 <noreply@anthropic.com>

* FIX: Apply collapseSpaces synchronously to form value for validation

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 <noreply@anthropic.com>

* FIX: Only populate form values when connectionId changes

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 <noreply@anthropic.com>

* FIX: Add isUserEditingRef to prevent form overwrites during typing

- 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 <noreply@anthropic.com>

* FIX: Use normalize prop for collapseSpaces transformation

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 <noreply@anthropic.com>

* FIX: Apply collapseSpaces when populating form from server data

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 <noreply@anthropic.com>

* FIX: Move form to parent and use Form.useWatch for hasDetailsChanged

- 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 <noreply@anthropic.com>

* chore: fix eslint formatting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: add hasDetailsChanged to deps and normalize original name

- 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 <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: tahierhussain

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";
 
@@ -13,49 +13,49 @@ const ConnectionDetailsSection = memo(
   ({
     connectionId,
     dbSelectionInfo,
-    handleConnectionNameDesc,
+    connectionDetailsForm,
     handleCardClick,
     mappedDataSources,
     dbUsage,
   }) => {
+    // Populate form values when connection data is loaded
+    // Apply collapseSpaces since setFieldsValue bypasses the normalize prop
+    useEffect(() => {
+      connectionDetailsForm.setFieldsValue({
+        name: collapseSpaces(dbSelectionInfo.name || ""),
+        description: dbSelectionInfo.description,
+      });
+    }, [
+      connectionDetailsForm,
+      connectionId,
+      dbSelectionInfo.name,
+      dbSelectionInfo.description,
+    ]);
+
     return (
       <div className="createConnectionSection flex-1 createConnectionSectionDivider overflow-y-auto">
         <Typography className="sectionTitle">Connection Details</Typography>
         <div className="formFieldsWrapper">
-          <Form layout="vertical">
+          <Form form={connectionDetailsForm} layout="vertical">
             <Form.Item
               label="Name"
-              getValueFromEvent={({ target: { value } }) =>
-                // collapse any run of 2+ spaces only when followed by non-space
-                collapseSpaces(value)
-              }
+              name="name"
+              normalize={collapseSpaces}
               rules={[
                 { required: true, message: "Please enter the connection name" },
                 { validator: validateFormFieldName },
               ]}
               required
             >
-              <Input
-                className="field"
-                value={dbSelectionInfo.name}
-                onChange={(e) =>
-                  handleConnectionNameDesc("name", e.target.value)
-                }
-              />
+              <Input className="field" />
             </Form.Item>
 
             <Form.Item
               label="Description"
+              name="description"
               rules={[{ validator: validateFormFieldDescription }]}
             >
-              <Input.TextArea
-                className="field"
-                rows={2}
-                value={dbSelectionInfo.description}
-                onChange={(e) =>
-                  handleConnectionNameDesc("description", e.target.value)
-                }
-              />
+              <Input.TextArea className="field" rows={2} />
             </Form.Item>
 
             <Form.Item label="Database" required>
@@ -90,7 +90,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({

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";
@@ -19,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,
@@ -54,6 +56,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 +125,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 +207,8 @@ const CreateConnection = ({
     }
   }, [
     connectionId,
+    connectionDetailsForm,
+    hasDetailsChanged,
     dbSelectionInfo,
     inputFields,
     connType,
@@ -232,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 };
 
@@ -398,10 +411,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 +441,7 @@ const CreateConnection = ({
           <ConnectionDetailsSection
             connectionId={connectionId}
             dbSelectionInfo={dbSelectionInfo}
-            handleConnectionNameDesc={handleConnectionNameDesc}
+            connectionDetailsForm={connectionDetailsForm}
             handleCardClick={(value) => {
               // Clear input fields when datasource changes to prevent old fields from being sent
               setInputFields({});