From c420099dc37f7c1b6ea82c414c2cc7d8eb0a7c4d Mon Sep 17 00:00:00 2001
From: AmineAfia <amine@thirdweb.com>
Date: Wed, 28 May 2025 22:02:27 +0000
Subject: [PATCH] Add webhook testing functionality to dashboard (#7173)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the webhook testing functionality in the dashboard application by exporting the `testWebhook` function, adding a testing feature in the `WebhooksTable`, and creating a custom hook `useTestWebhook` to manage the testing state and results.

### Detailed summary
- Changed `testWebhook` from a local function to an exported function in `webhooks.ts`.
- Imported `PlayIcon` in `WebhooksTable.tsx` and added it to the UI.
- Implemented `handleTestWebhook` function to test webhooks and display results.
- Created `useTestWebhook` hook to manage testing state and results.
- Added error handling and success notifications for webhook testing.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added the ability to test webhooks directly from the webhooks table with a "Test" button, providing immediate feedback and status indicators during testing.
- **User Interface**
  - Enhanced the actions column in the webhooks table for improved layout and usability, including real-time spinner icons and error notifications during webhook testing.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/dashboard/src/@/api/insight/webhooks.ts  |   4 +-
 .../webhooks/components/WebhooksTable.tsx     |  39 +++++-
 .../webhooks/hooks/useTestWebhook.ts          | 119 ++++++++++++++++++
 3 files changed, 156 insertions(+), 6 deletions(-)
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts

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<TestWebhookResponse> {
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<Record<string, boolean>>({});
-  //   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<WebhookResponse>[] = [
     {
       accessorKey: "name",
@@ -129,12 +146,26 @@ export function WebhooksTable({ webhooks, clientId }: WebhooksTableProps) {
     },
     {
       id: "actions",
-      header: "Actions",
+      header: () => <div className="flex w-full justify-end pr-2">Actions</div>,
       cell: ({ row }) => {
         const webhook = row.original;
 
         return (
-          <div className="flex justify-end gap-2">
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              disabled={isTestingMap[webhook.id] || isDeleting[webhook.id]}
+              onClick={() => handleTestWebhook(webhook)}
+              aria-label={`Test webhook ${webhook.name}`}
+            >
+              {isTestingMap[webhook.id] ? (
+                <Spinner className="h-4 w-4" />
+              ) : (
+                <PlayIcon className="h-4 w-4" />
+              )}
+            </Button>
             <Button
               size="icon"
               variant="outline"
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts
new file mode 100644
index 00000000000..c10b0130146
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/hooks/useTestWebhook.ts
@@ -0,0 +1,119 @@
+import { testWebhook } from "@/api/insight/webhooks";
+import { useState } from "react";
+import { toast } from "sonner";
+
+type TestResult = {
+  status: "success" | "error";
+  timestamp: number;
+};
+
+export function useTestWebhook(clientId: string) {
+  const [isTestingMap, setIsTestingMap] = useState<Record<string, boolean>>({});
+  const [testResults, setTestResults] = useState<Record<string, TestResult>>(
+    {},
+  );
+
+  const testWebhookEndpoint = async (
+    webhookUrl: string,
+    type: "event" | "transaction",
+    id?: string,
+  ) => {
+    if (!webhookUrl) {
+      toast.error("Cannot test webhook", {
+        description: "Webhook URL is required",
+      });
+      return false;
+    }
+
+    const uniqueId = id || webhookUrl;
+
+    if (isTestingMap[uniqueId]) return false;
+
+    try {
+      setIsTestingMap((prev) => ({ ...prev, [uniqueId]: true }));
+      setTestResults((prev) => {
+        const newResults = { ...prev };
+        delete newResults[uniqueId];
+        return newResults;
+      });
+
+      const result = await testWebhook(
+        { webhook_url: webhookUrl, type },
+        clientId,
+      );
+
+      if (result.success) {
+        setTestResults((prev) => ({
+          ...prev,
+          [uniqueId]: {
+            status: "success",
+            timestamp: Date.now(),
+          },
+        }));
+
+        toast.success("Test event sent successfully", {
+          description:
+            "Check your webhook endpoint to verify the delivery. The test event is signed with a secret key.",
+        });
+        return true;
+      } else {
+        setTestResults((prev) => ({
+          ...prev,
+          [uniqueId]: {
+            status: "error",
+            timestamp: Date.now(),
+          },
+        }));
+
+        toast.error("Failed to send test event", {
+          description:
+            "The server reported a failure in sending the test event.",
+        });
+        return false;
+      }
+    } catch (error) {
+      console.error("Error testing webhook:", error);
+
+      setTestResults((prev) => ({
+        ...prev,
+        [uniqueId]: {
+          status: "error",
+          timestamp: Date.now(),
+        },
+      }));
+
+      const errorMessage =
+        error instanceof Error ? error.message : "An unexpected error occurred";
+      const isFailedSendError = errorMessage.includes(
+        "Failed to send test event",
+      );
+
+      toast.error(
+        isFailedSendError ? "Unable to test webhook" : "Failed to test webhook",
+        {
+          description: isFailedSendError
+            ? "We couldn't send a test request to your webhook endpoint. This might be due to network issues or the endpoint being unavailable. Please verify your webhook URL and try again later."
+            : errorMessage,
+          duration: 10000,
+        },
+      );
+      return false;
+    } finally {
+      setIsTestingMap((prev) => ({ ...prev, [uniqueId]: false }));
+    }
+  };
+
+  const isRecentResult = (uniqueId: string) => {
+    const result = testResults[uniqueId];
+    if (!result) return false;
+
+    return Date.now() - result.timestamp < 5000;
+  };
+
+  return {
+    testWebhookEndpoint,
+    isTestingMap,
+    testResults,
+    isRecentResult,
+  };
+}