Fix record config helper overflow from the model

[senithkay]

Purpose

The helper pane in the expression editor could overflow beyond the right boundary of the editor container, causing layout issues and partially hidden UI elements. This negatively affected usability, especially in constrained editor widths.
Additionally, the helper toggle button in the RecordConfig model expression editor was redundant, as the helper pane is already shown by default and can be accessed via keyboard shortcuts.

Resolves: wso2/product-ballerina-integrator#2352

Goals

• Prevent the helper pane from overflowing beyond the right boundary of the expression editor.
• Ensure the helper pane always remains within the visible width of the expression editor.
• Simplify the RecordConfig model expression editor UI by removing unnecessary controls.

Approach

• Added a boundary check to detect when the helper pane exceeds the right boundary of the expression editor container.
• When an overflow is detected, applied a right-position correction to reposition the helper pane so it fits within the available editor width.
• Removed the helper toggle button from the RecordConfig model expression editor, since:
  • The helper pane is displayed automatically when the expression editor is focused.
  • Keyboard shortcuts already provide an accessible way to toggle the helper pane.
• This reduces UI clutter without impacting existing user workflows.

Summary by CodeRabbit

• New Features

  • Introduced configurable helper toggle availability, enabling individual editors to control whether users can access helper functionality.
  • Record configuration modal now operates without the helper toggle button.

• Bug Fixes

  • Improved helper pane positioning calculation with enhanced editor boundary detection for optimal alignment.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This change introduces a configuration-driven mechanism to conditionally disable the helper toggle button in the ChipExpressionEditor. A new configuration class for record forms overrides the default behavior by returning false from getIsToggleHelperAvailable(), preventing the toggle from rendering when this config is used. The helper pane positioning calculation is enhanced with additional parameters for improved boundary-based overflow detection.

Changes

Cohort / File(s)	Summary
Configuration and Availability Control ChipExpressionDefaultConfig.ts, Configurations.tsx	Added new method getIsToggleHelperAvailable() returning true in default config. Created new RecordConfigExpressionEditorConfig class extending default configuration, overriding the method to return false.
Conditional Rendering ChipExpressionEditor.tsx	Updated HelperPaneToggleButton and FloatingToggleButton rendering to be gated by both existing conditions and the new configuration.getIsToggleHelperAvailable() check.
Positioning Calculation utils.ts	Enhanced calculateHelperPanePosition() function signature with helperPaneWidth and optional scrollTop parameters. Modified overflow detection logic from viewport-based to editor-right boundary-based calculation.
Configuration Usage RecordConfigModal.tsx	Updated ChipExpressionEditorComponent to use new RecordConfigExpressionEditorConfig instead of default configuration.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A toggle takes a bow,
When records need some room,
Configuration steers the flow,
No cropping in the zoom!
Boundaries now guide our pane,
With width and scroll in hand. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix record config helper overflow from the model' accurately and specifically identifies the main change: fixing helper pane overflow in the record config expression editor.
Description check	✅ Passed	The PR description follows the repository template, addressing Purpose (with issue link), Goals, and Approach sections. All core sections are present and adequately detailed.
Linked Issues check	✅ Passed	The changes implement the core requirements from issue #2352: detecting right-boundary overflow via calculateHelperPanePosition signature update, applying positional correction via editorRight calculation, and removing the toggle button via RecordConfigExpressionEditorConfig.
Out of Scope Changes check	✅ Passed	All modifications are directly aligned with the stated objectives: helper pane positioning logic, configuration gating for toggle visibility, and removal of the toggle from RecordConfig. No unrelated changes were introduced.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!

---

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

Fixes helper pane positioning so it doesn’t overflow past the expression editor’s right edge (especially in constrained containers) and removes the redundant helper toggle UI for the RecordConfig modal.

Changes:

• Adjust helper pane positioning logic to correct against the editor container’s right boundary (not the viewport).
• Add a configuration flag to disable helper toggle UI, and use it to remove the toggle from the RecordConfig editor.
• Introduce a RecordConfig-specific expression editor configuration.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx	Switches RecordConfig modal editor config to disable the helper toggle button.
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/Configurations.tsx	Adds RecordConfigExpressionEditorConfig to disable helper toggle availability.
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/utils.ts	Updates helper pane positioning correction to use editor boundary overflow instead of viewport.
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx	Gates rendering of helper toggle UI based on configuration.
workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionDefaultConfig.ts	Adds getIsToggleHelperAvailable() defaulting to true.

Comments suppressed due to low confidence (1)

workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx:30

• The RecordConfigModal now uses RecordConfigExpressionEditorConfig, but the file still has a leftover deep import of ChipExpressionEditorDefaultConfiguration from "@wso2/ballerina-side-panel/lib/..." which is no longer used. Please remove the unused import and avoid deep-importing from the built "lib" path (prefer the package’s public exports) to prevent duplicate-module/bundler issues.

import { ChipExpressionEditorComponent, Context as FormContext, HelperpaneOnChangeOptions, FieldProvider, FormField, FormExpressionEditorProps, getPropertyFromFormField, RecordConfigExpressionEditorConfig } from "@wso2/ballerina-side-panel";
import { useForm } from "react-hook-form";
import { debounce } from "lodash";
import ReactMarkdown from "react-markdown";
import { updateFieldsSelection } from "../Components/RecordConstructView/utils";
import { ChipExpressionEditorDefaultConfiguration } from "@wso2/ballerina-side-panel/lib/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionDefaultConfig";

---

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

[Copilot]

calculateHelperPanePosition can produce a negative left when helperPaneWidth > editorRect.width (narrow editor containers). That shifts the helper pane outside the editor on the left and still leaves it partially hidden. Consider clamping left to the editor bounds (e.g., left = Math.max(0, Math.min(left, editorRect.width - helperPaneWidth))) and/or allowing the pane container to shrink via max-width: 100%.

[kanushka]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[kanushka]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.