@actuate-media/cms-admin 0.67.0 → 0.68.0

package/src/__tests__/views/seo-content-pane.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'
+
+/**
+ * Content SEO tab with the inline editor pane (design split-pane pattern —
+ * previously the `SeoEditorDrawer` overlay). Pins: row click toggles the
+ * 380px pane, the pane loads the record through `fetchSeoContentRecord`, and
+ * Save flows through the same `updateSeoFields` service call.
+ */
+
+function makeRecord(over: Record<string, unknown> = {}) {
+  return {
+    id: 'seo1',
+    entityType: 'page' as const,
+    entityId: 'p1',
+    title: 'Home',
+    url: 'https://example.com/',
+    canonicalUrl: null,
+    metaTitle: 'Home — Example',
+    metaDescription: 'Welcome to Example.',
+    focusKeyword: null,
+    keyTakeaway: null,
+    ogTitle: null,
+    ogDescription: null,
+    ogImageId: null,
+    ogImage: null,
+    twitterTitle: null,
+    twitterDescription: null,
+    twitterImageId: null,
+    noindex: false,
+    nofollow: false,
+    structuredDataType: 'WebPage',
+    structuredData: null,
+    llmsInclude: 'AUTO' as const,
+    llmsDescription: null,
+    llmsSection: null,
+    llmsOptional: false,
+    seoScore: 82,
+    seoGrade: 'good' as const,
+    updatedAt: '2026-06-01T00:00:00Z',
+    ...over,
+  }
+}
+
+const RECORDS = [
+  makeRecord(),
+  makeRecord({ id: 'seo2', entityType: 'post', entityId: 'p2', title: 'First Post' }),
+]
+
+const fetchSeoContentRecords = vi.fn(async () => RECORDS)
+const fetchSeoContentRecord = vi.fn(async (entityType: string, entityId: string) => {
+  return RECORDS.find((r) => r.entityType === entityType && r.entityId === entityId) ?? null
+})
+const updateSeoFields = vi.fn(async (_t: string, _i: string, _p: unknown) => ({}))
+
+vi.mock('../../lib/seo-service.js', () => ({
+  fetchSeoContentRecords: () => fetchSeoContentRecords(),
+  fetchSeoContentRecord: (t: string, i: string) => fetchSeoContentRecord(t, i),
+  updateSeoFields: (t: string, i: string, p: unknown) => updateSeoFields(t, i, p),
+  generateSeoField: vi.fn(async () => ({ unavailable: true })),
+  SEO_SCHEMA_TYPES: ['Article', 'WebPage'],
+  applyContentSeoQuery: (
+    records: Array<{ entityType: string; title: string }>,
+    query: { search?: string; filter?: string },
+  ) =>
+    records.filter((r) => {
+      if (query.filter === 'pages' && r.entityType !== 'page') return false
+      if (query.filter === 'posts' && r.entityType !== 'post') return false
+      if (query.search && !r.title.toLowerCase().includes(query.search.toLowerCase())) return false
+      return true
+    }),
+}))
+
+vi.mock('../../lib/brand-voice-client.js', () => ({
+  fixBrandVoiceContent: vi.fn(async () => ({ ok: false })),
+  brandAlignmentTone: () => 'text-success',
+  brandAlignmentLabel: () => 'On brand',
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { ContentTab } = await import('../../views/seo/ContentTab.js')
+
+beforeEach(() => {
+  fetchSeoContentRecords.mockClear()
+  fetchSeoContentRecord.mockClear()
+  updateSeoFields.mockClear()
+})
+
+describe('Content SEO inline editor pane', () => {
+  it('opens the pane on row click and loads the record', async () => {
+    render(<ContentTab />)
+    const rowButton = await screen.findByRole('button', { name: /Home/ })
+    expect(rowButton.getAttribute('aria-expanded')).toBe('false')
+
+    fireEvent.click(rowButton)
+
+    expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
+    expect(rowButton.getAttribute('aria-expanded')).toBe('true')
+    await waitFor(() => expect(fetchSeoContentRecord).toHaveBeenCalledWith('page', 'p1'))
+    // Loaded field values populate the form.
+    expect(await screen.findByDisplayValue('Home — Example')).toBeTruthy()
+  })
+
+  it('toggles the pane closed when the same row is clicked again', async () => {
+    render(<ContentTab />)
+    const rowButton = await screen.findByRole('button', { name: /Home/ })
+
+    fireEvent.click(rowButton)
+    expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
+
+    fireEvent.click(rowButton)
+    expect(screen.queryByRole('region', { name: 'SEO editor' })).toBeNull()
+  })
+
+  it('saves edited fields through updateSeoFields', async () => {
+    render(<ContentTab />)
+    fireEvent.click(await screen.findByRole('button', { name: /Home/ }))
+
+    const titleInput = await screen.findByDisplayValue('Home — Example')
+    fireEvent.change(titleInput, { target: { value: 'New Meta Title' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() =>
+      expect(updateSeoFields).toHaveBeenCalledWith(
+        'page',
+        'p1',
+        expect.objectContaining({ metaTitle: 'New Meta Title' }),
+      ),
+    )
+    // The list refetches after a successful save.
+    await waitFor(() => expect(fetchSeoContentRecords.mock.calls.length).toBeGreaterThan(1))
+  })
+
+  it('opens the pane on mount for deep links', async () => {
+    render(<ContentTab initialEntityType="post" initialEntityId="p2" />)
+
+    await waitFor(() => expect(fetchSeoContentRecord).toHaveBeenCalledWith('post', 'p2'))
+    expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
+  })
+})

package/src/components/collections/EntryDetailPane.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+/**
+ * Entry detail pane — lightweight read-only inspector shown beside the
+ * collection documents table (design's Entries split-pane, 400px). Surfaces
+ * the entry's key fields, status, and timestamps; the primary action opens
+ * the existing full editor route. Not an editor — editing stays in the
+ * dedicated editor views.
+ */
+import { ExternalLink } from 'lucide-react'
+import {
+  InspectorPaneBody,
+  InspectorPaneFooter,
+  InspectorPaneHeader,
+  InspectorPaneSection,
+} from '../ui/InspectorPane.js'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
+
+interface FieldDef {
+  type?: string
+  label?: string
+  hidden?: boolean
+  options?: Array<{ label: string; value: string }>
+}
+
+const SKIPPED_FIELD_TYPES = new Set(['richText', 'blocks', 'json', 'media', 'relationship'])
+const MAX_FIELDS = 8
+
+function statusTone(status: string | undefined): StatusBadgeTone {
+  switch (status?.toUpperCase()) {
+    case 'PUBLISHED':
+      return 'success'
+    case 'SCHEDULED':
+      return 'warning'
+    case 'ARCHIVED':
+      return 'muted'
+    default:
+      return 'neutral'
+  }
+}
+
+function formatDateTime(value: unknown): string {
+  if (typeof value !== 'string' || !value) return '—'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+/** Human-readable display value for a scalar-ish field, or null to skip. */
+function displayValue(raw: unknown, field: FieldDef): string | null {
+  if (raw == null || raw === '') return ''
+  if (typeof raw === 'boolean') return raw ? 'Yes' : 'No'
+  if (typeof raw === 'number') return String(raw)
+  if (typeof raw === 'string') {
+    const opt = field.options?.find((o) => o.value === raw)
+    return opt?.label ?? raw
+  }
+  if (Array.isArray(raw)) {
+    const tags = raw
+      .map((item) =>
+        typeof item === 'string'
+          ? item
+          : item && typeof item === 'object'
+            ? Object.values(item).find((v): v is string => typeof v === 'string')
+            : undefined,
+      )
+      .filter((v): v is string => Boolean(v))
+    if (tags.length > 0) return tags.join(', ')
+    return `${raw.length} item${raw.length === 1 ? '' : 's'}`
+  }
+  return null
+}
+
+/** Key fields worth showing in the pane: labelled scalars from the config. */
+function keyFields(
+  fields: Record<string, FieldDef> | undefined,
+  data: Record<string, unknown>,
+): Array<{ name: string; label: string; value: string }> {
+  if (!fields || typeof fields !== 'object') return []
+  const out: Array<{ name: string; label: string; value: string }> = []
+  for (const [name, field] of Object.entries(fields)) {
+    if (!field || field.hidden) continue
+    if (field.type && SKIPPED_FIELD_TYPES.has(field.type)) continue
+    const value = displayValue(data[name], field)
+    if (value === null) continue
+    out.push({ name, label: field.label ?? name, value })
+    if (out.length >= MAX_FIELDS) break
+  }
+  return out
+}
+
+export interface EntryDetailPaneProps {
+  doc: Record<string, any>
+  /** Collection definition from the CMS config (untyped upstream). */
+  collection: any
+  singularLabel: string
+  onClose: () => void
+  onOpenEditor: () => void
+}
+
+export function EntryDetailPane({
+  doc,
+  collection,
+  singularLabel,
+  onClose,
+  onOpenEditor,
+}: EntryDetailPaneProps) {
+  const title = doc.title || doc.name || `#${doc.id}`
+  const data = (doc.data ?? {}) as Record<string, unknown>
+  const fields = keyFields(collection?.fields as Record<string, FieldDef> | undefined, data)
+
+  return (
+    <>
+      <InspectorPaneHeader onClose={onClose} closeLabel={`Close ${singularLabel} details`}>
+        <div className="truncate text-[13.5px] font-semibold text-[var(--txt)]">{title}</div>
+        <div className="mt-1 flex items-center gap-2">
+          <StatusBadge tone={statusTone(doc.status)}>{doc.status ?? 'DRAFT'}</StatusBadge>
+          <span className="text-[11px] text-[var(--muted)]">{singularLabel}</span>
+        </div>
+      </InspectorPaneHeader>
+
+      <InspectorPaneBody>
+        <InspectorPaneSection title="Fields">
+          {fields.length === 0 ? (
+            <p className="text-[12px] text-[var(--muted)]">No previewable fields.</p>
+          ) : (
+            <dl>
+              {fields.map((f) => (
+                <div key={f.name} className="mb-2.5 last:mb-0">
+                  <dt className="text-[10.5px] font-semibold tracking-[0.5px] text-[var(--muted)] uppercase">
+                    {f.label}
+                  </dt>
+                  {f.value ? (
+                    <dd className="mt-0.5 text-[12.5px] break-words text-[var(--txt)]">
+                      {f.value}
+                    </dd>
+                  ) : (
+                    <dd className="mt-0.5 text-[12.5px] text-[var(--muted)] italic">
+                      Not provided
+                    </dd>
+                  )}
+                </div>
+              ))}
+            </dl>
+          )}
+        </InspectorPaneSection>
+
+        <InspectorPaneSection title="Record">
+          <div className="flex items-center justify-between gap-3 py-1 text-[12px]">
+            <span className="text-[var(--muted)]">Created</span>
+            <span className="text-[var(--sub)]">{formatDateTime(doc.createdAt)}</span>
+          </div>
+          <div className="flex items-center justify-between gap-3 py-1 text-[12px]">
+            <span className="text-[var(--muted)]">Updated</span>
+            <span className="text-[var(--sub)]">{formatDateTime(doc.updatedAt)}</span>
+          </div>
+          <div className="flex items-center justify-between gap-3 py-1 text-[12px]">
+            <span className="text-[var(--muted)]">ID</span>
+            <span className="font-mono text-[11px] text-[var(--muted)]">{String(doc.id)}</span>
+          </div>
+        </InspectorPaneSection>
+      </InspectorPaneBody>
+
+      <InspectorPaneFooter>
+        <button
+          type="button"
+          onClick={onOpenEditor}
+          className="flex w-full items-center justify-center gap-1.5 rounded-[7px] bg-[var(--acc)] px-3 py-2 text-[13px] font-semibold text-white transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+        >
+          <ExternalLink size={14} aria-hidden />
+          Open full editor
+        </button>
+      </InspectorPaneFooter>
+    </>
+  )
+}

package/src/components/forms/FieldsPanel.tsx

@@ -268,7 +268,9 @@ function FieldEditor({
 
   return (
     <div className="border-border space-y-3 border-t px-3 py-3">
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      {/* Stacked (not sm:grid-cols-2): this editor now lives in the 390px
+          schema inspector pane, where viewport-based two-column grids cramp. */}
+      <div className="grid grid-cols-1 gap-3">
         <Labeled label="Label">
           <input
             type="text"

package/src/components/forms/FormSchemaPane.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+/**
+ * Form Schema pane — inline inspector opened from the Forms list "Schema"
+ * action (design's 390px schema panel; previously the `FormSchemaDrawer`
+ * overlay). Four tabs: Fields (versioned schema editor), Embed (public
+ * snippets + domain restrictions), Notifications (email settings),
+ * Integrations (CRM webhooks / Zapier).
+ *
+ * Saving the Fields tab creates a new schema version server-side; existing
+ * submissions keep referencing the version they were captured against, so
+ * historical entries never break when the schema changes.
+ */
+import * as Tabs from '@radix-ui/react-tabs'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { fetchFormSchema, saveFormSchema, type FormField } from '../../lib/forms-service.js'
+import type { FormListItem } from '../../lib/forms-service.js'
+import { emitFormsChanged } from '../../lib/forms-events.js'
+import { ConfirmDialog } from '../ui/ConfirmDialog.js'
+import { InspectorPaneBody, InspectorPaneFooter, InspectorPaneHeader } from '../ui/InspectorPane.js'
+import { FieldsPanel } from './FieldsPanel.js'
+import { EmbedPanel } from './EmbedPanel.js'
+import { NotificationsPanel } from './NotificationsPanel.js'
+import { WebhooksPanel } from './WebhooksPanel.js'
+import { FormsErrorState, FormsLoading, btnPrimary } from './primitives.js'
+
+const TABS = [
+  { id: 'fields', label: 'Fields' },
+  { id: 'embed', label: 'Embed' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'integrations', label: 'Integrations' },
+] as const
+
+export function FormSchemaPane({
+  form,
+  onClose,
+  onSaved,
+}: {
+  form: FormListItem
+  onClose: () => void
+  /** Called after a schema/settings change so the list can refetch. */
+  onSaved?: () => void
+}) {
+  const [tab, setTab] = useState<string>('fields')
+  const [fields, setFields] = useState<FormField[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [confirmDiscard, setConfirmDiscard] = useState(false)
+
+  const formId = form.id
+  const hasSubmissions = (form.totalEntries ?? 0) > 0
+
+  useEffect(() => {
+    setTab('fields')
+    setDirty(false)
+    setLoading(true)
+    setError(null)
+    let active = true
+    fetchFormSchema(formId)
+      .then((schema) => {
+        if (active) setFields(schema.fields)
+      })
+      .catch((e: unknown) => {
+        if (active) setError(e instanceof Error ? e.message : 'Failed to load schema')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [formId])
+
+  function handleFieldsChange(next: FormField[]) {
+    setFields(next)
+    setDirty(true)
+  }
+
+  async function handleSave() {
+    setSaving(true)
+    const res = await saveFormSchema(
+      formId,
+      fields.map((f, i) => ({ ...f, sortOrder: i })),
+    )
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    setDirty(false)
+    toast.success('Schema saved.')
+    emitFormsChanged()
+    onSaved?.()
+  }
+
+  function requestClose() {
+    if (dirty) {
+      setConfirmDiscard(true)
+      return
+    }
+    onClose()
+  }
+
+  return (
+    <>
+      <InspectorPaneHeader onClose={requestClose} closeLabel="Close schema panel">
+        <div className="truncate text-[13.5px] font-semibold text-[var(--txt)]">{form.name}</div>
+        <div className="mt-0.5 truncate font-mono text-[11.5px] text-[var(--muted)]">
+          /{form.slug}
+        </div>
+      </InspectorPaneHeader>
+
+      <Tabs.Root value={tab} onValueChange={setTab} className="flex min-h-0 flex-1 flex-col">
+        <Tabs.List
+          className="flex shrink-0 gap-0.5 overflow-x-auto border-b border-[var(--bdr)] px-2"
+          aria-label="Form schema sections"
+        >
+          {TABS.map((t) => (
+            <Tabs.Trigger
+              key={t.id}
+              value={t.id}
+              className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary focus-visible:ring-ring -mb-px border-b-2 border-transparent px-2.5 py-2 text-[12.5px] font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            >
+              {t.label}
+            </Tabs.Trigger>
+          ))}
+        </Tabs.List>
+
+        <InspectorPaneBody>
+          <div className="px-4 py-3.5">
+            <Tabs.Content value="fields" tabIndex={-1}>
+              {loading ? (
+                <FormsLoading label="Loading schema…" />
+              ) : error ? (
+                <FormsErrorState message={error} onRetry={() => setTab('fields')} />
+              ) : (
+                <FieldsPanel
+                  fields={fields}
+                  onChange={handleFieldsChange}
+                  hasSubmissions={hasSubmissions}
+                />
+              )}
+            </Tabs.Content>
+
+            <Tabs.Content value="embed" tabIndex={-1}>
+              <EmbedPanel formId={formId} slug={form.slug} status={form.status} />
+            </Tabs.Content>
+
+            <Tabs.Content value="notifications" tabIndex={-1}>
+              <NotificationsPanel formId={formId} onChanged={onSaved} />
+            </Tabs.Content>
+
+            <Tabs.Content value="integrations" tabIndex={-1}>
+              <WebhooksPanel formId={formId} formSlug={form.slug} />
+            </Tabs.Content>
+          </div>
+        </InspectorPaneBody>
+
+        {tab === 'fields' && (
+          <InspectorPaneFooter>
+            <button
+              type="button"
+              className={`${btnPrimary} w-full`}
+              onClick={() => void handleSave()}
+              disabled={saving || loading}
+            >
+              {saving ? 'Saving…' : 'Save Schema'}
+            </button>
+          </InspectorPaneFooter>
+        )}
+      </Tabs.Root>
+
+      <ConfirmDialog
+        open={confirmDiscard}
+        onClose={() => setConfirmDiscard(false)}
+        onConfirm={() => {
+          setDirty(false)
+          setConfirmDiscard(false)
+          onClose()
+        }}
+        title="Discard unsaved changes?"
+        description="You have unsaved schema changes. Closing now will discard them."
+        confirmLabel="Discard"
+        cancelLabel="Keep editing"
+        destructive
+      />
+    </>
+  )
+}