Skip to content

[CSM Portal] give case watchers their own tab, separate from Related - #1261

Closed
rksk wants to merge 1 commit into
wso2-open-operations:mainfrom
rksk:csm-watchers-own-tab
Closed

rksk wants to merge 1 commit into
wso2-open-operations:mainfrom
rksk:csm-watchers-own-tab

Conversation

@rksk

@rksk rksk commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Purpose

Describe the problems, issues, or needs driving this feature/fix and include links to related issues in the following format: Resolves issue1, issue2, etc.

The case-detail "Related" tab currently combines two unrelated concerns in one screen: the watch list (who gets notified on case updates) and child cases. Watchers aren't actually "related case" content, and cramming them into the same tab as child cases makes both harder to scan and prevents showing an unambiguous watcher count on the tab bar.

Goals

Describe the solutions that this feature/fix will introduce to resolve the problems described above

Give Watchers its own top-level tab, matching the existing pattern used by the SLAs tab, so it's independently discoverable and can carry its own count in the tab label.

Approach

Describe how you are implementing the solutions. Include an animated GIF or screenshot if the change affects the UI (email documentation@wso2.com to review all UI text). Include a link to a Markdown file or Google doc if the feature write-up is too long to paste here.

In CsmCaseDetailPage.tsx:

  • Added a new "watchers" tab id, positioned between "Related" and "SLAs" in the tab bar, with an Eye icon (already used elsewhere in this webapp for view/visibility affordances) to keep it visually distinct from the other icons on this tab bar.
  • Moved the WatchersWidget render out of the "Related" tab's content block into its own {activeTab === "watchers" && ...} block. The widget itself, its inline add/remove chip behavior, and the onAddWatcher/onRemoveWatcher handlers are unchanged — only relocated.
  • The "Related" tab now renders only ChildCasesWidget and switches from the previous 2-column grid to a single-column layout, since it's no longer combining two widgets.
  • Added a watcher count to the new tab's label (c.watchers.length), consistent with how SLAs/Attachments/Time/Call requests/Tasks already show counts. "Related" still shows no count (its widget runs its own scoped data fetch, so no count is available at this level without an extra query).
  • The action bar's "Manage watchers" item now jumps to the new "watchers" tab instead of "related".
  • Added "watchers" to the same announcement-only tab-hiding logic that already excludes "related"/"sla"/"time"/"call-requests" (announcements have no watch list), in both places that gate: the tab-bar filter and the render-time fallback-to-Activities guard.

No changes to WatchersWidget, WatcherAddPicker, or any backend/entity-service code.

User stories

Summary of user stories addressed by this change

As a CS engineer viewing a case, I want Watchers to have its own tab, so I can find and manage the watch list without it being mixed in with child-case information.

Release note

Brief description of the new feature or bug fix as it will appear in the release notes

Case detail: Watchers now has its own tab, separate from Related.

Documentation

Link(s) to product documentation that addresses the changes of this PR. If no doc impact, enter "N/A" plus brief explanation of why there's no doc impact

N/A — internal CSM-portal UI reorganization, no external-facing product documentation covers this screen.

Automation tests

  • Unit tests

    Code coverage information

Existing CaseDetailWidgets.test.tsx (WatchersWidget unit tests) and CaseActionBar.test.tsx (secondary-action dispatch tests, including "manage watchers") pass unchanged — the tab move doesn't affect either component's own test surface. Manually verified tsc -b, eslint, and pnpm build are clean.

Security checks

Samples

N/A — no sample code shipped with this change.

Related PRs

None.

Migrations (if applicable)

N/A — no data or schema migration involved.

Test environment

Verified locally with tsc -b, eslint, vitest, and pnpm build (Node/pnpm toolchain per repo package.json).

Learning

N/A — straightforward tab-bar reorganization following the existing SLAs-tab pattern already present in the file.

Watchers is now split into its own tab, positioned between Related and
SLAs, with a dedicated Eye icon and a live count of watchers in the
tab label. The Related tab keeps only the child-cases list and drops
to a single-column layout now that it's a single widget. The action
bar's "Manage watchers" item jumps to the new tab. No changes to
WatchersWidget or the inline add/remove behavior.
@coderabbitai

coderabbitai Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@rksk, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 25 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

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

How do review 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 refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 974fea0f-b6e6-4350-a814-22e7da82781c

📥 Commits

Reviewing files that changed from the base of the PR and between 42b6544 and 53e1753.

📒 Files selected for processing (70)
  • apps/csm-portal/backend/internal/handler/cases_test.go
  • apps/csm-portal/backend/internal/handler/response.go
  • apps/csm-portal/microapp/src/App.tsx
  • apps/csm-portal/microapp/src/components/operations/AsyncEntitySelect.tsx
  • apps/csm-portal/microapp/src/components/operations/ChangeRequestsTab.tsx
  • apps/csm-portal/microapp/src/config/endpoints.ts
  • apps/csm-portal/microapp/src/pages/NewChangeRequestPage.tsx
  • apps/csm-portal/microapp/src/pages/OperationsPage.tsx
  • apps/csm-portal/microapp/src/services/changeRequestLookups.ts
  • apps/csm-portal/microapp/src/services/changeRequests.ts
  • apps/csm-portal/microapp/src/types/changeRequest.dto.ts
  • apps/csm-portal/microapp/src/types/changeRequestLookup.dto.ts
  • apps/csm-portal/microapp/src/types/index.ts
  • apps/csm-portal/webapp/src/features/csm-cases/components/ResolutionDialog.test.tsx
  • apps/csm-portal/webapp/src/features/csm-cases/components/ResolutionDialog.tsx
  • apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
  • apps/csm-portal/webapp/src/features/csm-operations/pages/CsmChangeRequestDetailPage.test.tsx
  • apps/csm-portal/webapp/src/features/csm-operations/pages/CsmChangeRequestDetailPage.tsx
  • apps/customer-portal/backend/constants.bal
  • apps/customer-portal/backend/modules/entity/types.bal
  • apps/customer-portal/backend/modules/entity/utils.bal
  • apps/customer-portal/backend/modules/types/types.bal
  • apps/customer-portal/backend/openapi.yaml
  • apps/customer-portal/backend/service.bal
  • apps/customer-portal/backend/utils.bal
  • apps/customer-portal/webapp/src/features/support/api/usePostAttachments.ts
  • apps/customer-portal/webapp/src/features/support/api/usePostCaseEscalation.ts
  • apps/customer-portal/webapp/src/features/support/api/useUpdateConversationState.ts
  • apps/customer-portal/webapp/src/features/support/components/all-conversations/AllConversationsList.tsx
  • apps/customer-portal/webapp/src/features/support/components/case-details/attachments-tab/CaseDetailsAttachmentsPanel.tsx
  • apps/customer-portal/webapp/src/features/support/components/case-details/attachments-tab/UploadingAttachmentPlaceholder.tsx
  • apps/customer-portal/webapp/src/features/support/components/case-details/details-tab/CaseDetailsContent.tsx
  • apps/customer-portal/webapp/src/features/support/components/case-details/escalation/DeescalateCaseModal.tsx
  • apps/customer-portal/webapp/src/features/support/components/case-details/escalation/EscalateCaseModal.tsx
  • apps/customer-portal/webapp/src/features/support/components/case-details/header/CaseDetailsActionRow.tsx
  • apps/customer-portal/webapp/src/features/support/components/close-chat/CloseChatConfirmDialog.tsx
  • apps/customer-portal/webapp/src/features/support/components/close-chat/__tests__/CloseChatConfirmDialog.test.tsx
  • apps/customer-portal/webapp/src/features/support/components/support-overview-cards/ChatHistoryCard.tsx
  • apps/customer-portal/webapp/src/features/support/components/support-overview-cards/ChatHistoryList.tsx
  • apps/customer-portal/webapp/src/features/support/components/support-overview-cards/__tests__/ChatHistoryCard.test.tsx
  • apps/customer-portal/webapp/src/features/support/constants/chatConstants.ts
  • apps/customer-portal/webapp/src/features/support/constants/conversationConstants.ts
  • apps/customer-portal/webapp/src/features/support/constants/supportConstants.ts
  • apps/customer-portal/webapp/src/features/support/hooks/useCloseConversationFlow.ts
  • apps/customer-portal/webapp/src/features/support/pages/AllConversationsPage.tsx
  • apps/customer-portal/webapp/src/features/support/pages/CreateCasePage.tsx
  • apps/customer-portal/webapp/src/features/support/pages/NoveraChatPage.tsx
  • apps/customer-portal/webapp/src/features/support/pages/SupportPage.tsx
  • apps/customer-portal/webapp/src/features/support/pages/__tests__/SupportPage.test.tsx
  • apps/customer-portal/webapp/src/features/support/types/cases.ts
  • apps/customer-portal/webapp/src/features/support/types/conversations.ts
  • apps/customer-portal/webapp/src/features/support/types/supportComponents.ts
  • apps/customer-portal/webapp/src/features/support/utils/__tests__/conversationsList.test.ts
  • apps/customer-portal/webapp/src/features/support/utils/conversationsList.ts
  • apps/customer-portal/webapp/src/features/support/utils/support.ts
  • entity-service/internal/service/sn_case_service.go
  • entity-service/internal/service/sn_case_service_test.go
  • entity-service/internal/service/sn_incident_service.go
  • entity-service/internal/service/sn_incident_service_test.go
  • entity-service/openapi.yaml
  • integrations/csm-integration-service/CLAUDE.md
  • integrations/csm-integration-service/README.md
  • integrations/csm-integration-service/cmd/server/main.go
  • integrations/csm-integration-service/internal/entity/client.go
  • integrations/csm-integration-service/internal/entity/client_test.go
  • integrations/csm-integration-service/internal/entity/entity.go
  • integrations/csm-integration-service/internal/handler/projects.go
  • integrations/csm-integration-service/internal/middleware/usertoken.go
  • integrations/csm-integration-service/internal/middleware/usertoken_test.go
  • integrations/csm-integration-service/openapi.yaml
✨ 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.

@rksk

rksk commented Jul 27, 2026

Copy link
Copy Markdown
Contributor Author

Consolidated into #1264 to simplify review — no code changes, same commit content.

@rksk rksk closed this Jul 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant