Files
calendar/packages/features/webhooks/components/WebhookTestDisclosure.tsx
T
b5b41da183 Cleaning up storybook files (#5290)
* storybook v2 init

* Merge config into storybook vite build

* Remove path

* Storybook config tweaks

* Added styles and settings for storybook v2, and started working on button documentation and examples.

* Badges + flex wrap on mobile

* Breadcrumbs+button+avatar

* Checkbox

* Input + moving files around

* WIP table

* WIP table grid

* Replaced imports for new components.

* Added first steps for varianttable.

* Small alignment fix.

* Custom Args Table - With scrollbar

* Adding table to components that need it + darkmode

* Add intro

* Fix types

* Remove V1 storybook and replace with V2

* Fix badge type error

* Fixed storybook dependencies

* Added cover image to storybook

* Remove vita from ts config, we dont use vite.

* Fixed button import.

* Explained postcss pseudo plugin.

* Fixed badge import.

* Add Avatar Stories

* ButtonGroup Stories

* Fixed imports

* Add checkbox stories

* Add  exports for differnt types of inputs

* Fix form and text area input

* Fix mass import errors

Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
2022-11-04 15:40:46 +00:00

49 lines
1.8 KiB
TypeScript

import { useWatch } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui/Icon";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import showToast from "@calcom/ui/v2/core/notifications";
export default function WebhookTestDisclosure() {
const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
const payloadTemplate = useWatch({ name: "payloadTemplate" }) || null;
const { t } = useLocale();
const mutation = trpc.useMutation("viewer.webhook.testTrigger", {
onError(err) {
showToast(err.message, "error");
},
});
return (
<div className="space-y-0 rounded-md border-0 border-neutral-200 bg-white sm:mx-0 md:border">
<div className="flex justify-between border-b p-4">
<div className="flex items-center space-x-1">
<h3 className="font-sm self-center font-medium text-black">{t("webhook_response")}</h3>
{mutation.data && (
<Badge variant={mutation.data.ok ? "green" : "red"}>
{mutation.data.ok ? t("passed") : t("failed")}
</Badge>
)}
</div>
<Button
type="button"
color="secondary"
disabled={mutation.isLoading}
StartIcon={Icon.FiActivity}
onClick={() => mutation.mutate({ url: subscriberUrl, type: "PING", payloadTemplate })}>
{t("ping_test")}
</Button>
</div>
<div className="p-4">
{!mutation.data && <em>{t("no_data_yet")}</em>}
{mutation.status === "success" && (
<div className="overflow-x-auto text-gray-900">{JSON.stringify(mutation.data, null, 4)}</div>
)}
</div>
</div>
);
}