FIX: Connection Name and Description Losing Last Character When Editing

[tahierhussain]

What

• Fixed a bug where editing the connection name or description would lose the last character
• Example: Changing "test_pg" to "test_pg_edited" would save as "test_pg_edite"

Why

• The issue was caused by:
  1. Using controlled inputs (value prop) that conflicted with Ant Design Form's internal state management
  2. The getValueFromEvent prop on Form.Item interfering with the onChange flow

How

• ConnectionDetailsSection.jsx:
  • Replaced controlled inputs with Ant Design's Form-managed inputs using name prop
  • Added Form.useForm() hook to get a form instance
  • Used form.setFieldsValue() to populate fields when editing existing connections
  • Removed problematic getValueFromEvent prop
  • Moved collapseSpaces transformation to the onChange handler
  • Added debounce (300ms) to parent state updates to ensure the handleCreateOrUpdate callback captures the latest state value

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

• No, this PR should not break existing features
• The form behavior remains the same from a user perspective
• The changes only affect the internal state management pattern
• Creating new connections still works as before
• Editing existing connections now correctly preserves all characters

Database Migrations

• None

Env Config

• None

Relevant Docs

• Ant Design Form Documentation

Related Issues or PRs

• None

Dependencies Versions

• No new dependencies

Notes on Testing

1. Edit an existing connection
2. Modify the name field (e.g., add "_edited" suffix)
3. Click Update
4. Verify the full name is saved correctly (no missing characters)
5. Test the same for the description field
6. Test creating a new connection to ensure it still works

Screenshots

The "name" field value modified but yet to click on the "Update" button

After clicking on the "Update" button

Checklist

I have read and understood the Contribution Guidelines.

[greptile-apps]

Greptile Summary

This PR fixes the "last character lost" bug by replacing React-controlled value inputs with Ant Design Form-managed inputs (name prop + Form.useForm()), removing the conflicting getValueFromEvent handler, and using form.setFieldsValue() for initial field population. The collapseSpaces transform is preserved via normalize={collapseSpaces} on the name Form.Item and manually in handleNameChange.

Confidence Score: 4/5

The core fix is correct and the form management approach is sound, but an existing thread flags a P1 stale-data risk from the 300ms debounce that has not been addressed in this version.

The root-cause fix (removing controlled value + getValueFromEvent) is correctly implemented. The normalize/setFieldsValue combination is consistent. The isUserEditingRef guard works correctly across connection switches. Score is 4 rather than 5 because the debounce introduced in this PR — flagged as a P1 in an existing review thread — is still present and can cause handleCreateOrUpdate to submit stale name/description if the user clicks Update within 300ms of finishing typing.

frontend/src/base/components/environment/ConnectionDetailsSection.jsx — specifically the debouncedHandleConnectionNameDesc logic and its interaction with the parent's handleCreateOrUpdate closure.

Important Files Changed

Filename	Overview
frontend/src/base/components/environment/ConnectionDetailsSection.jsx	Replaces controlled inputs with Ant Design Form-managed inputs; adds useForm, setFieldsValue effect, isUserEditingRef guard, and a 300ms debounce on parent state updates. Core fix is correct, though the debounce introduces a stale-data window noted in an existing review thread.

Sequence Diagram

sequenceDiagram
    participant User
    participant AntInput as Ant Design Input
    participant FormItem as Form.Item (normalize)
    participant FormStore as Form Store
    participant Parent as dbSelectionInfo (parent state)
    participant API as Backend API

    Note over User,API: Loading existing connection
    API-->>Parent: getSingleConnectionDetails() → setDbSelectionInfo
    Parent->>FormStore: setFieldsValue({ name: collapseSpaces(name), description })
    FormStore->>AntInput: controlled value updated

    Note over User,API: User edits name field
    User->>AntInput: type character
    AntInput->>FormItem: onChange(rawEvent)
    FormItem->>FormStore: store normalize(e.target.value) = collapseSpaces(value)
    FormStore->>AntInput: re-render with normalized value
    FormItem->>Parent: handleNameChange(e) → collapseSpaces(e.target.value)
    Note over Parent: debounced 300ms
    Parent->>Parent: setDbSelectionInfo({ name: value })

    Note over User,API: User clicks Update
    User->>Parent: handleCreateOrUpdate()
    Parent->>API: PUT /connections/{id} with dbSelectionInfo
    API-->>Parent: 200 OK

Loading

_{Reviews (8): Last reviewed commit: "FIX: Apply collapseSpaces when populatin..." | Re-trigger Greptile}

[wicky-zipstack]

Good fix for the root cause — switching to Ant Design's Form pattern (Form.useForm + name prop + normalize) is the right approach.

One concern — debounce race condition:

The 300ms debounce on debouncedHandleConnectionNameDesc means if a user types and clicks "Update" within 300ms, dbSelectionInfo in the parent still has the old value. Since handleCreateOrUpdate reads from dbSelectionInfo, the last few characters could still be lost — which is essentially the same bug with a different timing window.

Two options to fix:

1. Flush on submit — call debouncedHandleConnectionNameDesc.flush() at the start of handleCreateOrUpdate in CreateConnection.jsx
2. Read from form directly — use form.getFieldsValue() in the submit handler instead of relying on dbSelectionInfo for name/description

Option 2 would be cleaner since the form already has the correct value at all times.