[Customer Portal MicroApp] Show empty state for outstanding pie chart …

[2003dinijay]

Purpose

▎ The "Outstanding Support Cases", "Outstanding Operations", and "Outstanding Engagements" pie chart widgets on the Customer Portal Home page showed a dashed-circle outline with a literal "0" in the center when there was no data, instead of a proper empty state. This looked like a broken/loading UI element rather than an intentional "nothing here" state.

Goals

▎ Replace the dashed-circle-with-zero placeholder with a clear, recognizable empty state (icon + message) so users can immediately tell there's genuinely no outstanding data, rather than mistaking it for a loading or broken state.

Approach

▎ Updated PieChartWidget.tsx so that when a widget's data total is 0, it renders an empty state instead of the pie chart: a small circle with a muted background containing an inbox icon, with a "No {title} found" caption below it (e.g. "No Outstanding Support Cases found"). The center total overlay ("0") is also suppressed in this case, and the legend list below the chart is hidden instead of rendering empty. This mirrors the empty-state treatment already used for equivalent dashboard charts elsewhere in Customer Portal, so the same "no data" pattern is used consistently.
▎

User stories

▎ As a customer portal user with no outstanding support cases, operations, or engagements, I want the dashboard to clearly indicate there's nothing outstanding, instead of showing an ambiguous dashed circle with "0".

Release note

▎ Fixed the Home page dashboard so outstanding-item pie charts show a proper empty state instead of a dashed circle with "0" when there is no data.

Summary by CodeRabbit

• New Features

  • Updated the dashboard pie chart empty state with a clearer icon-and-message design when no data is available.
  • Added support for allowing specific scripts for selected dependencies used by the customer portal.

• Bug Fixes

  • Prevented the chart total from appearing while data is still loading.
  • Improved row layout handling in the chart list for more consistent display and interaction.

[coderabbitai]

Warning

Review limit reached

@2003dinijay, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 53 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: caaada48-58ea-44dc-8d6d-ba6db50c50de

📥 Commits

Reviewing files that changed from the base of the PR and between 948a16e and dbfe998.

📒 Files selected for processing (1)

• apps/customer-portal/microapp/package.json

📝 Walkthrough

Walkthrough

Adds an allowScripts configuration block to package.json whitelisting four dependency versions, and updates PieChartWidget.tsx to change the empty-state UI (icon + message), tighten the total overlay rendering condition to also check !loading, and fix a styling property from direction to flexDirection.

Changes

PieChartWidget UI Updates

Layer / File(s)	Summary
Empty-state UI and imports apps/customer-portal/microapp/src/components/features/dashboard/PieChartWidget.tsx	Adds an inbox icon import and replaces the dashed-circle empty-state placeholder with a centered icon and "No {title} found" message.
Total overlay guard and row layout fixes apps/customer-portal/microapp/src/components/features/dashboard/PieChartWidget.tsx	Restricts the total overlay to render only when !loading && !isEmpty, and corrects CardActionArea styling from direction to flexDirection.

Package Script Allowlist

Layer / File(s)	Summary
allowScripts configuration apps/customer-portal/microapp/package.json	Adds an allowScripts block whitelisting canvas@3.2.3, core-js@3.49.0, esbuild@0.25.12, and fsevents@2.3.3.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• wso2-open-operations/cs-tools#609: Both PRs modify PieChartWidget.tsx's handling of empty/loading state and the total overlay rendering condition.

Suggested reviewers: shayanmalinda

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers purpose, goals, approach, user stories, and release note, but omits many template sections like docs, tests, security, and environment.	Add the missing template sections, especially documentation, automation/security checks, test environment, related PRs, and any applicable migration or learning details.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding an empty state for outstanding pie chart widgets.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

[Copilot]

Pull request overview

This PR improves the Customer Portal Home dashboard pie-chart widgets by replacing the “dashed circle with 0” appearance with a clearer empty state when there is no outstanding data, and by suppressing chart-adjacent UI elements that don’t make sense in the empty case.

Changes:

• Render an explicit empty state (icon + “No {title} found”) when the pie chart’s total is 0, instead of rendering an empty chart.
• Hide the center total overlay and the legend list when the widget is empty (and suppress the center overlay while loading).
• Add an allowScripts block to the microapp package.json.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
apps/customer-portal/microapp/src/components/features/dashboard/PieChartWidget.tsx	Adds an empty-state UI for zero-total pie widgets and suppresses overlay/legend in empty/loading states.
apps/customer-portal/microapp/package.json	Adds an allowScripts allowlist for install scripts.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

🧹 Nitpick comments (1)

apps/customer-portal/microapp/package.json (1)

67-67: 🔒 Security & Privacy | 🔵 Trivial | ⚡ Quick win

Deny core-js@3.49.0 in allowScripts unless its postinstall is required.
core-js@3.49.0 has a postinstall hook, so keeping it allowlisted adds install-time code execution without the same build/runtime justification as the other entries.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/customer-portal/microapp/package.json` at line 67, The allowScripts
entry for core-js@3.49.0 should be removed or narrowed because it permits
install-time script execution without a clear justification. Update the
allowlist in package.json so core-js@3.49.0 is denied by default, and only keep
it if the postinstall hook is explicitly required and documented alongside the
existing allowScripts entries.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/customer-portal/microapp/package.json`:
- Line 67: The allowScripts entry for core-js@3.49.0 should be removed or
narrowed because it permits install-time script execution without a clear
justification. Update the allowlist in package.json so core-js@3.49.0 is denied
by default, and only keep it if the postinstall hook is explicitly required and
documented alongside the existing allowScripts entries.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5ea4fb95-7012-481f-af0a-5bef9479e601

📥 Commits

Reviewing files that changed from the base of the PR and between aafebf8 and 948a16e.

📒 Files selected for processing (2)

• apps/customer-portal/microapp/package.json
• apps/customer-portal/microapp/src/components/features/dashboard/PieChartWidget.tsx