@actuate-media/cms-admin 0.18.0 → 0.20.0

package/src/__tests__/lib/posts-service.test.ts

@@ -10,37 +10,6 @@ vi.mock('../../lib/api.js', () => ({
 
 const { fetchPosts, fetchPostTypes } = await import('../../lib/posts-service.js')
 
-interface DocFixture {
-  id: string
-  collection: string
-  title: string
-  slug: string
-  status: 'PUBLISHED' | 'DRAFT' | 'SCHEDULED'
-  createdById: string
-  updatedById: string
-  publishedAt: string | null
-  scheduledAt: string | null
-  createdAt: string
-  updatedAt: string
-  data: Record<string, unknown> | null
-}
-
-function doc(
-  o: Partial<DocFixture> & Pick<DocFixture, 'id' | 'collection' | 'title' | 'slug'>,
-): DocFixture {
-  return {
-    status: 'PUBLISHED',
-    createdById: 'u-david',
-    updatedById: 'u-david',
-    publishedAt: '2026-05-10T00:00:00.000Z',
-    scheduledAt: null,
-    createdAt: '2026-05-10T00:00:00.000Z',
-    updatedAt: '2026-05-10T00:00:00.000Z',
-    data: { seoScore: 80 },
-    ...o,
-  }
-}
-
 const COLLECTIONS_RESPONSE = [
   {
     slug: 'blog',
@@ -54,30 +23,6 @@ const COLLECTIONS_RESPONSE = [
     hidden: false,
     fieldCount: 12,
   },
-  {
-    slug: 'case-studies',
-    labels: { singular: 'Case Study', plural: 'Case Studies' },
-    type: 'post',
-    urlPrefix: 'case-studies',
-    description: 'Case studies',
-    icon: 'briefcase',
-    color: 'green',
-    group: 'Posts',
-    hidden: false,
-    fieldCount: 13,
-  },
-  {
-    slug: 'news',
-    labels: { singular: 'News Item', plural: 'News' },
-    type: 'post',
-    urlPrefix: 'news',
-    description: 'News',
-    icon: 'newspaper',
-    color: 'orange',
-    group: 'Posts',
-    hidden: false,
-    fieldCount: 11,
-  },
   {
     slug: 'pages',
     labels: { singular: 'Page', plural: 'Pages' },
@@ -92,84 +37,95 @@ const COLLECTIONS_RESPONSE = [
   },
 ]
 
-const USERS_RESPONSE = {
-  users: [
-    { id: 'u-sarah', name: 'Sarah Morgan', email: 'sarah@example.com' },
-    { id: 'u-maria', name: 'Maria K', email: 'maria@example.com' },
-    { id: 'u-david', name: 'David Carlson', email: 'david@example.com' },
-  ],
-}
-
-const DOCS: Record<string, DocFixture[]> = {
-  blog: [
-    doc({
+// Canned response from the server-side `GET /posts` aggregate. The server now
+// owns filtering/sorting/pagination, so the client tests assert the mapping
+// from this envelope onto the Post / PostType / PostAuthor shapes and that the
+// query params are forwarded.
+const POSTS_RESPONSE = {
+  posts: [
+    {
+      id: 'n1',
+      collection: 'news',
+      title: 'Q2 2026 Product Roadmap Update',
+      slug: 'q2-roadmap',
+      status: 'SCHEDULED' as const,
+      publishedAt: null,
+      scheduledAt: '2026-06-01T00:00:00.000Z',
+      createdAt: '2026-05-10T00:00:00.000Z',
+      updatedAt: '2026-05-24T00:00:00.000Z',
+      seoScore: 62,
+      author: { id: 'u-sarah', name: 'Sarah Morgan' },
+    },
+    {
       id: 'b1',
       collection: 'blog',
       title: 'The Future of AI Content Marketing',
       slug: 'ai-content-marketing',
-      createdById: 'u-maria',
-      updatedById: 'u-maria',
+      status: 'PUBLISHED' as const,
+      publishedAt: '2026-05-10T00:00:00.000Z',
+      scheduledAt: null,
+      createdAt: '2026-05-10T00:00:00.000Z',
       updatedAt: '2026-05-18T00:00:00.000Z',
-      data: { seoScore: 88 },
-    }),
-    doc({
-      id: 'b2',
-      collection: 'blog',
-      title: 'ActuateCMS vs Contentful',
-      slug: 'actuatecms-vs-contentful',
-      updatedAt: '2026-05-15T00:00:00.000Z',
-      data: { seoScore: 92 },
-    }),
-    doc({
+      seoScore: 88,
+      author: { id: 'u-maria', name: 'Maria K' },
+    },
+    {
       id: 'b3',
       collection: 'blog',
       title: 'Mid-Year Review',
       slug: 'mid-year-cms-trends',
-      status: 'DRAFT',
-      createdById: 'u-sarah',
-      updatedById: 'u-sarah',
+      status: 'DRAFT' as const,
       publishedAt: null,
+      scheduledAt: null,
+      createdAt: '2026-05-10T00:00:00.000Z',
       updatedAt: '2026-05-22T00:00:00.000Z',
-      data: { seoScore: null },
-    }),
+      seoScore: null,
+      author: null,
+    },
   ],
-  'case-studies': [
-    doc({
-      id: 'c1',
-      collection: 'case-studies',
-      title: 'Healthcare Client SEO Results',
-      slug: 'healthcare-seo',
-      status: 'DRAFT',
-      publishedAt: null,
-      updatedAt: '2026-05-19T00:00:00.000Z',
-      data: { seoScore: 38 },
-    }),
+  total: 5,
+  page: 1,
+  pageSize: 10,
+  types: [
+    {
+      slug: 'blog',
+      singular: 'Blog Post',
+      plural: 'Blog',
+      description: 'Blog posts',
+      urlPrefix: 'blog',
+      color: 'purple',
+      icon: 'file-text',
+      fieldCount: 12,
+      count: 3,
+    },
+    {
+      slug: 'news',
+      singular: 'News Item',
+      plural: 'News',
+      description: 'News',
+      urlPrefix: 'news',
+      color: 'orange',
+      icon: 'newspaper',
+      fieldCount: 11,
+      count: 1,
+    },
   ],
-  news: [
-    doc({
-      id: 'n1',
-      collection: 'news',
-      title: 'Q2 2026 Product Roadmap Update',
-      slug: 'q2-roadmap',
-      status: 'SCHEDULED',
-      createdById: 'u-sarah',
-      updatedById: 'u-sarah',
-      publishedAt: null,
-      scheduledAt: '2026-06-01T00:00:00.000Z',
-      updatedAt: '2026-05-24T00:00:00.000Z',
-      data: { seoScore: 62 },
-    }),
+  authors: [
+    { id: 'u-sarah', name: 'Sarah Morgan' },
+    { id: 'u-maria', name: 'Maria K' },
   ],
 }
 
+/** Records the last `/posts` URL the service requested. */
+let lastPostsUrl = ''
+
 function installDefaultMocks() {
+  lastPostsUrl = ''
   cmsApiMock.mockImplementation((url: string) => {
     if (url === '/collections') return { data: COLLECTIONS_RESPONSE }
-    if (url.startsWith('/users')) return { data: USERS_RESPONSE }
-    const m = url.match(/^\/collections\/([^/?]+)/)
-    if (m && m[1]) {
-      const slug = decodeURIComponent(m[1])
-      return { data: { docs: DOCS[slug] ?? [], total: DOCS[slug]?.length ?? 0 } }
+    if (url.startsWith('/posts')) {
+      lastPostsUrl = url
+      return { data: POSTS_RESPONSE }
     }
     return { error: `unexpected url: ${url}` }
   })
@@ -183,7 +139,7 @@ describe('posts-service.fetchPostTypes', () => {
 
   it('returns only post-typed collections (filters out type: page)', async () => {
     const types = await fetchPostTypes()
-    expect(types.map((t) => t.slug).sort()).toEqual(['blog', 'case-studies', 'news'])
+    expect(types.map((t) => t.slug).sort()).toEqual(['blog'])
   })
 
   it('maps collection metadata onto the PostType shape', async () => {
@@ -212,68 +168,83 @@ describe('posts-service.fetchPosts', () => {
     installDefaultMocks()
   })
 
-  it('aggregates posts across all post-typed collections', async () => {
-    const res = await fetchPosts({ pageSize: 20 })
+  it('maps the server posts onto the Post shape', async () => {
+    const res = await fetchPosts({ pageSize: 10 })
     expect(res.total).toBe(5)
-    expect(res.posts.map((p) => p.id).sort()).toEqual(['b1', 'b2', 'b3', 'c1', 'n1'])
-  })
-
-  it('joins authors via /users', async () => {
-    const res = await fetchPosts({ pageSize: 20 })
-    const ai = res.posts.find((p) => p.id === 'b1')
-    expect(ai?.authorName).toBe('Maria K')
-    expect(ai?.authorInitials).toBe('MK')
-  })
-
-  it('sorts by updated date desc by default and surfaces scheduled date for SCHEDULED posts', async () => {
-    const res = await fetchPosts({ pageSize: 20 })
-    // The SCHEDULED news post should win the "date" sort because its
-    // scheduledAt is the most recent date in the fixture set.
-    expect(res.posts[0]?.id).toBe('n1')
-    expect(res.posts[0]?.publishDate).toBe('2026-06-01T00:00:00.000Z')
+    expect(res.posts.map((p) => p.id)).toEqual(['n1', 'b1', 'b3'])
+    const blogPost = res.posts.find((p) => p.id === 'b1')
+    expect(blogPost).toMatchObject({
+      title: 'The Future of AI Content Marketing',
+      postTypeId: 'blog',
+      postTypeName: 'Blog Post',
+      postTypeAccentColor: 'purple',
+      authorId: 'u-maria',
+      authorName: 'Maria K',
+      authorInitials: 'MK',
+      status: 'PUBLISHED',
+      seoScore: 88,
+    })
   })
 
-  it('filters by postType', async () => {
-    const res = await fetchPosts({ postType: 'blog', pageSize: 20 })
-    expect(res.total).toBe(3)
-    expect(res.posts.every((p) => p.postTypeId === 'blog')).toBe(true)
+  it('surfaces the scheduled date for SCHEDULED posts as the display date', async () => {
+    const res = await fetchPosts({})
+    const news = res.posts.find((p) => p.id === 'n1')
+    expect(news?.publishDate).toBe('2026-06-01T00:00:00.000Z')
+    expect(news?.updatedDate).toBe('2026-06-01T00:00:00.000Z')
   })
 
-  it('filters by status', async () => {
-    const res = await fetchPosts({ status: 'DRAFT', pageSize: 20 })
-    expect(res.posts.map((p) => p.id).sort()).toEqual(['b3', 'c1'])
+  it('falls back gracefully when a post has no author', async () => {
+    const res = await fetchPosts({})
+    const orphan = res.posts.find((p) => p.id === 'b3')
+    expect(orphan?.authorName).toBe('Unknown')
+    expect(orphan?.authorInitials).toBe('??')
+    expect(orphan?.authorId).toBe('')
   })
 
-  it('filters by author', async () => {
-    const res = await fetchPosts({ author: 'u-sarah', pageSize: 20 })
-    expect(res.posts.map((p) => p.id).sort()).toEqual(['b3', 'n1'])
+  it('maps the dataset-wide tab counts from the endpoint', async () => {
+    const res = await fetchPosts({})
+    expect(res.types.find((t) => t.slug === 'blog')?.postCount).toBe(3)
+    expect(res.types.find((t) => t.slug === 'news')?.postCount).toBe(1)
   })
 
-  it('searches across title, slug, author name, and post type', async () => {
-    const res = await fetchPosts({ search: 'roadmap' })
-    expect(res.posts).toHaveLength(1)
-    expect(res.posts[0]?.id).toBe('n1')
+  it('returns the contributor list sorted by name', async () => {
+    const res = await fetchPosts({})
+    expect(res.authors.map((a) => a.name)).toEqual(['Maria K', 'Sarah Morgan'])
   })
 
-  it('paginates and exposes the unfiltered tab counts', async () => {
-    const res = await fetchPosts({ pageSize: 2 })
-    expect(res.posts).toHaveLength(2)
-    expect(res.total).toBe(5)
-    const blogTab = res.types.find((t) => t.slug === 'blog')
-    expect(blogTab?.postCount).toBe(3)
-    const newsTab = res.types.find((t) => t.slug === 'news')
-    expect(newsTab?.postCount).toBe(1)
+  it('forwards filter / sort / pagination params to the endpoint', async () => {
+    await fetchPosts({
+      search: 'roadmap',
+      postType: 'news',
+      status: 'SCHEDULED',
+      author: 'u-sarah',
+      sortBy: 'title',
+      sortDirection: 'asc',
+      page: 2,
+      pageSize: 25,
+    })
+    const params = new URLSearchParams(lastPostsUrl.split('?')[1] ?? '')
+    expect(params.get('search')).toBe('roadmap')
+    expect(params.get('postType')).toBe('news')
+    expect(params.get('status')).toBe('SCHEDULED')
+    expect(params.get('author')).toBe('u-sarah')
+    expect(params.get('sortBy')).toBe('title')
+    expect(params.get('sortDirection')).toBe('asc')
+    expect(params.get('page')).toBe('2')
+    expect(params.get('pageSize')).toBe('25')
   })
 
-  it('returns only authors actually present on posts', async () => {
-    const res = await fetchPosts({ pageSize: 20 })
-    expect(res.authors.map((a) => a.id).sort()).toEqual(['u-david', 'u-maria', 'u-sarah'])
+  it('omits "all" filters from the query string', async () => {
+    await fetchPosts({ postType: 'all', status: 'all', author: 'all' })
+    const params = new URLSearchParams(lastPostsUrl.split('?')[1] ?? '')
+    expect(params.has('postType')).toBe(false)
+    expect(params.has('status')).toBe(false)
+    expect(params.has('author')).toBe(false)
   })
 
-  it('uses the postType filter to scope the result set without touching the tab counts', async () => {
-    const res = await fetchPosts({ postType: 'news', pageSize: 20 })
-    expect(res.total).toBe(1)
-    // Tab counts still reflect the full corpus.
-    expect(res.types.find((t) => t.slug === 'blog')?.postCount).toBe(3)
+  it('throws when the endpoint returns an error', async () => {
+    cmsApiMock.mockReset()
+    cmsApiMock.mockImplementation(() => ({ error: 'boom' }))
+    await expect(fetchPosts({})).rejects.toThrow('boom')
   })
 })

package/src/__tests__/views/posts-list-view.render.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the list purely through a mocked posts-service so the test can
+// control what each page returns. fetchPosts echoes the requested page so
+// we can assert page-scoped selection behaviour without a real backend.
+function makePost(id: string, title: string) {
+  return {
+    id,
+    postTypeId: 'articles',
+    postTypeName: 'Article',
+    postTypeAccentColor: 'blue',
+    title,
+    slug: id,
+    authorName: 'Author',
+    authorInitials: 'AU',
+    status: 'PUBLISHED',
+    updatedDate: '2026-01-01T00:00:00.000Z',
+    seoScore: 80,
+  }
+}
+
+const PAGE_ONE = [makePost('a1', 'Alpha'), makePost('a2', 'Alpha Two')]
+const PAGE_TWO = [makePost('b1', 'Beta'), makePost('b2', 'Beta Two')]
+
+const fetchPosts = vi.fn(async ({ page }: { page: number }) => ({
+  posts: page === 1 ? PAGE_ONE : PAGE_TWO,
+  total: 20,
+  types: [{ slug: 'articles', name: 'Article', postCount: 20 }],
+  authors: [],
+}))
+const bulkUpdatePosts = vi.fn(async () => ({ ok: 0, failed: 0 }))
+const bulkDeletePosts = vi.fn(async () => ({ ok: 0, failed: 0 }))
+
+vi.mock('../../lib/posts-service.js', () => ({
+  fetchPosts: (args: { page: number }) => fetchPosts(args),
+  bulkUpdatePosts: (...args: unknown[]) => bulkUpdatePosts(...(args as [])),
+  bulkDeletePosts: (...args: unknown[]) => bulkDeletePosts(...(args as [])),
+}))
+
+const { PostsListView } = await import('../../views/Posts/PostsListView.js')
+
+beforeEach(() => {
+  fetchPosts.mockClear()
+  bulkUpdatePosts.mockClear()
+  bulkDeletePosts.mockClear()
+})
+
+describe('PostsListView — page-scoped selection', () => {
+  it('clears the selection when navigating to another page so the bulk count stays honest', async () => {
+    render(<PostsListView onNavigate={() => {}} />)
+
+    // Wait for page 1 to load, then select a row.
+    const alpha = await screen.findByLabelText('Select "Alpha"')
+    fireEvent.click(alpha)
+    expect(screen.getByText('1 selected')).toBeTruthy()
+
+    // Navigate to page 2.
+    fireEvent.click(screen.getByLabelText('Next page'))
+
+    // Page 2 rows render and the stale selection is gone — no bulk bar,
+    // so a bulk publish/delete can never silently no-op against page 1.
+    await screen.findByLabelText('Select "Beta"')
+    expect(screen.queryByText('1 selected')).toBeNull()
+    expect(screen.queryByText(/selected$/)).toBeNull()
+  })
+
+  it('keeps the bulk count equal to the rows a bulk action will touch', async () => {
+    render(<PostsListView onNavigate={() => {}} />)
+
+    const alpha = await screen.findByLabelText('Select "Alpha"')
+    const alphaTwo = await screen.findByLabelText('Select "Alpha Two"')
+    fireEvent.click(alpha)
+    fireEvent.click(alphaTwo)
+    expect(screen.getByText('2 selected')).toBeTruthy()
+
+    fireEvent.click(screen.getByText('Publish'))
+    await waitFor(() => expect(bulkUpdatePosts).toHaveBeenCalledTimes(1))
+    // The handler received exactly the two rows the bar advertised.
+    const ids = (bulkUpdatePosts.mock.calls[0] as unknown as [unknown[]])[0]
+    expect(ids).toHaveLength(2)
+  })
+})

package/src/components/seo/Drawer.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+/**
+ * Right-side drawer built on Radix Dialog — focus-trapped, escape-closable,
+ * token-only styling. Shared by the SEO editor / fix / copilot drawers.
+ */
+import * as Dialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { btnGhostIcon } from './primitives.js'
+
+export function Drawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  footer,
+  children,
+  width = 'max-w-xl',
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  footer?: ReactNode
+  children: ReactNode
+  width?: string
+}) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="bg-foreground/40 motion-safe:animate-in motion-safe:fade-in fixed inset-0 z-50" />
+        <Dialog.Content
+          className={`bg-card text-foreground fixed inset-y-0 right-0 z-50 flex w-full ${width} motion-safe:animate-in motion-safe:slide-in-from-right flex-col shadow-xl outline-none`}
+        >
+          <header className="border-border flex items-start justify-between gap-3 border-b px-5 py-4">
+            <div className="min-w-0">
+              <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>
+              {description && (
+                <Dialog.Description className="text-muted-foreground mt-0.5 text-sm">
+                  {description}
+                </Dialog.Description>
+              )}
+            </div>
+            <Dialog.Close asChild>
+              <button className={btnGhostIcon} aria-label="Close">
+                <X size={20} aria-hidden />
+              </button>
+            </Dialog.Close>
+          </header>
+          <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">{children}</div>
+          {footer && (
+            <footer className="border-border bg-card flex items-center justify-end gap-2 border-t px-5 py-4">
+              {footer}
+            </footer>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}