Record Configure view improvements

[sachiniSam]

Purpose

Related issue wso2/product-ballerina-integrator#1849

Screen.Recording.2025-11-14.at.20.07.20.mov

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 [email protected] 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 [email protected] 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.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 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.}

[Copilot]

Pull Request Overview

This PR improves the Record Configuration view by transitioning from a sliding pane approach to a modal-based dialog with a two-column layout. The left column displays the record field configuration tree, while the right column provides an integrated expression editor with real-time diagnostics and syntax validation.

Key Changes:

• Introduced a modal-based Record Configuration page with side-by-side field selector and expression editor
• Added new "Guided" input mode for record type fields alongside existing Text and Expression modes
• Implemented bidirectional synchronization between the field selector and expression editor with debounced diagnostics validation

Reviewed Changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 26 comments.

Show a summary per file

File	Description
workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx	Removed inline record configuration logic, delegating to modal approach
workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigView.tsx	Simplified component by removing wrapper div
workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx	Major refactor adding two-column layout, expression editor integration, diagnostics handling, and sync logic
workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx	Added modal state management and ConfigureRecordPage integration
workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx	Added modal state management and ConfigureRecordPage integration with performance optimization removal
workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx	Standardized z-index to 2000
workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx	Standardized overlay z-index to 2000
workspaces/ballerina/ballerina-side-panel/src/index.ts	Exported context module for external use
workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts	Improved quote handling to preserve internal quotes
workspaces/ballerina/ballerina-side-panel/src/components/editors/index.ts	Exported ChipExpressionBaseComponent for direct usage
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/types.ts	Added GUIDED input mode enum value
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/styles.tsx	Added customHeight prop support
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/AutoExpandingEditableDiv.tsx	Implemented custom height support via expressionHeight prop
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent.tsx	Added expressionHeight prop passthrough
workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionField.tsx	Updated to treat GUIDED mode like TEXT mode
workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx	Added GUIDED mode initialization and auto-open ConfigureRecordPage on focus
workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/styles.tsx	Adjusted slider width to accommodate "Guided" label
workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/index.tsx	Added isRecordTypeField prop to display "Guided" mode
workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts	Added onOpenRecordConfigPage callback to FormExpressionEditorBaseProps

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sachiniSam]

#913 addresses some of the review suggestions