@actuate-media/cms-admin 0.16.0 → 0.17.0

package/src/__tests__/views/dashboard.test.tsx

@@ -0,0 +1,180 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+// Drive the dashboard purely through `useApiData`. Each endpoint's result
+// is looked up in `responses`, so tests can set just the data they care
+// about and everything else falls back to a benign empty state.
+const responses: Record<string, unknown> = {}
+const emptyResult = { data: null, loading: false, error: null, exhausted: false, refetch: () => {} }
+
+vi.mock('../../lib/useApiData.js', () => ({
+  useApiData: (endpoint: string | null) => responses[endpoint ?? ''] ?? emptyResult,
+}))
+
+const { Dashboard } = await import('../../views/Dashboard.js')
+
+const emptyStats = {
+  totalDocuments: 0,
+  totalMedia: 0,
+  totalUsers: 0,
+  formCount: 0,
+  avgSeoScore: 0,
+  webhookCount: 0,
+  webhookActiveCount: 0,
+  collectionCounts: {},
+  statusCounts: {},
+  recentDocuments: [] as unknown[],
+}
+
+function statsResult(over: Partial<typeof emptyStats> = {}) {
+  return {
+    data: { ...emptyStats, ...over },
+    loading: false,
+    error: null,
+    exhausted: false,
+    refetch: () => {},
+  }
+}
+
+beforeEach(() => {
+  for (const k of Object.keys(responses)) delete responses[k]
+})
+
+describe('Dashboard', () => {
+  it('renders a spinner while the primary stats request is still loading', () => {
+    responses['/stats'] = {
+      data: null,
+      loading: true,
+      error: null,
+      exhausted: false,
+      refetch: () => {},
+    }
+
+    const { container } = render(
+      <Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />,
+    )
+
+    expect(container.querySelector('.animate-spin')).toBeTruthy()
+    expect(screen.queryByText('Recent Activity')).toBeNull()
+  })
+
+  it('shows empty states when there is no content', () => {
+    responses['/stats'] = statsResult()
+
+    render(<Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />)
+
+    expect(screen.getByText('No activity yet')).toBeTruthy()
+    expect(screen.getByText('No scheduled content')).toBeTruthy()
+  })
+
+  it('surfaces a retryable banner when the stats request is exhausted', () => {
+    const refetch = vi.fn()
+    responses['/stats'] = { data: null, loading: false, error: 'down', exhausted: true, refetch }
+
+    render(<Dashboard config={{ collections: [] }} session={{}} onNavigate={() => {}} />)
+
+    fireEvent.click(screen.getByText('Retry'))
+    expect(refetch).toHaveBeenCalledTimes(1)
+  })
+
+  // ── EI-1 regression: recent-activity rows must open the *correct* editor ──
+
+  it('routes a recent post to the section-based post editor (not the legacy editor)', () => {
+    const onNavigate = vi.fn()
+    responses['/stats'] = statsResult({
+      recentDocuments: [
+        {
+          id: 'p1',
+          title: 'My Post',
+          status: 'DRAFT',
+          collection: 'blog',
+          updatedAt: new Date().toISOString(),
+          author: 'Sam',
+        },
+      ],
+    })
+
+    render(
+      <Dashboard
+        config={{
+          collections: [
+            { slug: 'blog', type: 'post', labels: { singular: 'Blog', plural: 'Blogs' } },
+          ],
+        }}
+        session={{}}
+        onNavigate={onNavigate}
+      />,
+    )
+
+    // EI-2: the row is an accessible button, so it is reachable by role.
+    fireEvent.click(screen.getByRole('button', { name: /My Post/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/posts/blog/p1/edit')
+  })
+
+  it('routes a recent page to the full page editor', () => {
+    const onNavigate = vi.fn()
+    responses['/stats'] = statsResult({
+      recentDocuments: [
+        {
+          id: 'pg1',
+          title: 'Home',
+          status: 'PUBLISHED',
+          collection: 'pages',
+          updatedAt: new Date().toISOString(),
+          author: 'Sam',
+        },
+      ],
+    })
+
+    render(
+      <Dashboard
+        config={{
+          collections: [
+            { slug: 'pages', type: 'page', labels: { singular: 'Page', plural: 'Pages' } },
+          ],
+        }}
+        session={{}}
+        onNavigate={onNavigate}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /Home/ }))
+    expect(onNavigate).toHaveBeenCalledWith('/pages/pg1/edit')
+  })
+
+  it('routes a scheduled queue item through the same editor resolver', () => {
+    const onNavigate = vi.fn()
+    responses['/stats'] = statsResult({
+      recentDocuments: [
+        {
+          id: 'p9',
+          title: 'Scheduled Post',
+          status: 'SCHEDULED',
+          collection: 'blog',
+          updatedAt: new Date().toISOString(),
+          author: 'Sam',
+        },
+      ],
+    })
+
+    render(
+      <Dashboard
+        config={{
+          collections: [
+            { slug: 'blog', type: 'post', labels: { singular: 'Blog', plural: 'Blogs' } },
+          ],
+        }}
+        session={{}}
+        onNavigate={onNavigate}
+      />,
+    )
+
+    // The publishing-queue row (right column) — there are two buttons named
+    // for the post (activity + queue); the queue "Manage" header button also
+    // targets the first scheduled item. Click the queue row directly.
+    const queueButtons = screen.getAllByRole('button', { name: /Scheduled Post/ })
+    fireEvent.click(queueButtons[queueButtons.length - 1]!)
+    expect(onNavigate).toHaveBeenCalledWith('/posts/blog/p9/edit')
+  })
+})

package/src/lib/useApiData.ts

@@ -6,6 +6,34 @@ export interface UseApiDataOptions {
   maxRetries?: number
   /** Base delay in ms for exponential backoff (default 1000). Actual delay = base * 2^attempt. */
   retryBaseMs?: number
+  /**
+   * When set, successful responses are cached in-memory keyed by endpoint
+   * for this many ms and reused on the next mount, skipping the network
+   * (cache-first). Opt-in — omit to keep the default always-fetch
+   * behaviour. `refetch()` always bypasses the cache. Useful for views
+   * that remount frequently (e.g. dashboard navigation) so they don't
+   * re-issue the same requests on every visit.
+   */
+  cacheMs?: number
+}
+
+/**
+ * Process-wide response cache for `cacheMs` consumers. Keyed by endpoint
+ * (note: the locale query param is appended downstream by `cmsApi`, so a
+ * locale switch is not reflected here — only enable `cacheMs` for
+ * locale-invariant endpoints like `/stats`).
+ */
+const responseCache = new Map<string, { data: unknown; at: number }>()
+
+function readCache<T>(endpoint: string, cacheMs: number): { value: T | null } | null {
+  const hit = responseCache.get(endpoint)
+  if (hit && Date.now() - hit.at < cacheMs) return { value: hit.data as T | null }
+  return null
+}
+
+/** Test-only: drop all cached responses so cases don't bleed into each other. */
+export function __clearApiDataCache(): void {
+  responseCache.clear()
 }
 
 export interface UseApiDataResult<T> {
@@ -22,9 +50,12 @@ export function useApiData<T>(
   defaultValue: T | null = null,
   options: UseApiDataOptions = {},
 ): UseApiDataResult<T> {
-  const { maxRetries = 3, retryBaseMs = 1000 } = options
-  const [data, setData] = useState<T | null>(defaultValue)
-  const [loading, setLoading] = useState(endpoint !== null)
+  const { maxRetries = 3, retryBaseMs = 1000, cacheMs } = options
+  // Read the cache synchronously for the initial state so a warm cache
+  // hit paints immediately instead of flashing a loading spinner.
+  const cachedInitial = endpoint && cacheMs ? readCache<T>(endpoint, cacheMs) : null
+  const [data, setData] = useState<T | null>(cachedInitial ? cachedInitial.value : defaultValue)
+  const [loading, setLoading] = useState(endpoint !== null && !cachedInitial)
   const [error, setError] = useState<string | null>(null)
   const [exhausted, setExhausted] = useState(false)
   const abortRef = useRef<AbortController | null>(null)
@@ -32,12 +63,24 @@ export function useApiData<T>(
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const fetchData = useCallback(
-    async (isRetry = false) => {
+    async (isRetry = false, forceRefresh = false) => {
       if (!endpoint) {
         setLoading(false)
         return
       }
 
+      // Cache-first: a fresh cached response short-circuits the network.
+      // `refetch()` passes `forceRefresh` to bypass this.
+      if (!isRetry && !forceRefresh && cacheMs) {
+        const hit = readCache<T>(endpoint, cacheMs)
+        if (hit) {
+          setData(hit.value)
+          setError(null)
+          setLoading(false)
+          return
+        }
+      }
+
       abortRef.current?.abort()
       const controller = new AbortController()
       abortRef.current = controller
@@ -65,12 +108,14 @@ export function useApiData<T>(
         setExhausted(true)
         setLoading(false)
       } else {
-        setData(res.data ?? null)
+        const value = res.data ?? null
+        setData(value)
         setLoading(false)
         retryCountRef.current = 0
+        if (cacheMs) responseCache.set(endpoint, { data: value, at: Date.now() })
       }
     },
-    [endpoint, maxRetries, retryBaseMs],
+    [endpoint, maxRetries, retryBaseMs, cacheMs],
   )
 
   const manualRefetch = useCallback(() => {
@@ -80,7 +125,7 @@ export function useApiData<T>(
     }
     retryCountRef.current = 0
     setExhausted(false)
-    fetchData(false)
+    fetchData(false, true)
   }, [fetchData])
 
   useEffect(() => {

package/src/styles/theme.css

@@ -18,6 +18,27 @@
   --accent-foreground: #030213;
   --destructive: #d4183d;
   --destructive-foreground: #ffffff;
+  /*
+   * Semantic status + brand tokens.
+   * ----------------------------------------------------------------
+   * `destructive` already covers the "error/danger" state; these add
+   * the remaining semantic states the admin needs (success / warning /
+   * info) plus the violet brand accent used for links and primary
+   * affordances. Values are tuned to read as TEXT on both the card
+   * surface and their own `/10` tint (badge backgrounds), and as a
+   * solid fill (dots, progress bars). The `*-foreground` variants are
+   * for text placed on a SOLID fill. Light values match the previous
+   * emerald/amber/blue/violet-600 palette so tokenizing is a no-op
+   * visually; dark values track the *-300/*-400 tints used before.
+   */
+  --success: oklch(0.5 0.13 155);
+  --success-foreground: #ffffff;
+  --warning: oklch(0.52 0.13 73);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.5 0.17 254);
+  --info-foreground: #ffffff;
+  --brand: oklch(0.54 0.23 293);
+  --brand-foreground: #ffffff;
   --border: rgba(0, 0, 0, 0.1);
   --input: transparent;
   --input-background: #f3f3f5;
@@ -59,6 +80,14 @@
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
+  --success: oklch(0.72 0.15 155);
+  --success-foreground: oklch(0.205 0 0);
+  --warning: oklch(0.8 0.13 80);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.72 0.14 252);
+  --info-foreground: oklch(0.205 0 0);
+  --brand: oklch(0.72 0.18 293);
+  --brand-foreground: oklch(0.205 0 0);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --input-background: oklch(0.205 0 0);
@@ -98,6 +127,14 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-input-background: var(--input-background);