[CSM][Web] Align QuickNav search palette with customer-portal's style - #1174
Merged
cloby99 merged 3 commits intoJul 19, 2026
Merged
Conversation
Restyles the header quick-nav/search palette to match customer-portal's search dropdown while keeping csm-portal's extra command-palette behavior (pinned/recent/pages sections, keyboard nav, Cmd+K): - Cases (live search, plus Pinned/Recent entries snapshotted from the case detail page) render as rich cards with severity/status/case-type chips and updated/assignee metadata, reusing SeverityChip/StateChip. - Swaps the Dialog for Modal + a plain Paper so the theme's translucent "acrylic" background applies, matching the glassy look of customer-portal's dropdown instead of Dialog's more opaque default. - Adds skeleton loading and an illustrated empty state; hides the "Pages" section on the empty-query default view; fixes input autofocus. - Scopes the recent-views localStorage cache to the signed-in user's ID token `sub` claim and wipes it on explicit sign-out (manual + idle timeout), so a previous user's recent/pinned cases can't leak to the next person signing in on a shared machine. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (5)
📝 WalkthroughWalkthroughQuick case search and recent views now preserve enriched case metadata for rich quick-navigation cards. Recent-view storage is scoped per signed-in user, QuickNav gains card, loading, focus, and modal updates, work-state rendering is shared, and a reusable no-results SVG icon is added. ChangesCase navigation experience
Search empty-state illustration
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant QuickNav
participant QuickCaseSearch
participant RecentViews
participant QuickNavCaseCard
User->>QuickNav: open and enter query
QuickNav->>QuickCaseSearch: search cases
QuickCaseSearch-->>QuickNav: enriched QuickCaseHit results
QuickNav->>RecentViews: load recent and pinned case snapshots
RecentViews-->>QuickNav: caseHit data
QuickNav->>QuickNavCaseCard: render matching case cards
User->>QuickNavCaseCard: select case
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/api/useQuickCaseSearch.ts`:
- Around line 88-94: Update the case mapping in useQuickCaseSearch to derive
state through uiStateFromBe instead of casting c.state directly. Pass the
backend state and relevant work-state data required by uiStateFromBe so
normalized status values, including work_in_progress, are preserved for
quick-search cards.
In
`@apps/csm-portal/webapp/src/features/csm-recent/components/QuickNavCaseCard.tsx`:
- Around line 85-92: Update the case-type Chip render in QuickNavCaseCard to
require both hit.caseType and a defined CASE_TYPE_LABEL[hit.caseType] value
before rendering. Mirror the existing guard used by CsmCaseDetailPage while
preserving the current chip props and label behavior for supported case types.
🪄 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: a8634d55-f5d4-475d-852f-0b2f99805409
📒 Files selected for processing (9)
apps/csm-portal/webapp/src/components/empty-state/SearchNoResultsIcon.tsxapps/csm-portal/webapp/src/features/csm-cases/api/useQuickCaseSearch.tsapps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsxapps/csm-portal/webapp/src/features/csm-recent/components/QuickNav.tsxapps/csm-portal/webapp/src/features/csm-recent/components/QuickNavCaseCard.tsxapps/csm-portal/webapp/src/features/csm-recent/components/QuickNavResultSkeleton.tsxapps/csm-portal/webapp/src/features/csm-recent/hooks/useRecentViews.test.tsapps/csm-portal/webapp/src/features/csm-recent/hooks/useRecentViews.tsapps/csm-portal/webapp/src/layouts/AppLayout.tsx
- Map /cases/search's raw state through uiStateFromBe instead of a direct cast, so quick-search cards normalize status the same way the rest of the app does and don't miss the work_in_progress work-state badge. - Guard the case-type chip on both hit.caseType and a defined CASE_TYPE_LABEL entry, mirroring the existing guard in CsmCaseDetailPage. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
shayanmalinda
left a comment
shayanmalinda
left a comment
Contributor
There was a problem hiding this comment.
Reviewed the QuickNav palette restyle. The Modal+Paper swap, per-user recent-views scoping, and rich case cards all look solid; leaving a few findings — a skeleton/results overlap during background refetches, the lifecycle of the .pending recent-views bucket, a duplicated work-state chip, and two smaller nits.
- Skip the "Cases" skeleton during a background refetch of already-visible results (a stale-but-cached query re-run no longer renders two "Cases" headers at once). - Scope every useRecentViews/useRecordRecentView call site to resolve its own active-user key instead of relying on one component elsewhere in the tree having already done so — activeUserKey is a per-tab JS variable, so a component mounted first (or the only one mounted in a fresh tab) could otherwise get stuck reading the "pending" bucket indefinitely while the real data sat under the correct per-user key. - Migrate any views recorded before identity resolved (the "pending" bucket) into the resolved user's bucket instead of stranding them. - Extract WorkStateChip (mirroring SeverityChip/StateChip) to remove the duplicated inline work-state Chip between CasesList and QuickNavCaseCard. - Re-indent the Modal/Paper wrapper block in QuickNav.tsx. - Add CsmCaseDetail.assigneeName (raw assignee name, no "Unassigned" fallback) so the quick-nav case-hit snapshot no longer infers "no assignee" by string-comparing against a display label. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
cloby99
approved these changes
Jul 19, 2026
This was referenced Jul 19, 2026
This was referenced Jul 27, 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
3 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.
Summary
SeverityChip/StateChipcomponents.DialogforModal+ a plainPaper(both from@wso2/oxygen-ui) so the theme's translucent "acrylic" background applies automatically — matching the glassy look of customer-portal's dropdown instead ofDialog's more opaque default styling.Test plan
tsc -b --noEmitpasseseslintpasses on all touched/new filesvitest runpasses (useRecentViews.test.ts, updated for the per-user storage key)vite buildsucceeds🤖 Generated with Claude Code
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes