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

web/components/web-hooks/form/form.tsx

@@ -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)}>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
-        <div>
+        <div className="space-y-8">
-          <Controller
+          <div>
-            control={control}
+            <Controller
-            name="url"
+              control={control}
-            rules={{
+              name="url"
-              required: "URL is required",
+              rules={{
-            }}
+                required: "URL is required",
-            render={({ field: { onChange, value } }) => (
+              }}
-              <WebhookInput value={value} onChange={onChange} hasError={Boolean(errors.url)} />
+              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>}
+            />
+            {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="mt-4">
-        <div className="space-y-3">
+          {webhookEventType === "individual" && <WebhookIndividualEventOptions control={control} />}
-          <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
+        </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>
   );

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

@@ -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">
-    <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}
+        name={option.key}
-          name={option.key}
+        render={({ field: { onChange, value } }) => (
-          render={({ field: { onChange, value } }) => (
+          <div>
-            <div>
+            <div className="flex items-center gap-2">
-              <div className="flex items-center gap-2">
+              <input
-                <input
+                id={option.key}
-                  id={option.key}
+                onChange={() => onChange(!value)}
-                  onChange={() => onChange(!value)}
+                type="checkbox"
-                  type="checkbox"
+                name="selectIndividualEvents"
-                  name="selectIndividualEvents"
+                checked={value === true}
-                  checked={value === true}
+              />
-                />
+              <label className="text-sm" htmlFor={option.key}>
-                <label className="text-sm" htmlFor={option.key}>
+                {option.label}
-                  {option.label}
+              </label>
-                </label>
-              </div>
-              <p className="text-xs text-custom-text-300 ml-6 mt-0.5">{option.description}</p>
             </div>
-          )}
+            <p className="text-xs text-custom-text-300 ml-6 mt-0.5">{option.description}</p>
-        />
+          </div>
-      ))}
+        )}
-    </div>
+      />
-  </>
+    ))}
+  </div>
 );