[CSM Portal Microapp]: dashboard/timesheet accordian (dark mode contrast, donut hover)

[2003dinijay]

Summary

• Expanded TimeSheetCard rows (TimeCardRow) had no visual separation from each other or from the accordion body — only a Stack gap, no border or background fill — so in dark mode the whole expanded card list read as one flat, undifferentiated block. Gives each row a solid divider-colored border, the same pattern already used for AttachmentsTab/CaseActivityFeed/UpdatesPage rows.
• Dashboard donut charts (CompositionDonut.tsx) had tooltip={{ show: true }} — on a touch screen, a tap registers as "hover" first, leaving the tooltip stuck open over the center total (confirmed via screenshot: "Open: 1085" overlapping "1368 / Total") until something else is tapped. This is a mobile-only WebView with no real hover state, and tapping a slice or legend row already navigates directly via onSliceClick. Disabled the tooltip to match customer-portal microapp's PieChartWidget, which does the same.

Test plan

• npx tsc --noEmit
• npx eslint .
• npm run build
• Timesheet row contrast confirmed by user; donut hover-stuck issue confirmed via screenshot before the fix

Summary by CodeRabbit

• New Features
  • Inline images in comments, updates, and security advisories now load securely and display responsively.
  • Loading indicators appear while inline images are being resolved.
• Style
  • Timecard entries now include borders, rounded corners, and improved spacing.
• Bug Fixes
  • Unavailable inline images are handled gracefully without disrupting surrounding content.
  • Donut chart tooltips are hidden while slice navigation remains available.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

Inline image rendering

Layer / File(s)	Summary
Inline image reference parsing apps/csm-portal/microapp/src/utils/inlineImages.ts	Adds .iix reference extraction, sysid-to-UUID conversion, attachment ID discovery, and data URL replacement.
Attachment retrieval and HTML resolution apps/csm-portal/microapp/src/services/attachments.ts, apps/csm-portal/microapp/src/utils/useResolvedInlineImageHtml.ts	Retrieves attachment content as blobs, validates image MIME types, caches query results, and resolves image sources.
Comment and update rendering apps/csm-portal/microapp/src/components/case-detail/CommentBody.tsx, apps/csm-portal/microapp/src/pages/UpdatesPage.tsx	Resolves sanitized HTML before rendering and shows loading skeletons while inline images load. Update images also receive responsive styling.

UI presentation updates

Layer / File(s)	Summary
Chart and timecard presentation apps/csm-portal/microapp/src/components/home/CompositionDonut.tsx, apps/csm-portal/microapp/src/components/timecards/TimeSheetCard.tsx	Disables the donut tooltip and adds bordered, rounded styling to timecard rows.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CommentOrUpdate
  participant useResolvedInlineImageHtml
  participant attachments
  participant AttachmentEndpoint
  CommentOrUpdate->>useResolvedInlineImageHtml: Pass sanitized HTML
  useResolvedInlineImageHtml->>attachments: Request attachment content
  attachments->>AttachmentEndpoint: Fetch Blob by ID
  AttachmentEndpoint-->>attachments: Return image Blob
  attachments-->>useResolvedInlineImageHtml: Return Blob
  useResolvedInlineImageHtml-->>CommentOrUpdate: Render HTML with data URLs

Loading

Possibly related PRs

• wso2-open-operations/cs-tools#1073: Adds related inline-image resolution utilities and hook in another CSM Portal path.
• wso2-open-operations/cs-tools#1169: Also modifies CommentBody.tsx for inline image rendering.
• wso2-open-operations/cs-tools#1374: Overlaps with the same inline-image utilities, hook, components, and attachment service.

Suggested labels: Area/Frontend

Suggested reviewers: rashmika998

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description explains the main changes and test plan but omits most sections required by the repository template.	Add the required Purpose, Goals, Approach, User stories, Release note, Documentation, Security checks, and other applicable template sections.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 85.71% which is sufficient. The required threshold is 80.00%.
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.
Title check	✅ Passed	The title clearly describes the timesheet row styling and donut tooltip changes, although it contains a typo in “accordian.”

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

[coderabbitai]

Actionable comments posted: 2

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

Inline comments:
In `@apps/csm-portal/microapp/src/pages/UpdatesPage.tsx`:
- Around line 60-65: Update the HTML detection in UpdatesPage by adjusting
HTML_FORMAT_RE so standalone img tags are recognized as HTML content. Keep the
existing sanitized/useResolvedInlineImageHtml flow unchanged, but ensure an
image-only update description no longer falls through to the plain-text path and
instead gets sanitized and resolved like other HTML content.

In `@apps/csm-portal/microapp/src/utils/inlineImages.ts`:
- Around line 60-71: Limit inline-image reference processing by updating
extractIixAttachmentIds to dedupe with a Set and stop collecting once the
defined maximum is reached, then update useResolvedInlineImageHtml to build
attachment queries only from that capped ID list. Make the capped list the only
source used for downstream attachment requests, retries, and Blob-to-data-URL
conversion so the existing inline-image resolution flow stays unchanged for the
accepted IDs.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ff4b5f24-53cf-4175-93c6-0936148c4dce

📥 Commits

Reviewing files that changed from the base of the PR and between 6ddf80a and 49ac20e.

📒 Files selected for processing (7)

• apps/csm-portal/microapp/src/components/case-detail/CommentBody.tsx
• apps/csm-portal/microapp/src/components/home/CompositionDonut.tsx
• apps/csm-portal/microapp/src/components/timecards/TimeSheetCard.tsx
• apps/csm-portal/microapp/src/pages/UpdatesPage.tsx
• apps/csm-portal/microapp/src/services/attachments.ts
• apps/csm-portal/microapp/src/utils/inlineImages.ts
• apps/csm-portal/microapp/src/utils/useResolvedInlineImageHtml.ts