webhook from ui design change (#6803)
* webhook from ui change * fix: webhook test border & test webhook font stylepull/6797/head
parent
df25ae6a3d
commit
624f52c305
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue