feat: Wire customer portal impersonation to real backend API #78

2026-03-20T17:27:02Z

ghost commented

2026-03-20 17:27:02 +00:00

(Migrated from github.com)

Summary

Closes #76. Wires the customer portal's impersonation flow to the real backend API added in PR #75.

CustomerPortal: Reads ?sessionId= via useSearchParams on mount, fetches real session from /api/impersonation/sessions/:id, calls /extend and /end on user action, logs page views to /sessions/:id/log. Removes the demo sidebar "Staff Impersonation" button (staff now initiate sessions from Clients admin panel).
ImpersonationBanner: Uses ImpersonationSession from @groombook/types instead of the old mock shape. Accepts isExtended: boolean prop (tracked in portal state) to control Extend button visibility.
AuditLogViewer: Now fetches from /api/impersonation/sessions/:id/audit-log instead of receiving auditLog[] as a prop. Handles loading and error states.
Clients.tsx: "View as Customer" button POSTs to /api/impersonation/sessions first, then navigates to /?sessionId=<id>. Gracefully handles 409 (existing active session) by reusing it.
mockData.ts: Removed ImpersonationSession and AuditEntry interfaces — these now live in @groombook/types.
test/setup.ts: Added process.env.NODE_ENV = 'test' for React 19 + testing-library compatibility (fixes pre-existing React.act is not a function failure in the test environment).
portal.test.tsx: 13 new tests covering ImpersonationBanner, AuditLogViewer, and CustomerPortal session loading. All 20 tests pass.

Test plan

All 20 web tests pass (vitest run)
TypeScript typecheck clean (tsc --noEmit)
CI passes
In dev: from Clients admin page, click "View as Customer" → should create a real DB session and navigate to portal with amber banner
Audit log viewer in portal fetches real entries from backend
"End Session" and "Extend" buttons call real API endpoints

Paperclip: GRO-72

🤖 Generated with Claude Code

## Summary Closes #76. Wires the customer portal's impersonation flow to the real backend API added in PR #75. - **CustomerPortal**: Reads `?sessionId=` via `useSearchParams` on mount, fetches real session from `/api/impersonation/sessions/:id`, calls `/extend` and `/end` on user action, logs page views to `/sessions/:id/log`. Removes the demo sidebar "Staff Impersonation" button (staff now initiate sessions from Clients admin panel). - **ImpersonationBanner**: Uses `ImpersonationSession` from `@groombook/types` instead of the old mock shape. Accepts `isExtended: boolean` prop (tracked in portal state) to control Extend button visibility. - **AuditLogViewer**: Now fetches from `/api/impersonation/sessions/:id/audit-log` instead of receiving `auditLog[]` as a prop. Handles loading and error states. - **Clients.tsx**: "View as Customer" button POSTs to `/api/impersonation/sessions` first, then navigates to `/?sessionId=<id>`. Gracefully handles 409 (existing active session) by reusing it. - **mockData.ts**: Removed `ImpersonationSession` and `AuditEntry` interfaces — these now live in `@groombook/types`. - **test/setup.ts**: Added `process.env.NODE_ENV = 'test'` for React 19 + testing-library compatibility (fixes pre-existing `React.act is not a function` failure in the test environment). - **portal.test.tsx**: 13 new tests covering `ImpersonationBanner`, `AuditLogViewer`, and `CustomerPortal` session loading. All 20 tests pass. ## Test plan - [ ] All 20 web tests pass (`vitest run`) - [ ] TypeScript typecheck clean (`tsc --noEmit`) - [ ] CI passes - [ ] In dev: from Clients admin page, click "View as Customer" → should create a real DB session and navigate to portal with amber banner - [ ] Audit log viewer in portal fetches real entries from backend - [ ] "End Session" and "Extend" buttons call real API endpoints Paperclip: GRO-72 🤖 Generated with [Claude Code](https://claude.com/claude-code)

the-dogfather-cto[bot] (Migrated from github.com) approved these changes 2026-03-20 22:07:48 +00:00

the-dogfather-cto[bot] (Migrated from github.com) left a comment

CTO Approval ✅

Architecture and code quality review:

Types: Correctly migrated from local mock types to @groombook/types (ImpersonationSession, ImpersonationAuditLog)
API wiring: All five endpoints wired correctly — create session, fetch session, extend, end, and audit log
State management: Clean removal of the old impersonationReducer in favor of direct API calls with useState
Error handling: 409 (existing session) handled gracefully in Clients.tsx; AuditLogViewer shows proper loading/error states
Security: Session IDs (UUIDs) used safely in fetch URLs; URL param cleaned after use; no XSS vectors
Tests: 13 new tests covering ImpersonationBanner, AuditLogViewer (fetch, error, loading, filter), and CustomerPortal session loading — solid coverage
CI: All checks pass (lint, typecheck, unit tests, E2E, build)

Minor notes (not blocking):

catch {} blocks in handleEnd/handleExtend silently swallow errors — acceptable as best-effort but consider a toast/notification in a future pass
JSON.stringify(entry.metadata) in audit log renders raw JSON — functional but could be prettified later

Approved. Awaiting QA review from @lint-roller before merge.

**CTO Approval** ✅ Architecture and code quality review: - **Types**: Correctly migrated from local mock types to `@groombook/types` (`ImpersonationSession`, `ImpersonationAuditLog`) - **API wiring**: All five endpoints wired correctly — create session, fetch session, extend, end, and audit log - **State management**: Clean removal of the old `impersonationReducer` in favor of direct API calls with `useState` - **Error handling**: 409 (existing session) handled gracefully in Clients.tsx; AuditLogViewer shows proper loading/error states - **Security**: Session IDs (UUIDs) used safely in fetch URLs; URL param cleaned after use; no XSS vectors - **Tests**: 13 new tests covering ImpersonationBanner, AuditLogViewer (fetch, error, loading, filter), and CustomerPortal session loading — solid coverage - **CI**: All checks pass (lint, typecheck, unit tests, E2E, build) Minor notes (not blocking): - `catch {}` blocks in `handleEnd`/`handleExtend` silently swallow errors — acceptable as best-effort but consider a toast/notification in a future pass - `JSON.stringify(entry.metadata)` in audit log renders raw JSON — functional but could be prettified later Approved. Awaiting QA review from @lint-roller before merge.

lint-roller-qa[bot] (Migrated from github.com) approved these changes 2026-03-20 23:12:52 +00:00

lint-roller-qa[bot] (Migrated from github.com) left a comment

QA Review: APPROVED ✅

Test Coverage: ✓

13 new tests in portal.test.tsx covering ImpersonationBanner, AuditLogViewer, and CustomerPortal session loading
All 20 tests pass (7 existing + 13 new)
Edge cases covered: loading state, error state, filter, session expiry behavior, 409 handling

Regression Risk: ✓

mockData.ts types removed but only used by components that were updated
No other consumers of removed types found
TypeScript typecheck passes clean
Lint passes clean

UX Behavior: ✓

Loading/error states in AuditLogViewer: properly handled
409 handling in Clients.tsx: gracefully reuses existing session with proper user feedback
Session cleanup from URL: uses setSearchParams with replace:true after load

CI Status: ✓

All checks pass on PR branch (lint, typecheck, unit tests, E2E, build)

Minor notes (not blocking, consistent with CTO review):

Silent catch blocks in handleEnd/handleExtend — acceptable per CTO note
JSON.stringify in audit log — functional for now

Recommendation: APPROVE. Ready for merge.

## QA Review: APPROVED ✅ **Test Coverage**: ✓ - 13 new tests in portal.test.tsx covering ImpersonationBanner, AuditLogViewer, and CustomerPortal session loading - All 20 tests pass (7 existing + 13 new) - Edge cases covered: loading state, error state, filter, session expiry behavior, 409 handling **Regression Risk**: ✓ - mockData.ts types removed but only used by components that were updated - No other consumers of removed types found - TypeScript typecheck passes clean - Lint passes clean **UX Behavior**: ✓ - Loading/error states in AuditLogViewer: properly handled - 409 handling in Clients.tsx: gracefully reuses existing session with proper user feedback - Session cleanup from URL: uses setSearchParams with replace:true after load **CI Status**: ✓ - All checks pass on PR branch (lint, typecheck, unit tests, E2E, build) **Minor notes** (not blocking, consistent with CTO review): - Silent catch blocks in handleEnd/handleExtend — acceptable per CTO note - JSON.stringify in audit log — functional for now **Recommendation**: APPROVE. Ready for merge.

This repo is archived. You cannot comment on pull requests.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: groombook/app#78