diff --git a/apps/dashboard/src/@/api/insight/webhooks.ts b/apps/dashboard/src/@/api/insight/webhooks.ts index 2d219a4b460..d694c7f4b6f 100644 --- a/apps/dashboard/src/@/api/insight/webhooks.ts +++ b/apps/dashboard/src/@/api/insight/webhooks.ts @@ -164,8 +164,8 @@ export async function deleteWebhook( }; } } -// biome-ignore lint/correctness/noUnusedVariables: will be used in the next PR -async function testWebhook( + +export async function testWebhook( payload: TestWebhookPayload, clientId: string, ): Promise { diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx index 244d0d67b9b..2594bffba91 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx @@ -13,9 +13,10 @@ import { useDashboardRouter } from "@/lib/DashboardRouter"; import type { ColumnDef } from "@tanstack/react-table"; import { TWTable } from "components/shared/TWTable"; import { format } from "date-fns"; -import { TrashIcon } from "lucide-react"; +import { PlayIcon, TrashIcon } from "lucide-react"; import { useMemo, useState } from "react"; import { toast } from "sonner"; +import { useTestWebhook } from "../hooks/useTestWebhook"; import { RelativeTime } from "./RelativeTime"; function getEventType(filters: WebhookFilters): string { @@ -31,7 +32,7 @@ interface WebhooksTableProps { export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) { const [isDeleting, setIsDeleting] = useState>({}); - // const { testWebhookEndpoint, isTestingMap } = useTestWebhook(clientId); + const { testWebhookEndpoint, isTestingMap } = useTestWebhook(clientId); const router = useDashboardRouter(); const handleDeleteWebhook = async (webhookId: string) => { @@ -55,6 +56,22 @@ export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) { } }; + const handleTestWebhook = async (webhook: WebhookResponse) => { + const filterType = getEventType(webhook.filters); + if (filterType === "Unknown") { + toast.error("Cannot test webhook", { + description: + "This webhook does not have a valid event type (event or transaction).", + }); + return; + } + await testWebhookEndpoint( + webhook.webhook_url, + filterType.toLowerCase() as "event" | "transaction", + webhook.id, + ); + }; + const columns: ColumnDef[] = [ { accessorKey: "name", @@ -129,12 +146,26 @@ export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) { }, { id: "actions", - header: "Actions", + header: () =>
Actions
, cell: ({ row }) => { const webhook = row.original; return ( -
+
+