-
Notifications
You must be signed in to change notification settings - Fork 34
[CSM Portal] add "Assigned to me" dashboard widget + work sub-state in cases list #1023
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
cloby99
merged 2 commits into
wso2-open-operations:v2
from
rksk:csm-my-assigned-cases-widget
Jul 3, 2026
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
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
166 changes: 166 additions & 0 deletions
166
apps/csm-portal/webapp/src/features/csm-dashboard/api/useGetMyAssignedOpenCases.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| // Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com). | ||
| // | ||
| // WSO2 LLC. licenses this file to you under the Apache License, | ||
| // Version 2.0 (the "License"); you may not use this file except | ||
| // in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, | ||
| // software distributed under the License is distributed on an | ||
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| // KIND, either express or implied. See the License for the | ||
| // specific language governing permissions and limitations | ||
| // under the License. | ||
|
|
||
| import { | ||
| keepPreviousData, | ||
| useQuery, | ||
| type UseQueryResult, | ||
| } from "@tanstack/react-query"; | ||
| import { ApiQueryKeys } from "@constants/apiConstants"; | ||
| import { useBackendApi } from "@api/backend/client"; | ||
| import { severityFromPriority, uiStateFromBe } from "@api/backend/mappers"; | ||
| import { useCurrentUser } from "@context/current-user/CurrentUserContext"; | ||
| import { useIdTokenClaims } from "@hooks/useIdTokenClaims"; | ||
| import type { | ||
| BeCaseSearchPayload, | ||
| BeCaseSearchResponse, | ||
| BeCaseState, | ||
| } from "@api/backend/types"; | ||
| import type { CsmCaseRow } from "@features/csm-cases/types/csmCases"; | ||
|
|
||
| /** | ||
| * Every lifecycle state except the terminal `closed` — the widget tracks the | ||
| * caller's active workload. `reopened` is included (it is a non-closed, | ||
| * assignable state); the severity/state matrix omits it, but "all non-closed" | ||
| * should not. `/cases/search` takes an inclusion list, so "non-closed" is | ||
| * expressed by enumerating the non-closed states rather than excluding one. | ||
| */ | ||
| const NON_CLOSED_STATES: BeCaseState[] = [ | ||
| "open", | ||
| "work_in_progress", | ||
| "waiting_on_wso2", | ||
| "awaiting_info", | ||
| "reopened", | ||
| "solution_proposed", | ||
| ]; | ||
|
|
||
| /** UI states for the "View all" deep-link (`/cases`), which filters on the UI | ||
| * `CaseState` vocabulary — `reopened` has no filter option there, so it is | ||
| * dropped from the link only (the widget itself still lists reopened cases). */ | ||
| export const MY_OPEN_CASES_LINK_STATES = NON_CLOSED_STATES.filter( | ||
| (s) => s !== "reopened", | ||
| ).join(","); | ||
|
|
||
| export interface MyAssignedOpenCases { | ||
| cases: CsmCaseRow[]; | ||
| /** Total non-closed cases assigned to the caller across all pages. */ | ||
| total: number; | ||
| /** Whether more rows exist beyond the current page. */ | ||
| hasMore: boolean; | ||
| } | ||
|
|
||
| /** Default page size for the dashboard widget (kept small to stay compact). */ | ||
| export const MY_OPEN_CASES_PAGE_SIZE = 5; | ||
|
|
||
| /** | ||
| * Non-closed cases assigned to the signed-in engineer, for the dashboard | ||
| * "Assigned to me" widget. | ||
| * | ||
| * A single `POST /cases/search` filtered server-side by `assignedUserIds` (the | ||
| * caller's platform UUID from the app-wide current-user context) and the | ||
| * non-closed `states` set — no client-side filtering of a superset. Sorted by | ||
| * `updatedOn` desc (most recently touched first), matching the main cases list. | ||
| * The widget paginates a small page (`page` / `pageSize`) rather than loading | ||
| * everything; `total` / `hasMore` drive the pager and the "View all" link. | ||
| * | ||
| * The account/customer column is not resolved here (the case-search view does | ||
| * not embed it and `CasesList` does not render it), so this deliberately skips | ||
| * the account-directory lookup `useGetCsmCases` runs — keeping the dashboard | ||
| * load to one request. | ||
| * | ||
| * Keyed under the `CSM_CASES` prefix so case create / assignment / close | ||
| * mutations (which invalidate that prefix) refresh the widget. Disabled until | ||
| * the caller's `id` is known — `/users/me` omits it only when the entity | ||
| * service is down, in which case the widget shows an unavailable state rather | ||
| * than silently broadening to everyone's cases. | ||
| */ | ||
| export function useGetMyAssignedOpenCases( | ||
| page: number, | ||
| pageSize: number, | ||
| ): UseQueryResult<MyAssignedOpenCases, Error> { | ||
| const api = useBackendApi(); | ||
| const userId = useCurrentUser().user?.id; | ||
| const myEmail = useIdTokenClaims()?.email; | ||
| const offset = page * pageSize; | ||
|
|
||
| return useQuery<MyAssignedOpenCases, Error>({ | ||
| queryKey: [ | ||
| ApiQueryKeys.CSM_CASES, | ||
| "my-assigned-open", | ||
| userId ?? "", | ||
| page, | ||
| pageSize, | ||
| ], | ||
| enabled: !!userId, | ||
| queryFn: async (): Promise<MyAssignedOpenCases> => { | ||
| const res = await api.post<BeCaseSearchPayload, BeCaseSearchResponse>( | ||
| "/cases/search", | ||
| { | ||
| pagination: { offset, limit: pageSize }, | ||
| sortBy: { field: "updatedOn", order: "desc" }, | ||
| filters: { | ||
| assignedUserIds: [userId as string], | ||
| states: NON_CLOSED_STATES, | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| const myEmailLc = myEmail?.toLowerCase(); | ||
| const cases: CsmCaseRow[] = (res.cases ?? []).map((c) => { | ||
| const assigneeEmail = c.assignedEngineer?.email; | ||
| return { | ||
| id: c.id, | ||
| caseNumber: c.number, | ||
| wso2CaseId: c.internalId, | ||
| subject: c.subject ?? "(no subject)", | ||
| // The search view does not embed the account; CasesList never renders | ||
| // it, so leave it unresolved rather than scanning the account list. | ||
| customer: "—", | ||
| accountId: "", | ||
| projectId: c.project?.id ?? "", | ||
| projectName: c.project?.name ?? "—", | ||
| product: c.deployedProduct?.name ?? "—", | ||
| severity: severityFromPriority(c.severity), | ||
| state: uiStateFromBe(c.state), | ||
| caseType: c.type, | ||
| workState: c.workState ?? null, | ||
| assignee: | ||
| c.assignedEngineer?.name?.trim() || assigneeEmail || "Unassigned", | ||
| assigneeIsMe: | ||
| !!assigneeEmail && | ||
| !!myEmailLc && | ||
| assigneeEmail.toLowerCase() === myEmailLc, | ||
| slaClockType: "ack", | ||
| minutesToBreach: 0, | ||
| // No SLA data from the backend yet — keep the column neutral. | ||
| hasSla: false, | ||
| createdAt: c.createdOn ?? "", | ||
| updatedAt: c.updatedOn ?? c.createdOn ?? "", | ||
| }; | ||
| }); | ||
|
|
||
| return { | ||
| cases, | ||
| total: res.total ?? cases.length, | ||
| hasMore: res.hasMore ?? false, | ||
| }; | ||
| }, | ||
| // Keep the previous page's rows/total while the next page loads, so the | ||
| // pager and count stay stable instead of blinking out on page change. | ||
| placeholderData: keepPreviousData, | ||
| staleTime: 30_000, | ||
| }); | ||
| } | ||
129 changes: 129 additions & 0 deletions
129
apps/csm-portal/webapp/src/features/csm-dashboard/components/MyAssignedCases.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| // Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com). | ||
| // | ||
| // WSO2 LLC. licenses this file to you under the Apache License, | ||
| // Version 2.0 (the "License"); you may not use this file except | ||
| // in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, | ||
| // software distributed under the License is distributed on an | ||
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| // KIND, either express or implied. See the License for the | ||
| // specific language governing permissions and limitations | ||
| // under the License. | ||
|
|
||
| import { Link, TablePagination, Typography } from "@wso2/oxygen-ui"; | ||
| import { useState, type JSX } from "react"; | ||
| import { Link as RouterLink } from "react-router"; | ||
| import { ASSIGNEE_ME_TOKEN } from "@features/csm-cases/components/CasesFilterBar"; | ||
| import CasesList from "@features/csm-cases/components/CasesList"; | ||
| import { | ||
| MY_OPEN_CASES_LINK_STATES, | ||
| MY_OPEN_CASES_PAGE_SIZE, | ||
| useGetMyAssignedOpenCases, | ||
| } from "@features/csm-dashboard/api/useGetMyAssignedOpenCases"; | ||
| import { useCurrentUser } from "@context/current-user/CurrentUserContext"; | ||
| import SectionCard from "@features/csm-dashboard/components/SectionCard"; | ||
|
|
||
| // Deep-link to the full cases list, pre-filtered to the caller's non-closed | ||
| // cases. `assignees=@me` resolves against the current user server-side; the | ||
| // states mirror the widget's non-closed set (minus `reopened`, which the list | ||
| // filter vocabulary has no option for). | ||
| const VIEW_ALL_HREF = `/cases?assignees=${encodeURIComponent( | ||
| ASSIGNEE_ME_TOKEN, | ||
| )}&states=${MY_OPEN_CASES_LINK_STATES}`; | ||
|
|
||
| /** | ||
| * Dashboard widget: the signed-in engineer's non-closed cases (their active | ||
| * workload). Wraps the shared {@link CasesList} in a {@link SectionCard} and | ||
| * paginates a small page of the list; the data is filtered server-side by | ||
| * assignee + state in {@link useGetMyAssignedOpenCases}. "View all" jumps to | ||
| * the full cases page with the same filter. | ||
| */ | ||
| export default function MyAssignedCases(): JSX.Element { | ||
| const currentUser = useCurrentUser(); | ||
| const [page, setPage] = useState(0); | ||
| const { data, isLoading, isError } = useGetMyAssignedOpenCases( | ||
| page, | ||
| MY_OPEN_CASES_PAGE_SIZE, | ||
| ); | ||
|
|
||
| // `/users/me` returned but carried no id (entity service down): we can't tell | ||
| // which cases are the caller's, so say so rather than showing nothing. | ||
| const cannotIdentify = !currentUser.isLoading && !currentUser.user?.id; | ||
|
|
||
| const loading = isLoading || currentUser.isLoading; | ||
| const total = data?.total ?? 0; | ||
| // Clamp to the last valid page when the queue shrinks (a case closed / | ||
| // reassigned drops the total below the current offset). Guarded setState | ||
| // during render is React's documented pattern for deriving from changed | ||
| // inputs — not an effect. Mirrors CsmIssuesView. | ||
| const lastPage = total === 0 ? 0 : Math.ceil(total / MY_OPEN_CASES_PAGE_SIZE) - 1; | ||
| if (data !== undefined && page > lastPage) { | ||
| setPage(lastPage); | ||
| } | ||
| // Once loaded, an empty queue is reported via the subtitle alone (CasesList's | ||
| // own "no cases match the current filters" copy would be misleading here). | ||
| const isEmpty = !loading && !isError && !cannotIdentify && total === 0; | ||
| const subtitle = | ||
| !loading && !isError && !cannotIdentify | ||
| ? total === 0 | ||
| ? "You have no open cases." | ||
| : `${total} open ${total === 1 ? "case" : "cases"} assigned to you` | ||
| : undefined; | ||
|
|
||
| return ( | ||
| <SectionCard | ||
| title="Assigned to me" | ||
| subtitle={subtitle} | ||
| action={ | ||
| total > 0 ? ( | ||
| <Link | ||
| component={RouterLink} | ||
| to={VIEW_ALL_HREF} | ||
| underline="hover" | ||
| variant="body2" | ||
| > | ||
| View all | ||
| </Link> | ||
| ) : undefined | ||
| } | ||
| > | ||
| {isError ? ( | ||
| <Typography variant="body2" color="text.secondary"> | ||
| Could not load your cases. | ||
| </Typography> | ||
| ) : cannotIdentify ? ( | ||
| <Typography variant="body2" color="text.secondary"> | ||
| We couldn't identify your account, so your assigned cases can't be | ||
| loaded right now. | ||
| </Typography> | ||
| ) : isEmpty ? null : ( | ||
| <> | ||
| <CasesList cases={data?.cases ?? []} isLoading={loading} /> | ||
| {/* Only pager past the first page when there's more than one page. */} | ||
| {total > MY_OPEN_CASES_PAGE_SIZE && ( | ||
| <TablePagination | ||
| component="div" | ||
| count={data === undefined ? -1 : total} | ||
| page={page} | ||
| onPageChange={(_, next) => setPage(next)} | ||
| rowsPerPage={MY_OPEN_CASES_PAGE_SIZE} | ||
| rowsPerPageOptions={[]} | ||
| showFirstButton | ||
| showLastButton | ||
| // The pager's toolbar is a fixed 52px tall by default, which | ||
| // leaves an airy dead band under the list. Collapse it to its | ||
| // content height and drop the left inset so it sits snug. | ||
| sx={{ | ||
| "& .MuiTablePagination-toolbar": { minHeight: 0, pl: 0 }, | ||
| }} | ||
| /> | ||
| )} | ||
| </> | ||
| )} | ||
| </SectionCard> | ||
| ); | ||
| } |
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
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.
Uh oh!
There was an error while loading. Please reload this page.