plane/web/components/web-hooks/form/individual-event-options.tsx

import { Control, Controller } from "react-hook-form";
import { IWebhook } from "types/webhook";

export const individualWebhookOptions: {
  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 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>
          )}
        />
      ))}
    </div>
  </>
);