Refactor editor mode handling to use InputMode constants

Author: dan-niles

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

@@ -147,10 +147,10 @@ const TitleWrapper = styled.div`
  * Map of mode components - add new modes here
  */
 const MODE_COMPONENTS: Record<EditorMode, React.ComponentType<any>> = {
-    text: TextMode,
-    prompt: PromptMode,
-    expression: ExpressionMode,
-    template: TemplateMode
+    [InputMode.TEXT]: TextMode,
+    [InputMode.PROMPT]: PromptMode,
+    [InputMode.EXP]: ExpressionMode,
+    [InputMode.TEMPLATE]: TemplateMode
 };
 
 export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
@@ -176,24 +176,16 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
 
     // Determine mode - use prop if provided, otherwise auto-detect
     const defaultMode: EditorMode = propMode ?? (
-        promptFields.includes(field.key) ? "prompt" : "text"
+        promptFields.includes(field.key) ? InputMode.PROMPT : InputMode.TEXT
     );
 
     const [mode, setMode] = useState<EditorMode>(defaultMode);
-    const [showPreview, setShowPreview] = useState(false);
     const [mouseDownTarget, setMouseDownTarget] = useState<EventTarget | null>(null);
 
     useEffect(() => {
         setMode(defaultMode);
     }, [defaultMode]);
 
-    useEffect(() => {
-        // Text mode and template mode don't support preview (simplified)
-        if (mode === "text" || mode === "template") {
-            setShowPreview(false);
-        }
-    }, [mode]);
-
     const handleMinimize = () => {
         onClose();
     };
@@ -220,8 +212,8 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
         value: value,
         onChange: onChange,
         field,
-        // Props for prompt mode (now uses EditorModeExpressionProps)
-        ...(mode === "prompt" && {
+        // Props for prompt mode
+        ...(mode === InputMode.PROMPT && {
             completions,
             fileName,
             targetLineRange,
@@ -234,7 +226,7 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
             inputMode
         }),
         // Props for expression mode
-        ...(mode === "expression" && {
+        ...(mode === InputMode.EXP && {
             completions,
             fileName,
             targetLineRange,
@@ -245,8 +237,8 @@ export const ExpandedEditor: React.FC<ExpandedPromptEditorProps> = ({
             error,
             formDiagnostics
         }),
-        // Props for template mode (simplified - same as expression but with inputMode)
-        ...(mode === "template" && {
+        // Props for template mode
+        ...(mode === InputMode.TEMPLATE && {
             completions,
             fileName,
             targetLineRange,

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/modes/types.ts

@@ -83,7 +83,11 @@ export interface EditorModeExpressionProps extends EditorModeProps {
     inputMode?: InputMode;
 }
 
-/**
- * Mode type identifier
- */
-export type EditorMode = "text" | "prompt" | "expression" | "template";
+export const EXPANDABLE_MODES = [
+    InputMode.TEXT,
+    InputMode.PROMPT,
+    InputMode.EXP,
+    InputMode.TEMPLATE
+] as const;
+
+export type EditorMode = typeof EXPANDABLE_MODES[number];

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

@@ -28,7 +28,7 @@ import {
     RequiredFormInput,
     ThemeColors
 } from '@wso2/ui-toolkit';
-import { getPropertyFromFormField, sanitizeType } from './utils';
+import { getPropertyFromFormField, isExpandableMode, sanitizeType, toEditorMode } from './utils';
 import { FormField, FormExpressionEditorProps, HelperpaneOnChangeOptions } from '../Form/types';
 import { useFormContext } from '../../context';
 import {
@@ -619,7 +619,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         }
     };
 
-    const onOpenExpandedMode = !props.isInExpandedMode
+    const onOpenExpandedMode = !props.isInExpandedMode && isExpandableMode(inputMode)
         ? handleOpenExpandedMode
         : undefined;
 
@@ -771,7 +771,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                 formDiagnostics && formDiagnostics.length > 0 &&
                                 <ErrorBanner errorMsg={formDiagnostics.map(d => d.message).join(', ')} />
                             }
-                            {onOpenExpandedMode && (
+                            {onOpenExpandedMode && toEditorMode(inputModeRef.current) && (
                                 <ExpandedEditor
                                     isOpen={isExpandedModalOpen}
                                     field={field}
@@ -818,15 +818,7 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
                                         setIsExpandedModalOpen(false)
                                     }}
                                     onSave={handleSaveExpandedMode}
-                                    mode={
-                                        inputModeRef.current === InputMode.EXP
-                                            ? "expression"
-                                            : inputModeRef.current === InputMode.PROMPT
-                                                ? "prompt"
-                                                : inputModeRef.current === InputMode.TEMPLATE
-                                                    ? "template"
-                                                    : undefined
-                                    }
+                                    mode={toEditorMode(inputModeRef.current)!}
                                     completions={completions}
                                     fileName={effectiveFileName}
                                     targetLineRange={effectiveTargetLineRange}

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

@@ -19,6 +19,9 @@
 import { startCase } from "lodash";
 import { FormField } from "../Form/types";
 import { ExpressionProperty } from "@wso2/ballerina-core";
+import { InputMode } from "../..";
+import { EditorMode } from "./ExpandedEditor";
+import { EXPANDABLE_MODES } from "./ExpandedEditor/modes/types";
 
 export function isDropdownField(field: FormField) {
     return field.type === "MULTIPLE_SELECT" || field.type === "SINGLE_SELECT" || field.type?.toUpperCase() === "ENUM";
@@ -105,3 +108,11 @@ export const getValueForTextModeEditor = (value: string) => {
     }
     return value;
 }
+
+export function isExpandableMode(mode: InputMode): mode is EditorMode {
+    return EXPANDABLE_MODES.includes(mode as EditorMode);
+}
+
+export function toEditorMode(mode: InputMode): EditorMode | undefined {
+    return isExpandableMode(mode) ? mode : undefined;
+}