Skip to content

Fix record config helper overflow from the model #1352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kanushka merged 4 commits into from
Feb 3, 2026
Merged

Fix record config helper overflow from the model #1352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f89d2b9
fix right overflow issue
senithkay Jan 29, 2026
72ab5ec
Remove helper toggle from expression editor in record config model
senithkay Jan 29, 2026
b6da481
Fix Resource configuration response edit form reset the value of Stat…
senithkay Jan 29, 2026
eb31b14
Revert "Fix Resource configuration response edit form reset the value…
senithkay Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...nts/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionDefaultConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,8 @@ export class ChipExpressionEditorDefaultConfiguration {
getIsValueCompatible(value: string): boolean {
return true;
}

getIsToggleHelperAvailable(): boolean {
return true;
}
}
4 changes: 2 additions & 2 deletions ...ditors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone

return (
<>
{showToggle && (
{showToggle && configuration.getIsToggleHelperAvailable() && (
<HelperPaneToggleButton
ref={helperPaneToggleButtonRef}
isOpen={helperPaneState.isOpen}
Expand Down Expand Up @@ -512,7 +512,7 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
}
{!props.disabled && (
<FloatingButtonContainer>
{!props.isExpandedVersion &&
{!props.isExpandedVersion && configuration.getIsToggleHelperAvailable() &&
<FloatingToggleButton
ref={helperPaneToggleButtonRef}
onClick={handleManualToggle}
Expand Down
10 changes: 5 additions & 5 deletions ...side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ export const detectTokenPatterns = (
return compounds;
};

// Calculates helper pane position with viewport overflow correction
// Calculates helper pane position with editor right boundary overflow correction
export const calculateHelperPanePosition = (
targetCoords: { bottom: number; left: number },
editorRect: DOMRect,
Expand All @@ -322,10 +322,10 @@ export const calculateHelperPanePosition = (
let top = targetCoords.bottom - editorRect.top + scrollTop;
let left = targetCoords.left - editorRect.left;

// Add overflow correction for window boundaries
const viewportWidth = window.innerWidth;
const absoluteLeft = targetCoords.left;
const overflow = absoluteLeft + helperPaneWidth - viewportWidth;
// Add overflow correction for editor right boundary
const editorRight = editorRect.left + editorRect.width;
const paneRight = targetCoords.left + helperPaneWidth;
const overflow = paneRight - editorRight;

if (overflow > 0) {
Comment on lines +326 to 330
Copy link

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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%.

Copilot uses AI. Check for mistakes.
left -= overflow;
Expand Down
6 changes: 6 additions & 0 deletions .../ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/Configurations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,3 +216,9 @@ export class NumberExpressionEditorConfig extends ChipExpressionEditorDefaultCon
return this.DECIMAL_INPUT_REGEX.test(value);
}
}

export class RecordConfigExpressionEditorConfig extends ChipExpressionEditorDefaultConfiguration {
getIsToggleHelperAvailable(): boolean {
return false;
}
}
4 changes: 2 additions & 2 deletions ...ces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import styled from "@emotion/styled";
import { useEffect, useRef, useState, RefObject } from "react";
import { useRpcContext } from "@wso2/ballerina-rpc-client";
import { RecordConfigView } from "./RecordConfigView";
import { ChipExpressionEditorComponent, Context as FormContext, HelperpaneOnChangeOptions, FieldProvider, FormField, FormExpressionEditorProps, getPropertyFromFormField } from "@wso2/ballerina-side-panel";
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";
Expand Down Expand Up @@ -704,7 +704,7 @@ export function ConfigureRecordPage(props: ConfigureRecordPageProps) {
extractArgsFromFunction={wrappedExtractArgsFromFunction}
getHelperPane={wrappedGetHelperPane}
sx={{ height: "350px" }}
configuration={new ChipExpressionEditorDefaultConfiguration()}
configuration={new RecordConfigExpressionEditorConfig()}
isExpandedVersion={false}
/>
{formDiagnostics && formDiagnostics.length > 0 && (
Expand Down
Loading