Record Configure view improvements

workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts

@@ -218,6 +218,7 @@ type FormExpressionEditorBaseProps = {
     onSave?: (value: string) => void | Promise<void>;
     onRemove?: () => void;
     onSaveConfigurables?: (values: any) => void;
+    onOpenRecordConfigPage?: (fieldKey: string, currentValue: string, recordTypeField: any, onChange: (value: string) => void) => void;
 }
 
 type ExpressionEditorRPCManager = {

workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/index.tsx

@@ -23,11 +23,12 @@ import { getDefaultExpressionMode } from '../editors/MultiModeExpressionEditor/C
 
 interface ModeSwitcherProps {
     value: InputMode;
+    isRecordTypeField: boolean;
     onChange: (value: InputMode) => void;
     valueTypeConstraint: string | string[];
 }
 
-const ModeSwitcher: React.FC<ModeSwitcherProps> = ({ value, onChange, valueTypeConstraint }) => {
+const ModeSwitcher: React.FC<ModeSwitcherProps> = ({ value, isRecordTypeField, onChange, valueTypeConstraint }) => {
     const isChecked = value === InputMode.EXP;
 
     const defaultMode = useMemo(
@@ -36,7 +37,7 @@ const ModeSwitcher: React.FC<ModeSwitcherProps> = ({ value, onChange, valueTypeC
     );
 
     const handlePrimaryModeClick = () => {
-        onChange(defaultMode);
+        onChange(isRecordTypeField ? InputMode.GUIDED : defaultMode);
     };
 
     const handleExpressionClick = () => {
@@ -46,7 +47,7 @@ const ModeSwitcher: React.FC<ModeSwitcherProps> = ({ value, onChange, valueTypeC
     return (
         <SwitchWrapper>
             <Slider checked={isChecked}>
-                <Label active={!isChecked} onClick={handlePrimaryModeClick}>{defaultMode}</Label>
+                <Label active={!isChecked} onClick={handlePrimaryModeClick}>{isRecordTypeField ? InputMode.GUIDED : defaultMode}</Label>
                 <Label active={isChecked} onClick={handleExpressionClick}>Expression</Label>
             </Slider>
         </SwitchWrapper>

workspaces/ballerina/ballerina-side-panel/src/components/ModeSwitcher/styles.tsx

@@ -67,7 +67,7 @@ export const Slider = styled.div<{ checked: boolean }>`
     content: "";
     position: absolute;
     height: calc(100% - 4px);
-    width: ${props => props.checked ? 'calc(70% - 6px)' : 'calc(30% - 2px)'};
+    width: ${props => props.checked ? 'calc(70% - 6px)' : 'calc(35% - 2px)'};
     left: ${props => props.checked ? 'calc(30% + 4px)' : '2px'};
     border-radius: 1px;
     background: ${ThemeColors.SURFACE_DIM};

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx

@@ -330,6 +330,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         onCancel,
         onRemove,
         handleOnFieldFocus,
+        onOpenRecordConfigPage,
         targetLineRange,
         fileName,
         helperPaneHeight,
@@ -342,7 +343,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
 
     const key = fieldKey ?? field.key;
     const [focused, setFocused] = useState<boolean>(false);
-    const [inputMode, setInputMode] = useState<InputMode>(InputMode.EXP);
+    const [inputMode, setInputMode] = useState<InputMode>(recordTypeField ? InputMode.GUIDED : InputMode.EXP);
     const [isExpressionEditorHovered, setIsExpressionEditorHovered] = useState<boolean>(false);
     const [showModeSwitchWarning, setShowModeSwitchWarning] = useState(false);
     const [formDiagnostics, setFormDiagnostics] = useState(field.diagnostics);
@@ -400,6 +401,12 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
     }, [fieldValue, targetLineRange]);
 
     useEffect(() => {
+        // If recordTypeField is present, always use GUIDED mode
+        if (recordTypeField) {
+            setInputMode(InputMode.GUIDED);
+            return;
+        }
+
         let newInputMode = getInputModeFromTypes(field.valueTypeConstraint)
         if (isModeSwitcherRestricted()) {
             setInputMode(InputMode.EXP);
@@ -421,10 +428,26 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         else {
             setInputMode(newInputMode);
         }
-    }, [field?.valueTypeConstraint]);
+    }, [field?.valueTypeConstraint, recordTypeField]);
 
-    const handleFocus = async () => {
+    const handleFocus = async (controllerOnChange?: (value: string) => void) => {
         setFocused(true);
+
+        // If in guided mode with recordTypeField, open ConfigureRecordPage directly
+        if (inputMode === InputMode.GUIDED && recordTypeField && onOpenRecordConfigPage) {
+            const currentValue = watch(key) || '';
+            // Create onChange callback that updates the form value
+            const onChangeCallback = (value: string) => {
+                if (controllerOnChange) {
+                    controllerOnChange(value);
+                } else {
+                    setValue(key, value);
+                }
+            };
+            onOpenRecordConfigPage(key, currentValue, recordTypeField, onChangeCallback);
+            return;
+        }
+
         // Trigger actions on focus
         await onFocus?.();
         handleOnFieldFocus?.(key);
@@ -545,6 +568,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
     };
 
     const isModeSwitcherAvailable = () => {
+        if (recordTypeField) return true;
         if (isModeSwitcherRestricted()) return false;
         if (!(focused || isExpressionEditorHovered)) return false;
         if (!getInputModeFromTypes(field.valueTypeConstraint)) return false;
@@ -585,6 +609,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                 {isModeSwitcherAvailable() && (
                                     <ModeSwitcher
                                         value={inputMode}
+                                        isRecordTypeField={!!recordTypeField}
                                         onChange={handleModeChange}
                                         valueTypeConstraint={field.valueTypeConstraint}
                                     />
@@ -606,7 +631,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                 completions={completions}
                                 fileName={effectiveFileName}
                                 targetLineRange={effectiveTargetLineRange}
-                                autoFocus={autoFocus}
+                                autoFocus={recordTypeField ? false : autoFocus}
                                 sanitizedExpression={sanitizedExpression}
                                 ariaLabel={field.label}
                                 placeholder={placeholder}
@@ -652,7 +677,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                 extractArgsFromFunction={handleExtractArgsFromFunction}
                                 onCompletionSelect={handleCompletionSelect}
                                 onFocus={async () => {
-                                    handleFocus();
+                                    handleFocus(onChange);
                                 }}
                                 onBlur={handleBlur}
                                 onSave={handleSave}

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionField.tsx

@@ -125,7 +125,7 @@ export const ExpressionField: React.FC<ExpressionField> = ({
     onOpenExpandedMode,
     isInExpandedMode
 }) => {
-    if (inputMode === InputMode.TEXT) {
+    if (inputMode === InputMode.TEXT || inputMode === InputMode.GUIDED) {
         return (
             <TextModeEditor
                 exprRef={exprRef}

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

@@ -65,6 +65,7 @@ export type ChipExpressionBaseComponentProps = {
     onOpenExpandedMode?: () => void;
     onRemove?: () => void;
     isInExpandedMode?: boolean;
+    expressionHeight?: string | number;
 }
 
 export const ChipExpressionBaseComponent = (props: ChipExpressionBaseComponentProps) => {
@@ -558,6 +559,7 @@ export const ChipExpressionBaseComponent = (props: ChipExpressionBaseComponentPr
                     <AutoExpandingEditableDiv
                         value={props.value}
                         fieldContainerRef={fieldContainerRef}
+                        expressionHeight={props.expressionHeight}
                         onFocusChange={(focused) => {
                             setIsAnyElementFocused(focused);
                             if (!focused && expressionModel) {

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

@@ -76,6 +76,7 @@ export type AutoExpandingEditableDivProps = {
     isInExpandedMode?: boolean;
     onOpenExpandedMode?: () => void;
     helperButtonRef?: React.RefObject<HTMLButtonElement>;
+    expressionHeight?: string | number;
 }
 
 export const AutoExpandingEditableDiv = (props: AutoExpandingEditableDivProps) => {
@@ -276,15 +277,28 @@ export const AutoExpandingEditableDiv = (props: AutoExpandingEditableDivProps) =
         }
     }
 
+    // Determine height based on expressionHeight prop, or fall back to default behavior
+    const getHeightValue = () => {
+        if (props.expressionHeight !== undefined) {
+            return typeof props.expressionHeight === 'number'
+                ? `${props.expressionHeight}px`
+                : props.expressionHeight;
+        }
+        return props.isInExpandedMode ? `${EXPANDED_EDITOR_HEIGHT}px` : '100px';
+    };
+
+    const heightValue = getHeightValue();
+
     return (
         <ChipEditorFieldContainer>
             <ChipEditorField
                 ref={fieldContainerRef}
+                customHeight={props.expressionHeight !== undefined ? `${heightValue}px` : undefined}
                 style={{
                     ...style,
                     flex: 1,
-                    maxHeight: props.isInExpandedMode ? `${EXPANDED_EDITOR_HEIGHT}px` : '100px',
-                    ...(props.isInExpandedMode && {
+                    maxHeight: heightValue,
+                    ...(props.isInExpandedMode && !props.expressionHeight && {
                         height: `${EXPANDED_EDITOR_HEIGHT}px`,
                         minHeight: `${EXPANDED_EDITOR_HEIGHT}px`,
                     })
@@ -294,7 +308,13 @@ export const AutoExpandingEditableDiv = (props: AutoExpandingEditableDivProps) =
                 onKeyDown={onKeyDown}
                 onInput={onInput}
             >
-                <div style={{ flex: 1, overflow: 'auto', height: props.isInExpandedMode ? `${EXPANDED_EDITOR_HEIGHT}px` : 'auto' }}>
+                <div style={{
+                    flex: 1,
+                    overflow: 'auto',
+                    height: props.expressionHeight !== undefined ?
+                        heightValue :
+                        (props.isInExpandedMode ? `${EXPANDED_EDITOR_HEIGHT}px` : 'auto')
+                }}>
                     {children}
                 </div>
             </ChipEditorField>

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

@@ -21,11 +21,11 @@ import { keyframes } from "@emotion/react";
 import { CHIP_EXPRESSION_EDITOR_HEIGHT } from "./constants";
 import { ThemeColors } from "@wso2/ui-toolkit";
 
-export const ChipEditorField = styled.div`
+export const ChipEditorField = styled.div<{ customHeight?: string }>`
     font-family: monospace;
     font-size: 12px;
-    min-height: ${CHIP_EXPRESSION_EDITOR_HEIGHT}px;
-    height: 100%;
+    min-height: ${props => props.customHeight || `${CHIP_EXPRESSION_EDITOR_HEIGHT}px`};
+    height: ${props => props.customHeight || '100%'};
     width: 100%;
     padding: 1px 25px 1px 8px;
     background-color: var(--vscode-input-background);

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

@@ -18,7 +18,8 @@
 
 export enum InputMode {
   TEXT = "Text",
-  EXP = "Expression"
+  EXP = "Expression",
+  GUIDED = "Guided"
 }
 
 export const INPUT_MODE_MAP = {

workspaces/ballerina/ballerina-side-panel/src/components/editors/index.ts

@@ -26,4 +26,5 @@ export * from "./MapEditor";
 export * from "./FileSelect";
 export * from "./FormMapEditor";
 export * from "./FieldContext";
-export { getPropertyFromFormField } from "./utils";
+export * from "./MultiModeExpressionEditor/ChipExpressionEditor/ChipExpressionBaseComponent";
+export { getPropertyFromFormField } from "./utils";

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

@@ -96,8 +96,12 @@ export const getFieldKeyForAdvanceProp = (fieldKey: string, advancePropKey: stri
 }
 
 export const getValueForTextModeEditor = (value: string) => {
-     if (value) {
-        return value.replace(/"/g, "");
+    if (value) {
+        // Only remove starting and ending double quotes, preserve quotes within the string
+        if (value.startsWith('"') && value.endsWith('"') && value.length >= 2) {
+            return value.slice(1, -1);
+        }
+        return value;
     }
     return value;
 }

workspaces/ballerina/ballerina-side-panel/src/index.ts

@@ -25,5 +25,6 @@ export * from "./components/editors";
 export * from "./components/GroupList";
 export * from "./components/ParamManager/ParamManager";
 export * from "./components/CardList";
+export * from "./context";
 
 export * from "./utils/path-validations";

workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx

@@ -164,7 +164,7 @@ const Overlay = styled.div`
     height: 100vh;
     background: ${ThemeColors.SURFACE_CONTAINER};
     opacity: 0.4;
-    z-index: 2001;
+    z-index: 2000;
     pointer-events: auto;
 `;
 

workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx

@@ -40,7 +40,7 @@ const ModalContainer = styled.div<{ sx?: any }>`
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 2001; 
+    z-index: 2000; 
     display: flex;
     justify-content: center;
     align-items: center;