feat(web): add webhook management UI (#394)
* feat(api): add webhook CRUD API router and tests Add tRPC router for managing workspace webhooks: - list, create, update, delete endpoints (admin role required) - test endpoint to send a synthetic payload to a webhook URL - URL validation, event subscription filtering - Unit tests for all router procedures - Integration tests with PGlite test database - Add vitest config and test infrastructure for API package Depends on #391 (DB schema & repository). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(api): use assertPermission instead of assertUserInWorkspace Replace assertUserInWorkspace with assertPermission("workspace:manage") per project conventions. The permissions system is the preferred authorization approach for new code. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(api): use @kan/db alias instead of relative imports in tests Replace relative path imports (../../db/src/...) with the @kan/db alias configured in vitest.config.ts for consistency and robustness. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(api): use webhookUrlSchema in router input validation Cherry-pick router-related changes from b2cc9ac: - Use extracted webhookUrlSchema zod validator in create/update input schemas for consistent SSRF checks Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(api): replace dynamic import with static import for webhook utility Add packages/api/src/utils/webhook.ts with sendWebhookToUrl, createCardWebhookPayload, and webhookUrlSchema. Replace the dynamic import() in the test endpoint with a static import at the top of the file for better tree-shaking, type-checking, and readability. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(api): align sendWebhooksForWorkspace tests with merged PR #392 The merged delivery utility uses client-side event filtering (getActiveByWorkspaceId takes 2 args, not 3). Update test assertions to match the actual implementation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat(web): add webhook management UI Add settings page for managing workspace webhooks: - Add webhooks page route and settings navigation link - Add webhook list view with status toggles and action menus - Add create/edit modal with URL validation and event selection - Add delete confirmation dialog - Add WEBHOOKS_ENABLED env flag for feature gating Depends on #393 (CRUD API router). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(web): remove dead env vars, extract TableRow, import webhookEvents - Remove unused WEBHOOK_URL and WEBHOOK_SECRET env vars (leftovers from earlier env-var-based design) - Move TableRow component outside WebhookList to avoid re-creation on every render - Import webhookEvents from @kan/db/schema instead of hardcoding - Simplify formatDate to only handle Date objects (strings are not returned by tRPC/Superjson) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(web): gate webhooks settings tab to admin role The webhook API requires admin role, but the settings tab was visible to all users (condition: true). Now matches the API's authorization requirement, addressing reviewer feedback on PR #394. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(web): use webhookEvents constant for form defaults Replace hardcoded event arrays with [...webhookEvents] in NewWebhookModal so default values stay in sync if new events are added to the schema. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(web): use date-fns with locale for webhook date formatting Replace hardcoded toLocaleDateString('en-US') with date-fns format() using the useLocalisation() hook's dateLocale, matching the pattern used throughout the codebase (ActivityList, DateSelector, etc.). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nick Meinhold
@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
|
||||
import {
|
||||
HiChevronDown,
|
||||
HiOutlineBanknotes,
|
||||
HiOutlineBolt,
|
||||
HiOutlineCodeBracketSquare,
|
||||
HiOutlineRectangleGroup,
|
||||
HiOutlineShieldCheck,
|
||||
@@ -64,6 +65,12 @@ export function SettingsLayout({ children, currentTab }: SettingsLayoutProps) {
|
||||
label: t`API`,
|
||||
condition: true,
|
||||
},
|
||||
{
|
||||
key: "webhooks",
|
||||
icon: <HiOutlineBolt />,
|
||||
label: t`Webhooks`,
|
||||
condition: isAdmin,
|
||||
},
|
||||
{
|
||||
key: "integrations",
|
||||
icon: <HiOutlineCodeBracketSquare />,
|
||||
|
||||
16
apps/web/src/pages/settings/webhooks.tsx
Normal file
16
apps/web/src/pages/settings/webhooks.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { NextPageWithLayout } from "~/pages/_app";
|
||||
import { getDashboardLayout } from "~/components/Dashboard";
|
||||
import { SettingsLayout } from "~/components/SettingsLayout";
|
||||
import WebhookSettings from "~/views/settings/WebhookSettings";
|
||||
|
||||
const WebhookSettingsPage: NextPageWithLayout = () => {
|
||||
return (
|
||||
<SettingsLayout currentTab="webhooks">
|
||||
<WebhookSettings />
|
||||
</SettingsLayout>
|
||||
);
|
||||
};
|
||||
|
||||
WebhookSettingsPage.getLayout = (page) => getDashboardLayout(page);
|
||||
|
||||
export default WebhookSettingsPage;
|
||||
78
apps/web/src/views/settings/WebhookSettings.tsx
Normal file
78
apps/web/src/views/settings/WebhookSettings.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
|
||||
import Button from "~/components/Button";
|
||||
import FeedbackModal from "~/components/FeedbackModal";
|
||||
import Modal from "~/components/modal";
|
||||
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
|
||||
import { PageHead } from "~/components/PageHead";
|
||||
import { useModal } from "~/providers/modal";
|
||||
import { useWorkspace } from "~/providers/workspace";
|
||||
import { DeleteWebhookConfirmation } from "./components/DeleteWebhookConfirmation";
|
||||
import { NewWebhookModal } from "./components/NewWebhookModal";
|
||||
import WebhookList from "./components/WebhookList";
|
||||
|
||||
export default function WebhookSettings() {
|
||||
const { modalContentType, openModal, isOpen } = useModal();
|
||||
const { workspace } = useWorkspace();
|
||||
|
||||
if (!workspace) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHead title={t`Settings | Webhooks`} />
|
||||
|
||||
<div className="mb-8 border-t border-light-300 dark:border-dark-300">
|
||||
<h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
|
||||
{t`Webhooks`}
|
||||
</h2>
|
||||
<p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
|
||||
{t`Configure webhooks to receive notifications when cards are created, updated, moved, or deleted.`}
|
||||
</p>
|
||||
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<Button variant="primary" onClick={() => openModal("NEW_WEBHOOK")}>
|
||||
{t`Add webhook`}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<WebhookList workspacePublicId={workspace.publicId} />
|
||||
</div>
|
||||
|
||||
{/* Webhook-specific modals */}
|
||||
<Modal
|
||||
modalSize="md"
|
||||
isVisible={isOpen && modalContentType === "NEW_WEBHOOK"}
|
||||
>
|
||||
<NewWebhookModal workspacePublicId={workspace.publicId} />
|
||||
</Modal>
|
||||
<Modal
|
||||
modalSize="md"
|
||||
isVisible={isOpen && modalContentType === "EDIT_WEBHOOK"}
|
||||
>
|
||||
<NewWebhookModal workspacePublicId={workspace.publicId} isEdit />
|
||||
</Modal>
|
||||
<Modal
|
||||
modalSize="sm"
|
||||
isVisible={isOpen && modalContentType === "DELETE_WEBHOOK"}
|
||||
>
|
||||
<DeleteWebhookConfirmation workspacePublicId={workspace.publicId} />
|
||||
</Modal>
|
||||
|
||||
{/* Global modals */}
|
||||
<Modal
|
||||
modalSize="md"
|
||||
isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
|
||||
>
|
||||
<FeedbackModal />
|
||||
</Modal>
|
||||
<Modal
|
||||
modalSize="sm"
|
||||
isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
|
||||
>
|
||||
<NewWorkspaceForm />
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { HiXMark } from "react-icons/hi2";
|
||||
|
||||
import Button from "~/components/Button";
|
||||
import { useModal } from "~/providers/modal";
|
||||
import { usePopup } from "~/providers/popup";
|
||||
import { api } from "~/utils/api";
|
||||
|
||||
interface DeleteWebhookConfirmationProps {
|
||||
workspacePublicId: string;
|
||||
}
|
||||
|
||||
export function DeleteWebhookConfirmation({
|
||||
workspacePublicId,
|
||||
}: DeleteWebhookConfirmationProps) {
|
||||
const { closeModal, entityId: webhookPublicId, entityLabel: webhookName } = useModal();
|
||||
const { showPopup } = usePopup();
|
||||
const utils = api.useUtils();
|
||||
|
||||
const deleteWebhookMutation = api.webhook.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.webhook.list.invalidate({ workspacePublicId });
|
||||
showPopup({ message: t`Webhook deleted successfully`, type: "success" });
|
||||
closeModal();
|
||||
},
|
||||
onError: (error) => {
|
||||
showPopup({
|
||||
message: error.message || t`Failed to delete webhook`,
|
||||
type: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!webhookPublicId) return;
|
||||
deleteWebhookMutation.mutate({
|
||||
workspacePublicId,
|
||||
webhookPublicId: webhookPublicId as string,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="px-5 pt-5">
|
||||
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
|
||||
<h2 className="text-sm font-bold">{t`Delete webhook`}</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-neutral-500 dark:text-dark-900">
|
||||
{t`Are you sure you want to delete the webhook "${webhookName}"? This action cannot be undone.`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center justify-end gap-3 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
|
||||
<Button variant="secondary" onClick={() => closeModal()}>
|
||||
{t`Cancel`}
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleDelete}
|
||||
isLoading={deleteWebhookMutation.isPending}
|
||||
>
|
||||
{t`Delete`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
322
apps/web/src/views/settings/components/NewWebhookModal.tsx
Normal file
322
apps/web/src/views/settings/components/NewWebhookModal.tsx
Normal file
@@ -0,0 +1,322 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { HiXMark } from "react-icons/hi2";
|
||||
import { z } from "zod";
|
||||
|
||||
import { webhookEvents } from "@kan/db/schema";
|
||||
|
||||
import Button from "~/components/Button";
|
||||
import Input from "~/components/Input";
|
||||
import { useModal } from "~/providers/modal";
|
||||
import { usePopup } from "~/providers/popup";
|
||||
import { api } from "~/utils/api";
|
||||
|
||||
const newWebhookSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(1, { message: t`Webhook name is required` })
|
||||
.max(255, { message: t`Webhook name cannot exceed 255 characters` }),
|
||||
url: z
|
||||
.string()
|
||||
.min(1, { message: t`Webhook URL is required` })
|
||||
.url({ message: t`Please enter a valid URL` })
|
||||
.max(2048, { message: t`URL cannot exceed 2048 characters` }),
|
||||
secret: z
|
||||
.string()
|
||||
.max(512, { message: t`Secret cannot exceed 512 characters` })
|
||||
.optional(),
|
||||
events: z
|
||||
.array(z.enum(webhookEvents))
|
||||
.min(1, { message: t`Select at least one event` }),
|
||||
active: z.boolean(),
|
||||
});
|
||||
|
||||
type WebhookFormData = z.infer<typeof newWebhookSchema>;
|
||||
|
||||
interface NewWebhookModalProps {
|
||||
workspacePublicId: string;
|
||||
isEdit?: boolean;
|
||||
}
|
||||
|
||||
export function NewWebhookModal({
|
||||
workspacePublicId,
|
||||
isEdit = false,
|
||||
}: NewWebhookModalProps) {
|
||||
const { closeModal, entityId: webhookPublicId, getModalState, clearModalState } = useModal();
|
||||
const { showPopup } = usePopup();
|
||||
const [isTestingWebhook, setIsTestingWebhook] = useState(false);
|
||||
|
||||
const modalState = isEdit ? getModalState("EDIT_WEBHOOK") : null;
|
||||
|
||||
const utils = api.useUtils();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<WebhookFormData>({
|
||||
resolver: zodResolver(newWebhookSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
url: "",
|
||||
secret: "",
|
||||
events: [...webhookEvents],
|
||||
active: true,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && webhookPublicId && modalState) {
|
||||
reset({
|
||||
name: modalState.name ?? "",
|
||||
url: modalState.url ?? "",
|
||||
secret: "",
|
||||
events: modalState.events ?? ["card.created"],
|
||||
active: modalState.active ?? true,
|
||||
});
|
||||
} else if (!isEdit) {
|
||||
reset({
|
||||
name: "",
|
||||
url: "",
|
||||
secret: "",
|
||||
events: [...webhookEvents],
|
||||
active: true,
|
||||
});
|
||||
}
|
||||
}, [isEdit, webhookPublicId, modalState, reset]);
|
||||
|
||||
// Clear modal state when closing
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (isEdit) {
|
||||
clearModalState("EDIT_WEBHOOK");
|
||||
}
|
||||
};
|
||||
}, [isEdit, clearModalState]);
|
||||
|
||||
const createWebhookMutation = api.webhook.create.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.webhook.list.invalidate({ workspacePublicId });
|
||||
showPopup({ message: t`Webhook created successfully`, type: "success" });
|
||||
closeModal();
|
||||
},
|
||||
onError: (error) => {
|
||||
showPopup({
|
||||
message: error.message || t`Failed to create webhook`,
|
||||
type: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const updateWebhookMutation = api.webhook.update.useMutation({
|
||||
onSuccess: () => {
|
||||
void utils.webhook.list.invalidate({ workspacePublicId });
|
||||
showPopup({ message: t`Webhook updated successfully`, type: "success" });
|
||||
closeModal();
|
||||
},
|
||||
onError: (error) => {
|
||||
showPopup({
|
||||
message: error.message || t`Failed to update webhook`,
|
||||
type: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const testWebhookMutation = api.webhook.test.useMutation({
|
||||
onSuccess: (result) => {
|
||||
if (result.success) {
|
||||
showPopup({ message: t`Test webhook sent successfully!`, type: "success" });
|
||||
} else {
|
||||
showPopup({
|
||||
message: result.error || t`Webhook test failed`,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
setIsTestingWebhook(false);
|
||||
},
|
||||
onError: (error) => {
|
||||
showPopup({
|
||||
message: error.message || t`Failed to test webhook`,
|
||||
type: "error",
|
||||
});
|
||||
setIsTestingWebhook(false);
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (data: WebhookFormData) => {
|
||||
if (isEdit && webhookPublicId) {
|
||||
updateWebhookMutation.mutate({
|
||||
workspacePublicId,
|
||||
webhookPublicId: webhookPublicId as string,
|
||||
name: data.name,
|
||||
url: data.url,
|
||||
secret: data.secret || undefined,
|
||||
events: data.events,
|
||||
active: data.active,
|
||||
});
|
||||
} else {
|
||||
createWebhookMutation.mutate({
|
||||
workspacePublicId,
|
||||
name: data.name,
|
||||
url: data.url,
|
||||
secret: data.secret || undefined,
|
||||
events: data.events,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleTestWebhook = () => {
|
||||
if (!webhookPublicId) return;
|
||||
setIsTestingWebhook(true);
|
||||
testWebhookMutation.mutate({
|
||||
workspacePublicId,
|
||||
webhookPublicId: webhookPublicId as string,
|
||||
});
|
||||
};
|
||||
|
||||
const isPending = createWebhookMutation.isPending || updateWebhookMutation.isPending;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="px-5 pt-5">
|
||||
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
|
||||
<h2 className="text-sm font-bold">
|
||||
{isEdit ? t`Edit webhook` : t`New webhook`}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
<HiXMark size={18} className="text-light-900 dark:text-dark-900" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
|
||||
{t`Name`}
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder={t`My webhook`}
|
||||
{...register("name")}
|
||||
errorMessage={errors.name?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
|
||||
{t`URL`}
|
||||
</label>
|
||||
<Input
|
||||
id="url"
|
||||
placeholder="https://example.com/webhook"
|
||||
{...register("url")}
|
||||
errorMessage={errors.url?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-light-900 dark:text-dark-900">
|
||||
{t`Secret (optional)`}
|
||||
</label>
|
||||
<Input
|
||||
id="secret"
|
||||
type="password"
|
||||
placeholder={isEdit ? t`Enter new secret to update` : t`HMAC secret for signature verification`}
|
||||
{...register("secret")}
|
||||
errorMessage={errors.secret?.message}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-neutral-500 dark:text-dark-800">
|
||||
{t`Used to sign webhook payloads for verification. Leave blank to keep existing secret.`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-light-900 dark:text-dark-900">
|
||||
{t`Events`}
|
||||
</label>
|
||||
<Controller
|
||||
name="events"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<div className="space-y-2">
|
||||
{webhookEvents.map((event) => (
|
||||
<label
|
||||
key={event}
|
||||
className="flex items-center space-x-2 cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value.includes(event)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
field.onChange([...field.value, event]);
|
||||
} else {
|
||||
field.onChange(
|
||||
field.value.filter((v) => v !== event)
|
||||
);
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 rounded border-light-400 text-primary-600 focus:ring-primary-500 dark:border-dark-400"
|
||||
/>
|
||||
<span className="text-sm text-light-900 dark:text-dark-900">
|
||||
{event}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{errors.events && (
|
||||
<p className="mt-1 text-xs text-red-500">{errors.events.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEdit && (
|
||||
<div>
|
||||
<label className="flex items-center space-x-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register("active")}
|
||||
className="h-4 w-4 rounded border-light-400 text-primary-600 focus:ring-primary-500 dark:border-dark-400"
|
||||
/>
|
||||
<span className="text-sm text-light-900 dark:text-dark-900">
|
||||
{t`Active`}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center justify-between border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
|
||||
<div>
|
||||
{isEdit && webhookPublicId && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={handleTestWebhook}
|
||||
isLoading={isTestingWebhook}
|
||||
>
|
||||
{t`Send test`}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Button type="submit" isLoading={isPending}>
|
||||
{isEdit ? t`Save changes` : t`Create webhook`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
295
apps/web/src/views/settings/components/WebhookList.tsx
Normal file
295
apps/web/src/views/settings/components/WebhookList.tsx
Normal file
@@ -0,0 +1,295 @@
|
||||
import { t } from "@lingui/core/macro";
|
||||
import type { Locale as DateFnsLocale } from "date-fns";
|
||||
import { format } from "date-fns";
|
||||
import { HiEllipsisHorizontal } from "react-icons/hi2";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import Dropdown from "~/components/Dropdown";
|
||||
import { useLocalisation } from "~/hooks/useLocalisation";
|
||||
import { useModal } from "~/providers/modal";
|
||||
import { usePopup } from "~/providers/popup";
|
||||
import { api } from "~/utils/api";
|
||||
|
||||
interface TableRowProps {
|
||||
publicId?: string;
|
||||
name?: string;
|
||||
url?: string;
|
||||
events?: string[];
|
||||
active?: boolean;
|
||||
createdAt?: Date | null;
|
||||
dateLocale?: DateFnsLocale;
|
||||
isLastRow?: boolean;
|
||||
showSkeleton?: boolean;
|
||||
onEdit?: () => void;
|
||||
onTest?: () => void;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
function formatEvents(events: string[]) {
|
||||
return events
|
||||
.map((e) => e.replace("card.", ""))
|
||||
.join(", ");
|
||||
}
|
||||
|
||||
function formatDate(date?: Date | null, locale?: DateFnsLocale) {
|
||||
if (!date) return "Never";
|
||||
return format(date, "MMM d, yyyy", { locale });
|
||||
}
|
||||
|
||||
function TableRow({
|
||||
publicId,
|
||||
name,
|
||||
url,
|
||||
events,
|
||||
active,
|
||||
createdAt,
|
||||
dateLocale,
|
||||
isLastRow,
|
||||
showSkeleton,
|
||||
onEdit,
|
||||
onTest,
|
||||
onDelete,
|
||||
}: TableRowProps) {
|
||||
return (
|
||||
<tr className="rounded-b-lg">
|
||||
<td className={twMerge("w-[25%]", isLastRow ? "rounded-bl-lg" : "")}>
|
||||
<div className="flex items-center p-4">
|
||||
<div className="ml-2 min-w-0 flex-1">
|
||||
<div className="flex items-center">
|
||||
<p
|
||||
className={twMerge(
|
||||
"mr-2 text-sm font-medium text-light-900 dark:text-dark-900",
|
||||
showSkeleton &&
|
||||
"mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
|
||||
)}
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="w-[30%] px-3 py-4">
|
||||
<p
|
||||
className={twMerge(
|
||||
"truncate text-sm text-light-900 dark:text-dark-900",
|
||||
showSkeleton &&
|
||||
"h-3 w-[180px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
|
||||
)}
|
||||
title={url}
|
||||
>
|
||||
{url}
|
||||
</p>
|
||||
</td>
|
||||
<td className="w-[20%] px-3 py-4">
|
||||
<p
|
||||
className={twMerge(
|
||||
"text-sm text-light-900 dark:text-dark-900",
|
||||
showSkeleton &&
|
||||
"h-3 w-[100px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
|
||||
)}
|
||||
>
|
||||
{events && formatEvents(events)}
|
||||
</p>
|
||||
</td>
|
||||
<td className="w-[10%] px-3 py-4">
|
||||
<span
|
||||
className={twMerge(
|
||||
"inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset",
|
||||
active
|
||||
? "bg-emerald-500/10 text-emerald-400 ring-emerald-500/20"
|
||||
: "bg-gray-500/10 text-gray-400 ring-gray-500/20",
|
||||
showSkeleton &&
|
||||
"h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
|
||||
)}
|
||||
>
|
||||
{!showSkeleton && (active ? t`Active` : t`Inactive`)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="w-[10%] px-3 py-4">
|
||||
<p
|
||||
className={twMerge(
|
||||
"text-sm text-light-900 dark:text-dark-900",
|
||||
showSkeleton &&
|
||||
"h-3 w-[80px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
|
||||
)}
|
||||
>
|
||||
{formatDate(createdAt, dateLocale)}
|
||||
</p>
|
||||
</td>
|
||||
<td
|
||||
className={twMerge(
|
||||
"w-[5%] min-w-[50px]",
|
||||
isLastRow && "rounded-br-lg",
|
||||
)}
|
||||
>
|
||||
{!showSkeleton && (
|
||||
<div className="flex w-full items-center justify-center px-3">
|
||||
<div className="relative z-50">
|
||||
<Dropdown
|
||||
items={[
|
||||
{
|
||||
label: t`Edit`,
|
||||
action: () => onEdit?.(),
|
||||
},
|
||||
{
|
||||
label: t`Test`,
|
||||
action: () => onTest?.(),
|
||||
},
|
||||
{
|
||||
label: t`Delete`,
|
||||
action: () => onDelete?.(),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<HiEllipsisHorizontal
|
||||
size={25}
|
||||
className="text-light-900 dark:text-dark-900"
|
||||
/>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
interface WebhookListProps {
|
||||
workspacePublicId: string;
|
||||
}
|
||||
|
||||
export default function WebhookList({ workspacePublicId }: WebhookListProps) {
|
||||
const { openModal, setModalState } = useModal();
|
||||
const { showPopup } = usePopup();
|
||||
const { dateLocale } = useLocalisation();
|
||||
|
||||
const { data: webhooks, isLoading } = api.webhook.list.useQuery({
|
||||
workspacePublicId,
|
||||
});
|
||||
|
||||
const testWebhookMutation = api.webhook.test.useMutation({
|
||||
onSuccess: (result) => {
|
||||
if (result.success) {
|
||||
showPopup({ message: t`Test webhook sent successfully!`, type: "success" });
|
||||
} else {
|
||||
showPopup({
|
||||
message: result.error || t`Webhook test failed`,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
showPopup({
|
||||
message: error.message || t`Failed to test webhook`,
|
||||
type: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
if (!isLoading && (!webhooks || webhooks.length === 0)) {
|
||||
return (
|
||||
<div className="rounded-lg border border-light-300 bg-light-50 p-8 text-center dark:border-dark-300 dark:bg-dark-100">
|
||||
<p className="text-sm text-neutral-500 dark:text-dark-900">
|
||||
{t`No webhooks configured. Add a webhook to receive notifications.`}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-8 flow-root">
|
||||
<div className="overflow-x-auto overflow-y-visible">
|
||||
<div className="inline-block min-w-full py-2 pb-12 align-middle">
|
||||
<div className="relative h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
|
||||
<table className="min-w-[700px] divide-y divide-light-600 dark:divide-dark-600">
|
||||
<thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
className="w-[25%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
|
||||
>
|
||||
{t`Name`}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="w-[30%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
|
||||
>
|
||||
{t`URL`}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="w-[20%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
|
||||
>
|
||||
{t`Events`}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="w-[10%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
|
||||
>
|
||||
{t`Status`}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="w-[10%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
|
||||
>
|
||||
{t`Created`}
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="w-[5%] rounded-tr-lg px-3 py-3.5 text-center text-sm font-semibold text-light-900 dark:text-dark-900"
|
||||
>
|
||||
{/* Actions column */}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
|
||||
{!isLoading &&
|
||||
webhooks?.map((webhook, index) => (
|
||||
<TableRow
|
||||
key={webhook.publicId}
|
||||
publicId={webhook.publicId}
|
||||
name={webhook.name}
|
||||
url={webhook.url}
|
||||
events={webhook.events}
|
||||
active={webhook.active}
|
||||
createdAt={webhook.createdAt}
|
||||
dateLocale={dateLocale}
|
||||
isLastRow={index === webhooks.length - 1}
|
||||
onEdit={() => {
|
||||
setModalState("EDIT_WEBHOOK", {
|
||||
publicId: webhook.publicId,
|
||||
name: webhook.name,
|
||||
url: webhook.url,
|
||||
events: webhook.events,
|
||||
active: webhook.active,
|
||||
});
|
||||
openModal("EDIT_WEBHOOK", webhook.publicId, webhook.name);
|
||||
}}
|
||||
onTest={() => {
|
||||
testWebhookMutation.mutate({
|
||||
workspacePublicId,
|
||||
webhookPublicId: webhook.publicId,
|
||||
});
|
||||
}}
|
||||
onDelete={() => {
|
||||
openModal("DELETE_WEBHOOK", webhook.publicId, webhook.name);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{isLoading && (
|
||||
<>
|
||||
<TableRow showSkeleton />
|
||||
<TableRow showSkeleton />
|
||||
<TableRow showSkeleton isLastRow />
|
||||
</>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user