Merge pull request #1352 from senithkay/fix-record-config-helper-overflow

Fix record config helper overflow from the model

Author: kanushka

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionDefaultConfig.ts

@@ -47,4 +47,8 @@ export class ChipExpressionEditorDefaultConfiguration {
     getIsValueCompatible(value: string): boolean {
         return true;
     }
+
+    getIsToggleHelperAvailable(): boolean {
+        return true;
+    }
 }

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/components/ChipExpressionEditor.tsx

@@ -476,7 +476,7 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
 
     return (
         <>
-            {showToggle && (
+            {showToggle && configuration.getIsToggleHelperAvailable() && (
                 <HelperPaneToggleButton
                     ref={helperPaneToggleButtonRef}
                     isOpen={helperPaneState.isOpen}
@@ -512,7 +512,7 @@ export const ChipExpressionEditorComponent = (props: ChipExpressionEditorCompone
                     }
                     {!props.disabled && (
                         <FloatingButtonContainer>
-                            {!props.isExpandedVersion &&
+                            {!props.isExpandedVersion && configuration.getIsToggleHelperAvailable() &&
                                 <FloatingToggleButton
                                     ref={helperPaneToggleButtonRef}
                                     onClick={handleManualToggle}

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/utils.ts

@@ -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,
@@ -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) {
         left -= overflow;

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/Configurations.tsx

@@ -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;
+   }
+}

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

@@ -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";
@@ -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 && (