import { Link } from "@tanstack/react-router"; import { open } from "@tauri-apps/plugin-shell"; import { AnimatePresence, motion } from "framer-motion"; import { ArrowLeft, ExternalLink, Plus, Trash2, Webhook, Zap } from "lucide-react"; import { useState } from "react"; import { z } from "zod"; import { useCreateWebhook, useDeleteWebhook, useTestWebhook, useWebhooks } from "@/api/queries"; import { ConfirmDialog } from "@/components/shared/ConfirmDialog"; import { ErrorAlert } from "@/components/shared/ErrorAlert"; import { Skeleton } from "@/components/shared/Skeleton"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Body, Muted, PageTitle, SectionHeading } from "@/components/ui/typography"; import { useDemo } from "@/hooks/useDemo"; import { COLOR } from "@/lib/constants"; const urlSchema = z.string().url({ message: "Must be a valid URL" }); interface Props { workspaceId: string; } export function WebhookManager({ workspaceId }: Props) { const { mask } = useDemo(); const { data: webhooks, isLoading, error } = useWebhooks(workspaceId); const createWebhook = useCreateWebhook(workspaceId); const deleteWebhook = useDeleteWebhook(workspaceId); const testWebhook = useTestWebhook(workspaceId); const [url, setUrl] = useState(""); const [urlError, setUrlError] = useState(""); const [deleteTarget, setDeleteTarget] = useState(null); const [testResult, setTestResult] = useState(null); const handleCreate = async (e: React.SyntheticEvent) => { e.preventDefault(); const result = urlSchema.safeParse(url); if (!result.success) { setUrlError(result.error.issues[0].message); return; } await createWebhook.mutateAsync(url); setUrl(""); setUrlError(""); }; const handleTest = async () => { const data = await testWebhook.mutateAsync(); setTestResult(JSON.stringify(data, null, 2)); setTimeout(() => setTestResult(null), 5000); }; const list = Array.isArray(webhooks) ? webhooks : []; return (

{mask(workspaceId)}

Webhooks

Event webhook endpoints for this workspace

{/* Add webhook form */} Add endpoint {/* Test result */} {testResult && ( {testResult} )} {/* Webhook list */} {isLoading ? ( ) : list.length === 0 ? (

No webhook endpoints yet.

) : (

{list.map((wh, i) => (

{mask((wh as { url: string }).url)}

{mask((wh as { id: string }).id)}

))}

)}

{ if (deleteTarget) await deleteWebhook.mutateAsync(deleteTarget); setDeleteTarget(null); }} onCancel={() => setDeleteTarget(null)} loading={deleteWebhook.isPending} />

); } function WebhookListSkeleton() { return ( ); }