Merge pull request wso2#818 from samithkavishke/issue-1696

[BI] Resolve type editor creation flow

Author: sachiniSam

workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx

@@ -1217,10 +1217,10 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         });
     };
 
-    const getDefaultValue = () => {
+    const getDefaultValue = (typeName?: string) => {
         return ({
             type: {
-                name: "MyType",
+                name: typeName || "MyType",
                 members: [] as Member[],
                 editable: true,
                 metadata: {
@@ -1238,8 +1238,8 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         })
     }
 
-    const getNewTypeCreateForm = () => {
-        pushTypeStack(getDefaultValue());
+    const getNewTypeCreateForm = (typeName?: string) => {
+        pushTypeStack(getDefaultValue(typeName));
     }
 
     // handle if node form

workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx

@@ -310,10 +310,10 @@ export function FormGeneratorNew(props: FormProps) {
         closePopup: closeModal
     }
 
-    const defaultType = (): Type => {
+    const defaultType = (typeName?: string): Type => {
         if (!isGraphqlEditor || typeEditorState.field?.type === 'PARAM_MANAGER') {
             return {
-                name: typeEditorState.newTypeValue || "MyType",
+                name: typeName || typeEditorState.newTypeValue || "MyType",
                 editable: true,
                 metadata: {
                     label: "",
@@ -328,7 +328,7 @@ export function FormGeneratorNew(props: FormProps) {
                 allowAdditionalFields: false
             };
         } return {
-            name: typeEditorState.newTypeValue || "MyType",
+            name: typeName || typeEditorState.newTypeValue || "MyType",
             editable: true,
             metadata: {
                 label: "",
@@ -818,9 +818,9 @@ export function FormGeneratorNew(props: FormProps) {
         setTypeEditorState({ ...typeEditorState, isOpen: state });
     }
 
-    const getNewTypeCreateForm = () => {
+    const getNewTypeCreateForm = (typeName?: string) => {
         pushTypeStack({
-            type: defaultType(),
+            type: defaultType(typeName),
             isDirty: false
         })
     }

workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx

@@ -47,7 +47,7 @@ type FormTypeEditorProps = {
     isGraphql?: boolean;
     onCloseCompletions?: () => void;
     onTypeCreate: (typeName?: string) => void;
-    getNewTypeCreateForm: () => void;
+    getNewTypeCreateForm: (typeName?: string) => void;
     onSaveType: (type: Type | string) => void
     refetchTypes: boolean;
     isPopupTypeForm: boolean;
@@ -239,7 +239,7 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
     };
 
     const handleTypeCreate = (typeName?: string) => {
-        getNewTypeCreateForm();
+        getNewTypeCreateForm(typeName);
     };
 
     return (

workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx

@@ -193,6 +193,9 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                 default:
                     setSelectedTypeKind(TypeKind.RECORD);
             }
+
+            // Ensure tempName is initialized when editing a new type (prevents focus loss due to replacing the main type on each keystroke)
+            setTempName(editingType.name);
         }
 
         setIsNewType(newType);
@@ -420,10 +423,24 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
     }
 
     const handleOnTypeNameChange = (value: string) => {
+        if (isNewType) {
+            setTempName(value);
+            validateTypeName(value);
+            return;
+        }
         handleSetType({ ...type, name: value });
         validateTypeName(value);
     }
 
+    const commitNewTypeName = () => {
+        if (!isNewType) {
+            return;
+        }
+        if (tempName && tempName !== type.name) {
+            handleSetType({ ...type, name: tempName } as Type);
+        }
+    };
+
     // Function to validate before saving to verify names created in nested forms
     const handleSaveWithValidation = async (typeToSave: Type) => {
 
@@ -600,13 +617,18 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                     <TextFieldWrapper>
                         <TextField
                             label="Name"
-                            value={type.name}
+                            value={tempName}
                             errorMsg={nameError}
-                            onBlur={handleOnBlur}
+                            onBlur={(e) => {
+                                // commit local name into type on blur and validate
+                                commitNewTypeName();
+                                handleOnBlur(e);
+                            }}
                             onChange={(e) => handleOnTypeNameChange(e.target.value)}
                             onKeyDown={(e) => {
                                 if (e.key === 'Enter') {
-                                    handleOnTypeNameChange((e.target as HTMLInputElement).value);
+                                    // commit on Enter
+                                    commitNewTypeName();
                                 }
                             }}
                             onFocus={(e) => { e.target.select(); validateTypeName(e.target.value) }}
@@ -622,7 +644,11 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
             <Footer>
                 <Button
                     data-testid="type-create-save"
-                    onClick={() => handleSaveWithValidation(type)}
+                    onClick={() => {
+                        // Ensure Save uses the latest tempName for new types without causing extra re-renders
+                        const typeToSave = isNewType ? { ...type, name: tempName } : type;
+                        handleSaveWithValidation(typeToSave);
+                    }}
                     disabled={onValidationError || !isTypeNameValid || isEditing || isSaving}>
                     {isSaving ? <Typography variant="progress">Saving...</Typography> : "Save"}
                 </Button>