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;