[Data Mapper] Fix inconstancy in type name styling

[KCSAbeywickrama]

Purpose

Fixes wso2/product-integrator#610

Summary by CodeRabbit

• Bug Fixes

  • Improved error handling in the variable form to prevent potential runtime errors when type change callbacks are unavailable.

• Style

  • Removed fixed minimum width constraint from type labels to enable more flexible label sizing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0acbe2a7-1e09-4348-bb07-8446f0c0e147

📥 Commits

Reviewing files that changed from the base of the PR and between ccc3276 and 085e8d5.

📒 Files selected for processing (2)

• workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx
• workspaces/ballerina/data-mapper/src/components/styles.ts

💤 Files with no reviewable changes (1)

• workspaces/ballerina/data-mapper/src/components/styles.ts

---

📝 Walkthrough

Walkthrough

Two separate updates address styling consistency and error handling: removed fixed minimum width constraint from type label styles to resolve inconsistent sizing between input and output labels in Data Mapper, and added optional chaining to prevent errors when callback is undefined in VariableForm.

Changes

Cohort / File(s)	Summary
Optional Chaining in Callback workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx	Updated handleOnTypeChange to invoke handleSelectedTypeChange via optional chaining (?.) instead of unconditionally, preventing runtime errors if callback is undefined.
Type Label Styling Fix workspaces/ballerina/data-mapper/src/components/styles.ts	Removed minWidth: "100px" constraint from typeLabel style object to allow flexible label sizing and resolve inconsistent width between input and output type labels.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 With whiskers twitching, this rabbit hops with glee,
Labels now flexible, as wide as they should be!
A safe chain to catch, no errors shall flee,
Consistency blooms where chaos used to be! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete, providing only the Purpose section with a linked issue reference and screenshot, missing Goals, Approach, and other required sections from the template.	Add Goals section describing the solution, Approach section explaining implementation details, and complete other required sections like Release note, Documentation, and Automation tests sections.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[Data Mapper] Fix inconstancy in type name styling' clearly and specifically describes the main change: fixing inconsistent styling of type name labels in the data mapper component.
Linked Issues check	✅ Passed	The code changes directly address issue #610: removing minWidth from typeLabel styles ensures consistent type name label width between input and output, and the optional chaining prevents errors during type selection changes.
Out of Scope Changes check	✅ Passed	Both changes are directly scoped to resolving issue #610: the style removal addresses the core inconsistent label width issue, and the optional chaining handles edge cases in type selection handling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}