@actuate-media/cms-admin 0.67.0 → 0.68.0

package/src/__tests__/views/page-builder-sections-panel.render.test.tsx

@@ -0,0 +1,138 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { PageNode } from '@actuate-media/cms-core'
+
+const { BuilderSectionsPanel } = await import('../../views/page-builder/BuilderSectionsPanel.js')
+
+/** Minimal builder tree: a hero section plus an empty, hidden section. */
+function makeTree(): PageNode {
+  return {
+    id: 'page1',
+    type: 'page',
+    children: [
+      {
+        id: 'sec1',
+        type: 'section',
+        settings: {},
+        children: [
+          {
+            id: 'cont1',
+            type: 'container',
+            settings: {},
+            children: [
+              {
+                id: 'row1',
+                type: 'row',
+                settings: {},
+                children: [
+                  {
+                    id: 'col1',
+                    type: 'column',
+                    settings: { width: 12 },
+                    children: [
+                      {
+                        id: 'blk1',
+                        type: 'block',
+                        settings: { blockType: 'hero', variant: 'centered' },
+                        data: {},
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      { id: 'sec2', type: 'section', settings: { visibility: 'hidden' }, children: [] },
+    ],
+  }
+}
+
+function renderPanel(over: Partial<Parameters<typeof BuilderSectionsPanel>[0]> = {}) {
+  const props = {
+    tree: makeTree(),
+    selectedNodeId: null,
+    collapsed: false,
+    onToggleCollapsed: vi.fn(),
+    onSelect: vi.fn(),
+    onReorder: vi.fn(),
+    onAddSection: vi.fn(),
+    ...over,
+  }
+  render(<BuilderSectionsPanel {...props} />)
+  return props
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('BuilderSectionsPanel', () => {
+  it('lists the page sections in order with derived names and block counts', () => {
+    renderPanel()
+
+    // First section is named after its first block's catalog label.
+    expect(screen.getByText('Hero')).toBeTruthy()
+    expect(screen.getByText('1 block')).toBeTruthy()
+    // Empty section falls back to a positional name.
+    expect(screen.getByText('Section 2')).toBeTruthy()
+    expect(screen.getByText('Empty section')).toBeTruthy()
+    // Count chip in the header.
+    expect(screen.getByText('2')).toBeTruthy()
+    // Panel is an accessible nav landmark.
+    expect(screen.getByRole('navigation', { name: 'Page sections' })).toBeTruthy()
+  })
+
+  it('fires the selection callback when a section row is clicked', () => {
+    const props = renderPanel()
+
+    // `/^Hero/` excludes the drag handle ("Drag to reorder Hero").
+    fireEvent.click(screen.getByRole('button', { name: /^Hero/ }))
+    expect(props.onSelect).toHaveBeenCalledWith('sec1')
+  })
+
+  it('marks the selected section with aria-current', () => {
+    renderPanel({ selectedNodeId: 'sec1' })
+
+    const row = screen.getByRole('button', { name: /^Hero/ })
+    expect(row.getAttribute('aria-current')).toBe('true')
+  })
+
+  it('exposes keyboard-accessible drag handles per section', () => {
+    renderPanel()
+    expect(screen.getByRole('button', { name: 'Drag to reorder Hero' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Drag to reorder Section 2' })).toBeTruthy()
+  })
+
+  it('fires the add-section callback from the bottom affordance', () => {
+    const props = renderPanel()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add Section' }))
+    expect(props.onAddSection).toHaveBeenCalledTimes(1)
+  })
+
+  it('collapses to a rail with an expand toggle', () => {
+    const props = renderPanel({ collapsed: true })
+
+    // Section rows are gone; only the expand affordance remains.
+    expect(screen.queryByText('Hero')).toBeNull()
+    const toggle = screen.getByRole('button', { name: 'Expand sections panel' })
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+
+    fireEvent.click(toggle)
+    expect(props.onToggleCollapsed).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows a collapse toggle with aria-expanded when open', () => {
+    renderPanel()
+    const toggle = screen.getByRole('button', { name: 'Collapse sections panel' })
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('shows an empty message when the page has no sections', () => {
+    renderPanel({ tree: { id: 'page1', type: 'page', children: [] } })
+    expect(screen.getByText(/No sections yet/)).toBeTruthy()
+  })
+})

package/src/__tests__/views/page-templates.render.test.tsx

@@ -0,0 +1,142 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+const cmsApi = vi.fn()
+vi.mock('../../lib/api.js', () => ({ cmsApi: (...args: unknown[]) => cmsApi(...args) }))
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { PageTemplates } = await import('../../views/page-builder/PageTemplates.js')
+
+function section(id: string) {
+  return { id, type: 'section', settings: {}, children: [] }
+}
+
+const TEMPLATES = [
+  {
+    id: 'builtin-landing',
+    name: 'Landing Page',
+    description: 'Hero, features cards, CTA, testimonials, and final CTA',
+    category: 'landing',
+    builtIn: true,
+    updatedAt: '2026-05-29T00:00:00.000Z',
+    thumbnail: null,
+    tree: { id: 'p1', type: 'page', children: [section('a'), section('b'), section('c')] },
+  },
+  {
+    id: 'custom-1',
+    name: 'Team Member',
+    description: 'Avatar hero, full bio, and contact links',
+    category: 'content',
+    builtIn: false,
+    updatedAt: '2026-06-10T00:00:00.000Z',
+    thumbnail: null,
+    tree: { id: 'p2', type: 'page', children: [section('a')] },
+  },
+]
+
+beforeEach(() => {
+  cmsApi.mockReset()
+  cmsApi.mockImplementation(async (endpoint: string, options?: RequestInit) => {
+    if (endpoint === '/page-templates' && !options?.method) {
+      return { data: TEMPLATES, status: 200 }
+    }
+    return { data: {}, status: 200 }
+  })
+})
+
+describe('PageTemplates card grid', () => {
+  it('renders a card per template with name, category, and section-count meta', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+
+    expect(await screen.findByText('Landing Page')).toBeTruthy()
+    expect(screen.getByText('Team Member')).toBeTruthy()
+    // Section counts derived from each template's tree.
+    expect(screen.getByText(/3 sections/)).toBeTruthy()
+    expect(screen.getByText(/1 section ·/)).toBeTruthy()
+    // Category labels from the design's palette.
+    expect(screen.getByText('Landing Page')).toBeTruthy()
+    expect(screen.getByText('Built-in')).toBeTruthy()
+  })
+
+  it('hides edit/delete actions on built-in templates (server rejects them)', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Landing Page')
+
+    expect(screen.queryByRole('button', { name: 'Edit Landing Page' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Delete Landing Page' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Edit Team Member' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Delete Team Member' })).toBeTruthy()
+  })
+
+  it('deletes a custom template only after the confirm dialog is accepted', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Team Member')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete Team Member' }))
+
+    // Confirm dialog is up; nothing deleted yet.
+    expect(await screen.findByText('Delete template?')).toBeTruthy()
+    expect(cmsApi).not.toHaveBeenCalledWith(
+      '/page-templates/custom-1',
+      expect.objectContaining({ method: 'DELETE' }),
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/page-templates/custom-1',
+        expect.objectContaining({ method: 'DELETE' }),
+      ),
+    )
+  })
+
+  it('opens the edit modal seeded with the template and saves via PUT', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Team Member')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit Team Member' }))
+
+    const nameInput = (await screen.findByPlaceholderText('Template name')) as HTMLInputElement
+    expect(nameInput.value).toBe('Team Member')
+
+    fireEvent.change(nameInput, { target: { value: 'Team Bio' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save changes' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/page-templates/custom-1',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      (c) => (c[1] as RequestInit | undefined)?.method === 'PUT',
+    )!
+    expect(JSON.parse((putCall[1] as RequestInit).body as string)).toMatchObject({
+      name: 'Team Bio',
+      category: 'content',
+    })
+  })
+
+  it('filters cards by search text', async () => {
+    render(<PageTemplates onNavigate={() => {}} />)
+    await screen.findByText('Team Member')
+
+    fireEvent.change(screen.getByPlaceholderText('Search templates…'), {
+      target: { value: 'landing' },
+    })
+
+    await waitFor(() => {
+      expect(screen.queryByText('Team Member')).toBeNull()
+      expect(screen.getByText('Landing Page')).toBeTruthy()
+    })
+  })
+
+  it('shows the empty state when no templates exist', async () => {
+    cmsApi.mockResolvedValue({ data: [], status: 200 })
+    render(<PageTemplates onNavigate={() => {}} />)
+
+    expect(await screen.findByText('No page templates yet')).toBeTruthy()
+  })
+})

package/src/__tests__/views/post-type-editor.render.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+}))
+
+const { PostTypeEditor } = await import('../../views/Posts/PostTypeEditor.js')
+
+const COLLECTIONS = [
+  {
+    slug: 'blog',
+    labels: { singular: 'Blog Post', plural: 'Blog' },
+    type: 'post',
+    urlPrefix: 'blog',
+    description: 'Long-form articles',
+    icon: 'file-text',
+    color: 'purple',
+    group: 'Posts',
+    hidden: false,
+    fieldCount: 3,
+    fields: [
+      { name: 'title', type: 'text', required: true },
+      { name: 'body', type: 'richText', required: false },
+      { name: 'featuredImage', type: 'media', required: false },
+    ],
+  },
+]
+
+const POSTS = {
+  posts: [],
+  total: 7,
+  page: 1,
+  pageSize: 1,
+  types: [
+    {
+      slug: 'blog',
+      singular: 'Blog Post',
+      plural: 'Blog',
+      description: 'Long-form articles',
+      urlPrefix: 'blog',
+      color: 'purple',
+      icon: 'file-text',
+      fieldCount: 3,
+      count: 7,
+    },
+  ],
+  authors: [],
+}
+
+function installMocks() {
+  cmsApiMock.mockImplementation((url: string) => {
+    if (url === '/collections') return { data: COLLECTIONS }
+    if (url.startsWith('/posts')) return { data: POSTS }
+    return { error: `unexpected url: ${url}` }
+  })
+}
+
+describe('PostTypeEditor', () => {
+  beforeEach(() => {
+    cmsApiMock.mockReset()
+    installMocks()
+  })
+
+  it('renders identity, post-count badge, and the live field list', async () => {
+    render(<PostTypeEditor slug="blog" onNavigate={vi.fn()} />)
+
+    await waitFor(() => expect(screen.getByText('Field Builder')).toBeTruthy())
+
+    // Toolbar: breadcrumb + count badge.
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' }).textContent).toContain('Blog')
+    expect(screen.getByText('7 posts')).toBeTruthy()
+
+    // Identity panel values.
+    expect(screen.getByText('Long-form articles')).toBeTruthy()
+    expect(screen.getByText('/api/cms/collections/blog/{id}')).toBeTruthy()
+
+    // Field rows with humanized labels, keys, and type badges.
+    expect(screen.getByText('Featured Image')).toBeTruthy()
+    expect(screen.getByText('featuredImage')).toBeTruthy()
+    expect(screen.getByText('Rich Text')).toBeTruthy()
+    expect(screen.getByText('Required')).toBeTruthy()
+    expect(screen.getAllByText('Optional')).toHaveLength(2)
+  })
+
+  it('generates a copyable field snippet and flags duplicate keys', async () => {
+    render(<PostTypeEditor slug="blog" onNavigate={vi.fn()} />)
+    await waitFor(() => expect(screen.getByText('Field Builder')).toBeTruthy())
+
+    fireEvent.click(screen.getByRole('button', { name: 'Add Field' }))
+    fireEvent.click(screen.getByRole('radio', { name: /Short Text/ }))
+
+    const nameInput = screen.getByLabelText('Field Name')
+    fireEvent.change(nameInput, { target: { value: 'Client Name' } })
+
+    // Auto-derived key + snippet preview.
+    expect((screen.getByLabelText('Field Key') as HTMLInputElement).value).toBe('clientName')
+    expect(screen.getByText(/clientName: \{ type: 'text', label: 'Client Name' \},/)).toBeTruthy()
+
+    // A name colliding with an existing field key blocks the snippet.
+    fireEvent.change(nameInput, { target: { value: 'Featured Image' } })
+    expect(screen.getByText(/already exists on this type/)).toBeTruthy()
+    expect(screen.queryByText('Copy snippet')).toBeNull()
+  })
+
+  it('shows a not-found notice for unknown slugs', async () => {
+    const onNavigate = vi.fn()
+    render(<PostTypeEditor slug="ghost" onNavigate={onNavigate} />)
+
+    await waitFor(() => expect(screen.getByText('No post type named "ghost"')).toBeTruthy())
+    fireEvent.click(screen.getByRole('button', { name: 'Back to Post Types' }))
+    expect(onNavigate).toHaveBeenCalledWith('/posts/types')
+  })
+})

package/src/__tests__/views/security-settings.render.test.tsx

@@ -5,17 +5,23 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 // The Security tab reads `/security` (computed posture + summaries + editable
 // policy), saves via PUT `/security`, and revokes sessions via POST.
 let securityData: any
+/** When set, PUT /security returns this instead of echoing the body. */
+let putResponseOverride:
+  | ((body: any) => { data?: any; error?: string; code?: string; status: number })
+  | null = null
 
 const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: unknown }) => {
   const method = options?.method ?? 'GET'
   if (endpoint === '/security' && method === 'GET') return { data: securityData, status: 200 }
   if (endpoint === '/security' && method === 'PUT') {
     const body = JSON.parse(String(options?.body ?? '{}'))
+    if (putResponseOverride) return putResponseOverride(body)
     securityData = {
       ...securityData,
       settings: {
         mfa: { required: body.mfa.required, gracePeriodDays: body.mfa.gracePeriodDays },
-        session: { maxConcurrentSessions: body.session.maxConcurrentSessions },
+        session: body.session,
+        access: body.access,
       },
     }
     return { data: securityData, status: 200 }
@@ -33,7 +39,8 @@ function baseData(overrides: Record<string, unknown> = {}) {
   return {
     settings: {
       mfa: { required: false, gracePeriodDays: 7 },
-      session: { maxConcurrentSessions: 5 },
+      session: { maxConcurrentSessions: 5, timeoutHours: 168, idleLogoutEnabled: false },
+      access: { ipAllowlist: [], auditLoggingEnabled: true },
     },
     status: {
       status: 'needs_attention',
@@ -75,6 +82,7 @@ function baseData(overrides: Record<string, unknown> = {}) {
       enabled: false,
       source: 'none',
       ranges: [],
+      configRanges: [],
       currentIp: '1.2.3.4',
       currentIpAllowed: null,
     },
@@ -102,6 +110,7 @@ function baseData(overrides: Record<string, unknown> = {}) {
 beforeEach(() => {
   cmsApi.mockClear()
   securityData = baseData()
+  putResponseOverride = null
 })
 
 describe('SecurityTab', () => {
@@ -110,9 +119,14 @@ describe('SecurityTab', () => {
 
     await screen.findByText('Security Status')
     expect(screen.getByText('Authentication & MFA')).toBeTruthy()
-    expect(screen.getByText('Session Policy')).toBeTruthy()
-    expect(screen.getByText('Access & Request Protection')).toBeTruthy()
+    expect(screen.getByText('Sessions')).toBeTruthy()
+    expect(screen.getByText('Access Control')).toBeTruthy()
     expect(screen.getByText('Secrets, Encryption & Audit')).toBeTruthy()
+    // New design controls are present.
+    expect(screen.getByLabelText(/Session timeout/)).toBeTruthy()
+    expect(screen.getByRole('switch', { name: 'Idle auto-logout' })).toBeTruthy()
+    expect(screen.getByLabelText(/Allowed IP addresses/)).toBeTruthy()
+    expect(screen.getByRole('switch', { name: 'Audit logging' })).toBeTruthy()
     // Status badge + warning surfaced.
     expect(screen.getByText('Needs attention')).toBeTruthy()
     expect(screen.getByText('MFA is not required in production')).toBeTruthy()
@@ -197,6 +211,97 @@ describe('SecurityTab', () => {
     await screen.findByText('Other sessions revoked.')
   })
 
+  it('persists the session timeout and idle auto-logout policy', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.change(screen.getByLabelText(/Session timeout/), { target: { value: '8' } })
+    fireEvent.click(screen.getByRole('switch', { name: 'Idle auto-logout' }))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"timeoutHours":8'),
+        }),
+      ),
+    )
+    const putBody = JSON.parse(
+      String(cmsApi.mock.calls.find((c) => c[1]?.method === 'PUT')?.[1]?.body),
+    )
+    expect(putBody.session.idleLogoutEnabled).toBe(true)
+  })
+
+  it('persists the IP allowlist and audit toggle, flagging invalid entries client-side', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    const textarea = screen.getByLabelText(/Allowed IP addresses/) as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'not-an-ip' } })
+    // Inline + summary validation blocks the save.
+    expect((await screen.findAllByText(/not-an-ip/)).length).toBeGreaterThan(0)
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+
+    fireEvent.change(textarea, { target: { value: '203.0.113.0/24\n1.2.3.4' } })
+    fireEvent.click(screen.getByRole('switch', { name: 'Audit logging' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => expect(cmsApi).toHaveBeenCalledWith('/security', expect.anything()))
+    const putBody = JSON.parse(
+      String(cmsApi.mock.calls.find((c) => c[1]?.method === 'PUT')?.[1]?.body),
+    )
+    expect(putBody.access.ipAllowlist).toEqual(['203.0.113.0/24', '1.2.3.4'])
+    expect(putBody.access.auditLoggingEnabled).toBe(false)
+  })
+
+  it('surfaces the IP lockout guard as a confirm dialog and retries with confirmLockout', async () => {
+    let rejected = false
+    putResponseOverride = (body) => {
+      if (body.confirmLockout === true) {
+        putResponseOverride = null
+        securityData = {
+          ...securityData,
+          settings: {
+            ...securityData.settings,
+            session: body.session,
+            access: body.access,
+          },
+        }
+        return { data: securityData, status: 200 }
+      }
+      rejected = true
+      return {
+        error: 'Your current IP (1.2.3.4) is not in the allowlist — saving would lock you out.',
+        code: 'IP_LOCKOUT_RISK',
+        status: 409,
+      }
+    }
+
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.change(screen.getByLabelText(/Allowed IP addresses/), {
+      target: { value: '10.0.0.0/8' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    // The 409 turns into a confirm dialog, not a generic error.
+    const confirm = await screen.findByRole('button', { name: 'Save anyway' })
+    expect(rejected).toBe(true)
+    fireEvent.click(confirm)
+
+    await waitFor(() => {
+      const confirmed = cmsApi.mock.calls.filter(
+        (c) => c[1]?.method === 'PUT' && String(c[1]?.body).includes('"confirmLockout":true'),
+      )
+      expect(confirmed).toHaveLength(1)
+    })
+  })
+
   it('is read-only for non-admin roles', async () => {
     render(<SecurityTab role="EDITOR" />)
     await screen.findByText('Security Status')
@@ -208,5 +313,7 @@ describe('SecurityTab', () => {
     expect(toggle.disabled).toBe(true)
     const select = screen.getByLabelText(/Maximum concurrent sessions/) as HTMLSelectElement
     expect(select.disabled).toBe(true)
+    const textarea = screen.getByLabelText(/Allowed IP addresses/) as HTMLTextAreaElement
+    expect(textarea.disabled).toBe(true)
   })
 })