@actuate-media/cms-admin 0.43.0 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -89,7 +89,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^4.1.0",
-    "@actuate-media/cms-core": "0.61.0",
+    "@actuate-media/cms-core": "0.62.0",
     "@actuate-media/component-blocks": "0.2.1"
   },
   "scripts": {

package/src/__tests__/views/email-settings.render.test.tsx

@@ -0,0 +1,225 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * Settings > Email: provider picker + per-provider credential fields backed by
+ * GET/PUT /email/settings and POST /email/settings/test. Secrets are
+ * write-only — the API returns only `hasApiKey` / `apiKeyLast4`, never the key.
+ */
+
+interface EmailSettingsData {
+  settings: Record<string, unknown>
+  envProvider: string | null
+  factoryAvailable: boolean
+  envSenderActive: boolean
+  platformAdapter: boolean
+}
+
+const EMPTY_RESPONSE: EmailSettingsData = {
+  settings: { provider: null, hasApiKey: false, hasSmtpPass: false },
+  envProvider: null,
+  factoryAvailable: true,
+  envSenderActive: false,
+  platformAdapter: false,
+}
+
+let getResponse: EmailSettingsData = EMPTY_RESPONSE
+let putResponse: { settings: Record<string, unknown> } | null = null
+let testResponse: { data?: unknown; error?: string; status: number } = {
+  data: { success: true, sentTo: 'admin@example.com' },
+  status: 200,
+}
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: string }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/email/settings' && method === 'GET') {
+    return { data: getResponse, status: 200 }
+  }
+  if (endpoint === '/email/settings' && method === 'PUT') {
+    return putResponse
+      ? { data: putResponse, status: 200 }
+      : { error: 'unexpected PUT', status: 500 }
+  }
+  if (endpoint === '/email/settings/test' && method === 'POST') {
+    return testResponse
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+const { EmailSettingsTab } = await import('../../views/settings/EmailSettingsTab.js')
+
+function deepClone<T>(v: T): T {
+  return JSON.parse(JSON.stringify(v))
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  getResponse = deepClone(EMPTY_RESPONSE)
+  putResponse = null
+  testResponse = { data: { success: true, sentTo: 'admin@example.com' }, status: 200 }
+})
+
+describe('EmailSettingsTab', () => {
+  it('renders the provider picker with the unconfigured state', async () => {
+    render(<EmailSettingsTab role="ADMIN" />)
+    expect(await screen.findByRole('radio', { name: 'None' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'Resend' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'SMTP.com' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'Amazon SES' })).toBeTruthy()
+    expect(screen.getByRole('radio', { name: 'SMTP server' })).toBeTruthy()
+    expect(screen.getByText(/No email provider configured/)).toBeTruthy()
+  })
+
+  it('saves an SMTP.com configuration with the entered key (PUT payload contract)', async () => {
+    putResponse = {
+      settings: {
+        provider: 'smtpcom',
+        from: 'noreply@example.com',
+        channel: 'transactional',
+        hasApiKey: true,
+        apiKeyLast4: '-key',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('radio', { name: 'SMTP.com' }))
+
+    fireEvent.change(screen.getByLabelText('Sender address'), {
+      target: { value: 'noreply@example.com' },
+    })
+    fireEvent.change(screen.getByLabelText('API key'), {
+      target: { value: 'smtpcom-secret-key' },
+    })
+    fireEvent.change(screen.getByLabelText('Sender channel'), {
+      target: { value: 'transactional' },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => {
+      const put = cmsApi.mock.calls.find(
+        ([e, o]) => e === '/email/settings' && (o as any)?.method === 'PUT',
+      )
+      expect(put).toBeTruthy()
+      expect(JSON.parse((put![1] as any).body)).toEqual({
+        provider: 'smtpcom',
+        from: 'noreply@example.com',
+        apiKey: 'smtpcom-secret-key',
+        channel: 'transactional',
+      })
+    })
+
+    // After save the key input is cleared and the masked hint appears.
+    expect((screen.getByLabelText('API key') as HTMLInputElement).value).toBe('')
+    expect(await screen.findByText(/ends in -key/)).toBeTruthy()
+  })
+
+  it('omits the apiKey from the payload when a stored key is kept', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'old@example.com',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    putResponse = {
+      settings: {
+        provider: 'resend',
+        from: 'new@example.com',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    const from = await screen.findByLabelText('Sender address')
+    expect(await screen.findByText(/ends in k3y9/)).toBeTruthy()
+
+    fireEvent.change(from, { target: { value: 'new@example.com' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
+
+    await waitFor(() => {
+      const put = cmsApi.mock.calls.find(
+        ([e, o]) => e === '/email/settings' && (o as any)?.method === 'PUT',
+      )
+      expect(put).toBeTruthy()
+      const body = JSON.parse((put![1] as any).body)
+      expect(body).toEqual({ provider: 'resend', from: 'new@example.com' })
+      expect(body).not.toHaveProperty('apiKey')
+    })
+  })
+
+  it('sends a test email and shows the result', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        apiKeyLast4: 'k3y9',
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('button', { name: /Send test email/ }))
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/email/settings/test',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    expect(await screen.findByText(/Test email sent to admin@example.com/)).toBeTruthy()
+  })
+
+  it('surfaces a failed test send', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        hasSmtpPass: false,
+      },
+    }
+    testResponse = { error: 'SMTP.com API error (401): bad key', status: 502 }
+    render(<EmailSettingsTab role="ADMIN" />)
+    fireEvent.click(await screen.findByRole('button', { name: /Send test email/ }))
+    expect(await screen.findByText(/SMTP\.com API error \(401\)/)).toBeTruthy()
+  })
+
+  it('shows the env-managed notice and disables editing for non-admins', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      envProvider: 'resend',
+      envSenderActive: true,
+    }
+    render(<EmailSettingsTab role="EDITOR" />)
+    expect(await screen.findByText(/read-only access/)).toBeTruthy()
+    expect(screen.getByText(/Environment variables currently configure/)).toBeTruthy()
+    expect((screen.getByRole('radio', { name: 'Resend' }) as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('warns when the email plugin is missing for a configured provider', async () => {
+    getResponse = {
+      ...deepClone(EMPTY_RESPONSE),
+      factoryAvailable: false,
+      settings: {
+        provider: 'resend',
+        from: 'a@b.co',
+        hasApiKey: true,
+        hasSmtpPass: false,
+      },
+    }
+    render(<EmailSettingsTab role="ADMIN" />)
+    expect(await screen.findByText(/requires the email plugin/)).toBeTruthy()
+  })
+})

package/src/__tests__/views/section-inspector-repeater.render.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { createSection } from '../../lib/page-editor-service.js'
+import { SectionInspector, repeaterRowSummary } from '../../views/page-editor/SectionInspector.js'
+import type { SectionFieldDef } from '../../views/page-editor/section-types.js'
+
+/**
+ * Repeater rows derive a scannable header from their values ("Pro · $79/mo")
+ * instead of only the positional "Plan 2" label, so editors can find a row
+ * without expanding every form (Upchat feedback: "repeaters feel like
+ * spreadsheets").
+ */
+
+const PLAN_FIELDS: SectionFieldDef[] = [
+  { key: 'name', label: 'Name', type: 'text' },
+  { key: 'price', label: 'Price', type: 'text' },
+  { key: 'description', label: 'Description', type: 'textarea' },
+  {
+    key: 'tier',
+    label: 'Tier',
+    type: 'select',
+    options: [{ label: 'Most popular', value: 'popular' }],
+  },
+]
+
+describe('repeaterRowSummary', () => {
+  it('joins the first two short text values', () => {
+    expect(repeaterRowSummary(PLAN_FIELDS, { name: 'Pro', price: '$79/mo' })).toBe('Pro · $79/mo')
+  })
+
+  it('skips empty values and long-form fields', () => {
+    expect(
+      repeaterRowSummary(PLAN_FIELDS, {
+        name: '  ',
+        price: '$79/mo',
+        description: 'long prose that must never appear',
+      }),
+    ).toBe('$79/mo')
+  })
+
+  it('maps select values to their human label', () => {
+    expect(repeaterRowSummary(PLAN_FIELDS, { tier: 'popular' })).toBe('Most popular')
+  })
+
+  it('returns null for a blank row (caller falls back to "Plan N")', () => {
+    expect(repeaterRowSummary(PLAN_FIELDS, {})).toBeNull()
+    expect(repeaterRowSummary(PLAN_FIELDS, { name: '', price: '' })).toBeNull()
+  })
+
+  it('truncates very long summaries with an ellipsis', () => {
+    const summary = repeaterRowSummary(PLAN_FIELDS, { name: 'x'.repeat(100) })
+    expect(summary!.length).toBeLessThanOrEqual(60)
+    expect(summary!.endsWith('…')).toBe(true)
+  })
+})
+
+describe('SectionInspector repeater rows', () => {
+  function renderStatsInspector(stats: Array<Record<string, unknown>>) {
+    const section = createSection('stats')
+    section.content = { ...section.content, stats }
+    render(
+      <SectionInspector
+        section={section}
+        canEdit
+        onClose={vi.fn()}
+        onContentChange={vi.fn()}
+        onSettingsChange={vi.fn()}
+        onMetaChange={vi.fn()}
+        onToggleVisibility={vi.fn()}
+      />,
+    )
+  }
+
+  it('shows value-derived row headers instead of "Stat N"', () => {
+    renderStatsInspector([
+      { value: '99.99%', label: 'Uptime', description: '' },
+      { value: '3M+', label: 'API requests', description: '' },
+    ])
+    expect(screen.getByText('99.99% · Uptime')).toBeTruthy()
+    expect(screen.getByText('3M+ · API requests')).toBeTruthy()
+    expect(screen.queryByText('Stat 1')).toBeNull()
+  })
+
+  it('falls back to the positional label for blank rows', () => {
+    renderStatsInspector([{ value: '', label: '', description: '' }])
+    expect(screen.getByText('Stat 1')).toBeTruthy()
+  })
+})

package/src/views/Settings.tsx

@@ -7,6 +7,7 @@ import {
   AlertTriangle,
   Download,
   Layers,
+  Mail,
   Users as UsersIcon,
   KeyRound,
 } from 'lucide-react'
@@ -18,6 +19,7 @@ import { RelationshipField } from '../fields/RelationshipField.js'
 import { GeneralSettingsTab } from './settings/GeneralSettingsTab.js'
 import { SeoSettingsTab } from './settings/SeoSettingsTab.js'
 import { AISettingsTab } from './settings/AISettingsTab.js'
+import { EmailSettingsTab } from './settings/EmailSettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
 import { SettingsCard } from './settings/components.js'
@@ -85,6 +87,7 @@ export function Settings({
         'users',
         'api-keys',
         'seo',
+        'email',
         'ai',
         'updates',
       ] as const,
@@ -214,6 +217,12 @@ export function Settings({
           <Tabs.Trigger value="seo" className={tabTriggerClass}>
             SEO
           </Tabs.Trigger>
+          <Tabs.Trigger value="email" className={tabTriggerClass}>
+            <span className="flex items-center gap-1.5">
+              <Mail className="h-4 w-4" />
+              Email
+            </span>
+          </Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
               <Bot className="h-4 w-4" />
@@ -311,6 +320,10 @@ export function Settings({
           <SeoSettingsTab onNavigate={onNavigate} role={session?.user?.role} />
         </Tabs.Content>
 
+        <Tabs.Content value="email" className="space-y-4">
+          <EmailSettingsTab role={session?.user?.role} />
+        </Tabs.Content>
+
         <Tabs.Content value="ai" className="space-y-4">
           <AISettingsTab role={session?.user?.role} />
         </Tabs.Content>

package/src/views/page-editor/SectionInspector.tsx

@@ -525,6 +525,39 @@ function RelationshipField({
 
 type RowRecord = Record<string, unknown>
 
+// Field types whose values are short enough to scan in a row header. Long-form
+// fields (textarea, richText) and non-text values (media, url) stay out.
+const SUMMARY_FIELD_TYPES = new Set(['text', 'select'])
+const SUMMARY_MAX_LENGTH = 60
+
+/**
+ * Derive a scannable one-line summary for a repeater row from its first two
+ * short text values — e.g. a pricing row renders as "Pro · $79/mo" instead of
+ * "Plan 2". Returns `null` when the row has no usable values yet, so the
+ * caller falls back to the positional "Plan 2" label.
+ */
+export function repeaterRowSummary(fields: SectionFieldDef[], row: RowRecord): string | null {
+  const parts: string[] = []
+  for (const field of fields) {
+    if (parts.length >= 2) break
+    if (!SUMMARY_FIELD_TYPES.has(field.type)) continue
+    const raw = row[field.key]
+    const value = typeof raw === 'string' ? raw.trim() : typeof raw === 'number' ? String(raw) : ''
+    if (!value) continue
+    if (field.type === 'select') {
+      const option = field.options?.find((o) => o.value === value)
+      parts.push(option?.label ?? value)
+    } else {
+      parts.push(value)
+    }
+  }
+  if (parts.length === 0) return null
+  const joined = parts.join(' · ')
+  return joined.length > SUMMARY_MAX_LENGTH
+    ? `${joined.slice(0, SUMMARY_MAX_LENGTH - 1).trimEnd()}…`
+    : joined
+}
+
 /**
  * Generic repeater editor: an orderable list of rows, each row a small form of
  * the repeater's sub-fields. Drives the generic `repeater` field type and the
@@ -665,6 +698,8 @@ function SortableRepeaterRow({
     zIndex: isDragging ? 10 : undefined,
   }
 
+  const summary = repeaterRowSummary(fields, row)
+
   return (
     <div
       ref={setNodeRef}
@@ -684,8 +719,11 @@ function SortableRepeaterRow({
               <GripVertical className="h-3.5 w-3.5" aria-hidden />
             </button>
           )}
-          <span className="text-muted-foreground text-xs">
-            {rowLabel} {index + 1}
+          <span
+            className="text-muted-foreground max-w-[200px] truncate text-xs"
+            title={summary ? `${rowLabel} ${index + 1}: ${summary}` : undefined}
+          >
+            {summary ?? `${rowLabel} ${index + 1}`}
           </span>
         </span>
         <button