@actuate-media/cms-admin 0.80.1 → 0.82.0

package/src/views/settings/WebhooksTab.tsx

@@ -0,0 +1,280 @@
+'use client'
+
+/**
+ * Settings → Webhooks (#677): configure document.published endpoints and
+ * retry failed deliveries. Delivery success means "notified", not "live".
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { AlertTriangle, Plus, RefreshCw, RotateCcw, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../../lib/api.js'
+import { Button } from '../../components/ui/Button.js'
+import { SettingsCard } from './components.js'
+
+interface WebhookEndpoint {
+  id: string
+  name: string | null
+  url: string
+  events: string[]
+  active: boolean
+}
+
+interface DeliveryRow {
+  id: string
+  event: string
+  status: string
+  attempts: number
+  maxAttempts: number
+  responseStatus: number | null
+  createdAt: string
+  endpoint?: { id: string; name: string | null; url: string }
+}
+
+const PUBLISH_EVENTS = ['document.published'] as const
+
+export function WebhooksTab({ role }: { role?: string }) {
+  const canEdit = role === 'ADMIN'
+  const [endpoints, setEndpoints] = useState<WebhookEndpoint[]>([])
+  const [deliveries, setDeliveries] = useState<DeliveryRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [url, setUrl] = useState('')
+  const [name, setName] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [retryingId, setRetryingId] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    const [epRes, delRes] = await Promise.all([
+      cmsApi<WebhookEndpoint[]>('/webhooks'),
+      cmsApi<{ docs: DeliveryRow[] }>('/webhooks/deliveries?status=failed,retrying&pageSize=25'),
+    ])
+    setLoading(false)
+    if (epRes.error) {
+      setError(epRes.error)
+      return
+    }
+    setEndpoints(Array.isArray(epRes.data) ? epRes.data : [])
+    const docs = delRes.data?.docs
+    setDeliveries(Array.isArray(docs) ? docs : [])
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function createEndpoint() {
+    if (!url.trim()) {
+      toast.error('Webhook URL is required')
+      return
+    }
+    setSaving(true)
+    const res = await cmsApi<WebhookEndpoint>('/webhooks', {
+      method: 'POST',
+      body: JSON.stringify({
+        url: url.trim(),
+        name: name.trim() || 'Publish / rebuild',
+        events: [...PUBLISH_EVENTS],
+        active: true,
+      }),
+    })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Publish webhook created')
+    setUrl('')
+    setName('')
+    void load()
+  }
+
+  async function removeEndpoint(id: string) {
+    const res = await cmsApi(`/webhooks/${encodeURIComponent(id)}`, { method: 'DELETE' })
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Webhook removed')
+    void load()
+  }
+
+  async function retryDelivery(id: string) {
+    setRetryingId(id)
+    const res = await cmsApi<{ status: string; error?: string }>(
+      `/webhooks/deliveries/${encodeURIComponent(id)}/retry`,
+      { method: 'POST' },
+    )
+    setRetryingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.status === 'success') {
+      toast.success('Webhook delivered')
+    } else {
+      toast.error(res.data?.error ?? 'Delivery still failing')
+    }
+    void load()
+  }
+
+  if (loading) {
+    return <p className="text-muted-foreground text-sm">Loading webhooks…</p>
+  }
+
+  if (error) {
+    return (
+      <div
+        role="alert"
+        className="border-destructive/30 bg-destructive/10 text-destructive rounded-lg border p-3 text-sm"
+      >
+        {error}
+        <button type="button" className="ml-3 underline" onClick={() => void load()}>
+          Retry
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <SettingsCard
+        title="Publish webhooks"
+        description="Signed document.published notifications for Astro/Vercel rebuild or cache purge. A 2xx response means the host was notified — not that the public page is already live."
+      >
+        <div className="space-y-3">
+          {endpoints.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              No webhooks yet. Without one, editors only see “Published in CMS” and the public host
+              may lag behind TTL caches.
+            </p>
+          ) : (
+            <ul className="space-y-2" aria-label="Webhook endpoints">
+              {endpoints.map((ep) => (
+                <li
+                  key={ep.id}
+                  className="border-border flex items-start justify-between gap-3 rounded-md border p-3"
+                >
+                  <div className="min-w-0">
+                    <p className="text-foreground truncate text-sm font-medium">
+                      {ep.name || 'Untitled webhook'}
+                      {!ep.active && (
+                        <span className="text-muted-foreground ml-2 text-xs">(inactive)</span>
+                      )}
+                    </p>
+                    <p className="text-muted-foreground truncate font-mono text-xs">{ep.url}</p>
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Events: {(Array.isArray(ep.events) ? ep.events : []).join(', ') || '—'}
+                    </p>
+                  </div>
+                  {canEdit && (
+                    <button
+                      type="button"
+                      onClick={() => void removeEndpoint(ep.id)}
+                      className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs"
+                      aria-label={`Delete ${ep.name || ep.url}`}
+                    >
+                      <Trash2 size={14} />
+                      Delete
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {canEdit && (
+            <div className="border-border mt-4 space-y-2 border-t pt-4">
+              <label className="block text-sm">
+                <span className="text-muted-foreground mb-1 block">Name</span>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Astro rebuild"
+                  className="border-border bg-input-background w-full rounded-md border px-3 py-2 text-sm"
+                />
+              </label>
+              <label className="block text-sm">
+                <span className="text-muted-foreground mb-1 block">HTTPS URL</span>
+                <input
+                  type="url"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  placeholder="https://api.vercel.com/.../deployments"
+                  className="border-border bg-input-background w-full rounded-md border px-3 py-2 font-mono text-sm"
+                />
+              </label>
+              <p className="text-muted-foreground text-xs">
+                Creates an active endpoint for <code>document.published</code> only. Payload is
+                HMAC-signed with <code>X-Actuate-Signature</code>.
+              </p>
+              <Button
+                type="button"
+                variant="primary"
+                size="sm"
+                onClick={() => void createEndpoint()}
+                loading={saving}
+              >
+                <Plus size={16} />
+                Add publish webhook
+              </Button>
+            </div>
+          )}
+        </div>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Failed deliveries"
+        description="Retry outbound webhook failures. Automatic retries also run on the cleanup cron."
+      >
+        <div className="mb-3 flex justify-end">
+          <button
+            type="button"
+            onClick={() => void load()}
+            className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+          >
+            <RefreshCw size={14} />
+            Refresh
+          </button>
+        </div>
+        {deliveries.length === 0 ? (
+          <p className="text-muted-foreground text-sm">No failed or retrying deliveries.</p>
+        ) : (
+          <ul className="space-y-2" aria-label="Failed webhook deliveries">
+            {deliveries.map((d) => (
+              <li
+                key={d.id}
+                className="border-border flex items-center justify-between gap-3 rounded-md border p-3 text-sm"
+              >
+                <div className="min-w-0">
+                  <p className="text-foreground flex items-center gap-1.5 font-medium">
+                    <AlertTriangle size={14} className="text-destructive shrink-0" aria-hidden />
+                    {d.event} · {d.status}
+                  </p>
+                  <p className="text-muted-foreground truncate text-xs">
+                    {d.endpoint?.name || d.endpoint?.url || d.endpoint?.id} · attempt {d.attempts}/
+                    {d.maxAttempts}
+                    {d.responseStatus != null ? ` · HTTP ${d.responseStatus}` : ''}
+                  </p>
+                </div>
+                {canEdit && (
+                  <button
+                    type="button"
+                    onClick={() => void retryDelivery(d.id)}
+                    disabled={retryingId === d.id}
+                    className="border-border hover:bg-accent inline-flex shrink-0 items-center gap-1 rounded-md border px-2 py-1 text-xs disabled:opacity-50"
+                  >
+                    <RotateCcw size={12} />
+                    Retry
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </SettingsCard>
+    </div>
+  )
+}