Fix array editor element mode switch affect all the elements

[senithkay]

Purpose

Switching the input mode (e.g. Expression ↔ Text) on one element in an array editor field incorrectly changes the mode for all other elements in the array.

Resolves wso2/product-integrator#129

Goals

Ensure that mode switching in the array editor is scoped to the individual element being edited, with no effect on other elements in the same array.

Approach

The root cause was in getArraySubFormFieldFromTypes in utils.ts. It was assigning the same types array reference (from the field template) to every array element's FormField. Since FieldFactory.updateFieldTypesSelection mutates the selected property directly on those shared InputType objects, switching mode on one element propagated to all others.

Fixed by deep-copying each InputType object when constructing the array element's field, so each element holds its own independent types array:

Summary by CodeRabbit

• Refactor
  • Improved internal data handling for enhanced stability and consistency.

[coderabbitai]

📝 Walkthrough

Walkthrough

A utility function in the form array editor was modified to clone type objects instead of maintaining direct references. The change applies a shallow copy operation to prevent shared object references between array elements, addressing an issue where modifying one array element's state inadvertently affected all elements.

Changes

Cohort / File(s)	Summary
Object Cloning in Array Type Utility workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts	Modified getArraySubFormFieldFromTypes to clone each type object via spread operator (types.map(type => ({ ...type }))) instead of returning direct references, ensuring array elements maintain independent state.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 One line spread across the way,
Cloning objects, come what may,
No shared state to cause a fray,
Each array item hops its own today! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers Purpose, Goals, and Approach sections with clear explanation of the root cause and fix; however, missing most optional template sections like UI Component Development, Testing, and Documentation.
Linked Issues check	✅ Passed	The PR successfully addresses issue #129 by fixing the root cause where shared type array references caused mode switches to propagate across all array elements through deep-copying InputType objects.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the identified issue; the modification in getArraySubFormFieldFromTypes is the minimal fix needed to resolve the mode switch problem.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main change: fixing a bug where switching one array editor element's mode incorrectly affected all elements in the array.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

180-183: ⚠️ Potential issue | 🟡 Minor

Apply the same cloning fix to getMapSubFormFieldFromTypes for consistency.

Line 182 passes types directly without cloning, which is the same pattern that caused the array editor bug. If map editors support similar mode-switching behavior, this could lead to the same issue where switching one map entry's input mode affects all entries.

Proposed fix

         {
             key: `mp-val-${formId}`,
             label: "Value",
             type: getPrimaryInputType(types)?.fieldType || "",
             optional: false,
             editable: true,
             documentation: "",
             value: "",
-            types: types,
+            types: types.map(type => ({ ...type })),
             enabled: true
         }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts`
around lines 180 - 183, getMapSubFormFieldFromTypes currently assigns the
incoming types array directly to the returned object's types property, which can
cause shared-reference bugs like the array editor issue; update
getMapSubFormFieldFromTypes to clone the types array before assigning (e.g., use
a shallow copy like [...types] or types.slice(), or a deeper clone if elements
are mutated) so each map sub-form field gets its own types instance instead of a
shared reference.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@workspaces/ballerina/ballerina-side-panel/src/components/editors/utils.ts`:
- Around line 180-183: getMapSubFormFieldFromTypes currently assigns the
incoming types array directly to the returned object's types property, which can
cause shared-reference bugs like the array editor issue; update
getMapSubFormFieldFromTypes to clone the types array before assigning (e.g., use
a shallow copy like [...types] or types.slice(), or a deeper clone if elements
are mutated) so each map sub-form field gets its own types instance instead of a
shared reference.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ab21da60-ac19-4c68-ad2d-ae19a458f0f0

📥 Commits

Reviewing files that changed from the base of the PR and between 5306173 and 4dbbf38.

📒 Files selected for processing (1)

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