@actuate-media/cms-admin 0.31.0 → 0.33.0

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

@@ -0,0 +1,219 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+// The SEO defaults tab reads four shared backends: /seo/config (meta defaults +
+// verification), /seo/crawl-settings (sitemap toggles), /seo/sitemap/status
+// (read-only summary), and /seo/index-status (environment).
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/seo/config' && method === 'GET') {
+    return {
+      data: {
+        static: { site: null },
+        overrides: { site: {} },
+        effective: {
+          site: {
+            siteName: 'Acme',
+            siteUrl: 'https://acme.test',
+            titleTemplate: '%page% — %site%',
+            defaultMetaDescription: 'Seed description.',
+            verification: { googleSearchConsole: '', bingWebmasterTools: '' },
+          },
+        },
+        collections: [],
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/seo/crawl-settings' && method === 'GET') {
+    return {
+      data: {
+        autoRegenerateSitemapOnPublish: true,
+        pingSearchEnginesOnPublish: true,
+        sitemapEnabled: true,
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/seo/sitemap/status' && method === 'GET') {
+    return {
+      data: {
+        sitemapUrl: 'https://acme.test/api/cms/sitemap.xml',
+        lastGeneratedAt: '2026-01-02T03:04:05.000Z',
+        pagesIncluded: 12,
+        pagesExcluded: 1,
+        warnings: [],
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/seo/index-status' && method === 'GET') {
+    return { data: { environment: 'preview' }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+// Stub the Media Center picker: when open, expose a button that selects a known
+// asset (id + url), exercising the asset-id storage path without the real
+// MediaBrowser/network stack.
+vi.mock('../../components/MediaPickerModal.js', () => ({
+  MediaPickerModal: ({
+    open,
+    onSelect,
+    onSelectItem,
+  }: {
+    open: boolean
+    onSelect: (url: string) => void
+    onSelectItem?: (item: { id: string }) => void
+  }) =>
+    open ? (
+      <button
+        type="button"
+        onClick={() => {
+          onSelect('https://cdn.test/og.png')
+          onSelectItem?.({ id: 'asset-123' })
+        }}
+      >
+        pick-asset
+      </button>
+    ) : null,
+}))
+
+const { SeoSettingsTab } = await import('../../views/settings/SeoSettingsTab.js')
+
+beforeEach(() => {
+  cmsApi.mockClear()
+})
+
+describe('SeoSettingsTab', () => {
+  it('renders the workspace callout and loads meta defaults from /seo/config', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+
+    expect(await screen.findByText('Looking for the full SEO workspace?')).toBeTruthy()
+    expect((screen.getByLabelText('Title template') as HTMLInputElement).value).toBe(
+      '%page% — %site%',
+    )
+    expect((screen.getByLabelText('Default meta description') as HTMLTextAreaElement).value).toBe(
+      'Seed description.',
+    )
+    // Clean form → Save disabled.
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('routes "Open SEO" to /seo', async () => {
+    const onNavigate = vi.fn()
+    render(<SeoSettingsTab role="ADMIN" onNavigate={onNavigate} />)
+    await screen.findByText('Looking for the full SEO workspace?')
+    fireEvent.click(screen.getByRole('button', { name: /Open SEO/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/seo')
+  })
+
+  it('rejects an unsupported title-template token and blocks save', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    const tpl = (await screen.findByLabelText('Title template')) as HTMLInputElement
+    fireEvent.change(tpl, { target: { value: '%page% %bogus%' } })
+
+    expect((await screen.findAllByText(/Unsupported token/i)).length).toBeGreaterThan(0)
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('shows a character count and warns when the description is too long', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    const desc = (await screen.findByLabelText('Default meta description')) as HTMLTextAreaElement
+    fireEvent.change(desc, { target: { value: 'x'.repeat(200) } })
+
+    expect(screen.getByText('200/160')).toBeTruthy()
+    expect((await screen.findAllByText(/truncate/i)).length).toBeGreaterThan(0)
+  })
+
+  it('persists meta defaults + verification to the shared /seo/config', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    const google = (await screen.findByLabelText('Google Search Console')) as HTMLInputElement
+    fireEvent.change(google, { target: { value: 'goog-token' } })
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/seo/config',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/seo/config' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    expect(body.site.verification.googleSearchConsole).toBe('goog-token')
+  })
+
+  it('stores the selected social image asset id from the Media Center picker', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    await screen.findByLabelText('Title template')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Choose image' }))
+    fireEvent.click(screen.getByRole('button', { name: 'pick-asset' }))
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/seo/config',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+    const putCall = cmsApi.mock.calls.find(
+      ([e, o]) => e === '/seo/config' && (o as { method?: string })?.method === 'PUT',
+    )
+    const body = JSON.parse((putCall![1] as { body: string }).body)
+    expect(body.site.defaultSocialImageAssetId).toBe('asset-123')
+    expect(body.site.defaultOgImage).toBe('https://cdn.test/og.png')
+  })
+
+  it('persists sitemap toggles to the shared /seo/crawl-settings', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    await screen.findByLabelText('Title template')
+    fireEvent.click(screen.getByRole('switch', { name: 'Ping search engines on publish' }))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/seo/crawl-settings',
+        expect.objectContaining({ method: 'PUT' }),
+      ),
+    )
+  })
+
+  it('shows the read-only sitemap summary', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    await screen.findByLabelText('Title template')
+    expect(screen.getByText('Included URLs')).toBeTruthy()
+    expect(screen.getByText('12')).toBeTruthy()
+    expect(screen.getByRole('link', { name: /View sitemap/ })).toBeTruthy()
+  })
+
+  it('is read-only for non-admins', async () => {
+    render(<SeoSettingsTab role="EDITOR" />)
+    expect(await screen.findByText(/read-only access to SEO defaults/i)).toBeTruthy()
+    // Scope to the Meta Defaults region: the advanced SEOConfigPanel disclosure
+    // also mounts and can briefly produce overlapping label matches.
+    const metaCard = screen.getByRole('region', { name: 'Meta Defaults' })
+    expect((within(metaCard).getByLabelText('Title template') as HTMLInputElement).disabled).toBe(
+      true,
+    )
+  })
+})

package/src/__tests__/views/settings-save-footer.render.test.tsx

@@ -3,11 +3,16 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 
 /**
- * Regression: the shared "Save Changes" footer must only render on tabs that
- * actually persist through `handleSave` (currently just Layout, which writes
- * `defaultLayout` into the settings global). On self-managed tabs like SEO it
- * was rendering a footer whose click toasted "Settings saved successfully!"
- * while persisting none of the tab's edits — misleading, no-op UI.
+ * Regression: the shared no-op "Save Changes" footer (driven by the settings
+ * global `handleSave`) must only render on tabs that actually persist through
+ * it (currently just Layout). On self-managed tabs like SEO it used to render a
+ * SECOND footer whose click toasted "Settings saved successfully!" while
+ * persisting none of the tab's edits — misleading, no-op UI.
+ *
+ * The SEO tab now owns a real `SettingsSaveBar` (also labelled "Save Changes")
+ * that persists through `/seo/config`, so the contract is: exactly ONE
+ * "Save Changes" button on the SEO tab — the tab's own — never the global one
+ * stacked on top of it.
  */
 const SEO_CONFIG = {
   static: { site: null },
@@ -44,15 +49,17 @@ beforeEach(() => {
 })
 
 describe('Settings shared save footer', () => {
-  it('does NOT render the global "Save Changes" footer on the self-managed SEO tab', async () => {
+  it("renders only the SEO tab's own save bar, not the global footer on top", async () => {
     render(<Settings config={LAYOUT_CONFIG} session={SESSION} initialTab="seo" />)
 
-    // The SEO panel owns its own persistence ("Save SEO defaults").
+    // The Advanced disclosure still mounts the per-collection SEO panel, which
+    // owns its own persistence ("Save SEO defaults").
     expect(
       (await screen.findAllByRole('button', { name: 'Save SEO defaults' })).length,
     ).toBeGreaterThan(0)
-    // The shared footer ("Save Changes") must be absent here.
-    expect(screen.queryByRole('button', { name: 'Save Changes' })).toBeNull()
+    // The tab's own SettingsSaveBar is the ONLY "Save Changes" button — the
+    // no-op global footer must not be stacked on top of it.
+    expect(screen.getAllByRole('button', { name: 'Save Changes' })).toHaveLength(1)
   })
 
   it('renders the global "Save Changes" footer on the Layout tab', async () => {

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

@@ -62,11 +62,32 @@ const PERMISSIONS = {
 const { cmsApi } = vi.hoisted(() => ({ cmsApi: vi.fn() }))
 vi.mock('../../lib/api.js', () => ({ cmsApi }))
 
+const DIRECTORY = [
+  {
+    id: 'u1',
+    name: 'Priya Nair',
+    email: 'priya@actuatemedia.com',
+    status: 'active',
+    isCurrentUser: false,
+  },
+  {
+    id: 'u2',
+    name: 'Dana Chen',
+    email: 'dana@actuatemedia.com',
+    status: 'active',
+    isCurrentUser: false,
+  },
+]
+
 cmsApi.mockImplementation(async (endpoint?: string) => {
   if (!endpoint) return { data: null, status: 200 }
+  if (endpoint.includes('/transfer-content'))
+    return { data: { documents: 4, media: 0, templates: 0, total: 4 }, 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 === '/users' || endpoint.startsWith('/users?'))
+    return { data: DIRECTORY, status: 200 }
   if (endpoint.startsWith('/users/u1')) return { data: DETAIL, status: 200 }
   return { data: null, status: 200 }
 })
@@ -116,4 +137,26 @@ describe('UserDetailDrawer', () => {
     await waitFor(() => expect(screen.getByText('content.publish')).toBeTruthy())
     expect(screen.getByText('dashboard.view')).toBeTruthy()
   })
+
+  it('transfers content ownership to a chosen active recipient', async () => {
+    render(<UserDetailDrawer userId="u1" open onOpenChange={() => {}} />)
+    await screen.findByText('Priya Nair')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Transfer content' }))
+
+    // Modal opens and loads the directory, excluding the target (u1).
+    expect(await screen.findByText('Transfer content ownership')).toBeTruthy()
+    const select = (await screen.findByLabelText('Transfer to')) as HTMLSelectElement
+    fireEvent.change(select, { target: { value: 'u2' } })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Transfer' }))
+
+    await waitFor(() =>
+      expect(
+        cmsApi.mock.calls.some(([endpoint]) =>
+          String(endpoint).includes('/users/u1/transfer-content'),
+        ),
+      ).toBe(true),
+    )
+  })
 })

package/src/components/MediaPickerModal.tsx

@@ -16,14 +16,35 @@ interface MediaItem {
   height?: number
 }
 
+/** Minimal selected-asset shape exposed to callers that need the asset id. */
+export interface SelectedMediaItem {
+  id: string
+  storageKey: string
+  filename: string
+  mimeType: string
+  width?: number
+  height?: number
+}
+
 export interface MediaPickerModalProps {
   open: boolean
   onClose: () => void
   onSelect: (url: string, alt?: string) => void
+  /**
+   * Optional richer callback fired alongside `onSelect` with the full media
+   * item, so callers that need to store the asset id (not just the URL) can.
+   */
+  onSelectItem?: (item: SelectedMediaItem) => void
   accept?: string
 }
 
-export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPickerModalProps) {
+export function MediaPickerModal({
+  open,
+  onClose,
+  onSelect,
+  onSelectItem,
+  accept,
+}: MediaPickerModalProps) {
   const [tab, setTab] = useState<'library' | 'upload'>('library')
   const [search, setSearch] = useState('')
   const [uploading, setUploading] = useState(false)
@@ -52,9 +73,17 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
     if (res.error) {
       toast.error(res.error)
     } else if (res.data) {
-      const mediaItem = res.data as any
+      const mediaItem = res.data as MediaItem
       const url = mediaItem.storageKey ?? ''
       toast.success(`Uploaded ${file.name}`)
+      onSelectItem?.({
+        id: mediaItem.id,
+        storageKey: mediaItem.storageKey,
+        filename: mediaItem.filename ?? file.name,
+        mimeType: mediaItem.mimeType ?? file.type,
+        width: mediaItem.width,
+        height: mediaItem.height,
+      })
       onSelect(url, file.name)
       onClose()
     }
@@ -64,6 +93,14 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
   }
 
   function handleSelectItem(item: MediaItem) {
+    onSelectItem?.({
+      id: item.id,
+      storageKey: item.storageKey,
+      filename: item.filename,
+      mimeType: item.mimeType,
+      width: item.width,
+      height: item.height,
+    })
     onSelect(item.storageKey, item.filename)
     onClose()
   }

package/src/views/Settings.tsx

@@ -22,8 +22,8 @@ import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
-import { SEOConfigPanel } from '../components/SEOConfigPanel.js'
 import { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
+import { SeoSettingsTab } from './settings/SeoSettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
 import { Users as UsersView } from './Users.js'
@@ -314,7 +314,7 @@ export function Settings({
         </Tabs.Content>
 
         <Tabs.Content value="seo" className="space-y-4">
-          <SEOConfigPanel />
+          <SeoSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
         </Tabs.Content>
 
         <Tabs.Content value="ai" className="space-y-4">