forked from github/plane
chore: optimizations and file name changes (#2845)
* fix: deepsource antipatterns * fix: deepsource exclude file patterns * chore: file name changes and removed unwanted variables * fix: changing version number for editor
This commit is contained in:
parent
a17b08dd15
commit
2481706581
@ -1,5 +1,11 @@
|
|||||||
version = 1
|
version = 1
|
||||||
|
|
||||||
|
exclude_patterns = [
|
||||||
|
"bin/**",
|
||||||
|
"**/node_modules/",
|
||||||
|
"**/*.min.js"
|
||||||
|
]
|
||||||
|
|
||||||
[[analyzers]]
|
[[analyzers]]
|
||||||
name = "shell"
|
name = "shell"
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@plane/document-editor",
|
"name": "@plane/document-editor",
|
||||||
"version": "0.0.1",
|
"version": "0.1.0",
|
||||||
"description": "Package that powers Plane's Pages Editor",
|
"description": "Package that powers Plane's Pages Editor",
|
||||||
"main": "./dist/index.mjs",
|
"main": "./dist/index.mjs",
|
||||||
"module": "./dist/index.mjs",
|
"module": "./dist/index.mjs",
|
||||||
|
@ -8,6 +8,7 @@ export const HeadingComp = ({
|
|||||||
<h3
|
<h3
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
className="ml-4 mt-3 cursor-pointer text-sm font-bold font-medium leading-[125%] tracking-tight hover:text-custom-primary max-md:ml-2.5"
|
className="ml-4 mt-3 cursor-pointer text-sm font-bold font-medium leading-[125%] tracking-tight hover:text-custom-primary max-md:ml-2.5"
|
||||||
|
role="button"
|
||||||
>
|
>
|
||||||
{heading}
|
{heading}
|
||||||
</h3>
|
</h3>
|
||||||
@ -23,6 +24,7 @@ export const SubheadingComp = ({
|
|||||||
<p
|
<p
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
className="ml-6 mt-2 text-xs cursor-pointer font-medium tracking-tight text-gray-400 hover:text-custom-primary"
|
className="ml-6 mt-2 text-xs cursor-pointer font-medium tracking-tight text-gray-400 hover:text-custom-primary"
|
||||||
|
role="button"
|
||||||
>
|
>
|
||||||
{subHeading}
|
{subHeading}
|
||||||
</p>
|
</p>
|
||||||
|
@ -82,7 +82,7 @@ const DocumentReadOnlyEditor = ({
|
|||||||
<EditorHeader
|
<EditorHeader
|
||||||
isLocked={!pageLockConfig ? false : pageLockConfig.is_locked}
|
isLocked={!pageLockConfig ? false : pageLockConfig.is_locked}
|
||||||
isArchived={!pageArchiveConfig ? false : pageArchiveConfig.is_archived}
|
isArchived={!pageArchiveConfig ? false : pageArchiveConfig.is_archived}
|
||||||
readonly={true}
|
readonly
|
||||||
editor={editor}
|
editor={editor}
|
||||||
sidePeekVisible={sidePeekVisible}
|
sidePeekVisible={sidePeekVisible}
|
||||||
setSidePeekVisible={setSidePeekVisible}
|
setSidePeekVisible={setSidePeekVisible}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@plane/lite-text-editor",
|
"name": "@plane/lite-text-editor",
|
||||||
"version": "0.0.1",
|
"version": "0.1.0",
|
||||||
"description": "Package that powers Plane's Comment Editor",
|
"description": "Package that powers Plane's Comment Editor",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./dist/index.mjs",
|
"main": "./dist/index.mjs",
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@plane/rich-text-editor",
|
"name": "@plane/rich-text-editor",
|
||||||
"version": "0.0.1",
|
"version": "0.1.0",
|
||||||
"description": "Rich Text Editor that powers Plane",
|
"description": "Rich Text Editor that powers Plane",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./dist/index.mjs",
|
"main": "./dist/index.mjs",
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
"name": "@plane/ui",
|
"name": "@plane/ui",
|
||||||
"description": "UI components shared across multiple apps internally",
|
"description": "UI components shared across multiple apps internally",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.1",
|
"version": "0.1.0",
|
||||||
"main": "./dist/index.js",
|
"main": "./dist/index.js",
|
||||||
"module": "./dist/index.mjs",
|
"module": "./dist/index.mjs",
|
||||||
"types": "./dist/index.d.ts",
|
"types": "./dist/index.d.ts",
|
||||||
|
@ -43,7 +43,11 @@ export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* name */}
|
{/* name */}
|
||||||
<h6 onClick={handleBlockClick} className="text-sm font-medium break-words line-clamp-2 cursor-pointer">
|
<h6
|
||||||
|
onClick={handleBlockClick}
|
||||||
|
role="button"
|
||||||
|
className="text-sm font-medium break-words line-clamp-2 cursor-pointer"
|
||||||
|
>
|
||||||
{issue.name}
|
{issue.name}
|
||||||
</h6>
|
</h6>
|
||||||
|
|
||||||
|
@ -1,55 +0,0 @@
|
|||||||
import { TextArea } from "@plane/ui";
|
|
||||||
import { Control, Controller, FieldErrors } from "react-hook-form";
|
|
||||||
import { IApiToken } from "types/api_token";
|
|
||||||
import { IApiFormFields } from "./types";
|
|
||||||
import { Dispatch, SetStateAction } from "react";
|
|
||||||
|
|
||||||
interface IApiTokenDescription {
|
|
||||||
generatedToken: IApiToken | null | undefined;
|
|
||||||
control: Control<IApiFormFields, any>;
|
|
||||||
focusDescription: boolean;
|
|
||||||
setFocusTitle: Dispatch<SetStateAction<boolean>>;
|
|
||||||
setFocusDescription: Dispatch<SetStateAction<boolean>>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ApiTokenDescription = ({
|
|
||||||
generatedToken,
|
|
||||||
control,
|
|
||||||
focusDescription,
|
|
||||||
setFocusTitle,
|
|
||||||
setFocusDescription,
|
|
||||||
}: IApiTokenDescription) => (
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="description"
|
|
||||||
render={({ field: { value, onChange } }) =>
|
|
||||||
focusDescription ? (
|
|
||||||
<TextArea
|
|
||||||
id="description"
|
|
||||||
name="description"
|
|
||||||
autoFocus={true}
|
|
||||||
onBlur={() => {
|
|
||||||
setFocusDescription(false);
|
|
||||||
}}
|
|
||||||
value={value}
|
|
||||||
defaultValue={value}
|
|
||||||
onChange={onChange}
|
|
||||||
placeholder="Description"
|
|
||||||
className="mt-3"
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<p
|
|
||||||
onClick={() => {
|
|
||||||
if (generatedToken != null) return;
|
|
||||||
setFocusTitle(false);
|
|
||||||
setFocusDescription(true);
|
|
||||||
}}
|
|
||||||
className={`${value.length === 0 ? "text-custom-text-400/60" : "text-custom-text-300"} text-lg pt-3`}
|
|
||||||
>
|
|
||||||
{value.length != 0 ? value : "Description"}
|
|
||||||
</p>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
@ -1,110 +0,0 @@
|
|||||||
import { Menu, Transition } from "@headlessui/react";
|
|
||||||
import { ToggleSwitch } from "@plane/ui";
|
|
||||||
import { Dispatch, Fragment, SetStateAction } from "react";
|
|
||||||
import { Control, Controller } from "react-hook-form";
|
|
||||||
import { IApiFormFields } from "./types";
|
|
||||||
|
|
||||||
interface IApiTokenExpiry {
|
|
||||||
neverExpires: boolean;
|
|
||||||
selectedExpiry: number;
|
|
||||||
setSelectedExpiry: Dispatch<SetStateAction<number>>;
|
|
||||||
setNeverExpire: Dispatch<SetStateAction<boolean>>;
|
|
||||||
renderExpiry: () => string;
|
|
||||||
control: Control<IApiFormFields, any>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const expiryOptions = [
|
|
||||||
{
|
|
||||||
title: "7 Days",
|
|
||||||
days: 7,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "30 Days",
|
|
||||||
days: 30,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "1 Month",
|
|
||||||
days: 30,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "3 Months",
|
|
||||||
days: 90,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "1 Year",
|
|
||||||
days: 365,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const ApiTokenExpiry = ({
|
|
||||||
neverExpires,
|
|
||||||
selectedExpiry,
|
|
||||||
setSelectedExpiry,
|
|
||||||
setNeverExpire,
|
|
||||||
renderExpiry,
|
|
||||||
control,
|
|
||||||
}: IApiTokenExpiry) => (
|
|
||||||
<>
|
|
||||||
<Menu>
|
|
||||||
<p className="text-sm font-medium mb-2"> Expiration Date</p>
|
|
||||||
<Menu.Button className={"w-[40%]"} disabled={neverExpires}>
|
|
||||||
<div className="py-3 w-full font-medium px-3 flex border border-custom-border-200 rounded-md justify-center items-baseline">
|
|
||||||
<p className={`text-base ${neverExpires ? "text-custom-text-400/40" : ""}`}>
|
|
||||||
{expiryOptions[selectedExpiry].title.toLocaleLowerCase()}
|
|
||||||
</p>
|
|
||||||
<p className={`text-sm mr-auto ml-2 text-custom-text-400${neverExpires ? "/40" : ""}`}>({renderExpiry()})</p>
|
|
||||||
</div>
|
|
||||||
</Menu.Button>
|
|
||||||
<Transition
|
|
||||||
as={Fragment}
|
|
||||||
enter="transition ease-out duration-100"
|
|
||||||
enterFrom="transform opacity-0 scale-95"
|
|
||||||
enterTo="transform opacity-100 scale-100"
|
|
||||||
leave="transition ease-in duration-75"
|
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
|
||||||
leaveTo="transform opacity-0 scale-95"
|
|
||||||
>
|
|
||||||
<Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-sm max-h-36 border origin-top-right mt-1 overflow-auto min-w-[10rem] border-custom-border-100 p-1 shadow-lg focus:outline-none bg-custom-background-100">
|
|
||||||
{expiryOptions.map((option, index) => (
|
|
||||||
<Menu.Item key={index}>
|
|
||||||
{({ active }) => (
|
|
||||||
<div className="py-1">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedExpiry(index);
|
|
||||||
}}
|
|
||||||
className={`w-full text-sm select-none truncate rounded px-3 py-1.5 text-left text-custom-text-300 hover:bg-custom-background-80 ${
|
|
||||||
active ? "bg-custom-background-80" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{option.title}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
))}
|
|
||||||
</Menu.Items>
|
|
||||||
</Transition>
|
|
||||||
</Menu>
|
|
||||||
|
|
||||||
<div className="mt-4 mb-6 flex items-center">
|
|
||||||
<span className="text-sm font-medium"> Never Expires</span>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="never_expires"
|
|
||||||
render={({ field: { onChange, value } }) => (
|
|
||||||
<ToggleSwitch
|
|
||||||
className="ml-3"
|
|
||||||
value={value}
|
|
||||||
onChange={(val) => {
|
|
||||||
onChange(val);
|
|
||||||
setNeverExpire(val);
|
|
||||||
}}
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
@ -1,69 +0,0 @@
|
|||||||
import { Input } from "@plane/ui";
|
|
||||||
import { Dispatch, SetStateAction } from "react";
|
|
||||||
import { Control, Controller, FieldErrors } from "react-hook-form";
|
|
||||||
import { IApiToken } from "types/api_token";
|
|
||||||
import { IApiFormFields } from "./types";
|
|
||||||
|
|
||||||
interface IApiTokenTitle {
|
|
||||||
generatedToken: IApiToken | null | undefined;
|
|
||||||
errors: FieldErrors<IApiFormFields>;
|
|
||||||
control: Control<IApiFormFields, any>;
|
|
||||||
focusTitle: boolean;
|
|
||||||
setFocusTitle: Dispatch<SetStateAction<boolean>>;
|
|
||||||
setFocusDescription: Dispatch<SetStateAction<boolean>>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ApiTokenTitle = ({
|
|
||||||
generatedToken,
|
|
||||||
errors,
|
|
||||||
control,
|
|
||||||
focusTitle,
|
|
||||||
setFocusTitle,
|
|
||||||
setFocusDescription,
|
|
||||||
}: IApiTokenTitle) => (
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="title"
|
|
||||||
rules={{
|
|
||||||
required: "Title is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 255,
|
|
||||||
message: "Title should be less than 255 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
render={({ field: { value, onChange, ref } }) =>
|
|
||||||
focusTitle ? (
|
|
||||||
<Input
|
|
||||||
id="title"
|
|
||||||
name="title"
|
|
||||||
type="text"
|
|
||||||
inputSize="md"
|
|
||||||
onBlur={() => {
|
|
||||||
setFocusTitle(false);
|
|
||||||
}}
|
|
||||||
onError={() => {
|
|
||||||
console.log("error");
|
|
||||||
}}
|
|
||||||
autoFocus={true}
|
|
||||||
value={value}
|
|
||||||
onChange={onChange}
|
|
||||||
ref={ref}
|
|
||||||
hasError={!!errors.title}
|
|
||||||
placeholder="Title"
|
|
||||||
className="resize-none text-xl w-full"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<p
|
|
||||||
onClick={() => {
|
|
||||||
if (generatedToken != null) return;
|
|
||||||
setFocusDescription(false);
|
|
||||||
setFocusTitle(true);
|
|
||||||
}}
|
|
||||||
className={`${value.length === 0 ? "text-custom-text-400/60" : ""} font-medium text-[24px]`}
|
|
||||||
>
|
|
||||||
{value.length != 0 ? value : "Api Title"}
|
|
||||||
</p>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
|
@ -1,5 +0,0 @@
|
|||||||
export interface IApiFormFields {
|
|
||||||
never_expires: boolean;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
@ -7,7 +7,7 @@ import { Button } from "@plane/ui";
|
|||||||
//hooks
|
//hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
//services
|
//services
|
||||||
import { ApiTokenService } from "services/api_token.service";
|
import { APITokenService } from "services/api_token.service";
|
||||||
//headless ui
|
//headless ui
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
|
|
||||||
@ -17,10 +17,15 @@ type Props = {
|
|||||||
tokenId?: string;
|
tokenId?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const apiTokenService = new ApiTokenService();
|
const apiTokenService = new APITokenService();
|
||||||
const DeleteTokenModal: FC<Props> = ({ isOpen, handleClose, tokenId }) => {
|
|
||||||
|
export const DeleteTokenModal: FC<Props> = (props) => {
|
||||||
|
const { isOpen, handleClose, tokenId } = props;
|
||||||
|
// states
|
||||||
const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
|
const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
|
||||||
|
// hooks
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
// router
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, tokenId: tokenIdFromQuery } = router.query;
|
const { workspaceSlug, tokenId: tokenIdFromQuery } = router.query;
|
||||||
|
|
||||||
@ -107,5 +112,3 @@ const DeleteTokenModal: FC<Props> = ({ isOpen, handleClose, tokenId }) => {
|
|||||||
</Transition.Root>
|
</Transition.Root>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DeleteTokenModal;
|
|
||||||
|
@ -8,10 +8,13 @@ import { Button } from "@plane/ui";
|
|||||||
// assets
|
// assets
|
||||||
import emptyApiTokens from "public/empty-state/api-token.svg";
|
import emptyApiTokens from "public/empty-state/api-token.svg";
|
||||||
|
|
||||||
const ApiTokenEmptyState = () => {
|
export const APITokenEmptyState = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`flex items-center justify-center mx-auto rounded-sm border border-custom-border-200 bg-custom-background-90 py-10 px-16 w-full`}>
|
<div
|
||||||
|
className={`flex items-center justify-center mx-auto rounded-sm border border-custom-border-200 bg-custom-background-90 py-10 px-16 w-full`}
|
||||||
|
>
|
||||||
<div className="text-center flex flex-col items-center w-full">
|
<div className="text-center flex flex-col items-center w-full">
|
||||||
<Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
|
<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>
|
||||||
@ -32,5 +35,3 @@ const ApiTokenEmptyState = () => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ApiTokenEmptyState;
|
|
||||||
|
@ -1,36 +1,53 @@
|
|||||||
|
import { Dispatch, SetStateAction, useState, FC } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
|
||||||
import { addDays, renderDateFormat } from "helpers/date-time.helper";
|
|
||||||
import { IApiToken } from "types/api_token";
|
|
||||||
import { csvDownload } from "helpers/download.helper";
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { Dispatch, SetStateAction, useState } from "react";
|
// helpers
|
||||||
import useToast from "hooks/use-toast";
|
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 { useMobxStore } from "lib/mobx/store-provider";
|
||||||
import { ApiTokenService } from "services/api_token.service";
|
import useToast from "hooks/use-toast";
|
||||||
import { ApiTokenTitle } from "./ApiTokenTitle";
|
// services
|
||||||
import { ApiTokenDescription } from "./ApiTokenDescription";
|
import { APITokenService } from "services/api_token.service";
|
||||||
import { ApiTokenExpiry, expiryOptions } from "./ApiTokenExpiry";
|
// 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";
|
import { Button } from "@plane/ui";
|
||||||
import { ApiTokenKeySection } from "./ApiTokenKeySection";
|
|
||||||
|
|
||||||
interface IApiTokenForm {
|
interface APITokenFormProps {
|
||||||
generatedToken: IApiToken | null | undefined;
|
generatedToken: IApiToken | null | undefined;
|
||||||
setGeneratedToken: Dispatch<SetStateAction<IApiToken | null | undefined>>;
|
setGeneratedToken: Dispatch<SetStateAction<IApiToken | null | undefined>>;
|
||||||
setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
|
setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const apiTokenService = new ApiTokenService();
|
export interface APIFormFields {
|
||||||
export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteTokenModal }: IApiTokenForm) => {
|
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 [loading, setLoading] = useState<boolean>(false);
|
||||||
const [neverExpires, setNeverExpire] = useState<boolean>(false);
|
const [neverExpires, setNeverExpire] = useState<boolean>(false);
|
||||||
const [focusTitle, setFocusTitle] = useState<boolean>(false);
|
const [focusTitle, setFocusTitle] = useState<boolean>(false);
|
||||||
const [focusDescription, setFocusDescription] = useState<boolean>(false);
|
const [focusDescription, setFocusDescription] = useState<boolean>(false);
|
||||||
const [selectedExpiry, setSelectedExpiry] = useState<number>(1);
|
const [selectedExpiry, setSelectedExpiry] = useState<number>(1);
|
||||||
|
// hooks
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
const { theme: themStore } = useMobxStore();
|
// store
|
||||||
|
const {
|
||||||
|
theme: { sidebarCollapsed },
|
||||||
|
} = useMobxStore();
|
||||||
|
// router
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
|
|
||||||
@ -48,11 +65,11 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
|
|||||||
|
|
||||||
const getExpiryDate = (): string | null => {
|
const getExpiryDate = (): string | null => {
|
||||||
if (neverExpires === true) return null;
|
if (neverExpires === true) return null;
|
||||||
return addDays({ date: new Date(), days: expiryOptions[selectedExpiry].days }).toISOString();
|
return addDays({ date: new Date(), days: EXPIRY_OPTIONS[selectedExpiry].days }).toISOString();
|
||||||
};
|
};
|
||||||
|
|
||||||
function renderExpiry(): string {
|
function renderExpiry(): string {
|
||||||
return renderDateFormat(addDays({ date: new Date(), days: expiryOptions[selectedExpiry].days }), true);
|
return renderDateFormat(addDays({ date: new Date(), days: EXPIRY_OPTIONS[selectedExpiry].days }), true);
|
||||||
}
|
}
|
||||||
|
|
||||||
const downloadSecretKey = (token: IApiToken) => {
|
const downloadSecretKey = (token: IApiToken) => {
|
||||||
@ -95,10 +112,10 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
|
|||||||
setFocusTitle(true);
|
setFocusTitle(true);
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
className={`${themStore.sidebarCollapsed ? "xl:w-[50%] lg:w-[60%] " : "w-[60%]"} mx-auto py-8`}
|
className={`${sidebarCollapsed ? "xl:w-[50%] lg:w-[60%] " : "w-[60%]"} mx-auto py-8`}
|
||||||
>
|
>
|
||||||
<div className="border-b border-custom-border-200 pb-4">
|
<div className="border-b border-custom-border-200 pb-4">
|
||||||
<ApiTokenTitle
|
<APITokenTitle
|
||||||
generatedToken={generatedToken}
|
generatedToken={generatedToken}
|
||||||
control={control}
|
control={control}
|
||||||
errors={errors}
|
errors={errors}
|
||||||
@ -107,7 +124,7 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
|
|||||||
setFocusDescription={setFocusDescription}
|
setFocusDescription={setFocusDescription}
|
||||||
/>
|
/>
|
||||||
{errors.title && focusTitle && <p className=" text-red-600">{errors.title.message}</p>}
|
{errors.title && focusTitle && <p className=" text-red-600">{errors.title.message}</p>}
|
||||||
<ApiTokenDescription
|
<APITokenDescription
|
||||||
generatedToken={generatedToken}
|
generatedToken={generatedToken}
|
||||||
control={control}
|
control={control}
|
||||||
focusDescription={focusDescription}
|
focusDescription={focusDescription}
|
||||||
@ -119,7 +136,7 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
|
|||||||
{!generatedToken && (
|
{!generatedToken && (
|
||||||
<div className="mt-12">
|
<div className="mt-12">
|
||||||
<>
|
<>
|
||||||
<ApiTokenExpiry
|
<APITokenExpiry
|
||||||
neverExpires={neverExpires}
|
neverExpires={neverExpires}
|
||||||
selectedExpiry={selectedExpiry}
|
selectedExpiry={selectedExpiry}
|
||||||
setSelectedExpiry={setSelectedExpiry}
|
setSelectedExpiry={setSelectedExpiry}
|
||||||
@ -133,7 +150,7 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
|
|||||||
</>
|
</>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<ApiTokenKeySection
|
<APITokenKeySection
|
||||||
generatedToken={generatedToken}
|
generatedToken={generatedToken}
|
||||||
renderExpiry={renderExpiry}
|
renderExpiry={renderExpiry}
|
||||||
setDeleteTokenModal={setDeleteTokenModal}
|
setDeleteTokenModal={setDeleteTokenModal}
|
56
web/components/api-token/form/token-description.tsx
Normal file
56
web/components/api-token/form/token-description.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
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
Normal file
111
web/components/api-token/form/token-expiry.tsx
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
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,16 +1,22 @@
|
|||||||
import { Button } from "@plane/ui";
|
import { Dispatch, SetStateAction, FC } from "react";
|
||||||
import useToast from "hooks/use-toast";
|
// icons
|
||||||
import { Copy } from "lucide-react";
|
import { Copy } from "lucide-react";
|
||||||
import { Dispatch, SetStateAction } from "react";
|
// ui
|
||||||
|
import { Button } from "@plane/ui";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// types
|
||||||
import { IApiToken } from "types/api_token";
|
import { IApiToken } from "types/api_token";
|
||||||
|
|
||||||
interface IApiTokenKeySection {
|
interface APITokenKeySectionProps {
|
||||||
generatedToken: IApiToken | null | undefined;
|
generatedToken: IApiToken | null | undefined;
|
||||||
renderExpiry: () => string;
|
renderExpiry: () => string;
|
||||||
setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
|
setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ApiTokenKeySection = ({ generatedToken, renderExpiry, setDeleteTokenModal }: IApiTokenKeySection) => {
|
export const APITokenKeySection: FC<APITokenKeySectionProps> = (props) => {
|
||||||
|
const { generatedToken, renderExpiry, setDeleteTokenModal } = props;
|
||||||
|
// hooks
|
||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
return generatedToken ? (
|
return generatedToken ? (
|
69
web/components/api-token/form/token-title.tsx
Normal file
69
web/components/api-token/form/token-title.tsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
4
web/components/api-token/index.ts
Normal file
4
web/components/api-token/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export * from "./delete-token-modal";
|
||||||
|
export * from "./empty-state";
|
||||||
|
export * from "./token-list-item";
|
||||||
|
export * from "./form";
|
@ -10,7 +10,7 @@ interface IApiTokenListItem {
|
|||||||
token: IApiToken;
|
token: IApiToken;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ApiTokenListItem = ({ token, workspaceSlug }: IApiTokenListItem) => (
|
export const APITokenListItem = ({ token, workspaceSlug }: IApiTokenListItem) => (
|
||||||
<Link href={`/${workspaceSlug}/settings/api-tokens/${token.id}`} key={token.id}>
|
<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">
|
<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]" />
|
<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]" />
|
@ -151,7 +151,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
|
|||||||
value={value}
|
value={value}
|
||||||
setShouldShowAlert={setShowAlert}
|
setShouldShowAlert={setShowAlert}
|
||||||
setIsSubmitting={setIsSubmitting}
|
setIsSubmitting={setIsSubmitting}
|
||||||
dragDropEnabled={true}
|
dragDropEnabled
|
||||||
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
|
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
|
||||||
noBorder={!isAllowed}
|
noBorder={!isAllowed}
|
||||||
onChange={(description: Object, description_html: string) => {
|
onChange={(description: Object, description_html: string) => {
|
||||||
|
@ -140,7 +140,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
|
|||||||
</div>
|
</div>
|
||||||
<span>{errors.name ? errors.name.message : null}</span>
|
<span>{errors.name ? errors.name.message : null}</span>
|
||||||
<RichTextEditor
|
<RichTextEditor
|
||||||
dragDropEnabled={true}
|
dragDropEnabled
|
||||||
cancelUploadImage={fileService.cancelUpload}
|
cancelUploadImage={fileService.cancelUpload}
|
||||||
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
|
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
|
||||||
deleteFile={fileService.deleteImage}
|
deleteFile={fileService.deleteImage}
|
||||||
|
@ -207,7 +207,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||||||
: "text-custom-text-400 hover:text-custom-text-200"
|
: "text-custom-text-400 hover:text-custom-text-200"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 `} />
|
<mode.icon className="h-4 w-4 flex-shrink-0 -my-1" />
|
||||||
{mode.title}
|
{mode.title}
|
||||||
</div>
|
</div>
|
||||||
</CustomSelect.Option>
|
</CustomSelect.Option>
|
||||||
|
@ -96,7 +96,7 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
|
|||||||
value={issue?.state_detail || null}
|
value={issue?.state_detail || null}
|
||||||
onChange={(data) => handleStateChange(data)}
|
onChange={(data) => handleStateChange(data)}
|
||||||
disabled={false}
|
disabled={false}
|
||||||
hideDropdownArrow={true}
|
hideDropdownArrow
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -128,7 +128,7 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
|
|||||||
<IssuePropertyAssignee
|
<IssuePropertyAssignee
|
||||||
projectId={issue?.project_detail?.id || null}
|
projectId={issue?.project_detail?.id || null}
|
||||||
value={issue?.assignees || null}
|
value={issue?.assignees || null}
|
||||||
hideDropdownArrow={true}
|
hideDropdownArrow
|
||||||
onChange={(val) => handleAssigneeChange(val)}
|
onChange={(val) => handleAssigneeChange(val)}
|
||||||
disabled={false}
|
disabled={false}
|
||||||
/>
|
/>
|
||||||
|
@ -92,7 +92,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
|
|||||||
<CreateUpdateLabelInline
|
<CreateUpdateLabelInline
|
||||||
labelForm={isEditLabelForm}
|
labelForm={isEditLabelForm}
|
||||||
setLabelForm={setEditLabelForm}
|
setLabelForm={setEditLabelForm}
|
||||||
isUpdating={true}
|
isUpdating
|
||||||
labelToUpdate={label}
|
labelToUpdate={label}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setEditLabelForm(false);
|
setEditLabelForm(false);
|
||||||
|
@ -70,7 +70,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
|
|||||||
<CreateUpdateLabelInline
|
<CreateUpdateLabelInline
|
||||||
labelForm={isEditLabelForm}
|
labelForm={isEditLabelForm}
|
||||||
setLabelForm={setEditLabelForm}
|
setLabelForm={setEditLabelForm}
|
||||||
isUpdating={true}
|
isUpdating
|
||||||
labelToUpdate={label}
|
labelToUpdate={label}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setEditLabelForm(false);
|
setEditLabelForm(false);
|
||||||
|
@ -133,7 +133,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
|
|||||||
<Droppable
|
<Droppable
|
||||||
droppableId={LABELS_ROOT}
|
droppableId={LABELS_ROOT}
|
||||||
isCombineEnabled={!isDraggingGroup}
|
isCombineEnabled={!isDraggingGroup}
|
||||||
ignoreContainerClipping={true}
|
ignoreContainerClipping
|
||||||
isDropDisabled={isUpdating}
|
isDropDisabled={isUpdating}
|
||||||
>
|
>
|
||||||
{(droppableProvided, droppableSnapshot) => (
|
{(droppableProvided, droppableSnapshot) => (
|
||||||
|
@ -17,7 +17,7 @@ import OnboardingStepIndicator from "components/account/step-indicator";
|
|||||||
// hooks
|
// hooks
|
||||||
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
|
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
|
||||||
// icons
|
// icons
|
||||||
import { Check, ChevronDown, Plus, User2, X, XCircle } from "lucide-react";
|
import { Check, ChevronDown, Plus, User2, XCircle } from "lucide-react";
|
||||||
// types
|
// types
|
||||||
import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
|
import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
|
||||||
// constants
|
// constants
|
||||||
|
@ -52,6 +52,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
|
|||||||
: "text-custom-text-200 border-transparent"
|
: "text-custom-text-200 border-transparent"
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setStep(option.key)}
|
onClick={() => setStep(option.key)}
|
||||||
|
role="button"
|
||||||
>
|
>
|
||||||
<option.Icon className="h-4 w-4" aria-hidden="true" />
|
<option.Icon className="h-4 w-4" aria-hidden="true" />
|
||||||
{option.key}
|
{option.key}
|
||||||
|
@ -29,11 +29,11 @@ type Props = {
|
|||||||
user?: IUser;
|
user?: IUser;
|
||||||
};
|
};
|
||||||
|
|
||||||
const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
|
// const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
|
||||||
value: timeZone.value,
|
// value: timeZone.value,
|
||||||
query: timeZone.label + " " + timeZone.value,
|
// query: timeZone.label + " " + timeZone.value,
|
||||||
content: timeZone.label,
|
// content: timeZone.label,
|
||||||
}));
|
// }));
|
||||||
|
|
||||||
const useCases = [
|
const useCases = [
|
||||||
"Build Products",
|
"Build Products",
|
||||||
@ -51,7 +51,7 @@ const fileService = new FileService();
|
|||||||
export const UserDetails: React.FC<Props> = observer((props) => {
|
export const UserDetails: React.FC<Props> = observer((props) => {
|
||||||
const { user } = props;
|
const { user } = props;
|
||||||
const [isRemoving, setIsRemoving] = useState(false);
|
const [isRemoving, setIsRemoving] = useState(false);
|
||||||
const [selectedUsecase, setSelectedUsecase] = useState<number | null>();
|
// const [selectedUsecase, setSelectedUsecase] = useState<number | null>();
|
||||||
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
|
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
|
||||||
const {
|
const {
|
||||||
user: userStore,
|
user: userStore,
|
||||||
@ -210,7 +210,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div className="md:w-11/12 relative flex justify-end bottom-0 ml-auto">
|
<div className="md:w-11/12 relative flex justify-end bottom-0 ml-auto">
|
||||||
<Image src={IssuesSvg} className="w-2/3 h-[w-2/3] object-cover" />
|
<Image src={IssuesSvg} className="w-2/3 h-[w-2/3] object-cover" alt="issue-image" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,7 +51,7 @@ export const Workspace: React.FC<Props> = (props) => {
|
|||||||
|
|
||||||
await workspaceStore
|
await workspaceStore
|
||||||
.createWorkspace(formData)
|
.createWorkspace(formData)
|
||||||
.then(async (res) => {
|
.then(async () => {
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
type: "success",
|
type: "success",
|
||||||
title: "Success!",
|
title: "Success!",
|
||||||
@ -137,13 +137,12 @@ export const Workspace: React.FC<Props> = (props) => {
|
|||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
name="slug"
|
name="slug"
|
||||||
render={({ field: { value, onChange, ref } }) => (
|
render={({ field: { value, ref } }) => (
|
||||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||||
<Input
|
<Input
|
||||||
id="slug"
|
id="slug"
|
||||||
name="slug"
|
name="slug"
|
||||||
type="text"
|
type="text"
|
||||||
prefix="asdasdasdas"
|
|
||||||
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
|
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const host = window.location.host;
|
const host = window.location.host;
|
||||||
|
@ -26,7 +26,7 @@ export const EmptyState: React.FC<Props> = ({
|
|||||||
secondaryButton,
|
secondaryButton,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
}) => (
|
}) => (
|
||||||
<div className={`flex items-center lg:p-20 md:px-10 px-5 justify-center h-full w-full`}>
|
<div className="flex items-center lg:p-20 md:px-10 px-5 justify-center h-full w-full">
|
||||||
<div className="relative h-full w-full max-w-6xl">
|
<div className="relative h-full w-full max-w-6xl">
|
||||||
<Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} layout="fill" />
|
<Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} layout="fill" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -52,7 +52,7 @@ export const ProjectMemberList: React.FC = observer(() => {
|
|||||||
className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
|
className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
autoFocus={true}
|
autoFocus
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -184,7 +184,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isCollapsed && <p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>}
|
{!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
|
||||||
</div>
|
</div>
|
||||||
{!isCollapsed && (
|
{!isCollapsed && (
|
||||||
<ChevronDown
|
<ChevronDown
|
||||||
|
@ -50,7 +50,7 @@ type EmptySpaceItemProps = {
|
|||||||
|
|
||||||
const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action }) => (
|
const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action }) => (
|
||||||
<>
|
<>
|
||||||
<li className="cursor-pointer" onClick={action}>
|
<li className="cursor-pointer" onClick={action} role="button">
|
||||||
<div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
|
<div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
|
<span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
|
||||||
|
@ -1,11 +1,13 @@
|
|||||||
|
import React, { FC, useState } from "react";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
|
// icons
|
||||||
|
import { AlertTriangle } from "lucide-react";
|
||||||
|
// ui
|
||||||
import { Button } from "@plane/ui";
|
import { Button } from "@plane/ui";
|
||||||
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
import { AlertTriangle } from "lucide-react";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import React, { FC, useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
|
|
||||||
interface IDeleteWebhook {
|
interface IDeleteWebhook {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
|
@ -72,6 +72,7 @@ export const WebHookForm: FC<IWebHookForm> = observer((props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
reset({ ...getValues(), ...allWebhookOptions });
|
reset({ ...getValues(), ...allWebhookOptions });
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [watch && watch(WEBHOOK_EVENTS)]);
|
}, [watch && watch(WEBHOOK_EVENTS)]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -68,17 +68,13 @@ export const WorkspaceDetails: FC = observer(() => {
|
|||||||
|
|
||||||
await updateWorkspace(currentWorkspace.slug, payload)
|
await updateWorkspace(currentWorkspace.slug, payload)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
trackEvent(
|
trackEvent("UPDATE_WORKSPACE", res);
|
||||||
'UPDATE_WORKSPACE',
|
|
||||||
res
|
|
||||||
)
|
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
title: "Success",
|
title: "Success",
|
||||||
type: "success",
|
type: "success",
|
||||||
message: "Workspace updated successfully",
|
message: "Workspace updated successfully",
|
||||||
|
});
|
||||||
})
|
})
|
||||||
}
|
|
||||||
)
|
|
||||||
.catch((err) => console.error(err));
|
.catch((err) => console.error(err));
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -89,7 +85,7 @@ export const WorkspaceDetails: FC = observer(() => {
|
|||||||
|
|
||||||
fileService.deleteFile(currentWorkspace.id, url).then(() => {
|
fileService.deleteFile(currentWorkspace.id, url).then(() => {
|
||||||
updateWorkspace(currentWorkspace.slug, { logo: "" })
|
updateWorkspace(currentWorkspace.slug, { logo: "" })
|
||||||
.then((res) => {
|
.then(() => {
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
type: "success",
|
type: "success",
|
||||||
title: "Success!",
|
title: "Success!",
|
||||||
|
@ -200,7 +200,7 @@ const PageDetailsPage: NextPageWithLayout = () => {
|
|||||||
value={pageDetails.description_html}
|
value={pageDetails.description_html}
|
||||||
customClassName={"tracking-tight self-center w-full max-w-full px-0"}
|
customClassName={"tracking-tight self-center w-full max-w-full px-0"}
|
||||||
borderOnFocus={false}
|
borderOnFocus={false}
|
||||||
noBorder={true}
|
noBorder
|
||||||
documentDetails={{
|
documentDetails={{
|
||||||
title: pageDetails.name,
|
title: pageDetails.name,
|
||||||
created_by: pageDetails.created_by,
|
created_by: pageDetails.created_by,
|
||||||
|
@ -1,20 +1,18 @@
|
|||||||
// react
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
// next
|
|
||||||
import { NextPage } from "next";
|
import { NextPage } from "next";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
// layouts
|
// layouts
|
||||||
import { AppLayout } from "layouts/app-layout";
|
import { AppLayout } from "layouts/app-layout";
|
||||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||||
// components
|
// components
|
||||||
import DeleteTokenModal from "components/api-token/delete-token-modal";
|
import { DeleteTokenModal } from "components/api-token";
|
||||||
import { WorkspaceSettingHeader } from "components/headers";
|
import { WorkspaceSettingHeader } from "components/headers";
|
||||||
// ui
|
// ui
|
||||||
import { Spinner } from "@plane/ui";
|
import { Spinner } from "@plane/ui";
|
||||||
// mobx
|
// mobx
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
// services
|
// services
|
||||||
import { ApiTokenService } from "services/api_token.service";
|
import { APITokenService } from "services/api_token.service";
|
||||||
// helpers
|
// helpers
|
||||||
import { renderDateFormat } from "helpers/date-time.helper";
|
import { renderDateFormat } from "helpers/date-time.helper";
|
||||||
// constants
|
// constants
|
||||||
@ -22,8 +20,9 @@ import { API_TOKEN_DETAILS } from "constants/fetch-keys";
|
|||||||
// swr
|
// swr
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
|
|
||||||
const apiTokenService = new ApiTokenService();
|
const apiTokenService = new APITokenService();
|
||||||
const ApiTokenDetail: NextPage = () => {
|
|
||||||
|
const APITokenDetail: NextPage = () => {
|
||||||
const { theme: themStore } = useMobxStore();
|
const { theme: themStore } = useMobxStore();
|
||||||
const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
|
const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -67,4 +66,4 @@ const ApiTokenDetail: NextPage = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ApiTokenDetail;
|
export default APITokenDetail;
|
||||||
|
@ -1,7 +1,4 @@
|
|||||||
// react
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
// next
|
|
||||||
|
|
||||||
import { NextPage } from "next";
|
import { NextPage } from "next";
|
||||||
// layouts
|
// layouts
|
||||||
import { AppLayout } from "layouts/app-layout/layout";
|
import { AppLayout } from "layouts/app-layout/layout";
|
||||||
@ -12,8 +9,7 @@ import { IApiToken } from "types/api_token";
|
|||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
// components
|
// components
|
||||||
import { WorkspaceSettingHeader } from "components/headers";
|
import { WorkspaceSettingHeader } from "components/headers";
|
||||||
import DeleteTokenModal from "components/api-token/delete-token-modal";
|
import { APITokenForm, DeleteTokenModal } from "components/api-token";
|
||||||
import { ApiTokenForm } from "components/api-token/ApiTokenForm";
|
|
||||||
|
|
||||||
const CreateApiToken: NextPage = () => {
|
const CreateApiToken: NextPage = () => {
|
||||||
const [generatedToken, setGeneratedToken] = useState<IApiToken | null>();
|
const [generatedToken, setGeneratedToken] = useState<IApiToken | null>();
|
||||||
@ -27,7 +23,7 @@ const CreateApiToken: NextPage = () => {
|
|||||||
handleClose={() => setDeleteTokenModal(false)}
|
handleClose={() => setDeleteTokenModal(false)}
|
||||||
tokenId={generatedToken?.id}
|
tokenId={generatedToken?.id}
|
||||||
/>
|
/>
|
||||||
<ApiTokenForm
|
<APITokenForm
|
||||||
generatedToken={generatedToken}
|
generatedToken={generatedToken}
|
||||||
setGeneratedToken={setGeneratedToken}
|
setGeneratedToken={setGeneratedToken}
|
||||||
setDeleteTokenModal={setDeleteTokenModal}
|
setDeleteTokenModal={setDeleteTokenModal}
|
||||||
|
@ -1,25 +1,22 @@
|
|||||||
// react
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
// next
|
|
||||||
import type { NextPage } from "next";
|
import type { NextPage } from "next";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
import useSWR from "swr";
|
||||||
// layouts
|
// layouts
|
||||||
import { AppLayout } from "layouts/app-layout";
|
import { AppLayout } from "layouts/app-layout";
|
||||||
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
import { WorkspaceSettingLayout } from "layouts/settings-layout";
|
||||||
// component
|
// component
|
||||||
import { WorkspaceSettingHeader } from "components/headers";
|
import { WorkspaceSettingHeader } from "components/headers";
|
||||||
import ApiTokenEmptyState from "components/api-token/empty-state";
|
import { APITokenEmptyState, APITokenListItem } from "components/api-token";
|
||||||
// ui
|
// ui
|
||||||
import { Spinner, Button } from "@plane/ui";
|
import { Spinner, Button } from "@plane/ui";
|
||||||
// services
|
// services
|
||||||
import { ApiTokenService } from "services/api_token.service";
|
import { APITokenService } from "services/api_token.service";
|
||||||
// constants
|
// constants
|
||||||
import { API_TOKENS_LIST } from "constants/fetch-keys";
|
import { API_TOKENS_LIST } from "constants/fetch-keys";
|
||||||
// swr
|
|
||||||
import useSWR from "swr";
|
|
||||||
import { ApiTokenListItem } from "components/api-token/ApiTokenListItem";
|
|
||||||
|
|
||||||
const apiTokenService = new ApiTokenService();
|
const apiTokenService = new APITokenService();
|
||||||
|
|
||||||
const Api: NextPage = () => {
|
const Api: NextPage = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug } = router.query;
|
const { workspaceSlug } = router.query;
|
||||||
@ -47,13 +44,13 @@ const Api: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{tokens?.map((token) => (
|
{tokens?.map((token) => (
|
||||||
<ApiTokenListItem token={token} workspaceSlug={workspaceSlug} />
|
<APITokenListItem token={token} workspaceSlug={workspaceSlug} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
) : (
|
) : (
|
||||||
<div className="mx-auto py-8">
|
<div className="mx-auto py-8">
|
||||||
<ApiTokenEmptyState />
|
<APITokenEmptyState />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
|
@ -74,8 +74,8 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
|
|||||||
className="max-w-[234px] w-full border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
|
className="max-w-[234px] w-full border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
|
||||||
autoFocus
|
autoFocus
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
|
<Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
|
||||||
|
@ -189,6 +189,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
|
|||||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
|
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
|
||||||
onClick={() => setIsImageUploadModalOpen(true)}
|
onClick={() => setIsImageUploadModalOpen(true)}
|
||||||
alt={myProfile.display_name}
|
alt={myProfile.display_name}
|
||||||
|
role="button"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -2,7 +2,7 @@ import { API_BASE_URL } from "helpers/common.helper";
|
|||||||
import { APIService } from "./api.service";
|
import { APIService } from "./api.service";
|
||||||
import { IApiToken } from "types/api_token";
|
import { IApiToken } from "types/api_token";
|
||||||
|
|
||||||
export class ApiTokenService extends APIService {
|
export class APITokenService extends APIService {
|
||||||
constructor() {
|
constructor() {
|
||||||
super(API_BASE_URL);
|
super(API_BASE_URL);
|
||||||
}
|
}
|
||||||
|
@ -102,14 +102,14 @@ export class PageStore implements IPageStore {
|
|||||||
|
|
||||||
const data: IRecentPages = { today: [], yesterday: [], this_week: [], older: [] };
|
const data: IRecentPages = { today: [], yesterday: [], this_week: [], older: [] };
|
||||||
|
|
||||||
data["today"] = this.pages[projectId]?.filter((p) => isToday(new Date(p.created_at))) || [];
|
data.today = this.pages[projectId]?.filter((p) => isToday(new Date(p.created_at))) || [];
|
||||||
data["yesterday"] = this.pages[projectId]?.filter((p) => isYesterday(new Date(p.created_at))) || [];
|
data.yesterday = this.pages[projectId]?.filter((p) => isYesterday(new Date(p.created_at))) || [];
|
||||||
data["this_week"] =
|
data.this_week =
|
||||||
this.pages[projectId]?.filter(
|
this.pages[projectId]?.filter(
|
||||||
(p) =>
|
(p) =>
|
||||||
isThisWeek(new Date(p.created_at)) && !isToday(new Date(p.created_at)) && !isYesterday(new Date(p.created_at))
|
isThisWeek(new Date(p.created_at)) && !isToday(new Date(p.created_at)) && !isYesterday(new Date(p.created_at))
|
||||||
) || [];
|
) || [];
|
||||||
data["older"] =
|
data.older =
|
||||||
this.pages[projectId]?.filter(
|
this.pages[projectId]?.filter(
|
||||||
(p) => !isThisWeek(new Date(p.created_at)) && !isYesterday(new Date(p.created_at))
|
(p) => !isThisWeek(new Date(p.created_at)) && !isYesterday(new Date(p.created_at))
|
||||||
) || [];
|
) || [];
|
||||||
|
Loading…
Reference in New Issue
Block a user