mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-12 11:28:58 -05:00
feat: webhooks now have a name across the UI
This commit is contained in:
ShubhamPalriwala
+15
-2
@@ -29,7 +29,7 @@ const triggers = [
|
||||
|
||||
export default function AddWebhookModal({ environmentId, surveys, open, setOpen }: AddWebhookModalProps) {
|
||||
const router = useRouter();
|
||||
const { handleSubmit, reset } = useForm();
|
||||
const { handleSubmit, reset, register } = useForm();
|
||||
const [testEndpointInput, setTestEndpointInput] = useState("");
|
||||
const [hittingEndpoint, setHittingEndpoint] = useState<boolean>(false);
|
||||
const [endpointAccessible, setEndpointAccessible] = useState<boolean>();
|
||||
@@ -38,7 +38,7 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
|
||||
const [selectedAllSurveys, setSelectedAllSurveys] = useState(false);
|
||||
const [creatingWebhook, setCreatingWebhook] = useState(false);
|
||||
|
||||
const submitWebhook = async (): Promise<void> => {
|
||||
const submitWebhook = async (data: TWebhookInput): Promise<void> => {
|
||||
setCreatingWebhook(true);
|
||||
if (testEndpointInput === undefined || testEndpointInput === "") {
|
||||
toast.error("Please enter a URL");
|
||||
@@ -58,6 +58,7 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
|
||||
}
|
||||
|
||||
const updatedData: TWebhookInput = {
|
||||
name: data.name,
|
||||
url: testEndpointInput,
|
||||
triggers: selectedTriggers,
|
||||
surveyIds: selectedSurveys,
|
||||
@@ -149,6 +150,18 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
|
||||
<form onSubmit={handleSubmit(submitWebhook)}>
|
||||
<div className="flex justify-between rounded-lg p-6">
|
||||
<div className="w-full space-y-4">
|
||||
<div className="col-span-1">
|
||||
<Label htmlFor="Name">Name</Label>
|
||||
<div className="mt-1 flex">
|
||||
<Input
|
||||
type="text"
|
||||
id="name"
|
||||
{...register("name")}
|
||||
placeholder="Optional: Label your webhook for easy identification"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1">
|
||||
<Label htmlFor="URL">URL</Label>
|
||||
<div className="mt-1 flex">
|
||||
|
||||
+1
-1
@@ -39,7 +39,7 @@ export default function WebhookModal({ environmentId, open, setOpen, webhook, su
|
||||
setOpen={setOpen}
|
||||
tabs={tabs}
|
||||
icon={<Webhook />}
|
||||
label={webhook.url}
|
||||
label={webhook.name ? webhook.name : webhook.url}
|
||||
description={""}
|
||||
/>
|
||||
</>
|
||||
|
||||
+5
@@ -36,6 +36,11 @@ export default function WebhookOverviewTab({ webhook, surveys }: ActivityTabProp
|
||||
return (
|
||||
<div className="grid grid-cols-3 pb-2">
|
||||
<div className="col-span-2 space-y-4 pr-6">
|
||||
<div>
|
||||
<Label className="text-slate-500">Name</Label>
|
||||
<p className="text-sm text-slate-900">{webhook.name ? webhook.name : "-"}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-slate-500">URL</Label>
|
||||
<p className="text-sm text-slate-900">{webhook.url}</p>
|
||||
|
||||
+8
-1
@@ -55,7 +55,14 @@ export default function WebhookRowData({ webhook, surveys }: { webhook: TWebhook
|
||||
<div className="col-span-4 flex items-center pl-6 text-sm">
|
||||
<div className="flex items-center">
|
||||
<div className="text-left">
|
||||
<div className="font-medium text-slate-900">{webhook.url}</div>
|
||||
{webhook.name ? (
|
||||
<div className="text-left">
|
||||
<div className="font-medium text-slate-900">{webhook.name ? webhook.name : webhook.url}</div>
|
||||
<div className="text-xs text-slate-400">{webhook.url}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="font-medium text-slate-900">{webhook.url}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+15
@@ -66,6 +66,7 @@ export default function WebhookSettingsTab({
|
||||
|
||||
const { register, handleSubmit } = useForm({
|
||||
defaultValues: {
|
||||
name: webhook.name,
|
||||
url: webhook.url,
|
||||
triggers: webhook.triggers,
|
||||
surveyIds: webhook.surveyIds,
|
||||
@@ -88,6 +89,7 @@ export default function WebhookSettingsTab({
|
||||
}
|
||||
|
||||
const updatedData: TWebhookInput = {
|
||||
name: data.name,
|
||||
url: data.url as string,
|
||||
triggers: selectedTriggers,
|
||||
surveyIds: selectedSurveys,
|
||||
@@ -122,6 +124,19 @@ export default function WebhookSettingsTab({
|
||||
return (
|
||||
<div>
|
||||
<form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-span-1">
|
||||
<Label htmlFor="Name">Name</Label>
|
||||
<div className="mt-1 flex">
|
||||
<Input
|
||||
type="text"
|
||||
id="name"
|
||||
{...register("name")}
|
||||
defaultValue={webhook.name ?? ""}
|
||||
placeholder="Optional: Label your webhook for easy identification"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1">
|
||||
<Label htmlFor="URL">URL</Label>
|
||||
<div className="mt-1 flex">
|
||||
|
||||
+1
@@ -26,6 +26,7 @@ export default function WebhookTable({
|
||||
const [activeWebhook, setActiveWebhook] = useState<TWebhook>({
|
||||
environmentId,
|
||||
id: "",
|
||||
name: "",
|
||||
url: "",
|
||||
triggers: [],
|
||||
surveyIds: [],
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ export default function WebhookTableHeading() {
|
||||
<>
|
||||
<div className="grid h-12 grid-cols-12 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
|
||||
<span className="sr-only">Edit</span>
|
||||
<div className="col-span-4 pl-6 ">URL</div>
|
||||
<div className="col-span-4 pl-6 ">Webhook</div>
|
||||
<div className="col-span-4 text-center">Surveys</div>
|
||||
<div className="col-span-2 text-center ">Triggers</div>
|
||||
<div className="col-span-2 text-center">Updated</div>
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@ export default function Loading() {
|
||||
<div className="rounded-lg border border-slate-200">
|
||||
<div className="grid h-12 grid-cols-12 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
|
||||
<span className="sr-only">Edit</span>
|
||||
<div className="col-span-4 pl-6 ">URL</div>
|
||||
<div className="col-span-4 pl-6 ">Webhook</div>
|
||||
<div className="col-span-4 text-center">Surveys</div>
|
||||
<div className="col-span-2 text-center ">Triggers</div>
|
||||
<div className="col-span-2 text-center">Updated</div>
|
||||
|
||||
@@ -37,6 +37,7 @@ export const createWebhook = async (
|
||||
}
|
||||
return await prisma.webhook.create({
|
||||
data: {
|
||||
name: webhookInput.name,
|
||||
url: webhookInput.url,
|
||||
triggers: webhookInput.triggers,
|
||||
surveyIds: webhookInput.surveyIds || [],
|
||||
@@ -66,6 +67,7 @@ export const updateWebhook = async (
|
||||
id: webhookId,
|
||||
},
|
||||
data: {
|
||||
name: webhookInput.name,
|
||||
url: webhookInput.url,
|
||||
triggers: webhookInput.triggers,
|
||||
surveyIds: webhookInput.surveyIds || [],
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ZPipelineTrigger } from "./pipelines";
|
||||
|
||||
export const ZWebhook = z.object({
|
||||
id: z.string().cuid2(),
|
||||
name: z.string().nullable(),
|
||||
createdAt: z.date(),
|
||||
updatedAt: z.date(),
|
||||
url: z.string().url(),
|
||||
@@ -15,6 +16,7 @@ export type TWebhook = z.infer<typeof ZWebhook>;
|
||||
|
||||
export const ZWebhookInput = z.object({
|
||||
url: z.string().url(),
|
||||
name: z.string().nullable(),
|
||||
triggers: z.array(ZPipelineTrigger),
|
||||
surveyIds: z.array(z.string().cuid2()).optional(),
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user