refactor: webhooks (#2896)

* refactor: webhooks workflow

* chore: update delete modal content

web/components/web-hooks/delete-webhook-modal.tsx

@@ -1,30 +1,31 @@
 import React, { FC, useState } from "react";
 import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
-// icons
 import { AlertTriangle } from "lucide-react";
-// ui
+// mobx store
-import { Button } from "@plane/ui";
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
-import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Button } from "@plane/ui";
 
 interface IDeleteWebhook {
   isOpen: boolean;
-  webhook_url: string;
   onClose: () => void;
 }
 
 export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
   const { isOpen, onClose } = props;
-
+  // states
+  const [isDeleting, setIsDeleting] = useState(false);
+  // router
   const router = useRouter();
-
+  // toast
-  const { webhook: webhookStore } = useMobxStore();
-
   const { setToastAlert } = useToast();
-
+  // mobx store
-  const [deleting, setDelete] = useState(false);
+  const {
+    webhook: { removeWebhook },
+  } = useMobxStore();
 
   const { workspaceSlug, webhookId } = router.query;
 
@@ -33,29 +34,27 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
   };
 
   const handleDelete = async () => {
-    setDelete(true);
     if (!workspaceSlug || !webhookId) return;
-    webhookStore
+
-      .remove(workspaceSlug.toString(), webhookId.toString())
+    setIsDeleting(true);
+
+    removeWebhook(workspaceSlug.toString(), webhookId.toString())
       .then(() => {
         setToastAlert({
-          title: "Success",
           type: "success",
-          message: "Successfully deleted",
+          title: "Success!",
+          message: "Webhook deleted successfully.",
         });
         router.replace(`/${workspaceSlug}/settings/webhooks/`);
       })
-      .catch((error) => {
+      .catch((error) =>
-        console.log(error);
         setToastAlert({
-          title: "Oops!",
           type: "error",
-          message: error?.error,
+          title: "Error!",
-        });
+          message: error?.error ?? "Something went wrong. Please try again.",
         })
-      .finally(() => {
+      )
-        setDelete(false);
+      .finally(() => setIsDeleting(false));
-      });
   };
 
   return (
@@ -90,23 +89,21 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
                     <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                   </span>
                   <span className="flex items-center justify-start">
-                    <h3 className="text-xl font-medium 2xl:text-2xl">Delete Webhook</h3>
+                    <h3 className="text-xl font-medium 2xl:text-2xl">Delete webhook</h3>
                   </span>
                 </div>
 
-                <span>
+                <p className="text-sm text-custom-text-200 mt-4">
-                  <p className="text-sm leading-7 text-custom-text-200">
+                  Are you sure you want to delete this webhook? Future events will not be delivered to this webhook.
-                    Are you sure you want to delete workspace <span className="break-words font-semibold" />? All of the
+                  This action cannot be undone.
-                    data related to the workspace will be permanently removed. This action cannot be undone.
                 </p>
-                </span>
 
                 <div className="flex justify-end gap-2">
                   <Button variant="neutral-primary" onClick={onClose}>
                     Cancel
                   </Button>
-                  <Button variant="danger" type="submit" onClick={handleDelete}>
+                  <Button variant="danger" onClick={handleDelete} loading={isDeleting}>
-                    {deleting ? "Deleting..." : "Delete Webhook"}
+                    {isDeleting ? "Deleting..." : "Delete webhook"}
                   </Button>
                 </div>
               </Dialog.Panel>

web/components/web-hooks/empty-state.tsx

@@ -0,0 +1,28 @@
+// next
+import { useRouter } from "next/router";
+import Image from "next/image";
+// ui
+import { Button } from "@plane/ui";
+// assets
+import EmptyWebhook from "public/empty-state/web-hook.svg";
+
+export const WebhooksEmptyState = () => {
+  const router = useRouter();
+
+  return (
+    <div
+      className={`flex items-center justify-center mx-auto rounded-sm border border-custom-border-200 bg-custom-background-90 py-10 px-16 w-full`}
+    >
+      <div className="text-center flex flex-col items-center w-full">
+        <Image src={EmptyWebhook} className="w-52 sm:w-60" alt="empty" />
+        <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">No webhooks</h6>
+        <p className="text-custom-text-300 mb-7 sm:mb-8">
+          Create webhooks to receive real-time updates and automate actions
+        </p>
+        <Button className="flex items-center gap-1.5" onClick={() => router.push(`${router.asPath}/create/`)}>
+          Add webhook
+        </Button>
+      </div>
+    </div>
+  );
+};

web/components/web-hooks/empty-webhooks.tsx

@@ -1,33 +0,0 @@
-// next
-import { useRouter } from "next/router";
-import Image from "next/image";
-// ui
-import { Button } from "@plane/ui";
-// assets
-import EmptyWebhook from "public/empty-state/web-hook.svg";
-
-export const EmptyWebhooks = () => {
-  const router = useRouter();
-
-  return (
-    <div className={`flex items-center justify-center mx-auto rounded-sm border border-custom-border-200 bg-custom-background-90 py-10 px-16 w-full`}>
-      <div className="text-center flex flex-col items-center w-full">
-        <Image src={EmptyWebhook} className="w-52 sm:w-60" alt="empty" />
-        <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">No Webhooks</h6>
-        {
-          <p className="text-custom-text-300 mb-7 sm:mb-8">
-            Create webhooks to receive real-time updates and automate actions
-          </p>
-        }
-        <Button
-          className="flex items-center gap-1.5"
-          onClick={() => {
-            router.push(`${router.asPath}/create/`);
-          }}
-        >
-          Add Webhook
-        </Button>
-      </div>
-    </div>
-  );
-};

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

@@ -0,0 +1,48 @@
+import { Disclosure, Transition } from "@headlessui/react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Button } from "@plane/ui";
+
+type Props = {
+  openDeleteModal: () => void;
+};
+
+export const WebhookDeleteSection: React.FC<Props> = (props) => {
+  const { openDeleteModal } = props;
+
+  return (
+    <Disclosure as="div" className="border-t border-custom-border-200">
+      {({ open }) => (
+        <div className="w-full">
+          <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
+            <span className="text-lg tracking-tight">Danger zone</span>
+            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+          </Disclosure.Button>
+
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+            <Disclosure.Panel>
+              <div className="flex flex-col gap-8">
+                <span className="text-sm tracking-tight">
+                  Once a webhook is deleted, it cannot be restored. Future events will no longer be delivered to this
+                  webhook.
+                </span>
+                <div>
+                  <Button variant="danger" onClick={openDeleteModal}>
+                    Delete webhook
+                  </Button>
+                </div>
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
+  );
+};

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

@@ -1,50 +0,0 @@
-import { Disclosure, Transition } from "@headlessui/react";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { Button } from "@plane/ui";
-
-interface IWebHookEditForm {
-  setOpenDeleteModal: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const WebHookEditForm = ({ setOpenDeleteModal }: IWebHookEditForm) => (
-  <Disclosure as="div" className="border-t border-custom-border-200">
-    {({ open }) => (
-      <div className="w-full">
-        <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
-          <span className="text-lg tracking-tight">Danger Zone</span>
-          {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
-        </Disclosure.Button>
-
-        <Transition
-          show={open}
-          enter="transition duration-100 ease-out"
-          enterFrom="transform opacity-0"
-          enterTo="transform opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform opacity-100"
-          leaveTo="transform opacity-0"
-        >
-          <Disclosure.Panel>
-            <div className="flex flex-col gap-8">
-              <span className="text-sm tracking-tight">
-                The danger zone of the workspace delete page is a critical area that requires careful consideration and
-                attention. When deleting a workspace, all of the data and resources within that workspace will be
-                permanently removed and cannot be recovered.
-              </span>
-              <div>
-                <Button
-                  variant="danger"
-                  onClick={() => {
-                    setOpenDeleteModal(true);
-                  }}
-                >
-                  Delete Webhook
-                </Button>
-              </div>
-            </div>
-          </Disclosure.Panel>
-        </Transition>
-      </div>
-    )}
-  </Disclosure>
-);

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

@@ -0,0 +1,44 @@
+// types
+import { TWebhookEventTypes } from "types";
+
+type Props = {
+  value: string;
+  onChange: (value: TWebhookEventTypes) => void;
+};
+
+const WEBHOOK_EVENT_TYPES: { key: TWebhookEventTypes; label: string }[] = [
+  {
+    key: "all",
+    label: "Send me everything",
+  },
+  {
+    key: "individual",
+    label: "Select individual events",
+  },
+];
+
+export const WebhookOptions: React.FC<Props> = (props) => {
+  const { value, onChange } = props;
+
+  return (
+    <>
+      <h6 className="text-sm font-medium">Which events would you like to trigger this webhook?</h6>
+      <div className="space-y-3">
+        {WEBHOOK_EVENT_TYPES.map((option) => (
+          <div key={option.key} className="flex items-center gap-2">
+            <input
+              id={option.key}
+              type="radio"
+              value={option.key}
+              checked={value == option.key}
+              onChange={() => onChange(option.key)}
+            />
+            <label className="text-sm" htmlFor={option.key}>
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,167 @@
+import React, { FC, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import {
+  WebhookIndividualEventOptions,
+  WebhookInput,
+  WebhookOptions,
+  WebhookSecretKey,
+  WebhookToggle,
+  getCurrentHookAsCSV,
+} from "components/web-hooks";
+// ui
+import { Button } from "@plane/ui";
+// helpers
+import { csvDownload } from "helpers/download.helper";
+// types
+import { IWebhook, TWebhookEventTypes } from "types";
+
+type Props = {
+  data?: Partial<IWebhook>;
+};
+
+const initialWebhookPayload: Partial<IWebhook> = {
+  cycle: true,
+  issue: true,
+  issue_comment: true,
+  module: true,
+  project: true,
+  url: "",
+};
+
+export const WebhookForm: FC<Props> = observer((props) => {
+  const { data } = props;
+  // states
+  const [webhookEventType, setWebhookEventType] = useState<TWebhookEventTypes>("all");
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // mobx store
+  const {
+    webhook: { createWebhook, updateWebhook },
+    workspace: { currentWorkspace },
+  } = useMobxStore();
+  // use form
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, errors },
+  } = useForm<IWebhook>({
+    defaultValues: { ...initialWebhookPayload, ...data },
+  });
+
+  const handleCreateWebhook = async (formData: IWebhook) => {
+    if (!workspaceSlug) return;
+
+    let payload: Partial<IWebhook> = {
+      url: formData.url,
+    };
+
+    if (webhookEventType === "all")
+      payload = {
+        ...payload,
+        project: true,
+        cycle: true,
+        module: true,
+        issue: true,
+        issue_comment: true,
+      };
+    else
+      payload = {
+        ...payload,
+        project: formData.project ?? false,
+        cycle: formData.cycle ?? false,
+        module: formData.module ?? false,
+        issue: formData.issue ?? false,
+        issue_comment: formData.issue_comment ?? false,
+      };
+
+    await createWebhook(workspaceSlug.toString(), payload)
+      .then(({ webHook, secretKey }) => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Webhook created successfully.",
+        });
+
+        const csvData = getCurrentHookAsCSV(currentWorkspace, webHook, secretKey);
+        csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
+
+        if (webHook && webHook.id)
+          router.push({ pathname: `/${workspaceSlug}/settings/webhooks/${webHook.id}`, query: { isCreated: true } });
+      })
+      .catch((error) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: error?.error ?? "Something went wrong. Please try again.",
+        });
+      });
+  };
+
+  const handleUpdateWebhook = async (formData: IWebhook) => {
+    if (!workspaceSlug || !data || !data.id) return;
+
+    const payload = {
+      url: formData?.url,
+      is_active: formData?.is_active,
+      project: formData?.project,
+      cycle: formData?.cycle,
+      module: formData?.module,
+      issue: formData?.issue,
+      issue_comment: formData?.issue_comment,
+    };
+
+    return await updateWebhook(workspaceSlug.toString(), data.id, payload);
+  };
+
+  const handleFormSubmit = async (formData: IWebhook) => {
+    if (data) await handleUpdateWebhook(formData);
+    else await handleCreateWebhook(formData);
+  };
+
+  useEffect(() => {
+    if (!data) return;
+
+    if (data.project && data.cycle && data.module && data.issue && data.issue_comment) setWebhookEventType("all");
+    else setWebhookEventType("individual");
+  }, [data]);
+
+  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>}
+        </div>
+        {data && <WebhookToggle control={control} />}
+        <div className="space-y-3">
+          <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
+        </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/generate-key.tsx

@@ -1,139 +0,0 @@
-import { useState, FC } from "react";
-import { useRouter } from "next/router";
-import { Button } from "@plane/ui";
-import { Copy, Eye, EyeOff, RefreshCw } from "lucide-react";
-import { observer } from "mobx-react-lite";
-// hooks
-import useToast from "hooks/use-toast";
-// store
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-import { csvDownload } from "helpers/download.helper";
-// utils
-import { getCurrentHookAsCSV } from "../utils";
-// enum
-import { WebHookFormTypes } from "./index";
-
-interface IGenerateKey {
-  type: WebHookFormTypes.CREATE | WebHookFormTypes.EDIT;
-}
-
-export const GenerateKey: FC<IGenerateKey> = observer((props) => {
-  const { type } = props;
-  // states
-  const [regenerating, setRegenerate] = useState(false);
-  const [shouldShowKey, setShouldShowKey] = useState(false);
-  // router
-  const router = useRouter();
-  const { workspaceSlug, webhookId } = router.query as { workspaceSlug: string; webhookId: string };
-  // store
-  const { webhook: webhookStore, workspace: workspaceStore }: RootStore = useMobxStore();
-  // hooks
-  const { setToastAlert } = useToast();
-
-  const handleCopySecret = () => {
-    if (webhookStore?.webhookSecretKey) {
-      copyTextToClipboard(webhookStore.webhookSecretKey);
-      setToastAlert({
-        title: "Success",
-        type: "success",
-        message: "Secret key copied",
-      });
-    } else {
-      setToastAlert({
-        title: "Oops",
-        type: "error",
-        message: "Error occurred while copying secret key",
-      });
-    }
-  };
-
-  function handleRegenerate() {
-    setRegenerate(true);
-    webhookStore
-      .regenerate(workspaceSlug, webhookId)
-      .then(() => {
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Successfully regenerated",
-        });
-
-        const csvData = getCurrentHookAsCSV(
-          workspaceStore.currentWorkspace,
-          webhookStore.currentWebhook,
-          webhookStore.webhookSecretKey
-        );
-        csvDownload(csvData, `Secret-key-${Date.now()}`);
-      })
-      .catch((err) => {
-        setToastAlert({
-          title: "Oops!",
-          type: "error",
-          message: err?.error,
-        });
-      })
-      .finally(() => {
-        setRegenerate(false);
-      });
-  }
-
-  const toggleShowKey = () => {
-    setShouldShowKey((prevState) => !prevState);
-  };
-
-  const icons = [
-    { Component: Copy, onClick: handleCopySecret, key: "copy" },
-    { Component: shouldShowKey ? EyeOff : Eye, onClick: toggleShowKey, key: "eye" },
-  ];
-
-  return (
-    <>
-      {(type === WebHookFormTypes.EDIT || (type === WebHookFormTypes.CREATE && webhookStore?.webhookSecretKey)) && (
-        <div className="space-y-2">
-          <div className="text-sm font-medium">Secret Key</div>
-          <div className="text-sm text-neutral-400">Genarate a token to sign-in the webhook payload</div>
-
-          <div className="flex gap-5 items-center">
-            <div className="relative flex items-center p-2 rounded w-full border border-custom-border-200">
-              <div className="flex w-full overflow-hidden h-7 px-2 font-medium select-none">
-                {webhookStore?.webhookSecretKey && shouldShowKey ? (
-                  <div>{webhookStore?.webhookSecretKey}</div>
-                ) : (
-                  <div className="flex items-center gap-1.5">
-                    {[...Array(41)].map((_, index) => (
-                      <div key={index} className="w-[4px] h-[4px] bg-gray-300 rounded-full" />
-                    ))}
-                  </div>
-                )}
-              </div>
-              {webhookStore?.webhookSecretKey && (
-                <>
-                  {icons.map(({ Component, onClick, key }) => (
-                    <div
-                      className="w-7 h-7 flex-shrink-0 flex justify-center items-center cursor-pointer hover:bg-custom-background-80 rounded"
-                      onClick={onClick}
-                      key={key}
-                    >
-                      <Component className="text-custom-text-400 w-4 h-4" />
-                    </div>
-                  ))}
-                </>
-              )}
-            </div>
-            <div>
-              {type != WebHookFormTypes.CREATE && (
-                <Button disabled={regenerating} onClick={handleRegenerate} variant="accent-primary" className="">
-                  <RefreshCw className={`h-3 w-3`} />
-                  {regenerating ? "Re-generating..." : "Re-genarate Key"}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-});

web/components/web-hooks/form/index.ts

@@ -0,0 +1,7 @@
+export * from "./delete-section";
+export * from "./event-types";
+export * from "./form";
+export * from "./individual-event-options";
+export * from "./input";
+export * from "./secret-key";
+export * from "./toggle";

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

@@ -1,102 +0,0 @@
-import React, { FC, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { IWebhook, IExtendedWebhook } from "types";
-import { GenerateKey } from "./generate-key";
-import { observer } from "mobx-react-lite";
-// components
-import { DeleteWebhookModal } from "../delete-webhook-modal";
-import { WebHookInput } from "./input";
-import { WebHookToggle } from "./toggle";
-import { WEBHOOK_EVENTS, WebHookOptions, WebhookTypes } from "./options";
-import { WebHookIndividualOptions, individualWebhookOptions } from "./option";
-import { WebHookSubmitButton } from "./submit";
-import { WebHookEditForm } from "./edit-form";
-
-export enum WebHookFormTypes {
-  EDIT = "edit",
-  CREATE = "create",
-}
-
-interface IWebHookForm {
-  type: WebHookFormTypes;
-  initialData: IWebhook;
-  onSubmit: (val: IExtendedWebhook) => void;
-}
-
-export const WebHookForm: FC<IWebHookForm> = observer((props) => {
-  const { type, initialData, onSubmit } = props;
-  // states
-  const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  // use form
-  const {
-    reset,
-    watch,
-    handleSubmit,
-    control,
-    getValues,
-    formState: { isSubmitting, errors },
-  } = useForm<IExtendedWebhook>();
-
-  const checkWebhookEvent = (initialData: IWebhook) => {
-    const { project, module, cycle, issue, issue_comment } = initialData;
-    if (!project || !cycle || !module || !issue || !issue_comment) {
-      return WebhookTypes.INDIVIDUAL;
-    }
-    return WebhookTypes.ALL;
-  };
-
-  useEffect(() => {
-    if (initialData && reset) reset({ ...initialData, webhook_events: checkWebhookEvent(initialData) });
-  }, [initialData, reset]);
-
-  useEffect(() => {
-    if (!watch(WEBHOOK_EVENTS)) return;
-
-    const allWebhookOptions: { [key: string]: boolean } = {};
-
-    /**For Webhooks to return all the types */
-    if (watch(WEBHOOK_EVENTS) === WebhookTypes.ALL) {
-      individualWebhookOptions.forEach(({ name }) => {
-        allWebhookOptions[name] = true;
-      });
-    } /**For Webhooks to return selected individual types, retain the saved individual types */ else if (
-      watch(WEBHOOK_EVENTS) === WebhookTypes.INDIVIDUAL
-    ) {
-      individualWebhookOptions.forEach(({ name }) => {
-        if (initialData[name] !== undefined) {
-          allWebhookOptions[name] = initialData[name]!;
-        } else {
-          allWebhookOptions[name] = true;
-        }
-      });
-    }
-
-    reset({ ...getValues(), ...allWebhookOptions });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [watch && watch(WEBHOOK_EVENTS)]);
-
-  return (
-    <>
-      <DeleteWebhookModal
-        isOpen={openDeleteModal}
-        webhook_url=""
-        onClose={() => {
-          setOpenDeleteModal(false);
-        }}
-      />
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="space-y-8 py-5">
-          <WebHookInput control={control} errors={errors} />
-          <WebHookToggle control={control} />
-          <div className="space-y-3">
-            <WebHookOptions control={control} />
-            {watch(WEBHOOK_EVENTS) === WebhookTypes.INDIVIDUAL && <WebHookIndividualOptions control={control} />}
-          </div>
-          <GenerateKey type={type} />
-          <WebHookSubmitButton isSubmitting={isSubmitting} type={type} />
-          {type === WebHookFormTypes.EDIT && <WebHookEditForm setOpenDeleteModal={setOpenDeleteModal} />}
-        </div>
-      </form>
-    </>
-  );
-});

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

@@ -0,0 +1,69 @@
+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>
+  </>
+);

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

@@ -1,33 +1,26 @@
-import { Control, Controller, FieldErrors } from "react-hook-form";
 import { Input } from "@plane/ui";
-import { IExtendedWebhook } from "types/webhook";
 
-interface IWebHookInput {
+type Props = {
-  control: Control<IExtendedWebhook, any>;
+  value: string;
-  errors: FieldErrors<IExtendedWebhook>;
+  onChange: (value: string) => void;
-}
+  hasError: boolean;
+};
+export const WebhookInput: React.FC<Props> = (props) => {
+  const { value, onChange, hasError } = props;
 
-export const WebHookInput = ({ control, errors }: IWebHookInput) => (
+  return (
-  <div>
+    <>
-    <div className="font-medium text-sm">URL</div>
+      <h6 className="font-medium text-sm">Payload URL</h6>
-    <Controller
-      control={control}
-      name="url"
-      rules={{
-        required: "URL is Required",
-        validate: (value) => (/^(ftp|http|https):\/\/[^ "]+$/.test(value) ? true : "Enter a valid URL"),
-      }}
-      render={({ field: { onChange, value } }) => (
       <Input
+        type="url"
         className="w-full h-11"
-          onChange={onChange}
+        onChange={(e) => onChange(e.target.value)}
         value={value}
-          id="url"
         autoComplete="off"
-          placeholder="Enter URL"
+        hasError={hasError}
+        placeholder="https://example.com/post"
+        autoFocus
       />
-      )}
+    </>
-    />
+  );
-    {errors.url && <p className="py-2 text-sm text-red-500">{errors.url.message}</p>}
+};
-  </div>
-);

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

@@ -1,70 +0,0 @@
-import { Control, Controller } from "react-hook-form";
-import { IWebhookIndividualOptions, IExtendedWebhook } from "types/webhook";
-
-export enum IndividualWebhookTypes {
-  PROJECTS = "Projects",
-  MODULES = "Modules",
-  CYCLES = "Cycles",
-  ISSUES = "Issues",
-  ISSUE_COMMENTS = "Issue Comments",
-}
-
-export const individualWebhookOptions: IWebhookIndividualOptions[] = [
-  {
-    key: "project_toggle",
-    label: IndividualWebhookTypes.PROJECTS,
-    name: "project",
-  },
-  {
-    key: "cycle-toggle",
-    label: IndividualWebhookTypes.CYCLES,
-    name: "cycle",
-  },
-  {
-    key: "issue_toggle",
-    label: IndividualWebhookTypes.ISSUES,
-    name: "issue",
-  },
-  {
-    key: "module_toggle",
-    label: IndividualWebhookTypes.MODULES,
-    name: "module",
-  },
-  {
-    key: "issue_comment_toggle",
-    label: IndividualWebhookTypes.ISSUE_COMMENTS,
-    name: "issue_comment",
-  },
-];
-
-interface IWebHookIndividualOptions {
-  control: Control<IExtendedWebhook, any>;
-}
-
-export const WebHookIndividualOptions = ({ control }: IWebHookIndividualOptions) => (
-  <>
-    <div className="grid grid-cols-2 md:grid-cols-3 grid-flow-row gap-4 px-8 py-6 bg-custom-background-90">
-      {individualWebhookOptions.map(({ key, label, name }: IWebhookIndividualOptions) => (
-        <Controller
-          control={control}
-          name={name}
-          key={key}
-          render={({ field: { onChange, value } }) => (
-            <div className="relative flex items-center gap-2">
-              <input
-                id={key}
-                onChange={() => onChange(!value)}
-                type="checkbox"
-                name="selectIndividualEvents"
-                checked={value == true}
-              />
-              <label className="text-sm" htmlFor={key}>
-                {label}
-              </label>
-            </div>
-          )}
-        />
-      ))}
-    </div>
-  </>
-);

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

@@ -1,54 +0,0 @@
-import { Control, Controller } from "react-hook-form";
-import { IExtendedWebhook, IWebhookOptions } from "types/webhook";
-
-export enum WebhookTypes {
-  ALL = "all",
-  INDIVIDUAL = "individual",
-}
-
-interface IWebHookOptionsProps {
-  control: Control<IExtendedWebhook, any>;
-}
-
-export const WEBHOOK_EVENTS = "webhook_events";
-
-const webhookOptions: IWebhookOptions[] = [
-  {
-    key: WebhookTypes.ALL,
-    label: "Send everything",
-    name: WEBHOOK_EVENTS,
-  },
-  {
-    key: WebhookTypes.INDIVIDUAL,
-    label: "Select Individual events",
-    name: WEBHOOK_EVENTS,
-  },
-];
-
-export const WebHookOptions = ({ control }: IWebHookOptionsProps) => (
-  <>
-    <div className="text-sm font-medium">Which events do you like to trigger this webhook</div>
-    {webhookOptions.map(({ key, label, name }: IWebhookOptions) => (
-      <div className="flex items-center gap-2">
-        <Controller
-          control={control}
-          name={name}
-          key={key}
-          render={({ field: { onChange, value } }) => (
-            <input
-              id={key}
-              type="radio"
-              name={name}
-              value={key}
-              checked={value == key}
-              onChange={() => onChange(key)}
-            />
-          )}
-        />
-        <label className="text-sm" htmlFor={key}>
-          {label}
-        </label>
-      </div>
-    ))}
-  </>
-);

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

@@ -0,0 +1,135 @@
+import { useState, FC } from "react";
+import { useRouter } from "next/router";
+import { Button, Tooltip } from "@plane/ui";
+import { Copy, Eye, EyeOff, RefreshCw } from "lucide-react";
+import { observer } from "mobx-react-lite";
+// hooks
+import useToast from "hooks/use-toast";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+import { csvDownload } from "helpers/download.helper";
+// utils
+import { getCurrentHookAsCSV } from "../utils";
+// types
+import { IWebhook } from "types";
+
+type Props = {
+  data: Partial<IWebhook>;
+};
+
+export const WebhookSecretKey: FC<Props> = observer((props) => {
+  const { data } = props;
+  // states
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  const [shouldShowKey, setShouldShowKey] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug, webhookId } = router.query;
+  // store
+  const {
+    webhook: { currentWebhook, regenerateSecretKey, webhookSecretKey },
+    workspace: { currentWorkspace },
+  } = useMobxStore();
+  // hooks
+  const { setToastAlert } = useToast();
+
+  const handleCopySecretKey = () => {
+    if (!webhookSecretKey) return;
+
+    copyTextToClipboard(webhookSecretKey)
+      .then(() =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Secret key copied to clipboard.",
+        })
+      )
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Error occurred while copying secret key.",
+        })
+      );
+  };
+
+  const handleRegenerateSecretKey = () => {
+    if (!workspaceSlug || !webhookId) return;
+
+    setIsRegenerating(true);
+
+    regenerateSecretKey(workspaceSlug.toString(), webhookId.toString())
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "New key regenerated successfully.",
+        });
+
+        const csvData = getCurrentHookAsCSV(currentWorkspace, currentWebhook, webhookSecretKey);
+        csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
+      })
+      .catch((err) =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error ?? "Something went wrong. Please try again.",
+        })
+      )
+      .finally(() => setIsRegenerating(false));
+  };
+
+  const toggleShowKey = () => setShouldShowKey((prevState) => !prevState);
+
+  const SECRET_KEY_OPTIONS = [
+    { label: "View secret key", Icon: shouldShowKey ? EyeOff : Eye, onClick: toggleShowKey, key: "eye" },
+    { label: "Copy secret key", Icon: Copy, onClick: handleCopySecretKey, key: "copy" },
+  ];
+
+  return (
+    <>
+      {(data || webhookSecretKey) && (
+        <div className="space-y-2">
+          <div className="text-sm font-medium">Secret key</div>
+          <div className="text-xs text-custom-text-400">Generate a token to sign-in to the webhook payload</div>
+          <div className="flex items-center gap-4">
+            <div className="self-stretch flex items-center justify-between py-1.5 px-2 rounded min-w-[30rem] max-w-lg border border-custom-border-200">
+              <div className="overflow-hidden font-medium select-none">
+                {shouldShowKey ? (
+                  <p className="text-xs">{webhookSecretKey}</p>
+                ) : (
+                  <div className="flex items-center gap-1.5">
+                    {[...Array(30)].map((_, index) => (
+                      <div key={index} className="w-1 h-1 bg-custom-text-400 rounded-full" />
+                    ))}
+                  </div>
+                )}
+              </div>
+              {webhookSecretKey && (
+                <div className="flex items-center gap-2">
+                  {SECRET_KEY_OPTIONS.map((option) => (
+                    <Tooltip key={option.key} tooltipContent={option.label}>
+                      <button type="button" className="flex-shrink-0 grid place-items-center" onClick={option.onClick}>
+                        <option.Icon className="text-custom-text-400 h-3 w-3" />
+                      </button>
+                    </Tooltip>
+                  ))}
+                </div>
+              )}
+            </div>
+            {data && (
+              <div>
+                <Button onClick={handleRegenerateSecretKey} variant="accent-primary" loading={isRegenerating}>
+                  <RefreshCw className="h-3 w-3" />
+                  {isRegenerating ? "Re-generating..." : "Re-generate key"}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+});

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

@@ -1,13 +0,0 @@
-import { Button } from "@plane/ui";
-import { WebHookFormTypes } from "./index";
-
-interface IWebHookSubmitButton {
-  isSubmitting: boolean;
-  type: WebHookFormTypes;
-}
-
-export const WebHookSubmitButton = ({ isSubmitting, type }: IWebHookSubmitButton) => (
-  <Button type="submit" disabled={isSubmitting}>
-    {isSubmitting ? "processing..." : type === "create" ? "Create webhook" : "Save webhook"}
-  </Button>
-);

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

@@ -1,14 +1,16 @@
 import { Control, Controller } from "react-hook-form";
-import { IExtendedWebhook } from "types/webhook";
+// ui
 import { ToggleSwitch } from "@plane/ui";
+// types
+import { IWebhook } from "types/webhook";
 
 interface IWebHookToggle {
-  control: Control<IExtendedWebhook, any>;
+  control: Control<IWebhook, any>;
 }
 
-export const WebHookToggle = ({ control }: IWebHookToggle) => (
+export const WebhookToggle = ({ control }: IWebHookToggle) => (
   <div className="flex gap-6">
-    <div className="text-sm"> Enable webhook </div>
+    <div className="text-sm font-medium">Enable webhook</div>
     <Controller
       control={control}
       name="is_active"

web/components/web-hooks/index.ts

@@ -1,4 +1,6 @@
-export * from "./empty-webhooks";
-export * from "./webhooks-list";
-export * from "./webhooks-list-item";
 export * from "./form";
+export * from "./delete-webhook-modal";
+export * from "./empty-state";
+export * from "./utils";
+export * from "./webhooks-list-item";
+export * from "./webhooks-list";

web/components/web-hooks/webhooks-list-item.tsx

@@ -1,41 +1,40 @@
 import { FC } from "react";
-import { ToggleSwitch } from "@plane/ui";
 import Link from "next/link";
-import { RootStore } from "store/root";
+import { useRouter } from "next/router";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { ToggleSwitch } from "@plane/ui";
 // types
 import { IWebhook } from "types";
 
 interface IWebhookListItem {
-  workspaceSlug: string;
   webhook: IWebhook;
 }
 
 export const WebhooksListItem: FC<IWebhookListItem> = (props) => {
-  const { workspaceSlug, webhook } = props;
+  const { webhook } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
 
-  const { webhook: webhookStore }: RootStore = useMobxStore();
+  const {
+    webhook: { updateWebhook },
+  } = useMobxStore();
 
   const handleToggle = () => {
-    if (webhook.id) {
+    if (!workspaceSlug || !webhook.id) return;
-      webhookStore.update(workspaceSlug, webhook.id, { ...webhook, is_active: !webhook.is_active }).catch(() => {});
+
-    }
+    updateWebhook(workspaceSlug.toString(), webhook.id, { is_active: !webhook.is_active });
   };
 
   return (
-    <div>
+    <div className="border-b border-custom-border-200">
       <Link href={`/${workspaceSlug}/settings/webhooks/${webhook?.id}`}>
-        <div className="flex cursor-pointer justify-between px-3.5 py-[18px]">
+        <a className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
-          <div>
+          <h5 className="text-base font-medium truncate">{webhook.url}</h5>
-            <div className="text-base font-medium">{webhook?.url || "Webhook URL"}</div>
-            {/* <div className="text-base text-neutral-700">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-          </div> */}
-          </div>
-          <div className="flex gap-4 items-center">
           <ToggleSwitch value={webhook.is_active} onChange={handleToggle} />
-          </div>
+        </a>
-        </div>
       </Link>
     </div>
   );

web/components/web-hooks/webhooks-list.tsx

@@ -1,38 +1,19 @@
-import { FC } from "react";
-import Link from "next/link";
-import { Button } from "@plane/ui";
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { WebhooksListItem } from "./webhooks-list-item";
 
-interface IWebHookLists {
+export const WebhooksList = observer(() => {
-  workspaceSlug: string;
-}
-
-export const WebhookLists: FC<IWebHookLists> = observer((props) => {
-  const { workspaceSlug } = props;
   const {
     webhook: { webhooks },
-  }: RootStore = useMobxStore();
+  } = useMobxStore();
 
   return (
-    <>
+    <div className="h-full w-full overflow-y-auto">
-      <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
+      {Object.values(webhooks ?? {}).map((webhook) => (
-        <div className="text-xl font-medium">Webhooks</div>
+        <WebhooksListItem key={webhook.id} webhook={webhook} />
-        <Link href={`/${workspaceSlug}/settings/webhooks/create`}>
-          <Button variant="primary" size="sm">
-            Add webhook
-          </Button>
-        </Link>
-      </div>
-
-      <div className="divide-y divide-custom-border-200 overflow-y-scroll">
-        {Object.values(webhooks).map((item) => (
-          <WebhooksListItem workspaceSlug={workspaceSlug} webhook={item} key={item.id} />
       ))}
     </div>
-    </>
   );
 });

web/layouts/settings-layout/workspace/sidebar.tsx

@@ -50,7 +50,7 @@ export const WorkspaceSettingsSidebar = () => {
     {
       label: "Exports",
       href: `/${workspaceSlug}/settings/exports`,
-      access: EUserWorkspaceRoles.ADMIN,
+      access: EUserWorkspaceRoles.MEMBER,
     },
     {
       label: "Webhooks",

web/lib/wrappers/store-wrapper.tsx

@@ -16,7 +16,7 @@ const StoreWrapper: FC<IStoreWrapper> = observer((props) => {
   const { children } = props;
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId, webhookId } = router.query;
   // store
   const {
     theme: { sidebarCollapsed, toggleSidebar },
@@ -28,6 +28,7 @@ const StoreWrapper: FC<IStoreWrapper> = observer((props) => {
     globalViews: { setGlobalViewId },
     projectViews: { setViewId },
     inbox: { setInboxId },
+    webhook: { setCurrentWebhookId },
     appConfig: { fetchAppConfig },
   } = useMobxStore();
   // fetching application Config
@@ -74,6 +75,7 @@ const StoreWrapper: FC<IStoreWrapper> = observer((props) => {
     setGlobalViewId(globalViewId?.toString() ?? null);
     setViewId(viewId?.toString() ?? null);
     setInboxId(inboxId?.toString() ?? null);
+    setCurrentWebhookId(webhookId?.toString() ?? undefined);
   }, [
     workspaceSlug,
     projectId,
@@ -82,6 +84,7 @@ const StoreWrapper: FC<IStoreWrapper> = observer((props) => {
     globalViewId,
     viewId,
     inboxId,
+    webhookId,
     setWorkspaceSlug,
     setProjectId,
     setCycleId,
@@ -89,6 +92,7 @@ const StoreWrapper: FC<IStoreWrapper> = observer((props) => {
     setGlobalViewId,
     setViewId,
     setInboxId,
+    setCurrentWebhookId,
   ]);
 
   return <>{children}</>;

web/pages/[workspaceSlug]/settings/api-tokens.tsx

@@ -31,12 +31,13 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
     user: { currentWorkspaceRole },
   } = useMobxStore();
 
-  const { data: tokens } = useSWR(
+  const isAdmin = currentWorkspaceRole === 20;
-    workspaceSlug && currentWorkspaceRole === 20 ? API_TOKENS_LIST(workspaceSlug.toString()) : null,
+
-    () => (workspaceSlug && currentWorkspaceRole === 20 ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null)
+  const { data: tokens } = useSWR(workspaceSlug && isAdmin ? API_TOKENS_LIST(workspaceSlug.toString()) : null, () =>
+    workspaceSlug && isAdmin ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null
   );
 
-  if (currentWorkspaceRole !== 20)
+  if (!isAdmin)
     return (
       <div className="h-full w-full flex justify-center mt-10 p-4">
         <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>

web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx

@@ -1,77 +1,76 @@
-import type { NextPage } from "next";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
-// layout
+import useSWR from "swr";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
 import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
 import { WorkspaceSettingHeader } from "components/headers";
-import { WebHookForm } from "components/web-hooks";
+import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "components/web-hooks";
-// hooks
+// ui
-import { useMobxStore } from "lib/mobx/store-provider";
-// types
-import { RootStore } from "store/root";
-import { IExtendedWebhook, IWebhook } from "types";
 import { Spinner } from "@plane/ui";
-import { useEffect } from "react";
+// types
-import { WebHookFormTypes } from "components/web-hooks/form";
+import { NextPageWithLayout } from "types/app";
 
-const Webhooks: NextPage = observer(() => {
+const WebhookDetailsPage: NextPageWithLayout = observer(() => {
+  // states
+  const [deleteWebhookModal, setDeleteWebhookModal] = useState(false);
+  // router
   const router = useRouter();
-  const { workspaceSlug, webhookId, isCreated } = router.query as {
+  const { workspaceSlug, webhookId, isCreated } = router.query;
-    workspaceSlug: string;
+  // mobx store
-    webhookId: string;
+  const {
-    isCreated: string;
+    webhook: { currentWebhook, clearSecretKey, fetchWebhookById },
-  };
+    user: { currentWorkspaceRole },
-
+  } = useMobxStore();
-  const { webhook: webhookStore }: RootStore = useMobxStore();
 
   useEffect(() => {
-    if (isCreated !== "true") {
+    if (isCreated !== "true") clearSecretKey();
-      webhookStore.clearSecretKey();
+  }, [clearSecretKey, isCreated]);
-    }
-  }, []);
 
-  const { isLoading } = useSWR(
+  const isAdmin = currentWorkspaceRole === 20;
-    workspaceSlug && webhookId ? `WEBHOOKS_DETAIL_${workspaceSlug}_${webhookId}` : null,
+
-    workspaceSlug && webhookId
+  useSWR(
-      ? async () => {
+    workspaceSlug && webhookId && isAdmin ? `WEBHOOK_DETAILS_${workspaceSlug}_${webhookId}` : null,
-          await webhookStore.fetchById(workspaceSlug, webhookId);
+    workspaceSlug && webhookId && isAdmin
-        }
+      ? () => fetchWebhookById(workspaceSlug.toString(), webhookId.toString())
       : null
   );
 
-  const onSubmit = (data: IExtendedWebhook): Promise<IWebhook> => {
+  if (!isAdmin)
-    const payload = {
-      url: data?.url,
-      is_active: data?.is_active,
-      project: data?.project,
-      cycle: data?.cycle,
-      module: data?.module,
-      issue: data?.issue,
-      issue_comment: data?.issue_comment,
-    };
-    return webhookStore.update(workspaceSlug, webhookId, payload);
-  };
-
-  const initialPayload = webhookStore.currentWebhook as IWebhook;
-
     return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
+      <div className="h-full w-full flex justify-center mt-10 p-4">
-      <WorkspaceSettingLayout>
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
-        <div className="w-full overflow-y-auto py-3 pr-4">
+      </div>
-          {isLoading ? (
+    );
-            <div className="flex w-full h-full items-center justify-center">
+
+  if (!currentWebhook)
+    return (
+      <div className="h-full w-full grid place-items-center p-4">
         <Spinner />
       </div>
-          ) : (
+    );
-            <WebHookForm type={WebHookFormTypes.EDIT} initialData={initialPayload} onSubmit={onSubmit} />
+
-          )}
+  return (
+    <>
+      <DeleteWebhookModal isOpen={deleteWebhookModal} onClose={() => setDeleteWebhookModal(false)} />
+      <div className="w-full overflow-y-auto py-8 pr-9 space-y-8">
+        <WebhookForm data={currentWebhook} />
+        {currentWebhook && <WebhookDeleteSection openDeleteModal={() => setDeleteWebhookModal(true)} />}
       </div>
-      </WorkspaceSettingLayout>
+    </>
-    </AppLayout>
   );
 });
 
-export default Webhooks;
+WebhookDetailsPage.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default WebhookDetailsPage;

web/pages/[workspaceSlug]/settings/webhooks/create.tsx

@@ -1,89 +1,43 @@
-import React, { useEffect } from "react";
+import React from "react";
-import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
-import type { NextPage } from "next";
+// mobx store
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingHeader } from "components/headers";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-import { WebHookForm } from "components/web-hooks";
-import { IWebhook, IExtendedWebhook } from "types";
-import { RootStore } from "store/root";
 import { useMobxStore } from "lib/mobx/store-provider";
-import { csvDownload } from "helpers/download.helper";
+// layouts
-import useToast from "hooks/use-toast";
+import { AppLayout } from "layouts/app-layout";
-import { WebHookFormTypes } from "components/web-hooks/form";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
-import { getCurrentHookAsCSV } from "components/web-hooks/utils";
+// components
+import { WorkspaceSettingHeader } from "components/headers";
+import { WebhookForm } from "components/web-hooks";
+// types
+import { NextPageWithLayout } from "types/app";
 
-const Webhooks: NextPage = () => {
+const CreateWebhookPage: NextPageWithLayout = observer(() => {
-  const router = useRouter();
+  const {
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
 
-  const { workspaceSlug } = router.query as { workspaceSlug: string };
+  const isAdmin = currentWorkspaceRole === 20;
 
-  const initialWebhookPayload: IWebhook = {
+  if (!isAdmin)
-    url: "",
+    return (
-    is_active: true,
+      <div className="h-full w-full flex justify-center mt-10 p-4">
-    created_at: "",
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
-    updated_at: "",
+      </div>
-    secret_key: "",
+    );
-    project: true,
-    issue_comment: true,
-    cycle: true,
-    module: true,
-    issue: true,
-    workspace: "",
-  };
-
-  const { webhook: webhookStore, workspace: workspaceStore }: RootStore = useMobxStore();
-
-  const { setToastAlert } = useToast();
-
-  const onSubmit = async (data: IExtendedWebhook) => {
-    const payload = {
-      url: data?.url,
-      is_active: data?.is_active,
-      project: data?.project,
-      cycle: data?.cycle,
-      module: data?.module,
-      issue: data?.issue,
-      issue_comment: data?.issue_comment,
-    };
-
-    return webhookStore
-      .create(workspaceSlug, payload)
-      .then(({ webHook, secretKey }) => {
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Successfully created",
-        });
-        const csvData = getCurrentHookAsCSV(workspaceStore.currentWorkspace, webHook, secretKey);
-        csvDownload(csvData, `Secret-key-${Date.now()}`);
-
-        if (webHook && webHook.id) {
-          router.push({ pathname: `/${workspaceSlug}/settings/webhooks/${webHook.id}`, query: { isCreated: true } });
-        }
-      })
-      .catch((error) => {
-        setToastAlert({
-          title: "Oops!",
-          type: "error",
-          message: error?.error ?? "Something went wrong!",
-        });
-      });
-  };
-
-  useEffect(() => {
-    webhookStore.clearSecretKey();
-  }, []);
 
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
+    <div className="w-full overflow-y-auto py-8 pr-9 pl-1">
-      <WorkspaceSettingLayout>
+      <WebhookForm />
-        <div className="w-full overflow-y-auto py-3 pr-4">
-          <WebHookForm type={WebHookFormTypes.CREATE} initialData={initialWebhookPayload} onSubmit={onSubmit} />
     </div>
-      </WorkspaceSettingLayout>
+  );
+});
+
+CreateWebhookPage.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
     </AppLayout>
   );
 };
 
-export default Webhooks;
+export default CreateWebhookPage;

web/pages/[workspaceSlug]/settings/webhooks/index.tsx

@@ -1,56 +1,80 @@
 import React from "react";
-import type { NextPage } from "next";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
-// layout
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
 import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
 import { WorkspaceSettingHeader } from "components/headers";
-import { WebhookLists, EmptyWebhooks } from "components/web-hooks";
+import { WebhooksList, WebhooksEmptyState } from "components/web-hooks";
-// hooks
+// ui
-import { useMobxStore } from "lib/mobx/store-provider";
+import { Button, Spinner } from "@plane/ui";
 // types
-import { RootStore } from "store/root";
+import { NextPageWithLayout } from "types/app";
-import { Spinner } from "@plane/ui";
 
-const WebhooksPage: NextPage = observer(() => {
+const WebhooksListPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
-  const { workspaceSlug } = router.query as { workspaceSlug: string };
+  const { workspaceSlug } = router.query;
 
   const {
-    webhook: { fetchWebhooks, webhooks, loader },
+    webhook: { fetchWebhooks, webhooks },
-  }: RootStore = useMobxStore();
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
+
+  const isAdmin = currentWorkspaceRole === 20;
 
   useSWR(
-    workspaceSlug ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
+    workspaceSlug && isAdmin ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWebhooks(workspaceSlug) : null
+    workspaceSlug && isAdmin ? () => fetchWebhooks(workspaceSlug.toString()) : null
+  );
+
+  if (!isAdmin)
+    return (
+      <div className="h-full w-full flex justify-center mt-10 p-4">
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
+      </div>
+    );
+
+  if (!webhooks)
+    return (
+      <div className="h-full w-full grid place-items-center p-4">
+        <Spinner />
+      </div>
     );
 
   return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
+    <div className="h-full w-full py-8 pr-9 overflow-hidden">
-      <WorkspaceSettingLayout>
-        <div className="w-full overflow-y-auto py-3 pr-9">
-          {loader ? (
-            <div className="flex h-full w-ful items-center justify-center">
-              <Spinner />
-            </div>
-          ) : (
-            <>
       {Object.keys(webhooks).length > 0 ? (
-                <WebhookLists workspaceSlug={workspaceSlug} />
+        <div className="h-full w-full flex flex-col">
+          <div className="flex items-center justify-between gap-4 pb-3.5 border-b border-custom-border-200">
+            <div className="text-xl font-medium">Webhooks</div>
+            <Link href={`/${workspaceSlug}/settings/webhooks/create`}>
+              <Button variant="primary" size="sm">
+                Add webhook
+              </Button>
+            </Link>
+          </div>
+          <WebhooksList />
+        </div>
       ) : (
-                <div className="py-5 mx-auto">
+        <div className="mx-auto">
-                  <EmptyWebhooks />
+          <WebhooksEmptyState />
         </div>
       )}
-            </>
-          )}
     </div>
-      </WorkspaceSettingLayout>
-    </AppLayout>
   );
 });
 
-export default WebhooksPage;
+WebhooksListPage.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default WebhooksListPage;

web/services/webhook.service.ts

@@ -10,7 +10,7 @@ export class WebhookService extends APIService {
     super(API_BASE_URL);
   }
 
-  async getAll(workspaceSlug: string): Promise<IWebhook[]> {
+  async fetchWebhooksList(workspaceSlug: string): Promise<IWebhook[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/webhooks/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -18,15 +18,15 @@ export class WebhookService extends APIService {
       });
   }
 
-  async getById(workspaceSlug: string, webhook_id: string): Promise<IWebhook> {
+  async fetchWebhookDetails(workspaceSlug: string, webhookId: string): Promise<IWebhook> {
-    return this.get(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/`)
+    return this.get(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async create(workspaceSlug: string, data: {}): Promise<IWebhook> {
+  async createWebhook(workspaceSlug: string, data: {}): Promise<IWebhook> {
     return this.post(`/api/workspaces/${workspaceSlug}/webhooks/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -34,24 +34,24 @@ export class WebhookService extends APIService {
       });
   }
 
-  async update(workspaceSlug: string, webhook_id: string, data: {}): Promise<IWebhook> {
+  async updateWebhook(workspaceSlug: string, webhookId: string, data: {}): Promise<IWebhook> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/`, data)
+    return this.patch(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async remove(workspaceSlug: string, webhook_id: string): Promise<void> {
+  async deleteWebhook(workspaceSlug: string, webhookId: string): Promise<void> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/`)
+    return this.delete(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async regenerate(workspaceSlug: string, webhook_id: string): Promise<IWebhook> {
+  async regenerateSecretKey(workspaceSlug: string, webhookId: string): Promise<IWebhook> {
-    return this.post(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/regenerate/`)
+    return this.post(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/regenerate/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

web/store/webhook.store.ts

@@ -7,7 +7,7 @@ export interface IWebhookStore {
   loader: boolean;
   error: any | undefined;
 
-  webhooks: { [webhookId: string]: IWebhook };
+  webhooks: { [webhookId: string]: IWebhook } | null;
   currentWebhookId: string | undefined;
   webhookSecretKey: string | undefined;
 
@@ -15,12 +15,16 @@ export interface IWebhookStore {
   currentWebhook: IWebhook | undefined;
 
   // actions
+  setCurrentWebhookId: (webhookId: string | undefined) => void;
   fetchWebhooks: (workspaceSlug: string) => Promise<IWebhook[]>;
-  fetchById: (workspaceSlug: string, webhook_id: string) => Promise<IWebhook>;
+  fetchWebhookById: (workspaceSlug: string, webhook_id: string) => Promise<IWebhook>;
-  create: (workspaceSlug: string, data: IWebhook) => Promise<{ webHook: IWebhook; secretKey: string | undefined }>;
+  createWebhook: (
-  update: (workspaceSlug: string, webhook_id: string, data: Partial<IWebhook>) => Promise<IWebhook>;
+    workspaceSlug: string,
-  remove: (workspaceSlug: string, webhook_id: string) => Promise<void>;
+    data: Partial<IWebhook>
-  regenerate: (
+  ) => Promise<{ webHook: IWebhook; secretKey: string | undefined }>;
+  updateWebhook: (workspaceSlug: string, webhook_id: string, data: Partial<IWebhook>) => Promise<IWebhook>;
+  removeWebhook: (workspaceSlug: string, webhook_id: string) => Promise<void>;
+  regenerateSecretKey: (
     workspaceSlug: string,
     webhook_id: string
   ) => Promise<{ webHook: IWebhook; secretKey: string | undefined }>;
@@ -31,7 +35,7 @@ export class WebhookStore implements IWebhookStore {
   loader: boolean = false;
   error: any | undefined = undefined;
 
-  webhooks: { [webhookId: string]: IWebhook } = {};
+  webhooks: { [webhookId: string]: IWebhook } | null = null;
   currentWebhookId: string | undefined = undefined;
   webhookSecretKey: string | undefined = undefined;
 
@@ -51,28 +55,35 @@ export class WebhookStore implements IWebhookStore {
       currentWebhook: computed,
 
       fetchWebhooks: action,
-      create: action,
+      createWebhook: action,
-      fetchById: action,
+      fetchWebhookById: action,
-      update: action,
+      updateWebhook: action,
-      remove: action,
+      removeWebhook: action,
-      regenerate: action,
+      regenerateSecretKey: action,
       clearSecretKey: action,
     });
+
     this.rootStore = _rootStore;
     this.webhookService = new WebhookService();
   }
 
   get currentWebhook() {
     if (!this.currentWebhookId) return undefined;
-    const currentWebhook = this.webhooks ? this.webhooks[this.currentWebhookId] : undefined;
+
+    const currentWebhook = this.webhooks?.[this.currentWebhookId] ?? undefined;
     return currentWebhook;
   }
 
+  setCurrentWebhookId = (webhookId: string | undefined) => {
+    this.currentWebhookId = webhookId;
+  };
+
   fetchWebhooks = async (workspaceSlug: string) => {
     try {
       this.loader = true;
       this.error = undefined;
-      const webhookResponse = await this.webhookService.getAll(workspaceSlug);
+
+      const webhookResponse = await this.webhookService.fetchWebhooksList(workspaceSlug);
 
       const webHookObject: { [webhookId: string]: IWebhook } = webhookResponse.reduce((accumulator, currentWebhook) => {
         if (currentWebhook && currentWebhook.id) {
@@ -91,102 +102,92 @@ export class WebhookStore implements IWebhookStore {
     } catch (error) {
       this.loader = false;
       this.error = error;
+
       throw error;
     }
   };
 
-  create = async (workspaceSlug: string, data: IWebhook) => {
+  createWebhook = async (workspaceSlug: string, data: Partial<IWebhook>) => {
     try {
-      const webhookResponse = await this.webhookService.create(workspaceSlug, data);
+      const webhookResponse = await this.webhookService.createWebhook(workspaceSlug, data);
 
       const _secretKey = webhookResponse?.secret_key;
       delete webhookResponse?.secret_key;
       const _webhooks = this.webhooks;
 
-      if (webhookResponse && webhookResponse.id) {
+      if (webhookResponse && webhookResponse.id && _webhooks) _webhooks[webhookResponse.id] = webhookResponse;
-        _webhooks[webhookResponse.id] = webhookResponse;
-      }
 
       runInAction(() => {
         this.webhookSecretKey = _secretKey || undefined;
         this.webhooks = _webhooks;
-        this.currentWebhookId = webhookResponse.id;
       });
 
       return { webHook: webhookResponse, secretKey: _secretKey };
     } catch (error) {
-      console.log(error);
       throw error;
     }
   };
 
-  fetchById = async (workspaceSlug: string, webhook_id: string) => {
+  fetchWebhookById = async (workspaceSlug: string, webhook_id: string) => {
     try {
-      const webhookResponse = await this.webhookService.getById(workspaceSlug, webhook_id);
+      const webhookResponse = await this.webhookService.fetchWebhookDetails(workspaceSlug, webhook_id);
 
-      const _webhooks = this.webhooks;
-
-      if (webhookResponse && webhookResponse.id) {
-        _webhooks[webhookResponse.id] = webhookResponse;
-      }
       runInAction(() => {
-        this.currentWebhookId = webhook_id;
+        this.webhooks = {
-        this.webhooks = _webhooks;
+          ...this.webhooks,
+          [webhookResponse.id]: webhookResponse,
+        };
       });
 
       return webhookResponse;
     } catch (error) {
-      console.log(error);
       throw error;
     }
   };
 
-  update = async (workspaceSlug: string, webhook_id: string, data: Partial<IWebhook>) => {
+  updateWebhook = async (workspaceSlug: string, webhook_id: string, data: Partial<IWebhook>) => {
     try {
       let _webhooks = this.webhooks;
 
-      if (webhook_id) {
+      if (webhook_id && _webhooks && this.webhooks)
         _webhooks = { ..._webhooks, [webhook_id]: { ...this.webhooks[webhook_id], ...data } };
-      }
 
       runInAction(() => {
         this.webhooks = _webhooks;
       });
 
-      const webhookResponse = await this.webhookService.update(workspaceSlug, webhook_id, data);
+      const webhookResponse = await this.webhookService.updateWebhook(workspaceSlug, webhook_id, data);
 
       return webhookResponse;
     } catch (error) {
-      console.log(error);
       this.fetchWebhooks(workspaceSlug);
       throw error;
     }
   };
 
-  remove = async (workspaceSlug: string, webhook_id: string) => {
+  removeWebhook = async (workspaceSlug: string, webhook_id: string) => {
     try {
-      await this.webhookService.remove(workspaceSlug, webhook_id);
+      await this.webhookService.deleteWebhook(workspaceSlug, webhook_id);
 
-      const _webhooks = this.webhooks;
+      const _webhooks = this.webhooks ?? {};
       delete _webhooks[webhook_id];
       runInAction(() => {
         this.webhooks = _webhooks;
       });
     } catch (error) {
-      console.log(error);
       throw error;
     }
   };
 
-  regenerate = async (workspaceSlug: string, webhook_id: string) => {
+  regenerateSecretKey = async (workspaceSlug: string, webhook_id: string) => {
     try {
-      const webhookResponse = await this.webhookService.regenerate(workspaceSlug, webhook_id);
+      const webhookResponse = await this.webhookService.regenerateSecretKey(workspaceSlug, webhook_id);
 
       const _secretKey = webhookResponse?.secret_key;
       delete webhookResponse?.secret_key;
       const _webhooks = this.webhooks;
 
-      if (webhookResponse && webhookResponse.id) {
+      if (_webhooks && webhookResponse && webhookResponse.id) {
         _webhooks[webhookResponse.id] = webhookResponse;
       }
 
@@ -196,7 +197,6 @@ export class WebhookStore implements IWebhookStore {
       });
       return { webHook: webhookResponse, secretKey: _secretKey };
     } catch (error) {
-      console.log(error);
       throw error;
     }
   };

web/types/webhook.d.ts

@@ -1,31 +1,15 @@
 export interface IWebhook {
-  id?: string;
+  created_at: string;
-  secret_key?: string;
-  url: string;
-  created_at?: string;
-  updated_at?: string;
-  is_active: boolean;
-  project: boolean;
   cycle: boolean;
-  module: boolean;
+  id: string;
+  is_active: boolean;
   issue: boolean;
-  issue_comment?: boolean;
+  issue_comment: boolean;
-  workspace?: string;
+  module: boolean;
+  project: boolean;
+  secret_key?: string;
+  updated_at: string;
+  url: string;
 }
 
-// this interface is used to handle the webhook form state
+export type TWebhookEventTypes = "all" | "individual";
-interface IExtendedWebhook extends IWebhook {
-  webhook_events: string;
-}
-
-export interface IWebhookIndividualOptions {
-  key: string;
-  label: string;
-  name: "project" | "cycle" | "module" | "issue" | "issue_comment";
-}
-
-export interface IWebhookOptions {
-  key: string;
-  label: string;
-  name: "webhook_events";
-}