Repository navigation
[Customer Portal][FE][Web] Enhance Dashboard Cases Table and Add Configurable Sorting for Change Requests - #726
Merged
Rashmika998 merged 5 commits intoMay 25, 2026
Conversation
Add sortField and sortOrder parameters to buildChangeRequestSearchRequest (defaulting to ChangeRequestSortField.UpdatedOn and SortOrder.DESC). Update JSDoc and use the new params in the request's sortBy field so callers can control sorting while preserving previous default behavior.
Introduce sort field and order state to ChangeRequestsPage (session-persisted) and pass them into the search request. Import SortOrder and ChangeRequestSortField, add CHANGE_REQUESTS_SORT_FIELD_OPTIONS, and wire handlers to update sort field/order and reset pagination. Update the list UI props to expose sort options and callbacks. Add/adjust tests to assert default sort (updatedOn desc) and a new test for applying custom sort field and order.
Introduce formatCasesTableCaseIdentifier to build a display string for portal case numbers and WSO2 internal IDs (returns values like "ID: CS-001 | INT-1" and falls back to "ID: --" when missing). Also import ChangeRequestSortField and add ChangeRequestSortFieldOption plus CHANGE_REQUESTS_SORT_FIELD_OPTIONS (UpdatedOn, CreatedOn) to support sorting change requests in the UI.
Import formatCasesTableCaseIdentifier and add unit tests covering its behavior: number + internal id (uses "ID: <number> | <internal>"), missing internal id (returns "ID: <number>"), missing number (returns "ID: <internal>"), and both missing (returns "ID: --"). Ensures the formatter produces the expected prefix, separator, and placeholder.
Use formatCasesTableCaseIdentifier(row.number, row.internalId) instead of rendering `ID: {row.number}` to display the combined case identifier. Added the utility import and updated the unit test fixture to include internalId and assert the combined label (e.g. `ID: CS-001 | INT-001`). This ensures internal IDs are surfaced in the cases table UI and tests reflect the new output.
dileepapeiris
changed the title
Contributor
📝 WalkthroughWalkthroughThis PR adds case identifier formatting to the dashboard and introduces parameterized sorting to change request search. The case identifier utility combines case number and internal ID fields into a formatted string, while change request sorting is implemented through utility function parameters, page-level state persistence, and UI controls. ChangesCase Identifier Formatting and Change Request Sorting
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/customer-portal/webapp/src/features/dashboard/utils/__tests__/casesTable.test.ts (1)
63-87: ⚡ Quick winCover
nulland whitespace-only inputs in formatter tests.The formatter accepts
nulland trims input; adding these assertions will lock that contract and prevent regressions.✅ Suggested test additions
describe("formatCasesTableCaseIdentifier", () => { @@ it("should return ID placeholder when both are missing", () => { expect(formatCasesTableCaseIdentifier(undefined, undefined)).toBe( "ID: --", ); }); + + it("should treat null values as missing", () => { + expect(formatCasesTableCaseIdentifier(null, null)).toBe("ID: --"); + }); + + it("should trim whitespace-only values to placeholder", () => { + expect(formatCasesTableCaseIdentifier(" ", " ")).toBe("ID: --"); + }); });🤖 Prompt for 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. In `@apps/customer-portal/webapp/src/features/dashboard/utils/__tests__/casesTable.test.ts` around lines 63 - 87, Add tests covering null and whitespace-only inputs for formatCasesTableCaseIdentifier: assert that null is treated like undefined (e.g., formatCasesTableCaseIdentifier(null, "INT-1") => "ID: INT-1" and formatCasesTableCaseIdentifier(null, null) => "ID: --"), and that values with only whitespace are trimmed and treated as missing (e.g., formatCasesTableCaseIdentifier(" ", " INT-1 ") => "ID: INT-1" and formatCasesTableCaseIdentifier("CS-001", " ") => "ID: CS-001"). Use the existing describe/it structure in casesTable.test.ts and reference the formatCasesTableCaseIdentifier function name so these assertions lock the contract.
🤖 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.
Nitpick comments:
In
`@apps/customer-portal/webapp/src/features/dashboard/utils/__tests__/casesTable.test.ts`:
- Around line 63-87: Add tests covering null and whitespace-only inputs for
formatCasesTableCaseIdentifier: assert that null is treated like undefined
(e.g., formatCasesTableCaseIdentifier(null, "INT-1") => "ID: INT-1" and
formatCasesTableCaseIdentifier(null, null) => "ID: --"), and that values with
only whitespace are trimmed and treated as missing (e.g.,
formatCasesTableCaseIdentifier(" ", " INT-1 ") => "ID: INT-1" and
formatCasesTableCaseIdentifier("CS-001", " ") => "ID: CS-001"). Use the
existing describe/it structure in casesTable.test.ts and reference the
formatCasesTableCaseIdentifier function name so these assertions lock the
contract.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c08e9806-c771-4c8c-aca6-f9b400c28c94
📒 Files selected for processing (8)
apps/customer-portal/webapp/src/features/dashboard/components/cases-table/CasesList.tsxapps/customer-portal/webapp/src/features/dashboard/components/cases-table/__tests__/CasesList.test.tsxapps/customer-portal/webapp/src/features/dashboard/utils/__tests__/casesTable.test.tsapps/customer-portal/webapp/src/features/dashboard/utils/casesTable.tsapps/customer-portal/webapp/src/features/operations/constants/operationsConstants.tsapps/customer-portal/webapp/src/features/operations/pages/ChangeRequestsPage.tsxapps/customer-portal/webapp/src/features/operations/utils/__tests__/operationsPages.test.tsapps/customer-portal/webapp/src/features/operations/utils/operationsPages.ts
Rashmika998
approved these changes
May 25, 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 introduces improvements to the dashboard cases table and adds configurable sorting to the change requests list in the operations section. The main changes include a new utility for formatting case identifiers, updates to display logic and tests, and the implementation of user-selectable sorting for change requests.
Dashboard Cases Table Improvements:
formatCasesTableCaseIdentifier, which formats the display of case numbers and internal IDs in the cases table. This ensures consistent and clear identification, even when one or both values are missing. The cases list component and its tests have been updated to use this function. [1] [2] [3] [4] [5] [6] [7]Change Requests List Sorting:
Summary by CodeRabbit