thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: revamp the API tokens workflow (#2880)

Browse Source 
* 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:
Aaryan Khandelwal 2023-11-27 12:14:06 +05:30 committed by GitHub
parent 51dff31926
commit b2ac7b9ac6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 711 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/document-editor/src/ui/components/summary-popover.tsx
View File

@ -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}

4
packages/ui/src/dropdowns/custom-select.tsx
View File

@ -51,11 +51,11 @@ 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"
} ${customButtonClassName}`}
} ${customButtonClassName}`}
>
{customButton}
</button>

86
web/components/api-token/delete-token-modal.tsx
View File

@ -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",
});
})
.finally(() => {
setDeleteLoading(false);
handleClose();
});
message: err?.message ?? "Something went wrong. Please try again.",
})
)
.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>

30
web/components/api-token/empty-state.tsx
View File

@ -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>
{
<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
<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={onClick}>
Add token
</Button>
</div>
</div>

160
web/components/api-token/form/index.tsx
View File

@ -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>
);
};

56
web/components/api-token/form/token-description.tsx
View File

@ -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>
)
}
/>
);
};

111
web/components/api-token/form/token-expiry.tsx
View File

@ -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>
</>
);
};

59
web/components/api-token/form/token-key-section.tsx
View File

@ -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;
};

69
web/components/api-token/form/token-title.tsx
View File

@ -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>
)
}
/>
);
};

2
web/components/api-token/index.ts
View File

@ -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
View 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
View 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
View 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
View File

@ -0,0 +1,3 @@
export * from "./create-token-modal";
export * from "./form";
export * from "./generated-token-details";

83
web/components/api-token/token-list-item.tsx
View File

@ -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>
<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>
)}
{
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-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 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>
</div>
</Link>
);
</>
);
};

8
web/components/pages/pages-list/recent-pages-list.tsx
View File

@ -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>
);

38
web/helpers/date-time.helper.ts
View File

@ -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("-");
};

19
web/helpers/download.helper.ts
View File

@ -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
};

10
web/layouts/settings-layout/workspace/sidebar.tsx
View File

@ -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
View 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;

69
web/pages/[workspaceSlug]/settings/api-tokens/[tokenId].tsx
View File

@ -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;

36
web/pages/[workspaceSlug]/settings/api-tokens/create.tsx
View File

@ -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);

65
web/pages/[workspaceSlug]/settings/api-tokens/index.tsx
View File

@ -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;

3
web/services/api_token.service.ts
View File

@ -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
View File

@ -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;
}