@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/WebhookManager.tsx

@@ -0,0 +1,608 @@
+import React, { useState, useEffect } from "react";
+import {
+  Webhook,
+  Plus,
+  Trash2,
+  Play,
+  Pause,
+  Send,
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  RefreshCw,
+  Info,
+  ExternalLink,
+  Zap,
+  Shield,
+} from "lucide-react";
+import { ConfirmModal, Modal, ModalContent, ModalActions } from "./ui/Modal";
+
+interface WebhookItem {
+  id: string;
+  name: string;
+  url: string;
+  events: string[];
+  secret?: string;
+  status: "active" | "paused";
+  lastTriggered?: string;
+  createdAt: string;
+}
+
+export function WebhookManager() {
+  const [webhooks, setWebhooks] = useState<WebhookItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showTestModal, setShowTestModal] = useState(false);
+  const [showHelpModal, setShowHelpModal] = useState(false);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [testId, setTestId] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    name: "",
+    url: "",
+    events: [] as string[],
+    secret: "",
+  });
+  const [createError, setCreateError] = useState("");
+
+  const loadWebhooks = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/webhooks");
+      if (res.ok) {
+        const data = await res.json();
+        setWebhooks(data);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadWebhooks();
+  }, []);
+
+  const handleCreate = async () => {
+    if (!formData.name.trim() || !formData.url.trim()) {
+      setCreateError("Name and URL are required");
+      return;
+    }
+
+    try {
+      const res = await fetch("/api/webhooks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      if (res.ok) {
+        setShowCreateModal(false);
+        setFormData({ name: "", url: "", events: [], secret: "" });
+        loadWebhooks();
+      } else {
+        const error = await res.json();
+        setCreateError(error.error || "Failed to create webhook");
+      }
+    } catch (e) {
+      console.error(e);
+      setCreateError("Failed to create webhook");
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    setDeleteId(id);
+    setShowDeleteModal(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteId) return;
+
+    try {
+      const res = await fetch(`/api/webhooks/${deleteId}`, {
+        method: "DELETE",
+      });
+      if (res.ok) {
+        loadWebhooks();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    setShowDeleteModal(false);
+    setDeleteId(null);
+  };
+
+  const handleTest = async (id: string) => {
+    setTestId(id);
+    setTestResult(null);
+    setShowTestModal(true);
+
+    try {
+      const res = await fetch(`/api/webhooks/${id}/test`, { method: "POST" });
+      const data = await res.json();
+      setTestResult({
+        success: res.ok,
+        message:
+          data.message ||
+          (res.ok
+            ? "Webhook triggered successfully"
+            : "Failed to trigger webhook"),
+      });
+    } catch (e) {
+      setTestResult({ success: false, message: "Error testing webhook" });
+    }
+  };
+
+  const toggleStatus = async (id: string, currentStatus: string) => {
+    try {
+      const res = await fetch(`/api/webhooks/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          status: currentStatus === "active" ? "paused" : "active",
+        }),
+      });
+      if (res.ok) {
+        loadWebhooks();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const eventOptions = [
+    {
+      label: "Create",
+      value: "create",
+      description: "When a new document is created",
+    },
+    {
+      label: "Update",
+      value: "update",
+      description: "When a document is updated",
+    },
+    {
+      label: "Delete",
+      value: "delete",
+      description: "When a document is deleted",
+    },
+    { label: "Auth", value: "auth", description: "User login/logout events" },
+  ];
+
+  return (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-32">
+      {/* Header */}
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
+        <div>
+          <div className="flex items-center gap-3">
+            <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+              Web<span className="text-[var(--kyro-primary)]">hooks</span>
+            </h1>
+            <button type="button"
+              onClick={() => setShowHelpModal(true)}
+              className="p-2 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
+              title="Learn how webhooks work"
+            >
+              <Info className="w-5 h-5" />
+            </button>
+          </div>
+          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-70">
+            Receive real-time notifications when events occur in your CMS.
+          </p>
+        </div>
+        <button type="button"
+          onClick={() => {
+            setFormData({ name: "", url: "", events: [], secret: "" });
+            setCreateError("");
+            setShowCreateModal(true);
+          }}
+          className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm shadow-xl hover:opacity-90 active:scale-95 transition-all"
+        >
+          <Plus className="w-4 h-4" />
+          Add Webhook
+        </button>
+      </div>
+
+      {/* Info Banner */}
+      <div className="surface-tile p-6 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)]">
+        <div className="flex items-start gap-4">
+          <div className="p-3 bg-[var(--kyro-primary)]/10 rounded-xl">
+            <Zap className="w-6 h-6 text-[var(--kyro-primary)]" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-black mb-1">What are webhooks?</h3>
+            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-70 mb-3">
+              Webhooks allow your application to receive real-time HTTP
+              notifications when events happen in your CMS. Instead of polling
+              the API, your endpoint gets notified immediately.
+            </p>
+            <div className="grid grid-cols-2 gap-3 text-xs">
+              {eventOptions.map((opt) => (
+                <div key={opt.value} className="flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-[var(--kyro-primary)]" />
+                  <span className="font-medium">{opt.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Webhooks List */}
+      <section className="space-y-6">
+        <div className="flex items-center gap-2 px-2">
+          <Webhook className="w-4 h-4 text-[var(--kyro-primary)] opacity-40" />
+          <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+            Configured Webhooks
+          </span>
+        </div>
+
+        {loading ? (
+          <div className="surface-tile p-8 text-center">Loading...</div>
+        ) : webhooks.length === 0 ? (
+          <div className="surface-tile p-12 text-center border-2 border-dashed border-[var(--kyro-border)]">
+            <div className="w-16 h-16 mx-auto mb-6 bg-[var(--kyro-surface-accent)] rounded-2xl flex items-center justify-center">
+              <Webhook className="w-8 h-8 text-[var(--kyro-text-secondary)] opacity-20" />
+            </div>
+            <h3 className="text-lg font-black mb-2">No Webhooks Configured</h3>
+            <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-6">
+              Add your first webhook to start receiving event notifications.
+            </p>
+            <button type="button"
+              onClick={() => setShowCreateModal(true)}
+              className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm hover:opacity-90 transition-all"
+            >
+              <Plus className="w-4 h-4 inline mr-2" />
+              Create Your First Webhook
+            </button>
+          </div>
+        ) : (
+          <div className="grid gap-4">
+            {webhooks.map((webhook) => (
+              <div
+                key={webhook.id}
+                className="surface-tile p-6 group hover:border-[var(--kyro-primary)] transition-all"
+              >
+                <div className="flex items-start justify-between gap-6">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-3">
+                      <h3 className="text-lg font-black">{webhook.name}</h3>
+                      <span
+                        className={`px-2 py-0.5 rounded-full text-[8px] font-black uppercase ${
+                          webhook.status === "active"
+                            ? "bg-green-500/10 text-green-500"
+                            : "bg-amber-500/10 text-amber-500"
+                        }`}
+                      >
+                        {webhook.status}
+                      </span>
+                    </div>
+                    <p className="text-sm text-[var(--kyro-text-secondary)] opacity-50 font-mono mb-4 break-all">
+                      {webhook.url}
+                    </p>
+                    <div className="flex items-center gap-2 flex-wrap mb-4">
+                      {webhook.events?.map((event) => (
+                        <span
+                          key={event}
+                          className="px-3 py-1 bg-[var(--kyro-surface-accent)] rounded-lg text-[10px] font-black uppercase opacity-60"
+                        >
+                          {event}
+                        </span>
+                      ))}
+                    </div>
+                    <div className="flex items-center gap-6 text-[10px] font-black uppercase opacity-40">
+                      <div className="flex items-center gap-2">
+                        <RefreshCw className="w-3 h-3" />
+                        {webhook.lastTriggered
+                          ? `Last triggered: ${new Date(webhook.lastTriggered).toLocaleDateString()}`
+                          : "Never triggered"}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Clock className="w-3 h-3" />
+                        Created:{" "}
+                        {new Date(webhook.createdAt).toLocaleDateString()}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 flex-shrink-0">
+                    <button type="button"
+                      onClick={() => handleTest(webhook.id)}
+                      className="p-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface)] flex items-center gap-2"
+                      title="Send test request"
+                    >
+                      <Send className="w-4 h-4" />
+                      <span className="text-xs font-medium hidden lg:inline">
+                        Test
+                      </span>
+                    </button>
+                    <button type="button"
+                      onClick={() => toggleStatus(webhook.id, webhook.status)}
+                      className={`p-3 rounded-xl flex items-center gap-2 ${
+                        webhook.status === "active"
+                          ? "text-amber-500 bg-amber-500/10 hover:bg-amber-500/20"
+                          : "text-green-500 bg-green-500/10 hover:bg-green-500/20"
+                      }`}
+                      title={
+                        webhook.status === "active"
+                          ? "Pause webhook"
+                          : "Activate webhook"
+                      }
+                    >
+                      {webhook.status === "active" ? (
+                        <>
+                          <Pause className="w-4 h-4" />
+                          <span className="text-xs font-medium hidden lg:inline">
+                            Pause
+                          </span>
+                        </>
+                      ) : (
+                        <>
+                          <Play className="w-4 h-4" />
+                          <span className="text-xs font-medium hidden lg:inline">
+                            Activate
+                          </span>
+                        </>
+                      )}
+                    </button>
+                    <button type="button"
+                      onClick={() => handleDelete(webhook.id)}
+                      className="p-3 text-red-500 bg-red-500/10 rounded-xl hover:bg-red-500/20"
+                      title="Delete webhook"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Create Modal */}
+      <Modal
+        open={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        title="Add New Webhook"
+      >
+        <ModalContent>
+          <div className="space-y-5">
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Name <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                placeholder="e.g., Slack Notifications, Email Parser"
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:border-[var(--kyro-primary)]"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Endpoint URL <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="url"
+                value={formData.url}
+                onChange={(e) =>
+                  setFormData({ ...formData, url: e.target.value })
+                }
+                placeholder="https://your-server.com/webhook"
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:border-[var(--kyro-primary)]"
+              />
+              <p className="text-xs text-[var(--kyro-text-secondary)] mt-1 opacity-60">
+                The URL that will receive the POST request when events occur.
+              </p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Events to trigger on
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                {eventOptions.map((opt) => (
+                  <button type="button"
+                    key={opt.value}
+                    onClick={() => {
+                      const events = formData.events.includes(opt.value)
+                        ? formData.events.filter((e) => e !== opt.value)
+                        : [...formData.events, opt.value];
+                      setFormData({ ...formData, events });
+                    }}
+                    className={`p-3 rounded-xl text-left transition-all ${
+                      formData.events.includes(opt.value)
+                        ? "bg-[var(--kyro-primary)]/10 border border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
+                        : "bg-[var(--kyro-surface-accent)] border border-transparent"
+                    }`}
+                  >
+                    <div className="font-medium text-sm">{opt.label}</div>
+                    <div className="text-[10px] opacity-60">
+                      {opt.description}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Signing Secret (optional)
+              </label>
+              <input
+                type="text"
+                value={formData.secret}
+                onChange={(e) =>
+                  setFormData({ ...formData, secret: e.target.value })
+                }
+                placeholder="Your webhook signing secret"
+                className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:border-[var(--kyro-primary)]"
+              />
+              <p className="text-xs text-[var(--kyro-text-secondary)] mt-1 opacity-60">
+                Used to verify that requests came from Kyro CMS.
+              </p>
+            </div>
+            {createError && (
+              <p className="text-sm text-red-500">{createError}</p>
+            )}
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowCreateModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+          >
+            Cancel
+          </button>
+          <button type="button"
+            onClick={handleCreate}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+          >
+            Create Webhook
+          </button>
+        </ModalActions>
+      </Modal>
+
+      {/* Delete Modal */}
+      <Modal
+        open={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        title="Delete Webhook"
+        variant="danger"
+      >
+        <ModalContent>
+          <p className="text-sm text-[var(--kyro-text-secondary)] mb-4">
+            Are you sure you want to delete this webhook? This action cannot be
+            undone.
+          </p>
+          <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
+            <p className="text-sm font-medium text-red-500">
+              This endpoint will stop receiving notifications immediately.
+            </p>
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowDeleteModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+          >
+            Keep Webhook
+          </button>
+          <button type="button"
+            onClick={confirmDelete}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-red-500 text-white hover:bg-red-600"
+          >
+            Delete Permanently
+          </button>
+        </ModalActions>
+      </Modal>
+
+      {/* Test Webhook Modal */}
+      <Modal
+        open={showTestModal}
+        onClose={() => setShowTestModal(false)}
+        title="Test Webhook"
+      >
+        <ModalContent>
+          {testResult ? (
+            <div
+              className={`flex items-center gap-3 ${testResult.success ? "text-green-500" : "text-red-500"}`}
+            >
+              {testResult.success ? (
+                <CheckCircle2 className="w-6 h-6" />
+              ) : (
+                <AlertTriangle className="w-6 h-6" />
+              )}
+              <div>
+                <p className="font-bold">
+                  {testResult.success ? "Success!" : "Failed"}
+                </p>
+                <p className="text-sm text-[var(--kyro-text-secondary)]">
+                  {testResult.message}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center gap-3">
+              <RefreshCw className="w-5 h-5 animate-spin" />
+              <p>Sending test request...</p>
+            </div>
+          )}
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowTestModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+          >
+            Close
+          </button>
+        </ModalActions>
+      </Modal>
+
+      {/* Help Modal */}
+      <Modal
+        open={showHelpModal}
+        onClose={() => setShowHelpModal(false)}
+        title="How Webhooks Work"
+      >
+        <ModalContent>
+          <div className="space-y-6">
+            <div>
+              <h4 className="font-bold mb-2">What is a webhook?</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)]">
+                A webhook is an HTTP POST request sent to your endpoint when an
+                event occurs in your CMS. Unlike API polling (continuously
+                checking for changes), webhooks give you instant notifications.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-bold mb-2">Request format</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)] mb-3">
+                When an event triggers, Kyro sends a POST request with:
+              </p>
+              <div className="bg-[var(--kyro-bg)] rounded-lg p-4 font-mono text-sm space-y-2">
+                <div className="text-[var(--kyro-text-secondary)]">{"{"}</div>
+                <div className="pl-4">"event": "create",</div>
+                <div className="pl-4">"collection": "posts",</div>
+                <div className="pl-4">"documentId": "xxx",</div>
+                <div className="pl-4">"timestamp": "2024-..."</div>
+                <div className="text-[var(--kyro-text-secondary)]">{"}"}</div>
+              </div>
+            </div>
+            <div>
+              <h4 className="font-bold mb-2">Verifying requests</h4>
+              <p className="text-sm text-[var(--kyro-text-secondary)]">
+                If you provide a signing secret, the request will include an
+                X-Kyro-Signature header that you can use to verify the request
+                came from Kyro CMS.
+              </p>
+            </div>
+            <div className="bg-amber-500/10 border border-amber-500/20 rounded-xl p-4">
+              <div className="flex items-start gap-2">
+                <Shield className="w-5 h-5 text-amber-500 flex-shrink-0" />
+                <p className="text-sm text-[var(--kyro-text-secondary)]">
+                  Always verify webhook signatures in production to ensure
+                  requests are authentic.
+                </p>
+              </div>
+            </div>
+          </div>
+        </ModalContent>
+        <ModalActions>
+          <button type="button"
+            onClick={() => setShowHelpModal(false)}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
+          >
+            Got it
+          </button>
+        </ModalActions>
+      </Modal>
+    </div>
+  );
+}