betterstart-cli 0.0.28 → 0.0.30

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhook-endpoint-dialog.tsx

@@ -0,0 +1,370 @@
+'use client'
+
+import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import {
+  createWebhook,
+  getWebhookSecret,
+  regenerateWebhookSecret,
+  sendTestWebhook,
+  updateWebhook
+} from '@admin/actions/webhooks'
+import { Button } from '@admin/components/ui/button'
+import { Checkbox } from '@admin/components/ui/checkbox'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@admin/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import { Switch } from '@admin/components/ui/switch'
+import { webhookEventSources } from '@admin/data/webhook-events'
+import { useWebhookSubscriptions } from '@admin/hooks/use-webhooks'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const endpointSchema = z.object({
+  name: z.string().trim().min(1, 'Name is required').max(200, 'Name is too long'),
+  url: z.string().trim().url('Enter a valid URL'),
+  enabled: z.boolean(),
+  events: z.array(z.string())
+})
+
+type EndpointFormValues = z.infer<typeof endpointSchema>
+
+interface WebhookEndpointDialogProps {
+  webhook: WebhookEndpointListItem | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEndpointDialogProps) {
+  const queryClient = useQueryClient()
+  const isEdit = webhook !== null
+  const { data: subscriptions } = useWebhookSubscriptions()
+  const subscribedEvents = React.useMemo(
+    () =>
+      webhook
+        ? (subscriptions ?? [])
+            .filter((entry) => entry.webhookId === webhook.id)
+            .map((entry) => entry.event)
+        : [],
+    [subscriptions, webhook]
+  )
+  const [selectedEvents, setSelectedEvents] = React.useState<string[] | null>(null)
+  const events = selectedEvents ?? subscribedEvents
+  const [secret, setSecret] = React.useState<string | null>(null)
+
+  const formSources = webhookEventSources.filter((source) => source.kind === 'form')
+  const contentSources = webhookEventSources.filter((source) => source.kind !== 'form')
+
+  const form = useForm<EndpointFormValues>({
+    resolver: standardSchemaResolver(endpointSchema),
+    defaultValues: {
+      name: webhook?.name ?? '',
+      url: webhook?.url ?? '',
+      enabled: webhook?.enabled ?? true,
+      events: subscribedEvents
+    }
+  })
+
+  const saveMutation = useMutation({
+    mutationFn: async (values: EndpointFormValues) => {
+      const endpointValues = {
+        name: values.name,
+        url: values.url,
+        enabled: values.enabled
+      }
+      const result = webhook
+        ? await updateWebhook(webhook.id, { ...endpointValues, events })
+        : await createWebhook({ ...endpointValues, events })
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save endpoint')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success(isEdit ? 'Endpoint saved' : 'Endpoint created')
+      await queryClient.invalidateQueries({ queryKey: ['webhooks'] })
+      await queryClient.invalidateQueries({
+        queryKey: ['webhook-subscriptions']
+      })
+      onOpenChange(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const revealSecretMutation = useMutation({
+    mutationFn: async () => {
+      if (!webhook) throw new Error('Save the endpoint first')
+      const result = await getWebhookSecret(webhook.id)
+      if (!result.success || !result.secret) {
+        throw new Error(result.error || 'Failed to fetch signing secret')
+      }
+
+      return result.secret
+    },
+    onSuccess: (value) => setSecret(value),
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to fetch signing secret')
+    }
+  })
+
+  const regenerateSecretMutation = useMutation({
+    mutationFn: async () => {
+      if (!webhook) throw new Error('Save the endpoint first')
+      const result = await regenerateWebhookSecret(webhook.id)
+      if (!result.success || !result.secret) {
+        throw new Error(result.error || 'Failed to regenerate signing secret')
+      }
+
+      return result.secret
+    },
+    onSuccess: (value) => {
+      setSecret(value)
+      toast.success('Signing secret regenerated')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to regenerate signing secret')
+    }
+  })
+
+  const testMutation = useMutation({
+    mutationFn: async () => {
+      if (!webhook) throw new Error('Save the endpoint first')
+      const result = await sendTestWebhook(webhook.id)
+      if (!result.success) {
+        throw new Error(result.error || 'Test webhook failed')
+      }
+
+      return result
+    },
+    onSuccess: async (result) => {
+      toast.success(
+        result.statusCode ? `Test delivered (status ${result.statusCode})` : 'Test delivered'
+      )
+      await queryClient.invalidateQueries({ queryKey: ['webhook-deliveries'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Test webhook failed')
+    }
+  })
+
+  const isPending = saveMutation.isPending
+
+  function toggleEvent(event: string, checked: boolean) {
+    const nextEvents = checked ? [...events, event] : events.filter((entry) => entry !== event)
+    setSelectedEvents(nextEvents)
+    form.setValue('events', nextEvents)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-135">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}>
+            <DialogHeader>
+              <DialogTitle>
+                {isEdit ? `Edit endpoint — ${webhook.name}` : 'Add endpoint'}
+              </DialogTitle>
+              <DialogDescription>
+                Events are delivered as signed JSON POST requests
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogBody>
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Zapier" disabled={isPending} {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>URL</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="url"
+                          placeholder="https://example.com/webhooks"
+                          disabled={isPending}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="enabled"
+                  render={({ field }) => (
+                    <FormItem className="flex items-center justify-between rounded-md border border-border px-3 py-2">
+                      <FormLabel>Enabled</FormLabel>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                          disabled={isPending}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                {isEdit && (
+                  <div className="space-y-2 rounded-md border border-border p-3">
+                    <p className="text-sm font-medium leading-none">Signing secret</p>
+                    <div className="flex items-center gap-2">
+                      <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                        {secret ?? 'whsec_••••••••••••••••'}
+                      </span>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        disabled={revealSecretMutation.isPending || secret !== null}
+                        onClick={() => revealSecretMutation.mutate()}
+                      >
+                        Reveal
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        disabled={regenerateSecretMutation.isPending}
+                        onClick={() => regenerateSecretMutation.mutate()}
+                      >
+                        {regenerateSecretMutation.isPending && (
+                          <LoaderCircle className="animate-spin" />
+                        )}
+                        Regenerate
+                      </Button>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      Requests carry x-webhook-id, x-webhook-timestamp, and an HMAC-SHA256
+                      x-webhook-signature of the body.
+                    </p>
+                  </div>
+                )}
+                {(formSources.length > 0 || contentSources.length > 0) && (
+                  <FormField
+                    control={form.control}
+                    name="events"
+                    render={() => (
+                      <React.Fragment>
+                        {formSources.length > 0 && (
+                          <fieldset className="space-y-2 rounded-md border border-border p-3">
+                            <legend className="px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                              Events · Forms
+                            </legend>
+                            {formSources.flatMap((source) =>
+                              source.events.map((event) => (
+                                <FormItem key={event} className="flex items-center gap-2 space-y-0">
+                                  <FormControl>
+                                    <Checkbox
+                                      checked={events.includes(event)}
+                                      onCheckedChange={(checked) =>
+                                        toggleEvent(event, checked === true)
+                                      }
+                                      disabled={isPending}
+                                    />
+                                  </FormControl>
+                                  <FormLabel className="font-mono text-xs font-normal">
+                                    {event}
+                                  </FormLabel>
+                                </FormItem>
+                              ))
+                            )}
+                          </fieldset>
+                        )}
+                        {contentSources.length > 0 && (
+                          <fieldset className="space-y-2 rounded-md border border-border p-3">
+                            <legend className="px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                              Events · Entities
+                            </legend>
+                            {contentSources.flatMap((source) =>
+                              source.events.map((event) => (
+                                <FormItem key={event} className="flex items-center gap-2 space-y-0">
+                                  <FormControl>
+                                    <Checkbox
+                                      checked={events.includes(event)}
+                                      onCheckedChange={(checked) =>
+                                        toggleEvent(event, checked === true)
+                                      }
+                                      disabled={isPending}
+                                    />
+                                  </FormControl>
+                                  <FormLabel className="font-mono text-xs font-normal">
+                                    {event}
+                                  </FormLabel>
+                                </FormItem>
+                              ))
+                            )}
+                          </fieldset>
+                        )}
+                      </React.Fragment>
+                    )}
+                  />
+                )}
+                {formSources.length === 0 && contentSources.length === 0 && (
+                  <p className="text-sm text-muted-foreground">
+                    No schemas yet — generate an entity or form schema to subscribe this endpoint to
+                    its events.
+                  </p>
+                )}
+              </div>
+            </DialogBody>
+
+            <DialogFooter showCloseButton={true}>
+              {isEdit && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="lg"
+                  disabled={testMutation.isPending}
+                  onClick={() => testMutation.mutate()}
+                >
+                  {testMutation.isPending && <LoaderCircle className="animate-spin" />}
+                  Send test
+                </Button>
+              )}
+              <Button type="submit" disabled={isPending} size="lg">
+                {isPending && <LoaderCircle className="animate-spin" />}
+                {isEdit ? 'Save endpoint' : 'Create endpoint'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-columns.tsx

@@ -0,0 +1,258 @@
+'use client'
+
+import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import { SortIndicator } from '@admin/components/shared/sort-indicator'
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+import type { ColumnDef } from '@tanstack/react-table'
+import { formatDistanceToNow } from 'date-fns'
+import { WebhookActions } from './webhook-actions'
+import { WebhookEnabledSwitch } from './webhook-enabled-switch'
+
+interface WebhooksColumnsOptions {
+  onEdit: (webhook: WebhookEndpointListItem) => void
+  onDelete: (webhook: WebhookEndpointListItem) => void
+}
+
+export function createWebhooksColumns({
+  onEdit,
+  onDelete
+}: WebhooksColumnsOptions): ColumnDef<WebhookEndpointListItem>[] {
+  return [
+    {
+      accessorKey: 'name',
+      size: 240,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Name, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Name</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => <span className="truncate font-medium">{row.original.name}</span>,
+      enableHiding: false
+    },
+    {
+      accessorKey: 'url',
+      size: 320,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by URL, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">URL</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => (
+        <span className="truncate font-mono text-xs text-muted-foreground">{row.original.url}</span>
+      )
+    },
+    {
+      accessorKey: 'enabled',
+      size: 110,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Enabled, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Enabled</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => <WebhookEnabledSwitch webhook={row.original} />
+    },
+    {
+      accessorKey: 'eventCount',
+      size: 100,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Events, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Events</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => <span className="tabular-nums">{row.original.eventCount}</span>
+    },
+    {
+      accessorKey: 'lastDeliveryAt',
+      size: 220,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Last delivery, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Last delivery</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) =>
+        row.original.lastDeliveryAt ? (
+          <span className="flex min-w-0 items-center gap-2">
+            <Badge variant={row.original.lastDeliverySuccess ? 'outline' : 'destructive'}>
+              {row.original.lastDeliverySuccess ? 'Delivered' : 'Failed'}
+            </Badge>
+            <span className="truncate text-xs text-muted-foreground">
+              {formatDistanceToNow(new Date(row.original.lastDeliveryAt), {
+                addSuffix: true
+              })}
+            </span>
+          </span>
+        ) : (
+          <span className="text-muted-foreground">—</span>
+        )
+    },
+    {
+      accessorKey: 'createdAt',
+      size: 120,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Created, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Created</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => (
+        <div className="text-sm">
+          {new Date(row.original.createdAt).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+          })}
+        </div>
+      )
+    },
+    {
+      id: 'actions',
+      size: 64,
+      enableResizing: false,
+      meta: { width: '64px' },
+      header: () => <span className="sr-only">Actions</span>,
+      cell: ({ row }) => (
+        <div className="flex justify-end">
+          <WebhookActions webhook={row.original} onEdit={onEdit} onDelete={onDelete} />
+        </div>
+      )
+    }
+  ]
+}