forked from github/plane
chore: revamp the API tokens workflow (#2880)
* chore: added getLayout method to api tokens pages * revamp: api tokens workflow * chore: add title validation and update types * chore: minor UI updates * chore: update route
This commit is contained in:
parent
7b5eea8722
commit
7ad0360920
@ -44,7 +44,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
|
||||
</button>
|
||||
{!sidePeekVisible && (
|
||||
<div
|
||||
className="hidden group-hover/summary-popover:block z-10 max-h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3"
|
||||
className="hidden group-hover/summary-popover:block z-10 max-h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 overflow-y-auto"
|
||||
ref={setPopperElement}
|
||||
style={summaryPopoverStyles.popper}
|
||||
{...summaryPopoverAttributes.popper}
|
||||
|
@ -51,7 +51,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex items-center justify-between gap-1 w-full text-xs ${
|
||||
className={`flex items-center justify-between gap-1 text-xs ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
|
@ -1,61 +1,71 @@
|
||||
//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 { mutate } from "swr";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { APITokenService } from "services/api_token.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
// fetch-keys
|
||||
import { API_TOKENS_LIST } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
tokenId?: string;
|
||||
onClose: () => void;
|
||||
tokenId: string;
|
||||
};
|
||||
|
||||
const apiTokenService = new APITokenService();
|
||||
|
||||
export const DeleteTokenModal: FC<Props> = (props) => {
|
||||
const { isOpen, handleClose, tokenId } = props;
|
||||
export const DeleteApiTokenModal: FC<Props> = (props) => {
|
||||
const { isOpen, onClose, tokenId } = props;
|
||||
// states
|
||||
const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, tokenId: tokenIdFromQuery } = router.query;
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setDeleteLoading(false);
|
||||
};
|
||||
|
||||
const handleDeletion = () => {
|
||||
if (!workspaceSlug || (!tokenIdFromQuery && !tokenId)) return;
|
||||
|
||||
const token = tokenId || tokenIdFromQuery;
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
setDeleteLoading(true);
|
||||
|
||||
apiTokenService
|
||||
.deleteApiToken(workspaceSlug.toString(), token!.toString())
|
||||
.deleteApiToken(workspaceSlug.toString(), tokenId)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
message: "Token deleted successfully",
|
||||
type: "success",
|
||||
title: "Success",
|
||||
title: "Success!",
|
||||
message: "Token deleted successfully.",
|
||||
});
|
||||
router.replace(`/${workspaceSlug}/settings/api-tokens/`);
|
||||
|
||||
mutate<IApiToken[]>(
|
||||
API_TOKENS_LIST(workspaceSlug.toString()),
|
||||
(prevData) => (prevData ?? []).filter((token) => token.id !== tokenId),
|
||||
false
|
||||
);
|
||||
|
||||
handleClose();
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch((err) =>
|
||||
setToastAlert({
|
||||
message: err?.message,
|
||||
type: "error",
|
||||
title: "Error",
|
||||
});
|
||||
message: err?.message ?? "Something went wrong. Please try again.",
|
||||
})
|
||||
.finally(() => {
|
||||
setDeleteLoading(false);
|
||||
handleClose();
|
||||
});
|
||||
)
|
||||
.finally(() => setDeleteLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
@ -85,22 +95,24 @@ export const DeleteTokenModal: FC<Props> = (props) => {
|
||||
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 flex-col gap-3 p-4">
|
||||
<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>
|
||||
<h3 className="text-lg font-medium leading-6 text-custom-text-100">
|
||||
Are you sure you want to delete the token?
|
||||
</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 className="text-sm text-custom-text-400">
|
||||
Any application using this token 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}>
|
||||
<Button variant="neutral-primary" onClick={handleClose} size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" onClick={handleDeletion} loading={deleteLoading} disabled={deleteLoading}>
|
||||
{deleteLoading ? "Revoking..." : "Revoke"}
|
||||
<Button variant="danger" onClick={handleDeletion} loading={deleteLoading} size="sm">
|
||||
{deleteLoading ? "Deleting..." : "Delete"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,15 +1,16 @@
|
||||
// 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";
|
||||
|
||||
export const APITokenEmptyState = () => {
|
||||
const router = useRouter();
|
||||
type Props = {
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export const ApiTokenEmptyState: React.FC<Props> = (props) => {
|
||||
const { onClick } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -17,19 +18,12 @@ export const APITokenEmptyState = () => {
|
||||
>
|
||||
<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>
|
||||
{
|
||||
<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
|
||||
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 className="flex items-center gap-1.5" onClick={onClick}>
|
||||
Add token
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,160 +0,0 @@
|
||||
import { Dispatch, SetStateAction, useState, FC } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useRouter } from "next/router";
|
||||
// helpers
|
||||
import { addDays, renderDateFormat } from "helpers/date-time.helper";
|
||||
import { csvDownload } from "helpers/download.helper";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
// hooks
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import { APITokenService } from "services/api_token.service";
|
||||
// components
|
||||
import { APITokenTitle } from "./token-title";
|
||||
import { APITokenDescription } from "./token-description";
|
||||
import { APITokenExpiry, EXPIRY_OPTIONS } from "./token-expiry";
|
||||
import { APITokenKeySection } from "./token-key-section";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
|
||||
interface APITokenFormProps {
|
||||
generatedToken: IApiToken | null | undefined;
|
||||
setGeneratedToken: Dispatch<SetStateAction<IApiToken | null | undefined>>;
|
||||
setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export interface APIFormFields {
|
||||
never_expires: boolean;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const apiTokenService = new APITokenService();
|
||||
|
||||
export const APITokenForm: FC<APITokenFormProps> = (props) => {
|
||||
const { generatedToken, setGeneratedToken, setDeleteTokenModal } = props;
|
||||
// states
|
||||
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);
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
// store
|
||||
const {
|
||||
theme: { sidebarCollapsed },
|
||||
} = useMobxStore();
|
||||
// router
|
||||
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: EXPIRY_OPTIONS[selectedExpiry].days }).toISOString();
|
||||
};
|
||||
|
||||
function renderExpiry(): string {
|
||||
return renderDateFormat(addDays({ date: new Date(), days: EXPIRY_OPTIONS[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={`${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>
|
||||
);
|
||||
};
|
@ -1,56 +0,0 @@
|
||||
import { Dispatch, FC, SetStateAction } from "react";
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// ui
|
||||
import { TextArea } from "@plane/ui";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
import type { APIFormFields } from "./index";
|
||||
|
||||
interface APITokenDescriptionProps {
|
||||
generatedToken: IApiToken | null | undefined;
|
||||
control: Control<APIFormFields, any>;
|
||||
focusDescription: boolean;
|
||||
setFocusTitle: Dispatch<SetStateAction<boolean>>;
|
||||
setFocusDescription: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export const APITokenDescription: FC<APITokenDescriptionProps> = (props) => {
|
||||
const { generatedToken, control, focusDescription, setFocusTitle, setFocusDescription } = props;
|
||||
|
||||
return (
|
||||
<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);
|
||||
}}
|
||||
role="button"
|
||||
className={`${value.length === 0 ? "text-custom-text-400/60" : "text-custom-text-300"} text-lg pt-3`}
|
||||
>
|
||||
{value.length != 0 ? value : "Description"}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
@ -1,111 +0,0 @@
|
||||
import { Dispatch, Fragment, SetStateAction, FC } from "react";
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
// ui
|
||||
import { ToggleSwitch } from "@plane/ui";
|
||||
// types
|
||||
import { APIFormFields } from "./index";
|
||||
|
||||
interface APITokenExpiryProps {
|
||||
neverExpires: boolean;
|
||||
selectedExpiry: number;
|
||||
setSelectedExpiry: Dispatch<SetStateAction<number>>;
|
||||
setNeverExpire: Dispatch<SetStateAction<boolean>>;
|
||||
renderExpiry: () => string;
|
||||
control: Control<APIFormFields, any>;
|
||||
}
|
||||
|
||||
export const EXPIRY_OPTIONS = [
|
||||
{
|
||||
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: FC<APITokenExpiryProps> = (props) => {
|
||||
const { neverExpires, selectedExpiry, setSelectedExpiry, setNeverExpire, renderExpiry, control } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<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" : ""}`}>
|
||||
{EXPIRY_OPTIONS[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">
|
||||
{EXPIRY_OPTIONS.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>
|
||||
</>
|
||||
);
|
||||
};
|
@ -1,59 +0,0 @@
|
||||
import { Dispatch, SetStateAction, FC } from "react";
|
||||
// icons
|
||||
import { Copy } from "lucide-react";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
|
||||
interface APITokenKeySectionProps {
|
||||
generatedToken: IApiToken | null | undefined;
|
||||
renderExpiry: () => string;
|
||||
setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export const APITokenKeySection: FC<APITokenKeySectionProps> = (props) => {
|
||||
const { generatedToken, renderExpiry, setDeleteTokenModal } = props;
|
||||
// hooks
|
||||
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;
|
||||
};
|
@ -1,69 +0,0 @@
|
||||
import { Dispatch, FC, SetStateAction } from "react";
|
||||
import { Control, Controller, FieldErrors } from "react-hook-form";
|
||||
// ui
|
||||
import { Input } from "@plane/ui";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
import type { APIFormFields } from "./index";
|
||||
|
||||
interface APITokenTitleProps {
|
||||
generatedToken: IApiToken | null | undefined;
|
||||
errors: FieldErrors<APIFormFields>;
|
||||
control: Control<APIFormFields, any>;
|
||||
focusTitle: boolean;
|
||||
setFocusTitle: Dispatch<SetStateAction<boolean>>;
|
||||
setFocusDescription: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export const APITokenTitle: FC<APITokenTitleProps> = (props) => {
|
||||
const { generatedToken, errors, control, focusTitle, setFocusTitle, setFocusDescription } = props;
|
||||
|
||||
return (
|
||||
<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
|
||||
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);
|
||||
}}
|
||||
role="button"
|
||||
className={`${value.length === 0 ? "text-custom-text-400/60" : ""} font-medium text-[24px]`}
|
||||
>
|
||||
{value.length != 0 ? value : "Api Title"}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
@ -1,4 +1,4 @@
|
||||
export * from "./modal";
|
||||
export * from "./delete-token-modal";
|
||||
export * from "./empty-state";
|
||||
export * from "./token-list-item";
|
||||
export * from "./form";
|
||||
|
133
web/components/api-token/modal/create-token-modal.tsx
Normal file
133
web/components/api-token/modal/create-token-modal.tsx
Normal file
@ -0,0 +1,133 @@
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { mutate } from "swr";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import { APITokenService } from "services/api_token.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CreateApiTokenForm, GeneratedTokenDetails } from "components/api-token";
|
||||
// helpers
|
||||
import { csvDownload } from "helpers/download.helper";
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
// fetch-keys
|
||||
import { API_TOKENS_LIST } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
// services
|
||||
const apiTokenService = new APITokenService();
|
||||
|
||||
export const CreateApiTokenModal: React.FC<Props> = (props) => {
|
||||
const { isOpen, onClose } = props;
|
||||
// states
|
||||
const [neverExpires, setNeverExpires] = useState<boolean>(false);
|
||||
const [generatedToken, setGeneratedToken] = useState<IApiToken | null | undefined>(null);
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
|
||||
setTimeout(() => {
|
||||
setNeverExpires(false);
|
||||
setGeneratedToken(null);
|
||||
}, 350);
|
||||
};
|
||||
|
||||
const downloadSecretKey = (data: IApiToken) => {
|
||||
const csvData = {
|
||||
Title: data.label,
|
||||
Description: data.description,
|
||||
Expiry: data.expired_at ? renderFormattedDate(data.expired_at) : "Never expires",
|
||||
"Secret key": data.token ?? "",
|
||||
};
|
||||
|
||||
csvDownload(csvData, `secret-key-${Date.now()}`);
|
||||
};
|
||||
|
||||
const handleCreateToken = async (data: Partial<IApiToken>) => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
// make the request to generate the token
|
||||
await apiTokenService
|
||||
.createApiToken(workspaceSlug.toString(), data)
|
||||
.then((res) => {
|
||||
setGeneratedToken(res);
|
||||
downloadSecretKey(res);
|
||||
|
||||
mutate<IApiToken[]>(
|
||||
API_TOKENS_LIST(workspaceSlug.toString()),
|
||||
(prevData) => {
|
||||
if (!prevData) return;
|
||||
|
||||
return [res, ...prevData];
|
||||
},
|
||||
false
|
||||
);
|
||||
})
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
message: err.message,
|
||||
type: "error",
|
||||
title: "Error",
|
||||
});
|
||||
|
||||
throw err;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={() => {}}>
|
||||
<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 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="h-full w-full grid place-items-center text-center p-4">
|
||||
<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 rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all px-4 sm:w-full sm:max-w-2xl">
|
||||
{generatedToken ? (
|
||||
<GeneratedTokenDetails handleClose={handleClose} tokenDetails={generatedToken} />
|
||||
) : (
|
||||
<CreateApiTokenForm
|
||||
handleClose={handleClose}
|
||||
neverExpires={neverExpires}
|
||||
toggleNeverExpires={() => setNeverExpires((prevData) => !prevData)}
|
||||
onSubmit={handleCreateToken}
|
||||
/>
|
||||
)}
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
};
|
247
web/components/api-token/modal/form.tsx
Normal file
247
web/components/api-token/modal/form.tsx
Normal file
@ -0,0 +1,247 @@
|
||||
import { useState } from "react";
|
||||
import { add } from "date-fns";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Calendar } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { CustomDatePicker } from "components/ui";
|
||||
// ui
|
||||
import { Button, CustomSelect, Input, TextArea, ToggleSwitch } from "@plane/ui";
|
||||
// helpers
|
||||
import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
neverExpires: boolean;
|
||||
toggleNeverExpires: () => void;
|
||||
onSubmit: (data: Partial<IApiToken>) => Promise<void>;
|
||||
};
|
||||
|
||||
const EXPIRY_DATE_OPTIONS = [
|
||||
{
|
||||
key: "1_week",
|
||||
label: "1 week",
|
||||
value: { weeks: 1 },
|
||||
},
|
||||
{
|
||||
key: "1_month",
|
||||
label: "1 month",
|
||||
value: { months: 1 },
|
||||
},
|
||||
{
|
||||
key: "3_months",
|
||||
label: "3 months",
|
||||
value: { months: 3 },
|
||||
},
|
||||
{
|
||||
key: "1_year",
|
||||
label: "1 year",
|
||||
value: { years: 1 },
|
||||
},
|
||||
];
|
||||
|
||||
const defaultValues: Partial<IApiToken> = {
|
||||
label: "",
|
||||
description: "",
|
||||
expired_at: null,
|
||||
};
|
||||
|
||||
const getExpiryDate = (val: string): string | null => {
|
||||
const today = new Date();
|
||||
|
||||
const dateToAdd = EXPIRY_DATE_OPTIONS.find((option) => option.key === val)?.value;
|
||||
|
||||
if (dateToAdd) {
|
||||
const expiryDate = add(today, dateToAdd);
|
||||
|
||||
return renderFormattedDate(expiryDate);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
||||
const { handleClose, neverExpires, toggleNeverExpires, onSubmit } = props;
|
||||
// states
|
||||
const [customDate, setCustomDate] = useState<Date | null>(null);
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
// form
|
||||
const {
|
||||
control,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
reset,
|
||||
watch,
|
||||
} = useForm<IApiToken>({ defaultValues });
|
||||
|
||||
const handleFormSubmit = async (data: IApiToken) => {
|
||||
// if never expires is toggled off, and the user has not selected a custom date or a predefined date, show an error
|
||||
if (!neverExpires && (!data.expired_at || (data.expired_at === "custom" && !customDate)))
|
||||
return setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Please select an expiration date.",
|
||||
});
|
||||
|
||||
const payload: Partial<IApiToken> = {
|
||||
label: data.label,
|
||||
description: data.description,
|
||||
};
|
||||
|
||||
// if never expires is toggled on, set expired_at to null
|
||||
if (neverExpires) payload.expired_at = null;
|
||||
// if never expires is toggled off, and the user has selected a custom date, set expired_at to the custom date
|
||||
else if (data.expired_at === "custom") payload.expired_at = renderFormattedPayloadDate(customDate ?? new Date());
|
||||
// if never expires is toggled off, and the user has selected a predefined date, set expired_at to the predefined date
|
||||
else {
|
||||
const expiryDate = getExpiryDate(data.expired_at ?? "");
|
||||
|
||||
if (expiryDate) payload.expired_at = renderFormattedPayloadDate(expiryDate);
|
||||
}
|
||||
|
||||
await onSubmit(payload).then(() => {
|
||||
reset(defaultValues);
|
||||
setCustomDate(null);
|
||||
});
|
||||
};
|
||||
|
||||
const today = new Date();
|
||||
const tomorrow = add(today, { days: 1 });
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium leading-6 text-custom-text-100">Create token</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="label"
|
||||
rules={{
|
||||
required: "Title is required",
|
||||
maxLength: {
|
||||
value: 255,
|
||||
message: "Title should be less than 255 characters",
|
||||
},
|
||||
validate: (val) => val.trim() !== "" || "Title is required",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<Input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
hasError={Boolean(errors.label)}
|
||||
placeholder="Token title"
|
||||
className="text-sm font-medium w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.label && <span className="text-xs text-red-500">{errors.label.message}</span>}
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<TextArea
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
hasError={Boolean(errors.description)}
|
||||
placeholder="Token description"
|
||||
className="text-sm h-24 w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="expired_at"
|
||||
render={({ field: { onChange, value } }) => {
|
||||
const selectedOption = EXPIRY_DATE_OPTIONS.find((option) => option.key === value);
|
||||
|
||||
return (
|
||||
<CustomSelect
|
||||
customButton={
|
||||
<div
|
||||
className={`flex items-center gap-2 border-[0.5px] border-custom-border-200 rounded py-1 px-2 ${
|
||||
neverExpires ? "text-custom-text-400" : ""
|
||||
}`}
|
||||
>
|
||||
<Calendar className="h-3 w-3" />
|
||||
{value === "custom"
|
||||
? "Custom date"
|
||||
: selectedOption
|
||||
? selectedOption.label
|
||||
: "Set expiration date"}
|
||||
</div>
|
||||
}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={neverExpires}
|
||||
>
|
||||
{EXPIRY_DATE_OPTIONS.map((option) => (
|
||||
<CustomSelect.Option key={option.key} value={option.key}>
|
||||
{option.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
<CustomSelect.Option value="custom">Custom</CustomSelect.Option>
|
||||
</CustomSelect>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{watch("expired_at") === "custom" && (
|
||||
<CustomDatePicker
|
||||
value={customDate}
|
||||
onChange={(date) => setCustomDate(date ? new Date(date) : null)}
|
||||
minDate={tomorrow}
|
||||
customInput={
|
||||
<div
|
||||
className={`flex items-center gap-2 py-1 px-2 text-xs cursor-pointer !rounded border-[0.5px] border-custom-border-200 !shadow-none !duration-0 ${
|
||||
customDate ? "w-[7.5rem]" : ""
|
||||
} ${neverExpires ? "text-custom-text-400 !cursor-not-allowed" : "hover:bg-custom-background-80"}`}
|
||||
>
|
||||
<Calendar className="h-3 w-3" />
|
||||
{customDate ? renderFormattedDate(customDate) : "Set date"}
|
||||
</div>
|
||||
}
|
||||
disabled={neverExpires}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!neverExpires && (
|
||||
<span className="text-xs text-custom-text-400">
|
||||
{watch("expired_at") === "custom"
|
||||
? customDate
|
||||
? `Expires ${renderFormattedDate(customDate)}`
|
||||
: null
|
||||
: watch("expired_at")
|
||||
? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
|
||||
: null}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex items-center justify-between gap-2">
|
||||
<div className="flex cursor-pointer items-center gap-1.5" onClick={toggleNeverExpires}>
|
||||
<div className="flex cursor-pointer items-center justify-center">
|
||||
<ToggleSwitch value={neverExpires} onChange={() => {}} size="sm" />
|
||||
</div>
|
||||
<span className="text-xs">Never expires</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Discard
|
||||
</Button>
|
||||
<Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Generating..." : "Generate token"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
61
web/components/api-token/modal/generated-token-details.tsx
Normal file
61
web/components/api-token/modal/generated-token-details.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import { Copy } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button, Tooltip } from "@plane/ui";
|
||||
// helpers
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
tokenDetails: IApiToken;
|
||||
};
|
||||
|
||||
export const GeneratedTokenDetails: React.FC<Props> = (props) => {
|
||||
const { handleClose, tokenDetails } = props;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const copyApiToken = (token: string) => {
|
||||
copyTextToClipboard(token).then(() =>
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Token copied to clipboard.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
|
||||
<p className="text-sm text-custom-text-400">
|
||||
Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
|
||||
containing the key has been downloaded.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyApiToken(tokenDetails.token ?? "")}
|
||||
className="mt-4 w-full border-[0.5px] border-custom-border-200 py-2 px-3 flex items-center justify-between font-medium rounded-md text-sm outline-none"
|
||||
>
|
||||
{tokenDetails.token}
|
||||
<Tooltip tooltipContent="Copy secret key">
|
||||
<Copy className="h-4 w-4 text-custom-text-400" />
|
||||
</Tooltip>
|
||||
</button>
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<p className="text-custom-text-400 text-xs">
|
||||
{tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
|
||||
</p>
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
3
web/components/api-token/modal/index.ts
Normal file
3
web/components/api-token/modal/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from "./create-token-modal";
|
||||
export * from "./form";
|
||||
export * from "./generated-token-details";
|
@ -1,43 +1,58 @@
|
||||
import Link from "next/link";
|
||||
// helpers
|
||||
import { formatLongDateDistance, timeAgo } from "helpers/date-time.helper";
|
||||
// icons
|
||||
import { useState } from "react";
|
||||
import { XCircle } from "lucide-react";
|
||||
// components
|
||||
import { DeleteApiTokenModal } from "components/api-token";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// helpers
|
||||
import { renderFormattedDate, timeAgo } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IApiToken } from "types/api_token";
|
||||
|
||||
interface IApiTokenListItem {
|
||||
workspaceSlug: string | string[] | undefined;
|
||||
type Props = {
|
||||
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>
|
||||
export const ApiTokenListItem: React.FC<Props> = (props) => {
|
||||
const { token } = props;
|
||||
// states
|
||||
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
|
||||
<div className="group relative border-b border-custom-border-200 flex flex-col justify-center py-3 px-4">
|
||||
<Tooltip tooltipContent="Delete token">
|
||||
<button
|
||||
onClick={() => setDeleteModalOpen(true)}
|
||||
className="hidden group-hover:grid absolute right-4 place-items-center"
|
||||
>
|
||||
<XCircle className="h-4 w-4 text-red-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<div className="flex items-center w-4/5">
|
||||
<h5 className="text-sm font-medium truncate">{token.label}</h5>
|
||||
<span
|
||||
className={`${
|
||||
token.is_active ? "bg-green-600/10 text-green-600" : "bg-custom-text-400/20 text-custom-text-400"
|
||||
token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 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>
|
||||
<div className="flex flex-col justify-center w-full mt-1">
|
||||
{token.description.trim() !== "" && (
|
||||
<p className="text-sm mb-1 break-words max-w-[70%]">{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)}
|
||||
? token.expired_at
|
||||
? `Expires ${renderFormattedDate(token.expired_at!)}`
|
||||
: "Never expires"
|
||||
: `Expired ${timeAgo(token.expired_at)}`}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -37,11 +37,13 @@ export const RecentPagesList: FC = observer(() => {
|
||||
{Object.keys(recentProjectPages).length > 0 && !isEmpty ? (
|
||||
<>
|
||||
{Object.keys(recentProjectPages).map((key) => {
|
||||
if (recentProjectPages[key].length === 0) return null;
|
||||
if (recentProjectPages[key]?.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={key} className="overflow-hidden">
|
||||
<h2 className="text-xl font-semibold capitalize mb-2">{replaceUnderscoreIfSnakeCase(key)}</h2>
|
||||
<div key={key}>
|
||||
<h2 className="sticky top-0 bg-custom-background-100 z-[1] text-xl font-semibold capitalize mb-2">
|
||||
{replaceUnderscoreIfSnakeCase(key)}
|
||||
</h2>
|
||||
<PagesListView pages={recentProjectPages[key]} />
|
||||
</div>
|
||||
);
|
||||
|
@ -1,3 +1,5 @@
|
||||
import { format } from "date-fns";
|
||||
|
||||
export const addDays = ({ date, days }: { date: Date; days: number }): Date => {
|
||||
date.setDate(date.getDate() + days);
|
||||
return date;
|
||||
@ -458,3 +460,39 @@ export const getFirstDateOfWeek = (date: Date): Date => {
|
||||
|
||||
return firstDateOfWeek;
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {string} formatted date in the format of MMM dd, yyyy
|
||||
* @description Returns date in the formatted format
|
||||
* @param {Date | string} date
|
||||
* @example renderFormattedDate("2023-01-01") // Jan 01, 2023
|
||||
*/
|
||||
export const renderFormattedDate = (date: string | Date): string => {
|
||||
if (!date) return "";
|
||||
|
||||
date = new Date(date);
|
||||
|
||||
const formattedDate = format(date, "MMM dd, yyyy");
|
||||
|
||||
return formattedDate;
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {string | null} formatted date in the format of yyyy-mm-dd to be used in payload
|
||||
* @description Returns date in the formatted format to be used in payload
|
||||
* @param {Date | string} date
|
||||
* @example renderFormattedPayloadDate("2023-01-01") // "2023-01-01"
|
||||
*/
|
||||
export const renderFormattedPayloadDate = (date: Date | string): string | null => {
|
||||
if (!date) return null;
|
||||
|
||||
var d = new Date(date),
|
||||
month = "" + (d.getMonth() + 1),
|
||||
day = "" + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
|
||||
if (month.length < 2) month = "0" + month;
|
||||
if (day.length < 2) day = "0" + day;
|
||||
|
||||
return [year, month, day].join("-");
|
||||
};
|
||||
|
@ -1,17 +1,14 @@
|
||||
export const csvDownload = (data: Array<Array<string>> | { [key: string]: string }, name: string) => {
|
||||
let rows = [];
|
||||
const rows = Array.isArray(data) ? [...data] : [Object.keys(data), Object.values(data)];
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
rows = [...data];
|
||||
} else {
|
||||
rows = [Object.keys(data), Object.values(data)];
|
||||
}
|
||||
const csvContent = "data:text/csv;charset=utf-8," + rows.map((e) => e.join(",")).join("\n");
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = encodedUri;
|
||||
link.download = `${name}.csv`;
|
||||
|
||||
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();
|
||||
document.body.removeChild(link); // Cleanup after the download link is clicked
|
||||
};
|
||||
|
@ -33,7 +33,7 @@ export const WorkspaceSettingsSidebar = () => {
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
},
|
||||
{
|
||||
label: "Billing & Plans",
|
||||
label: "Billing and plans",
|
||||
href: `/${workspaceSlug}/settings/billing`,
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
@ -45,12 +45,12 @@ export const WorkspaceSettingsSidebar = () => {
|
||||
{
|
||||
label: "Imports",
|
||||
href: `/${workspaceSlug}/settings/imports`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
{
|
||||
label: "Exports",
|
||||
href: `/${workspaceSlug}/settings/exports`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
{
|
||||
label: "Webhooks",
|
||||
@ -58,9 +58,9 @@ export const WorkspaceSettingsSidebar = () => {
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
{
|
||||
label: "API Tokens",
|
||||
label: "API tokens",
|
||||
href: `/${workspaceSlug}/settings/api-tokens`,
|
||||
access: EUserWorkspaceRoles.GUEST,
|
||||
access: EUserWorkspaceRoles.ADMIN,
|
||||
},
|
||||
];
|
||||
|
||||
|
86
web/pages/[workspaceSlug]/settings/api-tokens.tsx
Normal file
86
web/pages/[workspaceSlug]/settings/api-tokens.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||
// component
|
||||
import { WorkspaceSettingHeader } from "components/headers";
|
||||
import { ApiTokenEmptyState, ApiTokenListItem, CreateApiTokenModal } from "components/api-token";
|
||||
// ui
|
||||
import { Button, Spinner } from "@plane/ui";
|
||||
// services
|
||||
import { APITokenService } from "services/api_token.service";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
// constants
|
||||
import { API_TOKENS_LIST } from "constants/fetch-keys";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
const apiTokenService = new APITokenService();
|
||||
|
||||
const ApiTokensPage: NextPageWithLayout = observer(() => {
|
||||
// states
|
||||
const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// mobx store
|
||||
const {
|
||||
user: { currentWorkspaceRole },
|
||||
} = useMobxStore();
|
||||
|
||||
const { data: tokens } = useSWR(
|
||||
workspaceSlug && currentWorkspaceRole === 20 ? API_TOKENS_LIST(workspaceSlug.toString()) : null,
|
||||
() => (workspaceSlug && currentWorkspaceRole === 20 ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null)
|
||||
);
|
||||
|
||||
if (currentWorkspaceRole !== 20)
|
||||
return (
|
||||
<div className="h-full w-full flex justify-center mt-10 p-4">
|
||||
<p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
|
||||
{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={() => setIsCreateTokenModalOpen(true)}>
|
||||
Add API token
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
{tokens.map((token) => (
|
||||
<ApiTokenListItem key={token.id} token={token} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<div className="mx-auto py-8">
|
||||
<ApiTokenEmptyState onClick={() => setIsCreateTokenModalOpen(true)} />
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="h-full w-full grid place-items-center p-4">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
ApiTokensPage.getLayout = function getLayout(page: React.ReactElement) {
|
||||
return (
|
||||
<AppLayout header={<WorkspaceSettingHeader title="API Tokens" />}>
|
||||
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApiTokensPage;
|
@ -1,69 +0,0 @@
|
||||
import { useState } from "react";
|
||||
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";
|
||||
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;
|
@ -1,36 +0,0 @@
|
||||
import { useState } from "react";
|
||||
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 { APITokenForm, DeleteTokenModal } from "components/api-token";
|
||||
|
||||
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);
|
@ -1,65 +0,0 @@
|
||||
import React from "react";
|
||||
import type { NextPage } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// layouts
|
||||
import { AppLayout } from "layouts/app-layout";
|
||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||
// component
|
||||
import { WorkspaceSettingHeader } from "components/headers";
|
||||
import { APITokenEmptyState, APITokenListItem } from "components/api-token";
|
||||
// ui
|
||||
import { Spinner, Button } from "@plane/ui";
|
||||
// services
|
||||
import { APITokenService } from "services/api_token.service";
|
||||
// constants
|
||||
import { API_TOKENS_LIST } from "constants/fetch-keys";
|
||||
|
||||
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;
|
@ -23,13 +23,14 @@ export class APITokenService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async createApiToken(workspaceSlug: string, data: any): Promise<IApiToken> {
|
||||
async createApiToken(workspaceSlug: string, data: Partial<IApiToken>): 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)
|
||||
|
18
web/types/api_token.d.ts
vendored
18
web/types/api_token.d.ts
vendored
@ -1,16 +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;
|
||||
description: string;
|
||||
expired_at: string | null;
|
||||
id: string;
|
||||
is_active: boolean;
|
||||
label: string;
|
||||
last_used: string | null;
|
||||
updated_at: string;
|
||||
updated_by: string;
|
||||
user: string;
|
||||
user_type: number;
|
||||
token?: string;
|
||||
workspace: string;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user