Improvements related to connection creation flow

[sachiniSam]

Purpose

Fixes for,
wso2/product-ballerina-integrator#2565
wso2/product-ballerina-integrator#2544

Goals

Describe the solutions that this feature/fix will introduce to resolve the problems described above

Approach

Describe how you are implementing the solutions. Include an animated GIF or screenshot if the change affects the UI (email documentation@wso2.com to review all UI text). Include a link to a Markdown file or Google doc if the feature write-up is too long to paste here.

UI Component Development

Specify the reason if following are not followed.

• Added reusable UI components to the ui-toolkit. Follow the intructions when adding the componenent.
• Use ui-toolkit components wherever possible. Run npm run storybook from the root directory to view current components.
• Matches with the native VSCode look and feel.

Manage Icons

Specify the reason if following are not followed.

• Added Icons to the font-wso2-vscode. Follow the instructions.

User stories

Summary of user stories addressed by this change>

Release note

Brief description of the new feature or bug fix as it will appear in the release notes

Documentation

Link(s) to product documentation that addresses the changes of this PR. If no doc impact, enter “N/A” plus brief explanation of why there’s no doc impact

Training

Link to the PR for changes to the training content in https://github.com/wso2/WSO2-Training, if applicable

Certification

Type “Sent” when you have provided new/updated certification questions, plus four answers for each question (correct answer highlighted in bold), based on this change. Certification questions/answers should be sent to certification@wso2.com and NOT pasted in this PR. If there is no impact on certification exams, type “N/A” and explain why.

Marketing

Link to drafts of marketing content that will describe and promote this feature, including product page changes, technical articles, blog posts, videos, etc., if applicable

Automation tests

• Unit tests

  Code coverage information

• Integration tests

  Details about the test cases and coverage

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes/no
• Ran FindSecurityBugs plugin and verified report? yes/no
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes/no

Samples

Provide high-level details about the samples related to this feature

Related PRs

List any other related PRs

Migrations (if applicable)

Describe migration steps and platforms on which migration has been tested

Test environment

List all JDK versions, operating systems, databases, and browser/versions on which this feature/fix was tested

Learning

Describe the research phase and any blog posts, patterns, libraries, or add-ons you used to solve the problem.

Summary by CodeRabbit

Release Notes

Bug Fixes

• Improved error handling in database connection workflows with better error messages and recovery flows
• Password automatically cleared on connection errors for security

UI/UX

• Input fields now disabled during database introspection to prevent conflicts
• Error details are now expandable and more informative
• Connection name edits clear previous validation errors
• Added guidance to explore pre-built connectors when connection attempts fail

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ebf8a66 and 789cb6e.

📒 Files selected for processing (1)

• workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/DatabaseConnectionPopup/index.tsx

---

📝 Walkthrough

Walkthrough

Error handling enhancements in the DatabaseConnectionPopup component, including improved state reset during save operations, repurposed error messages for connection creation, clearer user-facing error feedback, new error display UI, and input field management during introspection.

Changes

Cohort / File(s)	Summary
Error Handling & State Management workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/DatabaseConnectionPopup/index.tsx	Refactored error state initialization and clearing, updated error message context from saving to creating, added password clearing on errors, implemented explicit user-facing error messages for validation failures, and added error display UI block with expandable details in Connection Details step.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 Errors now dance with clarity bright,
State resets clean, no lingering fright,
Messages flow from "save" to "create,"
Users guided through errors straight,
A rabbit hops through logic refined! 🔧

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description provides required issue links and references a template, but most critical sections (Goals, Approach, Release note, Documentation, Test environment, etc.) contain only placeholder text without substantive content.	Complete the Goals, Approach (with UI screenshots), Release note, Documentation, and Test environment sections with specific details relevant to the connection creation flow improvements and the referenced issues.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Improvements related to connection creation flow' directly aligns with the changeset's focus on enhancing error handling, UI/UX, and overall flow management in the DatabaseConnectionPopup component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}