Refactor: Webhooks page (#303)

[Ticket](https://linear.app/e2b/issue/ENG-3765/refactor-webhooks-page-according-to-figma)

## Summary
- Refactors the webhooks page into focused components and matches the
Dashboard 2.0 Figma
- Aligns the page with the API Keys / Members conventions

## Test plan
- Manually verified the webhooks page against the Figma: empty state,
search behavior, event badge tooltips, and row URL copy.
- Walked through the create / update / delete / rotate-secret flows on
the Vercel preview, including the discard-changes confirmation when
closing the dialog with unsaved edits.
- Confirmed `bun run build` passes with no type errors.

---------

Co-authored-by: Alex Drankou <alex@e2b.dev>

Author: sarimrmalik

src/app/dashboard/[teamSlug]/webhooks/page.tsx

@@ -1,60 +1,29 @@
 import { notFound } from 'next/navigation'
 import { INCLUDE_ARGUS } from '@/configs/flags'
-import WebhookAddEditDialog from '@/features/dashboard/settings/webhooks/add-edit-dialog'
-import WebhooksTable from '@/features/dashboard/settings/webhooks/table'
-import Frame from '@/ui/frame'
-import { Button } from '@/ui/primitives/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-} from '@/ui/primitives/card'
-import { AddIcon } from '@/ui/primitives/icons'
+import { Page } from '@/features/dashboard/layouts/page'
+import { WebhooksPageContent } from '@/features/dashboard/settings/webhooks/webhooks-page-content'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
 
-interface WebhooksPageClientProps {
+interface WebhooksPageProps {
   params: Promise<{
     teamSlug: string
   }>
 }
 
-export default async function WebhooksPage({
-  params,
-}: WebhooksPageClientProps) {
+export default async function WebhooksPage({ params }: WebhooksPageProps) {
   if (!INCLUDE_ARGUS) {
     return notFound()
   }
 
-  return (
-    <Frame
-      classNames={{
-        wrapper: 'w-full max-md:p-0',
-        frame: 'max-md:border-none',
-      }}
-    >
-      <Card className="w-full">
-        <CardHeader>
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-            <CardDescription className="max-w-[600px] text-fg">
-              Webhooks allow your external service to be notified when sandbox
-              lifecycle events happen. When the specified event happens, we'll
-              send a POST request to the configured URLs.
-            </CardDescription>
+  const { teamSlug } = await params
 
-            <WebhookAddEditDialog mode="add">
-              <Button className="w-full sm:w-auto sm:self-start">
-                <AddIcon className="size-4" /> Add Webhook
-              </Button>
-            </WebhookAddEditDialog>
-          </div>
-        </CardHeader>
+  prefetch(trpc.webhooks.list.queryOptions({ teamSlug }))
 
-        <CardContent>
-          <div className="w-full overflow-x-auto">
-            <WebhooksTable params={params} className="min-w-[900px]" />
-          </div>
-        </CardContent>
-      </Card>
-    </Frame>
+  return (
+    <HydrateClient>
+      <Page>
+        <WebhooksPageContent />
+      </Page>
+    </HydrateClient>
   )
 }

src/core/modules/webhooks/repository.server.ts

@@ -1,6 +1,7 @@
 import 'server-only'
 
 import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
+import type { UpsertWebhookInput } from '@/core/server/functions/webhooks/schema'
 import { infra } from '@/core/shared/clients/api'
 import type { components as ArgusComponents } from '@/core/shared/contracts/argus-api.types'
 import { repoErrorFromHttp } from '@/core/shared/errors'
@@ -14,16 +15,6 @@ type WebhooksRepositoryDeps = {
 
 export type WebhooksScope = TeamRequestScope
 
-export interface UpsertWebhookInput {
-  mode: 'create' | 'edit'
-  webhookId?: string
-  name: string
-  url: string
-  events: string[]
-  signatureSecret?: string
-  enabled: boolean
-}
-
 export interface WebhooksRepository {
   listWebhooks(): Promise<
     RepoResult<ArgusComponents['schemas']['WebhookDetail'][]>
@@ -68,34 +59,68 @@ export function createWebhooksRepository(
       return ok(response.data ?? [])
     },
     async upsertWebhook(input) {
-      const response =
-        input.mode === 'edit'
-          ? await deps.infraClient.PATCH('/events/webhooks/{webhookID}', {
-              headers: {
-                ...deps.authHeaders(scope.accessToken, scope.teamId),
-              },
-              params: {
-                path: { webhookID: input.webhookId ?? '' },
-              },
-              body: {
-                name: input.name,
-                url: input.url,
-                events: input.events,
-                enabled: input.enabled,
-              },
-            })
-          : await deps.infraClient.POST('/events/webhooks', {
-              headers: {
-                ...deps.authHeaders(scope.accessToken, scope.teamId),
-              },
-              body: {
-                name: input.name,
-                url: input.url,
-                events: input.events,
-                enabled: input.enabled,
-                signatureSecret: input.signatureSecret ?? '',
-              },
-            })
+      if (input.mode === 'update') {
+        if (!input.webhookId) {
+          return err(
+            repoErrorFromHttp(
+              400,
+              'webhookId is required when updating a webhook'
+            )
+          )
+        }
+
+        const response = await deps.infraClient.PATCH(
+          '/events/webhooks/{webhookID}',
+          {
+            headers: {
+              ...deps.authHeaders(scope.accessToken, scope.teamId),
+            },
+            params: {
+              path: { webhookID: input.webhookId },
+            },
+            body: {
+              name: input.name,
+              url: input.url,
+              events: input.events,
+              enabled: input.enabled,
+            },
+          }
+        )
+
+        if (!response.response.ok || response.error) {
+          return err(
+            repoErrorFromHttp(
+              response.response.status,
+              response.error?.message ?? 'Failed to upsert webhook',
+              response.error
+            )
+          )
+        }
+
+        return ok(undefined)
+      }
+
+      if (!input.signatureSecret) {
+        return err(
+          repoErrorFromHttp(
+            400,
+            'signatureSecret is required when creating a webhook'
+          )
+        )
+      }
+
+      const response = await deps.infraClient.POST('/events/webhooks', {
+        headers: {
+          ...deps.authHeaders(scope.accessToken, scope.teamId),
+        },
+        body: {
+          name: input.name,
+          url: input.url,
+          events: input.events,
+          enabled: input.enabled,
+          signatureSecret: input.signatureSecret,
+        },
+      })
 
       if (!response.response.ok || response.error) {
         return err(

src/core/server/actions/webhooks-actions.ts

@@ -6,6 +6,7 @@ import { sandboxesRouter } from './sandboxes'
 import { supportRouter } from './support'
 import { teamsRouter } from './teams'
 import { templatesRouter } from './templates'
+import { webhooksRouter } from './webhooks'
 
 export const trpcAppRouter = createTRPCRouter({
   sandbox: sandboxRouter,
@@ -15,6 +16,7 @@ export const trpcAppRouter = createTRPCRouter({
   billing: billingRouter,
   support: supportRouter,
   teams: teamsRouter,
+  webhooks: webhooksRouter,
 })
 
 export type TRPCAppRouter = typeof trpcAppRouter