@actuate-media/cms-admin 0.21.0 → 0.22.0

package/src/__tests__/views/forms-list.render.test.tsx

@@ -0,0 +1,141 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the Forms list through a mocked forms-service so the test owns the
+// data and can assert filtering, search, the notify toggle, and the schema
+// drawer without a real backend.
+function makeForm(over: Record<string, unknown> = {}) {
+  return {
+    id: 'f1',
+    name: 'Contact Us',
+    slug: 'contact-us',
+    description: 'General contact and inquiries',
+    status: 'active',
+    fields: [
+      { id: 'c1', label: 'Full Name', key: 'name', type: 'text', required: true, sortOrder: 0 },
+      { id: 'c2', label: 'Email', key: 'email', type: 'email', required: true, sortOrder: 1 },
+    ],
+    fieldCount: 2,
+    totalEntries: 47,
+    unreadEntries: 8,
+    submissions: 47,
+    notifyEnabled: true,
+    lastEntryAt: new Date().toISOString(),
+    ...over,
+  }
+}
+
+const FORMS = [
+  makeForm(),
+  makeForm({
+    id: 'f2',
+    name: 'Event RSVP',
+    slug: 'event-rsvp',
+    description: 'Webinar registration',
+    status: 'draft',
+    totalEntries: 0,
+    unreadEntries: 0,
+    notifyEnabled: false,
+    lastEntryAt: null,
+  }),
+]
+
+const fetchForms = vi.fn(async () => FORMS)
+const fetchFormStats = vi.fn(async () => ({
+  totalForms: 2,
+  activeForms: 1,
+  totalEntries: 47,
+  unreadEntries: 8,
+}))
+const setNotifyEnabled = vi.fn(async (_id: string, _v: boolean) => ({
+  data: { notifyEnabled: false },
+}))
+const fetchFormSchema = vi.fn(async () => ({
+  fields: FORMS[0]!.fields,
+  activeVersionId: null,
+  versions: [],
+}))
+const fetchEmbedSettings = vi.fn(async () => ({}))
+const fetchNotificationSettings = vi.fn(async () => ({ enabled: true, recipients: [] }))
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchForms: () => fetchForms(),
+  fetchFormStats: () => fetchFormStats(),
+  setNotifyEnabled: (id: string, v: boolean) => setNotifyEnabled(id, v),
+  fetchFormSchema: () => fetchFormSchema(),
+  saveFormSchema: vi.fn(async () => ({ data: {} })),
+  fetchEmbedSettings: () => fetchEmbedSettings(),
+  updateEmbedSettings: vi.fn(async () => ({ data: {} })),
+  fetchNotificationSettings: () => fetchNotificationSettings(),
+  updateNotificationSettings: vi.fn(async () => ({ data: {} })),
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { Forms } = await import('../../views/Forms.js')
+
+beforeEach(() => {
+  fetchForms.mockClear()
+  fetchFormStats.mockClear()
+  setNotifyEnabled.mockClear()
+})
+
+describe('Forms list', () => {
+  it('renders forms, summary chips, and field badges from service data', async () => {
+    render(<Forms onNavigate={() => {}} />)
+
+    expect(await screen.findByText('Contact Us')).toBeTruthy()
+    expect(screen.getByText('Event RSVP')).toBeTruthy()
+    // Summary chips reflect stats (not hardcoded).
+    expect(screen.getByText('total entries')).toBeTruthy()
+    // Field-type badges render per form.
+    expect(screen.getAllByText('EMAIL').length).toBeGreaterThan(0)
+  })
+
+  it('filters by status pill', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Draft', pressed: false }))
+
+    // Active-only form is filtered out; the draft remains.
+    await waitFor(() => {
+      expect(screen.queryByText('Contact Us')).toBeNull()
+      expect(screen.getByText('Event RSVP')).toBeTruthy()
+    })
+  })
+
+  it('searches across name and field labels', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    fireEvent.change(screen.getByLabelText('Search forms'), { target: { value: 'rsvp' } })
+
+    await waitFor(() => {
+      expect(screen.getByText('Event RSVP')).toBeTruthy()
+      expect(screen.queryByText('Contact Us')).toBeNull()
+    })
+  })
+
+  it('optimistically persists the notify toggle', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    const toggles = screen.getAllByLabelText(/Notifications for/)
+    fireEvent.click(toggles[0]!)
+
+    await waitFor(() => expect(setNotifyEnabled).toHaveBeenCalledWith('f1', false))
+  })
+
+  it('opens the schema drawer from the Schema action', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    fireEvent.click(screen.getAllByRole('button', { name: 'Schema' })[0]!)
+
+    await waitFor(() => expect(fetchFormSchema).toHaveBeenCalled())
+    // Drawer tabs are present.
+    expect(await screen.findByRole('tab', { name: 'Fields' })).toBeTruthy()
+  })
+})

package/src/components/forms/Drawer.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+/**
+ * Right-side drawer built on Radix Dialog — focus-trapped, escape-closable,
+ * token-only styling. Shared by the Forms schema / entry-detail 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,
+  headerExtra,
+  footer,
+  children,
+  width = 'max-w-xl',
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: ReactNode
+  description?: ReactNode
+  /** Optional content rendered between the header text and the close button. */
+  headerExtra?: ReactNode
+  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
+          {...(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">
+            <div className="min-w-0">
+              <Dialog.Title className="text-foreground truncate text-lg font-medium">
+                {title}
+              </Dialog.Title>
+              {description && (
+                <Dialog.Description className="text-muted-foreground mt-0.5 truncate text-sm">
+                  {description}
+                </Dialog.Description>
+              )}
+            </div>
+            <div className="flex shrink-0 items-center gap-1">
+              {headerExtra}
+              <Dialog.Close asChild>
+                <button className={btnGhostIcon} aria-label="Close" data-shortcut="close">
+                  <X size={20} aria-hidden />
+                </button>
+              </Dialog.Close>
+            </div>
+          </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>
+  )
+}

package/src/components/forms/EmbedPanel.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+/**
+ * Embed tab of the Form Schema drawer. Shows the public submission/schema
+ * endpoints and copy-paste embed snippets, and lets the editor restrict which
+ * origins may host the embedded form. Snippets are derived from the form slug;
+ * the live public endpoints land in a later phase (PR 5) but the paths shown
+ * here are the committed contract.
+ */
+import { Check, Copy } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  fetchEmbedSettings,
+  updateEmbedSettings,
+  type FormEmbedSettings,
+  type FormStatus,
+} from '../../lib/forms-service.js'
+import { FormsErrorState, FormsLoading, btnSecondary } from './primitives.js'
+
+function siteOrigin(): string {
+  if (typeof window !== 'undefined') return window.location.origin
+  return 'https://your-site.com'
+}
+
+export function EmbedPanel({
+  formId,
+  slug,
+  status,
+}: {
+  formId: string
+  slug: string
+  status: FormStatus
+}) {
+  const [settings, setSettings] = useState<FormEmbedSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [domains, setDomains] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    fetchEmbedSettings(formId)
+      .then((s) => {
+        if (!active) return
+        setSettings(s)
+        setDomains((s.allowedDomains ?? []).join('\n'))
+      })
+      .catch((e: unknown) => {
+        if (active) setError(e instanceof Error ? e.message : 'Failed to load embed settings')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [formId])
+
+  const origin = siteOrigin()
+  const submitUrl = `${origin}/api/forms/${slug}/submit`
+  const schemaUrl = `${origin}/api/forms/${slug}/schema`
+  const embedUrl = `${origin}/forms/embed/${slug}`
+  const iframeSnippet = `<iframe src="${embedUrl}" title="${slug}" style="width:100%;border:0;" loading="lazy"></iframe>`
+  const scriptSnippet = `<div data-actuate-form="${slug}"></div>\n<script src="${origin}/api/forms/embed.js" async></script>`
+
+  async function saveDomains() {
+    setSaving(true)
+    const list = domains
+      .split('\n')
+      .map((d) => d.trim())
+      .filter(Boolean)
+    const res = await updateEmbedSettings(formId, { allowedDomains: list })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data) setSettings(res.data)
+    toast.success('Embed settings saved.')
+  }
+
+  if (loading) return <FormsLoading label="Loading embed settings…" />
+  if (error) return <FormsErrorState message={error} />
+
+  return (
+    <div className="space-y-5">
+      {status !== 'active' && (
+        <p className="border-warning/30 bg-warning/10 text-warning rounded-md border px-3 py-2 text-sm">
+          This form is <span className="font-medium">{status}</span> and won&apos;t accept public
+          submissions until it&apos;s set to Active.
+        </p>
+      )}
+
+      <CopyField label="Public submission endpoint" value={submitUrl} />
+      <CopyField label="Schema endpoint" value={schemaUrl} />
+      <CopyField label="Iframe embed" value={iframeSnippet} multiline />
+      <CopyField label="Script embed" value={scriptSnippet} multiline />
+
+      <div>
+        <label className="text-foreground mb-1 block text-sm font-medium">
+          Allowed domains
+          <span className="text-muted-foreground ml-1 font-normal">
+            (one per line — leave empty to allow any)
+          </span>
+        </label>
+        <textarea
+          rows={3}
+          value={domains}
+          onChange={(e) => setDomains(e.target.value)}
+          placeholder="example.com"
+          className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none"
+        />
+        <div className="mt-2 flex justify-end">
+          <button className={btnSecondary} onClick={saveDomains} disabled={saving}>
+            {saving ? 'Saving…' : 'Save domains'}
+          </button>
+        </div>
+      </div>
+      {settings === null && null}
+    </div>
+  )
+}
+
+function CopyField({
+  label,
+  value,
+  multiline = false,
+}: {
+  label: string
+  value: string
+  multiline?: boolean
+}) {
+  const [copied, setCopied] = useState(false)
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      toast.error('Copy failed — your browser blocked clipboard access.')
+    }
+  }
+
+  return (
+    <div>
+      <div className="mb-1 flex items-center justify-between">
+        <span className="text-foreground text-sm font-medium">{label}</span>
+        <button
+          type="button"
+          onClick={copy}
+          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
+          aria-label={`Copy ${label}`}
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5" aria-hidden />
+          ) : (
+            <Copy className="h-3.5 w-3.5" aria-hidden />
+          )}
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <pre
+        className={`border-border bg-muted text-foreground overflow-x-auto rounded-md border px-2.5 py-2 font-mono text-xs ${multiline ? 'whitespace-pre-wrap' : 'whitespace-nowrap'}`}
+      >
+        {value}
+      </pre>
+    </div>
+  )
+}