chore: update the content of webhooks form (#2932)

This commit is contained in:
Aaryan Khandelwal 2023-11-29 14:02:13 +05:30 committed by Aaryan Khandelwal
parent 66bc1cb167
commit 1549a3f5dc
2 changed files with 58 additions and 54 deletions

View File

@ -138,7 +138,8 @@ export const WebhookForm: FC<Props> = observer((props) => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="text-xl font-medium">{data ? "Webhook details" : "Create webhook"}</div> <div className="text-xl font-medium">{data ? "Webhook details" : "Create webhook"}</div>
<form className="space-y-8" onSubmit={handleSubmit(handleFormSubmit)}> <form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-8">
<div> <div>
<Controller <Controller
control={control} control={control}
@ -156,11 +157,16 @@ export const WebhookForm: FC<Props> = observer((props) => {
<div className="space-y-3"> <div className="space-y-3">
<WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} /> <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
</div> </div>
</div>
<div className="mt-4">
{webhookEventType === "individual" && <WebhookIndividualEventOptions control={control} />} {webhookEventType === "individual" && <WebhookIndividualEventOptions control={control} />}
</div>
<div className="space-y-8 mt-8">
{data && <WebhookSecretKey data={data} />} {data && <WebhookSecretKey data={data} />}
<Button type="submit" loading={isSubmitting}> <Button type="submit" loading={isSubmitting}>
{data ? (isSubmitting ? "Updating..." : "Update") : isSubmitting ? "Creating..." : "Create"} {data ? (isSubmitting ? "Updating..." : "Update") : isSubmitting ? "Creating..." : "Create"}
</Button> </Button>
</div>
</form> </form>
</div> </div>
); );

View File

@ -1,7 +1,7 @@
import { Control, Controller } from "react-hook-form"; import { Control, Controller } from "react-hook-form";
import { IWebhook } from "types/webhook"; import { IWebhook } from "types/webhook";
export const individualWebhookOptions: { export const INDIVIDUAL_WEBHOOK_OPTIONS: {
key: keyof IWebhook; key: keyof IWebhook;
label: string; label: string;
description: string; description: string;
@ -9,27 +9,27 @@ export const individualWebhookOptions: {
{ {
key: "project", key: "project",
label: "Projects", label: "Projects",
description: "Project created, updated or deleted.", description: "Project created, updated, or deleted",
}, },
{ {
key: "cycle", key: "cycle",
label: "Cycles", label: "Cycles",
description: "Cycle created, updated or deleted.", description: "Cycle created, updated, or deleted",
}, },
{ {
key: "issue", key: "issue",
label: "Issues", label: "Issues",
description: "Issue created, updated, deleted, added to a cycle or module.", description: "Issue created, updated, deleted, added to a cycle or module",
}, },
{ {
key: "module", key: "module",
label: "Modules", label: "Modules",
description: "Module created, updated or deleted.", description: "Module created, updated, or deleted",
}, },
{ {
key: "issue_comment", key: "issue_comment",
label: "Issue comments", label: "Issue comments",
description: "Comment posted, updated or deleted.", description: "Comment posted, updated, or deleted",
}, },
]; ];
@ -38,9 +38,8 @@ type Props = {
}; };
export const WebhookIndividualEventOptions = ({ control }: Props) => ( export const WebhookIndividualEventOptions = ({ control }: Props) => (
<> <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-8 px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-8 px-6 mt-5"> {INDIVIDUAL_WEBHOOK_OPTIONS.map((option) => (
{individualWebhookOptions.map((option) => (
<Controller <Controller
key={option.key} key={option.key}
control={control} control={control}
@ -65,5 +64,4 @@ export const WebhookIndividualEventOptions = ({ control }: Props) => (
/> />
))} ))}
</div> </div>
</>
); );