Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: ui updates

Browse Source
This commit is contained in:
Mythie
2024-02-26 22:24:23 +11:00
parent 15c22d3897
commit 70165c4469
9 changed files with 210 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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>
))}

26
apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx
View File

@ -51,19 +51,6 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
</Link>
)}
<Link href="/settings/webhooks">
<Button
variant="ghost"
className={cn(
'w-full justify-start',
pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
)}
>
<Webhook className="mr-2 h-5 w-5" />
Webhooks
</Button>
</Link>
<Link href="/settings/security">
<Button
variant="ghost"
@ -90,6 +77,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
</Button>
</Link>
<Link href="/settings/webhooks">
<Button
variant="ghost"
className={cn(
'w-full justify-start',
pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
)}
>
<Webhook className="mr-2 h-5 w-5" />
Webhooks
</Button>
</Link>
{isBillingEnabled && (
<Link href="/settings/billing">
<Button

26
apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx
View File

@ -54,19 +54,6 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
</Link>
)}
<Link href="/settings/webhooks">
<Button
variant="ghost"
className={cn(
'w-full justify-start',
pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
)}
>
<Webhook className="mr-2 h-5 w-5" />
Webhooks
</Button>
</Link>
<Link href="/settings/security">
<Button
variant="ghost"
@ -93,6 +80,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
</Button>
</Link>
<Link href="/settings/webhooks">
<Button
variant="ghost"
className={cn(
'w-full justify-start',
pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
)}
>
<Webhook className="mr-2 h-5 w-5" />
Webhooks
</Button>
</Link>
{isBillingEnabled && (
<Link href="/settings/billing">
<Button

90
apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx
View File

@ -24,6 +24,7 @@ import {
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
@ -34,7 +35,7 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
import { Switch } from '@documenso/ui/primitives/switch';
import { useToast } from '@documenso/ui/primitives/use-toast';
import { MultiSelectCombobox } from './multiselect-combobox';
import { TriggerMultiSelectCombobox } from './trigger-multiselect-combobox';
type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
@ -92,7 +93,7 @@ export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogPr
{trigger ?? <Button className="flex-shrink-0">Create Webhook</Button>}
</DialogTrigger>
<DialogContent position="center">
<DialogContent className="max-w-lg" position="center">
<DialogHeader>
<DialogTitle>Create webhook</DialogTitle>
<DialogDescription>On this page, you can create a new webhook.</DialogDescription>
@ -104,34 +105,68 @@ export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogPr
className="flex h-full flex-col space-y-4"
disabled={form.formState.isSubmitting}
>
<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel required>Webhook URL</FormLabel>
<FormControl>
<Input className="bg-background" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<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 gap-2">
<FormLabel required>Event triggers</FormLabel>
<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>
)}
@ -150,24 +185,11 @@ export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogPr
value={field.value ?? ''}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="enabled"
render={({ field }) => (
<FormItem className="flex items-center gap-2">
<FormLabel className="mt-2">Active</FormLabel>
<FormControl>
<Switch
className="bg-background"
checked={field.value}
onCheckedChange={field.onChange}
/>
</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>
)}

30
apps/web/src/components/(dashboard)/settings/webhooks/multiselect-combobox.tsx → apps/web/src/components/(dashboard)/settings/webhooks/trigger-multiselect-combobox.tsx
View File

@ -1,8 +1,9 @@
import * as React from 'react';
import { useEffect, useState } from 'react';
import { WebhookTriggerEvents } from '@prisma/client/';
import { Check, ChevronsUpDown } from 'lucide-react';
import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button';
import {
@ -16,18 +17,21 @@ import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitive
import { truncateTitle } from '~/helpers/truncate-title';
type ComboboxProps = {
type TriggerMultiSelectComboboxProps = {
listValues: string[];
onChange: (_values: string[]) => void;
};
const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
const [isOpen, setIsOpen] = React.useState(false);
const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
export const TriggerMultiSelectCombobox = ({
listValues,
onChange,
}: TriggerMultiSelectComboboxProps) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedValues, setSelectedValues] = useState<string[]>([]);
const triggerEvents = Object.values(WebhookTriggerEvents);
React.useEffect(() => {
useEffect(() => {
setSelectedValues(listValues);
}, [listValues]);
@ -35,6 +39,7 @@ const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
const handleSelect = (currentValue: string) => {
let newSelectedValues;
if (selectedValues.includes(currentValue)) {
newSelectedValues = selectedValues.filter((value) => value !== currentValue);
} else {
@ -59,9 +64,14 @@ const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="z-9999 w-[200px] p-0">
<PopoverContent className="z-9999 w-full max-w-[280px] p-0">
<Command>
<CommandInput placeholder={truncateTitle(selectedValues.join(', '), 15)} />
<CommandInput
placeholder={truncateTitle(
selectedValues.map((v) => toFriendlyWebhookEventName(v)).join(', '),
15,
)}
/>
<CommandEmpty>No value found.</CommandEmpty>
<CommandGroup>
{allEvents.map((value: string, i: number) => (
@ -72,7 +82,7 @@ const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
)}
/>
{value}
{toFriendlyWebhookEventName(value)}
</CommandItem>
))}
</CommandGroup>
@ -81,5 +91,3 @@ const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
</Popover>
);
};
export { MultiSelectCombobox };

1
packages/lib/server-only/public-api/test-credentials.ts
View File

@ -5,6 +5,7 @@ import { validateApiToken } from '@documenso/lib/server-only/webhooks/zapier/val
export const testCredentialsHandler = async (req: NextApiRequest, res: NextApiResponse) => {
try {
const { authorization } = req.headers;
const user = await validateApiToken({ authorization });
return res.status(200).json({

17
packages/lib/server-only/user/get-user-webhooks.ts
View File

@ -1,17 +0,0 @@
import { prisma } from '@documenso/prisma';
export interface GetUserWebhooksByIdOptions {
id: number;
}
export const getUserWebhooksById = async ({ id }: GetUserWebhooksByIdOptions) => {
return await prisma.user.findFirstOrThrow({
where: {
id,
},
select: {
email: true,
Webhooks: true,
},
});
};

3
packages/lib/universal/webhook/to-friendly-webhook-event-name.ts Normal file
View File

@ -0,0 +1,3 @@
export const toFriendlyWebhookEventName = (eventName: string) => {
return eventName.replace(/_/g, '.').toLowerCase();
};