plane/web/components/web-hooks/form/individual-event-options.tsx
sriram veeraghanta 5b0066140f chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:50:45 +05:30

68 lines
1.7 KiB
TypeScript

import { Control, Controller } from "react-hook-form";
import { IWebhook } from "types/webhook";
export const INDIVIDUAL_WEBHOOK_OPTIONS: {
key: keyof IWebhook;
label: string;
description: string;
}[] = [
{
key: "project",
label: "Projects",
description: "Project created, updated, or deleted",
},
{
key: "cycle",
label: "Cycles",
description: "Cycle created, updated, or deleted",
},
{
key: "issue",
label: "Issues",
description: "Issue created, updated, deleted, added to a cycle or module",
},
{
key: "module",
label: "Modules",
description: "Module created, updated, or deleted",
},
{
key: "issue_comment",
label: "Issue comments",
description: "Comment posted, updated, or deleted",
},
];
type Props = {
control: Control<IWebhook, any>;
};
export const WebhookIndividualEventOptions = ({ control }: Props) => (
<div className="grid grid-cols-1 gap-x-4 gap-y-8 px-6 lg:grid-cols-2">
{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>
<p className="ml-6 mt-0.5 text-xs text-custom-text-300">{option.description}</p>
</div>
)}
/>
))}
</div>
);