Skip to content

[Customer Portal][FE][Web] Enhance Update Levels Report Parsing, Bug Fix Display, and PDF Download Experience - #621

Merged
chanukaranaba merged 5 commits into
wso2-open-operations:mainfrom
dileepapeiris:feat-bug-fix-17
Apr 26, 2026
Merged

chanukaranaba merged 5 commits into
wso2-open-operations:mainfrom
dileepapeiris:feat-bug-fix-17

Conversation

@dileepapeiris

@dileepapeiris dileepapeiris commented Apr 26, 2026 •

Copy link
Copy Markdown
Contributor

Description

This pull request enhances the UpdateLevelsReportModal in the customer portal by improving how update descriptions and bug fixes are parsed and displayed, both in the UI and in generated PDF reports. The changes introduce structured parsing of description fields, better handling and display of bug fix URLs, and a more user-friendly download experience.

Improvements to parsing and displaying update details:

  • Added parseDescriptionSections and parseBugFixes utilities to extract and structure description sections (General Description, Implementation Details, Impact) and to robustly parse bug fix URLs from both JSON arrays and plain strings.
  • Updated the modal and PDF generation to use these utilities, displaying each section separately and rendering bug fix URLs as clickable links. [1] [2] [3] [4]

User experience improvements:

  • Added a download state indicator to the "Download PDF" button, showing a spinner and disabling the button while the PDF is being generated. [1] [2]

Code maintenance:

  • Cleaned up unused variables and improved imports in affected files. [1] [2] [3]

Summary by CodeRabbit

  • New Features
    • PDF downloads now display a loading indicator with "Downloading..." message while generating files.
    • Update descriptions are now organized into structured sections (General Description, Implementation Details, Impact).
    • Bug fixes are now displayed as clickable external links.

Add parsing utilities for update descriptions and bug fixes (parseDescriptionSections, parseBugFixes) and use them in both the modal UI and PDF generator. The modal now renders structured sections (General Description, Implementation Details, Impact), formats bug-fix URLs as links, and preserves instructions/security advisories layout. PDF generation was updated to consume the parsed sections and bug-fix list. Also add a download state with a CircularProgress icon and disabled Download button while the PDF is being generated.
Only destructure the setUrlParams setter from useSearchParams in AllUpdatesTab.tsx (replacing `const [urlParams, setUrlParams]` with `const [, setUrlParams]`). This removes an unused variable and avoids linter warnings, clarifying that only the setter is needed.
@coderabbitai

coderabbitai Bot commented Apr 26, 2026 •

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@dileepapeiris has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 41 minutes and 21 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 41 minutes and 21 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 59bfd862-0e48-4f10-ae89-3d24186eb1da

📥 Commits

Reviewing files that changed from the base of the PR and between b1c57ed and 90a9e28.

📒 Files selected for processing (2)
  • apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
  • apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
📝 Walkthrough

Walkthrough

The pull request refactors update description rendering in the customer portal by introducing structured parsing of description sections and bug fixes, removes an unused variable in search parameter handling, and adds loading state feedback during PDF generation.

Changes

Cohort / File(s) Summary
Search Parameters Cleanup
apps/customer-portal/webapp/src/features/updates/components/all-updates/AllUpdatesTab.tsx
Removed unused urlParams variable from useSearchParams() destructuring, retaining only the setter function.
Update Description Parsing & PDF Enhancement
apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx, apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
Implemented structured parsing of update descriptions into General Description, Implementation Details, and Impact sections. Refactored bug fixes rendering to use parsed URLs. Added isDownloading state to modal with spinner and disabled button during PDF generation. Introduced exported parseDescriptionSections() and parseBugFixes() utility functions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

Type/Improvement, Type/UX, App/Customer Portal, Area/Frontend, Platform/Web

Suggested reviewers

  • Rashmika998
  • cloby99

Poem

🐰 Hop hop, the updates now parse so clean,
With sections structured, detailed, and keen,
Bug fixes as links, no more tangled text,
And spinners that twirl while PDFs get flexed! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 55.56% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check ❓ Inconclusive The description covers key improvements (parsing utilities, structured sections, bug fix URLs, download UX, and code cleanup) with references to specific changes, but lacks several template sections (Purpose/Resolves, Goals, User Stories, Release Notes, Documentation, Training, Certification, Marketing, Tests, Security, Samples, Migrations, Learning). Add Purpose section with issue references, Release Notes summary, and at minimum indicate N/A for non-applicable sections (Documentation, Training, Certification, Marketing) with brief explanations of why.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and comprehensively summarizes the main changes: enhancing parsing of update levels reports, improving bug fix display, and improving the PDF download experience with a loading indicator.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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

Comment @coderabbitai help to get the list of available commands and usage tips.

@dileepapeiris dileepapeiris changed the title Feat bug fix 17 [Customer Portal][FE][Web] Enhance Update Levels Report Parsing, Bug Fix Display, and PDF Download Experience Apr 26, 2026
@dileepapeiris dileepapeiris self-assigned this Apr 26, 2026
@dileepapeiris dileepapeiris added Type/New Feature Represents a request or task for a new feature Type/Improvement Marks enhancements or improvements to existing features Type/UX Refers to user experience-related tasks or issues App/Customer Portal Area/Frontend Platform/Web labels Apr 26, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts (2)

75-75: Nit: redundant [Dd] under the i flag.

The case-insensitive flag already matches D and d, so [Dd]etails? simplifies to [Dd]etails? → Details?. Functionally equivalent; kept for consistency only if intentional.

♻️ Proposed simplification
-  const headerRe = /(?:^|\n)\s*(General\s+Description|Implementation\s+[Dd]etails?|Impact)\s*:/gi;
+  const headerRe = /(?:^|\n)\s*(General\s+Description|Implementation\s+Details?|Impact)\s*:/gi;
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts`
at line 75, The regex assigned to headerRe redundantly uses a character class
`[Dd]` despite the /i flag; update the pattern used in headerRe (const headerRe)
to replace `Implementation\s+[Dd]etails?` with `Implementation\s+Details?` so
the case-insensitive flag handles casing, keeping the rest of the regex
unchanged.

107-121: Consider filtering to safe http(s) URLs in parseBugFixes.

UpdateLevelsReportModal.tsx passes these strings straight into <a href={url}> without scheme validation (see related comment on that file). Filtering here would harden every consumer at the source — including the PDF where bugFixUrls.join("\n") could otherwise display javascript:/data: strings as if they were proper URLs.

♻️ Proposed change
 export function parseBugFixes(raw: string | null | undefined): string[] {
   if (!raw?.trim()) return [];
+  const isSafe = (s: string): boolean => {
+    try {
+      const { protocol } = new URL(s);
+      return protocol === "http:" || protocol === "https:";
+    } catch {
+      return false;
+    }
+  };
   try {
     const parsed = JSON.parse(raw);
     if (Array.isArray(parsed)) {
       return parsed
         .map((item) => String(item).trim())
-        .filter((item) => item && item.toLowerCase() !== "n/a");
+        .filter((item) => item && item.toLowerCase() !== "n/a" && isSafe(item));
     }
   } catch {
     // not JSON
   }
   const t = raw.trim();
-  return t && t.toLowerCase() !== "n/a" ? [t] : [];
+  return t && t.toLowerCase() !== "n/a" && isSafe(t) ? [t] : [];
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts`
around lines 107 - 121, The parseBugFixes function should exclude non-http(s)
schemes to prevent unsafe links; update parseBugFixes to, after parsing and
trimming items (and for the single-string fallback), validate each candidate by
constructing a URL (or otherwise parsing) and only return items whose protocol
is "http:" or "https:" and are non-empty and not "n/a". Apply this filtering
both in the Array.isArray(parsed) branch (filter the mapped items) and in the
single-value fallback before returning [t], referencing the parseBugFixes
function name so consumers like UpdateLevelsReportModal.tsx/PDFs receive only
safe http(s) URLs.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx`:
- Around line 89-96: The handler handleDownloadPdf currently sets isDownloading
true then calls generateUpdateLevelsReportPdf inside a setTimeout but never
resets isDownloading if that call throws; wrap the generateUpdateLevelsReportPdf
invocation inside a try/finally (inside the existing setTimeout callback) so
setIsDownloading(false) always runs, keeping the early return when !reportData
and preserving the setIsDownloading(true) timing and useCallback signature;
reference handleDownloadPdf, generateUpdateLevelsReportPdf, setIsDownloading and
useCallback when making the change.
- Around line 61-71: The bug-fix URLs are rendered directly from bugFixUrls
(produced by parseBugFixes) and can contain unsafe schemes like "javascript:";
update the rendering in UpdateLevelsReportModal to validate each url's scheme
(only allow http:// or https://) before rendering an <a> tag: if the scheme is
invalid, render the URL as plain text or skip it. Apply the same guard to the
Update Details rendering where bugFixUrls are used (the block at lines
~353-357). Preferably, also add this scheme check inside parseBugFixes so both
call sites get sanitized URLs by default (use a clear helper name like
isSafeHttpUrl when locating the code).

---

Nitpick comments:
In
`@apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts`:
- Line 75: The regex assigned to headerRe redundantly uses a character class
`[Dd]` despite the /i flag; update the pattern used in headerRe (const headerRe)
to replace `Implementation\s+[Dd]etails?` with `Implementation\s+Details?` so
the case-insensitive flag handles casing, keeping the rest of the regex
unchanged.
- Around line 107-121: The parseBugFixes function should exclude non-http(s)
schemes to prevent unsafe links; update parseBugFixes to, after parsing and
trimming items (and for the single-string fallback), validate each candidate by
constructing a URL (or otherwise parsing) and only return items whose protocol
is "http:" or "https:" and are non-empty and not "n/a". Apply this filtering
both in the Array.isArray(parsed) branch (filter the mapped items) and in the
single-value fallback before returning [t], referencing the parseBugFixes
function name so consumers like UpdateLevelsReportModal.tsx/PDFs receive only
safe http(s) URLs.
🪄 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: 2435d30a-fde3-4e65-80fd-095eb39117c2

📥 Commits

Reviewing files that changed from the base of the PR and between 2705113 and b1c57ed.

📒 Files selected for processing (3)
  • apps/customer-portal/webapp/src/features/updates/components/all-updates/AllUpdatesTab.tsx
  • apps/customer-portal/webapp/src/features/updates/components/all-updates/UpdateLevelsReportModal.tsx
  • apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts

Add URL safety checks and improve error handling for update-levels report generation. Introduces isSafeHttpUrl() and updates parseBugFixes to only include http(s) links, and tweaks description header regex. In the UI, unsafe URLs are no longer rendered as <a> anchors (shown as plain text instead), and the PDF generation call is wrapped in a try/finally so the downloading state is always cleared. Changes span the report PDF util and the UpdateLevelsReportModal component to prevent unsafe schemes and ensure the spinner is reset on errors.
@chanukaranaba
chanukaranaba merged commit 999af7e into wso2-open-operations:main Apr 26, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

App/Customer Portal Area/Frontend Platform/Web Type/Improvement Marks enhancements or improvements to existing features Type/New Feature Represents a request or task for a new feature Type/UX Refers to user experience-related tasks or issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants