From 998ee07a9a9a54198cfcef3aa499707d419f42b3 Mon Sep 17 00:00:00 2001 From: cesnimda Date: Sat, 15 Aug 2026 13:37:29 +0200 Subject: [PATCH] feat(notifications): open bell popover --- docs/audits/verification-log.md | 1 + .../jobs-002-application-workspace.md | 6 +- docs/work-programmes/master-progress.md | 4 +- docs/work-programmes/master-work-plan.md | 2 +- docs/work-programmes/session-handoff.md | 14 +- job-tracker-ui/src/App.tsx | 11 +- .../src/app-shell-notifications.test.tsx | 1 + .../src/components/NotificationsPopover.tsx | 167 ++++++++++++++++++ job-tracker-ui/src/i18n/translations.ts | 22 +++ job-tracker-ui/src/layout/AppShell.tsx | 6 +- .../src/notifications-popover.test.tsx | 84 +++++++++ job-tracker-ui/src/notifications.ts | 15 ++ job-tracker-ui/src/views/OperationsPage.tsx | 20 +-- 13 files changed, 321 insertions(+), 32 deletions(-) create mode 100644 job-tracker-ui/src/components/NotificationsPopover.tsx create mode 100644 job-tracker-ui/src/notifications-popover.test.tsx create mode 100644 job-tracker-ui/src/notifications.ts diff --git a/docs/audits/verification-log.md b/docs/audits/verification-log.md index f02cf58..0abbd2f 100644 --- a/docs/audits/verification-log.md +++ b/docs/audits/verification-log.md @@ -194,3 +194,4 @@ Output was reduced to filenames and commit counts. The token artifact appears un | V-160 | Focused overlay/workflow Jest; direct URL query hydration; full `npm test -- --runInBand --forceExit`; production build; diff review | `job-tracker-ui` | Verify JOBS-002 URL-owned list state without breaking workspace routes or workflow links | PASS — focused 2 suites and 6/6, full frontend 51 suites and 207/207, and optimized production build/TypeScript pass. Search survives overlay Back/Forward; direct URLs hydrate status/company/location/follow-up/readiness/deleted/sort/direction/page into the API request; company loading no longer produces a MUI out-of-range state | Existing Jest force-exit notice remains; browser refresh/history still to be exercised in Playwright | Local increment verified | | V-161 | `UsersControllerTests`; focused theme/confirm/admin-users Jest; production frontend build; native-confirm search; `git diff --check` | Repository root / `job-tracker-ui` | Verify canonical theme persistence, semantic Alert contrast ownership, app-owned destructive dialogs and final-admin safety | PASS — backend 4/4; theme/confirm 8/8; admin UI 3/3; production build/TypeScript pass; no remaining `window.confirm` in frontend. Self-demotion cancel/confirm, other-admin warning, preserved roles and final-admin disabled/API conflict paths are covered | JSDOM/local mocks only; authenticated real-browser refresh and production remain | Repository safety increment verified | | V-162 | Focused workspace/table/workflow Jest; `ApplicationWorkspaceTests`; production frontend build; standalone TypeScript audit; route/native-popup search | Repository root / `job-tracker-ui` | Verify canonical dedicated job workspace, whole-row navigation, independent controls, list-state return, contextual section routes and richer owner-scoped details | PASS — frontend 8/8 and backend 9/9; optimized build passes; direct `/jobs/:id`, section route, return state, missing job and control isolation pass. Standalone TypeScript found only pre-existing test-prop/target errors, with no new application-source error | JSDOM/InMemory backend only; browser widths/themes/refresh and production remain. Legacy dialog source retained for rollback but is no longer reachable from the list | Repository increment verified | +| V-163 | Focused notification-popover/AppShell/Operations Jest; production frontend build; direct-navigation review | `job-tracker-ui` | Verify the header bell opens notification UI instead of routing to Reminders/Operations, while preserving global activity access | PASS — 3 suites and 6/6 tests; optimized TypeScript build passes. Popover fetch, count exposure, read, dismiss, notification-owned navigation and empty state are covered; Operations remains reachable through explicit “View all activity” | JSDOM/mocked API only; browser positioning/focus/theme and production remain | Repository increment verified | diff --git a/docs/verification/jobs-002-application-workspace.md b/docs/verification/jobs-002-application-workspace.md index 283c1bd..c7696b7 100644 --- a/docs/verification/jobs-002-application-workspace.md +++ b/docs/verification/jobs-002-application-workspace.md @@ -22,6 +22,7 @@ Updated: 2026-08-15 - The workspace aggregate now includes discovery date, full/translated advert text, language, tags, notes and available source/country provenance. Job Details renders these without overflowing and exposes the existing editor. - Workflow, quick-command, correspondence and Gmail-review links route to the appropriate dedicated workspace section. - Correspondence and Gmail Review are removed from primary sidebar navigation; the global inbox routes remain available for compatibility and genuinely global review work. +- The header bell opens a theme-aware notification popover anchored to the bell. It supports loading/error/empty states, mark-read, dismiss, notification-owned destinations and a separate link to the global Operations page. - Return navigation preserves the complete URL-owned list state, including when a workspace section changes. ## Verification @@ -29,11 +30,12 @@ Updated: 2026-08-15 - Focused Jest: workspace/table and workflow routing — 8/8 pass. - Focused backend workspace aggregate: 9/9 pass. - Production build: pass. Standalone repository-wide `tsc --noEmit` still exposes pre-existing React Router test-prop and target errors; no new application-source error was reported. -- Evidence: V-158–V-162 in `docs/audits/verification-log.md`. +- Notification/AppShell/Operations focused Jest: 3 suites and 6/6 pass. +- Evidence: V-158–V-163 in `docs/audits/verification-log.md`. ## Remaining before completion - URL-owned list state is implemented for search, status, company, location, follow-up, readiness, deleted visibility, sort/direction and page. Direct hydration and dedicated-page return pass focused tests; real-browser refresh/history remains. -- Add a shared dirty-edit close/navigation guard for workspace sections that own unsaved content. +- Confirm the existing section-level save/dirty behavior does not need an additional workspace-level navigation guard. - Add real-browser 375/768/1440, light/dark, keyboard/focus restoration, refresh/history, error and long-content evidence. - Run tenant-authorization regressions and the production smoke gate. diff --git a/docs/work-programmes/master-progress.md b/docs/work-programmes/master-progress.md index 5d7a69c..0ff9947 100644 --- a/docs/work-programmes/master-progress.md +++ b/docs/work-programmes/master-progress.md @@ -3,7 +3,7 @@ Updated: 2026-08-15 - **Overall programme status:** Active. Seven packages are locally verified; twenty-two packages through UX-003 are implemented with automated/runtime evidence but blocked from applicable live/provider/production gates; JOBS-002 is now in progress. Gitea run 609 passes the prior complete pull-request CI; DEP-001 awaits approved merge-to-main and production verification. -- **Current work package:** `JOBS-002` — dedicated application workspace and scan-friendly applications table (`IN PROGRESS`). Canonical `/jobs/:id`, compact whole-row navigation, sidebar cleanup and richer job details are locally verified; notification popover and browser regression are next. +- **Current work package:** `JOBS-002` — dedicated application workspace and scan-friendly applications table (`IN PROGRESS`). Canonical `/jobs/:id`, compact whole-row navigation, sidebar cleanup, richer details and anchored notification popover are locally verified; browser regression is next. - **Completed work packages:** None are `DONE`; all repository security/AI packages still have applicable browser, provider and/or production gates. - **Locally verified work:** SEC-001, SEC-002, SEC-003, SEC-005A, CORE-001, PROD-002 and DEP-001 (`VERIFIED LOCALLY`). - **Implemented, verification incomplete:** SEC-004, SEC-005B, SEC-008, CORE-002, BG-001, OPS-001A/B/C, POL-001/002, AI-001/002/003/004, UX-001/002/003, QA-001, CAREER-001/002, MAIL-001 and JOBS-001 (`IMPLEMENTED — NOT VERIFIED`). UX-003 safe local/browser scope is implemented; production/native-device gates remain. @@ -12,7 +12,7 @@ Updated: 2026-08-15 - **Deferred work:** None. Conditional multi-replica coordination, model deletion, realtime operation delivery and unrelated production changes remain outside current packages. - **Next five work packages:** JOBS-002 applications/workspace; PRODUCT-001 homepage/Pro claims; VER-001 action matrix; production-blocked SEC-006/007 when package-index permission is available; REL-001 after prerequisites. - **Status counts:** 7 `VERIFIED LOCALLY`; 22 `IMPLEMENTED — NOT VERIFIED`; 1 `IN PROGRESS`; 5 `NOT STARTED`; 5 `BLOCKED`; 0 `DONE`; 0 `DEFERRED`. -- **Test status:** backend baseline 631/631 plus admin safety 4/4 and workspace 9/9; frontend baseline 51/51 suites and 207/207 plus theme/confirm/admin focused 11/11 and JOBS-002 focused 8/8; Playwright 6/6; npm audit 0 vulnerabilities; production build passes. Historical JT-019 and Jest force-exit/open-handle behavior remain recorded. +- **Test status:** backend baseline 631/631 plus admin safety 4/4 and workspace 9/9; frontend baseline 51/51 suites and 207/207 plus theme/confirm/admin focused 11/11, JOBS-002 focused 8/8 and notification focused 6/6; Playwright 6/6; npm audit 0 vulnerabilities; production build passes. Historical JT-019 and Jest force-exit/open-handle behavior remain recorded. - **Deployment status:** Gitea pull-request run 609 passed the complete CI job in 4m20s. Deploy was intentionally skipped because the workflow deploys only a `push` to `main`; live remains unchanged. No merge/deployment was performed directly, no production migrations were run and the AI operation worker remains disabled by default. - **Production status:** Unchanged and unverified. No provider/model call, model pull, external request or paid API occurred. - **Known regressions:** None found by automated/local browser checks. Jest still needs `--forceExit` and reports its existing open-handle notice. Email-provider/send tests are fake/local only; real delivery is not claimed. Current MAIL browser evidence is 1280×720 only because the browser surface could not resize or perform native Tab traversal. Interrupted attempts are aged after 15 minutes and notified without retry; the five-minute scan is unmeasured on a large ledger. Direct clean EF-only SQLite migration still hits the pre-existing historical blank-chain defect before later migrations; normal startup owns reconciliation. Cross-feature monthly AI usage accounting remains a rollout gap. diff --git a/docs/work-programmes/master-work-plan.md b/docs/work-programmes/master-work-plan.md index cd90110..c2433c5 100644 --- a/docs/work-programmes/master-work-plan.md +++ b/docs/work-programmes/master-work-plan.md @@ -689,7 +689,7 @@ Ordering differences from the suggested list: - **Blocker:** none after dependencies. - **Evidence:** V-158–V-162; `docs/verification/jobs-002-application-workspace.md`. - **Commit:** `bd5362c` (URL-owned list state); dedicated page commit pending. -- **Remaining work:** canonical `/jobs/:id`, row/card navigation, compact priority columns, richer job details, contextual links and sidebar cleanup are implemented. Still required: dirty-edit navigation guard where section editors lack one; notification popover; browser widths/themes/keyboard/history/error/long-data checks; authorization regression and production smoke. Do not place every field in the table or duplicate workspace data. +- **Remaining work:** canonical `/jobs/:id`, row/card navigation, compact priority columns, richer job details, contextual links, sidebar cleanup and notification popover are implemented. Still required: confirm section dirty-edit behavior; browser widths/themes/keyboard/history/error/long-data checks; authorization regression and production smoke. Do not place every field in the table or duplicate workspace data. ### UX-003 — Kanban theme-state correction diff --git a/docs/work-programmes/session-handoff.md b/docs/work-programmes/session-handoff.md index dc77be6..153cf75 100644 --- a/docs/work-programmes/session-handoff.md +++ b/docs/work-programmes/session-handoff.md @@ -2,17 +2,17 @@ Updated: 2026-08-15 -- **Exact current task:** continue JOBS-002; implement the top notification popover, then complete browser regression for the dedicated application workspace. -- **Last completed step:** canonical `/jobs/:id`, compact whole-row navigation, richer job details, route compatibility, contextual workflow links and sidebar cleanup passed focused tests. -- **Files currently modified:** JOBS-002 API aggregate, workspace/list/routes/tests and tracking documents. -- **Commands already run:** workspace/table/workflow Jest 8/8; ApplicationWorkspace backend 9/9; production frontend build; standalone `tsc --noEmit` baseline audit. -- **Test results:** focused JOBS frontend 8/8 and backend 9/9; production build passes. Repository-wide standalone TypeScript still reports pre-existing React Router test `future` props, one Testing Library option and ES target errors; application source added no error. +- **Exact current task:** continue JOBS-002 with real-browser workspace/table/theme/keyboard/history/error/long-content regression. +- **Last completed step:** the header bell now opens a reusable anchored notification panel with read/dismiss/link/empty/error behavior; it no longer routes directly to Operations. +- **Files currently modified:** notification model/popover/AppShell/App integration/tests/translations, Operations reuse and JOBS tracking. +- **Commands already run:** notification/AppShell/Operations Jest 6/6 and production frontend build. +- **Test results:** focused notification 6/6; focused JOBS frontend 8/8 and backend 9/9; production build passes. Repository-wide standalone TypeScript still reports pre-existing React Router test `future` props, one Testing Library option and ES target errors; application source added no error. - **Services currently running:** none on task-owned ports 3000/5202. Playwright stopped its disposable API/Next servers. Pre-existing Docker services were not changed. - **Temporary files or processes:** no task-owned process is running and the failed disposable migration database was removed. Existing synthetic browser evidence/account and startup-created local backup remain documented. No provider account, real email, private content, paid service or production service was accessed. - **Production changes currently active:** none. No deployment, migration, provider connection/sync/send or production payload occurred. - **Rollback status:** downgrade `20260810080858_AddEmailDraftClientRequestId`, then `20260810075206_AddEmailDrafts`, before reverting draft commits; then follow the existing MAIL rollback order (`ee5ef7e`, `449faeb`, `123fc55`/`e9937ac`, ledger downgrade before `653f011`). No production migration/deploy/provider grant occurred. -- **Uncommitted changes:** V-162 dedicated job workspace/list/sidebar increment and tracking; no dependency/schema/config change. +- **Uncommitted changes:** V-163 notification popover and tracking; no dependency/schema/config change. - **Known failures:** live deployment is not verified because PR deploy is intentionally skipped and the active branch is not approved for merge. Draft export/API/UI, full thread/category actions and non-Gmail review remain; existing accounts need re-consent and IMAP stays read-only. A clean full-chain SQLite apply fails in the pre-existing JT-019 migration before the new draft migration. Browser/provider/MariaDB/production unavailable or unverified; recovery scan performance is unmeasured at large ledger scale; Jest open handles; SEC-006 parser dependency work is still separately gated; parser isolation remains SEC-007. -- **Exact next action:** commit/push V-162; add the bell notification popover without removing the Operations page. +- **Exact next action:** commit/push V-163; run the JOBS-002 browser matrix and address evidence-backed defects. - **Work that can continue independently:** JOBS-002, PRODUCT-001 and VER-001. UX/JOBS production, MAIL provider mutations, SEC-006/007 and PROD packages retain their recorded external gates. - **Decisions still required from the user:** none for synthetic/code-inspected repository work. Any provider connection or send test, internet/package upgrades, private data, external/paid providers and production actions retain explicit approval/safety gates; SEC-009 retention/legal policy remains unresolved. diff --git a/job-tracker-ui/src/App.tsx b/job-tracker-ui/src/App.tsx index 4ab52c1..a757b79 100644 --- a/job-tracker-ui/src/App.tsx +++ b/job-tracker-ui/src/App.tsx @@ -23,6 +23,7 @@ import { ConfirmProvider } from "./confirm"; import { PromptProvider } from "./prompt"; import JobTable from "./components/JobTable"; +import NotificationsPopover from "./components/NotificationsPopover"; import type { JobTableColumns } from "./components/JobTable"; import { I18nProvider, useI18n } from "./i18n/I18nProvider"; import LoginPage from "./views/LoginPage"; @@ -164,6 +165,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false); const [reminderCount, setReminderCount] = useState(0); const [notificationCount, setNotificationCount] = useState(0); + const [notificationAnchor, setNotificationAnchor] = useState(null); const path = location.pathname; const isJobs = path.startsWith("/jobs"); @@ -347,7 +349,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo onNavigate={(to) => { setMobileDrawerOpen(false); navigate(to); }} user={{ email: me?.email, userName: me?.userName, displayName: me?.displayName || fullName || undefined, avatarImageDataUrl: me?.avatarImageDataUrl, roleLabel: isAdmin ? t("superAdmin") : t("user") }} notificationsCount={notificationCount} - onOpenNotifications={() => navigate("/operations")} + onOpenNotifications={(anchor) => setNotificationAnchor(anchor)} onOpenSettings={() => navigate("/settings")} onOpenProfile={() => navigate("/profile")} onSignOut={() => { void api.post("/auth/logout").catch(() => undefined).finally(() => { clearAuthClientState(); navigate("/login"); }); }} @@ -382,6 +384,13 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo + setNotificationAnchor(null)} + onNavigate={(to) => navigate(to)} + onChanged={() => window.dispatchEvent(new Event("notifications-changed"))} + /> + { setAddOpen(false); setCaptureUrl(undefined); }} onCreated={() => { setRefreshToken((t) => t + 1); }} /> setQuickOpen(false)} onNavigate={(to) => navigate(to)} onOpenAddJob={() => setAddOpen(true)} /> diff --git a/job-tracker-ui/src/app-shell-notifications.test.tsx b/job-tracker-ui/src/app-shell-notifications.test.tsx index f417cdf..1b3ea74 100644 --- a/job-tracker-ui/src/app-shell-notifications.test.tsx +++ b/job-tracker-ui/src/app-shell-notifications.test.tsx @@ -34,4 +34,5 @@ test("notification bell exposes its unread count and keyboard-accessible action" expect(screen.getByText("3")).toBeInTheDocument(); fireEvent.click(bell); expect(open).toHaveBeenCalledTimes(1); + expect(open.mock.calls[0][0]).toBeInstanceOf(HTMLElement); }); diff --git a/job-tracker-ui/src/components/NotificationsPopover.tsx b/job-tracker-ui/src/components/NotificationsPopover.tsx new file mode 100644 index 0000000..b6e9b1a --- /dev/null +++ b/job-tracker-ui/src/components/NotificationsPopover.tsx @@ -0,0 +1,167 @@ +import React, { useCallback, useEffect, useState } from "react"; + +import { + Alert, + Box, + Button, + CircularProgress, + Divider, + IconButton, + Popover, + Stack, + Tooltip, + Typography, +} from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; +import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; +import DoneIcon from "@mui/icons-material/Done"; + +import { api, getApiErrorMessage } from "../api"; +import { useI18n } from "../i18n/I18nProvider"; +import { notificationDateLabel, UserNotification } from "../notifications"; + +type Props = { + anchorEl: HTMLElement | null; + onClose: () => void; + onNavigate: (path: string) => void; + onChanged: () => void; +}; + +export default function NotificationsPopover({ anchorEl, onClose, onNavigate, onChanged }: Props) { + const { t } = useI18n(); + const open = Boolean(anchorEl); + const [notifications, setNotifications] = useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [busyId, setBusyId] = useState(null); + + const load = useCallback(async () => { + setLoading(true); + try { + const response = await api.get("/notifications?limit=10"); + setNotifications(response.data ?? []); + setError(null); + } catch (requestError) { + setError(getApiErrorMessage(requestError, t("notificationsLoadFailed"))); + } finally { + setLoading(false); + } + }, [t]); + + useEffect(() => { + if (open) void load(); + }, [load, open]); + + const markRead = async (notification: UserNotification) => { + if (notification.readAtUtc || busyId) return; + setBusyId(notification.id); + try { + await api.post(`/notifications/${notification.id}/read`); + setNotifications((items) => items.map((item) => item.id === notification.id + ? { ...item, readAtUtc: new Date().toISOString() } + : item)); + setError(null); + onChanged(); + } catch (requestError) { + setError(getApiErrorMessage(requestError, t("notificationsActionFailed"))); + } finally { + setBusyId(null); + } + }; + + const dismiss = async (notification: UserNotification) => { + if (busyId) return; + setBusyId(notification.id); + try { + await api.delete(`/notifications/${notification.id}`); + setNotifications((items) => items.filter((item) => item.id !== notification.id)); + setError(null); + onChanged(); + } catch (requestError) { + setError(getApiErrorMessage(requestError, t("notificationsActionFailed"))); + } finally { + setBusyId(null); + } + }; + + const openNotification = async (notification: UserNotification) => { + if (!notification.linkPath) return; + if (!notification.readAtUtc) await markRead(notification); + onClose(); + onNavigate(notification.linkPath); + }; + + return ( + + + + {t("notifications")} + {t("notificationsRecent")} + + + + + + + + + {loading ? : null} + {error ? void load()}>{t("retry")}} sx={{ m: 0.5 }}>{error} : null} + {!loading && !error && notifications.length === 0 ? ( + + {t("notificationsEmptyTitle")} + {t("notificationsEmptyBody")} + + ) : null} + {!loading ? notifications.map((notification) => ( + + {notification.title} + {notification.message} + {notificationDateLabel(notification.createdAtUtc)} + + {notification.linkPath ? : null} + {!notification.readAtUtc ? ( + + ) : null} + + + + )) : null} + + + + + + + + ); +} diff --git a/job-tracker-ui/src/i18n/translations.ts b/job-tracker-ui/src/i18n/translations.ts index 63442c7..063a1fa 100644 --- a/job-tracker-ui/src/i18n/translations.ts +++ b/job-tracker-ui/src/i18n/translations.ts @@ -33,6 +33,17 @@ export const translations = { systemStatus: "System status", manage: "Manage", notifications: "Notifications", + notificationsPanel: "Notifications panel", + notificationsRecent: "Recent updates and background work", + notificationsLoadFailed: "Notifications could not be loaded.", + notificationsActionFailed: "The notification could not be updated.", + notificationsEmptyTitle: "You're all caught up", + notificationsEmptyBody: "New alerts and completed background work will appear here.", + notificationsOpen: "Open", + notificationsMarkRead: "Mark read", + notificationsDismiss: "Dismiss", + notificationsViewAll: "View all activity", + retry: "Retry", quickSearch: "Quick Search", searchPlaceholder: "Search jobs, companies, or actions", noMatchingCommands: "No matching commands or records.", @@ -1174,6 +1185,17 @@ export const translations = { systemStatus: "Systemstatus", manage: "Administrer", notifications: "Varsler", + notificationsPanel: "Varslingspanel", + notificationsRecent: "Nylige oppdateringer og bakgrunnsarbeid", + notificationsLoadFailed: "Varslene kunne ikke lastes.", + notificationsActionFailed: "Varslet kunne ikke oppdateres.", + notificationsEmptyTitle: "Du er ajour", + notificationsEmptyBody: "Nye varsler og fullført bakgrunnsarbeid vises her.", + notificationsOpen: "Åpne", + notificationsMarkRead: "Marker som lest", + notificationsDismiss: "Fjern", + notificationsViewAll: "Vis all aktivitet", + retry: "Prøv igjen", quickSearch: "Hurtigsøk", searchPlaceholder: "Søk etter jobber, selskaper eller handlinger", noMatchingCommands: "Ingen treff på kommandoer eller poster.", diff --git a/job-tracker-ui/src/layout/AppShell.tsx b/job-tracker-ui/src/layout/AppShell.tsx index eed5c48..303a1b5 100644 --- a/job-tracker-ui/src/layout/AppShell.tsx +++ b/job-tracker-ui/src/layout/AppShell.tsx @@ -101,7 +101,7 @@ export default function AppShell({ drawerOpen: boolean; user?: { email?: string; userName?: string; displayName?: string; avatarImageDataUrl?: string; roleLabel?: string }; notificationsCount?: number; - onOpenNotifications?: () => void; + onOpenNotifications?: (anchorEl: HTMLElement) => void; onOpenSettings?: () => void; onOpenProfile?: () => void; onSignOut?: () => void; @@ -301,7 +301,7 @@ export default function AppShell({ size="small" title={t("notifications")} aria-label={t("notifications")} - onClick={onOpenNotifications} + onClick={(event) => onOpenNotifications?.(event.currentTarget)} sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2.5, width: 42, height: 42 }} > @@ -363,7 +363,7 @@ export default function AppShell({ size="small" title={t("notifications")} aria-label={t("notifications")} - onClick={onOpenNotifications} + onClick={(event) => onOpenNotifications?.(event.currentTarget)} sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2 }} > diff --git a/job-tracker-ui/src/notifications-popover.test.tsx b/job-tracker-ui/src/notifications-popover.test.tsx new file mode 100644 index 0000000..d8ca45e --- /dev/null +++ b/job-tracker-ui/src/notifications-popover.test.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; + +import { api } from "./api"; +import NotificationsPopover from "./components/NotificationsPopover"; +import { I18nProvider } from "./i18n/I18nProvider"; + +jest.mock("./api", () => ({ + api: { + get: jest.fn(), + post: jest.fn(), + delete: jest.fn(), + interceptors: { request: { use: jest.fn() }, response: { use: jest.fn() } }, + }, + getApiErrorMessage: (_error: unknown, fallback?: string) => fallback || "Request failed.", +})); + +const mockedApi = api as jest.Mocked; +const notification = { + id: "22222222-2222-2222-2222-222222222222", + operationId: null, + kind: "operation_failed", + title: "CV export failed", + message: "Review the operation and try again.", + linkPath: "/operations", + createdAtUtc: "2026-08-15T12:00:00Z", + readAtUtc: null, +}; + +function renderPopover(overrides: Partial> = {}) { + const anchor = document.createElement("button"); + document.body.appendChild(anchor); + const props = { + anchorEl: anchor, + onClose: jest.fn(), + onNavigate: jest.fn(), + onChanged: jest.fn(), + ...overrides, + }; + const result = render(); + return { ...result, props, anchor }; +} + +beforeEach(() => { + jest.clearAllMocks(); + mockedApi.get.mockResolvedValue({ data: [notification] } as any); + mockedApi.post.mockResolvedValue({ data: {} } as any); + mockedApi.delete.mockResolvedValue({ data: {} } as any); +}); + +test("shows notifications and updates read and dismissed state in place", async () => { + const { props } = renderPopover(); + + expect(await screen.findByText("CV export failed")).toBeInTheDocument(); + expect(mockedApi.get).toHaveBeenCalledWith("/notifications?limit=10"); + + fireEvent.click(screen.getByRole("button", { name: "Mark read" })); + await waitFor(() => expect(mockedApi.post).toHaveBeenCalledWith(`/notifications/${notification.id}/read`)); + expect(props.onChanged).toHaveBeenCalledTimes(1); + await waitFor(() => expect(screen.queryByRole("button", { name: "Mark read" })).not.toBeInTheDocument()); + + fireEvent.click(screen.getByRole("button", { name: "Dismiss" })); + await waitFor(() => expect(mockedApi.delete).toHaveBeenCalledWith(`/notifications/${notification.id}`)); + await waitFor(() => expect(screen.queryByText("CV export failed")).not.toBeInTheDocument()); + expect(props.onChanged).toHaveBeenCalledTimes(2); +}); + +test("opens a notification destination instead of routing the bell itself", async () => { + const { props } = renderPopover(); + + fireEvent.click(await screen.findByRole("button", { name: "Open" })); + + await waitFor(() => expect(props.onNavigate).toHaveBeenCalledWith("/operations")); + expect(mockedApi.post).toHaveBeenCalledWith(`/notifications/${notification.id}/read`); + expect(props.onClose).toHaveBeenCalledTimes(1); +}); + +test("shows an honest empty state", async () => { + mockedApi.get.mockResolvedValue({ data: [] } as any); + renderPopover(); + + expect(await screen.findByText("You're all caught up")).toBeInTheDocument(); +}); diff --git a/job-tracker-ui/src/notifications.ts b/job-tracker-ui/src/notifications.ts new file mode 100644 index 0000000..4c4b804 --- /dev/null +++ b/job-tracker-ui/src/notifications.ts @@ -0,0 +1,15 @@ +export type UserNotification = { + id: string; + operationId?: string | null; + kind: string; + title: string; + message: string; + linkPath?: string | null; + createdAtUtc: string; + readAtUtc?: string | null; +}; + +export function notificationDateLabel(value: string): string { + const date = new Date(value); + return Number.isNaN(date.getTime()) ? "" : date.toLocaleString(); +} diff --git a/job-tracker-ui/src/views/OperationsPage.tsx b/job-tracker-ui/src/views/OperationsPage.tsx index 89f3259..e43c561 100644 --- a/job-tracker-ui/src/views/OperationsPage.tsx +++ b/job-tracker-ui/src/views/OperationsPage.tsx @@ -12,6 +12,7 @@ import { } from "@mui/material"; import { api, getApiErrorMessage } from "../api"; +import { notificationDateLabel, UserNotification } from "../notifications"; type Operation = { id: string; @@ -28,25 +29,12 @@ type Operation = { canRetry: boolean; }; -type Notification = { - id: string; - operationId?: string | null; - kind: string; - title: string; - message: string; - createdAtUtc: string; - readAtUtc?: string | null; -}; - const statusLabel = (value: string) => value.replaceAll("_", " "); -const dateLabel = (value: string) => { - const date = new Date(value); - return Number.isNaN(date.getTime()) ? "" : date.toLocaleString(); -}; +const dateLabel = notificationDateLabel; export default function OperationsPage() { const [operations, setOperations] = useState([]); - const [notifications, setNotifications] = useState([]); + const [notifications, setNotifications] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [busyKey, setBusyKey] = useState(null); @@ -56,7 +44,7 @@ export default function OperationsPage() { try { const [operationResponse, notificationResponse] = await Promise.all([ api.get("/operations?limit=50"), - api.get("/notifications?limit=50"), + api.get("/notifications?limit=50"), ]); setOperations(operationResponse.data ?? []); setNotifications(notificationResponse.data ?? []);