webhook from ui design change (#6803)

* webhook from ui change

* fix: webhook test border & test webhook font style
pull/6797/head
Joe Shajan 2023-02-01 20:21:42 +05:30 committed by GitHub
parent df25ae6a3d
commit 624f52c305
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 19 deletions

View File

@ -233,6 +233,7 @@ const WebhookForm = (props: {
{ value: "default", label: t("default") },
{ value: "custom", label: t("custom") },
]}
isFullWidth={true}
/>
</div>
{useCustomTemplate && (
@ -248,9 +249,7 @@ const WebhookForm = (props: {
</>
)}
/>
<div className="mt-8">
<p className="font-medium text-black">{t("webhook_test")}</p>
<p className="font-sm mb-4 text-gray-600">{t("test_webhook")}</p>
<div className="mt-8 rounded-md bg-gray-100 p-6">
<WebhookTestDisclosure />
</div>
@ -263,7 +262,7 @@ const WebhookForm = (props: {
{t("cancel")}
</Button>
<Button type="submit" loading={formMethods.formState.isSubmitting}>
{props?.webhook?.id ? t("save") : t("create")}
{props?.webhook?.id ? t("save") : t("create_webhook")}
</Button>
</div>
</Form>

View File

@ -16,15 +16,11 @@ export default function WebhookTestDisclosure() {
});
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 className="flex justify-between">
<div>
<p className="text-sm font-semibold leading-5">{t("webhook_test")}</p>
<p className="mb-4 text-sm text-gray-600">{t("test_webhook")}</p>
</div>
<Button
type="button"
@ -35,12 +31,24 @@ export default function WebhookTestDisclosure() {
{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 className="space-y-0 rounded-md border border-neutral-200 sm:mx-0">
<div className="flex justify-between border-b p-4">
<div className="flex items-center space-x-1">
<h3 className="self-center text-sm font-semibold leading-4">{t("webhook_response")}</h3>
{mutation.data && (
<Badge variant={mutation.data.ok ? "green" : "red"}>
{mutation.data.ok ? t("passed") : t("failed")}
</Badge>
)}
</div>
</div>
<div className="rounded-b-md bg-black p-4 font-mono text-[13px] leading-4 text-white">
{!mutation.data && <p>{t("no_data_yet")}</p>}
{mutation.status === "success" && (
<div className="overflow-x-auto text-gray-900">{JSON.stringify(mutation.data, null, 4)}</div>
)}
</div>
</div>
</div>
</>
);
}