Repository navigation
[Customer Portal][FE][Web] Improve Update Details Rendering with Safe HTML Handling and Dark Mode Support - #698
Merged
cloby99 merged 10 commits intoMay 15, 2026
Conversation
Add HTML-aware parsing and rendering for description fields in updateLevelsReportPdf. Introduces stripHtmlTags (decodes common entities) and htmlToBlocks (uses DOMParser to produce paragraph-level blocks with bold/italic runs and list handling). Replace the old simple renderField with renderHtmlField that lays out styled runs, preserves bullets and line breaks, and performs manual word-wrap for PDF output. Also call stripHtmlTags in parseDescriptionSections and update all field render calls to use the new HTML-aware renderer.
Increase horizontal padding (px: 1) and add a negative left margin (ml: -1) on the ListPageHeader control to preserve visual alignment while providing consistent touch/click padding. This tweaks spacing to better align the header element with surrounding content.
Sanitize and correctly render HTML/plain text in update descriptions and related fields. Adds DOMPurify, HtmlOrText helper, entity decoding, HTML detection regex, and shared styling (HTML_CONTENT_SX). Integrates useDarkMode and stripLightModeInlineStyles to handle dark-mode inline styles. Refactors UpdateDescriptionItem to use HtmlOrText and bug-fix parsing, removes parseDescriptionSections usage, and renders entry.description, instructions, and advisory overviews via HtmlOrText. Also adjusts layout/styles for instructions and security advisories and passes isDark flag where needed.
Add safe HTML handling for update/advisory sections: introduce DOMPurify-based sanitization, HTML detection, entity decoding and newline-to-<br> conversion for plain text. Add HTML_CONTENT_SX styling and decodeEntities helper; stripLightModeInlineStyles is applied when dark mode is active (useDarkMode hook). Update UpdateSection to choose sanitized HTML vs escaped text and pass isDark from UpdateDetailCard to all section usages. Adjust advisory layout spacing for Overview/Description and ensure rendered content is safe and styled consistently.
Detect and render URLs inside text segments when generating the Update Levels report PDF. Added a URL regex and logic to split segment text into URL and non-URL parts, render URLs in blue with an underline and clickable link area, and keep non-URL text in the original gray color. Also reset regex state between uses and restore draw color after underlining. Increased vertical spacing (y offset) slightly to improve layout.
Update default sx prop for CaseDetailsBackButton: change left margin from ml: -0.5 to ml: -1 and add px: 1. This tweaks the button's horizontal spacing and adds horizontal padding to improve alignment and the touch/click target.
Contributor
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughBack button styling is aligned across the customer portal. Update descriptions, instructions, and security advisory content are refactored to detect and render HTML markup with DOMPurify sanitization, entity decoding, and dark-mode-aware inline style stripping in modal, page details, and PDF export views. ChangesButton styling alignment
HTML content rendering for updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
dileepapeiris
added
Type/Improvement
dileepapeiris
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
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/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx`:
- Around line 31-88: Extract the duplicated HTML-vs-text rendering into a shared
component module: create a new features/updates/components/HtmlOrText.tsx that
exports HtmlOrText plus HTML_FORMAT_RE, decodeEntities, and HTML_CONTENT_SX;
move the implementation from UpdateLevelsReportModal.tsx (the HtmlOrText
function and helpers) into that module and replace the local definitions with
imports; update UpdateLevelsReportModal (where HtmlOrText is used) and
UpdateLevelDetailsPage.tsx (replace its UpdateSection/UpdateDescriptionItem
usage) to import and reuse HtmlOrText and the constants, ensuring the dark-mode
stripping (stripLightModeInlineStyles) and DOMPurify usage remain unchanged and
props/signature match the original HtmlOrText.
In
`@apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts`:
- Around line 132-147: stripHtmlTags currently removes all tags and collapses
all consecutive whitespace which removes paragraph/newline boundaries and breaks
parseDescriptionSections; update stripHtmlTags to replace common block-level
tags (e.g., </p>, <p>, <div>, </div>, <br>, <li>, </h[1-6]>, </h[1-6]>) with a
newline before stripping remaining tags, then decode entities as before but
change the whitespace normalization to only collapse runs of spaces/tabs (e.g.,
/[ \t]{2,}/g) and limit excessive newlines (e.g., replace /\n{3,}/g with '\n\n')
so section-label regexes in parseDescriptionSections can still match on line
starts.
🪄 Autofix (Beta)
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
Run ID: 539d863d-4e7a-46c7-9f18-d0e1e34a7096
📒 Files selected for processing (5)
apps/customer-portal/webapp/src/components/list-view/ListPageHeader.tsxapps/customer-portal/webapp/src/features/support/components/case-details/header/CaseDetailsBackButton.tsxapps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsxapps/customer-portal/webapp/src/features/updates/pages/UpdateLevelDetailsPage.tsxapps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
Refactor UpdateLevelsReportModal by moving the HtmlOrText rendering logic and related helpers into a dedicated module. Removed the local DOMPurify import, HTML_FORMAT_RE, decodeEntities, HTML_CONTENT_SX, and stripLightModeInlineStyles usage and now import HtmlOrText from @features/updates/components/HtmlOrText. This simplifies the modal file and centralizes HTML/text rendering for reuse and easier maintenance; behavior should remain unchanged.
Introduce HtmlOrText.tsx: a new component to render strings that may contain HTML or plain text. It detects real HTML tags (HTML_FORMAT_RE), sanitizes markup with DOMPurify (optionally stripping light-mode inline styles for dark mode), and decodes/plain-escapes entities and newlines for plain text. Also adds helper decodeEntities and shared styling (HTML_CONTENT_SX) and uses Box from @wso2/oxygen-ui.
When converting HTML to plain text for PDFs, replace closing block-level tags and <br> with newlines so section boundaries are preserved for downstream parsers (e.g. newline-anchored regexes). Also tighten whitespace normalization: collapse only consecutive spaces/tabs (not newlines) and reduce runs of 3+ newlines to two, keeping paragraph separation intact while still trimming extraneous whitespace and decoding HTML entities.
Replace the inline HTML/text parsing and sanitization logic in UpdateLevelDetailsPage's UpdateSection with the shared HtmlOrText component. Removed DOMPurify usage, the HTML detection regex, decodeEntities helper, HTML_CONTENT_SX styles, and the stripLightModeInlineStyles handling; updated imports accordingly to centralize HTML/text rendering and sanitization.
cloby99
approved these changes
May 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This pull request significantly improves how update descriptions, instructions, and security advisories are rendered in the customer portal, especially with regard to HTML content and dark mode support. The main changes ensure that any real HTML markup in these fields is sanitized and rendered safely, while plain text (including text with HTML entities) is displayed correctly with preserved formatting. Additionally, the UI for descriptions and advisories is streamlined, and dark mode compatibility is enhanced.
Rendering and Content Handling Improvements:
HtmlOrTextand updatedUpdateSectionto detect and safely render real HTML tags usingDOMPurify, while decoding and formatting plain text and HTML entities for correct display. This prevents issues with XML/config-like tags and ensures consistent formatting. (UpdateLevelsReportModal.tsx,UpdateLevelDetailsPage.tsx) [1] [2]stripLightModeInlineStylesutility anduseDarkModehook. (UpdateLevelsReportModal.tsx,UpdateLevelDetailsPage.tsx) [1] [2] [3]UI and Layout Enhancements:
UpdateLevelsReportModal.tsx,UpdateLevelDetailsPage.tsx) [1] [2] [3]ListPageHeader.tsx,CaseDetailsBackButton.tsx) [1] [2]Code Simplification and Safety:
parseDescriptionSectionsin favor of direct rendering, and improved the logic for displaying non-empty instructions and descriptions. (UpdateLevelsReportModal.tsx,updateLevelsReportPdf.ts) [1] [2]UpdateLevelsReportModal.tsx,UpdateLevelDetailsPage.tsx) [1] [2] [3]These changes together make the update details UI more robust, secure, and visually consistent, especially when handling mixed content and different display modes.
Summary by CodeRabbit
Bug Fixes
Style