[CSM][Web] Improve Operations tables, Service Request severity, and Call Requests UX

[Rashmika998]

Summary

• Show skeleton rows during pagination on Incidents and Problem Management (previously only a faint progress bar), matching the Change Requests table.
• Add a "Showing X-Y of Z" pagination label to Change Requests, Incidents, and Problem Management tables.
• Hide the Severity column/field for Service Requests, which don't carry a severity.
• Fix the case-composition donut chart tooltips rendering with a transparent background, matching customer-portal's dashboard charts.
• Redesign Call Requests as a compact table instead of stacked cards, with a detail modal (eye icon in Actions) showing the full untruncated reason/notes, and fix a grid sizing bug that left unused width in each row.

Test plan

• tsc --noEmit passes
• ESLint clean on changed files
• Paginate Incidents/Problem Management and confirm skeleton rows show during the page-turn
• Confirm Service Request table/detail view no longer shows Severity, while Cases/Engagements/SRA are unaffected
• Hover a case-composition donut chart segment and confirm the tooltip background is opaque
• Open a case's Call Requests tab, confirm the table renders correctly, and verify the eye icon opens the detail modal with full untruncated info

Summary by CodeRabbit

• New Features

  • Added a detailed call request view with status, scheduling, attendees, notes, action items, and meeting links.
  • Added a call requests table with request details, status actions, local time formatting, and read-only support.
  • Added the option to hide severity for service request cases.

• Bug Fixes

  • Improved loading feedback during table refreshes.
  • Ensured dashboard tooltips appear above other content.
  • Updated pagination text to clearly show the displayed range.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds a call-request table and detail modal, hides severity for service-request cases, improves operations-table loading and pagination displays, and raises the composition donut tooltip stacking order.

Changes

Call request table flow

Layer / File(s)	Summary
Call request detail modal apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestDetailModal.tsx	Adds a read-only modal with localized timestamps, conditional request fields, meeting-link handling, and a close action.
Call request table apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestsTable.tsx	Adds request rendering, state-driven actions, localized times, read-only behavior, and detail-modal selection.
Widget table integration apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestsWidget.tsx	Replaces row rendering with CallRequestsTable while preserving existing actions and closed-state handling.

Service-request severity display

Layer / File(s)	Summary
Service-request severity gating apps/csm-portal/webapp/src/features/csm-cases/components/CasesList.tsx, apps/csm-portal/webapp/src/features/csm-cases/components/CsmIssuesView.tsx, apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx	Adds optional severity-column hiding for service-request lists and suppresses the severity chip on service-request detail pages.

Operations table feedback

Layer / File(s)	Summary
Loading and pagination presentation apps/csm-portal/webapp/src/features/csm-operations/components/{IncidentsTab,ProblemsTab,ChangeRequestsTab}.tsx	Uses “Showing {from}–{to} of {count}” pagination labels and displays skeleton rows during initial loads and refetches while removing progress bars.

Dashboard tooltip layering

Layer / File(s)	Summary
Composition tooltip layering apps/csm-portal/webapp/src/features/csm-dashboard/components/CompositionDonut.tsx	Sets the pie-chart tooltip wrapper z-index to 1000.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CallRequestsWidget
  participant CallRequestsTable
  participant CallRequestDetailModal
  CallRequestsWidget->>CallRequestsTable: pass requests, onAction, and isClosed
  CallRequestsTable->>CallRequestDetailModal: open selected request details
  CallRequestDetailModal->>CallRequestsTable: invoke onClose

Loading

Possibly related PRs

• wso2-open-operations/cs-tools#1027: Related call-request timestamp formatting and call-request UI changes.
• wso2-open-operations/cs-tools#943: Overlapping severity-chip and case-list rendering changes.
• wso2-open-operations/cs-tools#1079: Related call-request widget and case-detail UI flow changes.

Suggested labels: Type/Improvement, Type/Bug

Suggested reviewers: rksk

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description only includes Summary and Test plan; it omits most required template sections like Purpose, Goals, Approach, Release note, and Security checks.	Fill in the missing template sections: Purpose, Goals, Approach, User stories, Release note, Documentation, Training, Certification, Security checks, Samples, Related PRs, Migrations, Test environment, and Learning.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.
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.
Title check	✅ Passed	The title is concise and accurately summarizes the main changes around operations tables, service request severity, and call requests UX.

✨ 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/components/CallRequestsTable.tsx`:
- Around line 102-111: Update the table container Box surrounding the GRID-based
CallRequestsTable layout to allow horizontal scrolling instead of clipping
content: replace the hidden overflow behavior with horizontal auto overflow
while preserving the existing grid sizing and styling so the Actions column
remains accessible in narrow panels.

🪄 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 Plus

Run ID: 3c3cf475-1d4f-4aa7-868c-54de0d77a95b

📥 Commits

Reviewing files that changed from the base of the PR and between 0bcf85c and 7ef904d.

📒 Files selected for processing (11)

• apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestDetailModal.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestRow.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestsTable.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestsWidget.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CasesList.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CsmIssuesView.tsx
• apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
• apps/csm-portal/webapp/src/features/csm-dashboard/components/CompositionDonut.tsx
• apps/csm-portal/webapp/src/features/csm-operations/components/ChangeRequestsTab.tsx
• apps/csm-portal/webapp/src/features/csm-operations/components/IncidentsTab.tsx
• apps/csm-portal/webapp/src/features/csm-operations/components/ProblemsTab.tsx

💤 Files with no reviewable changes (1)

• apps/csm-portal/webapp/src/features/csm-cases/components/CallRequestRow.tsx