[BI Data Mapper] Add refresh button

[KCSAbeywickrama]

Purpose

Resolve wso2/product-ballerina-integrator#2021

Summary by CodeRabbit

Release Notes

• New Features
  • Added a Refresh button in the Data Mapper header, allowing users to refresh all active mappings directly from the interface. The button is positioned next to existing mapping management controls for easy access.
  • Enhanced the visual spacing between header action buttons to improve interface clarity and overall user experience when managing multiple mapping operations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A Refresh button has been added to the Data Mapper header component. The new ActionIconButton is positioned after the existing Clear mappings button with an onClick handler bound to an onRefresh callback. Horizontal gap spacing (2px) has been added to the button container for improved layout.

Changes

Cohort / File(s)	Summary
Data Mapper Header UI Enhancement workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx	Added Refresh button ActionIconButton with onRefresh callback and "Refresh all mappings" tooltip; introduced horizontal gap (2px) styling in ActionGroupContaner for button spacing

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Review button integration and onRefresh handler binding
• Verify tooltip text and icon name ("refresh")
• Confirm spacing adjustment (2px gap) is visually appropriate

Suggested reviewers

• hevayo
• gigara
• axewilledge

Poem

🐰 A button so bright, a refresh in sight,
Click once and mappings dance aright!
With two pixels between, the spacing looks clean,
The finest refresh button ever seen! ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete; it only includes the Purpose section with a link to the related issue, but lacks Goals, Approach, UI Component Development details, and other required template sections.	Add the missing sections (Goals, Approach with UI/screenshot details, UI Component Development checklist, etc.) following the repository's PR description template to provide complete context.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Linked Issues check	❓ Inconclusive	The linked issue #2021 lacks sufficient detail in its description (showing only '$subject' placeholder), making it impossible to fully validate whether the code changes meet the stated requirements.	Verify that the refresh button implementation in DataMapperHeader.tsx matches the complete functional requirements from issue #2021, which should clarify the expected behavior, placement, and integration.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[BI Data Mapper] Add refresh button' directly and clearly describes the main change in the pull request: adding a refresh button to the Data Mapper component.
Out of Scope Changes check	✅ Passed	The changes appear focused and scoped to adding a refresh button and styling in the DataMapper header; no extraneous modifications were identified outside the stated objective.

✨ Finishing touches

• 📝 Generate docstrings

🧪 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]

Actionable comments posted: 0

🧹 Nitpick comments (1)

workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx (1)

140-140: Consider slightly larger gap for better visual separation.

The 2px gap provides minimal spacing between action buttons. Typical button spacing is 4px or more for clearer visual separation. However, this might be an intentional design choice to keep the action group compact.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cada6a6 and 9c17731.

📒 Files selected for processing (1)

• workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (4)

📚 Learning: 2025-11-26T07:49:56.428Z

Learnt from: KCSAbeywickrama
Repo: wso2/vscode-extensions PR: 653
File: workspaces/bi/bi-extension/src/test/e2e-playwright-tests/data-mapper/DataMapperUtils.ts:136-141
Timestamp: 2025-11-26T07:49:56.428Z
Learning: In workspaces/bi/bi-extension/src/test/e2e-playwright-tests/data-mapper/DataMapperUtils.ts, the goPrevViewBackButton() method is only called when in a focused view, ensuring breadcrumbs are always present. No guard for empty breadcrumbs is needed.

Applied to files:

• workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx

📚 Learning: 2025-11-27T07:58:16.698Z

Learnt from: KCSAbeywickrama
Repo: wso2/vscode-extensions PR: 897
File: workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx:102-107
Timestamp: 2025-11-27T07:58:16.698Z
Learning: In workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx, the `inProgress` state in `wrapWithProgress` intentionally doesn't reset to `false`. The component unmounts when the onClick operation finishes, and resetting the state would cause the mapping options menu to briefly reappear while the data mapper loads new content from file changes.

Applied to files:

• workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx

📚 Learning: 2025-11-25T06:34:10.812Z

Learnt from: CR
Repo: wso2/vscode-extensions PR: 0
File: workspaces/ballerina/component-diagram/AGENTS.md:0-0
Timestamp: 2025-11-25T06:34:10.812Z
Learning: Applies to workspaces/ballerina/component-diagram/src/components/**/*.tsx : Use React 18.2.0 features including concurrent rendering and automatic batching; avoid class components in favor of functional components with hooks

Applied to files:

• workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx

📚 Learning: 2025-11-26T06:34:09.752Z

Learnt from: KCSAbeywickrama
Repo: wso2/vscode-extensions PR: 653
File: workspaces/bi/bi-extension/src/test/e2e-playwright-tests/data-mapper/DataMapperUtils.ts:128-134
Timestamp: 2025-11-26T06:34:09.752Z
Learning: In workspaces/bi/bi-extension/src/test/e2e-playwright-tests/data-mapper/DataMapperUtils.ts, the goPrevViewBreadcrumb() method is only called when in a focused view, ensuring breadcrumbs are always present. No guard for empty breadcrumbs is needed.

Applied to files:

• workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx

🧬 Code graph analysis (1)

workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx (1)

workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ActionIconButton.tsx (1)

• ActionIconButton (28-48)

🔇 Additional comments (1)

workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx (1)

76-80: LGTM — Codicon icon name verified.

The Refresh button implementation is correct. Web search confirms that "refresh" is a valid VSCode Codicon icon name (used as $(refresh) or codicon-refresh). The implementation properly follows the same pattern as the existing Clear button and passes all required props to ActionIconButton.