[CSM Portal] cases: product filter + cloud-project case creation - #1044
Merged
Merged
Conversation
rksk
added
App/CSM Portal
Area/Frontend
Type/New Feature
Contributor
📝 WalkthroughWalkthroughThis PR adds a "product family" filter to CSM case search: a new ChangesProduct family filter
Cloud-support subscription deployment handling
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ProductNameMultiSelect
participant useProductNameOptions
participant BackendAPI
participant CasesFilterBar
ProductNameMultiSelect->>useProductNameOptions: request product family names
useProductNameOptions->>BackendAPI: paginated /products/search calls
BackendAPI-->>useProductNameOptions: product rows
useProductNameOptions-->>ProductNameMultiSelect: sorted distinct names
User->>ProductNameMultiSelect: select/deselect names
ProductNameMultiSelect->>CasesFilterBar: onChange(next productNames)
CasesFilterBar->>BackendAPI: /cases/search with productNames filter
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
rksk
force-pushed
the
csm-case-product-filter-fe
branch
from
July 5, 2026 14:39
21a8401 to
42cebbc
Compare
Adds a Product multi-select to the cases filter bar. Options are the distinct product family names from /products/search (deduped); the selected names are sent as filters.productNames on /cases/search, which matches every version of each product. URL param "products"; round-trips via the shared filter URL codec.
Mirrors the customer portal: for cloud-support projects (cloud_support / cloud_evaluation_support) the case-creation form hides the deployment picker and files against the project's single primary-production deployment, so the user goes straight to product selection. Non-cloud projects keep the normal deployment -> product cascade. The cloud deployment is derived (not synced via an effect) so downstream product/validation/payload key off it.
rksk
force-pushed
the
csm-case-product-filter-fe
branch
from
July 5, 2026 15:03
42cebbc to
14c5994
Compare
Contributor
Author
|
@coderabbitai resume |
Contributor
|
✅ Action performedReviews resumed. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/csm-portal/webapp/src/features/csm-cases/api/useGetCsmCases.ts (1)
136-150: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
productNamesmissing from the React Query key — filter changes won't refetch.
filters.productNamesis used in the payload (Lines 239-242) but is not included inqueryKey(Lines 136-150). Since react-query only refetches on a key change, toggling the new Product filter will silently no-op — the case list keeps showing stale results.🐛 Proposed fix
queryKey: [ ApiQueryKeys.CSM_CASES, search, [...filters.severities].sort(), [...filters.states].sort(), [...filters.caseTypes].sort(), [...filters.workStates].sort(), [...filters.assignees].sort(), [...filters.projects].sort(), [...filters.engagementTypes].sort(), + [...filters.productNames].sort(), currentUserEmail ?? "", currentUserId ?? "", page, pageSize, ],Also applies to: 239-242
🤖 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/csm-portal/webapp/src/features/csm-cases/api/useGetCsmCases.ts` around lines 136 - 150, The React Query key in useGetCsmCases is missing filters.productNames, so changing the Product filter will not trigger a refetch and the list can stay stale. Update the queryKey array in useGetCsmCases to include a stable, sorted representation of filters.productNames alongside the other filter sets, matching how the payload already uses it. Keep the key structure consistent with the existing filter symbols in useGetCsmCases so query invalidation works when Product selections change.
🧹 Nitpick comments (1)
apps/csm-portal/webapp/src/features/csm-cases/api/useProductNameOptions.ts (1)
41-52: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low valueConsider a hard iteration cap on the pagination loop.
The loop terminates only via
page.length < PAGE_LIMIT; if the backend ever returns full pages indefinitely, this hook would fetch unboundedly. Given the catalogue is documented as bounded, this is low risk, but a safety cap (e.g., max N pages) would prevent a runaway loop from an unexpected backend response.🤖 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/csm-portal/webapp/src/features/csm-cases/api/useProductNameOptions.ts` around lines 41 - 52, The pagination loop in useProductNameOptions can run without a hard stop if the backend keeps returning full pages, so add a safety cap to bound the number of requests. Update the offset loop around the api.post("/products/search") call to stop after a maximum page count, while still preserving the existing page.length < PAGE_LIMIT early exit. Use the existing PAGE_LIMIT and the useProductNameOptions hook as the main symbols when applying the fix.
🤖 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.
Outside diff comments:
In `@apps/csm-portal/webapp/src/features/csm-cases/api/useGetCsmCases.ts`:
- Around line 136-150: The React Query key in useGetCsmCases is missing
filters.productNames, so changing the Product filter will not trigger a refetch
and the list can stay stale. Update the queryKey array in useGetCsmCases to
include a stable, sorted representation of filters.productNames alongside the
other filter sets, matching how the payload already uses it. Keep the key
structure consistent with the existing filter symbols in useGetCsmCases so query
invalidation works when Product selections change.
---
Nitpick comments:
In `@apps/csm-portal/webapp/src/features/csm-cases/api/useProductNameOptions.ts`:
- Around line 41-52: The pagination loop in useProductNameOptions can run
without a hard stop if the backend keeps returning full pages, so add a safety
cap to bound the number of requests. Update the offset loop around the
api.post("/products/search") call to stop after a maximum page count, while
still preserving the existing page.length < PAGE_LIMIT early exit. Use the
existing PAGE_LIMIT and the useProductNameOptions hook as the main symbols when
applying the fix.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1f17fa72-ba1a-4374-a7f2-f85560560d44
📒 Files selected for processing (10)
apps/csm-portal/webapp/src/api/backend/types.tsapps/csm-portal/webapp/src/features/csm-cases/api/useGetCsmCases.tsapps/csm-portal/webapp/src/features/csm-cases/api/useProductNameOptions.tsapps/csm-portal/webapp/src/features/csm-cases/components/CasesFilterBar.tsxapps/csm-portal/webapp/src/features/csm-cases/components/CsmIssuesView.tsxapps/csm-portal/webapp/src/features/csm-cases/components/ProductNameMultiSelect.tsxapps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseCreatePage.tsxapps/csm-portal/webapp/src/features/csm-cases/utils/casesFiltersUrl.test.tsapps/csm-portal/webapp/src/features/csm-cases/utils/casesFiltersUrl.tsapps/csm-portal/webapp/src/features/csm-projects/utils/subscriptionType.ts
Rashmika998
approved these changes
Jul 5, 2026
This was referenced Jul 8, 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.
Purpose
CS engineers had no way to filter the case list by product. Separately, the case-creation form always required selecting a deployment before a product, even for cloud projects that have a single primary-production deployment, an unnecessary step the customer portal already avoids.
Goals
Approach
Product filter:
/products/search(deduped, type-to-search).filters.productNameson/cases/search, which matches all versions of each product.productsURL param via the shared filter URL codec (unit tests added).Cloud-project case creation:
cloud_support/cloud_evaluation_supportsubscriptions, hide the deployment picker and file against the project's single primary-production deployment; product loads immediately.User stories
Release note
Added a product filter to the cases list, and streamlined case creation for cloud projects to skip deployment selection.
Documentation
N/A. Internal CS-engineer portal; no customer-facing documentation impact.
Training
N/A.
Certification
N/A. No impact on certification exams.
Marketing
N/A.
Automation tests
Security checks
Samples
N/A.
Related PRs
Product filter depends on the entity-service filter (#1043) and a corresponding ServiceNow-proxy (Ballerina entity-service) change tracked separately. Base is
v2; until #1043 merges this PR's diff transiently includes that commit.Migrations (if applicable)
N/A.
Test environment
Node + pnpm;
tsc,eslint,vitest(135 pass), andpnpm buildon macOS.