[Customer Portal][FE][Web] Implement Change Request Card on Support Page - #105
Conversation
Introduce ChangeRequestCard component for the Support page. It composes SupportRequestCard with title, subtitle, icon, palette and accentColor, supplies info box text and bullet items from CHANGE_REQUEST_BULLET_ITEMS, and navigates to ../dashboard on secondary action. File includes project license header and necessary imports.
Add a new test for the ChangeRequestCard component. The test mocks the RequestCard child to isolate the component, renders ChangeRequestCard inside a MemoryRouter, and verifies the title, subtitle, and bullet items match CHANGE_REQUEST_BULLET_ITEMS. Uses Vitest and React Testing Library. File added at apps/customer-portal/webapp/src/components/support/request-cards/__tests__/ChangeRequestCard.test.tsx (includes license header).
Introduce unit tests for the RequestCard component using vitest and @testing-library/react. Tests verify rendering of title, subtitle, info box, bullet items, icon, and both primary/secondary buttons, and assert that primary and secondary click handlers are invoked. Adds a new test file at apps/customer-portal/webapp/src/components/support/request-cards/__tests__/RequestCard.test.tsx.
Extend SupportPage unit tests by adding mocks for oxygen-ui theme (palette, alpha, useTheme) and an ArrowRight icon, plus mocks for useGetProjectCases and Service/Change Request card components. Update assertions to expect two file-text icons and add a new test to verify ServiceRequestCard and ChangeRequestCard render. These changes stub newly referenced hooks/components and make tests reflect the updated UI composition.
Replace string fallbacks ('secondary'/'primary') with theme.palette.grey[300] in RequestCard.tsx so icon and info box background colors use a valid neutral color when palette.light or palette.main are undefined. Also reformats the alpha() calls for readability.
📝 WalkthroughWalkthroughThis pull request introduces a new ChangeRequestCard component that wraps a generic RequestCard, updates RequestCard with improved layout styling and color fallbacks, refactors ServiceRequestCard to use the generic RequestCard, adds comprehensive test coverage for both card components, and updates related constants and test mocks. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 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 |
dileepapeiris
added
Type/New Feature
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@apps/customer-portal/webapp/src/pages/__tests__/SupportPage.test.tsx`:
- Around line 260-261: The test contains a duplicated assertion calling
expect(screen.getByText("Start New Chat")).toBeInTheDocument() twice; remove the
redundant duplicate so the test only asserts that "Start New Chat" is in the
document once (locate the duplicate in SupportPage.test.tsx where the two
identical expect(...) lines appear and delete the second occurrence).
- Around line 142-148: The mock for useGetProjectCases in SupportPage.test.tsx
returns isLoading but the component expects isFetching, so update the mock (the
vi.mock for "@api/useGetProjectCases") to return an object with isFetching
(e.g., isFetching: false) and the same data shape; ensure the mocked default
export signature matches how SupportPage destructures it (const { data:
casesData, isFetching: isCasesLoading } = useGetProjectCases(...)) so tests can
explicitly simulate both loading and loaded states via isFetching.
🧹 Nitpick comments (6)
apps/customer-portal/webapp/src/components/support/request-cards/RequestCard.tsx (2)
75-82:iconBgColorandinfoBoxBgColorare identical — deduplicate into a single variable.Both variables compute
alpha(palette.light ?? palette.main ?? theme.palette.grey[300], 0.1)with the same inputs. Use one shared variable (e.g.,bgColor) to avoid the duplication.♻️ Proposed fix
- const iconBgColor = alpha( - palette.light ?? palette.main ?? theme.palette.grey[300], - 0.1, - ); - const infoBoxBgColor = alpha( - palette.light ?? palette.main ?? theme.palette.grey[300], - 0.1, - ); + const bgColor = alpha( + palette.light ?? palette.main ?? theme.palette.grey[300], + 0.1, + );Then replace
iconBgColoron Line 98 andinfoBoxBgColoron Line 116 withbgColor.
165-174: Hardcodedcolor="warning"on primary button limits reusability.This is a "generic"
RequestCard, yet the primary button is alwayswarning-colored. Currently onlyServiceRequestCarduses the primary button so this works, but if another variant needs a different button color, this will need refactoring. Consider making the button color configurable viaprimaryButtonprops if you anticipate other variants.apps/customer-portal/webapp/src/components/support/request-cards/ChangeRequestCard.tsx (1)
21-21: Import aliasSupportRequestCardis misleading for a component namedRequestCard.Both
ChangeRequestCard.tsxandServiceRequestCard.tsximportRequestCardasSupportRequestCard. Consider using the actual export name for clarity, or rename the source component ifSupportRequestCardis the preferred name.apps/customer-portal/webapp/src/components/support/request-cards/__tests__/ChangeRequestCard.test.tsx (1)
48-67: Missing test for secondary button navigation.The
onSecondaryClickprop wires tonavigate("../dashboard"), but this isn't verified. Consider adding an assertion that the mock receives the correctonSecondaryClickcallback (or that calling it triggers navigation to../dashboard).apps/customer-portal/webapp/src/components/support/request-cards/__tests__/ServiceRequestCard.test.tsx (1)
51-71: Same gap asChangeRequestCard.test.tsx— navigation callbacks are untested.Neither
onSecondaryClick(→../dashboard) norprimaryButton.onClick(→../create-case) are verified. Consider capturing and asserting the navigate calls via areact-routermock.apps/customer-portal/webapp/src/pages/SupportPage.tsx (1)
87-110: Consider consolidating Grid containers to avoid unused space.The first
Grid container(lines 87–100) renders only theSupportOverviewCardatlg=6, leaving the right half empty on large screens. The second container (lines 102–109) places the two request cards side-by-side. You could place theChangeRequestCard(orServiceRequestCard) alongsideSupportOverviewCardin the first grid to make better use of horizontal space—unless the visual separation is intentional.
Replace the previously imported SupportRequestCard with the correct RequestCard import and component usage in ChangeRequestCard and ServiceRequestCard to match the exported name. Also add a listStyle: "n " style to the bullet list container in RequestCard.tsx (sets list style on the bullet items).
There was a problem hiding this comment.
Pull request overview
Adds a new “request card” pattern to the Customer Portal Support page and wires it into the Support dashboard UI to surface Service/Change request entry points.
Changes:
- Introduces a reusable
RequestCardbase component plusServiceRequestCardandChangeRequestCardvariants. - Integrates the new cards into
SupportPagelayout. - Centralizes Service/Change request bullet copy in
supportConstants.tsand adds/updates unit tests.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/customer-portal/webapp/src/pages/tests/SupportPage.test.tsx | Updates mocks and assertions; adds coverage for rendering the new request cards. |
| apps/customer-portal/webapp/src/pages/SupportPage.tsx | Renders the new Service/Change request cards in the Support page grid layout. |
| apps/customer-portal/webapp/src/constants/supportConstants.ts | Adds SERVICE_REQUEST_BULLET_ITEMS and CHANGE_REQUEST_BULLET_ITEMS. |
| apps/customer-portal/webapp/src/components/support/request-cards/tests/ServiceRequestCard.test.tsx | Adds unit test for ServiceRequestCard props passed to RequestCard. |
| apps/customer-portal/webapp/src/components/support/request-cards/tests/RequestCard.test.tsx | Adds unit tests for RequestCard rendering and click handlers. |
| apps/customer-portal/webapp/src/components/support/request-cards/tests/ChangeRequestCard.test.tsx | Adds unit test for ChangeRequestCard props passed to RequestCard. |
| apps/customer-portal/webapp/src/components/support/request-cards/ServiceRequestCard.tsx | New Service Request card variant (includes CTA navigation). |
| apps/customer-portal/webapp/src/components/support/request-cards/RequestCard.tsx | New reusable card base component used by request card variants. |
| apps/customer-portal/webapp/src/components/support/request-cards/ChangeRequestCard.tsx | New Change Request card variant. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Make RequestCard fill available height and space content vertically: add height and justifyContent to the root, enable flex column and flexGrow on the info box, and correct listStyle to "none". Add two new items to CHANGE_REQUEST_BULLET_ITEMS (impact and post-implementation checks). Update SupportPage tests to match hook API (use isFetching) and remove a duplicate assertion.
Add a vi.mock for @wso2/oxygen-ui in RequestCard.test.tsx to stub Box, Button, Paper, Typography, alpha and useTheme. This isolates the RequestCard unit tests from the external UI library, provides stable theme values and simple DOM-friendly components, and prevents test flakes from the real implementation.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/customer-portal/webapp/src/pages/__tests__/SupportPage.test.tsx`:
- Around line 79-82: The mock for `@wso2/oxygen-ui` defines the helper alpha twice
(duplicate symbol alpha) so the later definition overwrites the earlier one;
remove the redundant alpha definition (the first occurrence) and keep the
intended implementation (the second alpha) so alpha has a single, consistent
return value in the mock; locate the duplicate by looking for the alpha property
inside the mock object in SupportPage.test.tsx and delete the earlier
definition.
🧹 Nitpick comments (1)
apps/customer-portal/webapp/src/components/support/request-cards/RequestCard.tsx (1)
75-82:iconBgColorandinfoBoxBgColorare identical — consider a single variable.Both compute the exact same value. Unless you plan to diverge them later, a single
bgColorwould reduce duplication.♻️ Proposed simplification
- const iconBgColor = alpha( - palette.light ?? palette.main ?? theme.palette.grey[300], - 0.1, - ); - const infoBoxBgColor = alpha( - palette.light ?? palette.main ?? theme.palette.grey[300], - 0.1, - ); + const bgColor = alpha( + palette.light ?? palette.main ?? theme.palette.grey[300], + 0.1, + );Then use
bgColorin bothiconBgColorandinfoBoxBgColorusages (lines 100 and 118).
74ce4f7
into
wso2-open-operations:customer-portal-milestone-1
dileepapeiris
changed the title
Overview
This PR introduces the Change Request Card to the Support dashboard. It implements a flexible card architecture designed to facilitate user-initiated change requests. The feature includes a reusable base component, specific configuration for change requests, and direct integration into the Support page grid for a streamlined user experience.
Key Features
1. Request Card Infrastructure
RequestCard(Base): Developed a reusable foundational component that standardizes the look and feel of support actions, featuring slots for titles, subtitles, and bulleted lists.ChangeRequestCard(Variant): A specialized implementation that configures the base card with branding, icons (ArrowRight), and colors specific to change management requests.2. Dashboard Integration
ChangeRequestCarddirectly into theSupportPage.tsxgrid, ensuring optimal spacing and responsive behavior.oxygen-uitheme utilities to provide consistent hover effects and clear call-to-action indicators.3. Centralized Content Management
supportConstants.ts(CHANGE_REQUEST_BULLET_ITEMS), simplifying future content maintenance.File Summary
RequestCard.tsx,ChangeRequestCard.tsxSupportPage.tsxsupportConstants.tsRequestCard.test.tsx,ChangeRequestCard.test.tsx,SupportPage.test.tsxTesting Coverage
Unit Tests
ChangeRequestCardcorrectly passes the "Change Request" title and its associated bullet items to the underlying card component.RequestCardcorrectly renders passed props and handles interaction events.Summary by CodeRabbit
New Features
Style
Tests