Skip to content

Commit

Permalink
improve webhook selectors
Browse files Browse the repository at this point in the history
  • Loading branch information
steven-tey committed Jan 11, 2025
1 parent 23e1bd4 commit ea791d6
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 66 deletions.
2 changes: 1 addition & 1 deletion apps/web/ui/modals/link-builder/webhook-select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const NoWebhooksFound = () => {
<div>
<Button
className="mt-1 h-8"
onClick={() => router.push(`/${slug}/settings/webhooks`)}
onClick={() => window.open(`/${slug}/settings/webhooks`, "_blank")}
text="Add webhook"
/>
</div>
Expand Down
143 changes: 78 additions & 65 deletions apps/web/ui/webhooks/webhook-header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,10 @@ export default function WebhookHeader({ webhookId }: { webhookId: string }) {

const { execute, isExecuting } = useAction(enableOrDisableWebhook, {
onSuccess: async ({ data }) => {
await mutate();
toast.success(
data?.disabledAt ? "Webhook disabled." : "Webhook enabled.",
);

await mutate();
},
onError: ({ error }) => {
toast.error(error.serverError);
Expand Down Expand Up @@ -129,69 +128,83 @@ export default function WebhookHeader({ webhookId }: { webhookId: string }) {

<Popover
content={
<div className="grid w-screen gap-px p-2 sm:w-48">
<Button
text="Send test event"
variant="outline"
icon={<Send className="size-4" />}
className="h-9 justify-start px-2"
onClick={() => {
setOpenPopover(false);
setShowSendTestWebhookModal(true);
}}
/>

<Button
text={
webhook?.disabledAt ? "Enable webhook" : "Disable webhook"
}
variant="outline"
icon={
webhook?.disabledAt ? (
<CircleX className="size-4" />
) : (
<CircleCheck className="size-4" />
)
}
className="h-9 justify-start px-2"
onClick={async () => {
execute({
webhookId,
workspaceId: workspaceId!,
});

setOpenPopover(false);
}}
disabled={disabled}
disabledTooltip={disabledTooltip}
loading={isExecuting}
/>

<Button
text="Copy Webhook ID"
variant="outline"
icon={
copiedWebhookId ? (
<CircleCheck className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)
}
className="h-9 justify-start px-2"
onClick={() => copyWebhookId()}
/>

<Button
text="Delete webhook"
variant="danger-outline"
icon={<Trash className="size-4" />}
className="h-9 justify-start px-2"
onClick={() => {
setDeleteWebhookModal(true);
}}
disabled={disabled}
disabledTooltip={disabledTooltip}
/>
<div className="w-screen sm:w-48">
<div className="grid gap-px p-2">
<Button
text="Copy Webhook ID"
variant="outline"
icon={
copiedWebhookId ? (
<CircleCheck className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)
}
className="h-9 justify-start px-2"
onClick={() => copyWebhookId()}
/>

<Button
text="Send test event"
variant="outline"
icon={<Send className="size-4" />}
className="h-9 justify-start px-2"
onClick={() => {
setOpenPopover(false);
setShowSendTestWebhookModal(true);
}}
/>
</div>

<div className="h-px w-full bg-gray-200" />

<div className="grid gap-px p-2">
<Button
text={
webhook?.disabledAt ? "Enable webhook" : "Disable webhook"
}
variant="outline"
icon={
webhook?.disabledAt ? (
<CircleCheck className="size-4" />
) : (
<CircleX className="size-4" />
)
}
className="h-9 justify-start px-2"
onClick={async () => {
if (
!confirm(
`Are you sure you want to ${
webhook?.disabledAt ? "enable" : "disable"
} this webhook?`,
)
) {
return;
}

execute({
webhookId,
workspaceId: workspaceId!,
});
}}
disabled={disabled}
disabledTooltip={disabledTooltip}
loading={isExecuting}
/>

<Button
text="Delete webhook"
variant="danger-outline"
icon={<Trash className="size-4" />}
className="h-9 justify-start px-2"
onClick={() => {
setDeleteWebhookModal(true);
}}
disabled={disabled}
disabledTooltip={disabledTooltip}
/>
</div>
</div>
}
align="end"
Expand Down

0 comments on commit ea791d6

Please sign in to comment.