public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: ui of webhook segment (#5452) 

* fix: ui of webhook segment

* feat: use toggle group component

* fix: default bug

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
pull/5462/head^2
Udit Takkar 2022-11-10 17:08:40 +05:30 committed by GitHub
parent 4176086ce0
commit 7bda15aaa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/public/static/locales/en/common.json
View File

@ -126,7 +126,6 @@
"webhook_updated_successfully": "Webhook updated successfully!", "webhook_updated_successfully": "Webhook updated successfully!",
"webhook_removed_successfully": "Webhook removed successfully!", "webhook_removed_successfully": "Webhook removed successfully!",
"payload_template": "Payload Template", "payload_template": "Payload Template",
"payload":"Payload",
"dismiss": "Dismiss", "dismiss": "Dismiss",
"no_data_yet": "No data yet", "no_data_yet": "No data yet",
"ping_test": "Ping test", "ping_test": "Ping test",

40
packages/features/webhooks/components/WebhookForm.tsx
View File

@ -2,13 +2,13 @@ import { WebhookTriggerEvents } from "@prisma/client";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { classNames } from "@calcom/lib";
import { WEBAPP_URL } from "@calcom/lib/constants"; import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useLocale } from "@calcom/lib/hooks/useLocale";
import { inferQueryOutput } from "@calcom/trpc/react"; import { inferQueryOutput } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button"; import { Button } from "@calcom/ui/components/button";
import { Form, Label, TextArea, TextField } from "@calcom/ui/components/form"; import { Form, Label, TextArea, TextField } from "@calcom/ui/components/form";
import Switch from "@calcom/ui/v2/core/Switch"; import Switch from "@calcom/ui/v2/core/Switch";
import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
import Select from "@calcom/ui/v2/core/form/select"; import Select from "@calcom/ui/v2/core/form/select";
import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate"; import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
@ -217,28 +217,24 @@ const WebhookForm = (props: {
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<> <>
<Label className="font-sm mt-8 text-gray-900"> <Label className="font-sm mt-8 text-gray-900">
<>{t("payload")}</> <>{t("payload_template")}</>
</Label> </Label>
<div className="flex rounded-md border"> <div className="mb-2">
<div <ToggleGroup
className={classNames( onValueChange={(val) => {
"px-1/2 w-1/2 rounded-md py-2.5 text-center font-medium text-gray-900", if (val === "default") {
!useCustomTemplate && "bg-gray-200" setUseCustomTemplate(false);
)} formMethods.setValue("payloadTemplate", undefined);
onClick={() => { } else {
setUseCustomTemplate(false); setUseCustomTemplate(true);
formMethods.setValue("payloadTemplate", undefined); }
}}> }}
<p>{t("default")}</p> defaultValue={value ? "custom" : "default"}
</div> options={[
<div { value: "default", label: t("default") },
className={classNames( { value: "custom", label: t("custom") },
"px-1/2 w-1/2 rounded-md py-2.5 text-center font-medium text-gray-900", ]}
useCustomTemplate && "bg-gray-200" />
)}
onClick={() => setUseCustomTemplate(true)}>
<p>{t("custom")}</p>
</div>
</div> </div>
{useCustomTemplate && ( {useCustomTemplate && (
<TextArea <TextArea