RenewCMS/features/activity_screen.qa.md

QA: Activity screen, details slide-over and My activity

Implementation note for coder (informational, not a QA assertion)

The activity API is already built and covered by features/activity-log-backend.qa.md and features/activity-log-producers.qa.md: this slice has no Go change and no HTTP-level Go section.

The shell specs that list the navigation are amended to seven destinations (Home, Articles, Media, Users, Activity, Integration, Settings): features/dashboard_shell_branding.feature, features/media_browse.feature, features/users_screen.feature and .qa.md, features/settings_page.feature and .qa.md, features/profile_page.feature. Their Vitest tests (DashboardShell.spec.ts, where Settings moves from index 5 to 6) must be updated in the same change.

Export needs the response body as a file, which useApi().request does not return (it calls response.json()). Add a raw or blob read to useApi that keeps the global 401 handling, builds an object URL and clicks a temporary anchor with download="activity.csv". The toasts use useToast().add({ color, icon, title }) with the one sentence as the title.

The page needs a date-range popover and a Custom date pair in the mobile sheet. The clamp ("Show more") is measured from the rendered element, so tests stub scrollHeight and clientHeight.

Every new English string needs a French entry in web/src/i18n/messages.ts. Sentences are composed by a composable (useActivitySentence) that returns segments so the target name can be rendered semibold. The Security sub-line is "{n} flagged" with n = summary.security, French "{n} signalés".

Automated (Vitest + Vue Test Utils, task test:web)

Mock useApi's request (and the export transport) per case, matching on method, path and parsed query (URLSearchParams); no real backend. Mount ActivityView inside DashboardShell with a resolved verified session (id 2, username "ines", display_name "Inès Duarte", role "owner") and a test router at /activity; the regular-user cases use role "editor" (and one with no role). Run each layout case at a desktop and a below-md width (mock matchMedia, see components/__tests__/viewport.ts). Timers: use vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] }) so the 150 ms skeleton delay and the 300 ms search debounce can be advanced while Date stays real. No test freezes or asserts the system date.

Clock-independence rules for fixtures: every event in the Vitest fixtures is dated 3 Oct 2026 or earlier, created at 12:00 to 13:00 UTC so its local day is the same in any time zone from UTC-11 to UTC+11; assert day separators with the absolute label "3 Oct 2026" and When cells only against the pattern ^\d{2}:\d{2}$ and a non-empty title; never assert "Today", "Yesterday" or a relative "N min ago". UTC lines can be asserted exactly; the local time line only with its "(your time)" suffix.

Fixtures: activityItems (a 15-item list built from the board's events, mapped to the API shape with the action codes of the "Visual" section), summaryDefault (total 1284, previous_total 1146, active_people {users 7, api_keys 2}, failed 6, security 11, series total [4,6,5,8,7,9,6], active [5,6,6,7,7,8,9], failed [0,1,0,2,1,0,2], security [1,0,2,1,3,2,2]), summaryZero (total 214, previous_total 223, active_people {4, 1}, failed 0, security 0, series failed and security zeros) and summaryNone (all zeros). The list response is { items, total, page, size }.

1. Navigation — sidebar and drawer list Home, Articles, Media, Users, Activity, Integration, Settings in order; "Activity" has the i-lucide-history icon, links to /activity, has aria-current="page" on /activity and none elsewhere; breadcrumb and mobile title "Activity".
2. Default (owner) — assert header texts, enabled "Export", the four strip cards (labels, "1,284", "9", "6", "11", sub-lines "12% vs previous 7 days" with the trending-up icon, "7 people, 2 API keys", "0.5% of all actions" with icon circle-x, "11 flagged" with icon shield-alert), the filter bar (placeholder, "All people", "All categories", Outcome All selected, 7 days selected), no chip, the pager text "Showing 1–25 of 1,284", and that request was called exactly twice at mount with the expected queries (range=7d&page=1&size=25 and range=7d).
3. Rows, Examples-driven — one fixture row per Examples row of the feature; assert the Actor cell (initials, key or cog or user-round-x icon, badge, "Not signed in"), the sentence text and that the target name is in a semibold element, the shield marker only on security rows, and the Outcome badge word.
4. Target cell — deleted (struck-through class, "Deleted" badge, type line), living (link with href "/article/8/edit", "/media", "/users", "/integration/api-keys" per type, plain text for "release"), and null ("—"); clicking the link navigates and does not open the details.
5. Day grouping and When cell — fixture across 3 Oct and 2 Oct 2026; assert two separators "3 Oct 2026" and "2 Oct 2026" in order, the When cell pattern and title.
6. Sentences, Examples-driven — for each Examples row set the locale (setLocale), render and assert the exact sentence, including plurals, failed_groups, "Forever", the dropped slot for a missing target name, the unknown code article.archive, and the success sentence used for an unlisted failed action (auth.login failed). Add a completeness test: every action in the catalogue has an English and a French template, and every key used on the page exists in messages.ts.
7. Loading — unresolved requests; at 149 ms nothing in place of strip and table; at 150 ms 4 skeleton cards, 9 skeleton rows (5 cards below md), aria-busy="true", no pager; resolve and assert the Default content.
8. Zero-value strip — summaryZero; assert "214" "4% vs previous 7 days" with the trending-down icon, "5" "4 people, 1 API key", "0" "Nothing failed" and "0" "Nothing to flag" with circle-check, no error or warning fill class, bars at 2 px.
9. Total sub-line without a comparison, Examples-driven — previous_total 0 gives "No earlier data" and equal totals give "No change", both without a trend icon; French "Aucune donnée antérieure" and "Aucun changement"; ranges Today, 30 days and Custom give "vs previous day", "vs previous 30 days" and "vs previous period".
10. Empty, no activity yet — summaryNone, items []; assert "No data yet" on two cards, the calm lines on the other two, the empty panel copy and icon, a disabled "Export", no table header and no pager.
11. Empty, filters match nothing — type "sitemap", choose Category "Media" and Outcome "Failed", resolve items []; assert chips, empty panel copy, "Clear filters", enabled export; click "Clear filters" and assert a request with range=7d&page=1&size=25 only.
12. Error, Examples-driven — list rejects with ApiError(500), ApiError(400), then NetworkError, summary resolves; assert the strip, the alert copy, "Try again", a disabled export and no table; click "Try again"; assert the list request is repeated and the Default rows replace the alert.
13. Summary alone fails — summary rejects with ApiError(500), ApiError(403), then NetworkError; assert the strip is absent, nothing is drawn in its place, and the list is fully rendered.
14. Forbidden — list rejects with ApiError(403) and a verified session; assert no export button, no strip, no filter bar, the lock panel copy, and that "Back to home" navigates to /home. Also ApiError(401) triggers the global redirect and no panel.
15. Strip cards, Examples-driven — click each card; assert the effect and aria-pressed (Failed: request with outcome=failed&page=1, chip "Outcome: Failed"; Security: request with security=true, chip "Security events"; Total: filters cleared; Active people: no request) and that the summary is not requested again.
16. Filtered, card applied — Category "Authentication", 30 days, then the Failed card; assert the chip texts and order, "Clear all", the summary requested only once for range=30d, the pager "Showing 1–6 of 6", and below md the Filters badge "3".
17. Filter bar, Examples-driven — for each Examples row assert the exact query, page=1 after starting on page 3, and the 300 ms debounce with fake timers (no request at 299 ms, one at 300 ms; Enter applies at once and the pending debounce does not send a second request).
18. Custom dates — pick two dates in the popover (stub the calendar's model); assert no request after the first date, then range=custom&from=2026-09-01&to=2026-09-30 on the list and the summary, and the chip "Dates: 1 – 30 Sep 2026"; also "28 Sep – 3 Oct 2026".
19. Chips — remove one chip, then "Clear all"; assert the queries and that the summary is requested again only when the range changes back.
20. Person options — assert no GET /v1/user/ or GET /v1/api-key/ call at mount, both on first open of the menu, none on the second; assert group order and the three query values.
21. Pagination — next page, size 50, last page "Showing 1,276–1,284 of 1,284" with next disabled; mobile "Page 1 of 52" and previous and next.
22. Mobile list and sheet — below md assert cards (actor line, sentence, badges, "Target deleted"), "Filters" with the badge count, the sheet content and footer ("Show 6 results", "Show 1 result"), two date fields for Custom, and that "Show … results" closes it.
23. Export — superseded by activity_filter_cards_and_export.qa.md (menu, dialog, toasts).
24. Export failure — superseded by activity_filter_cards_and_export.qa.md.
25. Details open and close — click, then Enter on a focused row; assert the title, the selected row class, the footer "Event 2 of 1,284"; close with Escape, the close button and the scrim and assert focus on the row.
26. Details content, Examples-driven — the six board events: Edit with a diff (Title row with both values and the "Body edited (+312 characters)" row, "(+1 character)", "(-48 characters)"), long text (stub overflow; "Show more" on that row only, toggles to "Show less"), failed with a long title (alert "Why it failed", wrapping), deleted target (struck-through name, "Deleted" badge, explanation, no Changes), system event ("System" badge, "System task", two "Not applicable"), failed login ("Not signed in", "Security" badge, reason, IP and Browser). Assert the field labels and the Draft and Published values for online, the raw code for an unknown field, and that no body text is ever rendered.
27. Details times — created_at "2026-10-06T10:42:18Z": the UTC line is exactly "6 Oct 2026, 10:42:18 UTC" and the local line ends with "(your time)".
28. Previous and Next across pages — first item: previous disabled, "Event 1 of 1,284"; 24 nexts without a request; the 25th next sends page=2&size=25 with the same filters, shows page 2's first item, "Event 26 of 1,284" and the pager "Showing 26–50 of 1,284"; previous sends page=1 and shows "Event 25 of 1,284"; the last event disables next; a 500 on the neighbour page keeps the panel on the current event and re-enables the button; the position also follows a non-default size (size 50, page 2, index 0 is "Event 51").
29. Details below md — the bottom-sheet variant: header "2 of 1,284", full-width buttons, no footer text.
30. My activity, Examples-driven — role "editor" then no role: title, subtitle, breadcrumb "My activity", no strip, no Person filter, no export, no Actor column or card actor line; assert no request to /summary or /export and no actor parameter; pager "Showing 1–25 of 41"; empty state copy; details "Event 1 of 41" with previous disabled.
31. French — setLocale('fr'); assert the chrome strings (Activity "Activité", My activity "Mon activité", Export CSV "Exporter", Preparing file… "Préparation du fichier…", Total actions "Actions au total", Active people "Personnes actives", Failed actions "Actions en échec", Security events "Événements de sécurité", Succeeded "Réussie", Failed "Échec", Not signed in "Non connecté", Activity details "Détails de l'activité", Previous event and Next event "Événement précédent" and "Événement suivant", "11 signalés"), the French sentences, the plural and "Forever" ("Toujours") forms, and the day separator format.
32. Hover time — each When cell has a title that is non-empty and contains seconds.

Visual (task visual:check -- activity, desktop and mobile, light and dark)

Reference: docs/design/screens/activity.md, board docs/design/source/RenewCMS Screens Activity.dc.html, groups "Activity, owner and admin", "Details slide-over" and "My activity" (the last two are already declared as extraSources in web/visual/check.ts); exact values in docs/design/source/ActivityFrame.dc.html. Add each state to visualStates.activity in web/visual/states.ts with the board's own sample data. The gate is hard: every capture of every non-skipped state must be within 10 %, for both viewports and both themes (6 gated states, 24 captures). No state uses the now option or a frozen clock. Mocks are keyed by method and path (GET /v1/activity, GET /v1/activity/summary, GET /v1/auth/me); use bodyFor to read the query. Do not mock or call /v1/user/ or /v1/api-key/ (Person options load only when the menu opens, which no state does), so there is no unmocked request.

Sessions: add activityOwnerSession (id 2, display_name "Inès Duarte", role "owner") and activityEditorSession (id 3, display_name "Marta Alves", role "editor"), as the board draws them in its sidebar chip. The board draws a 4-item sidebar for the regular user as illustrative; the real shell keeps all 7 items, a known small difference in the My activity Empty capture.

Fixtures (all taken from the frame's script): activityBoardEvents, the 15 events of the frame in its order, mapped to API items. Where the frame's sample has no real producer the nearest real code is used and the sentence differs from the board (accepted; those rows only appear in skipped states): 1 article.publish, 2 article.edit with title and body (+312) changes, 3 auth.login_failed (anonymous, name "alex@example.com", reason from the frame), 4 api_key.revoke, 5 system.media_purge (system, ip and user_agent null), 6 invite.accept (replaces "Changed the role"), 7 media.upload by the API key "Website sync", 8 media.delete (target not existing), 9 article.publish failed with the 150-character title, 10 system.activity_cleanup, 11 article.edit with long title values (replaces the "Site description" setting diff), 12 api_key.create, 13 user.update_profile, 14 media.upload, 15 auth.password_reset_completed; times are the frame's local times minus one hour as UTC (created_at), IPs and browsers as in the frame, security as in the frame. Summary fixtures are the three in the Automated section; the strip of the Default state is "1,284 / 9 / 6 / 11" with the sub-line "11 flagged". Total is 1284 with page size 25 for the owner and 41 for the editor.

• Loading: both requests with hang: true; the setup waits 150 ms or more so the skeleton strip and rows are drawn before the capture.
• Empty, no activity yet: list items: [], total: 0, summary summaryNone; "Export" disabled.
• Empty, filters match nothing: the board applies Search "sitemap", Category "Media", Outcome "Failed" (steps type and select them, or the mock answers with the filtered query), list items: [], total: 0, summary Default.
• Error with retry: list 500, summary Default; the alert, disabled export, strip drawn.
• Forbidden (403): list 403, summary 403; session with a non-admin role as the board does (role: 'user'), so no "Export".
• My activity, Empty: activityEditorSession, list items: [], total: 0.
• skip: clock-sensitive. Default, large dataset: skip: 'clock-sensitive' (day separators and "2 min ago" depend on the real clock). Prints SKIP, never investigated or date-frozen.
• skip: clock-sensitive. Zero-value summary strip, Filtered card applied and Mobile filters sheet (all draw Today rows behind the strip or sheet).
• skip: clock-sensitive. The six Details slide-over states (Edit with a diff, Settings diff long text, Failed action very long target title, Deleted target no diff, System-initiated no human actor, Security event failed login) and the My activity states Default and Details: the rows behind the scrim show relative times and the panel shows the browser's local time. Their Vitest coverage is cases 3, 5, 25 to 30.
• Layout, from ActivityFrame.dc.html, not components.md: header row is the title block (20 px/28 px title) on the left and the 32 px (44 px mobile) "Export" button on the right, aligned to the bottom; the strip is 4 columns with a 12 px gap on desktop and a clipped row of 156 px cards with an 8 px gap on mobile; the table header is 36 px, day rows 32 px, rows at least 52 px; the slide-over is 480 px wide on desktop, the bottom sheet 88 % high.
• Error is drawn as the frame's alert (error soft background, circle-x, title, text, 28 px outline "Try again"), the empty states as the frame's centred panel (44 px icon box, 15 px semibold title, muted text up to 340 px).
• Not covered by screenshots: keyboard and focus order (Tab reaches Export CSV, the strip cards, the search, the selects, the groups, a row; Enter opens the details; focus is trapped in the slide-over and returns to the row on close; Escape closes it); hover (the row, the native title tooltip), the 240 ms slide-over and sheet motion and the skeleton pulse, all stopped under reduced motion; the date-range popover.

Manual verification

• Real round trips against task dev — Vitest only mocks useApi. As owner: perform an article publish, an image upload and a failed login, then confirm they appear newest first with the right sentences, the shield marker on the failed login, the Succeeded and Failed badges, the summary numbers and the sparkline bars; apply each filter and each card; page through with size 25, 50 and 100; open the details across a page boundary.
• Real CSV — click "Export" with and without filters and open activity.csv: columns when,actor,action,target,outcome,source,ip, the filtered rows only, no page or size applied, neutralised cells that start with =, +, - or @; confirm the browser download prompt and the two toasts.
• Admin session — sign in as an admin: the same full view as the owner.
• Time zones — set the OS time zone to UTC-8 and UTC+9, reload, and confirm the day separators, the clock times, the "(your time)" line and the UTC line are consistent.
• Regular user — no real account can reach "My activity" today; confirm by a mocked /v1/auth/me in the browser (or a future role) that the view has no strip, no Person filter and no export, and that the server answers 403 for actor=user:2 and for the summary and export.
• API key — calling GET /v1/activity with an API key answers 403 "This action needs a real session." and the SPA never does it.
• "Today", "Yesterday" and relative times — confirm them against the real clock, since visual:check skips every state that shows them.
• French — switch the language and read every state, the sentences and the toasts.
• Real screen readers and zoom — row selection, the sparkline buttons (labelled by the card text), the sheet focus trap.