[CSM Portal Microapp] Fix Home's Assigned to me widget: fetch parity, freshness, and mobile layout/ Theme - #1356
Merged
Rashmika998 merged 5 commits intoAug 4, 2026
Conversation
… case actions dashboard.ts's assignedToMe already sent the same filters/sort/limit as the webapp's useGetMyAssignedOpenCases; add the missing 30s staleTime to match it exactly. CaseDetailPage's invalidateCase() only invalidated ["case", id] and ["cases"] after a mutation (state/assignment/workState change, comment) -- Home's "Assigned to me"/composition widgets key off a disjoint ["dashboard", ...] prefix, so those actions left Home showing stale data until the widget's own staleTime lapsed. Invalidate ["dashboard"] there too.
Deep-links to Support pre-filtered to assignedToMe=1 (mirrors the webapp's MyAssignedCases VIEW_ALL_HREF), shown only once there's something to see more of. The webapp packs title/View all/Last refreshed/refresh icon into one row -- fine on a wide desktop card, but on phone width that was crushing the title itself into wrapping. Split into two rows instead: title + refresh icon on top, View all + Last refreshed below. Inlines the icon button directly (dropping the now-unused RefreshButton component) since it no longer needs to bundle the "last refreshed" text with the icon.
Contributor
📝 WalkthroughWalkthroughThis PR replaces the standalone ChangesAssigned-to-me widget update
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
Contributor
There was a problem hiding this comment.
Pull request overview
Improves the Home “Assigned to me” dashboard widget so it stays fresh and matches the webapp behavior, including query freshness parity, correct cache invalidation after case mutations, and a more usable mobile header layout.
Changes:
- Add
staleTime: 30_000to the dashboard “assigned to me” query for parity with the webapp hook. - Invalidate
["dashboard"]queries after case mutations so Home widgets update immediately after actions taken on the case detail page. - Update the Home “Assigned to me” widget UI: add conditional “View all” deep-link to Support and split the header into two rows for mobile; remove now-dead
RefreshButtoncomponent.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| apps/csm-portal/microapp/src/services/dashboard.ts | Adds 30s staleTime and minor refactor for the “assigned to me” query to match webapp freshness behavior. |
| apps/csm-portal/microapp/src/pages/SupportPage.tsx | Formatting-only change for readability of client-side sorting pipeline. |
| apps/csm-portal/microapp/src/pages/CaseDetailPage.tsx | Ensures case mutations invalidate ["dashboard"] queries so Home widgets don’t remain stale. |
| apps/csm-portal/microapp/src/components/home/AssignedToMeSection.tsx | Adds “View all” navigation + mobile-friendly header layout; inlines refresh icon button behavior. |
| apps/csm-portal/microapp/src/components/home/RefreshButton.tsx | Removes unused component after inlining refresh control. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![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
🤖 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/microapp/src/services/dashboard.ts`:
- Around line 79-90: Update the enabled flag in the assignedToMe queryOptions to
distinguish between null and undefined userId values. Change enabled from
checking !!userId to only disable when userId is undefined, allowing the query
to run and reach the if (!userId) check inside queryFn when userId is null. This
way the queryFn's early-return logic will properly execute and return the
EMPTY_RESULT promise for the empty state instead of the query staying pending.
🪄 Autofix
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 Plus
Run ID: ff244ff9-be0d-41c0-9128-8a8b094ba792
📒 Files selected for processing (5)
apps/csm-portal/microapp/src/components/home/AssignedToMeSection.tsxapps/csm-portal/microapp/src/components/home/RefreshButton.tsxapps/csm-portal/microapp/src/pages/CaseDetailPage.tsxapps/csm-portal/microapp/src/pages/SupportPage.tsxapps/csm-portal/microapp/src/services/dashboard.ts
💤 Files with no reviewable changes (1)
- apps/csm-portal/microapp/src/components/home/RefreshButton.tsx
Swap AcrylicOrangeTheme for AcrylicPurpleTheme, both first-class exports of @wso2/oxygen-ui (confirmed byte-identical between the webapp's and this app's installed package versions, so no version bump needed) -- primary #646cff, gradient buttons, purple-tinted acrylic background, same as the webapp. TopBar's "Go to Apps" exit button was styled color="error" (MUI's semantic red slot, not actually tied to the old orange brand) -- switch it to color="primary" so it follows the new theme instead of reading as a stray red accent. The confirm dialog's "Leave" button stays error/red: that one is a legitimate exit-warning color, not a branding choice.
The rest are a "View all" tap away on Support, so the preview only needs enough rows to be useful at a glance, not a fifth partial row of card content pushing the composition donuts further down the page.
data?.items is the live cache reference react-query hands back, not a fresh array -- sort() mutates in place, which can produce surprising behavior for other subscribers/devtools and breaks the "cache data is immutable" contract. Spread into a new array first, matching what SupportPage.tsx's equivalent sort already gets for free via flatMap. Addresses Copilot review comment on wso2-open-operations#1356.
2003dinijay
changed the title
2003dinijay
changed the title
2003dinijay
changed the title
Rashmika998
approved these changes
Aug 4, 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
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
dashboard.ts: the "Assigned to me" widget's query already matched the webapp'suseGetMyAssignedOpenCases(sameassignedUserId/state/typefilters, same sort) — added the missingstaleTime: 30_000for full parity. Preview trimmed from 5 to 4 cases (the rest are a "View all" tap away).CaseDetailPage.tsx:invalidateCase()(run after every state/assignment/workState change or comment) only invalidated["case", id]/["cases"], never["dashboard", ...]. Home's "Assigned to me"/composition widgets use that disjoint key prefix, so actions taken on the case detail page left Home showing stale data until the widget's own staleTime lapsed. Now invalidates["dashboard"]too.AssignedToMeSection.tsx: added a "View all" link deep-linking to Support pre-filtered toassignedToMe=1(mirrors the webapp'sMyAssignedCasesVIEW_ALL_HREF), shown only when there's something to see more of.RefreshButton.tsx, now dead code after inlining the icon button directly.theme/index.ts: switched the brand theme fromAcrylicOrangeThemetoAcrylicPurpleTheme(both first-class@wso2/oxygen-uiexports, matching the webapp) — purple primary, gradient buttons, purple-tinted acrylic background.TopBar.tsx: the "Go to Apps" exit button was styledcolor="error"(MUI's semantic red slot, not actually tied to the old orange brand) — switched tocolor="primary"so it follows the new theme. The dialog's "Leave" confirm button stays red — that's a legitimate exit-warning color, not a branding choice.Test plan
tsc --noEmitpasseseslintpasses (4 pre-existing errors remain in untouched files, unrelated to this PR)npm run buildpasses