feat: api webhooks (#2543)

* dev: initiate external apis

* dev: external api

* dev: external public api implementation

* dev: add prefix to all api tokens

* dev: flag to enable disable api token api access

* dev: webhook model create and apis

* dev: webhook settings

* fix: webhook logs

* chore: removed drf spectacular

* dev: remove retry_count and fix api logging for get requests

* dev: refactor webhook logic

* fix: celery retry mechanism

* chore: event and action change

* chore: migrations changes

* dev: proxy setup for apis

* chore: changed retry time and cleanup

* chore: added issue comment and inbox issue api endpoints

* fix: migration files

* fix: added env variables

* fix: removed issue attachment from proxy

* fix: added new migration file

* fix: restricted wehbook access

* chore: changed urls

* chore: fixed porject serializer

* fix: set expire for api token

* fix: retrive endpoint for api token

* feat: Api Token screens & api integration

* dev: webhook endpoint changes

* dev: add fields for webhook updates

* feat: Download Api secret key

* chore: removed BASE API URL

* feat: revoke token access

* dev: migration fixes

* feat: workspace webhooks (#2748)

* feat: workspace webhook store, services integeration and rendered webhook list and create

* chore: handled webhook update and rengenerate token in workspace webhooks

* feat: regenerate key and delete functionality

---------

Co-authored-by: Ramesh Kumar <rameshkumar@rameshs-MacBook-Pro.local>
Co-authored-by: gurusainath <gurusainath007@gmail.com>
Co-authored-by: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>

* fix: url validation added

* fix: seperated env for webhook and api

* Web hooks refactoring

* add show option for generated hook key

* Api token restructure

* webhook minor fixes

* fix build errors

* chore: improvements in file structring

* dev: rate limiting the open apis

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Co-authored-by: Ramesh Kumar <rameshkumar@rameshs-MacBook-Pro.local>
Co-authored-by: gurusainath <gurusainath007@gmail.com>
Co-authored-by: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: rahulramesha <rahulramesham@gmail.com>

web/components/api-token/ApiTokenForm/ApiTokenDescription.tsx

@@ -0,0 +1,55 @@
+import { TextArea } from "@plane/ui";
+import { Control, Controller, FieldErrors } from "react-hook-form";
+import { IApiToken } from "types/api_token";
+import { IApiFormFields } from "./types";
+import { Dispatch, SetStateAction } from "react";
+
+interface IApiTokenDescription {
+  generatedToken: IApiToken | null | undefined;
+  control: Control<IApiFormFields, any>;
+  focusDescription: boolean;
+  setFocusTitle: Dispatch<SetStateAction<boolean>>;
+  setFocusDescription: Dispatch<SetStateAction<boolean>>;
+}
+
+export const ApiTokenDescription = ({
+  generatedToken,
+  control,
+  focusDescription,
+  setFocusTitle,
+  setFocusDescription,
+}: IApiTokenDescription) => (
+  <Controller
+    control={control}
+    name="description"
+    render={({ field: { value, onChange } }) =>
+      focusDescription ? (
+        <TextArea
+          id="description"
+          name="description"
+          autoFocus={true}
+          onBlur={() => {
+            setFocusDescription(false);
+          }}
+          value={value}
+          defaultValue={value}
+          onChange={onChange}
+          placeholder="Description"
+          className="mt-3"
+          rows={3}
+        />
+      ) : (
+        <p
+          onClick={() => {
+            if (generatedToken != null) return;
+            setFocusTitle(false);
+            setFocusDescription(true);
+          }}
+          className={`${value.length === 0 ? "text-custom-text-400/60" : "text-custom-text-300"} text-lg pt-3`}
+        >
+          {value.length != 0 ? value : "Description"}
+        </p>
+      )
+    }
+  />
+);

web/components/api-token/ApiTokenForm/ApiTokenExpiry.tsx

@@ -0,0 +1,110 @@
+import { Menu, Transition } from "@headlessui/react";
+import { ToggleSwitch } from "@plane/ui";
+import { Dispatch, Fragment, SetStateAction } from "react";
+import { Control, Controller } from "react-hook-form";
+import { IApiFormFields } from "./types";
+
+interface IApiTokenExpiry {
+  neverExpires: boolean;
+  selectedExpiry: number;
+  setSelectedExpiry: Dispatch<SetStateAction<number>>;
+  setNeverExpire: Dispatch<SetStateAction<boolean>>;
+  renderExpiry: () => string;
+  control: Control<IApiFormFields, any>;
+}
+
+export const expiryOptions = [
+  {
+    title: "7 Days",
+    days: 7,
+  },
+  {
+    title: "30 Days",
+    days: 30,
+  },
+  {
+    title: "1 Month",
+    days: 30,
+  },
+  {
+    title: "3 Months",
+    days: 90,
+  },
+  {
+    title: "1 Year",
+    days: 365,
+  },
+];
+
+export const ApiTokenExpiry = ({
+  neverExpires,
+  selectedExpiry,
+  setSelectedExpiry,
+  setNeverExpire,
+  renderExpiry,
+  control,
+}: IApiTokenExpiry) => (
+  <>
+    <Menu>
+      <p className="text-sm font-medium mb-2"> Expiration Date</p>
+      <Menu.Button className={"w-[40%]"} disabled={neverExpires}>
+        <div className="py-3 w-full font-medium px-3 flex border border-custom-border-200 rounded-md justify-center items-baseline">
+          <p className={`text-base ${neverExpires ? "text-custom-text-400/40" : ""}`}>
+            {expiryOptions[selectedExpiry].title.toLocaleLowerCase()}
+          </p>
+          <p className={`text-sm mr-auto ml-2 text-custom-text-400${neverExpires ? "/40" : ""}`}>({renderExpiry()})</p>
+        </div>
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-sm max-h-36 border origin-top-right mt-1 overflow-auto min-w-[10rem] border-custom-border-100 p-1 shadow-lg focus:outline-none bg-custom-background-100">
+          {expiryOptions.map((option, index) => (
+            <Menu.Item key={index}>
+              {({ active }) => (
+                <div className="py-1">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedExpiry(index);
+                    }}
+                    className={`w-full text-sm select-none truncate rounded px-3 py-1.5 text-left text-custom-text-300 hover:bg-custom-background-80 ${
+                      active ? "bg-custom-background-80" : ""
+                    }`}
+                  >
+                    {option.title}
+                  </button>
+                </div>
+              )}
+            </Menu.Item>
+          ))}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+
+    <div className="mt-4 mb-6 flex items-center">
+      <span className="text-sm font-medium"> Never Expires</span>
+      <Controller
+        control={control}
+        name="never_expires"
+        render={({ field: { onChange, value } }) => (
+          <ToggleSwitch
+            className="ml-3"
+            value={value}
+            onChange={(val) => {
+              onChange(val);
+              setNeverExpire(val);
+            }}
+            size="sm"
+          />
+        )}
+      />
+    </div>
+  </>
+);

web/components/api-token/ApiTokenForm/ApiTokenKeySection.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@plane/ui";
+import useToast from "hooks/use-toast";
+import { Copy } from "lucide-react";
+import { Dispatch, SetStateAction } from "react";
+import { IApiToken } from "types/api_token";
+
+interface IApiTokenKeySection {
+  generatedToken: IApiToken | null | undefined;
+  renderExpiry: () => string;
+  setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
+}
+
+export const ApiTokenKeySection = ({ generatedToken, renderExpiry, setDeleteTokenModal }: IApiTokenKeySection) => {
+  const { setToastAlert } = useToast();
+
+  return generatedToken ? (
+    <div className={`mt-${generatedToken ? "8" : "16"}`}>
+      <p className="font-medium text-base pb-2">Api key created successfully</p>
+      <p className="text-sm pb-4 w-[80%] text-custom-text-400/60">
+        Save this API key somewhere safe. You will not be able to view it again once you close this page or reload this
+        page.
+      </p>
+      <Button variant="neutral-primary" className="py-3 w-[85%] flex justify-between items-center">
+        <p className="font-medium text-base">{generatedToken.token}</p>
+
+        <Copy
+          size={18}
+          color="#B9B9B9"
+          onClick={() => {
+            navigator.clipboard.writeText(generatedToken.token);
+            setToastAlert({
+              message: "The Secret key has been successfully copied to your clipboard",
+              type: "success",
+              title: "Copied to clipboard",
+            });
+          }}
+        />
+      </Button>
+      <p className="mt-2 text-sm text-custom-text-400/60">
+        {generatedToken.expired_at ? "Expires on " + renderExpiry() : "Never Expires"}
+      </p>
+      <button
+        className="border py-3 px-5 text-custom-primary-100 text-sm mt-8 rounded-md border-custom-primary-100 w-fit font-medium"
+        onClick={(e) => {
+          e.preventDefault();
+          setDeleteTokenModal(true);
+        }}
+      >
+        Revoke
+      </button>
+    </div>
+  ) : null;
+};

web/components/api-token/ApiTokenForm/ApiTokenTitle.tsx

@@ -0,0 +1,69 @@
+import { Input } from "@plane/ui";
+import { Dispatch, SetStateAction } from "react";
+import { Control, Controller, FieldErrors } from "react-hook-form";
+import { IApiToken } from "types/api_token";
+import { IApiFormFields } from "./types";
+
+interface IApiTokenTitle {
+  generatedToken: IApiToken | null | undefined;
+  errors: FieldErrors<IApiFormFields>;
+  control: Control<IApiFormFields, any>;
+  focusTitle: boolean;
+  setFocusTitle: Dispatch<SetStateAction<boolean>>;
+  setFocusDescription: Dispatch<SetStateAction<boolean>>;
+}
+
+export const ApiTokenTitle = ({
+  generatedToken,
+  errors,
+  control,
+  focusTitle,
+  setFocusTitle,
+  setFocusDescription,
+}: IApiTokenTitle) => (
+  <Controller
+    control={control}
+    name="title"
+    rules={{
+      required: "Title is required",
+      maxLength: {
+        value: 255,
+        message: "Title should be less than 255 characters",
+      },
+    }}
+    render={({ field: { value, onChange, ref } }) =>
+      focusTitle ? (
+        <Input
+          id="title"
+          name="title"
+          type="text"
+          inputSize="md"
+          onBlur={() => {
+            setFocusTitle(false);
+          }}
+          onError={() => {
+            console.log("error");
+          }}
+          autoFocus={true}
+          value={value}
+          onChange={onChange}
+          ref={ref}
+          hasError={!!errors.title}
+          placeholder="Title"
+          className="resize-none text-xl w-full"
+        />
+      ) : (
+        <p
+          onClick={() => {
+            if (generatedToken != null) return;
+            setFocusDescription(false);
+            setFocusTitle(true);
+          }}
+          className={`${value.length === 0 ? "text-custom-text-400/60" : ""} font-medium text-[24px]`}
+        >
+          {value.length != 0 ? value : "Api Title"}
+        </p>
+      )
+    }
+  />
+);

web/components/api-token/ApiTokenForm/index.tsx

@@ -0,0 +1,143 @@
+import { useForm } from "react-hook-form";
+
+import { addDays, renderDateFormat } from "helpers/date-time.helper";
+import { IApiToken } from "types/api_token";
+import { csvDownload } from "helpers/download.helper";
+import { useRouter } from "next/router";
+import { Dispatch, SetStateAction, useState } from "react";
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { ApiTokenService } from "services/api_token.service";
+import { ApiTokenTitle } from "./ApiTokenTitle";
+import { ApiTokenDescription } from "./ApiTokenDescription";
+import { ApiTokenExpiry, expiryOptions } from "./ApiTokenExpiry";
+import { Button } from "@plane/ui";
+import { ApiTokenKeySection } from "./ApiTokenKeySection";
+
+interface IApiTokenForm {
+  generatedToken: IApiToken | null | undefined;
+  setGeneratedToken: Dispatch<SetStateAction<IApiToken | null | undefined>>;
+  setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
+}
+
+const apiTokenService = new ApiTokenService();
+export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteTokenModal }: IApiTokenForm) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [neverExpires, setNeverExpire] = useState<boolean>(false);
+  const [focusTitle, setFocusTitle] = useState<boolean>(false);
+  const [focusDescription, setFocusDescription] = useState<boolean>(false);
+  const [selectedExpiry, setSelectedExpiry] = useState<number>(1);
+
+  const { setToastAlert } = useToast();
+  const { theme: themStore } = useMobxStore();
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      never_expires: false,
+      title: "",
+      description: "",
+    },
+  });
+
+  const getExpiryDate = (): string | null => {
+    if (neverExpires === true) return null;
+    return addDays({ date: new Date(), days: expiryOptions[selectedExpiry].days }).toISOString();
+  };
+
+  function renderExpiry(): string {
+    return renderDateFormat(addDays({ date: new Date(), days: expiryOptions[selectedExpiry].days }), true);
+  }
+
+  const downloadSecretKey = (token: IApiToken) => {
+    const csvData = {
+      Label: token.label,
+      Description: token.description,
+      Expiry: renderDateFormat(token.expired_at ?? null),
+      "Secret Key": token.token,
+    };
+    csvDownload(csvData, `Secret-key-${Date.now()}`);
+  };
+
+  const generateToken = async (data: any) => {
+    if (!workspaceSlug) return;
+    setLoading(true);
+    await apiTokenService
+      .createApiToken(workspaceSlug.toString(), {
+        label: data.title,
+        description: data.description,
+        expired_at: getExpiryDate(),
+      })
+      .then((res) => {
+        setGeneratedToken(res);
+        downloadSecretKey(res);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setToastAlert({
+          message: err.message,
+          type: "error",
+          title: "Error",
+        });
+      });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(generateToken, (err) => {
+        if (err.title) {
+          setFocusTitle(true);
+        }
+      })}
+      className={`${themStore.sidebarCollapsed ? "xl:w-[50%] lg:w-[60%] " : "w-[60%]"} mx-auto py-8`}
+    >
+      <div className="border-b border-custom-border-200 pb-4">
+        <ApiTokenTitle
+          generatedToken={generatedToken}
+          control={control}
+          errors={errors}
+          focusTitle={focusTitle}
+          setFocusTitle={setFocusTitle}
+          setFocusDescription={setFocusDescription}
+        />
+        {errors.title && focusTitle && <p className=" text-red-600">{errors.title.message}</p>}
+        <ApiTokenDescription
+          generatedToken={generatedToken}
+          control={control}
+          focusDescription={focusDescription}
+          setFocusTitle={setFocusTitle}
+          setFocusDescription={setFocusDescription}
+        />
+      </div>
+
+      {!generatedToken && (
+        <div className="mt-12">
+          <>
+            <ApiTokenExpiry
+              neverExpires={neverExpires}
+              selectedExpiry={selectedExpiry}
+              setSelectedExpiry={setSelectedExpiry}
+              setNeverExpire={setNeverExpire}
+              renderExpiry={renderExpiry}
+              control={control}
+            />
+            <Button variant="primary" type="submit">
+              {loading ? "generating..." : "Add Api key"}
+            </Button>
+          </>
+        </div>
+      )}
+      <ApiTokenKeySection
+        generatedToken={generatedToken}
+        renderExpiry={renderExpiry}
+        setDeleteTokenModal={setDeleteTokenModal}
+      />
+    </form>
+  );
+};

web/components/api-token/ApiTokenForm/types.ts

@@ -0,0 +1,5 @@
+export interface IApiFormFields {
+  never_expires: boolean;
+  title: string;
+  description: string;
+}

web/components/api-token/ApiTokenListItem.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+// helpers
+import { formatLongDateDistance, timeAgo } from "helpers/date-time.helper";
+// icons
+import { XCircle } from "lucide-react";
+import { IApiToken } from "types/api_token";
+
+interface IApiTokenListItem {
+  workspaceSlug: string | string[] | undefined;
+  token: IApiToken;
+}
+
+export const ApiTokenListItem = ({ token, workspaceSlug }: IApiTokenListItem) => (
+  <Link href={`/${workspaceSlug}/settings/api-tokens/${token.id}`} key={token.id}>
+    <div className="border-b flex flex-col relative justify-center items-start border-custom-border-200 py-5 hover:cursor-pointer">
+      <XCircle className="absolute right-5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto justify-self-center stroke-custom-text-400 h-[15px] w-[15px]" />
+      <div className="flex items-center px-4">
+        <span className="text-sm font-medium leading-6">{token.label}</span>
+        <span
+          className={`${
+            token.is_active ? "bg-green-600/10 text-green-600" : "bg-custom-text-400/20 text-custom-text-400"
+          }  flex items-center px-2 h-4 rounded-sm max-h-fit ml-2 text-xs font-medium`}
+        >
+          {token.is_active ? "Active" : "Expired"}
+        </span>
+      </div>
+      <div className="flex items-center px-4 w-full">
+        {token.description.length != 0 && (
+          <p className="text-sm mb-1 mr-3 font-medium leading-6 truncate max-w-[50%]">{token.description}</p>
+        )}
+        {
+          <p className="text-xs mb-1 leading-6 text-custom-text-400">
+            {token.is_active
+              ? token.expired_at === null
+                ? "Never Expires"
+                : `Expires in ${formatLongDateDistance(token.expired_at!)}`
+              : timeAgo(token.expired_at)}
+          </p>
+        }
+      </div>
+    </div>
+  </Link>
+);

web/components/api-token/delete-token-modal.tsx

@@ -0,0 +1,111 @@
+//react
+import { useState, Fragment, FC } from "react";
+//next
+import { useRouter } from "next/router";
+//ui
+import { Button } from "@plane/ui";
+//hooks
+import useToast from "hooks/use-toast";
+//services
+import { ApiTokenService } from "services/api_token.service";
+//headless ui
+import { Dialog, Transition } from "@headlessui/react";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  tokenId?: string;
+};
+
+const apiTokenService = new ApiTokenService();
+const DeleteTokenModal: FC<Props> = ({ isOpen, handleClose, tokenId }) => {
+  const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
+  const { setToastAlert } = useToast();
+  const router = useRouter();
+  const { workspaceSlug, tokenId: tokenIdFromQuery } = router.query;
+
+  const handleDeletion = () => {
+    if (!workspaceSlug || (!tokenIdFromQuery && !tokenId)) return;
+
+    const token = tokenId || tokenIdFromQuery;
+
+    setDeleteLoading(true);
+    apiTokenService
+      .deleteApiToken(workspaceSlug.toString(), token!.toString())
+      .then(() => {
+        setToastAlert({
+          message: "Token deleted successfully",
+          type: "success",
+          title: "Success",
+        });
+        router.replace(`/${workspaceSlug}/settings/api-tokens/`);
+      })
+      .catch((err) => {
+        setToastAlert({
+          message: err?.message,
+          type: "error",
+          title: "Error",
+        });
+      })
+      .finally(() => {
+        setDeleteLoading(false);
+        handleClose();
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <div className="flex flex-col gap-3 p-6">
+                  <div className="flex w-full items-center justify-start">
+                    <h3 className="text-xl font-semibold 2xl:text-2xl">Are you sure you want to revoke access?</h3>
+                  </div>
+                  <span>
+                    <p className="text-base font-normal text-custom-text-400">
+                      Any applications Using this developer key will no longer have the access to Plane Data. This
+                      Action cannot be undone.
+                    </p>
+                  </span>
+                  <div className="flex justify-end mt-2 gap-2">
+                    <Button variant="neutral-primary" onClick={handleClose} disabled={deleteLoading}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleDeletion} loading={deleteLoading} disabled={deleteLoading}>
+                      {deleteLoading ? "Revoking..." : "Revoke"}
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default DeleteTokenModal;

web/components/api-token/empty-state.tsx

@@ -0,0 +1,36 @@
+// react
+import React from "react";
+// next
+import Image from "next/image";
+import { useRouter } from "next/router";
+// ui
+import { Button } from "@plane/ui";
+// assets
+import emptyApiTokens from "public/empty-state/api-token.svg";
+
+const ApiTokenEmptyState = () => {
+  const router = useRouter();
+  return (
+    <div className={`flex items-center justify-center mx-auto border bg-custom-background-90 py-10 px-16 w-full`}>
+      <div className="text-center flex flex-col items-center w-full">
+        <Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
+        <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">No API Tokens</h6>
+        {
+          <p className="text-custom-text-300 mb-7 sm:mb-8">
+            Create API tokens for safe and easy data sharing with external apps, maintaining control and security
+          </p>
+        }
+        <Button
+          className="flex items-center gap-1.5"
+          onClick={() => {
+            router.push(`${router.asPath}/create/`);
+          }}
+        >
+          Add Token
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ApiTokenEmptyState;

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

@@ -0,0 +1,117 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Button } from "@plane/ui";
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { AlertTriangle } from "lucide-react";
+import { useRouter } from "next/router";
+import React, { FC, useState } from "react";
+import { useForm } from "react-hook-form";
+
+interface IDeleteWebhook {
+  isOpen: boolean;
+  webhook_url: string;
+  onClose: () => void;
+}
+
+export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
+  const { isOpen, onClose } = props;
+
+  const router = useRouter();
+
+  const { webhook: webhookStore } = useMobxStore();
+
+  const { setToastAlert } = useToast();
+
+  const [deleting, setDelete] = useState(false);
+
+  const { workspaceSlug, webhookId } = router.query;
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleDelete = async () => {
+    setDelete(true);
+    if (!workspaceSlug || !webhookId) return;
+    webhookStore
+      .remove(workspaceSlug.toString(), webhookId.toString())
+      .then(() => {
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Successfully deleted",
+        });
+        router.replace(`/${workspaceSlug}/settings/webhooks/`);
+      })
+      .catch((error) => {
+        console.log(error);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.error,
+        });
+      })
+      .finally(() => {
+        setDelete(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-6">
+                <div className="flex w-full items-center justify-start gap-6">
+                  <span className="place-items-center rounded-full bg-red-500/20 p-4">
+                    <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>
+                  </span>
+                </div>
+
+                <span>
+                  <p className="text-sm leading-7 text-custom-text-200">
+                    Are you sure you want to delete workspace <span className="break-words font-semibold" />? All of the
+                    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}>
+                    {deleting ? "Deleting..." : "Delete Webhook"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import Link from "next/link";
+import { Button } from "@plane/ui";
+import Image from "next/image";
+import EmptyWebhookLogo from "public/empty-state/issue.svg";
+
+interface IWebHookLists {
+  workspaceSlug: string;
+}
+
+export const EmptyWebhooks: FC<IWebHookLists> = (props) => {
+  const { workspaceSlug } = props;
+
+  return (
+    <div className="flex items-start justify-center">
+      <div className="flex p-10 flex-col items-center justify-center rounded-[4px] border border-custom-border-200 bg-custom-color-background-90">
+        <Image width="178" height="116" src={EmptyWebhookLogo} alt="empty-webhook image" />
+
+        <div className="mt-4 text-base font-semibold">No Webhooks</div>
+        <p className="text-sm text-neutral-600">Create webhooks to receive real-time updates and automate actions</p>
+        <Link href={`/${workspaceSlug}/settings/webhooks/create`}>
+          <Button variant="primary" className="mt-2">
+            Add Webhook
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,50 @@
+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/generate-key.tsx

@@ -0,0 +1,139 @@
+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.tsx

@@ -0,0 +1,101 @@
+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 });
+  }, [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/input.tsx

@@ -0,0 +1,33 @@
+import { Control, Controller, FieldErrors } from "react-hook-form";
+import { Input } from "@plane/ui";
+import { IExtendedWebhook } from "types/webhook";
+
+interface IWebHookInput {
+  control: Control<IExtendedWebhook, any>;
+  errors: FieldErrors<IExtendedWebhook>;
+}
+
+export const WebHookInput = ({ control, errors }: IWebHookInput) => (
+  <div>
+    <div className="font-medium text-sm">URL</div>
+    <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
+          className="w-full h-11"
+          onChange={onChange}
+          value={value}
+          id="url"
+          autoComplete="off"
+          placeholder="Enter URL"
+        />
+      )}
+    />
+    {errors.url && <p className="py-2 text-sm text-red-500">{errors.url.message}</p>}
+  </div>
+);

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,54 @@
+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/submit.tsx

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,26 @@
+import { Control, Controller } from "react-hook-form";
+import { IExtendedWebhook } from "types/webhook";
+import { ToggleSwitch } from "@plane/ui";
+
+interface IWebHookToggle {
+  control: Control<IExtendedWebhook, any>;
+}
+
+export const WebHookToggle = ({ control }: IWebHookToggle) => (
+  <div className="flex gap-6">
+    <div className="text-sm"> Enable webhook </div>
+    <Controller
+      control={control}
+      name="is_active"
+      render={({ field: { onChange, value } }) => (
+        <ToggleSwitch
+          value={value}
+          onChange={(val: boolean) => {
+            onChange(val);
+          }}
+          size="sm"
+        />
+      )}
+    />
+  </div>
+);

web/components/web-hooks/index.ts

@@ -0,0 +1,4 @@
+export * from "./empty-webhooks";
+export * from "./webhooks-list";
+export * from "./webhooks-list-item";
+export * from "./form";

web/components/web-hooks/utils.ts

@@ -0,0 +1,21 @@
+import { renderDateFormat } from "helpers/date-time.helper";
+import { IWebhook, IWorkspace } from "types";
+
+export const getCurrentHookAsCSV = (
+  currentWorkspace: IWorkspace | null,
+  webhook: IWebhook | undefined,
+  secretKey: string | undefined
+) => ({
+  id: webhook?.id || "",
+  url: webhook?.url || "",
+  created_at: renderDateFormat(webhook?.created_at),
+  updated_at: renderDateFormat(webhook?.updated_at),
+  is_active: webhook?.is_active?.toString() || "",
+  secret_key: secretKey || "",
+  project: webhook?.project?.toString() || "",
+  issue: webhook?.issue?.toString() || "",
+  module: webhook?.module?.toString() || "",
+  cycle: webhook?.cycle?.toString() || "",
+  issue_comment: webhook?.issue_comment?.toString() || "",
+  workspace: currentWorkspace?.name || "",
+});

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

@@ -0,0 +1,42 @@
+import { FC, useState } from "react";
+import { ToggleSwitch } from "@plane/ui";
+import { Pencil, XCircle } from "lucide-react";
+import { IWebhook } from "types";
+import Link from "next/link";
+import { RootStore } from "store/root";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+interface IWebhookListItem {
+  workspaceSlug: string;
+  webhook: IWebhook;
+}
+
+export const WebhooksListItem: FC<IWebhookListItem> = (props) => {
+  const { workspaceSlug, webhook } = props;
+
+  const { webhook: webhookStore }: RootStore = useMobxStore();
+
+  const handleToggle = () => {
+    if (webhook.id) {
+      webhookStore.update(workspaceSlug, webhook.id, { ...webhook, is_active: !webhook.is_active }).catch(() => {});
+    }
+  };
+
+  return (
+    <div>
+      <Link href={`/${workspaceSlug}/settings/webhooks/${webhook?.id}`}>
+        <div className="flex cursor-pointer justify-between px-3.5 py-[18px]">
+          <div>
+            <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>
+        </div>
+      </Link>
+    </div>
+  );
+};

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

@@ -0,0 +1,38 @@
+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";
+// components
+import { WebhooksListItem } from "./webhooks-list-item";
+
+interface IWebHookLists {
+  workspaceSlug: string;
+}
+
+export const WebhookLists: FC<IWebHookLists> = observer((props) => {
+  const { workspaceSlug } = props;
+  const {
+    webhook: { webhooks },
+  }: RootStore = useMobxStore();
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-4 py-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>
+
+      <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>
+    </>
+  );
+});