mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: update the content of webhooks form (#2932)
This commit is contained in:
parent
d71ba47262
commit
7f6d59559d
@ -138,29 +138,35 @@ export const WebhookForm: FC<Props> = observer((props) => {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="text-xl font-medium">{data ? "Webhook details" : "Create webhook"}</div>
|
||||
<form className="space-y-8" onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="url"
|
||||
rules={{
|
||||
required: "URL is required",
|
||||
}}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<WebhookInput value={value} onChange={onChange} hasError={Boolean(errors.url)} />
|
||||
)}
|
||||
/>
|
||||
{errors.url && <div className="text-xs text-red-500">{errors.url.message}</div>}
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="url"
|
||||
rules={{
|
||||
required: "URL is required",
|
||||
}}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<WebhookInput value={value} onChange={onChange} hasError={Boolean(errors.url)} />
|
||||
)}
|
||||
/>
|
||||
{errors.url && <div className="text-xs text-red-500">{errors.url.message}</div>}
|
||||
</div>
|
||||
{data && <WebhookToggle control={control} />}
|
||||
<div className="space-y-3">
|
||||
<WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
|
||||
</div>
|
||||
</div>
|
||||
{data && <WebhookToggle control={control} />}
|
||||
<div className="space-y-3">
|
||||
<WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
|
||||
<div className="mt-4">
|
||||
{webhookEventType === "individual" && <WebhookIndividualEventOptions control={control} />}
|
||||
</div>
|
||||
<div className="space-y-8 mt-8">
|
||||
{data && <WebhookSecretKey data={data} />}
|
||||
<Button type="submit" loading={isSubmitting}>
|
||||
{data ? (isSubmitting ? "Updating..." : "Update") : isSubmitting ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
{webhookEventType === "individual" && <WebhookIndividualEventOptions control={control} />}
|
||||
{data && <WebhookSecretKey data={data} />}
|
||||
<Button type="submit" loading={isSubmitting}>
|
||||
{data ? (isSubmitting ? "Updating..." : "Update") : isSubmitting ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
import { IWebhook } from "types/webhook";
|
||||
|
||||
export const individualWebhookOptions: {
|
||||
export const INDIVIDUAL_WEBHOOK_OPTIONS: {
|
||||
key: keyof IWebhook;
|
||||
label: string;
|
||||
description: string;
|
||||
@ -9,27 +9,27 @@ export const individualWebhookOptions: {
|
||||
{
|
||||
key: "project",
|
||||
label: "Projects",
|
||||
description: "Project created, updated or deleted.",
|
||||
description: "Project created, updated, or deleted",
|
||||
},
|
||||
{
|
||||
key: "cycle",
|
||||
label: "Cycles",
|
||||
description: "Cycle created, updated or deleted.",
|
||||
description: "Cycle created, updated, or deleted",
|
||||
},
|
||||
{
|
||||
key: "issue",
|
||||
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",
|
||||
label: "Modules",
|
||||
description: "Module created, updated or deleted.",
|
||||
description: "Module created, updated, or deleted",
|
||||
},
|
||||
{
|
||||
key: "issue_comment",
|
||||
label: "Issue comments",
|
||||
description: "Comment posted, updated or deleted.",
|
||||
description: "Comment posted, updated, or deleted",
|
||||
},
|
||||
];
|
||||
|
||||
@ -38,32 +38,30 @@ type Props = {
|
||||
};
|
||||
|
||||
export const WebhookIndividualEventOptions = ({ control }: Props) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-8 px-6 mt-5">
|
||||
{individualWebhookOptions.map((option) => (
|
||||
<Controller
|
||||
key={option.key}
|
||||
control={control}
|
||||
name={option.key}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
id={option.key}
|
||||
onChange={() => onChange(!value)}
|
||||
type="checkbox"
|
||||
name="selectIndividualEvents"
|
||||
checked={value === true}
|
||||
/>
|
||||
<label className="text-sm" htmlFor={option.key}>
|
||||
{option.label}
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-xs text-custom-text-300 ml-6 mt-0.5">{option.description}</p>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-8 px-6">
|
||||
{INDIVIDUAL_WEBHOOK_OPTIONS.map((option) => (
|
||||
<Controller
|
||||
key={option.key}
|
||||
control={control}
|
||||
name={option.key}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
id={option.key}
|
||||
onChange={() => onChange(!value)}
|
||||
type="checkbox"
|
||||
name="selectIndividualEvents"
|
||||
checked={value === true}
|
||||
/>
|
||||
<label className="text-sm" htmlFor={option.key}>
|
||||
{option.label}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
<p className="text-xs text-custom-text-300 ml-6 mt-0.5">{option.description}</p>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user