[Customer Portal][FE][Web] Refine Filter/Search UX with Consistent Behavior, Accessibility Improvements, and Cleanup - #451
Merged
Conversation
Memoize and sort fetched conversation messages before mapping to chat UI. Adds useMemo and utility imports (compareByCreatedOnThenId, dateFromApiCreatedOn) and replaces normalizeUtcDateString with dateFromApiCreatedOn. This ensures messages are consistently ordered (by createdOn then id) and reduces unnecessary recalculation when data doesn't change.
Adjust the ChatInput JSDoc to reflect actual rich-text behavior: Ctrl+Enter / ⌘+Enter sends the message, while Enter inserts new lines or list items. Removes outdated note about Shift+Enter and single-line expansion to keep docs in sync with implementation.
Replace heavy manual mocks with partial async mocks for @wso2/oxygen-ui and icon package (using importActual/importOriginal), add a Tooltip mock, and mock specific icons (Send, PanelTopClose, FileText). Update the Editor mock to trigger submit only on Ctrl/Cmd+Enter instead of plain Enter, import ReactNode for typing, and change the test to find the send button by accessible role/name rather than a data-testid. These changes make the tests less brittle and align the test behavior with the updated keyboard shortcut handling.
Import and use countListSearchAndFilters to compute activeFiltersCount and derive hasActiveFilters from it. Update the Filters/Clear Filters button to display the number of active filters (e.g. "Clear Filters (2)"). This centralizes filter-count logic and simplifies the previous inline checks.
Delete apps/customer-portal/webapp/src/components/support/case-details/header/SecurityReportAnalysisHeader.tsx. The removed file implemented the header for Security Report Analysis cases, including findings resolution progress calculation, a determinate LinearProgress bar, and an ErrorIndicator fallback when progress data was missing.
Adjust ChatMessageCard styles to prevent content overflow and improve wrapping on small screens. Adds maxWidth and minWidth constraints, enables horizontal scrolling (overflowX: auto) for long lines and pre blocks, and tweaks whiteSpace/wordBreak to preserve formatting without breaking layout. These changes ensure code blocks and long messages don't break the card layout and can be scrolled if needed.
Update ActivityCommentInput to conditionally show the keyboard hint based on case state (showKeyboardHint={!isCaseClosed}) instead of hardcoding it to false, allowing the hint for open cases. Also adjust import formatting for @wso2/oxygen-ui for readability.
Import the countListSearchAndFilters utility and use it to compute activeFiltersCount (replacing the previous hasActiveFilters boolean logic). Use the count to toggle the button label so it reads "Clear Filters (N)" when filters/search are active, otherwise "Filters". This makes the number of active filters/search visible to users and centralizes counting logic.
Import countListSearchAndFilters and use it to compute activeFiltersCount instead of manually checking searchTerm and filters. hasActiveFilters is derived from the count, and the Filters button label now shows the number of active filters (e.g. "Clear Filters (2)"), improving UI clarity.
Import countListSearchAndFilters and use it to compute activeFiltersCount instead of the previous boolean check. Replace hasActiveFilters logic to derive from the count and update the Filters button label to show the number of active filters (e.g. "Clear Filters (N)"). This makes it clearer how many filters/search terms are active.
Use the countListSearchAndFilters helper to compute activeFiltersCount instead of manual checks. Import the helper, derive hasActiveFilters from the count, and update the Filters button to display the number of active filters in the label (e.g. "Clear Filters (N)"). This surfaces how many filters/search terms are applied.
Adjust layout and spacing for the ProductVulnerabilitiesTableHeader: replace RotateCcw icon with X for active filters, change filter button label to show active filter count ("Clear Filters (n)"), and update gaps to use rowGap/columnGap for responsive spacing. Also improve flex behavior and minWidth on text/title containers so the header and search field scale correctly across breakpoints, and tweak paddings for better alignment.
Replace the RotateCcw icon with an X icon for the active-filters state and update the Filters button label to show the number of active filters ("Clear Filters (count)"). Added X to the imports and adjusted the conditional startIcon and button text to improve clarity about active filters and provide an explicit clear action.
Refactor test mocks and update assertions in CasesTableHeader tests. Replace standalone mockNavigate/mockUseParams with vi.hoisted wrappers, add additional mocked icons (X, ChevronDown, ChevronUp), and update the test to expect the updated UI label "Clear Filters (1)" instead of "Reset Filters".
dileepapeiris
added
Type/New Feature
dileepapeiris
changed the title
Contributor
📝 WalkthroughWalkthroughThis PR standardizes filter UI across multiple search and filter components by centralizing active filter detection using a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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: 1
🧹 Nitpick comments (1)
apps/customer-portal/webapp/src/components/support/case-details/activity-tab/ActivityCommentInput.tsx (1)
223-223: Consider hiding keyboard hint when the editor is disabled for non-status reasons.At Line 223, the hint still appears when input is disabled due to auth/loading/pending/uploading. Consider gating with
!isDisabledto avoid mixed signals.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/customer-portal/webapp/src/components/support/case-details/activity-tab/ActivityCommentInput.tsx` at line 223, The keyboard hint is currently shown based only on isCaseClosed; update the showKeyboardHint prop in ActivityCommentInput so it also checks the local input-disabled state (e.g., isDisabled or the computed boolean that combines auth/loading/pending/uploading) — set showKeyboardHint to true only when !isCaseClosed && !isDisabled so the hint is hidden whenever the editor is disabled for reasons other than case closure.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/customer-portal/webapp/src/components/support/novera-ai-assistant/novera-chat-page/__tests__/ChatInput.test.tsx`:
- Around line 53-57: The test's onKeyDown mock currently triggers
onSubmitKeyDown only when e.ctrlKey || e.metaKey, but production
EnterSubmitPlugin (in Editor.tsx) submits on plain Enter (unless Shift is held)
and uses Shift+Enter for newlines; update the mock in ChatInput.test.tsx so the
onKeyDown handler calls onSubmitKeyDown when e.key === "Enter" and !e.shiftKey,
and ensure Shift+Enter does not call onSubmitKeyDown (so tests reflect the real
Editor behavior and Enter/Shift+Enter semantics).
---
Nitpick comments:
In
`@apps/customer-portal/webapp/src/components/support/case-details/activity-tab/ActivityCommentInput.tsx`:
- Line 223: The keyboard hint is currently shown based only on isCaseClosed;
update the showKeyboardHint prop in ActivityCommentInput so it also checks the
local input-disabled state (e.g., isDisabled or the computed boolean that
combines auth/loading/pending/uploading) — set showKeyboardHint to true only
when !isCaseClosed && !isDisabled so the hint is hidden whenever the editor is
disabled for reasons other than case closure.
🪄 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: b7db7ca4-f242-4912-9ba9-0194e0de325c
📒 Files selected for processing (14)
apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesTableHeader.tsxapps/customer-portal/webapp/src/components/dashboard/cases-table/__tests__/CasesTableHeader.test.tsxapps/customer-portal/webapp/src/components/security/ProductVulnerabilitiesTableHeader.tsxapps/customer-portal/webapp/src/components/security/SecurityReportAnalysis.tsxapps/customer-portal/webapp/src/components/support/all-cases/AllCasesSearchBar.tsxapps/customer-portal/webapp/src/components/support/all-conversations/AllConversationsSearchBar.tsxapps/customer-portal/webapp/src/components/support/announcements/AnnouncementsSearchBar.tsxapps/customer-portal/webapp/src/components/support/case-details/activity-tab/ActivityCommentInput.tsxapps/customer-portal/webapp/src/components/support/case-details/activity-tab/ChatMessageCard.tsxapps/customer-portal/webapp/src/components/support/case-details/header/SecurityReportAnalysisHeader.tsxapps/customer-portal/webapp/src/components/support/change-requests/ChangeRequestsSearchBar.tsxapps/customer-portal/webapp/src/components/support/novera-ai-assistant/novera-chat-page/ChatInput.tsxapps/customer-portal/webapp/src/components/support/novera-ai-assistant/novera-chat-page/__tests__/ChatInput.test.tsxapps/customer-portal/webapp/src/pages/ConversationDetailsPage.tsx
💤 Files with no reviewable changes (1)
- apps/customer-portal/webapp/src/components/support/case-details/header/SecurityReportAnalysisHeader.tsx
v15a1
merged commit Apr 2, 2026
091d2e5
into
wso2-open-operations:dev-app-customer-portal-v1.0.x
1 check passed
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.
Description
Closes(https://github.com/wso2-enterprise/digiops-cs/issues/1485 ,https://github.com/wso2-enterprise/digiops-cs/issues/1420)
This pull request introduces several UI and UX improvements across filter/search bars and table headers in the customer portal, focusing on consistent filter clearing behavior, improved accessibility, and minor layout adjustments. It also removes an unused component. The most significant changes are grouped below:
Unified Filter Button Behavior and Iconography
The "Reset Filters" button across multiple table headers and search bars is now consistently labeled as "Clear Filters (N)" when filters are active, displaying the number of active filters, and uses the
Xicon instead ofRotateCcw. This affects components such asCasesTableHeader,ProductVulnerabilitiesTableHeader,AllCasesSearchBar,AllConversationsSearchBar, andAnnouncementsSearchBar. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]A new utility function,
countListSearchAndFilters, is used to calculate the number of active filters/search terms, ensuring accurate counts and consistent logic across components. [1] [2] [3] [4] [5] [6]Layout and Accessibility Improvements
Adjusted layout and spacing in
ProductVulnerabilitiesTableHeaderfor better responsiveness and alignment, including use ofrowGap,columnGap, and improved flex properties for contained elements. [1] [2]Enhanced
ChatMessageCardto better handle long content and code blocks by adding horizontal scrolling, max width constraints, and improved word/white-space handling for better readability and accessibility. [1] [2]Component and Test Updates
Updated tests in
CasesTableHeader.test.tsxto reflect the new "Clear Filters (N)" label and icon changes, ensuring test coverage matches the new UX. [1] [2] [3]The
showKeyboardHintprop inActivityCommentInputis now only shown when the case is not closed, improving contextual hints for users.Code Cleanup
SecurityReportAnalysisHeadercomponent, cleaning up the codebase.These changes collectively improve filter usability, visual consistency, and accessibility across the portal.
Summary by CodeRabbit
Enhancements
Changes