Skip to content

[Customer Portal][FE][Web] Enhance Update Level Details UI and PDF Report Generation - #651

Merged
cloby99 merged 3 commits into
wso2-open-operations:mainfrom
dileepapeiris:bug-fix-45
May 4, 2026
Merged

cloby99 merged 3 commits into
wso2-open-operations:mainfrom
dileepapeiris:bug-fix-45

Conversation

@dileepapeiris

@dileepapeiris dileepapeiris commented May 4, 2026 •

Copy link
Copy Markdown
Contributor

Description

This pull request makes several improvements to the update level details feature in the customer portal, focusing on code readability, consistency in UI labeling, and enhancements to PDF report generation. The most notable changes include standardizing file section titles in the UI, refactoring for better code formatting, and adding a comprehensive summary of updated files to the generated PDF reports.

UI Consistency and Code Readability:

  • Standardized the section titles in the update details UI from "Files Modified/Added/Removed" to "Updated Files", "Added Files", and "Removed Files" for clarity and consistency. [1] [2] [3]
  • Improved code formatting for better readability, including multi-line props for components and grouped imports. [1] [2] [3] [4]

PDF Report Generation Enhancements:

  • Added a new parseFileList utility to robustly parse and deduplicate file lists from various formats.
  • Enhanced the PDF report generation to include summary sections for all modified, added, and removed files across update entries, providing a clearer overview in exported reports.

Summary by CodeRabbit

  • New Features

    • PDF reports now include comprehensive file change summaries, displaying aggregated lists of modified, added, and removed files across all updates.
  • Style

    • Updated "Files Modified" section title to "Updated Files" for improved consistency in the UI.

Introduce parseFileList util to parse JSON-encoded or comma-separated file lists into deduplicated, sorted paths (handles stray brackets and empty values). Integrate file summary sections into generateUpdateLevelsReportPdf: aggregate filesModified/filesAdded/filesRemoved from all entries, render "Files Modified/Added/Removed" sections with headings, bullets, spacing and a separator line, and only include these sections when relevant.
Tidy up JSX and imports in UpdateLevelDetailsPage: collapse icon imports to one line, reformat the multi-line type import, and break long JSX props and the error image tag onto multiple lines for readability. Update section headings and comments for clarity (e.g. "Files Modified" -> "Updated Files", and minor label edits). These are non-functional formatting and copy changes to improve code clarity and UI text.
@dileepapeiris dileepapeiris self-assigned this May 4, 2026
@coderabbitai

coderabbitai Bot commented May 4, 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 54 minutes and 56 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ 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: 9511a7bf-5c41-4722-bea1-2f083c3cef72

📥 Commits

Reviewing files that changed from the base of the PR and between 3a049ea and 5e32f11.

📒 Files selected for processing (1)
  • apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
📝 Walkthrough

Walkthrough

The PR updates the updates feature to rename "Files Modified" to "Updated Files" in the UI and adds file list aggregation to PDF reports. A new parseFileList utility function parses file lists from JSON or comma-separated formats, and the PDF generator now aggregates files across report entries and renders them as separate sections with bullet points when present.

Changes

File List Aggregation and PDF Enhancement

Layer / File(s) Summary
Utility Parser
apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
New exported parseFileList(raw) function parses JSON or comma-separated file path strings into deduplicated, trimmed, and sorted arrays.
PDF Generation Logic
apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts
generateUpdateLevelsReportPdf aggregates filesModified, filesAdded, and filesRemoved across all report entries using parseFileList, and renders new FILE SUMMARY SECTIONS in the PDF output when lists are non-empty.
UI Display & Naming
apps/customer-portal/webapp/src/features/updates/pages/UpdateLevelDetailsPage.tsx
Section heading renamed from "Files Modified" to "Updated Files"; import statements and JSX prop layouts reformatted for consistency without functional changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

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

Suggested reviewers

  • cloby99
  • chanukaranaba
  • Rashmika998

Poem

🐰 Files dance across the page so fair,
Parsed, deduplicated with care,
From JSON strings or comma-split,
The PDF now glows with a perfect fit!
Updated titles, aggregated might—
Our reports shine ever so bright! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description covers key improvements and changes but does not follow the repository's template structure with required sections like Purpose, Goals, Approach, User stories, Release note, Documentation, etc. Restructure the description to follow the template with all required sections including Purpose (with issue links), Goals, Approach, User stories, Release note, Documentation, Training, Certification, Marketing, Automation tests, Security checks, and other applicable sections.
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main changes: UI enhancements to Update Level Details and PDF Report Generation improvements, matching the file modifications in the changeset.
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
Review rate limit: 0/1 reviews remaining, refill in 54 minutes and 56 seconds.

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

@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/Task General task that does not fit into other categories Type/UX Refers to user experience-related tasks or issues App/Customer Portal Area/Frontend Platform/Web labels May 4, 2026
@dileepapeiris dileepapeiris changed the title Bug fix 45 [Customer Portal][FE][Web] Enhance Update Level Details UI and PDF Report Generation May 4, 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

🤖 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/utils/updateLevelsReportPdf.ts`:
- Around line 584-586: Update the three renderFileSection calls so the PDF
section labels match the UI wording: change the first call from "Files Modified"
to "Updated Files", keep the second as "Added Files" (instead of "Files Added"),
and the third as "Removed Files" (instead of "Files Removed"); locate the calls
to renderFileSection in updateLevelsReportPdf.ts (the three lines rendering file
sections) and replace the literal label strings accordingly so exported PDFs and
the details page use identical wording.
- Around line 107-124: The parseFileList function currently JSON-parses raw but
only handles arrays, so when JSON.parse(raw) returns a string (e.g., JSON
'"foo.jar"') the code falls through and later splits the original raw including
quotes; update parseFileList to explicitly handle string results from JSON.parse
by checking if typeof parsed === "string" and returning a deduped, stripped,
trimmed, sorted array using the same stripBrackets logic (and Set uniqueness) as
for arrays; keep the existing array handling for Array.isArray(parsed) and the
fallback comma-split behavior for non-JSON inputs.
🪄 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: 7e556598-6c50-42c4-876f-7aa2a37974f2

📥 Commits

Reviewing files that changed from the base of the PR and between d7a6be0 and 3a049ea.

📒 Files selected for processing (2)
  • apps/customer-portal/webapp/src/features/updates/pages/UpdateLevelDetailsPage.tsx
  • apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts

Comment thread apps/customer-portal/webapp/src/features/updates/utils/updateLevelsReportPdf.ts Outdated
Handle cases where parseFileList yields a string by splitting on commas, trimming, deduplicating and sorting entries (after stripping outer brackets). Also rename PDF report file section headings for clarity: "Files Modified" -> "Updated Files", "Files Added" -> "Added Files", and "Files Removed" -> "Removed Files".
@cloby99
cloby99 merged commit b494ae4 into wso2-open-operations:main May 4, 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/Task General task that does not fit into other categories Type/UX Refers to user experience-related tasks or issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants