Merge branch 'chore/user_deactivation' of github.com:makeplane/plane into develop-deploy

.deepsource.toml

@@ -1,5 +1,11 @@
 version = 1
 
+exclude_patterns = [  
+  "bin/**",  
+  "**/node_modules/",  
+  "**/*.min.js"  
+]
+
 [[analyzers]]
 name = "shell"
 

apiserver/plane/app/serializers/user.py

@@ -159,10 +159,10 @@ class ChangePasswordSerializer(serializers.Serializer):
 
     def validate(self, data):
         if data.get("old_password") == data.get("new_password"):
-            raise serializers.ValidationError("New password cannot be same as old password.")
+            raise serializers.ValidationError({"error": "New password cannot be same as old password."})
 
         if data.get("new_password") != data.get("confirm_password"):
-            raise serializers.ValidationError("confirm password should be same as the new password.")
+            raise serializers.ValidationError({"error": "Confirm password should be same as the new password."})
 
         return data
 

apiserver/plane/app/views/auth_extended.py

@@ -133,7 +133,7 @@ class ChangePasswordEndpoint(BaseAPIView):
         if serializer.is_valid():
             if not user.check_password(serializer.data.get("old_password")):
                 return Response(
-                    {"old_password": ["Wrong password."]},
+                    {"error": "Old password is not correct"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
             # set_password also hashes the password that the user will get

apiserver/plane/app/views/authentication.py

@@ -1,4 +1,5 @@
 # Python imports
+import os
 import uuid
 import random
 import string
@@ -32,7 +33,8 @@ from plane.db.models import (
 )
 from plane.settings.redis import redis_instance
 from plane.bgtasks.magic_link_code_task import magic_link
-
+from plane.license.models import InstanceConfiguration
+from plane.license.utils.instance_value import get_configuration_value
 
 def get_tokens_for_user(user):
     refresh = RefreshToken.for_user(user)
@@ -46,7 +48,17 @@ class SignUpEndpoint(BaseAPIView):
     permission_classes = (AllowAny,)
 
     def post(self, request):
-        if not settings.ENABLE_SIGNUP:
+        instance_configuration = InstanceConfiguration.objects.values("key", "value")
+        if (
+            not get_configuration_value(
+                instance_configuration,
+                "ENABLE_SIGNUP",
+                os.environ.get("ENABLE_SIGNUP", "0"),
+            )
+            and not WorkspaceMemberInvite.objects.filter(
+                email=request.user.email
+            ).exists()
+        ):
             return Response(
                 {
                     "error": "New account creation is disabled. Please contact your site administrator"
@@ -224,15 +236,9 @@ class SignInEndpoint(BaseAPIView):
                 },
                 status=status.HTTP_403_FORBIDDEN,
             )
-        if not user.is_active:
-            return Response(
-                {
-                    "error": "Your account has been deactivated. Please contact your site administrator."
-                },
-                status=status.HTTP_403_FORBIDDEN,
-            )
 
         # settings last active for the user
+        user.is_active = True
         user.last_active = timezone.now()
         user.last_login_time = timezone.now()
         user.last_login_ip = request.META.get("REMOTE_ADDR")
@@ -360,6 +366,24 @@ class MagicSignInGenerateEndpoint(BaseAPIView):
     def post(self, request):
         email = request.data.get("email", False)
 
+        instance_configuration = InstanceConfiguration.objects.values("key", "value")
+        if (
+            not get_configuration_value(
+                instance_configuration,
+                "ENABLE_MAGIC_LINK_LOGIN",
+                os.environ.get("ENABLE_MAGIC_LINK_LOGIN"),
+            )
+            and not WorkspaceMemberInvite.objects.filter(
+                email=request.user.email
+            ).exists()
+        ):
+            return Response(
+                {
+                    "error": "New account creation is disabled. Please contact your site administrator"
+                },
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
         if not email:
             return Response(
                 {"error": "Please provide a valid email address"},
@@ -443,13 +467,6 @@ class MagicSignInEndpoint(BaseAPIView):
             if str(token) == str(user_token):
                 if User.objects.filter(email=email).exists():
                     user = User.objects.get(email=email)
-                    if not user.is_active:
-                        return Response(
-                            {
-                                "error": "Your account has been deactivated. Please contact your site administrator."
-                            },
-                            status=status.HTTP_403_FORBIDDEN,
-                        )
                     try:
                         # Send event to Jitsu for tracking
                         if settings.ANALYTICS_BASE_API:
@@ -506,6 +523,7 @@ class MagicSignInEndpoint(BaseAPIView):
                     except RequestException as e:
                         capture_exception(e)
 
+                user.is_active = True
                 user.last_active = timezone.now()
                 user.last_login_time = timezone.now()
                 user.last_login_ip = request.META.get("REMOTE_ADDR")

apiserver/plane/app/views/config.py

@@ -45,23 +45,23 @@ class ConfigurationEndpoint(BaseAPIView):
                 get_configuration_value(
                     instance_configuration,
                     "EMAIL_HOST_USER",
-                    os.environ.get("GITHUB_APP_NAME", None),
+                    os.environ.get("EMAIL_HOST_USER", None),
                 ),
             )
             and bool(
                 get_configuration_value(
                     instance_configuration,
                     "EMAIL_HOST_PASSWORD",
-                    os.environ.get("GITHUB_APP_NAME", None),
+                    os.environ.get("EMAIL_HOST_PASSWORD", None),
                 )
             )
         ) and get_configuration_value(
-            instance_configuration, "ENABLE_MAGIC_LINK_LOGIN", "0"
+            instance_configuration, "ENABLE_MAGIC_LINK_LOGIN", "1"
         ) == "1"
 
         data["email_password_login"] = (
             get_configuration_value(
-                instance_configuration, "ENABLE_EMAIL_PASSWORD", "0"
+                instance_configuration, "ENABLE_EMAIL_PASSWORD", "1"
             )
             == "1"
         )

apiserver/plane/app/views/issue.py

@@ -371,6 +371,7 @@ class IssueListGroupedEndpoint(BaseAPIView):
 
         issue_queryset = (
             Issue.objects.filter(workspace__slug=slug, project_id=project_id)
+            .filter(~Q(state="Triage"))
             .select_related("project")
             .select_related("workspace")
             .select_related("state")

apiserver/plane/app/views/oauth.py

@@ -30,6 +30,8 @@ from plane.db.models import (
     ProjectMember,
 )
 from .base import BaseAPIView
+from plane.license.models import InstanceConfiguration
+from plane.license.utils.instance_value import get_configuration_value
 
 
 def get_tokens_for_user(user):
@@ -137,6 +139,30 @@ class OauthEndpoint(BaseAPIView):
             id_token = request.data.get("credential", False)
             client_id = request.data.get("clientId", False)
 
+            instance_configuration = InstanceConfiguration.objects.values(
+                "key", "value"
+            )
+            if (
+                not get_configuration_value(
+                    instance_configuration,
+                    "GOOGLE_CLIENT_ID",
+                    os.environ.get("GOOGLE_CLIENT_ID"),
+                )
+                or not get_configuration_value(
+                    instance_configuration,
+                    "GITHUB_CLIENT_ID",
+                    os.environ.get("GITHUB_CLIENT_ID"),
+                )
+            ) and not WorkspaceMemberInvite.objects.filter(
+                email=request.user.email
+            ).exists():
+                return Response(
+                    {
+                        "error": "New account creation is disabled. Please contact your site administrator"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
             if not medium or not id_token:
                 return Response(
                     {
@@ -174,15 +200,7 @@ class OauthEndpoint(BaseAPIView):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            ## Login Case
+            user.is_active = True
-            if not user.is_active:
-                return Response(
-                    {
-                        "error": "Your account has been deactivated. Please contact your site administrator."
-                    },
-                    status=status.HTTP_403_FORBIDDEN,
-                )
-
             user.last_active = timezone.now()
             user.last_login_time = timezone.now()
             user.last_login_ip = request.META.get("REMOTE_ADDR")
@@ -239,7 +257,8 @@ class OauthEndpoint(BaseAPIView):
                         else 15,
                         member=user,
                         created_by_id=project_member_invite.created_by_id,
-                    ) for project_member_invite in project_member_invites
+                    )
+                    for project_member_invite in project_member_invites
                 ],
                 ignore_conflicts=True,
             )
@@ -373,7 +392,8 @@ class OauthEndpoint(BaseAPIView):
                         else 15,
                         member=user,
                         created_by_id=project_member_invite.created_by_id,
-                    ) for project_member_invite in project_member_invites
+                    )
+                    for project_member_invite in project_member_invites
                 ],
                 ignore_conflicts=True,
             )

packages/editor/document-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/document-editor",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Package that powers Plane's Pages Editor",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

packages/editor/document-editor/src/ui/components/heading-component.tsx

@@ -8,6 +8,7 @@ export const HeadingComp = ({
   <h3
     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"
+    role="button"
   >
     {heading}
   </h3>
@@ -23,6 +24,7 @@ export const SubheadingComp = ({
   <p
     onClick={onClick}
     className="ml-6 mt-2 text-xs cursor-pointer font-medium tracking-tight text-gray-400 hover:text-custom-primary"
+    role="button"
   >
     {subHeading}
   </p>

packages/editor/document-editor/src/ui/components/page-renderer.tsx

@@ -18,7 +18,7 @@ export const PageRenderer = (props: IPageRenderer) => {
   } = props;
 
   return (
-    <div className="h-full w-full overflow-y-auto pl-7 py-5">
+    <div className="w-full pl-7 pt-5 pb-64">
       <h1 className="text-4xl font-bold break-all pr-5 -mt-2">
         {documentDetails.title}
       </h1>

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

@@ -44,7 +44,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       </button>
       {!sidePeekVisible && (
         <div
-          className="hidden group-hover/summary-popover:block z-10 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"
           ref={setPopperElement}
           style={summaryPopoverStyles.popper}
           {...summaryPopoverAttributes.popper}

packages/editor/document-editor/src/ui/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState } from "react";
-import { cn, getEditorClassNames, useEditor } from "@plane/editor-core";
+import { getEditorClassNames, useEditor } from "@plane/editor-core";
 import { DocumentEditorExtensions } from "./extensions";
 import {
   IDuplicationConfig,
@@ -126,8 +126,8 @@ const DocumentEditor = ({
         archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
         documentDetails={documentDetails}
       />
-      <div className="h-full w-full flex overflow-hidden">
+      <div className="h-full w-full flex overflow-y-auto">
-        <div className="flex-shrink-0 h-full w-56 lg:w-80">
+        <div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
           <SummarySideBar
             editor={editor}
             markings={markings}

packages/editor/document-editor/src/ui/readonly/index.tsx

@@ -1,4 +1,4 @@
-import { cn, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
+import { getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
 import { useRouter } from "next/router";
 import { useState, forwardRef, useEffect } from "react";
 import { EditorHeader } from "../components/editor-header";
@@ -82,7 +82,7 @@ const DocumentReadOnlyEditor = ({
       <EditorHeader
         isLocked={!pageLockConfig ? false : pageLockConfig.is_locked}
         isArchived={!pageArchiveConfig ? false : pageArchiveConfig.is_archived}
-        readonly={true}
+        readonly
         editor={editor}
         sidePeekVisible={sidePeekVisible}
         setSidePeekVisible={setSidePeekVisible}
@@ -91,8 +91,8 @@ const DocumentReadOnlyEditor = ({
         documentDetails={documentDetails}
         archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
       />
-      <div className="h-full w-full flex overflow-hidden">
+      <div className="h-full w-full flex overflow-y-auto">
-        <div className="flex-shrink-0 h-full w-56 lg:w-80">
+        <div className="flex-shrink-0 h-full w-56 lg:w-80 sticky top-0">
           <SummarySideBar
             editor={editor}
             markings={markings}

packages/editor/lite-text-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/lite-text-editor",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Package that powers Plane's Comment Editor",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/rich-text-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/rich-text-editor",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Rich Text Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

space/components/issues/board-views/kanban/block.tsx

@@ -43,7 +43,11 @@ export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
       </div>
 
       {/* 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}
       </h6>
 

space/helpers/common.helper.ts

@@ -1 +1,6 @@
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ? process.env.NEXT_PUBLIC_API_BASE_URL : "";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? "";
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

space/package.json

@@ -17,9 +17,10 @@
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.13",
     "@mui/material": "^5.14.1",
-    "@plane/ui": "*",
     "@plane/lite-text-editor": "*",
     "@plane/rich-text-editor": "*",
+    "@plane/ui": "*",
+    "@plane/document-editor": "*",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",
     "js-cookie": "^3.0.1",
@@ -35,7 +36,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.38.0",
     "swr": "^2.2.2",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.0.0",
     "typescript": "4.9.5",
     "uuid": "^9.0.0"
   },
@@ -43,7 +44,7 @@
     "@types/js-cookie": "^3.0.3",
     "@types/node": "18.14.1",
     "@types/nprogress": "^0.2.0",
-    "@types/react": "18.0.28",
+    "@types/react": "18.2.35",
     "@types/react-dom": "18.0.11",
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.48.2",

web/components/api-token/ApiTokenForm/ApiTokenDescription.tsx

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

web/components/api-token/ApiTokenForm/ApiTokenExpiry.tsx

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

web/components/api-token/ApiTokenForm/ApiTokenTitle.tsx

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

web/components/api-token/ApiTokenForm/types.ts

@@ -1,5 +0,0 @@
-export interface IApiFormFields {
-  never_expires: boolean;
-  title: string;
-  description: string;
-}

web/components/api-token/delete-token-modal.tsx

@@ -7,7 +7,7 @@ import { Button } from "@plane/ui";
 //hooks
 import useToast from "hooks/use-toast";
 //services
-import { ApiTokenService } from "services/api_token.service";
+import { APITokenService } from "services/api_token.service";
 //headless ui
 import { Dialog, Transition } from "@headlessui/react";
 
@@ -17,10 +17,15 @@ type Props = {
   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);
+  // hooks
   const { setToastAlert } = useToast();
+  // router
   const router = useRouter();
   const { workspaceSlug, tokenId: tokenIdFromQuery } = router.query;
 
@@ -107,5 +112,3 @@ const DeleteTokenModal: FC<Props> = ({ isOpen, handleClose, tokenId }) => {
     </Transition.Root>
   );
 };
-
-export default DeleteTokenModal;

web/components/api-token/empty-state.tsx

@@ -8,10 +8,13 @@ import { Button } from "@plane/ui";
 // assets
 import emptyApiTokens from "public/empty-state/api-token.svg";
 
-const ApiTokenEmptyState = () => {
+export const APITokenEmptyState = () => {
   const router = useRouter();
+
   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">
         <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>
@@ -32,5 +35,3 @@ const ApiTokenEmptyState = () => {
     </div>
   );
 };
-
-export default ApiTokenEmptyState;

web/components/api-token/form/index.tsx

@@ -1,36 +1,53 @@
+import { Dispatch, SetStateAction, useState, FC } from "react";
 import { useForm } from "react-hook-form";
-
-import { addDays, renderDateFormat } from "helpers/date-time.helper";
-import { IApiToken } from "types/api_token";
-import { csvDownload } from "helpers/download.helper";
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction, useState } from "react";
+// 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 { 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 { ApiTokenKeySection } from "./ApiTokenKeySection";
 
-interface IApiTokenForm {
+interface APITokenFormProps {
   generatedToken: IApiToken | null | undefined;
   setGeneratedToken: Dispatch<SetStateAction<IApiToken | null | undefined>>;
   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 [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();
-  const { theme: themStore } = useMobxStore();
+  // store
-
+  const {
+    theme: { sidebarCollapsed },
+  } = useMobxStore();
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -48,11 +65,11 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
 
   const getExpiryDate = (): string | 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 {
-    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) => {
@@ -95,10 +112,10 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
           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">
-        <ApiTokenTitle
+        <APITokenTitle
           generatedToken={generatedToken}
           control={control}
           errors={errors}
@@ -107,7 +124,7 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
           setFocusDescription={setFocusDescription}
         />
         {errors.title && focusTitle && <p className=" text-red-600">{errors.title.message}</p>}
-        <ApiTokenDescription
+        <APITokenDescription
           generatedToken={generatedToken}
           control={control}
           focusDescription={focusDescription}
@@ -119,7 +136,7 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
       {!generatedToken && (
         <div className="mt-12">
           <>
-            <ApiTokenExpiry
+            <APITokenExpiry
               neverExpires={neverExpires}
               selectedExpiry={selectedExpiry}
               setSelectedExpiry={setSelectedExpiry}
@@ -133,7 +150,7 @@ export const ApiTokenForm = ({ generatedToken, setGeneratedToken, setDeleteToken
           </>
         </div>
       )}
-      <ApiTokenKeySection
+      <APITokenKeySection
         generatedToken={generatedToken}
         renderExpiry={renderExpiry}
         setDeleteTokenModal={setDeleteTokenModal}

web/components/api-token/form/token-description.tsx

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

web/components/api-token/form/token-expiry.tsx

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

web/components/api-token/form/token-key-section.tsx

@@ -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 { Dispatch, SetStateAction } from "react";
+// ui
+import { Button } from "@plane/ui";
+// hooks
+import useToast from "hooks/use-toast";
+// types
 import { IApiToken } from "types/api_token";
 
-interface IApiTokenKeySection {
+interface APITokenKeySectionProps {
   generatedToken: IApiToken | null | undefined;
   renderExpiry: () => string;
   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();
 
   return generatedToken ? (

web/components/api-token/form/token-title.tsx

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

web/components/api-token/index.ts

@@ -0,0 +1,4 @@
+export * from "./delete-token-modal";
+export * from "./empty-state";
+export * from "./token-list-item";
+export * from "./form";

web/components/api-token/token-list-item.tsx

@@ -10,7 +10,7 @@ interface IApiTokenListItem {
   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}>
     <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]" />

web/components/issues/description-form.tsx

@@ -151,7 +151,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
               value={value}
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
-              dragDropEnabled={true}
+              dragDropEnabled
               customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
               noBorder={!isAllowed}
               onChange={(description: Object, description_html: string) => {

web/components/issues/issue-peek-overview/issue-detail.tsx

@@ -140,7 +140,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
       <RichTextEditor
-        dragDropEnabled={true}
+        dragDropEnabled
         cancelUploadImage={fileService.cancelUpload}
         uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
         deleteFile={fileService.deleteImage}

web/components/issues/issue-peek-overview/view.tsx

@@ -207,7 +207,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                                 : "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}
                           </div>
                         </CustomSelect.Option>

web/components/issues/sub-issues/properties.tsx

@@ -96,7 +96,7 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
             value={issue?.state_detail || null}
             onChange={(data) => handleStateChange(data)}
             disabled={false}
-            hideDropdownArrow={true}
+            hideDropdownArrow
           />
         </div>
       )}
@@ -128,7 +128,7 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
           <IssuePropertyAssignee
             projectId={issue?.project_detail?.id || null}
             value={issue?.assignees || null}
-            hideDropdownArrow={true}
+            hideDropdownArrow
             onChange={(val) => handleAssigneeChange(val)}
             disabled={false}
           />

web/components/labels/project-setting-label-group.tsx

@@ -92,7 +92,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                       <CreateUpdateLabelInline
                         labelForm={isEditLabelForm}
                         setLabelForm={setEditLabelForm}
-                        isUpdating={true}
+                        isUpdating
                         labelToUpdate={label}
                         onClose={() => {
                           setEditLabelForm(false);

web/components/labels/project-setting-label-item.tsx

@@ -70,7 +70,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
         <CreateUpdateLabelInline
           labelForm={isEditLabelForm}
           setLabelForm={setEditLabelForm}
-          isUpdating={true}
+          isUpdating
           labelToUpdate={label}
           onClose={() => {
             setEditLabelForm(false);

web/components/labels/project-setting-label-list.tsx

@@ -133,7 +133,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
               <Droppable
                 droppableId={LABELS_ROOT}
                 isCombineEnabled={!isDraggingGroup}
-                ignoreContainerClipping={true}
+                ignoreContainerClipping
                 isDropDisabled={isUpdating}
               >
                 {(droppableProvided, droppableSnapshot) => (

web/components/onboarding/invite-members.tsx

@@ -17,7 +17,7 @@ import OnboardingStepIndicator from "components/account/step-indicator";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // icons
-import { Check, ChevronDown, Plus, User2, X, XCircle } from "lucide-react";
+import { Check, ChevronDown, Plus, User2, XCircle } from "lucide-react";
 // types
 import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
 // constants

web/components/onboarding/tour/sidebar.tsx

@@ -52,6 +52,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
               : "text-custom-text-200 border-transparent"
           }`}
           onClick={() => setStep(option.key)}
+          role="button"
         >
           <option.Icon className="h-4 w-4" aria-hidden="true" />
           {option.key}

web/components/onboarding/user-details.tsx

@@ -29,11 +29,11 @@ type Props = {
   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 = [
   "Build Products",
@@ -51,7 +51,7 @@ const fileService = new FileService();
 export const UserDetails: React.FC<Props> = observer((props) => {
   const { user } = props;
   const [isRemoving, setIsRemoving] = useState(false);
-  const [selectedUsecase, setSelectedUsecase] = useState<number | null>();
+  // const [selectedUsecase, setSelectedUsecase] = useState<number | null>();
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   const {
     user: userStore,
@@ -210,7 +210,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
           </form>
         </div>
         <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>

web/components/onboarding/workspace.tsx

@@ -51,7 +51,7 @@ export const Workspace: React.FC<Props> = (props) => {
 
           await workspaceStore
             .createWorkspace(formData)
-            .then(async (res) => {
+            .then(async () => {
               setToastAlert({
                 type: "success",
                 title: "Success!",
@@ -137,13 +137,12 @@ export const Workspace: React.FC<Props> = (props) => {
         <Controller
           control={control}
           name="slug"
-          render={({ field: { value, onChange, ref } }) => (
+          render={({ field: { value, ref } }) => (
             <div className="flex items-center relative rounded-md bg-onboarding-background-200">
               <Input
                 id="slug"
                 name="slug"
                 type="text"
-                prefix="asdasdasdas"
                 value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
                 onChange={(e) => {
                   const host = window.location.host;

web/components/project/empty-state.tsx

@@ -26,7 +26,7 @@ export const EmptyState: React.FC<Props> = ({
   secondaryButton,
   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">
       <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} layout="fill" />
     </div>

web/components/project/member-list.tsx

@@ -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"
             placeholder="Search"
             value={searchQuery}
-            autoFocus={true}
+            autoFocus
             onChange={(e) => setSearchQuery(e.target.value)}
           />
         </div>

web/components/project/sidebar-list-item.tsx

@@ -184,7 +184,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </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>
                   {!isCollapsed && (
                     <ChevronDown

web/components/ui/empty-space.tsx

@@ -50,7 +50,7 @@ type EmptySpaceItemProps = {
 
 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="flex-shrink-0">
           <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">

web/components/web-hooks/delete-webhook-modal.tsx

@@ -1,11 +1,13 @@
+import React, { FC, useState } from "react";
+import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { AlertTriangle } from "lucide-react";
+// ui
 import { Button } from "@plane/ui";
+// hooks
 import useToast from "hooks/use-toast";
 import { useMobxStore } from "lib/mobx/store-provider";
-import { AlertTriangle } from "lucide-react";
-import { useRouter } from "next/router";
-import React, { FC, useState } from "react";
-import { useForm } from "react-hook-form";
 
 interface IDeleteWebhook {
   isOpen: boolean;

web/components/web-hooks/form/index.tsx

@@ -72,6 +72,7 @@ export const WebHookForm: FC<IWebHookForm> = observer((props) => {
     }
 
     reset({ ...getValues(), ...allWebhookOptions });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [watch && watch(WEBHOOK_EVENTS)]);
 
   return (

web/components/workspace/settings/workspace-details.tsx

@@ -68,17 +68,13 @@ export const WorkspaceDetails: FC = observer(() => {
 
     await updateWorkspace(currentWorkspace.slug, payload)
       .then((res) => {
-        trackEvent(
+        trackEvent("UPDATE_WORKSPACE", res);
-          'UPDATE_WORKSPACE',
-          res
-        )
         setToastAlert({
           title: "Success",
           type: "success",
           message: "Workspace updated successfully",
-        })
+        });
-      }
+      })
-      )
       .catch((err) => console.error(err));
   };
 
@@ -89,7 +85,7 @@ export const WorkspaceDetails: FC = observer(() => {
 
     fileService.deleteFile(currentWorkspace.id, url).then(() => {
       updateWorkspace(currentWorkspace.slug, { logo: "" })
-        .then((res) => {
+        .then(() => {
           setToastAlert({
             type: "success",
             title: "Success!",

web/helpers/common.helper.ts

@@ -1,3 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
 export const debounce = (func: any, wait: number, immediate: boolean = false) => {
   let timeout: any;
 
@@ -18,3 +21,5 @@ export const debounce = (func: any, wait: number, immediate: boolean = false) =>
 };
 
 export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ? process.env.NEXT_PUBLIC_API_BASE_URL : "";
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

web/package.json

@@ -24,12 +24,14 @@
     "@nivo/scatterplot": "0.80.0",
     "@plane/lite-text-editor": "*",
     "@plane/rich-text-editor": "*",
+    "@plane/document-editor": "*",
     "@plane/ui": "*",
     "@popperjs/core": "^2.11.8",
     "@sentry/nextjs": "^7.36.0",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
+    "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.0.3",
@@ -54,6 +56,7 @@
     "react-popper": "^2.3.0",
     "sharp": "^0.32.1",
     "swr": "^2.1.3",
+    "tailwind-merge": "^2.0.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -15,7 +15,7 @@ import { PageDetailsHeader } from "components/headers/page-details";
 import { EmptyState } from "components/common";
 // ui
 import { DocumentEditorWithRef, DocumentReadOnlyEditorWithRef } from "@plane/document-editor";
-import { Loader } from "@plane/ui";
+import { Spinner } from "@plane/ui";
 // assets
 import emptyPage from "public/empty-state/page.svg";
 // helpers
@@ -179,19 +179,22 @@ const PageDetailsPage: NextPageWithLayout = () => {
     handleSubmit(updatePage)().finally(() => setIsSubmitting("submitted"));
   }, 1500);
 
+  if (error)
+    return (
+      <EmptyState
+        image={emptyPage}
+        title="Page does not exist"
+        description="The page you are looking for does not exist or has been deleted."
+        primaryButton={{
+          text: "View other pages",
+          onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
+        }}
+      />
+    );
+
   return (
     <>
-      {error ? (
+      {pageDetails ? (
-        <EmptyState
-          image={emptyPage}
-          title="Page does not exist"
-          description="The page you are looking for does not exist or has been deleted."
-          primaryButton={{
-            text: "View other pages",
-            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/pages`),
-          }}
-        />
-      ) : pageDetails ? (
         <div className="flex h-full flex-col justify-between">
           <div className="h-full w-full overflow-hidden">
             {pageDetails.is_locked || pageDetails.archived_at ? (
@@ -200,7 +203,7 @@ const PageDetailsPage: NextPageWithLayout = () => {
                 value={pageDetails.description_html}
                 customClassName={"tracking-tight self-center w-full max-w-full px-0"}
                 borderOnFocus={false}
-                noBorder={true}
+                noBorder
                 documentDetails={{
                   title: pageDetails.name,
                   created_by: pageDetails.created_by,
@@ -267,9 +270,9 @@ const PageDetailsPage: NextPageWithLayout = () => {
           </div>
         </div>
       ) : (
-        <Loader className="p-8">
+        <div className="h-full w-full grid place-items-center">
-          <Loader.Item height="200px" />
+          <Spinner />
-        </Loader>
+        </div>
       )}
     </>
   );

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

@@ -1,20 +1,18 @@
-// react
 import { useState } from "react";
-// next
 import { NextPage } from "next";
 import { useRouter } from "next/router";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
-import DeleteTokenModal from "components/api-token/delete-token-modal";
+import { 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";
+import { APITokenService } from "services/api_token.service";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
 // constants
@@ -22,8 +20,9 @@ import { API_TOKEN_DETAILS } from "constants/fetch-keys";
 // swr
 import useSWR from "swr";
 
-const apiTokenService = new ApiTokenService();
+const apiTokenService = new APITokenService();
-const ApiTokenDetail: NextPage = () => {
+
+const APITokenDetail: NextPage = () => {
   const { theme: themStore } = useMobxStore();
   const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
   const router = useRouter();
@@ -67,4 +66,4 @@ const ApiTokenDetail: NextPage = () => {
   );
 };
 
-export default ApiTokenDetail;
+export default APITokenDetail;

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

@@ -1,7 +1,4 @@
-// react
 import { useState } from "react";
-// next
-
 import { NextPage } from "next";
 // layouts
 import { AppLayout } from "layouts/app-layout/layout";
@@ -12,8 +9,7 @@ import { IApiToken } from "types/api_token";
 import { observer } from "mobx-react-lite";
 // components
 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 [generatedToken, setGeneratedToken] = useState<IApiToken | null>();
@@ -27,7 +23,7 @@ const CreateApiToken: NextPage = () => {
           handleClose={() => setDeleteTokenModal(false)}
           tokenId={generatedToken?.id}
         />
-        <ApiTokenForm
+        <APITokenForm
           generatedToken={generatedToken}
           setGeneratedToken={setGeneratedToken}
           setDeleteTokenModal={setDeleteTokenModal}

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

@@ -1,25 +1,22 @@
-// react
 import React from "react";
-// next
 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 from "components/api-token/empty-state";
+import { APITokenEmptyState, APITokenListItem } from "components/api-token";
 // ui
 import { Spinner, Button } from "@plane/ui";
 // services
-import { ApiTokenService } from "services/api_token.service";
+import { APITokenService } from "services/api_token.service";
 // constants
 import { API_TOKENS_LIST } from "constants/fetch-keys";
-// swr
-import useSWR from "swr";
-import { ApiTokenListItem } from "components/api-token/ApiTokenListItem";
 
-const apiTokenService = new ApiTokenService();
+const apiTokenService = new APITokenService();
+
 const Api: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -47,13 +44,13 @@ const Api: NextPage = () => {
               </div>
               <div>
                 {tokens?.map((token) => (
-                  <ApiTokenListItem token={token} workspaceSlug={workspaceSlug} />
+                  <APITokenListItem token={token} workspaceSlug={workspaceSlug} />
                 ))}
               </div>
             </section>
           ) : (
             <div className="mx-auto py-8">
-              <ApiTokenEmptyState />
+              <APITokenEmptyState />
             </div>
           )
         ) : (

web/pages/[workspaceSlug]/settings/members.tsx

@@ -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"
               placeholder="Search..."
               value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
               autoFocus
+              onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
           <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>

web/pages/me/profile/index.tsx

@@ -189,6 +189,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
                             className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                             onClick={() => setIsImageUploadModalOpen(true)}
                             alt={myProfile.display_name}
+                            role="button"
                           />
                         </div>
                       )}

web/services/api_token.service.ts

@@ -2,7 +2,7 @@ import { API_BASE_URL } from "helpers/common.helper";
 import { APIService } from "./api.service";
 import { IApiToken } from "types/api_token";
 
-export class ApiTokenService extends APIService {
+export class APITokenService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }

web/store/issues/project-issues/archived/issue.store.ts

@@ -101,7 +101,7 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
 
       return response;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId);
+      // this.fetchIssues(workspaceSlug, projectId);
       this.loader = undefined;
       throw error;
     }

web/store/page.store.ts

@@ -102,14 +102,14 @@ export class PageStore implements IPageStore {
 
     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(
         (p) =>
           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(
         (p) => !isThisWeek(new Date(p.created_at)) && !isYesterday(new Date(p.created_at))
       ) || [];

yarn.lock

@@ -926,6 +926,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.1":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e"
+  integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.22.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -2804,7 +2811,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.0.28", "@types/react@18.2.0", "@types/react@^18.2.35", "@types/react@^18.2.37", "@types/react@^18.2.5":
+"@types/react@*", "@types/react@18.2.0", "@types/react@18.2.35", "@types/react@^18.2.35", "@types/react@^18.2.37", "@types/react@^18.2.5":
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21"
   integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==
@@ -8171,6 +8178,13 @@ tailwind-merge@^1.14.0:
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
+tailwind-merge@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.0.0.tgz#a0f3a8c874ebae5feec5595614d08245a5f88a39"
+  integrity sha512-WO8qghn9yhsldLSg80au+3/gY9E4hFxIvQ3qOmlpXnqpDKoMruKfi/56BbbMg6fHTQJ9QD3cc79PoWqlaQE4rw==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+
 tailwindcss-animate@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"