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>
This commit is contained in:
Bavisetti Narayan
sriram veeraghanta
parent
20fd57b793
commit
870c4403e4
94 changed files with 3743 additions and 163 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
110
web/components/api-token/ApiTokenForm/ApiTokenExpiry.tsx
Normal file
110
web/components/api-token/ApiTokenForm/ApiTokenExpiry.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
53
web/components/api-token/ApiTokenForm/ApiTokenKeySection.tsx
Normal file
53
web/components/api-token/ApiTokenForm/ApiTokenKeySection.tsx
Normal file
|
|
@ -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;
|
||||
};
|
||||
69
web/components/api-token/ApiTokenForm/ApiTokenTitle.tsx
Normal file
69
web/components/api-token/ApiTokenForm/ApiTokenTitle.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
143
web/components/api-token/ApiTokenForm/index.tsx
Normal file
143
web/components/api-token/ApiTokenForm/index.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
5
web/components/api-token/ApiTokenForm/types.ts
Normal file
5
web/components/api-token/ApiTokenForm/types.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export interface IApiFormFields {
|
||||
never_expires: boolean;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue