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;
|
||||
}
|
||||
43
web/components/api-token/ApiTokenListItem.tsx
Normal file
43
web/components/api-token/ApiTokenListItem.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
111
web/components/api-token/delete-token-modal.tsx
Normal file
111
web/components/api-token/delete-token-modal.tsx
Normal file
|
|
@ -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;
|
||||
36
web/components/api-token/empty-state.tsx
Normal file
36
web/components/api-token/empty-state.tsx
Normal file
|
|
@ -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;
|
||||
117
web/components/web-hooks/delete-webhook-modal.tsx
Normal file
117
web/components/web-hooks/delete-webhook-modal.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
29
web/components/web-hooks/empty-webhooks.tsx
Normal file
29
web/components/web-hooks/empty-webhooks.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
50
web/components/web-hooks/form/edit-form.tsx
Normal file
50
web/components/web-hooks/form/edit-form.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
139
web/components/web-hooks/form/generate-key.tsx
Normal file
139
web/components/web-hooks/form/generate-key.tsx
Normal file
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
101
web/components/web-hooks/form/index.tsx
Normal file
101
web/components/web-hooks/form/index.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
33
web/components/web-hooks/form/input.tsx
Normal file
33
web/components/web-hooks/form/input.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
70
web/components/web-hooks/form/option.tsx
Normal file
70
web/components/web-hooks/form/option.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
54
web/components/web-hooks/form/options.tsx
Normal file
54
web/components/web-hooks/form/options.tsx
Normal file
|
|
@ -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>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
13
web/components/web-hooks/form/submit.tsx
Normal file
13
web/components/web-hooks/form/submit.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
26
web/components/web-hooks/form/toggle.tsx
Normal file
26
web/components/web-hooks/form/toggle.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
4
web/components/web-hooks/index.ts
Normal file
4
web/components/web-hooks/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export * from "./empty-webhooks";
|
||||
export * from "./webhooks-list";
|
||||
export * from "./webhooks-list-item";
|
||||
export * from "./form";
|
||||
21
web/components/web-hooks/utils.ts
Normal file
21
web/components/web-hooks/utils.ts
Normal file
|
|
@ -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 || "",
|
||||
});
|
||||
42
web/components/web-hooks/webhooks-list-item.tsx
Normal file
42
web/components/web-hooks/webhooks-list-item.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
38
web/components/web-hooks/webhooks-list.tsx
Normal file
38
web/components/web-hooks/webhooks-list.tsx
Normal file
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -300,3 +300,8 @@ export const ISSUE_REACTION_LIST = (workspaceSlug: string, projectId: string, is
|
|||
`ISSUE_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${issueId.toUpperCase()}`;
|
||||
export const COMMENT_REACTION_LIST = (workspaceSlug: string, projectId: string, commendId: string) =>
|
||||
`COMMENT_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${commendId.toUpperCase()}`;
|
||||
|
||||
// api-tokens
|
||||
export const API_TOKENS_LIST = (workspaceSlug: string) => `API_TOKENS_LIST_${workspaceSlug.toUpperCase()}`;
|
||||
export const API_TOKEN_DETAILS = (workspaceSlug: string, tokenId: string) =>
|
||||
`API_TOKEN_DETAILS_${workspaceSlug.toUpperCase()}_${tokenId.toUpperCase()}`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
export const renderDateFormat = (date: string | Date | null) => {
|
||||
export const addDays = ({ date, days }: { date: Date; days: number }): Date => {
|
||||
date.setDate(date.getDate() + days);
|
||||
return date;
|
||||
};
|
||||
|
||||
export const renderDateFormat = (date: string | Date | null | undefined, dayFirst: boolean = false) => {
|
||||
if (!date) return "N/A";
|
||||
|
||||
var d = new Date(date),
|
||||
|
|
@ -9,7 +14,7 @@ export const renderDateFormat = (date: string | Date | null) => {
|
|||
if (month.length < 2) month = "0" + month;
|
||||
if (day.length < 2) day = "0" + day;
|
||||
|
||||
return [year, month, day].join("-");
|
||||
return dayFirst ? [day, month, year].join("-") : [year, month, day].join("-");
|
||||
};
|
||||
|
||||
export const renderShortNumericDateFormat = (date: string | Date) =>
|
||||
|
|
@ -130,6 +135,39 @@ export const formatDateDistance = (date: string | Date) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const formatLongDateDistance = (date: string | Date) => {
|
||||
const today = new Date();
|
||||
const eventDate = new Date(date);
|
||||
const timeDiff = Math.abs(eventDate.getTime() - today.getTime());
|
||||
const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
||||
|
||||
if (days < 1) {
|
||||
const hours = Math.ceil(timeDiff / (1000 * 3600));
|
||||
if (hours < 1) {
|
||||
const minutes = Math.ceil(timeDiff / (1000 * 60));
|
||||
if (minutes < 1) {
|
||||
return "Just now";
|
||||
} else {
|
||||
return `${minutes} minutes`;
|
||||
}
|
||||
} else {
|
||||
return `${hours} hours`;
|
||||
}
|
||||
} else if (days < 7) {
|
||||
if (days === 1) return `${days} day`;
|
||||
return `${days} days`;
|
||||
} else if (days < 30) {
|
||||
if (Math.floor(days / 7) === 1) return `${Math.floor(days / 7)} week`;
|
||||
return `${Math.floor(days / 7)} weeks`;
|
||||
} else if (days < 365) {
|
||||
if (Math.floor(days / 30) === 1) return `${Math.floor(days / 30)} month`;
|
||||
return `${Math.floor(days / 30)} months`;
|
||||
} else {
|
||||
if (Math.floor(days / 365) === 1) return `${Math.floor(days / 365)} year`;
|
||||
return `${Math.floor(days / 365)} years`;
|
||||
}
|
||||
};
|
||||
|
||||
export const getDateRangeStatus = (startDate: string | null | undefined, endDate: string | null | undefined) => {
|
||||
if (!startDate || !endDate) return "draft";
|
||||
|
||||
|
|
|
|||
17
web/helpers/download.helper.ts
Normal file
17
web/helpers/download.helper.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export const csvDownload = (data: Array<Array<string>> | { [key: string]: string }, name: string) => {
|
||||
let rows = [];
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
rows = [...data];
|
||||
} else {
|
||||
rows = [Object.keys(data), Object.values(data)];
|
||||
}
|
||||
|
||||
let csvContent = "data:text/csv;charset=utf-8," + rows.map((e) => e.join(",")).join("\n");
|
||||
var encodedUri = encodeURI(csvContent);
|
||||
var link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", `${name}.csv`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
};
|
||||
13
web/helpers/generate-random-string.ts
Normal file
13
web/helpers/generate-random-string.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
|
||||
export const generateRandomString = (length: number) => {
|
||||
let result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const charactersLength = characters.length;
|
||||
let counter = 0;
|
||||
while (counter < length) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
counter += 1;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
|
@ -1,38 +1,66 @@
|
|||
import React from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import { RootStore } from "store/root";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
export enum EUserWorkspaceRoles {
|
||||
GUEST = 5,
|
||||
MEMBER = 15,
|
||||
ADMIN = 20,
|
||||
}
|
||||
|
||||
export const WorkspaceSettingsSidebar = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { user: userStore }: RootStore = useMobxStore();
|
||||
|
||||
const workspaceMemberInfo = userStore.currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
|
||||
|
||||
const workspaceLinks: Array<{
|
||||
label: string;
|
||||
href: string;
|
||||
access: EUserWorkspaceRoles;
|
||||
}> = [
|
||||
{
|
||||
label: "General",
|
||||
href: `/${workspaceSlug}/settings`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
},
|
||||
{
|
||||
label: "Members",
|
||||
href: `/${workspaceSlug}/settings/members`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
},
|
||||
{
|
||||
label: "Billing & Plans",
|
||||
href: `/${workspaceSlug}/settings/billing`,
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
{
|
||||
label: "Integrations",
|
||||
href: `/${workspaceSlug}/settings/integrations`,
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
{
|
||||
label: "Imports",
|
||||
href: `/${workspaceSlug}/settings/imports`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
},
|
||||
{
|
||||
label: "Exports",
|
||||
href: `/${workspaceSlug}/settings/exports`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
},
|
||||
{
|
||||
label: "Webhooks",
|
||||
href: `/${workspaceSlug}/settings/webhooks`,
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
{
|
||||
label: "API Tokens",
|
||||
href: `/${workspaceSlug}/settings/api-tokens`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -54,26 +82,36 @@ export const WorkspaceSettingsSidebar = () => {
|
|||
},
|
||||
];
|
||||
|
||||
function highlightSetting(label: string, link: string): boolean {
|
||||
if (router.asPath.startsWith(link) && (label === "Imports" || label === "Api tokens")) {
|
||||
return true;
|
||||
}
|
||||
return link === router.asPath;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 w-80 px-5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs text-custom-sidebar-text-400 font-semibold">SETTINGS</span>
|
||||
<div className="flex flex-col gap-1 w-full">
|
||||
{workspaceLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href}>
|
||||
<a>
|
||||
<div
|
||||
className={`px-4 py-2 text-sm font-medium rounded-md ${
|
||||
router.pathname.split("/")?.[3] === link.href.split("/")?.[3]
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
{workspaceLinks.map(
|
||||
(link) =>
|
||||
workspaceMemberInfo >= link.access && (
|
||||
<Link key={link.href} href={link.href}>
|
||||
<a>
|
||||
<div
|
||||
className={`px-4 py-2 text-sm font-medium rounded-md ${
|
||||
router.pathname.split("/")?.[3] === link.href.split("/")?.[3]
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
|
|
|
|||
70
web/pages/[workspaceSlug]/settings/api-tokens/[tokenId].tsx
Normal file
70
web/pages/[workspaceSlug]/settings/api-tokens/[tokenId].tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
// react
|
||||
import { useState } from "react";
|
||||
// next
|
||||
import { NextPage } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||
// components
|
||||
import DeleteTokenModal from "components/api-token/delete-token-modal";
|
||||
import { WorkspaceSettingHeader } from "components/headers";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
// mobx
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// services
|
||||
import { ApiTokenService } from "services/api_token.service";
|
||||
// helpers
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
// constants
|
||||
import { API_TOKEN_DETAILS } from "constants/fetch-keys";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
|
||||
const apiTokenService = new ApiTokenService();
|
||||
const ApiTokenDetail: NextPage = () => {
|
||||
const { theme: themStore } = useMobxStore();
|
||||
const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, tokenId } = router.query;
|
||||
|
||||
const { data: token } = useSWR(
|
||||
workspaceSlug && tokenId ? API_TOKEN_DETAILS(workspaceSlug.toString(), tokenId.toString()) : null,
|
||||
() =>
|
||||
workspaceSlug && tokenId ? apiTokenService.retrieveApiToken(workspaceSlug.toString(), tokenId.toString()) : null
|
||||
);
|
||||
|
||||
return (
|
||||
<AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
|
||||
<WorkspaceSettingLayout>
|
||||
<DeleteTokenModal isOpen={deleteTokenModal} handleClose={() => setDeleteTokenModal(false)} />
|
||||
{token ? (
|
||||
<div className={`${themStore.sidebarCollapsed ? "xl:w-[50%] lg:w-[60%] " : "w-[60%]"} mx-auto py-8`}>
|
||||
<p className={"font-medium text-[24px]"}>{token.label}</p>
|
||||
<p className={"text-custom-text-300 text-lg pt-2"}>{token.description}</p>
|
||||
<div className="bg-custom-border-100 h-[1px] w-full mt-4" />
|
||||
<p className="mt-2 text-sm text-custom-text-400/60">
|
||||
{token.expired_at ? "Expires on " + renderDateFormat(token.expired_at, true) : "Never Expires"}
|
||||
</p>
|
||||
|
||||
<button
|
||||
className="border py-3 px-5 text-custom-primary-100 text-sm mt-6 rounded-md border-custom-primary-100 w-fit font-medium"
|
||||
onClick={() => {
|
||||
setDeleteTokenModal(true);
|
||||
}}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center pr-9 py-8 w-full min-h-full items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</WorkspaceSettingLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApiTokenDetail;
|
||||
40
web/pages/[workspaceSlug]/settings/api-tokens/create.tsx
Normal file
40
web/pages/[workspaceSlug]/settings/api-tokens/create.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// react
|
||||
import { useState } from "react";
|
||||
// next
|
||||
|
||||
import { NextPage } from "next";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout/layout";
|
||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||
//types
|
||||
import { IApiToken } from "types/api_token";
|
||||
//Mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { WorkspaceSettingHeader } from "components/headers";
|
||||
import DeleteTokenModal from "components/api-token/delete-token-modal";
|
||||
import { ApiTokenForm } from "components/api-token/ApiTokenForm";
|
||||
|
||||
const CreateApiToken: NextPage = () => {
|
||||
const [generatedToken, setGeneratedToken] = useState<IApiToken | null>();
|
||||
const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
|
||||
<WorkspaceSettingLayout>
|
||||
<DeleteTokenModal
|
||||
isOpen={deleteTokenModal}
|
||||
handleClose={() => setDeleteTokenModal(false)}
|
||||
tokenId={generatedToken?.id}
|
||||
/>
|
||||
<ApiTokenForm
|
||||
generatedToken={generatedToken}
|
||||
setGeneratedToken={setGeneratedToken}
|
||||
setDeleteTokenModal={setDeleteTokenModal}
|
||||
/>
|
||||
</WorkspaceSettingLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default observer(CreateApiToken);
|
||||
68
web/pages/[workspaceSlug]/settings/api-tokens/index.tsx
Normal file
68
web/pages/[workspaceSlug]/settings/api-tokens/index.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
// react
|
||||
import React from "react";
|
||||
// next
|
||||
import type { NextPage } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||
// component
|
||||
import { WorkspaceSettingHeader } from "components/headers";
|
||||
import ApiTokenEmptyState from "components/api-token/empty-state";
|
||||
// ui
|
||||
import { Spinner, Button } from "@plane/ui";
|
||||
// services
|
||||
import { ApiTokenService } from "services/api_token.service";
|
||||
// constants
|
||||
import { API_TOKENS_LIST } from "constants/fetch-keys";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
import { ApiTokenListItem } from "components/api-token/ApiTokenListItem";
|
||||
|
||||
const apiTokenService = new ApiTokenService();
|
||||
const Api: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: tokens, isLoading } = useSWR(workspaceSlug ? API_TOKENS_LIST(workspaceSlug.toString()) : null, () =>
|
||||
workspaceSlug ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null
|
||||
);
|
||||
|
||||
return (
|
||||
<AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
|
||||
<WorkspaceSettingLayout>
|
||||
{!isLoading ? (
|
||||
tokens && tokens.length > 0 ? (
|
||||
<section className="pr-9 py-8 w-full overflow-y-auto">
|
||||
<div className="flex items-center justify-between py-3.5 border-b border-custom-border-200 mb-2">
|
||||
<h3 className="text-xl font-medium">Api Tokens</h3>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
router.push(`${router.asPath}/create/`);
|
||||
}}
|
||||
>
|
||||
Add Api Token
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
{tokens?.map((token) => (
|
||||
<ApiTokenListItem token={token} workspaceSlug={workspaceSlug} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<div className="mx-auto py-8">
|
||||
<ApiTokenEmptyState />
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex justify-center pr-9 py-8 w-full min-h-full items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</WorkspaceSettingLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
export default Api;
|
||||
77
web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
Normal file
77
web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import type { NextPage } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// layout
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||
// components
|
||||
import { WorkspaceSettingHeader } from "components/headers";
|
||||
import { WebHookForm } from "components/web-hooks";
|
||||
// hooks
|
||||
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";
|
||||
import { WebHookFormTypes } from "components/web-hooks/form";
|
||||
|
||||
const Webhooks: NextPage = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, webhookId, isCreated } = router.query as {
|
||||
workspaceSlug: string;
|
||||
webhookId: string;
|
||||
isCreated: string;
|
||||
};
|
||||
|
||||
const { webhook: webhookStore }: RootStore = useMobxStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (isCreated !== "true") {
|
||||
webhookStore.clearSecretKey();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { isLoading } = useSWR(
|
||||
workspaceSlug && webhookId ? `WEBHOOKS_DETAIL_${workspaceSlug}_${webhookId}` : null,
|
||||
workspaceSlug && webhookId
|
||||
? async () => {
|
||||
await webhookStore.fetchById(workspaceSlug, webhookId);
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
const onSubmit = (data: IExtendedWebhook): Promise<IWebhook> => {
|
||||
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" />}>
|
||||
<WorkspaceSettingLayout>
|
||||
<div className="w-full overflow-y-auto py-3 pr-4">
|
||||
{isLoading ? (
|
||||
<div className="flex w-full h-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<WebHookForm type={WebHookFormTypes.EDIT} initialData={initialPayload} onSubmit={onSubmit} />
|
||||
)}
|
||||
</div>
|
||||
</WorkspaceSettingLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
});
|
||||
|
||||
export default Webhooks;
|
||||
89
web/pages/[workspaceSlug]/settings/webhooks/create.tsx
Normal file
89
web/pages/[workspaceSlug]/settings/webhooks/create.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import type { NextPage } from "next";
|
||||
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";
|
||||
import useToast from "hooks/use-toast";
|
||||
import { WebHookFormTypes } from "components/web-hooks/form";
|
||||
import { getCurrentHookAsCSV } from "components/web-hooks/utils";
|
||||
|
||||
const Webhooks: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const { workspaceSlug } = router.query as { workspaceSlug: string };
|
||||
|
||||
const initialWebhookPayload: IWebhook = {
|
||||
url: "",
|
||||
is_active: true,
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
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" />}>
|
||||
<WorkspaceSettingLayout>
|
||||
<div className="w-full overflow-y-auto py-3 pr-4">
|
||||
<WebHookForm type={WebHookFormTypes.CREATE} initialData={initialWebhookPayload} onSubmit={onSubmit} />
|
||||
</div>
|
||||
</WorkspaceSettingLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Webhooks;
|
||||
58
web/pages/[workspaceSlug]/settings/webhooks/index.tsx
Normal file
58
web/pages/[workspaceSlug]/settings/webhooks/index.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from "react";
|
||||
import type { NextPage } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// layout
|
||||
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";
|
||||
// hooks
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// types
|
||||
import { RootStore } from "store/root";
|
||||
import { Spinner } from "@plane/ui";
|
||||
|
||||
const WebhooksPage: NextPage = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query as { workspaceSlug: string };
|
||||
|
||||
const {
|
||||
webhook: { fetchWebhooks, webhooks, loader },
|
||||
}: RootStore = useMobxStore();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
|
||||
workspaceSlug ? () => fetchWebhooks(workspaceSlug) : null
|
||||
);
|
||||
|
||||
return (
|
||||
<AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
|
||||
<WorkspaceSettingLayout>
|
||||
<div className="w-full overflow-y-auto py-3 pr-4">
|
||||
{loader ? (
|
||||
<div className="flex h-full w-ful items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{Object.keys(webhooks).length > 0 ? (
|
||||
<WebhookLists workspaceSlug={workspaceSlug} />
|
||||
) : (
|
||||
<div className="flex justify-center w-full h-full items-center">
|
||||
<div className="w-auto h-fit">
|
||||
<EmptyWebhooks workspaceSlug={workspaceSlug} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</WorkspaceSettingLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
});
|
||||
|
||||
export default WebhooksPage;
|
||||
49
web/public/empty-state/api-token.svg
Normal file
49
web/public/empty-state/api-token.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<svg width="128" height="130" viewBox="0 0 128 130" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M60.5893 36.7461C84.3294 36.7461 103.575 55.9912 103.575 79.7313C103.575 103.471 84.3294 122.716 60.5893 122.716C36.8493 122.716 3.99396 99.179 17.6042 79.7313C31.2144 60.2836 36.8493 36.7461 60.5893 36.7461Z" fill="#F2F2F2"/>
|
||||
<path d="M118.122 38.7891C117.736 38.7891 117.423 39.1025 117.423 39.488V61.8543C117.423 62.2398 117.736 62.5532 118.122 62.5532C118.507 62.5532 118.821 62.2398 118.821 61.8543V39.488C118.821 39.1025 118.507 38.7891 118.122 38.7891Z" fill="#525252"/>
|
||||
<path d="M0.698946 22.0195C0.313467 22.0195 0 22.333 0 22.7185V28.31C0 28.6955 0.313467 29.009 0.698946 29.009C1.08443 29.009 1.39789 28.6955 1.39789 28.31V22.7185C1.39789 22.333 1.08443 22.0195 0.698946 22.0195Z" fill="#525252"/>
|
||||
<path d="M0.698946 38.7891C0.313467 38.7891 0 39.1025 0 39.488V50.3217C0 50.7072 0.313467 51.0206 0.698946 51.0206C1.08443 51.0206 1.39789 50.7072 1.39789 50.3217V39.488C1.39789 39.1025 1.08443 38.7891 0.698946 38.7891Z" fill="#525252"/>
|
||||
<path d="M0.698946 54.168C0.313467 54.168 0 54.4814 0 54.8669V65.7006C0 66.0861 0.313467 66.3995 0.698946 66.3995C1.08443 66.3995 1.39789 66.0861 1.39789 65.7006V54.8669C1.39789 54.4814 1.08443 54.168 0.698946 54.168Z" fill="#525252"/>
|
||||
<path d="M63.385 0C62.9995 0 62.686 0.313467 62.686 0.698946V11.5326C62.686 11.9181 62.9995 12.2316 63.385 12.2316C63.7705 12.2316 64.0839 11.9181 64.0839 11.5326V0.698946C64.0839 0.313467 63.7705 0 63.385 0Z" fill="#525252"/>
|
||||
<path d="M41.7948 76.8354H17.604V76.1365H41.7948C43.8962 76.1365 45.6059 74.4267 45.6059 72.325V55.9688H46.3048V72.325C46.3048 74.812 44.2817 76.8354 41.7948 76.8354Z" fill="#396AE6"/>
|
||||
<path d="M87.9532 112.289H32.9336V112.988H87.9532V112.289Z" fill="#396AE6"/>
|
||||
<path d="M122.861 72.1605H93.4733C91.8874 72.1605 90.5972 70.8703 90.5972 69.2844V40.2551C90.5972 38.6691 91.8874 37.3789 93.4733 37.3789H122.861C124.447 37.3789 125.737 38.6691 125.737 40.2551V69.2844C125.737 70.8703 124.447 72.1605 122.861 72.1605Z" fill="#E6E6E6"/>
|
||||
<path d="M98.9462 38.2344C94.8084 38.2344 91.4541 41.5887 91.4541 45.7265V68.667C91.4541 70.1223 92.6339 71.3021 94.0892 71.3021H112.059C119.14 71.3021 124.88 65.5618 124.88 58.4809V40.8695C124.88 39.4142 123.701 38.2344 122.245 38.2344L98.9462 38.2344Z" fill="white"/>
|
||||
<path d="M116.038 46.6717H100.235C99.9333 46.6717 99.688 46.4263 99.688 46.1248C99.688 45.8233 99.9333 45.5781 100.235 45.5781H116.038C116.34 45.5781 116.585 45.8233 116.585 46.1248C116.585 46.4263 116.34 46.6717 116.038 46.6717Z" fill="#E6E6E6"/>
|
||||
<path d="M116.038 58.3318H100.235C99.9333 58.3318 99.688 58.0865 99.688 57.785C99.688 57.4835 99.9333 57.2383 100.235 57.2383H116.038C116.34 57.2383 116.585 57.4835 116.585 57.785C116.585 58.0865 116.34 58.3318 116.038 58.3318Z" fill="#E6E6E6"/>
|
||||
<path d="M122.456 52.5076H93.8173C93.5158 52.5076 93.2705 52.2623 93.2705 51.9608C93.2705 51.6593 93.5158 51.4141 93.8173 51.4141H122.456C122.757 51.4141 123.002 51.6593 123.002 51.9608C123.002 52.2623 122.757 52.5076 122.456 52.5076Z" fill="#E6E6E6"/>
|
||||
<path d="M122.748 63.0701H112.402C112.101 63.0701 111.855 62.8248 111.855 62.5233C111.855 62.2218 112.101 61.9766 112.402 61.9766H122.748C123.049 61.9766 123.295 62.2218 123.295 62.5233C123.295 62.8248 123.049 63.0701 122.748 63.0701Z" fill="#E6E6E6"/>
|
||||
<path d="M61.1334 130.002H37.7975C36.5382 130.002 35.5137 128.977 35.5137 127.718V104.667C35.5137 103.407 36.5382 102.383 37.7975 102.383H61.1334C62.3928 102.383 63.4173 103.407 63.4173 104.667V127.718C63.4173 128.977 62.3928 130.002 61.1334 130.002Z" fill="#E6E6E6"/>
|
||||
<path d="M42.1436 103.062C38.8579 103.062 36.1943 105.726 36.1943 109.012V127.228C36.1943 128.384 37.1312 129.321 38.2868 129.321H52.5561C58.1788 129.321 62.737 124.762 62.737 119.14V105.155C62.737 103.999 61.8002 103.063 60.6445 103.063L42.1436 103.062Z" fill="white"/>
|
||||
<path d="M55.7156 109.759H43.1666C42.9272 109.759 42.7324 109.564 42.7324 109.325C42.7324 109.085 42.9272 108.891 43.1666 108.891H55.7156C55.955 108.891 56.1497 109.085 56.1497 109.325C56.1497 109.564 55.955 109.759 55.7156 109.759Z" fill="#E6E6E6"/>
|
||||
<path d="M55.7156 119.017H43.1666C42.9272 119.017 42.7324 118.822 42.7324 118.583C42.7324 118.343 42.9272 118.148 43.1666 118.148H55.7156C55.955 118.148 56.1497 118.343 56.1497 118.583C56.1497 118.822 55.955 119.017 55.7156 119.017Z" fill="#E6E6E6"/>
|
||||
<path d="M60.8116 114.392H38.0709C37.8315 114.392 37.6367 114.197 37.6367 113.958C37.6367 113.718 37.8315 113.523 38.0709 113.523H60.8116C61.051 113.523 61.2457 113.718 61.2457 113.958C61.2457 114.197 61.051 114.392 60.8116 114.392Z" fill="#E6E6E6"/>
|
||||
<path d="M61.0434 122.786H52.8283C52.5889 122.786 52.394 122.592 52.394 122.352C52.394 122.113 52.5888 121.918 52.8283 121.918H61.0434C61.2828 121.918 61.4775 122.113 61.4775 122.352C61.4775 122.592 61.2828 122.786 61.0434 122.786Z" fill="#E6E6E6"/>
|
||||
<path d="M44.8224 55.7926H27.5645C26.6332 55.7926 25.8755 55.0349 25.8755 54.1036V37.0562C25.8755 36.1249 26.6332 35.3672 27.5645 35.3672H44.8224C45.7538 35.3672 46.5114 36.1249 46.5114 37.0562V54.1036C46.5114 55.0349 45.7538 55.7926 44.8224 55.7926Z" fill="#E6E6E6"/>
|
||||
<path d="M30.7787 35.8711C28.3487 35.8711 26.3789 37.8409 26.3789 40.2708V53.7426C26.3789 54.5972 27.0717 55.29 27.9264 55.29H38.4791C42.6374 55.29 46.0084 51.9191 46.0084 47.7608V37.4186C46.0084 36.5639 45.3155 35.8711 44.4609 35.8711L30.7787 35.8711Z" fill="white"/>
|
||||
<path d="M40.816 40.8219H31.5355C31.3584 40.8219 31.2144 40.6778 31.2144 40.5007C31.2144 40.3237 31.3584 40.1797 31.5355 40.1797H40.816C40.993 40.1797 41.137 40.3237 41.137 40.5007C41.137 40.6778 40.993 40.8219 40.816 40.8219Z" fill="#E6E6E6"/>
|
||||
<path d="M40.816 47.6695H31.5355C31.3584 47.6695 31.2144 47.5254 31.2144 47.3484C31.2144 47.1713 31.3584 47.0273 31.5355 47.0273H40.816C40.993 47.0273 41.137 47.1713 41.137 47.3484C41.137 47.5254 40.993 47.6695 40.816 47.6695Z" fill="#E6E6E6"/>
|
||||
<path d="M44.5847 44.2476H27.7669C27.5899 44.2476 27.4458 44.1036 27.4458 43.9265C27.4458 43.7495 27.5899 43.6055 27.7669 43.6055H44.5847C44.7617 43.6055 44.9057 43.7495 44.9057 43.9265C44.9057 44.1036 44.7617 44.2476 44.5847 44.2476Z" fill="#E6E6E6"/>
|
||||
<path d="M44.756 50.4547H38.6805C38.5034 50.4547 38.3594 50.3106 38.3594 50.1336C38.3594 49.9565 38.5034 49.8125 38.6805 49.8125H44.756C44.933 49.8125 45.077 49.9565 45.077 50.1336C45.077 50.3106 44.933 50.4547 44.756 50.4547Z" fill="#E6E6E6"/>
|
||||
<path d="M95.1871 77.2824C97.1172 77.2824 98.6818 75.7178 98.6818 73.7877C98.6818 71.8576 97.1172 70.293 95.1871 70.293C93.257 70.293 91.6924 71.8576 91.6924 73.7877C91.6924 75.7178 93.257 77.2824 95.1871 77.2824Z" fill="#396AE6"/>
|
||||
<path d="M45.9117 59.4621C47.8418 59.4621 49.4065 57.8975 49.4065 55.9674C49.4065 54.0373 47.8418 52.4727 45.9117 52.4727C43.9816 52.4727 42.417 54.0373 42.417 55.9674C42.417 57.8975 43.9816 59.4621 45.9117 59.4621Z" fill="#396AE6"/>
|
||||
<path d="M62.6861 107.341C64.6162 107.341 66.1809 105.776 66.1809 103.846C66.1809 101.916 64.6162 100.352 62.6861 100.352C60.756 100.352 59.1914 101.916 59.1914 103.846C59.1914 105.776 60.756 107.341 62.6861 107.341Z" fill="#396AE6"/>
|
||||
<path d="M70.235 10.4378C72.6405 10.4378 74.5905 8.52881 74.5905 6.17397C74.5905 3.81913 72.6405 1.91016 70.235 1.91016C67.8295 1.91016 65.8794 3.81913 65.8794 6.17397C65.8794 8.52881 67.8295 10.4378 70.235 10.4378Z" fill="#E5E5E5"/>
|
||||
<path d="M105.152 4.71422H81.7077C80.9034 4.71422 80.249 4.05984 80.249 3.25555C80.249 2.45126 80.9034 1.79688 81.7077 1.79688H105.152C105.956 1.79688 106.611 2.45126 106.611 3.25555C106.611 4.05984 105.956 4.71422 105.152 4.71422Z" fill="#E5E5E5"/>
|
||||
<path d="M123.448 9.65172H81.7077C80.9034 9.65172 80.249 8.99733 80.249 8.19305C80.249 7.38876 80.9034 6.73438 81.7077 6.73438H123.448C124.252 6.73438 124.907 7.38876 124.907 8.19305C124.907 8.99733 124.252 9.65172 123.448 9.65172Z" fill="#E5E5E5"/>
|
||||
<path d="M7.19143 28.3588C8.74824 28.3588 10.0103 27.1233 10.0103 25.5993C10.0103 24.0753 8.74824 22.8398 7.19143 22.8398C5.63461 22.8398 4.37256 24.0753 4.37256 25.5993C4.37256 27.1233 5.63461 28.3588 7.19143 28.3588Z" fill="#E5E5E5"/>
|
||||
<path d="M29.7888 24.6537H14.6159C14.0954 24.6537 13.6719 24.2302 13.6719 23.7097C13.6719 23.1891 14.0954 22.7656 14.6159 22.7656H29.7888C30.3093 22.7656 30.7328 23.1891 30.7328 23.7097C30.7328 24.2302 30.3093 24.6537 29.7888 24.6537Z" fill="#E5E5E5"/>
|
||||
<path d="M41.6297 27.849H14.6159C14.0954 27.849 13.6719 27.4255 13.6719 26.905C13.6719 26.3844 14.0954 25.9609 14.6159 25.9609H41.6297C42.1502 25.9609 42.5737 26.3844 42.5737 26.905C42.5737 27.4255 42.1502 27.849 41.6297 27.849Z" fill="#E5E5E5"/>
|
||||
<path d="M91.7632 126.562C93.32 126.562 94.5821 125.326 94.5821 123.802C94.5821 122.278 93.32 121.043 91.7632 121.043C90.2064 121.043 88.9443 122.278 88.9443 123.802C88.9443 125.326 90.2064 126.562 91.7632 126.562Z" fill="#E5E5E5"/>
|
||||
<path d="M114.361 122.857H99.1882C98.6677 122.857 98.2441 122.433 98.2441 121.913C98.2441 121.392 98.6677 120.969 99.1882 120.969H114.361C114.882 120.969 115.305 121.392 115.305 121.913C115.305 122.433 114.882 122.857 114.361 122.857Z" fill="#E5E5E5"/>
|
||||
<path d="M126.202 126.052H99.1882C98.6677 126.052 98.2441 125.629 98.2441 125.108C98.2441 124.588 98.6677 124.164 99.1882 124.164H126.202C126.722 124.164 127.146 124.588 127.146 125.108C127.146 125.629 126.722 126.052 126.202 126.052Z" fill="#E5E5E5"/>
|
||||
<path d="M57.8811 37.3906H57.1821V70.5906H57.8811V37.3906Z" fill="#E6E6E6"/>
|
||||
<path d="M57.5314 72.6859C58.6895 72.6859 59.6283 71.7471 59.6283 70.589C59.6283 69.431 58.6895 68.4922 57.5314 68.4922C56.3734 68.4922 55.4346 69.431 55.4346 70.589C55.4346 71.7471 56.3734 72.6859 57.5314 72.6859Z" fill="#E6E6E6"/>
|
||||
<path d="M89.3337 96.7991C90.4917 96.7991 91.4305 95.8604 91.4305 94.7023C91.4305 93.5443 90.4917 92.6055 89.3337 92.6055C88.1756 92.6055 87.2368 93.5443 87.2368 94.7023C87.2368 95.8604 88.1756 96.7991 89.3337 96.7991Z" fill="#E6E6E6"/>
|
||||
<path d="M32.7189 68.1429C33.877 68.1429 34.8157 67.2041 34.8157 66.0461C34.8157 64.888 33.877 63.9492 32.7189 63.9492C31.5609 63.9492 30.6221 64.888 30.6221 66.0461C30.6221 67.2041 31.5609 68.1429 32.7189 68.1429Z" fill="#E6E6E6"/>
|
||||
<path d="M31.9438 66.0513L20.4766 66.3984L20.4977 67.0974L31.9649 66.7502L31.9438 66.0513Z" fill="#E6E6E6"/>
|
||||
<path d="M106.392 102.73H89.0034V94.7031H89.7024V102.031H106.392V102.73Z" fill="#E6E6E6"/>
|
||||
<path d="M31.8581 91.0413C33.0161 91.0413 33.9549 90.1025 33.9549 88.9445C33.9549 87.7864 33.0161 86.8477 31.8581 86.8477C30.7 86.8477 29.7612 87.7864 29.7612 88.9445C29.7612 90.1025 30.7 91.0413 31.8581 91.0413Z" fill="#E6E6E6"/>
|
||||
<path d="M48.7091 96.9687H31.3208V88.9414H32.0197V96.2698H48.7091V96.9687Z" fill="#E6E6E6"/>
|
||||
<path d="M101.914 80.9648H18.3965V81.6638H101.914V80.9648Z" fill="#E6E6E6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
40
web/services/api_token.service.ts
Normal file
40
web/services/api_token.service.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { API_BASE_URL } from "helpers/common.helper";
|
||||
import { APIService } from "./api.service";
|
||||
import { IApiToken } from "types/api_token";
|
||||
|
||||
export class ApiTokenService extends APIService {
|
||||
constructor() {
|
||||
super(API_BASE_URL);
|
||||
}
|
||||
|
||||
async getApiTokens(workspaceSlug: string): Promise<IApiToken[]> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/api-tokens/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async retrieveApiToken(workspaceSlug: string, tokenId: String): Promise<IApiToken> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/api-tokens/${tokenId}`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async createApiToken(workspaceSlug: string, data: any): Promise<IApiToken> {
|
||||
return this.post(`/api/workspaces/${workspaceSlug}/api-tokens/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
async deleteApiToken(workspaceSlug: string, tokenId: String): Promise<IApiToken> {
|
||||
return this.delete(`/api/workspaces/${workspaceSlug}/api-tokens/${tokenId}`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
60
web/services/webhook.service.ts
Normal file
60
web/services/webhook.service.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// api services
|
||||
import { APIService } from "services/api.service";
|
||||
// helpers
|
||||
import { API_BASE_URL } from "helpers/common.helper";
|
||||
// types
|
||||
import { IWebhook } from "types";
|
||||
|
||||
export class WebhookService extends APIService {
|
||||
constructor() {
|
||||
super(API_BASE_URL);
|
||||
}
|
||||
|
||||
async getAll(workspaceSlug: string): Promise<IWebhook[]> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/webhooks/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async getById(workspaceSlug: string, webhook_id: string): Promise<IWebhook> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async create(workspaceSlug: string, data: {}): Promise<IWebhook> {
|
||||
return this.post(`/api/workspaces/${workspaceSlug}/webhooks/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async update(workspaceSlug: string, webhook_id: string, data: {}): Promise<IWebhook> {
|
||||
return this.patch(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async remove(workspaceSlug: string, webhook_id: string): Promise<void> {
|
||||
return this.delete(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async regenerate(workspaceSlug: string, webhook_id: string): Promise<IWebhook> {
|
||||
return this.post(`/api/workspaces/${workspaceSlug}/webhooks/${webhook_id}/regenerate/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -109,6 +109,7 @@ import {
|
|||
InboxIssuesStore,
|
||||
InboxStore,
|
||||
} from "store/inbox";
|
||||
import { IWebhookStore, WebhookStore } from "./webhook.store";
|
||||
|
||||
import { IMentionsStore, MentionsStore } from "store/editor";
|
||||
|
||||
|
|
@ -178,6 +179,8 @@ export class RootStore {
|
|||
inboxIssueDetails: IInboxIssueDetailsStore;
|
||||
inboxFilters: IInboxFiltersStore;
|
||||
|
||||
webhook: IWebhookStore;
|
||||
|
||||
mentionsStore: IMentionsStore;
|
||||
|
||||
constructor() {
|
||||
|
|
@ -243,6 +246,8 @@ export class RootStore {
|
|||
this.inboxIssueDetails = new InboxIssueDetailsStore(this);
|
||||
this.inboxFilters = new InboxFiltersStore(this);
|
||||
|
||||
this.webhook = new WebhookStore(this);
|
||||
|
||||
this.mentionsStore = new MentionsStore(this);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
207
web/store/webhook.store.ts
Normal file
207
web/store/webhook.store.ts
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
// mobx
|
||||
import { action, observable, makeObservable, computed, runInAction } from "mobx";
|
||||
import { IWebhook } from "types";
|
||||
import { WebhookService } from "services/webhook.service";
|
||||
|
||||
export interface IWebhookStore {
|
||||
loader: boolean;
|
||||
error: any | undefined;
|
||||
|
||||
webhooks: { [webhookId: string]: IWebhook };
|
||||
currentWebhookId: string | undefined;
|
||||
webhookSecretKey: string | undefined;
|
||||
|
||||
// computed
|
||||
currentWebhook: IWebhook | undefined;
|
||||
|
||||
// actions
|
||||
fetchWebhooks: (workspaceSlug: string) => Promise<IWebhook[]>;
|
||||
fetchById: (workspaceSlug: string, webhook_id: string) => Promise<IWebhook>;
|
||||
create: (workspaceSlug: string, data: IWebhook) => Promise<{ webHook: IWebhook; secretKey: string | undefined }>;
|
||||
update: (workspaceSlug: string, webhook_id: string, data: Partial<IWebhook>) => Promise<IWebhook>;
|
||||
remove: (workspaceSlug: string, webhook_id: string) => Promise<void>;
|
||||
regenerate: (
|
||||
workspaceSlug: string,
|
||||
webhook_id: string
|
||||
) => Promise<{ webHook: IWebhook; secretKey: string | undefined }>;
|
||||
clearSecretKey: () => void;
|
||||
}
|
||||
|
||||
export class WebhookStore implements IWebhookStore {
|
||||
loader: boolean = false;
|
||||
error: any | undefined = undefined;
|
||||
|
||||
webhooks: { [webhookId: string]: IWebhook } = {};
|
||||
currentWebhookId: string | undefined = undefined;
|
||||
webhookSecretKey: string | undefined = undefined;
|
||||
|
||||
// root store
|
||||
rootStore;
|
||||
webhookService;
|
||||
|
||||
constructor(_rootStore: any | undefined = undefined) {
|
||||
makeObservable(this, {
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
|
||||
webhooks: observable.ref,
|
||||
currentWebhookId: observable.ref,
|
||||
webhookSecretKey: observable.ref,
|
||||
|
||||
currentWebhook: computed,
|
||||
|
||||
fetchWebhooks: action,
|
||||
create: action,
|
||||
fetchById: action,
|
||||
update: action,
|
||||
remove: action,
|
||||
regenerate: 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;
|
||||
return currentWebhook;
|
||||
}
|
||||
|
||||
fetchWebhooks = async (workspaceSlug: string) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = undefined;
|
||||
const webhookResponse = await this.webhookService.getAll(workspaceSlug);
|
||||
|
||||
const webHookObject: { [webhookId: string]: IWebhook } = webhookResponse.reduce((accumulator, currentWebhook) => {
|
||||
if (currentWebhook && currentWebhook.id) {
|
||||
return { ...accumulator, [currentWebhook.id]: currentWebhook };
|
||||
}
|
||||
return accumulator;
|
||||
}, {});
|
||||
|
||||
runInAction(() => {
|
||||
this.webhooks = webHookObject;
|
||||
this.loader = false;
|
||||
this.error = undefined;
|
||||
});
|
||||
|
||||
return webhookResponse;
|
||||
} catch (error) {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
create = async (workspaceSlug: string, data: IWebhook) => {
|
||||
try {
|
||||
const webhookResponse = await this.webhookService.create(workspaceSlug, data);
|
||||
|
||||
const _secretKey = webhookResponse?.secret_key;
|
||||
delete webhookResponse?.secret_key;
|
||||
const _webhooks = this.webhooks;
|
||||
|
||||
if (webhookResponse && webhookResponse.id) {
|
||||
_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) => {
|
||||
try {
|
||||
const webhookResponse = await this.webhookService.getById(workspaceSlug, webhook_id);
|
||||
|
||||
const _webhooks = this.webhooks;
|
||||
|
||||
if (webhookResponse && webhookResponse.id) {
|
||||
_webhooks[webhookResponse.id] = webhookResponse;
|
||||
}
|
||||
runInAction(() => {
|
||||
this.currentWebhookId = webhook_id;
|
||||
this.webhooks = _webhooks;
|
||||
});
|
||||
|
||||
return webhookResponse;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
update = async (workspaceSlug: string, webhook_id: string, data: Partial<IWebhook>) => {
|
||||
try {
|
||||
let _webhooks = this.webhooks;
|
||||
|
||||
if (webhook_id) {
|
||||
_webhooks = { ..._webhooks, [webhook_id]: { ...this.webhooks[webhook_id], ...data } };
|
||||
}
|
||||
|
||||
runInAction(() => {
|
||||
this.webhooks = _webhooks;
|
||||
});
|
||||
|
||||
const webhookResponse = await this.webhookService.update(workspaceSlug, webhook_id, data);
|
||||
|
||||
return webhookResponse;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
this.fetchWebhooks(workspaceSlug);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
remove = async (workspaceSlug: string, webhook_id: string) => {
|
||||
try {
|
||||
await this.webhookService.remove(workspaceSlug, webhook_id);
|
||||
|
||||
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) => {
|
||||
try {
|
||||
const webhookResponse = await this.webhookService.regenerate(workspaceSlug, webhook_id);
|
||||
|
||||
const _secretKey = webhookResponse?.secret_key;
|
||||
delete webhookResponse?.secret_key;
|
||||
const _webhooks = this.webhooks;
|
||||
|
||||
if (webhookResponse && webhookResponse.id) {
|
||||
_webhooks[webhookResponse.id] = webhookResponse;
|
||||
}
|
||||
|
||||
runInAction(() => {
|
||||
this.webhookSecretKey = _secretKey || undefined;
|
||||
this.webhooks = _webhooks;
|
||||
});
|
||||
return { webHook: webhookResponse, secretKey: _secretKey };
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
clearSecretKey = () => {
|
||||
this.webhookSecretKey = undefined;
|
||||
};
|
||||
}
|
||||
16
web/types/api_token.d.ts
vendored
Normal file
16
web/types/api_token.d.ts
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export interface IApiToken {
|
||||
id: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
label: string;
|
||||
description: string;
|
||||
is_active: boolean;
|
||||
last_used?: string;
|
||||
token: string;
|
||||
user_type: number;
|
||||
expired_at?: string;
|
||||
created_by: string;
|
||||
updated_by: string;
|
||||
user: string;
|
||||
workspace: string;
|
||||
}
|
||||
1
web/types/index.d.ts
vendored
1
web/types/index.d.ts
vendored
|
|
@ -20,6 +20,7 @@ export * from "./waitlist";
|
|||
export * from "./reaction";
|
||||
export * from "./view-props";
|
||||
export * from "./workspace-views";
|
||||
export * from "./webhook";
|
||||
|
||||
export type NestedKeyOf<ObjectType extends object> = {
|
||||
[Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
|
||||
|
|
|
|||
31
web/types/webhook.d.ts
vendored
Normal file
31
web/types/webhook.d.ts
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
export interface IWebhook {
|
||||
id?: string;
|
||||
secret_key?: string;
|
||||
url: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
is_active: boolean;
|
||||
project: boolean;
|
||||
cycle: boolean;
|
||||
module: boolean;
|
||||
issue: boolean;
|
||||
issue_comment?: boolean;
|
||||
workspace?: string;
|
||||
}
|
||||
|
||||
// this interface is used to handle the webhook form state
|
||||
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";
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue