feat: add webhook logs

apps/remix/app/routes/_authenticated+/settings+/_dynamic_personal_routes+/webhooks.$id._index.tsx

@@ -1,4 +1,4 @@
-import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks.$id';
+import WebhookPage, { meta } from '../../t.$teamUrl+/settings.webhooks.$id._index';
 
 export { meta };
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx

@@ -0,0 +1,392 @@
+import { useMemo, useState } from 'react';
+import { useEffect } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
+import { WebhookCallStatus, WebhookTriggerEvents } from '@prisma/client';
+import {
+  CheckCircle2Icon,
+  ChevronRightIcon,
+  PencilIcon,
+  TerminalIcon,
+  XCircleIcon,
+} from 'lucide-react';
+import { useNavigate } from 'react-router';
+import { useLocation, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
+import { z } from 'zod';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multi-select-combobox';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { SpinnerBox } from '@documenso/ui/primitives/spinner';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { WebhookEditDialog } from '~/components/dialogs/webhook-edit-dialog';
+import { WebhookTestDialog } from '~/components/dialogs/webhook-test-dialog';
+import { GenericErrorLayout } from '~/components/general/generic-error-layout';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { WebhookLogsSheet } from '~/components/general/webhook-logs-sheet';
+import { useCurrentTeam } from '~/providers/team';
+import { appMetaTags } from '~/utils/meta';
+
+import type { Route } from './+types/settings.webhooks.$id._index';
+
+const WebhookSearchParamsSchema = ZUrlSearchParamsSchema.extend({
+  status: z.nativeEnum(WebhookCallStatus).optional(),
+  events: z.preprocess(
+    (value) => (typeof value === 'string' && value.length > 0 ? value.split(',') : []),
+    z.array(z.nativeEnum(WebhookTriggerEvents)).optional(),
+  ),
+});
+
+export function meta() {
+  return appMetaTags('Webhooks');
+}
+
+export default function WebhookPage({ params }: Route.ComponentProps) {
+  const { t, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const { pathname } = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+  const team = useCurrentTeam();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const parsedSearchParams = WebhookSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
+    {
+      id: params.id,
+    },
+    { enabled: !!params.id, retry: false },
+  );
+
+  const {
+    data,
+    isLoading: isLogsLoading,
+    isLoadingError: isLogsLoadingError,
+  } = trpc.webhook.calls.find.useQuery({
+    webhookId: params.id,
+    page: parsedSearchParams.page,
+    perPage: parsedSearchParams.perPage,
+    status: parsedSearchParams.status,
+    events: parsedSearchParams.events,
+    query: parsedSearchParams.query,
+  });
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    // If nothing  to change then do nothing.
+    if (params.toString() === searchParams?.toString()) {
+      return;
+    }
+
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Status`,
+        accessorKey: 'status',
+
+        cell: ({ row }) => (
+          <Badge variant={row.original.status === 'SUCCESS' ? 'default' : 'destructive'}>
+            {row.original.status === 'SUCCESS' ? (
+              <CheckCircle2Icon className="mr-2 h-4 w-4" />
+            ) : (
+              <XCircleIcon className="mr-2 h-4 w-4" />
+            )}
+            {row.original.responseCode}
+          </Badge>
+        ),
+      },
+      {
+        header: t`Event`,
+        accessorKey: 'event',
+        cell: ({ row }) => (
+          <div>
+            <p className="text-foreground text-sm font-semibold">
+              {toFriendlyWebhookEventName(row.original.event)}
+            </p>
+            <p className="text-muted-foreground text-xs">{row.original.id}</p>
+          </div>
+        ),
+      },
+      {
+        header: t`Sent`,
+        accessorKey: 'createdAt',
+        cell: ({ row }) => (
+          <div className="flex items-center justify-between gap-2">
+            <p>
+              {i18n.date(row.original.createdAt, {
+                timeStyle: 'short',
+                dateStyle: 'short',
+              })}
+            </p>
+
+            <div className="data-state-selected:block opacity-0 transition-opacity group-hover:opacity-100">
+              <ChevronRightIcon className="h-4 w-4" />
+            </div>
+          </div>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  const getTabHref = (value: string) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (value === '') {
+      params.delete('status');
+    }
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    let path = pathname;
+
+    if (params.toString()) {
+      path += `?${params.toString()}`;
+    }
+
+    return path;
+  };
+
+  if (isLoading) {
+    return <SpinnerBox className="py-32" />;
+  }
+
+  // Todo: Update UI, currently out of place.
+  if (!webhook) {
+    return (
+      <GenericErrorLayout
+        errorCode={404}
+        errorCodeMap={{
+          404: {
+            heading: msg`Webhook not found`,
+            subHeading: msg`404 Webhook not found`,
+            message: msg`The webhook you are looking for may have been removed, renamed or may have never existed.`,
+          },
+        }}
+        primaryButton={
+          <Button asChild>
+            <Link to={`/t/${team.url}/settings/webhooks`}>
+              <Trans>Go back</Trans>
+            </Link>
+          </Button>
+        }
+        secondaryButton={null}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={
+          <div className="flex items-center gap-2">
+            <p>
+              <Trans>Webhook</Trans>
+            </p>
+            <Badge variant={webhook.enabled ? 'default' : 'secondary'}>
+              {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
+            </Badge>
+          </div>
+        }
+        subtitle={webhook.webhookUrl}
+      >
+        <div className="flex gap-2">
+          <WebhookTestDialog webhook={webhook}>
+            <Button variant="outline">
+              <TerminalIcon className="mr-2 h-4 w-4" />
+              <Trans>Test</Trans>
+            </Button>
+          </WebhookTestDialog>
+
+          <WebhookEditDialog
+            webhook={webhook}
+            trigger={
+              <Button>
+                <PencilIcon className="mr-2 h-4 w-4" />
+                <Trans>Edit</Trans>
+              </Button>
+            }
+          />
+        </div>
+      </SettingsHeader>
+
+      <div className="mt-4">
+        <div className="mb-4 flex flex-row items-center justify-between gap-x-4">
+          <Input
+            defaultValue={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t`Search by ID`}
+          />
+
+          <WebhookEventCombobox />
+
+          <Tabs value={parsedSearchParams.status || ''} className="flex-shrink-0">
+            <TabsList>
+              <TabsTrigger className="hover:text-foreground min-w-[60px]" value="" asChild>
+                <Link to={getTabHref('')}>
+                  <Trans>All</Trans>
+                </Link>
+              </TabsTrigger>
+              <TabsTrigger className="hover:text-foreground min-w-[60px]" value="SUCCESS" asChild>
+                <Link to={getTabHref(WebhookCallStatus.SUCCESS)}>
+                  <Trans>Success</Trans>
+                </Link>
+              </TabsTrigger>
+              <TabsTrigger className="hover:text-foreground min-w-[60px]" value="FAILED" asChild>
+                <Link to={getTabHref(WebhookCallStatus.FAILED)}>
+                  <Trans>Failed</Trans>
+                </Link>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        <DataTable
+          columns={columns}
+          data={results.data}
+          perPage={results.perPage}
+          currentPage={results.currentPage}
+          totalPages={results.totalPages}
+          onPaginationChange={onPaginationChange}
+          onRowClick={(row) =>
+            WebhookLogsSheet.call({
+              webhookCall: row,
+            })
+          }
+          rowClassName="cursor-pointer group"
+          error={{
+            enable: isLogsLoadingError,
+          }}
+          skeleton={{
+            enable: isLogsLoading,
+            rows: 3,
+            component: (
+              <>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12 rounded-full" />
+                </TableCell>
+              </>
+            ),
+          }}
+        >
+          {(table) =>
+            results.totalPages > 1 && (
+              <DataTablePagination additionalInformation="VisibleCount" table={table} />
+            )
+          }
+        </DataTable>
+      </div>
+
+      <WebhookLogsSheet.Root />
+    </div>
+  );
+}
+
+const WebhookEventCombobox = () => {
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const isMounted = useIsMounted();
+
+  const events = (searchParams?.get('events') ?? '').split(',').filter((value) => value !== '');
+
+  const comboBoxOptions = Object.values(WebhookTriggerEvents).map((event) => ({
+    label: toFriendlyWebhookEventName(event),
+    value: event,
+  }));
+
+  const onChange = (newEvents: string[]) => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('events', newEvents.join(','));
+
+    if (newEvents.length === 0) {
+      params.delete('events');
+    }
+
+    void navigate(`${pathname}?${params.toString()}`, { preventScrollReset: true });
+  };
+
+  return (
+    <MultiSelectCombobox
+      emptySelectionPlaceholder={
+        <p className="text-muted-foreground font-normal">
+          <Trans>
+            <span className="text-muted-foreground/70">Events:</span> All
+          </Trans>
+        </p>
+      }
+      enableClearAllButton={true}
+      inputPlaceholder={msg`Search`}
+      loading={!isMounted}
+      options={comboBoxOptions}
+      selectedValues={events}
+      onChange={onChange}
+    />
+  );
+};

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id.tsx

@@ -1,263 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { useForm } from 'react-hook-form';
-import { useRevalidator } from 'react-router';
-import { Link } from 'react-router';
-import type { z } from 'zod';
-
-import { trpc } from '@documenso/trpc/react';
-import { ZEditWebhookRequestSchema } from '@documenso/trpc/server/webhook-router/schema';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { SpinnerBox } from '@documenso/ui/primitives/spinner';
-import { Switch } from '@documenso/ui/primitives/switch';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { WebhookTestDialog } from '~/components/dialogs/webhook-test-dialog';
-import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
-import { useCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-import type { Route } from './+types/settings.webhooks.$id';
-
-const ZEditWebhookFormSchema = ZEditWebhookRequestSchema.omit({ id: true, teamId: true });
-
-type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
-
-export function meta() {
-  return appMetaTags('Webhooks');
-}
-
-export default function WebhookPage({ params }: Route.ComponentProps) {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { revalidate } = useRevalidator();
-
-  const team = useCurrentTeam();
-
-  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
-    {
-      id: params.id,
-      teamId: team.id,
-    },
-    { enabled: !!params.id && !!team.id },
-  );
-
-  const { mutateAsync: updateWebhook } = trpc.webhook.editWebhook.useMutation();
-
-  const form = useForm<TEditWebhookFormSchema>({
-    resolver: zodResolver(ZEditWebhookFormSchema),
-    values: {
-      webhookUrl: webhook?.webhookUrl ?? '',
-      eventTriggers: webhook?.eventTriggers ?? [],
-      secret: webhook?.secret ?? '',
-      enabled: webhook?.enabled ?? true,
-    },
-  });
-
-  const onSubmit = async (data: TEditWebhookFormSchema) => {
-    try {
-      await updateWebhook({
-        id: params.id,
-        teamId: team.id,
-        ...data,
-      });
-
-      toast({
-        title: _(msg`Webhook updated`),
-        description: _(msg`The webhook has been updated successfully.`),
-        duration: 5000,
-      });
-
-      await revalidate();
-    } catch (err) {
-      toast({
-        title: _(msg`Failed to update webhook`),
-        description: _(
-          msg`We encountered an error while updating the webhook. Please try again later.`,
-        ),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  if (isLoading) {
-    return <SpinnerBox className="py-32" />;
-  }
-
-  // Todo: Update UI, currently out of place.
-  if (!webhook) {
-    return (
-      <GenericErrorLayout
-        errorCode={404}
-        errorCodeMap={{
-          404: {
-            heading: msg`Webhook not found`,
-            subHeading: msg`404 Webhook not found`,
-            message: msg`The webhook you are looking for may have been removed, renamed or may have never existed.`,
-          },
-        }}
-        primaryButton={
-          <Button asChild>
-            <Link to={`/t/${team.url}/settings/webhooks`}>
-              <Trans>Go back</Trans>
-            </Link>
-          </Button>
-        }
-        secondaryButton={null}
-      />
-    );
-  }
-
-  return (
-    <div className="max-w-2xl">
-      <SettingsHeader
-        title={_(msg`Edit webhook`)}
-        subtitle={_(msg`On this page, you can edit the webhook and its settings.`)}
-      />
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
-            <div className="flex flex-col-reverse gap-4 md:flex-row">
-              <FormField
-                control={form.control}
-                name="webhookUrl"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormLabel required>Webhook URL</FormLabel>
-                    <FormControl>
-                      <Input className="bg-background" {...field} />
-                    </FormControl>
-
-                    <FormDescription>
-                      <Trans>The URL for Documenso to send webhook events to.</Trans>
-                    </FormDescription>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="enabled"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <Trans>Enabled</Trans>
-                    </FormLabel>
-
-                    <div>
-                      <FormControl>
-                        <Switch
-                          className="bg-background"
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                    </div>
-
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="eventTriggers"
-              render={({ field: { onChange, value } }) => (
-                <FormItem className="flex flex-col gap-2">
-                  <FormLabel required>
-                    <Trans>Triggers</Trans>
-                  </FormLabel>
-                  <FormControl>
-                    <WebhookMultiSelectCombobox
-                      listValues={value}
-                      onChange={(values: string[]) => {
-                        onChange(values);
-                      }}
-                    />
-                  </FormControl>
-
-                  <FormDescription>
-                    <Trans>The events that will trigger a webhook to be sent to your URL.</Trans>
-                  </FormDescription>
-
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="secret"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Secret</FormLabel>
-                  <FormControl>
-                    <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
-                  </FormControl>
-
-                  <FormDescription>
-                    <Trans>
-                      A secret that will be sent to your URL so you can verify that the request has
-                      been sent by Documenso.
-                    </Trans>
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex justify-end gap-4">
-              <Button type="submit" loading={form.formState.isSubmitting}>
-                <Trans>Update webhook</Trans>
-              </Button>
-            </div>
-          </fieldset>
-        </form>
-      </Form>
-
-      <Alert
-        className="mt-6 flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
-        variant="neutral"
-      >
-        <div>
-          <AlertTitle>
-            <Trans>Test Webhook</Trans>
-          </AlertTitle>
-          <AlertDescription className="mr-2">
-            <Trans>
-              Send a test webhook with sample data to verify your integration is working correctly.
-            </Trans>
-          </AlertDescription>
-        </div>
-
-        <div className="flex-shrink-0">
-          <WebhookTestDialog webhook={webhook}>
-            <Button variant="outline" disabled={!webhook.enabled}>
-              <Trans>Test Webhook</Trans>
-            </Button>
-          </WebhookTestDialog>
-        </div>
-      </Alert>
-    </div>
-  );
-}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx

@@ -1,7 +1,18 @@
+import { useMemo } from 'react';
+
 import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { Plural, useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
+import type { Webhook } from '@prisma/client';
+import {
+  CheckCircle2Icon,
+  EditIcon,
+  Loader,
+  MoreHorizontalIcon,
+  ScrollTextIcon,
+  Trash2Icon,
+  XCircleIcon,
+} from 'lucide-react';
 import { DateTime } from 'luxon';
 import { Link } from 'react-router';
 
@@ -10,9 +21,21 @@ import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
+import { DataTable, type DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
 
 import { WebhookCreateDialog } from '~/components/dialogs/webhook-create-dialog';
 import { WebhookDeleteDialog } from '~/components/dialogs/webhook-delete-dialog';
+import { WebhookEditDialog } from '~/components/dialogs/webhook-edit-dialog';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
 import { appMetaTags } from '~/utils/meta';
@@ -22,19 +45,72 @@ export function meta() {
 }
 
 export default function WebhookPage() {
-  const { _, i18n } = useLingui();
+  const { t, i18n } = useLingui();
 
   const team = useCurrentTeam();
 
-  const { data: webhooks, isLoading } = trpc.webhook.getTeamWebhooks.useQuery({
-    teamId: team.id,
-  });
+  const { data, isLoading, isError } = trpc.webhook.getTeamWebhooks.useQuery();
+
+  const results = {
+    data: data ?? [],
+    perPage: 0,
+    currentPage: 0,
+    totalPages: 0,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Webhook`,
+        cell: ({ row }) => (
+          <Link to={`/t/${team.url}/settings/webhooks/${row.original.id}`}>
+            <p className="text-muted-foreground text-xs">{row.original.id}</p>
+            <p
+              className="text-foreground max-w-sm truncate text-xs font-semibold"
+              title={row.original.webhookUrl}
+            >
+              {row.original.webhookUrl}
+            </p>
+          </Link>
+        ),
+      },
+      {
+        header: t`Status`,
+        cell: ({ row }) => (
+          <Badge variant={row.original.enabled ? 'default' : 'neutral'} size="small">
+            {row.original.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
+          </Badge>
+        ),
+      },
+      {
+        header: t`Listening to`,
+        cell: ({ row }) => (
+          <p
+            className="text-foreground"
+            title={row.original.eventTriggers
+              .map((event) => toFriendlyWebhookEventName(event))
+              .join(', ')}
+          >
+            <Plural value={row.original.eventTriggers.length} one="# Event" other="# Events" />
+          </p>
+        ),
+      },
+      {
+        header: t`Created`,
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        header: t`Actions`,
+        cell: ({ row }) => <WebhookTableActionDropdown webhook={row.original} />,
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
 
   return (
     <div>
       <SettingsHeader
-        title={_(msg`Webhooks`)}
-        subtitle={_(msg`On this page, you can create new Webhooks and manage the existing ones.`)}
+        title={t`Webhooks`}
+        subtitle={t`On this page, you can create new Webhooks and manage the existing ones.`}
       >
         <WebhookCreateDialog />
       </SettingsHeader>
@@ -43,74 +119,95 @@ export default function WebhookPage() {
           <Loader className="h-8 w-8 animate-spin text-gray-500" />
         </div>
       )}
-      {webhooks && webhooks.length === 0 && (
-        // TODO: Perhaps add some illustrations here to make the page more engaging
-        <div className="mb-4">
-          <p className="text-muted-foreground mt-2 text-sm italic">
-            <Trans>
-              You have no webhooks yet. Your webhooks will be shown here once you create them.
-            </Trans>
-          </p>
-        </div>
-      )}
-      {webhooks && webhooks.length > 0 && (
-        <div className="mt-4 flex max-w-2xl flex-col gap-y-4">
-          {webhooks?.map((webhook) => (
-            <div
-              key={webhook.id}
-              className={cn(
-                'border-border rounded-lg border p-4',
-                !webhook.enabled && 'bg-muted/40',
-              )}
-            >
-              <div className="flex flex-col gap-x-4 sm:flex-row sm:items-center sm:justify-between">
-                <div>
-                  <div className="truncate font-mono text-xs">{webhook.id}</div>
 
-                  <div className="mt-1.5 flex items-center gap-2">
-                    <h5
-                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
-                      title={webhook.webhookUrl}
-                    >
-                      {webhook.webhookUrl}
-                    </h5>
-
-                    <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
-                      {webhook.enabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
-                    </Badge>
-                  </div>
-
-                  <p className="text-muted-foreground mt-2 text-xs">
-                    <Trans>
-                      Listening to{' '}
-                      {webhook.eventTriggers
-                        .map((trigger) => toFriendlyWebhookEventName(trigger))
-                        .join(', ')}
-                    </Trans>
-                  </p>
-
-                  <p className="text-muted-foreground mt-2 text-xs">
-                    <Trans>Created on {i18n.date(webhook.createdAt, DateTime.DATETIME_FULL)}</Trans>
-                  </p>
-                </div>
-
-                <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
-                  <Button asChild variant="outline">
-                    <Link to={`/t/${team.url}/settings/webhooks/${webhook.id}`}>
-                      <Trans>Edit</Trans>
-                    </Link>
-                  </Button>
-                  <WebhookDeleteDialog webhook={webhook}>
-                    <Button variant="destructive">
-                      <Trans>Delete</Trans>
-                    </Button>
-                  </WebhookDeleteDialog>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
+      <DataTable
+        columns={columns}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        error={{
+          enable: isError,
+        }}
+        emptyState={
+          <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+            <p>
+              <Trans>
+                You have no webhooks yet. Your webhooks will be shown here once you create them.
+              </Trans>
+            </p>
+          </div>
+        }
+        skeleton={{
+          enable: isLoading,
+          rows: 3,
+          component: (
+            <>
+              <TableCell>
+                <Skeleton className="h-4 w-24 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-8 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-6 rounded-full" />
+              </TableCell>
+            </>
+          ),
+        }}
+      />
     </div>
   );
 }
+
+const WebhookTableActionDropdown = ({ webhook }: { webhook: Webhook }) => {
+  const team = useCurrentTeam();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger data-testid="webhook-table-action-btn">
+        <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" forceMount>
+        <DropdownMenuLabel>
+          <Trans>Action</Trans>
+        </DropdownMenuLabel>
+
+        <DropdownMenuItem asChild>
+          <Link to={`/t/${team.url}/settings/webhooks/${webhook.id}`}>
+            <ScrollTextIcon className="mr-2 h-4 w-4" />
+            <Trans>Logs</Trans>
+          </Link>
+        </DropdownMenuItem>
+
+        <WebhookEditDialog
+          webhook={webhook}
+          trigger={
+            <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+              <div>
+                <EditIcon className="mr-2 h-4 w-4" />
+                <Trans>Edit</Trans>
+              </div>
+            </DropdownMenuItem>
+          }
+        />
+
+        <WebhookDeleteDialog webhook={webhook}>
+          <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+            <div>
+              <Trash2Icon className="mr-2 h-4 w-4" />
+              <Trans>Delete</Trans>
+            </div>
+          </DropdownMenuItem>
+        </WebhookDeleteDialog>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};