Merge branch 'develop' of https://github.com/makeplane/plane into style/views_card

* style: fix text overflow in:
* Issue activity
* Cycle and Module Select in Create Issue form
* Delete Module modal
* Join Project modal

* style: update assignee select border as per design.

apiserver/bin/bucket_script.py

@@ -0,0 +1,57 @@
+import os, sys
+import boto3
+from botocore.exceptions import ClientError
+
+
+sys.path.append("/code")
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "plane.settings.production")
+import django
+
+django.setup()
+
+def create_bucket():
+    try:
+        from django.conf import settings
+        
+        # Create a session using the credentials from Django settings
+        session = boto3.session.Session(
+            aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
+        )
+
+        # Create an S3 client using the session
+        s3_client = session.client('s3', endpoint_url=settings.AWS_S3_ENDPOINT_URL)
+        bucket_name = settings.AWS_STORAGE_BUCKET_NAME
+        
+        print("Checking bucket...")
+        
+        # Check if the bucket exists
+        s3_client.head_bucket(Bucket=bucket_name)
+        
+        # If head_bucket does not raise an exception, the bucket exists
+        print(f"Bucket '{bucket_name}' already exists.")
+        
+    except ClientError as e:
+        error_code = int(e.response['Error']['Code'])
+        bucket_name = settings.AWS_STORAGE_BUCKET_NAME
+        if error_code == 404:
+            # Bucket does not exist, create it
+            print(f"Bucket '{bucket_name}' does not exist. Creating bucket...")
+            try:
+                s3_client.create_bucket(Bucket=bucket_name)
+                print(f"Bucket '{bucket_name}' created successfully.")
+            except ClientError as create_error:
+                print(f"Failed to create bucket: {create_error}")
+        elif error_code == 403:
+            # Access to the bucket is forbidden
+            print(f"Access to the bucket '{bucket_name}' is forbidden. Check permissions.")
+        else:
+            # Another ClientError occurred
+            print(f"Failed to check bucket: {e}")
+    except Exception as ex:
+        # Handle any other exception
+        print(f"An error occurred: {ex}")
+
+if __name__ == "__main__":
+    create_bucket()

apiserver/bin/takeoff

@@ -5,5 +5,7 @@ python manage.py migrate
 
 # Create a Default User
 python bin/user_script.py
+# Create the default bucket
+python bin/bucket_script.py
 
 exec gunicorn -w $GUNICORN_WORKERS -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:8000 --max-requests 1200 --max-requests-jitter 1000 --access-logfile -

web/components/core/activity.tsx

@@ -42,13 +42,16 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   return (
     <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
       <a
-        href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
+        aria-disabled={activity.issue === null}
-        target="_blank"
+        href={`${
-        rel="noopener noreferrer"
+          activity.issue_detail ? `/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}` : "#"
+        }`}
+        target={activity.issue === null ? "_self" : "_blank"}
+        rel={activity.issue === null ? "" : "noopener noreferrer"}
         className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
       >
         {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
-        <RocketIcon size={12} color="#6b7280" />
+        <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
       </a>
     </Tooltip>
   );
@@ -268,10 +271,10 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
-              {activity.new_value}
+              <span className="truncate">{activity.new_value}</span>
-              <RocketIcon size={12} color="#6b7280" />
+              <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
             </a>
           </>
         );
@@ -283,10 +286,10 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
-              {activity.new_value}
+              <span className="truncate">{activity.new_value}</span>
-              <RocketIcon size={12} color="#6b7280" />
+              <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
             </a>
           </>
         );
@@ -298,10 +301,10 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
-              {activity.old_value}
+              <span className="truncate">{activity.old_value}</span>
-              <RocketIcon size={12} color="#6b7280" />
+              <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
             </a>
           </>
         );
@@ -479,10 +482,10 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
-              {activity.new_value}
+              <span className="truncate">{activity.new_value}</span>
-              <RocketIcon size={12} color="#6b7280" />
+              <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
             </a>
           </>
         );
@@ -494,10 +497,10 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
-              {activity.new_value}
+              <span className="truncate">{activity.new_value}</span>
-              <RocketIcon size={12} color="#6b7280" />
+              <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
             </a>
           </>
         );
@@ -509,10 +512,10 @@ const activityDetails: {
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
+              className="w-full font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
-              {activity.old_value}
+              <span className="truncate">{activity.old_value}</span>
-              <RocketIcon size={12} color="#6b7280" />
+              <RocketIcon size={12} color="#6b7280" className="flex-shrink-0" />
             </a>
           </>
         );

web/components/cycles/active-cycle-details.tsx

@@ -80,7 +80,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
     workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, "current") : null
   );
 
-  const activeCycle = cycleStore.cycles?.[projectId]?.active || null;
+  const activeCycle = cycleStore.cycles?.[projectId]?.current || null;
   const cycle = activeCycle ? activeCycle[0] : null;
   const issues = (cycleStore?.active_cycle_issues as any) || null;
 

web/components/headers/project-issues.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Circle, ExternalLink, Plus } from "lucide-react";
+import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@@ -121,17 +121,23 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 icon={
-                  currentProjectDetails?.emoji ? (
+                  currentProjectDetails ? (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                    currentProjectDetails?.emoji ? (
-                      {renderEmoji(currentProjectDetails.emoji)}
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                    </span>
+                        {renderEmoji(currentProjectDetails.emoji)}
-                  ) : currentProjectDetails?.icon_prop ? (
+                      </span>
-                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                    ) : currentProjectDetails?.icon_prop ? (
-                      {renderEmoji(currentProjectDetails.icon_prop)}
+                      <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
-                    </div>
+                        {renderEmoji(currentProjectDetails.icon_prop)}
+                      </div>
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {currentProjectDetails?.name.charAt(0)}
+                      </span>
+                    )
                   ) : (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                      {currentProjectDetails?.name.charAt(0)}
+                      <Briefcase className="h-4 w-4" />
                     </span>
                   )
                 }

web/components/integration/github/root.tsx

@@ -163,7 +163,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
 
   return (
     <form onSubmit={handleSubmit(createGithubImporterService)}>
-      <div className="space-y-2">
+      <div className="space-y-2 mt-4">
         <Link href={`/${workspaceSlug}/settings/imports`}>
           <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
             <ArrowLeft className="h-3 w-3" />
@@ -191,9 +191,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                     }`}
                   >
                     <integration.icon
-                      width="18px"
+                      className={`w-5 h-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
-                      height="18px"
-                      color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
                     />
                   </div>
                   {index < integrationWorkflowData.length - 1 && (

web/components/integration/jira/give-details.tsx

@@ -56,6 +56,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                 ref={ref}
                 placeholder="XXXXXXXX"
                 className="w-full"
+                autoComplete="off"
               />
             )}
           />
@@ -94,7 +95,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-custom-text-200">Enter the Gmail account that you use in Jira account</p>
+          <p className="text-sm text-custom-text-200">Enter the Email account that you use in Jira account</p>
         </div>
         <div className="col-span-1">
           <Controller

web/components/integration/jira/root.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { FormProvider, useForm } from "react-hook-form";
 // icons
-import { ArrowLeft, Check, List, Settings } from "lucide-react";
+import { ArrowLeft, Check, List, Settings, Users2 } from "lucide-react";
 // services
 import { JiraImporterService } from "services/integrations";
 // fetch keys
@@ -98,7 +98,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
   };
 
   return (
-    <div className="flex h-full flex-col space-y-2">
+    <div className="flex h-full flex-col space-y-2 mt-4">
       <Link href={`/${workspaceSlug}/settings/imports`}>
         <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
           <div>
@@ -136,9 +136,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                   }`}
                 >
                   <integration.icon
-                    width="18px"
+                    className={`w-5 h-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
-                    height="18px"
-                    color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
                   />
                 </button>
                 {index < integrationWorkflowData.length - 1 && (

web/components/issues/form.tsx

@@ -542,13 +542,13 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
                   <>
-                    <CustomMenu
+                    {watch("parent") ? (
-                      customButton={
+                      <CustomMenu
-                        <button
+                        customButton={
-                          type="button"
+                          <button
-                          className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
+                            type="button"
-                        >
+                            className="flex items-center justify-between gap-1 w-full cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
-                          {watch("parent") ? (
+                          >
                             <div className="flex items-center gap-1 text-custom-text-200">
                               <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
                               <span className="whitespace-nowrap">
@@ -557,31 +557,30 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                                   ${selectedParentIssue.sequence_id}`}
                               </span>
                             </div>
-                          ) : (
+                          </button>
-                            <div className="flex items-center gap-1 text-custom-text-300">
+                        }
-                              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                        placement="bottom-start"
-                              <span className="whitespace-nowrap">Add Parent</span>
+                      >
-                            </div>
-                          )}
-                        </button>
-                      }
-                      placement="bottom-start"
-                    >
-                      {watch("parent") ? (
-                        <>
-                          <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-                            Change parent issue
-                          </CustomMenu.MenuItem>
-                          <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
-                            Remove parent issue
-                          </CustomMenu.MenuItem>
-                        </>
-                      ) : (
                         <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-                          Select Parent Issue
+                          Change parent issue
                         </CustomMenu.MenuItem>
-                      )}
+                        <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
-                    </CustomMenu>
+                          Remove parent issue
+                        </CustomMenu.MenuItem>
+                      </CustomMenu>
+                    ) : (
+                      <button
+                        type="button"
+                        className="flex items-center justify-between gap-1 w-min cursor-pointer rounded border-[0.5px] border-custom-border-300 text-custom-text-200 px-2 py-1 text-xs hover:bg-custom-background-80"
+                        onClick={() => setParentIssueListModalOpen(true)}
+                      >
+                        <div className="flex items-center gap-1 text-custom-text-300">
+                          <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                          <span className="whitespace-nowrap">Add Parent</span>
+                        </div>
+                      </button>
+                    )}
+
                     <Controller
                       control={control}
                       name="parent"

web/components/issues/issue-layouts/filters/header/filters/assignee.tsx

@@ -49,7 +49,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
                     key={`assignees-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
+                    icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
                     title={member.display_name}
                   />
                 ))}

web/components/issues/issue-layouts/filters/header/filters/created-by.tsx

@@ -49,7 +49,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
                     key={`created-by-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />}
+                    icon={<Avatar name={member.display_name} src={member.avatar} size="md" />}
                     title={member.display_name}
                   />
                 ))}

web/components/issues/issue-layouts/filters/header/filters/mentions.tsx

@@ -49,7 +49,7 @@ export const FilterMentions: React.FC<Props> = (props) => {
                     key={`mentions-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />}
+                    icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} size={"md"} />}
                     title={member.display_name}
                   />
                 ))}

web/components/issues/issue-layouts/properties/assignee.tsx

@@ -117,8 +117,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
         ) : (
           <span
             className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
-              noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
+              noLabelBorder ? "" : " px-2.5 py-1 border-[0.5px] border-custom-border-300"
-            }}`}
+            }`}
           >
             <User2 className="h-3 w-3" />
           </span>

web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx

@@ -78,7 +78,7 @@ export const IssueColumn: React.FC<Props> = ({
       <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
         {properties.key && (
           <div
-            className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
+            className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-min"
             style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
           >
             <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -94,7 +94,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                     {displayProperties.key && (
                       <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
                     )}
-                    <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
+                    <span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
                   </div>
 
                   {issues.map((issue, index) => (

web/components/issues/select/cycle.tsx

@@ -55,9 +55,9 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = selectedCycle ? (
-    <div className="flex items-center gap-1 text-custom-text-200">
+    <div className="flex items-center w-full gap-1 text-custom-text-200">
-      <ContrastIcon className="h-3 w-3" />
+      <ContrastIcon className="h-3 w-3 flex-shrink-0" />
-      <div className="truncate">{selectedCycle.name}</div>
+      <div className="truncate max-w-[160px]">{selectedCycle.name}</div>
     </div>
   ) : (
     <div className="flex items-center gap-1 text-custom-text-300">

web/components/issues/select/label.tsx

@@ -3,16 +3,13 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Combobox, Transition } from "@headlessui/react";
 import { usePopper } from "react-popper";
-// services
+import { observer } from "mobx-react-lite";
-import { IssueLabelService } from "services/issue";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { IssueLabelsList } from "components/ui";
 // icons
 import { Check, Component, Plus, Search, Tag } from "lucide-react";
-// types
-import type { IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -22,15 +19,19 @@ type Props = {
   label?: JSX.Element;
 };
 
-const issueLabelService = new IssueLabelService();
+export const IssueLabelSelect: React.FC<Props> = observer((props) => {
+  const { setIsOpen, value, onChange, projectId, label } = props;
 
-export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId, label }) => {
   // states
   const [query, setQuery] = useState("");
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const {
+    project: { labels, fetchProjectLabels },
+  } = useMobxStore();
+
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
@@ -38,11 +39,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     placement: "bottom-start",
   });
 
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+  const issueLabels = labels?.[projectId] || [];
-    projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
+
-    workspaceSlug && projectId
+  useSWR(
-      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId)
+    workspaceSlug && projectId ? `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}` : null,
-      : null
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId) : null
   );
 
   const filteredOptions =
@@ -202,4 +203,4 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       )}
     </Combobox>
   );
-};
+});

web/components/issues/select/module.tsx

@@ -55,9 +55,9 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = selectedModule ? (
-    <div className="flex items-center gap-1 text-custom-text-200">
+    <div className="flex items-center w-full gap-1 text-custom-text-200">
-      <DiceIcon className="h-3 w-3" />
+      <DiceIcon className="h-3 w-3 flex-shrink-0" />
-      <span className="truncate">{selectedModule.name}</span>
+      <span className="truncate max-w-[160px]">{selectedModule.name}</span>
     </div>
   ) : (
     <div className="flex items-center gap-1 text-custom-text-300">

web/components/issues/select/state.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-// services
+import { observer } from "mobx-react-lite";
-import { ProjectStateService } from "services/project";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
 // icons
 import { Plus } from "lucide-react";
-// fetch keys
-import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -17,19 +16,24 @@ type Props = {
   projectId: string;
 };
 
-// services
+export const IssueStateSelect: React.FC<Props> = observer((props) => {
-const projectStateService = new ProjectStateService();
+  const { setIsOpen, value, onChange, projectId } = props;
 
-export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
   // states
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { data: states } = useSWR(
+  const {
-    workspaceSlug && projectId ? STATES_LIST(projectId) : null,
+    projectState: { states: projectStates, fetchProjectStates },
-    workspaceSlug && projectId ? () => projectStateService.getStates(workspaceSlug as string, projectId) : null
+  } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId ? `STATES_LIST_${projectId.toUpperCase()}` : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId) : null
   );
 
+  const states = projectStates?.[projectId] || [];
+
   const options = states?.map((state) => ({
     value: state.id,
     query: state.name,
@@ -74,4 +78,4 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       noChevron
     />
   );
-};
+});

web/components/modules/delete-module-modal.tsx

@@ -102,7 +102,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete module-{" "}
-                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
                           data related to the module will be permanently removed. This action cannot be undone.
                         </p>
                       </div>

web/components/modules/select/lead.tsx

@@ -6,6 +6,7 @@ import { ProjectMemberService } from "services/project";
 // ui
 import { Avatar, CustomSearchSelect } from "@plane/ui";
 // icons
+import { Combobox } from "@headlessui/react";
 import { UserCircle } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -59,6 +60,16 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           )}
         </div>
       }
+      footerOption={
+        <Combobox.Option
+          value=""
+          className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5  text-custom-text-200"
+        >
+          <span className="flex items-center justify-start gap-1 text-custom-text-200">
+            <span>No Lead</span>
+          </span>
+        </Combobox.Option>
+      }
       onChange={onChange}
       noChevron
     />

web/components/pages/single-page-detailed-item.tsx

@@ -58,8 +58,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a className="block p-4">
           <div className="flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center overflow-hidden gap-2">
-              <p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p>
+              <p className="mr-2 truncate text-sm">{page.name}</p>
               {page.label_details.length > 0 &&
                 page.label_details.map((label) => (
                   <div
@@ -188,9 +188,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               </CustomMenu>
             </div>
           </div>
-          <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
+          {page.blocks.length > 0 && (
-            {page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) : null}
+            <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
-          </div>
+              {page.blocks.slice(0, 3).map((block) => (
+                <h4 className="truncate">{block.name}</h4>
+              ))}
+            </div>
+          )}
         </a>
       </Link>
     </div>

web/components/pages/single-page-list-item.tsx

@@ -59,9 +59,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
         <a>
           <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
-              <div className="flex flex-wrap items-center gap-2">
+              <div className="flex overflow-hidden items-center gap-2">
-                <FileText className="h-4 w-4" />
+                <FileText className="h-4 w-4 shrink-0" />
-                <p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p>
+                <p className="mr-2 truncate text-sm text-custom-text-100">{page.name}</p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div

web/components/project/delete-project-modal.tsx

@@ -139,6 +139,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                           hasError={Boolean(errors.projectName)}
                           placeholder="Project name"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />
@@ -162,6 +163,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                           hasError={Boolean(errors.confirmDelete)}
                           placeholder="Enter 'delete my project'"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />

web/components/project/integration-card.tsx

@@ -91,7 +91,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
+        <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
           <div className="flex items-start gap-4">
             <div className="h-10 w-10 flex-shrink-0">
               <Image

web/components/project/join-project-modal.tsx

@@ -73,7 +73,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                     Join Project?
                   </Dialog.Title>
                   <p>
-                    Are you sure you want to join the project <span className="font-semibold">{project?.name}</span>?
+                    Are you sure you want to join the project <span className="font-semibold break-words">{project?.name}</span>?
                     Please click the &apos;Join Project&apos; button below to continue.
                   </p>
                   <div className="space-y-3" />

web/components/project/leave-project-modal.tsx

@@ -30,7 +30,7 @@ export interface ILeaveProjectModal {
 }
 
 export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
-  const { project, isOpen } = props;
+  const { project, isOpen, onClose } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -48,6 +48,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
 
   const handleClose = () => {
     reset({ ...defaultValues });
+    onClose();
   };
 
   const onSubmit = async (data: any) => {

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

@@ -5,18 +5,7 @@ import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // icons
-import {
+import { MoreVertical, PenSquare, LinkIcon, Star, FileText, Settings, Share2, LogOut, ChevronDown } from "lucide-react";
-  MoreVertical,
-  PenSquare,
-  LinkIcon,
-  Star,
-  Trash2,
-  FileText,
-  Settings,
-  Share2,
-  LogOut,
-  ChevronDown,
-} from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 // helpers
@@ -27,7 +16,7 @@ import { IProject } from "types";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
-import { LeaveProjectModal, DeleteProjectModal, PublishProjectModal } from "components/project";
+import { LeaveProjectModal, PublishProjectModal } from "components/project";
 
 type Props = {
   project: IProject;
@@ -71,6 +60,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
 ];
 
 export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { project, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
   // store
   const { project: projectStore, theme: themeStore } = useMobxStore();
@@ -81,7 +71,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
   const { setToastAlert } = useToast();
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
-  const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
   const [publishModalOpen, setPublishModal] = useState(false);
 
   const isAdmin = project.member_role === 20;
@@ -121,21 +110,11 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
     setLeaveProjectModal(false);
   };
 
-  const handleDeleteProjectClick = () => {
-    setDeleteProjectModal(true);
-  };
-
-  const handleDeleteProjectModalClose = () => {
-    setDeleteProjectModal(false);
-    router.push(`/${workspaceSlug}/projects`);
-  };
-
   return (
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
-      <DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
-      <Disclosure key={project.id} defaultOpen={projectId === project.id}>
+      <Disclosure key={`${project.id} ${projectId}`} defaultOpen={projectId === project.id}>
         {({ open }) => (
           <>
             <div
@@ -186,9 +165,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </span>
                     )}
 
-                    {!isCollapsed && (
+                    {!isCollapsed && <p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>}
-                      <p className={`truncate text-custom-sidebar-text-200`}>{project.name}</p>
-                    )}
                   </div>
                   {!isCollapsed && (
                     <ChevronDown
@@ -278,15 +255,6 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       </div>
                     </CustomMenu.MenuItem>
                   )}
-
-                  {!shortContextMenu && isAdmin && (
-                    <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
-                      <span className="flex items-center justify-start gap-2 ">
-                        <Trash2 className="h-3.5 w-3.5 stroke-[1.5]" />
-                        <span>Delete project</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
                 </CustomMenu>
               )}
             </div>

web/components/project/sidebar-list.tsx

@@ -149,29 +149,38 @@ export const ProjectSidebarList: FC = observer(() => {
                             </button>
                           </div>
                         )}
-                        <Disclosure.Panel as="div" className="space-y-2">
+                        <Transition
-                          {orderedFavProjects.map((project, index) => (
+                          enter="transition duration-100 ease-out"
-                            <Draggable
+                          enterFrom="transform scale-95 opacity-0"
-                              key={project.id}
+                          enterTo="transform scale-100 opacity-100"
-                              draggableId={project.id}
+                          leave="transition duration-75 ease-out"
-                              index={index}
+                          leaveFrom="transform scale-100 opacity-100"
-                              isDragDisabled={!project.is_member}
+                          leaveTo="transform scale-95 opacity-0"
-                            >
+                        >
-                              {(provided, snapshot) => (
+                          <Disclosure.Panel as="div" className="space-y-2">
-                                <div ref={provided.innerRef} {...provided.draggableProps}>
+                            {orderedFavProjects.map((project, index) => (
-                                  <ProjectSidebarListItem
+                              <Draggable
-                                    key={project.id}
+                                key={project.id}
-                                    project={project}
+                                draggableId={project.id}
-                                    provided={provided}
+                                index={index}
-                                    snapshot={snapshot}
+                                isDragDisabled={!project.is_member}
-                                    handleCopyText={() => handleCopyText(project.id)}
+                              >
-                                    shortContextMenu
+                                {(provided, snapshot) => (
-                                  />
+                                  <div ref={provided.innerRef} {...provided.draggableProps}>
-                                </div>
+                                    <ProjectSidebarListItem
-                              )}
+                                      key={project.id}
-                            </Draggable>
+                                      project={project}
-                          ))}
+                                      provided={provided}
-                        </Disclosure.Panel>
+                                      snapshot={snapshot}
+                                      handleCopyText={() => handleCopyText(project.id)}
+                                      shortContextMenu
+                                    />
+                                  </div>
+                                )}
+                              </Draggable>
+                            ))}
+                          </Disclosure.Panel>
+                        </Transition>
                         {provided.placeholder}
                       </>
                     )}

web/components/views/delete-view-modal.tsx

@@ -104,7 +104,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
                           data related to the view will be permanently removed. This action cannot be undone.
                         </p>
                       </div>

web/components/views/form.tsx

@@ -9,7 +9,7 @@ import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 // types
-import { IProjectView } from "types";
+import { IProjectView, IIssueFilterOptions } from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
@@ -43,7 +43,34 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
     defaultValues,
   });
 
-  const selectedFilters = watch("query_data");
+  const selectedFilters: IIssueFilterOptions = {};
+  Object.entries(watch("query_data") ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    selectedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  // for removing filters from a key
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!value) return;
+
+    const newValues = selectedFilters?.[key] ?? [];
+
+    if (Array.isArray(value)) {
+      value.forEach((val) => {
+        if (newValues.includes(val)) newValues.splice(newValues.indexOf(val), 1);
+      });
+    } else {
+      if (selectedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+    }
+
+    setValue("query_data", {
+      ...selectedFilters,
+      [key]: newValues,
+    });
+  };
 
   const handleCreateUpdateView = async (formData: IProjectView) => {
     await handleFormSubmit(formData);
@@ -106,7 +133,7 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
                   id="description"
                   name="description"
                   placeholder="Description"
-                  className="resize-none text-sm"
+                  className="h-24 w-full resize-none text-sm"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -153,10 +180,10 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
               <AppliedFiltersList
                 appliedFilters={selectedFilters}
                 handleClearAllFilters={clearAllFilters}
-                handleRemoveFilter={() => {}}
+                handleRemoveFilter={handleRemoveFilter}
-                labels={projectStore.projectLabels ?? undefined}
+                labels={projectStore.projectLabels ?? []}
-                members={projectMembers?.map((m) => m.member) ?? undefined}
+                members={projectMembers?.map((m) => m.member) ?? []}
-                states={projectStateStore.projectStates ?? undefined}
+                states={projectStateStore.projectStates ?? []}
               />
             </div>
           )}

web/components/views/view-list-item.tsx

@@ -60,13 +60,13 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
         <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
           <a className="flex items-center justify-between relative rounded p-4 w-full">
             <div className="flex items-center justify-between w-full">
-              <div className="flex items-center gap-4">
+              <div className="flex items-center gap-4 overflow-hidden">
-                <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                <div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
                   <PhotoFilterIcon className="h-3.5 w-3.5" />
                 </div>
-                <div className="flex flex-col">
+                <div className="flex flex-col overflow-hidden ">
-                  <p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
+                  <p className="text-sm leading-4 font-medium truncate  break-all">{view.name}</p>
-                  {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
+                  {view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>}
                 </div>
               </div>
               <div className="ml-2 flex flex-shrink-0">

web/components/workspace/create-workspace-form.tsx

@@ -161,7 +161,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   }}
                   ref={ref}
                   hasError={Boolean(errors.slug)}
-                  placeholder="Enter workspace name..."
+                  placeholder="Enter workspace url..."
                   className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full border-none"
                 />
               )}

web/components/workspace/delete-workspace-modal.tsx

@@ -141,6 +141,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                           hasError={Boolean(errors.workspaceName)}
                           placeholder="Workspace name"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />
@@ -165,6 +166,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                           hasError={Boolean(errors.confirmDelete)}
                           placeholder="Enter 'delete my workspace'"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />

web/components/workspace/member-select.tsx

@@ -95,27 +95,37 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
             {filteredOptions ? (
               filteredOptions.length > 0 ? (
-                filteredOptions.map((workspaceMember: IWorkspaceMember) => (
+                <>
+                  {filteredOptions.map((workspaceMember: IWorkspaceMember) => (
+                    <Listbox.Option
+                      key={workspaceMember.id}
+                      value={workspaceMember}
+                      className={({ active, selected }) =>
+                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active && !selected ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          <div className="flex items-center gap-2">
+                            <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
+                            {workspaceMember.member.display_name}
+                          </div>
+                          {selected && <Check className="h-3.5 w-3.5" />}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
                   <Listbox.Option
-                    key={workspaceMember.id}
+                    value=""
-                    value={workspaceMember}
+                    className="flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200"
-                    className={({ active, selected }) =>
-                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                    }
                   >
-                    {({ selected }) => (
+                    <span className="flex items-center justify-start gap-1 text-custom-text-200">
-                      <>
+                      <span>No Lead</span>
-                        <div className="flex items-center gap-2">
+                    </span>
-                          <Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
-                          {workspaceMember.member.display_name}
-                        </div>
-                        {selected && <Check className="h-3.5 w-3.5" />}
-                      </>
-                    )}
                   </Listbox.Option>
-                ))
+                </>
               ) : (
                 <span className="flex items-center gap-2 p-1">
                   <p className="text-left text-custom-text-200 ">No matching results</p>

web/components/workspace/settings/members-list-item.tsx

@@ -1,6 +1,7 @@
 import { useState, FC } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { mutate } from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
@@ -39,7 +40,7 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
   // store
   const {
     workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation },
-    user: { currentWorkspaceMemberInfo, currentWorkspaceRole },
+    user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings },
   } = useMobxStore();
   const isAdmin = currentWorkspaceRole === 20;
   // states
@@ -51,14 +52,22 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
     if (!workspaceSlug) return;
 
     if (member.member)
-      await removeMember(workspaceSlug.toString(), member.id).catch((err) => {
+      await removeMember(workspaceSlug.toString(), member.id)
-        const error = err?.error;
+        .then(() => {
-        setToastAlert({
+          const memberId = member.memberId;
-          type: "error",
+
-          title: "Error",
+          if (memberId === currentUser?.id && currentUserSettings) {
-          message: error || "Something went wrong",
+            if (currentUserSettings.workspace?.invites > 0) router.push("/invitations");
+            else router.push("/create-workspace");
+          }
+        })
+        .catch((err) => {
+          setToastAlert({
+            type: "error",
+            title: "Error",
+            message: err?.error || "Something went wrong",
+          });
         });
-      });
     else
       await deleteWorkspaceInvitation(workspaceSlug.toString(), member.id)
         .then(() => {
@@ -69,12 +78,17 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
           });
         })
         .catch((err) => {
-          const error = err?.error;
-
           setToastAlert({
             type: "error",
             title: "Error",
-            message: error || "Something went wrong",
+            message: err?.error || "Something went wrong",
+          });
+        })
+        .finally(() => {
+          mutate(`WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`, (prevData: any) => {
+            if (!prevData) return prevData;
+
+            return prevData.filter((item: any) => item.id !== member.id);
           });
         });
   };

web/components/workspace/settings/members-list.tsx

@@ -29,9 +29,15 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ sea
   );
 
   const searchedMembers = workspaceMembersWithInvitations?.filter((member: any) => {
-    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+    const email = member.email?.toLowerCase();
     const displayName = member.display_name.toLowerCase();
-    return displayName.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
+    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+
+    return (
+      displayName.includes(searchQuery.toLowerCase()) ||
+      fullName.includes(searchQuery.toLowerCase()) ||
+      email?.includes(searchQuery.toLowerCase())
+    );
   });
 
   if (

web/components/workspace/views/form.tsx

@@ -114,7 +114,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   value={value}
                   placeholder="Description"
                   onChange={onChange}
-                  className="h-32 resize-none text-sm"
+                  className="h-24 w-full resize-none text-sm"
                   hasError={Boolean(errors?.description)}
                 />
               )}

web/layouts/settings-layout/workspace/sidebar.tsx

@@ -64,7 +64,7 @@ export const WorkspaceSettingsSidebar = () => {
               <a>
                 <div
                   className={`px-4 py-2 text-sm font-medium rounded-md ${
-                    (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                    router.pathname.split("/")?.[3] === link.href.split("/")?.[3]
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                   }`}

web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx

@@ -1,14 +1,12 @@
 import React, { ReactElement } from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
+import { observer } from "mobx-react-lite";
-// services
+// store
-import { ProjectService, ProjectMemberService } from "services/project";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProjectSettingLayout } from "layouts/settings-layout";
 // hooks
-import useUserAuth from "hooks/use-user-auth";
-import useProjectDetails from "hooks/use-project-details";
 import useToast from "hooks/use-toast";
 // components
 import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
@@ -16,45 +14,32 @@ import { ProjectSettingHeader } from "components/headers";
 // types
 import { NextPageWithLayout } from "types/app";
 import { IProject } from "types";
-// constant
-import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 
-// services
+const AutomationSettingsPage: NextPageWithLayout = observer(() => {
-const projectService = new ProjectService();
-const projectMemberService = new ProjectMemberService();
-
-const AutomationSettingsPage: NextPageWithLayout = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { user } = useUserAuth();
   const { setToastAlert } = useToast();
 
-  const { projectDetails } = useProjectDetails();
+  // store
-
+  const {
-  const { data: memberDetails } = useSWR(
+    user: { currentProjectRole },
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
+    project: { currentProjectDetails: projectDetails, updateProject },
-    workspaceSlug && projectId
+  } = useMobxStore();
-      ? () => projectMemberService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
 
   const handleChange = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !projectDetails) return;
 
-    await projectService
+    await updateProject(workspaceSlug.toString(), projectId.toString(), formData).catch(() => {
-      .updateProject(workspaceSlug as string, projectId as string, formData, user)
+      setToastAlert({
-      .then(() => {})
+        type: "error",
-      .catch(() => {
+        title: "Error!",
-        setToastAlert({
+        message: "Something went wrong. Please try again.",
-          type: "error",
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        });
       });
+    });
   };
 
-  const isAdmin = memberDetails?.role === 20;
+  const isAdmin = currentProjectRole === 20;
 
   return (
     <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
@@ -65,7 +50,7 @@ const AutomationSettingsPage: NextPageWithLayout = () => {
       <AutoCloseAutomation handleChange={handleChange} />
     </section>
   );
-};
+});
 
 AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (

web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -17,7 +17,7 @@ const EstimatesSettingsPage: NextPageWithLayout = () => (
 EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
   return (
     <AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
-      <ProjectSettingLayout>{page}; </ProjectSettingLayout>
+      <ProjectSettingLayout>{page}</ProjectSettingLayout>
     </AppLayout>
   );
 };

web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -43,7 +43,7 @@ const ProjectIntegrationsPage: NextPageWithLayout = () => {
 
   return (
     <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
         <h3 className="text-xl font-medium">Integrations</h3>
       </div>
       {workspaceIntegrations ? (

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

@@ -9,12 +9,12 @@ import ExportGuide from "components/exporter/guide";
 import { NextPageWithLayout } from "types/app";
 
 const ExportsPage: NextPageWithLayout = () => (
-      <div className="pr-9 py-8 w-full overflow-y-auto">
+  <div className="pr-9 py-8 w-full overflow-y-auto">
-        <div className="flex items-center py-3.5 border-b border-custom-border-100">
+    <div className="flex items-center py-3.5 border-b border-custom-border-100">
-          <h3 className="text-xl font-medium">Exports</h3>
+      <h3 className="text-xl font-medium">Exports</h3>
-        </div>
+    </div>
-        <ExportGuide />
+    <ExportGuide />
-      </div>
+  </div>
 );
 
 ExportsPage.getLayout = function getLayout(page: ReactElement) {

web/store/workspace/workspace-member.store.ts

@@ -208,29 +208,38 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    * @param data
    */
   updateMember = async (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => {
-    const members = this.members?.[workspaceSlug];
+    const originalMembers = [...this.members?.[workspaceSlug]]; // in case of error, we will revert back to original members
-    members?.map((m) => (m.id === memberId ? { ...m, ...data } : m));
+
+    const members = [...this.members?.[workspaceSlug]];
+
+    const index = members.findIndex((m) => m.id === memberId);
+    members[index] = { ...members[index], ...data };
+
+    // optimistic update
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.members = {
+        ...this.members,
+        [workspaceSlug]: members,
+      };
+    });
 
     try {
-      runInAction(() => {
-        this.loader = true;
-        this.error = null;
-      });
-
       await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberId, data);
 
       runInAction(() => {
         this.loader = false;
         this.error = null;
-        this.members = {
-          ...this.members,
-          [workspaceSlug]: members,
-        };
       });
     } catch (error) {
       runInAction(() => {
         this.loader = false;
         this.error = error;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: originalMembers,
+        };
       });
 
       throw error;
@@ -243,8 +252,20 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    * @param memberId
    */
   removeMember = async (workspaceSlug: string, memberId: string) => {
-    const members = this.members?.[workspaceSlug];
+    const members = [...this.members?.[workspaceSlug]];
-    members?.filter((m) => m.id !== memberId);
+    const originalMembers = this.members?.[workspaceSlug]; // in case of error, we will revert back to original members
+
+    // removing member from the array
+    const index = members.findIndex((m) => m.id === memberId);
+    members.splice(index, 1);
+
+    // optimistic update
+    runInAction(() => {
+      this.members = {
+        ...this.members,
+        [workspaceSlug]: members,
+      };
+    });
 
     try {
       runInAction(() => {
@@ -257,15 +278,15 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       runInAction(() => {
         this.loader = false;
         this.error = null;
-        this.members = {
-          ...this.members,
-          [workspaceSlug]: members,
-        };
       });
     } catch (error) {
       runInAction(() => {
         this.loader = false;
         this.error = error;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: originalMembers,
+        };
       });
 
       throw error;