@actuate-media/cms-admin 0.29.0 → 0.31.0

package/src/__tests__/views/user-detail-drawer.render.test.tsx

@@ -0,0 +1,119 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+
+/**
+ * Render tests for the User detail drawer: overview facts, lazy-loaded Sessions
+ * and Permissions tabs, and the security action surface.
+ */
+
+const DETAIL = {
+  id: 'u1',
+  name: 'Priya Nair',
+  email: 'priya@actuatemedia.com',
+  avatarUrl: null,
+  initials: 'PN',
+  role: 'EDITOR',
+  roleName: 'Editor',
+  status: 'active',
+  mfaEnabled: true,
+  mfaRequired: false,
+  passwordSet: true,
+  forcePasswordReset: false,
+  failedLoginCount: 0,
+  lockedAt: null,
+  suspendedAt: null,
+  authProvider: null,
+  oauthProviders: [],
+  ssoOnly: false,
+  emailVerified: true,
+  lastLoginAt: new Date(Date.now() - 86400000).toISOString(),
+  lastActiveAt: new Date(Date.now() - 86400000).toISOString(),
+  acceptedInviteAt: new Date('2026-01-02').toISOString(),
+  createdAt: new Date('2026-01-01').toISOString(),
+  invitedBy: { id: 'o1', name: 'Dana Chen', email: 'dana@actuatemedia.com' },
+  externalDomain: false,
+  contentOwnedCount: 4,
+  isCurrentUser: false,
+}
+
+const SESSIONS = [
+  {
+    id: 's1',
+    deviceLabel: 'Chrome on macOS',
+    browser: 'Chrome',
+    os: 'macOS',
+    ipCountry: null,
+    createdAt: new Date(Date.now() - 3600000).toISOString(),
+    lastSeenAt: new Date().toISOString(),
+    expiresAt: new Date(Date.now() + 86400000).toISOString(),
+    revokedAt: null,
+    current: false,
+    active: true,
+  },
+]
+
+const PERMISSIONS = {
+  role: 'EDITOR',
+  roleName: 'Editor',
+  permissions: ['dashboard.view', 'content.publish'],
+}
+
+const { cmsApi } = vi.hoisted(() => ({ cmsApi: vi.fn() }))
+vi.mock('../../lib/api.js', () => ({ cmsApi }))
+
+cmsApi.mockImplementation(async (endpoint?: string) => {
+  if (!endpoint) return { data: null, status: 200 }
+  if (endpoint.endsWith('/sessions')) return { data: SESSIONS, status: 200 }
+  if (endpoint.endsWith('/permissions')) return { data: PERMISSIONS, status: 200 }
+  if (endpoint.endsWith('/activity')) return { data: [], status: 200 }
+  if (endpoint.startsWith('/users/u1')) return { data: DETAIL, status: 200 }
+  return { data: null, status: 200 }
+})
+
+const { UserDetailDrawer } = await import('../../views/users/UserDetailDrawer.js')
+
+// Radix Tabs activates on mousedown (button 0), not a bare click.
+function selectTab(name: string) {
+  const tab = screen.getByRole('tab', { name })
+  fireEvent.mouseDown(tab, { button: 0 })
+  fireEvent.click(tab)
+}
+
+describe('UserDetailDrawer', () => {
+  beforeEach(() => cmsApi.mockClear())
+
+  it('renders overview facts for the user', async () => {
+    render(<UserDetailDrawer userId="u1" open onOpenChange={() => {}} />)
+    expect(await screen.findByText('Priya Nair')).toBeTruthy()
+    expect(screen.getByText('Content owned')).toBeTruthy()
+    expect(screen.getByText('4 items')).toBeTruthy()
+    expect(screen.getByText('Dana Chen')).toBeTruthy()
+  })
+
+  it('shows security actions on the Security tab', async () => {
+    render(<UserDetailDrawer userId="u1" open onOpenChange={() => {}} />)
+    await screen.findByText('Priya Nair')
+    selectTab('Security')
+    expect(await screen.findByText('Multi-factor authentication')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Reset MFA' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Send reset' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Suspend' })).toBeTruthy()
+  })
+
+  it('lazy-loads the Sessions tab', async () => {
+    render(<UserDetailDrawer userId="u1" open onOpenChange={() => {}} />)
+    await screen.findByText('Priya Nair')
+    selectTab('Sessions')
+    expect(await screen.findByText('Chrome on macOS')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Revoke all' })).toBeTruthy()
+  })
+
+  it('lazy-loads derived permissions', async () => {
+    render(<UserDetailDrawer userId="u1" open onOpenChange={() => {}} />)
+    await screen.findByText('Priya Nair')
+    selectTab('Permissions')
+    await waitFor(() => expect(screen.getByText('content.publish')).toBeTruthy())
+    expect(screen.getByText('dashboard.view')).toBeTruthy()
+  })
+})

package/src/__tests__/views/users.render.test.tsx

@@ -0,0 +1,155 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/react'
+
+/**
+ * Render tests for the rebuilt Users tab: dynamic metric cards, access-review
+ * banner, team table (members + pending invites), role filter pills, search,
+ * and the invite modal.
+ */
+
+const MEMBERS = [
+  {
+    id: 'u1',
+    name: 'Dana Chen',
+    email: 'dana@actuatemedia.com',
+    initials: 'DC',
+    role: 'OWNER',
+    roleName: 'Owner',
+    status: 'active',
+    mfaEnabled: true,
+    externalDomain: false,
+    lastLoginAt: new Date().toISOString(),
+    lastActiveAt: new Date().toISOString(),
+    acceptedInviteAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    isCurrentUser: true,
+  },
+  {
+    id: 'u2',
+    name: 'Priya Nair',
+    email: 'priya@actuatemedia.com',
+    initials: 'PN',
+    role: 'EDITOR',
+    roleName: 'Editor',
+    status: 'active',
+    mfaEnabled: true,
+    externalDomain: false,
+    lastLoginAt: new Date(Date.now() - 86400000).toISOString(),
+    lastActiveAt: new Date(Date.now() - 86400000).toISOString(),
+    acceptedInviteAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    isCurrentUser: false,
+  },
+]
+
+const INVITES = [
+  {
+    id: 'i1',
+    email: 'jordan@actuatemedia.com',
+    role: 'EDITOR',
+    roleName: 'Editor',
+    status: 'PENDING',
+    expiresAt: new Date(Date.now() + 5 * 86400000).toISOString(),
+    createdAt: new Date(Date.now() - 2 * 86400000).toISOString(),
+    expired: false,
+  },
+]
+
+const STATS = {
+  members: 2,
+  pendingInvites: 1,
+  admins: 1,
+  seatsUsed: 3,
+  seatLimit: 10,
+  seatsAvailable: 7,
+  emailConfigured: true,
+}
+
+const REVIEW = [
+  {
+    id: 'inactive_user:u9',
+    userId: 'u9',
+    severity: 'high',
+    type: 'inactive_user',
+    title: 'Access review',
+    description: "Sara Lindqvist (sara@freelance.io) hasn't signed in for 94 days.",
+    recommendedAction: 'Revoke access',
+  },
+]
+
+const { cmsApi } = vi.hoisted(() => ({ cmsApi: vi.fn() }))
+
+vi.mock('../../lib/api.js', () => ({ cmsApi }))
+
+cmsApi.mockImplementation(async (endpoint?: string) => {
+  if (!endpoint) return { data: null }
+  if (endpoint.startsWith('/users/stats')) return { data: STATS }
+  if (endpoint.startsWith('/users')) return { data: MEMBERS }
+  if (endpoint.startsWith('/invites')) return { data: INVITES }
+  if (endpoint.startsWith('/access-review')) return { data: REVIEW }
+  return { data: null }
+})
+
+const { Users } = await import('../../views/Users.js')
+
+describe('Users tab', () => {
+  beforeEach(() => cmsApi.mockClear())
+
+  it('renders dynamic metric cards', async () => {
+    render(<Users embedded />)
+    expect(await screen.findByText('Members')).toBeTruthy()
+    expect(screen.getByText('Pending invites')).toBeTruthy()
+    expect(screen.getByText('Admins')).toBeTruthy()
+    expect(screen.getByText('Seats used')).toBeTruthy()
+    expect(screen.getByText('3 / 10')).toBeTruthy()
+  })
+
+  it('renders the access review banner with the AI badge', async () => {
+    render(<Users embedded />)
+    expect(await screen.findByText('Access review')).toBeTruthy()
+    expect(screen.getByText('AI')).toBeTruthy()
+    expect(screen.getByText(/hasn't signed in for 94 days/)).toBeTruthy()
+  })
+
+  it('renders members and pending invites in the team table', async () => {
+    render(<Users embedded />)
+    expect(await screen.findByText('Dana Chen')).toBeTruthy()
+    expect(screen.getByText('Priya Nair')).toBeTruthy()
+    // pending invite row
+    expect(screen.getByText('jordan@actuatemedia.com')).toBeTruthy()
+    expect(screen.getByText('Invited')).toBeTruthy()
+    expect(screen.getByText(/people have access/)).toBeTruthy()
+  })
+
+  it('filters by role pill', async () => {
+    render(<Users embedded />)
+    await screen.findByText('Dana Chen')
+    fireEvent.click(screen.getByRole('button', { name: 'Owner', pressed: false }))
+    await waitFor(() => expect(screen.queryByText('Priya Nair')).toBeNull())
+    expect(screen.getByText('Dana Chen')).toBeTruthy()
+  })
+
+  it('filters by search', async () => {
+    render(<Users embedded />)
+    await screen.findByText('Dana Chen')
+    fireEvent.change(screen.getByLabelText('Search team members'), { target: { value: 'priya' } })
+    await waitFor(() => expect(screen.queryByText('Dana Chen')).toBeNull())
+    expect(screen.getByText('Priya Nair')).toBeTruthy()
+  })
+
+  it('opens the invite modal with role radio cards', async () => {
+    render(<Users embedded />)
+    await screen.findByText('Dana Chen')
+    fireEvent.click(screen.getByRole('button', { name: /Invite user/ }))
+    const dialog = await screen.findByRole('dialog')
+    expect(within(dialog).getByText('Invite a user')).toBeTruthy()
+    expect(within(dialog).getByPlaceholderText('name@company.com')).toBeTruthy()
+    // Owner sees the advanced Owner role card too (current user is Owner).
+    expect(within(dialog).getByText('Owner')).toBeTruthy()
+    expect(within(dialog).getByText('Admin')).toBeTruthy()
+    expect(within(dialog).getByText('Editor')).toBeTruthy()
+    expect(within(dialog).getByText('Viewer')).toBeTruthy()
+    expect(within(dialog).getByRole('button', { name: 'Send invite' })).toBeTruthy()
+  })
+})

package/src/layout/Header.tsx

@@ -24,9 +24,17 @@ export interface HeaderProps {
    * on view-change.
    */
   pageActions?: ReactNode
+  /** Signs the user out (revokes the server session + clears local state). */
+  onLogout?: () => void
 }
 
-export function Header({ onToggleSidebar, session, onNavigate, pageActions }: HeaderProps) {
+export function Header({
+  onToggleSidebar,
+  session,
+  onNavigate,
+  onLogout,
+  pageActions,
+}: HeaderProps) {
   const [showCommandPalette, setShowCommandPalette] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const { resolvedTheme, setTheme } = useTheme()
@@ -152,7 +160,7 @@ export function Header({ onToggleSidebar, session, onNavigate, pageActions }: He
                 <DropdownMenu.Separator className="bg-border my-1 h-px" />
                 <DropdownMenu.Item
                   className="text-destructive hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none"
-                  onSelect={() => onNavigate('/logout')}
+                  onSelect={() => onLogout?.()}
                 >
                   Logout
                 </DropdownMenu.Item>

package/src/layout/Layout.tsx

@@ -13,6 +13,7 @@ export interface LayoutProps {
   session: any
   currentPath: string
   onNavigate: (path: string) => void
+  onLogout?: () => void
   children: ReactNode
 }
 
@@ -30,7 +31,14 @@ export interface LayoutProps {
  * instead. The previous flex + `fixed`↔`static` toggle caused recurring
  * sidebar-overlap bugs; the grid-based primitive is the contract.
  */
-export function Layout({ config, session, currentPath, onNavigate, children }: LayoutProps) {
+export function Layout({
+  config,
+  session,
+  currentPath,
+  onNavigate,
+  onLogout,
+  children,
+}: LayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
 
@@ -63,6 +71,7 @@ export function Layout({ config, session, currentPath, onNavigate, children }: L
             onToggleSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
             session={session}
             onNavigate={onNavigate}
+            onLogout={onLogout}
             pageActions={pageActions}
           />
         }