feat(csm-portal-microapp): resolve inline .iix images in comments and update descriptions

[2003dinijay]

Summary

• Comment/description HTML embeds inline images as auth-gated .iix sysid references (ServiceNow convention), not directly loadable URLs. Nothing resolved these, so inline images silently never rendered in CommentBody.tsx (case comments/activity feed) or UpdatesPage.tsx (update descriptions, security advisory overviews) — both just dumped the raw sanitized HTML via dangerouslySetInnerHTML.
• The webapp already solved this exact problem against the same csm-portal backend (features/csm-cases/utils/inlineImages.ts + api/useResolvedInlineImageHtml.ts): extract each .iix reference's 32-char sysid, convert it to the canonical UUID shape /attachments/{id}/content expects, fetch it as an authenticated Blob, verify it's actually a safe image subtype, and splice the resulting data: URL back into the HTML string via regex replacement — rather than post-render DOM mutation, which doesn't interact cleanly with dangerouslySetInnerHTML's own reconciliation.
• Ported that implementation here (utils/inlineImages.ts, utils/useResolvedInlineImageHtml.ts), adapted to the microapp's axios-based Blob fetch (new attachments.getContentById) instead of the webapp's api.getBlob.

Test plan

• npx tsc --noEmit
• npx eslint .
• npm run build

Summary by CodeRabbit

• New Features

  • Inline images in case comments, updates, and security advisories now display correctly when available.
  • Added loading placeholders while embedded images are being resolved.
  • Improved image rendering so supported inline images appear responsively within content.

• Bug Fixes

  • Sanitized HTML is now rendered after inline image references are processed, helping preserve safe display while improving content appearance.
  • Unresolved inline images no longer remain as broken gated links in rendered content.

[Copilot]

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

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 48 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

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 Plus

Run ID: 0adf61a5-d113-4402-988d-6e3a0827614a

📥 Commits

Reviewing files that changed from the base of the PR and between d958de7 and 4c3e733.

📒 Files selected for processing (2)

• apps/csm-portal/microapp/src/components/case-detail/CommentBody.tsx
• apps/csm-portal/microapp/src/pages/UpdatesPage.tsx

📝 Walkthrough

Walkthrough

Comment and update HTML rendering now resolves authenticated inline .iix images. The implementation adds image-reference utilities, attachment content retrieval, blob validation and conversion, cached resolution, loading skeletons, and resolved HTML injection.

Changes

Inline image rendering

Layer / File(s)	Summary
Image reference processing apps/csm-portal/microapp/src/utils/inlineImages.ts	Extracts and de-duplicates .iix references, converts sysids to UUIDs, and replaces sources with data URLs or unresolved markers.
Authenticated image 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, converts valid blobs to data URLs, and caches resolution results.
HTML rendering integration apps/csm-portal/microapp/src/components/case-detail/CommentBody.tsx, apps/csm-portal/microapp/src/pages/UpdatesPage.tsx	Sanitizes HTML before resolution, displays loading skeletons, injects resolved HTML, and applies responsive image styling to update content.

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

Sequence Diagram(s)

sequenceDiagram
  participant CommentBody
  participant useResolvedInlineImageHtml
  participant attachments
  CommentBody->>useResolvedInlineImageHtml: sanitized HTML
  useResolvedInlineImageHtml->>attachments: getContentById(UUID)
  attachments-->>useResolvedInlineImageHtml: image Blob
  useResolvedInlineImageHtml-->>CommentBody: resolved HTML
  CommentBody->>CommentBody: render resolved HTML

Loading

Possibly related PRs

• wso2-open-operations/cs-tools#1073: Adds the same inline .iix image resolution flow in another CSM Portal application.
• wso2-open-operations/cs-tools#1128: Adds the related UpdatesPage component that this change extends.
• wso2-open-operations/cs-tools#1169: Overlaps with the CommentBody HTML and inline-image rendering changes.

Suggested labels: Area/Frontend

Suggested reviewers: copilot, hesara2003, rashmika998

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and directly summarizes the main change: resolving inline .iix images in comments and update descriptions, matching the changeset's core functionality.
Description check	✅ Passed	The description covers purpose, goals, approach, and test plan. Key required sections from the template (Purpose, Goals, Approach) are present and substantive. Some optional sections (Marketing, Certification, Training, Samples) are not addressed, but the core content is complete.
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.}

[coderabbitai]

Actionable comments posted: 1

🤖 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/components/case-detail/CommentBody.tsx`:
- Around line 57-62: Update HTML detection to recognize img elements in both
apps/csm-portal/microapp/src/components/case-detail/CommentBody.tsx#L57-L62 and
apps/csm-portal/microapp/src/pages/UpdatesPage.tsx#L60-L65 by adding img to each
HTML_FORMAT_RE expression. Preserve the existing sanitization and
useResolvedInlineImageHtml flow so standalone .iix image markup is resolved and
rendered as HTML rather than text.

🪄 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: 0c7f915a-7ae8-4239-b2f2-2c4173797803

📥 Commits

Reviewing files that changed from the base of the PR and between 7a8bfff and d958de7.

📒 Files selected for processing (5)

• apps/csm-portal/microapp/src/components/case-detail/CommentBody.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