chore: ui updates

apps/web/src/app/(dashboard)/settings/webhooks/[id]/page.tsx

@@ -13,6 +13,7 @@ import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -24,7 +25,7 @@ import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { MultiSelectCombobox } from '~/components/(dashboard)/settings/webhooks/multiselect-combobox';
+import { TriggerMultiSelectCombobox } from '~/components/(dashboard)/settings/webhooks/trigger-multiselect-combobox';
 
 const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
 
@@ -95,36 +96,77 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
       )}
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
-            <FormField
-              control={form.control}
-              name="webhookUrl"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel htmlFor="webhookUrl">Webhook URL</FormLabel>
-                  <Input {...field} id="webhookUrl" type="text" />
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+          <fieldset
+            className="flex h-full max-w-xl 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>
+                      The URL for Documenso to send webhook events to.
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Enabled</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">
-                  <FormLabel required>Event triggers</FormLabel>
+                <FormItem className="flex flex-col gap-2">
+                  <FormLabel required>Triggers</FormLabel>
                   <FormControl>
-                    <MultiSelectCombobox
+                    <TriggerMultiSelectCombobox
                       listValues={value}
                       onChange={(values: string[]) => {
                         onChange(values);
                       }}
                     />
                   </FormControl>
+
+                  <FormDescription>
+                    The events that will trigger a webhook to be sent to your URL.
+                  </FormDescription>
+
                   <FormMessage />
                 </FormItem>
               )}
             />
+
             <FormField
               control={form.control}
               name="secret"
@@ -134,28 +176,16 @@ export default function WebhookPage({ params }: WebhookPageOptions) {
                   <FormControl>
                     <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
                   </FormControl>
+
+                  <FormDescription>
+                    A secret that will be sent to your URL so you can verify that the request has
+                    been sent by Documenso.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
             />
 
-            <FormField
-              control={form.control}
-              name="enabled"
-              render={({ field }) => (
-                <FormItem className="flex items-center gap-x-2">
-                  <FormLabel className="mt-2">Active</FormLabel>
-                  <FormControl>
-                    <Switch
-                      className="bg-background"
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
             <div className="mt-4">
               <Button type="submit" loading={form.formState.isSubmitting}>
                 Update webhook

apps/web/src/app/(dashboard)/settings/webhooks/page.tsx

@@ -2,16 +2,19 @@
 
 import Link from 'next/link';
 
-import { Zap } from 'lucide-react';
-import { ToggleLeft, ToggleRight } from 'lucide-react';
 import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
 
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
 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 { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { CreateWebhookDialog } from '~/components/(dashboard)/settings/webhooks/create-webhook-dialog';
 import { DeleteWebhookDialog } from '~/components/(dashboard)/settings/webhooks/delete-webhook-dialog';
+import { LocaleDate } from '~/components/formatter/locale-date';
 
 export default function WebhookPage() {
   const { data: webhooks, isLoading } = trpc.webhook.getWebhooks.useQuery();
@@ -43,35 +46,46 @@ export default function WebhookPage() {
       {webhooks && webhooks.length > 0 && (
         <div className="mt-4 flex max-w-xl flex-col gap-y-4">
           {webhooks?.map((webhook) => (
-            <div key={webhook.id} className="border-border rounded-lg border p-4">
+            <div
+              key={webhook.id}
+              className={cn(
+                'border-border rounded-lg border p-4',
+                !webhook.enabled && 'bg-muted/40',
+              )}
+            >
               <div className="flex items-center justify-between gap-x-4">
                 <div>
-                  <h4 className="text-lg font-semibold">Webhook URL</h4>
-                  <p className="text-muted-foreground break-all">{webhook.webhookUrl}</p>
-                  <h4 className="mt-4 text-lg font-semibold">Event triggers</h4>
-                  {webhook.eventTriggers.map((trigger, index) => (
-                    <span key={index} className="text-muted-foreground flex flex-row items-center">
-                      <Zap className="mr-1 h-4 w-4" /> {trigger}
-                    </span>
-                  ))}
-                  {webhook.enabled ? (
-                    <h4 className="mt-4 flex items-center gap-2 text-lg">
-                      Active <ToggleRight className="h-6 w-6 fill-green-200 stroke-green-400" />
-                    </h4>
-                  ) : (
-                    <h4 className="mt-4 flex items-center gap-2 text-lg">
-                      Inactive <ToggleLeft className="h-6 w-6 fill-slate-200 stroke-slate-400" />
-                    </h4>
-                  )}
+                  <div className="truncate font-mono text-xs">{webhook.id}</div>
+
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <h5 className="text-sm">{webhook.webhookUrl}</h5>
+
+                    <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
+                      {webhook.enabled ? 'Enabled' : 'Disabled'}
+                    </Badge>
+                  </div>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Listening to{' '}
+                    {webhook.eventTriggers
+                      .map((trigger) => toFriendlyWebhookEventName(trigger))
+                      .join(', ')}
+                  </p>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Created on{' '}
+                    <LocaleDate date={webhook.createdAt} format={DateTime.DATETIME_FULL} />
+                  </p>
+                </div>
+
+                <div className="flex flex-shrink-0 gap-4">
+                  <Button asChild variant="outline">
+                    <Link href={`/settings/webhooks/${webhook.id}`}>Edit</Link>
+                  </Button>
+                  <DeleteWebhookDialog webhook={webhook}>
+                    <Button variant="destructive">Delete</Button>
+                  </DeleteWebhookDialog>
                 </div>
-              </div>
-              <div className="mt-6 flex flex-col-reverse space-y-2 space-y-reverse sm:mt-0 sm:flex-row sm:justify-end sm:space-x-2 sm:space-y-0">
-                <Button asChild variant="outline">
-                  <Link href={`/settings/webhooks/${webhook.id}`}>Edit</Link>
-                </Button>
-                <DeleteWebhookDialog webhook={webhook}>
-                  <Button variant="destructive">Delete</Button>
-                </DeleteWebhookDialog>
               </div>
             </div>
           ))}