@actuate-media/cms-admin 0.20.0 → 0.21.1

package/src/AdminRoot.tsx

@@ -13,8 +13,6 @@ import { Settings } from './views/Settings.js'
 import { Forms } from './views/Forms.js'
 import { FormEditor } from './views/FormEditor.js'
 import { FormSubmissions } from './views/FormSubmissions.js'
-import { Users } from './views/Users.js'
-import { ApiKeys } from './views/ApiKeys.js'
 import { SEO } from './views/SEO.js'
 import { ScriptTags } from './views/ScriptTags.js'
 import { ScriptTagEditor } from './views/ScriptTagEditor.js'
@@ -419,12 +417,14 @@ function AdminShell({
       return <Widgets onNavigate={navigate} />
     }
 
+    // Users + API Keys moved into the Settings view as tabs. The legacy
+    // top-level routes still resolve — they just land on the matching tab.
     if (matchRoute('/users')) {
-      return <Users onNavigate={navigate} />
+      return <Settings onNavigate={navigate} config={config} initialTab="users" />
     }
 
     if (matchRoute('/api-keys')) {
-      return <ApiKeys onNavigate={navigate} />
+      return <Settings onNavigate={navigate} config={config} initialTab="api-keys" />
     }
 
     if (matchRoute('/settings')) {
@@ -702,6 +702,28 @@ const ISOLATION_STYLE: React.CSSProperties = {
 export function AdminRoot(props: AdminRootProps) {
   const defaultDarkMode = props.config?.admin?.branding?.darkMode
 
+  // The admin is private application UI and must never be indexed. Ensure a
+  // `noindex, nofollow` robots meta tag is present while the admin is mounted,
+  // as defense-in-depth alongside the server `robots.txt` Disallow rule. This
+  // covers every consumer install (the admin page is typically a client
+  // component that can't export Next.js route metadata).
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const PREV = document.querySelector<HTMLMetaElement>('meta[name="robots"]')
+    const prevContent = PREV?.getAttribute('content') ?? null
+    const meta = PREV ?? document.createElement('meta')
+    meta.setAttribute('name', 'robots')
+    meta.setAttribute('content', 'noindex, nofollow')
+    if (!PREV) document.head.appendChild(meta)
+    return () => {
+      if (prevContent === null) {
+        meta.remove()
+      } else {
+        meta.setAttribute('content', prevContent)
+      }
+    }
+  }, [])
+
   return (
     <div style={ISOLATION_STYLE} className="actuate-admin">
       <ThemeProvider defaultDarkMode={defaultDarkMode}>

package/src/__tests__/layout/sidebar-posts.test.ts

@@ -156,9 +156,9 @@ describe('buildNavItems', () => {
     // Lands after the static Content destinations, before Settings.
     const menusIdx = items.findIndex((i) => i.path === '/navigations')
     const scriptIdx = items.findIndex((i) => i.path === '/script-tags')
-    const usersIdx = items.findIndex((i) => i.path === '/users')
+    const settingsIdx = items.findIndex((i) => i.path === '/settings')
     expect(menusIdx).toBeGreaterThan(scriptIdx)
-    expect(menusIdx).toBeLessThan(usersIdx)
+    expect(menusIdx).toBeLessThan(settingsIdx)
   })
 
   it('keeps standard Content/Settings entries after collections', () => {
@@ -172,8 +172,10 @@ describe('buildNavItems', () => {
     expect(paths).toContain('/forms')
     expect(paths).toContain('/seo')
     expect(paths).toContain('/script-tags')
-    expect(paths).toContain('/users')
-    expect(paths).toContain('/api-keys')
     expect(paths).toContain('/settings')
+    // Users + API Keys moved into Settings tabs — they are no longer
+    // standalone sidebar destinations.
+    expect(paths).not.toContain('/users')
+    expect(paths).not.toContain('/api-keys')
   })
 })

package/src/__tests__/layout/sidebar-submenu.render.test.tsx

@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { Sidebar } from '../../layout/Sidebar.js'
+
+/**
+ * Submenu rendering behaviour:
+ *  - Expanded: parent children (e.g. Posts -> All Posts / Post Types) render
+ *    inline beneath the parent.
+ *  - Collapsed: children are hidden inline and instead revealed in a
+ *    hover/focus flyout, so the 80px rail stays clean but sub-pages remain
+ *    reachable.
+ */
+function renderSidebar(collapsed: boolean) {
+  return render(
+    <Sidebar
+      collapsed={collapsed}
+      onToggleCollapse={() => {}}
+      currentPath="/"
+      onNavigate={() => {}}
+    />,
+  )
+}
+
+describe('Sidebar submenus', () => {
+  it('renders children inline when expanded', () => {
+    renderSidebar(false)
+    expect(screen.getByText('All Posts')).toBeTruthy()
+    expect(screen.getByText('Post Types')).toBeTruthy()
+    expect(screen.getByText('Saved Sections')).toBeTruthy()
+    expect(screen.getByText('Widgets')).toBeTruthy()
+  })
+
+  it('collapses and re-expands a parent submenu via the chevron toggle', () => {
+    renderSidebar(false)
+
+    // Children visible by default.
+    expect(screen.getByText('All Posts')).toBeTruthy()
+
+    // Collapse the Posts section.
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse Posts' }))
+    expect(screen.queryByText('All Posts')).toBeNull()
+
+    // Re-expand it.
+    fireEvent.click(screen.getByRole('button', { name: 'Expand Posts' }))
+    expect(screen.getByText('All Posts')).toBeTruthy()
+  })
+
+  it('keeps the active section expanded even when toggled closed', () => {
+    render(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/posts"
+        onNavigate={() => {}}
+      />,
+    )
+
+    // Active section forces the submenu open; the chevron reports it as
+    // expanded and offers to collapse.
+    expect(screen.getByText('All Posts')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse Posts' }))
+    // Still visible because the section is the active route.
+    expect(screen.getByText('All Posts')).toBeTruthy()
+  })
+
+  it('hides children inline when collapsed and exposes them in a hover flyout', async () => {
+    renderSidebar(true)
+
+    // Inline children are not rendered in the collapsed rail.
+    expect(screen.queryByText('All Posts')).toBeNull()
+    expect(screen.queryByText('Post Types')).toBeNull()
+
+    // The parent is still reachable as an icon button labelled for AT.
+    const trigger = screen.getByRole('button', { name: 'Posts' })
+
+    // Hovering the parent opens the flyout (onMouseEnter lives on the wrapper).
+    fireEvent.mouseEnter(trigger.parentElement as HTMLElement)
+
+    await waitFor(() => {
+      expect(screen.getByText('All Posts')).toBeTruthy()
+      expect(screen.getByText('Post Types')).toBeTruthy()
+    })
+  })
+})

package/src/__tests__/lib/seo-service-errors.test.ts

@@ -0,0 +1,60 @@
+// @vitest-environment node
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const cmsApi = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApi(...args),
+}))
+
+const {
+  fetchSeoOverview,
+  fetchSeoContentRecords,
+  fetchSeoIssues,
+  fetchRedirectRules,
+  updateSeoFields,
+} = await import('../../lib/seo-service.js')
+
+afterEach(() => {
+  cmsApi.mockReset()
+})
+
+/**
+ * Regression tests for the "swallowed read errors" blocker. `cmsApi` never
+ * throws — it returns `{ error }` on failure — so the SEO read fetchers must
+ * re-throw, otherwise `useSeoResource` can't distinguish "request failed" from
+ * "empty result" and renders a misleading fallback (e.g. a fake score of 0 /
+ * grade "Critical") with the error/retry UI permanently unreachable.
+ */
+describe('SEO service read fetchers surface errors', () => {
+  it('fetchSeoOverview throws when the request fails (instead of returning a fake 0 score)', async () => {
+    cmsApi.mockResolvedValue({ error: 'Request failed (500)', status: 500 })
+    await expect(fetchSeoOverview()).rejects.toThrow('Request failed (500)')
+  })
+
+  it('fetchSeoContentRecords throws on error', async () => {
+    cmsApi.mockResolvedValue({ error: 'Network error', status: 0 })
+    await expect(fetchSeoContentRecords()).rejects.toThrow('Network error')
+  })
+
+  it('fetchSeoIssues throws on error', async () => {
+    cmsApi.mockResolvedValue({ error: 'Request failed (503)', status: 503 })
+    await expect(fetchSeoIssues()).rejects.toThrow('Request failed (503)')
+  })
+
+  it('fetchRedirectRules throws on error', async () => {
+    cmsApi.mockResolvedValue({ error: 'boom', status: 500 })
+    await expect(fetchRedirectRules()).rejects.toThrow('boom')
+  })
+
+  it('returns data normally on success', async () => {
+    cmsApi.mockResolvedValue({ data: { records: [{ id: 'r1' }] }, status: 200 })
+    await expect(fetchSeoContentRecords()).resolves.toEqual([{ id: 'r1' }])
+  })
+
+  it('mutations still return { error } rather than throwing', async () => {
+    cmsApi.mockResolvedValue({ error: 'forbidden', status: 403 })
+    await expect(updateSeoFields('page', 'doc-1', { metaTitle: 'x' })).resolves.toEqual({
+      error: 'forbidden',
+    })
+  })
+})

package/src/__tests__/views/use-seo-resource.test.tsx

@@ -0,0 +1,68 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { act, render, screen, waitFor } from '@testing-library/react'
+
+import { useSeoResource } from '../../views/seo/useSeoResource.js'
+
+/**
+ * Regression test for the `useSeoResource` stale-response race: when the
+ * dependency (and therefore the fetcher) changes rapidly, a slow earlier
+ * request that resolves AFTER a faster later one must not clobber the newer
+ * result. We drive this with two deferred promises whose resolution order is
+ * inverted relative to the request order.
+ */
+
+function Probe({ dep, fetcher }: { dep: number; fetcher: () => Promise<string> }) {
+  const { data, loading, error } = useSeoResource<string>(fetcher, [dep])
+  return (
+    <div>
+      <span data-testid="state">{loading ? 'loading' : (error ?? data ?? 'empty')}</span>
+    </div>
+  )
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+describe('useSeoResource', () => {
+  it('ignores a stale (earlier) response that resolves after the latest one', async () => {
+    const first = deferred<string>()
+    const second = deferred<string>()
+
+    // First render uses the "first" fetcher (slow), then we switch deps so the
+    // hook re-runs with the "second" fetcher (fast).
+    const firstFetcher = () => first.promise
+    const secondFetcher = () => second.promise
+
+    const { rerender } = render(<Probe dep={1} fetcher={firstFetcher} />)
+    rerender(<Probe dep={2} fetcher={secondFetcher} />)
+
+    // The newer request resolves FIRST.
+    await act(async () => {
+      second.resolve('NEW')
+    })
+    await waitFor(() => expect(screen.getByTestId('state').textContent).toBe('NEW'))
+
+    // The stale earlier request resolves LATER — it must be ignored.
+    await act(async () => {
+      first.resolve('OLD')
+    })
+    expect(screen.getByTestId('state').textContent).toBe('NEW')
+  })
+
+  it('surfaces fetcher errors', async () => {
+    const d = deferred<string>()
+    render(<Probe dep={1} fetcher={() => d.promise} />)
+    await act(async () => {
+      d.reject(new Error('boom'))
+    })
+    await waitFor(() => expect(screen.getByTestId('state').textContent).toBe('boom'))
+  })
+})

package/src/components/Breadcrumbs.tsx

@@ -36,7 +36,10 @@ export interface BreadcrumbsProps {
 }
 
 export function Breadcrumbs({ currentPath, onNavigate }: BreadcrumbsProps) {
-  const segments = currentPath.split('/').filter(Boolean)
+  // Strip query string + hash so tab-driven routes (e.g. `/settings?tab=users`,
+  // `/seo?tab=audit`) don't leak the raw query into a crumb label.
+  const cleanPath = currentPath.split('?')[0]!.split('#')[0]!
+  const segments = cleanPath.split('/').filter(Boolean)
 
   if (segments.length === 0) return null
 

package/src/components/seo/Drawer.tsx

@@ -31,6 +31,10 @@ export function Drawer({
       <Dialog.Portal>
         <Dialog.Overlay className="bg-foreground/40 motion-safe:animate-in motion-safe:fade-in fixed inset-0 z-50" />
         <Dialog.Content
+          // Radix auto-associates `aria-describedby` with the Dialog.Description
+          // when one is present; when it isn't, explicitly clear the attribute so
+          // Radix doesn't emit its "Missing Description" console warning.
+          {...(description ? {} : { 'aria-describedby': undefined })}
           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">

package/src/components/seo/SeoEditorDrawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { cloneElement, isValidElement, useEffect, useId, useState, type ReactElement } from 'react'
 import { Sparkles, Check } from 'lucide-react'
 import { toast } from 'sonner'
 import {
@@ -36,13 +36,25 @@ function Field({
   children: React.ReactNode
   hint?: React.ReactNode
 }) {
+  // Associate the visible label with its control for screen readers. We inject
+  // a generated id onto the single child input/textarea (unless it already has
+  // one) and point the <label htmlFor> at it.
+  const generatedId = useId()
+  let control = children
+  if (isValidElement(children) && (children.props as { id?: string }).id == null) {
+    control = cloneElement(children as ReactElement<{ id?: string }>, { id: generatedId })
+  }
+  const controlId = isValidElement(control) ? (control.props as { id?: string }).id : undefined
+
   return (
     <div className="space-y-1.5">
       <div className="flex items-center justify-between">
-        <label className="text-foreground text-sm font-medium">{label}</label>
+        <label htmlFor={controlId} className="text-foreground text-sm font-medium">
+          {label}
+        </label>
         {hint}
       </div>
-      {children}
+      {control}
     </div>
   )
 }

package/src/components/seo/primitives.tsx

@@ -112,13 +112,16 @@ export function SeoStatusBadge({
 export function SeoScoreBar({ score, className = '' }: { score: number; className?: string }) {
   const grade = gradeFromScore(score)
   const fill = grade === 'good' ? 'bg-success' : grade === 'fair' ? 'bg-warning' : 'bg-destructive'
+  const clamped = Math.max(0, Math.min(100, Math.round(score)))
   return (
     <div
       className={`bg-muted h-2 w-full overflow-hidden rounded-full ${className}`}
       role="progressbar"
-      aria-valuenow={score}
+      aria-label="SEO score"
+      aria-valuenow={clamped}
       aria-valuemin={0}
       aria-valuemax={100}
+      aria-valuetext={`${clamped} out of 100`}
     >
       <div
         className={`h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none ${fill}`}