[CSM Portal] fix cases list: state chips, alignment, pagination, severity mapping

[Rashmika998]

Summary

• State chips: SemanticChip now uses MUI's color prop instead of a manual bgcolor sx override; the override was silently broken in CSS-variables themes (Oxygen UI) where theme.palette.info.main returns a CSS variable reference, not a hex. The default role switches from variant="outlined" (looked like a button) to filled grey.
• Column alignment / Subject truncation: Removed justifyItems: "start" from row subgrids — it was forcing the Subject Box to take its intrinsic (fully unwrapped) width, causing overflow into the Product column. Chips are individually wrapped in Box sx={{ justifySelf: "start" }} so only they opt out of stretch. Added explicit textAlign: "left" to header labels.
• Pagination Next button: Added data !== undefined guard to the page-clamp logic. Without it, clicking Next set page = 1, React Query started loading (data → undefined), total fell to 0, and lastPage clamped the page straight back to 0 — the API call for page 1 never completed. Also derives paginationCount from hasMore so Next stays enabled when the backend signals more results.
• Severity mapping: severityFromPriority now accepts string | undefined and matches the backend's display-string format ("Critical (P1)", "Low (P4)") via case-insensitive P-notation substring, keeping legacy English-name fallbacks. BeCaseSearchView.severity and BeCaseView.severity widened to string to reflect the actual API contract.

Test plan

• Cases list renders state chips as coloured pills (blue for WIP, amber for Waiting on WSO2, grey for others) — not as button-like outlines
• Subject text truncates with … when longer than the column; no overflow into Product
• All column headers are left-aligned
• Clicking Next in the pagination table fetches the next page from the backend (POST /cases/search with incremented offset)
• Severity chips show the correct level (S0–S4) based on the backend value e.g. "Critical (P1)" → S1 chip
• Hard-refresh the browser after deploying to clear React Query cache and verify fresh data renders with correct severity

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Improved case pagination so the page no longer jumps during loading, and Next/Last navigation now matches whether more results are available.
  • Case severity values are now handled more flexibly, including legacy labels and display-style values, with a safe fallback when the value is missing or unrecognized.
  • Refined case list alignment and status badge rendering for a cleaner, more consistent display.

[coderabbitai]

Warning

Review limit reached

@Rashmika998, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 47 minutes and 1 second. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

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 credits.

🚦 How do rate 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 see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4e5e7681-725d-4e74-8f5b-603343603342

📥 Commits

Reviewing files that changed from the base of the PR and between 715024b and dd46923.

📒 Files selected for processing (1)

• apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCasesPage.tsx

📝 Walkthrough

Walkthrough

The PR widens BeCaseView and BeCaseSearchView severity fields from a constrained enum to string, rewrites severityFromPriority to parse P-notation and legacy English names case-insensitively, expands its tests, simplifies SemanticChip by delegating styling to MUI's color prop, fixes chip column alignment in CasesList, and guards the page clamp and unknown-total pagination in CsmCasesPage.

Changes

Severity String Parsing, SemanticChip Simplification, and Pagination Fixes

Layer / File(s)	Summary
Severity type contract and string-based mapper src/api/backend/types.ts, src/api/backend/mappers.ts, src/api/backend/mappers.test.ts	BeCaseView.severity and BeCaseSearchView.severity are widened to string; severityFromPriority is rewritten to parse P-notation (P0–P4) and legacy English names case-insensitively; tests now cover both formats and the unknown/undefined fallback.
SemanticChip: delegate styling to MUI color prop src/components/SemanticChip.tsx	Removes useTheme, manual palette resolution, pickAccessibleText, and outlined fallback; replaces with a single Chip render using color={role} and sx only for bold label weight.
CasesList alignment and CsmCasesPage pagination fixes src/features/csm-cases/components/CasesList.tsx, src/features/csm-cases/pages/CsmCasesPage.tsx	Wraps SeverityChip and StateChip in Box with justifySelf: "start" and adds explicit textAlign: "left" to header labels; guards the page clamp to run only when data is defined; sets TablePagination count to -1 when hasMore is true.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• wso2-open-operations/cs-tools#920: Directly related — the backend contract change from priorityKey/priority to severityKey/severity with display-string format is what drives the types.ts and mappers.ts changes in this PR.
• wso2-open-operations/cs-tools#923: Directly related — modifies the same severityFromPriority function signature and the severity field types in mappers.ts and types.ts.

Suggested labels

Type/Improvement, Area/Frontend, App/CSM Portal

Suggested reviewers

• dilshanfardil
• shayanmalinda

Poem

🐰 A chip once painted by hand with care,
Now trusts MUI to color the square.
Priority strings in all their disguise—
P2 or high, the mapper is wise.
Pages no longer reset in the night,
The rabbit hops on, and the columns align right! 🥕

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description only includes a summary and test plan, missing most required template sections like Purpose, Goals, Approach, and Release note.	Add the missing template sections, especially Purpose, Goals, Approach, User stories, Release note, Documentation, Security checks, and any applicable fields.
Docstring Coverage	⚠️ Warning	Docstring coverage is 40.00% 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 clearly summarizes the main fixes: cases list chips, layout, pagination, and severity mapping.
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

• 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/webapp/src/features/csm-cases/pages/CsmCasesPage.tsx`:
- Line 152: The pagination count in CsmCasesPage is falling back to total during
loading because data is undefined, which makes TablePagination receive an
out-of-range count on page transitions. Update the paginationCount logic so that
undefined data is treated the same as an unknown total (keep count at -1) until
real data arrives, using the existing data?.hasMore and total handling in
CsmCasesPage to avoid snapping/disabling Next mid-refetch.

🪄 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: d6b559ce-a06c-4096-9489-c3747efc6810

📥 Commits

Reviewing files that changed from the base of the PR and between f115571 and 715024b.

📒 Files selected for processing (6)

• apps/csm-portal/webapp/src/api/backend/mappers.test.ts
• apps/csm-portal/webapp/src/api/backend/mappers.ts
• apps/csm-portal/webapp/src/api/backend/types.ts
• apps/csm-portal/webapp/src/components/SemanticChip.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CasesList.tsx
• apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCasesPage.tsx