Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanaban-sorting

.gitpod.yml

@@ -1,11 +0,0 @@
-# This configuration file was automatically generated by Gitpod.
-# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
-# and commit this file to your remote git repository to share the goodness with others.
-
-# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
-
-tasks:
-  - init: yarn install && yarn run build
-    command: yarn run start
-
-

apiserver/plane/api/views/cycle.py

@@ -333,13 +333,21 @@ class CycleViewSet(BaseViewSet):
                 workspace__slug=slug, project_id=project_id, pk=pk
             )
 
+            request_data = request.data
+
             if cycle.end_date is not None and cycle.end_date < timezone.now().date():
-                return Response(
-                    {
-                        "error": "The Cycle has already been completed so it cannot be edited"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
+                if "sort_order" in request_data:
+                    # Can only change sort order
+                    request_data = {
+                        "sort_order": request_data.get("sort_order", cycle.sort_order)
+                    }
+                else:
+                    return Response(
+                        {
+                            "error": "The Cycle has already been completed so it cannot be edited"
+                        },
+                        status=status.HTTP_400_BAD_REQUEST,
+                    )
 
             serializer = CycleWriteSerializer(cycle, data=request.data, partial=True)
             if serializer.is_valid():
@@ -373,7 +381,9 @@ class CycleViewSet(BaseViewSet):
                 .annotate(assignee_id=F("assignees__id"))
                 .annotate(avatar=F("assignees__avatar"))
                 .annotate(display_name=F("assignees__display_name"))
-                .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
+                .values(
+                    "first_name", "last_name", "assignee_id", "avatar", "display_name"
+                )
                 .annotate(total_issues=Count("assignee_id"))
                 .annotate(
                     completed_issues=Count(
@@ -709,7 +719,6 @@ class CycleDateCheckEndpoint(BaseAPIView):
 
 
 class CycleFavoriteViewSet(BaseViewSet):
-
     serializer_class = CycleFavoriteSerializer
     model = CycleFavorite
 

apiserver/plane/api/views/issue.py

@@ -17,6 +17,7 @@ from django.db.models import (
     When,
     Exists,
     Max,
+    IntegerField,
 )
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.decorators import method_decorator
@@ -337,7 +338,11 @@ class UserWorkSpaceIssues(BaseAPIView):
 
             issue_queryset = (
                 Issue.issue_objects.filter(
-                    (Q(assignees__in=[request.user]) | Q(created_by=request.user) | Q(issue_subscribers__subscriber=request.user)),
+                    (
+                        Q(assignees__in=[request.user])
+                        | Q(created_by=request.user)
+                        | Q(issue_subscribers__subscriber=request.user)
+                    ),
                     workspace__slug=slug,
                 )
                 .annotate(
@@ -1994,7 +1999,9 @@ class IssueVotePublicViewSet(BaseViewSet):
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         except IntegrityError:
-            return Response({"error": "Reaction already exists"}, status=status.HTTP_400_BAD_REQUEST)
+            return Response(
+                {"error": "Reaction already exists"}, status=status.HTTP_400_BAD_REQUEST
+            )
         except Exception as e:
             capture_exception(e)
             return Response(
@@ -2172,9 +2179,32 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
 
             issues = IssuePublicSerializer(issue_queryset, many=True).data
 
-            states = State.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            ).values("name", "group", "color", "id")
+            state_group_order = [
+                "backlog",
+                "unstarted",
+                "started",
+                "completed",
+                "cancelled",
+            ]
+
+            states = (
+                State.objects.filter(
+                    workspace__slug=slug,
+                    project_id=project_id,
+                )
+                .annotate(
+                    custom_order=Case(
+                        *[
+                            When(group=value, then=Value(index))
+                            for index, value in enumerate(state_group_order)
+                        ],
+                        default=Value(len(state_group_order)),
+                        output_field=IntegerField(),
+                    ),
+                )
+                .values("name", "group", "color", "id")
+                .order_by("custom_order", "sequence")
+            )
 
             labels = Label.objects.filter(
                 workspace__slug=slug, project_id=project_id

space/.env.example

@@ -1 +1,8 @@
-NEXT_PUBLIC_API_BASE_URL=''
+# Base url for the API requests
+NEXT_PUBLIC_API_BASE_URL=""
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL="https://plane-space-dev.vercel.app"
+# Google Client ID for Google OAuth
+NEXT_PUBLIC_GOOGLE_CLIENTID=232920797020-235n93bn7hh7628vdd69hq873129ng4o.apps.googleusercontent.com
+# Flag to toggle OAuth
+NEXT_PUBLIC_ENABLE_OAUTH=1

space/components/accounts/index.ts

@@ -4,3 +4,5 @@ export * from "./email-reset-password-form";
 export * from "./github-login-button";
 export * from "./google-login";
 export * from "./onboarding-form";
+export * from "./sign-in";
+export * from "./user-logged-in";

space/components/accounts/sign-in.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
+
+export const SignInView = observer(() => {
+  const { user: userStore } = useMobxStore();
+
+  const router = useRouter();
+  const { next_path } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onSignInError = (error: any) => {
+    setToastAlert({
+      title: "Error signing in!",
+      type: "error",
+      message: error?.error || "Something went wrong. Please try again later or contact the support team.",
+    });
+  };
+
+  const onSignInSuccess = (response: any) => {
+    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
+
+    userStore.setCurrentUser(response?.user);
+
+    if (!isOnboarded) {
+      router.push(`/onboarding?next_path=${next_path}`);
+      return;
+    }
+    router.push((next_path ?? "/").toString());
+  };
+
+  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
+    try {
+      if (clientId && credential) {
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handleGitHubSignIn = async (credential: string) => {
+    try {
+      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+        onSignInSuccess(response);
+      } else {
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  const handlePasswordSignIn = async (formData: any) => {
+    await authenticationService
+      .emailLogin(formData)
+      .then((response) => {
+        try {
+          if (response) {
+            onSignInSuccess(response);
+          }
+        } catch (err: any) {
+          onSignInError(err);
+        }
+      })
+      .catch((err) => onSignInError(err));
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      if (response) {
+        onSignInSuccess(response);
+      }
+    } catch (err: any) {
+      onSignInError(err);
+    }
+  };
+
+  return (
+    <div className="h-screen w-full overflow-hidden">
+      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+        <div className="grid place-items-center bg-custom-background-100">
+          <div className="h-[30px] w-[30px]">
+            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+          </div>
+        </div>
+      </div>
+      <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
+        <div>
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <>
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                Sign in to Plane
+              </h1>
+              <div className="flex flex-col divide-y divide-custom-border-200">
+                <div className="pb-7">
+                  <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                </div>
+                <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                  <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                  {/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
+                </div>
+              </div>
+            </>
+          ) : (
+            <EmailPasswordForm onSubmit={handlePasswordSignIn} />
+          )}
+
+          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+            <p className="pt-16 text-custom-text-200 text-sm text-center">
+              By signing up, you agree to the{" "}
+              <a
+                href="https://plane.so/terms-and-conditions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-medium underline"
+              >
+                Terms & Conditions
+              </a>
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+});

space/components/accounts/user-logged-in.tsx

@@ -0,0 +1,51 @@
+import Image from "next/image";
+
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+// assets
+import UserLoggedInImage from "public/user-logged-in.svg";
+import PlaneLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
+
+export const UserLoggedIn = () => {
+  const { user: userStore } = useMobxStore();
+  const user = userStore.currentUser;
+
+  if (!user) return null;
+
+  return (
+    <div className="h-screen w-screen flex flex-col">
+      <div className="px-6 py-5 relative w-full flex items-center justify-between gap-4 border-b border-custom-border-200">
+        <div>
+          <Image src={PlaneLogo} alt="User already logged in" />
+        </div>
+        <div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
+          {user.avatar && user.avatar !== "" ? (
+            <div className="h-5 w-5 rounded-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
+            </div>
+          ) : (
+            <div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
+              {(user.display_name ?? "U")[0]}
+            </div>
+          )}
+          <h6 className="text-xs font-medium">{user.display_name}</h6>
+        </div>
+      </div>
+
+      <div className="h-full w-full grid place-items-center p-6">
+        <div className="text-center">
+          <div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
+            <div className="h-32 w-32">
+              <Image src={UserLoggedInImage} alt="User already logged in" />
+            </div>
+          </div>
+          <h1 className="text-3xl font-semibold mt-12">Logged in Successfully!</h1>
+          <p className="mt-4">
+            You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

space/components/icons/index.ts

@@ -1,5 +1 @@
-export * from "./issue-group/backlog-state-icon";
-export * from "./issue-group/unstarted-state-icon";
-export * from "./issue-group/started-state-icon";
-export * from "./issue-group/completed-state-icon";
-export * from "./issue-group/cancelled-state-icon";
+export * from "./state-group";

space/components/icons/state-group/index.ts

@@ -0,0 +1,6 @@
+export * from "./backlog-state-icon";
+export * from "./cancelled-state-icon";
+export * from "./completed-state-icon";
+export * from "./started-state-icon";
+export * from "./state-group-icon";
+export * from "./unstarted-state-icon";

space/components/icons/state-group/state-group-icon.tsx

@@ -0,0 +1,29 @@
+// icons
+import {
+  BacklogStateIcon,
+  CancelledStateIcon,
+  CompletedStateIcon,
+  StartedStateIcon,
+  UnstartedStateIcon,
+} from "components/icons";
+import { TIssueGroupKey } from "types/issue";
+
+type Props = {
+  stateGroup: TIssueGroupKey;
+  color: string;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export const StateGroupIcon: React.FC<Props> = ({ stateGroup, className, color, height = "12px", width = "12px" }) => {
+  if (stateGroup === "backlog")
+    return <BacklogStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "cancelled")
+    return <CancelledStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "completed")
+    return <CompletedStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "started")
+    return <StartedStateIcon className={className} color={color} height={height} width={width} />;
+  else return <UnstartedStateIcon className={className} color={color} height={height} width={width} />;
+};

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

@@ -1,11 +1,11 @@
-"use client";
-
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
 import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
+// icons
+import { StateGroupIcon } from "components/icons";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -20,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   return (
     <div className="pb-2 px-2 flex items-center">
       <div className="w-4 h-4 flex justify-center items-center flex-shrink-0">
-        <stateGroup.icon />
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
       </div>
       <div className="font-semibold text-custom-text-200 capitalize ml-2 mr-3 truncate">{state?.name}</div>
       <span className="text-custom-text-300 rounded-full flex-shrink-0">

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

@@ -6,15 +6,12 @@ import { IssueBlockPriority } from "components/issues/board-views/block-priority
 import { IssueBlockState } from "components/issues/board-views/block-state";
 import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
-import { IssueBlockUpVotes } from "components/issues/board-views/block-upvotes";
-import { IssueBlockDownVotes } from "components/issues/board-views/block-downvotes";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
 import { IIssue } from "types/issue";
 // store
 import { RootStore } from "store/root";
-import { IssueVotes } from "components/issues/peek-overview";
 
 export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
   const { issue } = props;
@@ -40,9 +37,6 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
     // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
   };
 
-  const totalUpVotes = issue.votes.filter((v) => v.vote === 1);
-  const totalDownVotes = issue.votes.filter((v) => v.vote === -1);
-
   return (
     <div className="flex items-center px-6 py-3.5 relative gap-10 bg-custom-background-100">
       <div className="relative flex items-center gap-5 w-full flex-grow overflow-hidden">

space/components/issues/board-views/list/header.tsx

@@ -1,9 +1,9 @@
-"use client";
-
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
 import { IIssueState } from "types/issue";
+// icons
+import { StateGroupIcon } from "components/icons";
 // constants
 import { issueGroupFilter } from "constants/data";
 // mobx hook
@@ -20,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   return (
     <div className="px-6 py-2 flex items-center">
       <div className="w-4 h-4 flex justify-center items-center">
-        <stateGroup.icon />
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
       </div>
       <div className="font-semibold capitalize ml-2 mr-3">{state?.name}</div>
       <div className="text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>

space/components/issues/board-views/list/index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListHeader } from "components/issues/board-views/list/header";
@@ -9,7 +8,6 @@ import { IIssueState, IIssue } from "types/issue";
 import { useMobxStore } from "lib/mobx/store-provider";
 // store
 import { RootStore } from "store/root";
-import { useRouter } from "next/router";
 
 export const IssueListView = observer(() => {
   const { issue: issueStore }: RootStore = useMobxStore();

space/components/issues/peek-overview/header.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { useRouter } from "next/router";
-
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // hooks
@@ -48,15 +46,12 @@ export const PeekOverviewHeader: React.FC<Props> = (props) => {
 
   const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
 
-  const router = useRouter();
-  const { workspace_slug } = router.query;
-
   const { setToastAlert } = useToast();
 
   const handleCopyLink = () => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const urlToCopy = window.location.href;
 
-    copyTextToClipboard(`${originURL}/${workspace_slug}/projects/${issueDetails?.project}/`).then(() => {
+    copyTextToClipboard(urlToCopy).then(() => {
       setToastAlert({
         type: "success",
         title: "Link copied!",

space/components/issues/peek-overview/issue-properties.tsx

@@ -1,21 +1,15 @@
-// headless ui
-import { Disclosure } from "@headlessui/react";
-// import { getStateGroupIcon } from "components/icons";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
 import { Icon } from "components/ui";
 import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
+// helpers
+import { renderDateFormat } from "constants/helpers";
 // types
 import { IIssue } from "types/issue";
+import { IPeekMode } from "store/issue_details";
 // constants
 import { issueGroupFilter, issuePriorityFilter } from "constants/data";
-import { useEffect } from "react";
-import { renderDateFormat } from "constants/helpers";
-import { IPeekMode } from "store/issue_details";
-import { useRouter } from "next/router";
-import { RootStore } from "store/root";
-import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   issueDetails: IIssue;
@@ -37,11 +31,6 @@ const validDate = (date: any, state: string): string => {
 export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mode }) => {
   const { setToastAlert } = useToast();
 
-  const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
   const startDate = issueDetails.start_date;
   const targetDate = issueDetails.target_date;
 
@@ -57,11 +46,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
   const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
 
   const handleCopyLink = () => {
-    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const urlToCopy = window.location.href;
 
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${issueDetails.project}/issues/${issueDetails.id}`
-    ).then(() => {
+    copyTextToClipboard(urlToCopy).then(() => {
       setToastAlert({
         type: "success",
         title: "Link copied!",

space/components/issues/peek-overview/layout.tsx

@@ -65,26 +65,24 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
   return (
     <>
       <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
-          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-            <Transition.Child
-              as={React.Fragment}
-              enter="transition-transform duration-300"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transition-transform duration-200"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm">
-                <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+        <Dialog as="div" onClose={handleClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="transition-transform duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-transform duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-sm">
+              <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+            </Dialog.Panel>
+          </Transition.Child>
         </Dialog>
       </Transition.Root>
       <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Dialog as="div" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -96,32 +94,30 @@ export const IssuePeekOverview: React.FC<Props> = observer((props) => {
           >
             <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
-          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <Dialog.Panel>
-                <div
-                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                    issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                  }`}
-                >
-                  {issueDetailStore.peekMode === "modal" && (
-                    <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
-                  )}
-                  {issueDetailStore.peekMode === "full" && (
-                    <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
-                  )}
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Panel>
+              <div
+                className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                  issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                }`}
+              >
+                {issueDetailStore.peekMode === "modal" && (
+                  <SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+                {issueDetailStore.peekMode === "full" && (
+                  <FullScreenPeekView handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
         </Dialog>
       </Transition.Root>
     </>

space/components/views/home.tsx

@@ -0,0 +1,13 @@
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SignInView, UserLoggedIn } from "components/accounts";
+
+export const HomeView = observer(() => {
+  const { user: userStore } = useMobxStore();
+
+  if (!userStore.currentUser) return <SignInView />;
+
+  return <UserLoggedIn />;
+});

space/components/views/index.ts

@@ -0,0 +1 @@
+export * from "./home";

space/components/views/project-details.tsx

@@ -55,7 +55,7 @@ export const ProjectDetailsView = observer(() => {
       ) : (
         <>
           {issueStore?.error ? (
-            <div className="text-sm text-center py-10  bg-custom-background-200 text-custom-text-100">
+            <div className="text-sm text-center py-10 bg-custom-background-200 text-custom-text-100">
               Something went wrong.
             </div>
           ) : (
@@ -67,7 +67,7 @@ export const ProjectDetailsView = observer(() => {
                   </div>
                 )}
                 {projectStore?.activeBoard === "kanban" && (
-                  <div className="relative w-full h-full mx-auto px-9 py-5">
+                  <div className="relative w-full h-full mx-auto p-5">
                     <IssueKanbanView />
                   </div>
                 )}

space/layouts/project-layout.tsx

@@ -13,18 +13,20 @@ const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
       <IssueNavbar />
     </div>
     <div className="w-full h-full relative bg-custom-background-90 overflow-hidden">{children}</div>
-    <div className="absolute z-[99999] bottom-[10px] right-[10px] bg-custom-background-100 rounded-sm shadow-lg border border-custom-border-300">
-      <Link href="https://plane.so" as="https://plane.so">
-        <a className="p-1 px-2 flex items-center gap-1" target="_blank">
-          <div className="w-[24px] h-[24px] relative flex justify-center items-center">
-            <Image src={planeLogo} alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
-          </div>
-          <div className="text-xs">
-            Powered by <b>Plane Deploy</b>
-          </div>
-        </a>
-      </Link>
-    </div>
+
+    <a
+      href="https://plane.so"
+      className="fixed !z-[999999] bottom-2.5 right-5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border border-custom-border-200 py-1 px-2 flex items-center gap-1"
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      <div className="w-6 h-6 relative grid place-items-center">
+        <Image src={planeLogo} alt="Plane logo" className="w-6 h-6" height="24" width="24" />
+      </div>
+      <div className="text-xs">
+        Powered by <span className="font-semibold">Plane Deploy</span>
+      </div>
+    </a>
   </div>
 );
 

space/pages/_app.tsx

@@ -12,6 +12,8 @@ import MobxStoreInit from "lib/mobx/store-init";
 // constants
 import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "constants/seo";
 
+const prefix = parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0") === 0 ? "/" : "/spaces/";
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <MobxStoreProvider>
@@ -25,11 +27,11 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta property="og:description" content={SITE_DESCRIPTION} />
         <meta name="keywords" content={SITE_KEYWORDS} />
         <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
-        <link rel="apple-touch-icon" sizes="180x180" href="/spaces/favicon/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/spaces/favicon/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/spaces/favicon/favicon-16x16.png" />
-        <link rel="manifest" href="/spaces/site.webmanifest.json" />
-        <link rel="shortcut icon" href="/spaces/favicon/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href={`${prefix}favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${prefix}site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
       </Head>
       <ToastContextProvider>
         <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>

space/pages/index.tsx

@@ -1,156 +1,8 @@
-import React, { useEffect } from "react";
-import Image from "next/image";
-import { useRouter } from "next/router";
-// assets
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
-// mobx
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// services
-import authenticationService from "services/authentication.service";
-// hooks
-import useToast from "hooks/use-toast";
+import React from "react";
+
 // components
-import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
+import { HomeView } from "components/views";
 
-const HomePage = () => {
-  const { user: userStore } = useMobxStore();
-
-  const router = useRouter();
-  const { next_path } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const onSignInError = (error: any) => {
-    setToastAlert({
-      title: "Error signing in!",
-      type: "error",
-      message: error?.error || "Something went wrong. Please try again later or contact the support team.",
-    });
-  };
-
-  const onSignInSuccess = (response: any) => {
-    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
-
-    userStore.setCurrentUser(response?.user);
-
-    if (!isOnboarded) {
-      router.push(`/onboarding?next_path=${next_path}`);
-      return;
-    }
-    router.push((next_path ?? "/").toString());
-  };
-
-  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
-    try {
-      if (clientId && credential) {
-        const socialAuthPayload = {
-          medium: "google",
-          credential,
-          clientId,
-        };
-        const response = await authenticationService.socialAuth(socialAuthPayload);
-
-        onSignInSuccess(response);
-      } else {
-        throw Error("Cant find credentials");
-      }
-    } catch (err: any) {
-      onSignInError(err);
-    }
-  };
-
-  const handleGitHubSignIn = async (credential: string) => {
-    try {
-      if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
-        const socialAuthPayload = {
-          medium: "github",
-          credential,
-          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
-        };
-        const response = await authenticationService.socialAuth(socialAuthPayload);
-        onSignInSuccess(response);
-      } else {
-        throw Error("Cant find credentials");
-      }
-    } catch (err: any) {
-      onSignInError(err);
-    }
-  };
-
-  const handlePasswordSignIn = async (formData: any) => {
-    await authenticationService
-      .emailLogin(formData)
-      .then((response) => {
-        try {
-          if (response) {
-            onSignInSuccess(response);
-          }
-        } catch (err: any) {
-          onSignInError(err);
-        }
-      })
-      .catch((err) => onSignInError(err));
-  };
-
-  const handleEmailCodeSignIn = async (response: any) => {
-    try {
-      if (response) {
-        onSignInSuccess(response);
-      }
-    } catch (err: any) {
-      onSignInError(err);
-    }
-  };
-
-  return (
-    <div className="h-screen w-full overflow-hidden">
-      <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
-      <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
-        <div className="grid place-items-center bg-custom-background-100">
-          <div className="h-[30px] w-[30px]">
-            <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
-          </div>
-        </div>
-      </div>
-      <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
-        <div>
-          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-            <>
-              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-                Sign in to Plane
-              </h1>
-              <div className="flex flex-col divide-y divide-custom-border-200">
-                <div className="pb-7">
-                  <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                </div>
-                <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
-                  <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
-                  {/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
-                </div>
-              </div>
-            </>
-          ) : (
-            <EmailPasswordForm onSubmit={handlePasswordSignIn} />
-          )}
-
-          {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-            <p className="pt-16 text-custom-text-200 text-sm text-center">
-              By signing up, you agree to the{" "}
-              <a
-                href="https://plane.so/terms-and-conditions"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="font-medium underline"
-              >
-                Terms & Conditions
-              </a>
-            </p>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};
+const HomePage = () => <HomeView />;
 
 export default HomePage;

space/public/site.webmanifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "Plane Space",
+  "short_name": "Plane Space",
+  "description": "Plane helps you plan your issues, cycles, and product modules.",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#f9fafb",
+  "theme_color": "#3f76ff",
+  "icons": [
+    { "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

space/public/user-logged-in.svg

@@ -0,0 +1,3 @@
+<svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5747 100.561C16.241 100.561 15.123 100.11 14.2207 99.2074C13.3184 98.3051 12.8672 97.187 12.8672 95.8533V88.9824C12.8672 86.218 13.5633 83.8025 14.9556 81.7359C16.3478 79.6694 18.1957 78.0518 20.4995 76.8832C24.9266 74.6263 29.6007 72.8 34.5217 71.4044C39.4429 70.0089 45.2455 69.3112 51.9296 69.3112C54.5337 69.3112 56.956 69.4164 59.1962 69.6267C61.4364 69.837 63.528 70.1525 65.4711 70.5732L58.5603 77.484C57.6054 77.3104 56.5721 77.2069 55.4603 77.1736C54.3485 77.1401 53.1716 77.1234 51.9296 77.1234C45.7664 77.1234 40.3661 77.8112 35.7286 79.1867C31.0912 80.5622 27.21 82.1181 24.085 83.8542C22.9032 84.4885 22.0401 85.2297 21.4958 86.0777C20.9517 86.9258 20.6796 87.8941 20.6796 88.9824V92.7484H52.23L60.0423 100.561H17.5747ZM80.3283 102.484C79.7051 102.484 79.1231 102.384 78.5822 102.183C78.0413 101.983 77.5241 101.636 77.0306 101.143L66.9135 91.0257C66.1925 90.3046 65.8235 89.3981 65.8068 88.3064C65.7901 87.2147 66.159 86.2916 66.9135 85.5371C67.6681 84.7825 68.5829 84.4052 69.6579 84.4052C70.7329 84.4052 71.6477 84.7825 72.4022 85.5371L80.335 93.4698L103.893 69.9121C104.614 69.1909 105.52 68.822 106.612 68.8053C107.704 68.7886 108.627 69.1575 109.381 69.9121C110.136 70.6666 110.513 71.5814 110.513 72.6564C110.513 73.7314 110.136 74.6461 109.381 75.4007L83.6302 101.152C83.1428 101.639 82.6264 101.983 82.0811 102.183C81.5358 102.384 80.9515 102.484 80.3283 102.484ZM51.9296 60.8974C46.9166 60.8974 42.6252 59.1125 39.0553 55.5427C35.4855 51.9728 33.7007 47.6814 33.7007 42.6685C33.7007 37.6555 35.4855 33.3641 39.0553 29.7943C42.6252 26.2244 46.9166 24.4395 51.9296 24.4395C56.9425 24.4395 61.2339 26.2244 64.8038 29.7943C68.3737 33.3641 70.1586 37.6555 70.1586 42.6685C70.1586 47.6814 68.3737 51.9728 64.8038 55.5427C61.2339 59.1125 56.9425 60.8974 51.9296 60.8974ZM51.9296 53.0852C54.7941 53.0852 57.2464 52.0652 59.2863 50.0253C61.3263 47.9853 62.3462 45.5331 62.3462 42.6685C62.3462 39.8039 61.3263 37.3517 59.2863 35.3117C57.2464 33.2718 54.7941 32.2518 51.9296 32.2518C49.065 32.2518 46.6127 33.2718 44.5728 35.3117C42.5329 37.3517 41.5129 39.8039 41.5129 42.6685C41.5129 45.5331 42.5329 47.9853 44.5728 50.0253C46.6127 52.0652 49.065 53.0852 51.9296 53.0852Z" fill="#9D9D9D"/>
+</svg>

web/.env.example

@@ -0,0 +1,26 @@
+# Base url for the API requests
+NEXT_PUBLIC_API_BASE_URL=""
+# Extra image domains that need to be added for Next Image
+NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
+# Google Client ID for Google OAuth
+NEXT_PUBLIC_GOOGLE_CLIENTID=""
+# GitHub App ID for GitHub OAuth
+NEXT_PUBLIC_GITHUB_ID=""
+# GitHub App Name for GitHub Integration
+NEXT_PUBLIC_GITHUB_APP_NAME=""
+# Sentry DSN for error monitoring
+NEXT_PUBLIC_SENTRY_DSN=""
+# Enable/Disable OAUTH - default 0 for selfhosted instance
+NEXT_PUBLIC_ENABLE_OAUTH=0
+# Enable/Disable Sentry
+NEXT_PUBLIC_ENABLE_SENTRY=0
+# Enable/Disable session recording
+NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
+# Enable/Disable event tracking
+NEXT_PUBLIC_TRACK_EVENTS=0
+# Slack Client ID for Slack Integration
+NEXT_PUBLIC_SLACK_CLIENT_ID=""
+# For Telemetry, set it to "app.plane.so"
+NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL=""

web/components/cycles/gantt-chart/cycle-issues-layout.tsx

@@ -5,6 +5,7 @@ import useIssuesView from "hooks/use-issues-view";
 import useUser from "hooks/use-user";
 import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -18,6 +19,7 @@ export const CycleIssuesGanttChartView = () => {
   const { orderBy } = useIssuesView();
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartCycleIssues(
     workspaceSlug as string,
@@ -25,6 +27,8 @@ export const CycleIssuesGanttChartView = () => {
     cycleId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -37,7 +41,10 @@ export const CycleIssuesGanttChartView = () => {
         }
         SidebarBlockRender={IssueGanttSidebarBlock}
         BlockRender={IssueGanttBlock}
-        enableReorder={orderBy === "sort_order"}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={orderBy === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>

web/components/cycles/gantt-chart/cycles-list-layout.tsx

@@ -8,6 +8,7 @@ import { KeyedMutator } from "swr";
 import cyclesService from "services/cycles.service";
 // hooks
 import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
 import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
@@ -24,6 +25,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
   const { workspaceSlug } = router.query;
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
@@ -71,6 +73,8 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
           }))
       : [];
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full overflow-y-auto">
       <GanttChartRoot
@@ -83,6 +87,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         enableBlockLeftResize={false}
         enableBlockRightResize={false}
         enableBlockMove={false}
+        enableReorder={isAllowed}
       />
     </div>
   );

web/components/issues/gantt-chart/layout.tsx

@@ -5,6 +5,7 @@ import useIssuesView from "hooks/use-issues-view";
 import useUser from "hooks/use-user";
 import useGanttChartIssues from "hooks/gantt-chart/issue-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -18,12 +19,15 @@ export const IssueGanttChartView = () => {
   const { orderBy } = useIssuesView();
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartIssues(
     workspaceSlug as string,
     projectId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -36,7 +40,10 @@ export const IssueGanttChartView = () => {
         }
         BlockRender={IssueGanttBlock}
         SidebarBlockRender={IssueGanttSidebarBlock}
-        enableReorder={orderBy === "sort_order"}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={orderBy === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>

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

@@ -50,12 +50,9 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
   maxDate?.setDate(maxDate.getDate());
 
   const handleCopyLink = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const urlToCopy = window.location.href;
 
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
-    ).then(() => {
+    copyTextToClipboard(urlToCopy).then(() => {
       setToastAlert({
         type: "success",
         title: "Link copied!",

web/components/modules/gantt-chart/module-issues-layout.tsx

@@ -7,6 +7,7 @@ import useIssuesView from "hooks/use-issues-view";
 import useUser from "hooks/use-user";
 import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -22,6 +23,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
   const { orderBy } = useIssuesView();
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartModuleIssues(
     workspaceSlug as string,
@@ -29,6 +31,8 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
     moduleId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -41,7 +45,10 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
         }
         SidebarBlockRender={IssueGanttSidebarBlock}
         BlockRender={IssueGanttBlock}
-        enableReorder={orderBy === "sort_order"}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={orderBy === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>

web/components/modules/gantt-chart/modules-list-layout.tsx

@@ -1,7 +1,6 @@
 import { FC } from "react";
 
 import { useRouter } from "next/router";
-import Link from "next/link";
 
 import { KeyedMutator } from "swr";
 
@@ -9,6 +8,7 @@ import { KeyedMutator } from "swr";
 import modulesService from "services/modules.service";
 // hooks
 import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
 import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
@@ -25,6 +25,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
   const { workspaceSlug } = router.query;
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
@@ -78,6 +79,8 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
           }))
       : [];
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full overflow-y-auto">
       <GanttChartRoot
@@ -87,6 +90,10 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
         SidebarBlockRender={ModuleGanttSidebarBlock}
         BlockRender={ModuleGanttBlock}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed}
       />
     </div>
   );

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

@@ -0,0 +1,220 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// swr
+import { mutate } from "swr";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// ui
+import { DangerButton, Input, SecondaryButton } from "components/ui";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// types
+import { IProject } from "types";
+
+type FormData = {
+  projectName: string;
+  confirmLeave: string;
+};
+
+const defaultValues: FormData = {
+  projectName: "",
+  confirmLeave: "",
+};
+
+export const ConfirmProjectLeaveModal: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const store: RootStore = useMobxStore();
+  const { project } = store;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm({ defaultValues });
+
+  const handleClose = () => {
+    project.handleProjectLeaveModal(null);
+
+    reset({ ...defaultValues });
+  };
+
+  project?.projectLeaveDetails &&
+    console.log("project leave confirmation modal", project?.projectLeaveDetails);
+
+  const onSubmit = async (data: any) => {
+    if (data) {
+      if (data.projectName === project?.projectLeaveDetails?.name) {
+        if (data.confirmLeave === "Leave Project") {
+          return project
+            .leaveProject(
+              project.projectLeaveDetails.workspaceSlug.toString(),
+              project.projectLeaveDetails.id.toString(),
+              user
+            )
+            .then((res) => {
+              mutate<IProject[]>(
+                PROJECTS_LIST(project.projectLeaveDetails.workspaceSlug.toString(), {
+                  is_favorite: "all",
+                }),
+                (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
+                false
+              );
+              handleClose();
+              router.push(`/${workspaceSlug}/projects`);
+            })
+            .catch((err) => {
+              setToastAlert({
+                type: "error",
+                title: "Error!",
+                message: "Something went wrong please try again later.",
+              });
+            });
+        } else {
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Please confirm leaving the project by typing the 'Leave Project'.",
+          });
+        }
+      } else {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Please enter the project name as shown in the description.",
+        });
+      }
+    } else {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please fill all fields.",
+      });
+    }
+  };
+
+  return (
+    <Transition.Root show={project.projectLeaveModal} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+                  <div className="flex w-full items-center justify-start gap-6">
+                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span className="flex items-center justify-start">
+                      <h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
+                    </span>
+                  </div>
+
+                  <span>
+                    <p className="text-sm leading-7 text-custom-text-200">
+                      Are you sure you want to leave the project -
+                      <span className="font-medium text-custom-text-100">{` "${project?.projectLeaveDetails?.name}" `}</span>
+                      ? All of the issues associated with you will become inaccessible.
+                    </p>
+                  </span>
+
+                  <div className="text-custom-text-200">
+                    <p className="break-words text-sm ">
+                      Enter the project name{" "}
+                      <span className="font-medium text-custom-text-100">
+                        {project?.projectLeaveDetails?.name}
+                      </span>{" "}
+                      to continue:
+                    </p>
+                    <Controller
+                      control={control}
+                      name="projectName"
+                      render={({ field: { onChange, value } }) => (
+                        <Input
+                          type="text"
+                          placeholder="Enter project name"
+                          className="mt-2"
+                          value={value}
+                          onChange={onChange}
+                        />
+                      )}
+                    />
+                  </div>
+
+                  <div className="text-custom-text-200">
+                    <p className="text-sm">
+                      To confirm, type{" "}
+                      <span className="font-medium text-custom-text-100">Leave Project</span> below:
+                    </p>
+                    <Controller
+                      control={control}
+                      name="confirmLeave"
+                      render={({ field: { onChange, value } }) => (
+                        <Input
+                          type="text"
+                          placeholder="Enter 'leave project'"
+                          className="mt-2"
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                    <DangerButton type="submit" loading={isSubmitting}>
+                      {isSubmitting ? "Leaving..." : "Leave Project"}
+                    </DangerButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});

web/components/project/index.ts

@@ -5,3 +5,4 @@ export * from "./settings-header";
 export * from "./single-integration-card";
 export * from "./single-project-card";
 export * from "./single-sidebar-project";
+export * from "./confirm-project-leave-modal";

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

@@ -6,7 +6,14 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
-import { ToggleSwitch, PrimaryButton, SecondaryButton, Icon, DangerButton } from "components/ui";
+import {
+  ToggleSwitch,
+  PrimaryButton,
+  SecondaryButton,
+  Icon,
+  DangerButton,
+  Loader,
+} from "components/ui";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
@@ -146,22 +153,14 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     const projectId = projectPublish.project_id;
 
     return projectPublish
-      .createProjectSettingsAsync(
-        workspaceSlug.toString(),
-        projectId?.toString() ?? "",
-        payload,
-        user
-      )
-      .then((response) => {
+      .publishProject(workspaceSlug.toString(), projectId?.toString() ?? "", payload, user)
+      .then((res) => {
         mutateProjectDetails();
         handleClose();
         if (projectId) window.open(`${plane_deploy_url}/${workspaceSlug}/${projectId}`, "_blank");
-        return response;
+        return res;
       })
-      .catch((error) => {
-        console.error("error", error);
-        return error;
-      });
+      .catch((err) => err);
   };
 
   const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
@@ -199,7 +198,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     setIsUnpublishing(true);
 
     projectPublish
-      .deleteProjectSettingsAsync(
+      .unPublishProject(
         workspaceSlug.toString(),
         projectPublish.project_id as string,
         publishId,
@@ -329,7 +328,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   {/* heading */}
                   <div className="px-6 pt-4 flex items-center justify-between gap-2">
                     <h5 className="font-semibold text-xl inline-block">Publish</h5>
-                    {watch("id") && (
+                    {projectPublish.projectPublishSettings !== "not-initialized" && (
                       <DangerButton
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
                         className="!px-2 !py-1.5"
@@ -341,137 +340,145 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   </div>
 
                   {/* content */}
-                  <div className="space-y-3 px-6">
-                    <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
-                      <div className="truncate flex-grow text-sm">
-                        {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                      </div>
-                      <div className="flex-shrink-0 relative flex items-center gap-1">
-                        <CopyLinkToClipboard
-                          copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                        />
-                      </div>
-                    </div>
+                  {projectPublish.fetchSettingsLoader ? (
+                    <Loader className="px-6 space-y-4">
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                      <Loader.Item height="30px" />
+                    </Loader>
+                  ) : (
+                    <div className="px-6">
+                      {watch("id") && (
+                        <>
+                          <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
+                            <div className="truncate flex-grow text-sm">
+                              {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                            </div>
+                            <div className="flex-shrink-0 relative flex items-center gap-1">
+                              <CopyLinkToClipboard
+                                copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                              />
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-1 text-custom-primary-100 mt-3">
+                            <div className="w-5 h-5 overflow-hidden flex items-center">
+                              <Icon iconName="radio_button_checked" className="!text-lg" />
+                            </div>
+                            <div className="text-sm">This project is live on web</div>
+                          </div>
+                        </>
+                      )}
 
-                    {watch("id") && (
-                      <div className="flex items-center gap-1 text-custom-primary-100">
-                        <div className="w-5 h-5 overflow-hidden flex items-center">
-                          <Icon iconName="radio_button_checked" className="!text-lg" />
-                        </div>
-                        <div className="text-sm">This project is live on web</div>
-                      </div>
-                    )}
-
-                    <div className="space-y-4">
-                      <div className="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Views</div>
-                        <Controller
-                          control={control}
-                          name="views"
-                          render={({ field: { onChange, value } }) => (
-                            <CustomPopover
-                              label={
-                                value.length > 0
-                                  ? viewOptions
-                                      .filter((v) => value.includes(v.key))
-                                      .map((v) => v.label)
-                                      .join(", ")
-                                  : ``
-                              }
-                              placeholder="Select views"
-                            >
-                              <>
-                                {viewOptions.map((option) => (
-                                  <div
-                                    key={option.key}
-                                    className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
-                                      value.includes(option.key)
-                                        ? "bg-custom-background-80 text-custom-text-100"
-                                        : "hover:bg-custom-background-80 hover:text-custom-text-100"
-                                    }`}
-                                    onClick={() => {
-                                      const _views =
-                                        value.length > 0
-                                          ? value.includes(option.key)
-                                            ? value.filter((_o: string) => _o !== option.key)
-                                            : [...value, option.key]
-                                          : [option.key];
-
-                                      if (_views.length === 0) return;
-
-                                      onChange(_views);
-                                      checkIfUpdateIsRequired();
-                                    }}
-                                  >
-                                    <div className="text-sm">{option.label}</div>
+                      <div className="space-y-4 mt-6">
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Views</div>
+                          <Controller
+                            control={control}
+                            name="views"
+                            render={({ field: { onChange, value } }) => (
+                              <CustomPopover
+                                label={
+                                  value.length > 0
+                                    ? viewOptions
+                                        .filter((v) => value.includes(v.key))
+                                        .map((v) => v.label)
+                                        .join(", ")
+                                    : ``
+                                }
+                                placeholder="Select views"
+                              >
+                                <>
+                                  {viewOptions.map((option) => (
                                     <div
-                                      className={`w-[18px] h-[18px] relative flex justify-center items-center`}
+                                      key={option.key}
+                                      className={`relative flex items-center gap-2 justify-between p-1 m-1 px-2 cursor-pointer rounded-sm text-custom-text-200 ${
+                                        value.includes(option.key)
+                                          ? "bg-custom-background-80 text-custom-text-100"
+                                          : "hover:bg-custom-background-80 hover:text-custom-text-100"
+                                      }`}
+                                      onClick={() => {
+                                        const _views =
+                                          value.length > 0
+                                            ? value.includes(option.key)
+                                              ? value.filter((_o: string) => _o !== option.key)
+                                              : [...value, option.key]
+                                            : [option.key];
+
+                                        if (_views.length === 0) return;
+
+                                        onChange(_views);
+                                        checkIfUpdateIsRequired();
+                                      }}
                                     >
-                                      {value.length > 0 && value.includes(option.key) && (
-                                        <Icon iconName="done" className="!text-lg" />
-                                      )}
+                                      <div className="text-sm">{option.label}</div>
+                                      <div
+                                        className={`w-[18px] h-[18px] relative flex justify-center items-center`}
+                                      >
+                                        {value.length > 0 && value.includes(option.key) && (
+                                          <Icon iconName="done" className="!text-lg" />
+                                        )}
+                                      </div>
                                     </div>
-                                  </div>
-                                ))}
-                              </>
-                            </CustomPopover>
-                          )}
-                        />
-                      </div>
+                                  ))}
+                                </>
+                              </CustomPopover>
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow comments</div>
+                          <Controller
+                            control={control}
+                            name="comments"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow reactions</div>
+                          <Controller
+                            control={control}
+                            name="reactions"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
+                        <div className="relative flex justify-between items-center gap-2">
+                          <div className="text-sm">Allow voting</div>
+                          <Controller
+                            control={control}
+                            name="votes"
+                            render={({ field: { onChange, value } }) => (
+                              <ToggleSwitch
+                                value={value}
+                                onChange={(val) => {
+                                  onChange(val);
+                                  checkIfUpdateIsRequired();
+                                }}
+                                size="sm"
+                              />
+                            )}
+                          />
+                        </div>
 
-                      <div className="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Allow comments</div>
-                        <Controller
-                          control={control}
-                          name="comments"
-                          render={({ field: { onChange, value } }) => (
-                            <ToggleSwitch
-                              value={value}
-                              onChange={(val) => {
-                                onChange(val);
-                                checkIfUpdateIsRequired();
-                              }}
-                              size="sm"
-                            />
-                          )}
-                        />
-                      </div>
-                      <div className="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Allow reactions</div>
-                        <Controller
-                          control={control}
-                          name="reactions"
-                          render={({ field: { onChange, value } }) => (
-                            <ToggleSwitch
-                              value={value}
-                              onChange={(val) => {
-                                onChange(val);
-                                checkIfUpdateIsRequired();
-                              }}
-                              size="sm"
-                            />
-                          )}
-                        />
-                      </div>
-                      <div className="relative flex justify-between items-center gap-2">
-                        <div className="text-sm">Allow voting</div>
-                        <Controller
-                          control={control}
-                          name="votes"
-                          render={({ field: { onChange, value } }) => (
-                            <ToggleSwitch
-                              value={value}
-                              onChange={(val) => {
-                                onChange(val);
-                                checkIfUpdateIsRequired();
-                              }}
-                              size="sm"
-                            />
-                          )}
-                        />
-                      </div>
-
-                      {/* <div className="relative flex justify-between items-center gap-2">
+                        {/* <div className="relative flex justify-between items-center gap-2">
                       <div className="text-sm">Allow issue proposals</div>
                       <Controller
                         control={control}
@@ -481,8 +488,9 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                         )}
                       />
                     </div> */}
+                      </div>
                     </div>
-                  </div>
+                  )}
 
                   {/* modal handlers */}
                   <div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
@@ -490,22 +498,24 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                       <Icon iconName="public" className="!text-base" />
                       <div className="text-sm">Anyone with the link can access</div>
                     </div>
-                    <div className="relative flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      {watch("id") ? (
-                        <>
-                          {isUpdateRequired && (
-                            <PrimaryButton type="submit" loading={isSubmitting}>
-                              {isSubmitting ? "Updating..." : "Update settings"}
-                            </PrimaryButton>
-                          )}
-                        </>
-                      ) : (
-                        <PrimaryButton type="submit" loading={isSubmitting}>
-                          {isSubmitting ? "Publishing..." : "Publish"}
-                        </PrimaryButton>
-                      )}
-                    </div>
+                    {!projectPublish.fetchSettingsLoader && (
+                      <div className="relative flex items-center gap-2">
+                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                        {watch("id") ? (
+                          <>
+                            {isUpdateRequired && (
+                              <PrimaryButton type="submit" loading={isSubmitting}>
+                                {isSubmitting ? "Updating..." : "Update settings"}
+                              </PrimaryButton>
+                            )}
+                          </>
+                        ) : (
+                          <PrimaryButton type="submit" loading={isSubmitting}>
+                            {isSubmitting ? "Publishing..." : "Publish"}
+                          </PrimaryButton>
+                        )}
+                      </div>
+                    )}
                   </div>
                 </form>
               </Dialog.Panel>

web/components/project/send-project-invitation-modal.tsx

@@ -85,7 +85,8 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
   });
 
   const uninvitedPeople = people?.filter((person) => {
-    const isInvited = members?.find((member) => member.display_name === person.member.display_name);
+    const isInvited = members?.find((member) => member.memberId === person.member.id);
+
     return !isInvited;
   });
 
@@ -143,7 +144,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
     content: (
       <div className="flex items-center gap-2">
         <Avatar user={person.member} />
-        {person.member.display_name}
+        {person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
       </div>
     ),
   }));

web/components/project/sidebar-list.tsx

@@ -35,6 +35,7 @@ export const ProjectSidebarList: FC = () => {
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [deleteProjectModal, setDeleteProjectModal] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
+  const [projectToLeaveId, setProjectToLeaveId] = useState<string | null>(null);
 
   // router
   const [isScrolled, setIsScrolled] = useState(false);
@@ -217,6 +218,7 @@ export const ProjectSidebarList: FC = () => {
                                     snapshot={snapshot}
                                     handleDeleteProject={() => handleDeleteProject(project)}
                                     handleCopyText={() => handleCopyText(project.id)}
+                                    handleProjectLeave={() => setProjectToLeaveId(project.id)}
                                     shortContextMenu
                                   />
                                 </div>
@@ -285,6 +287,7 @@ export const ProjectSidebarList: FC = () => {
                                       provided={provided}
                                       snapshot={snapshot}
                                       handleDeleteProject={() => handleDeleteProject(project)}
+                                      handleProjectLeave={() => setProjectToLeaveId(project.id)}
                                       handleCopyText={() => handleCopyText(project.id)}
                                     />
                                   </div>

web/components/project/single-sidebar-project.tsx

@@ -44,6 +44,7 @@ type Props = {
   snapshot?: DraggableStateSnapshot;
   handleDeleteProject: () => void;
   handleCopyText: () => void;
+  handleProjectLeave: () => void;
   shortContextMenu?: boolean;
 };
 
@@ -80,276 +81,293 @@ const navigation = (workspaceSlug: string, projectId: string) => [
   },
 ];
 
-export const SingleSidebarProject: React.FC<Props> = observer(
-  ({
+export const SingleSidebarProject: React.FC<Props> = observer((props) => {
+  const {
     project,
     sidebarCollapse,
     provided,
     snapshot,
     handleDeleteProject,
     handleCopyText,
+    handleProjectLeave,
     shortContextMenu = false,
-  }) => {
-    const store: RootStore = useMobxStore();
-    const { projectPublish } = store;
+  } = props;
 
-    const router = useRouter();
-    const { workspaceSlug, projectId } = router.query;
+  const store: RootStore = useMobxStore();
+  const { projectPublish, project: projectStore } = store;
 
-    const { setToastAlert } = useToast();
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
 
-    const isAdmin = project.member_role === 20;
+  const { setToastAlert } = useToast();
 
-    const handleAddToFavorites = () => {
-      if (!workspaceSlug) return;
+  const isAdmin = project.member_role === 20;
 
-      mutate<IProject[]>(
-        PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-        (prevData) =>
-          (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
-        false
-      );
+  const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
 
-      projectService
-        .addProjectToFavorites(workspaceSlug as string, {
-          project: project.id,
-        })
-        .catch(() =>
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "Couldn't remove the project from favorites. Please try again.",
-          })
-        );
-    };
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug) return;
 
-    const handleRemoveFromFavorites = () => {
-      if (!workspaceSlug) return;
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+      (prevData) =>
+        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
+      false
+    );
 
-      mutate<IProject[]>(
-        PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-        (prevData) =>
-          (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
-        false
-      );
-
-      projectService.removeProjectFromFavorites(workspaceSlug as string, project.id).catch(() =>
+    projectService
+      .addProjectToFavorites(workspaceSlug as string, {
+        project: project.id,
+      })
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Couldn't remove the project from favorites. Please try again.",
         })
       );
-    };
+  };
 
-    return (
-      <Disclosure key={project.id} defaultOpen={projectId === project.id}>
-        {({ open }) => (
-          <>
-            <div
-              className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
-                snapshot?.isDragging ? "opacity-60" : ""
-              }`}
-            >
-              {provided && (
-                <Tooltip
-                  tooltipContent={
-                    project.sort_order === null
-                      ? "Join the project to rearrange"
-                      : "Drag to rearrange"
-                  }
-                  position="top-right"
-                >
-                  <button
-                    type="button"
-                    className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
-                      sidebarCollapse ? "" : "group-hover:!flex"
-                    } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
-                    {...provided?.dragHandleProps}
-                  >
-                    <EllipsisVerticalIcon className="h-4" />
-                    <EllipsisVerticalIcon className="-ml-5 h-4" />
-                  </button>
-                </Tooltip>
-              )}
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug) return;
+
+    mutate<IProject[]>(
+      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
+      (prevData) =>
+        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
+      false
+    );
+
+    projectService.removeProjectFromFavorites(workspaceSlug as string, project.id).catch(() =>
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      })
+    );
+  };
+
+  return (
+    <Disclosure key={project.id} defaultOpen={projectId === project.id}>
+      {({ open }) => (
+        <>
+          <div
+            className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
+              snapshot?.isDragging ? "opacity-60" : ""
+            }`}
+          >
+            {provided && (
               <Tooltip
-                tooltipContent={`${project.name}`}
-                position="right"
-                className="ml-2"
-                disabled={!sidebarCollapse}
+                tooltipContent={
+                  project.sort_order === null
+                    ? "Join the project to rearrange"
+                    : "Drag to rearrange"
+                }
+                position="top-right"
               >
-                <Disclosure.Button
-                  as="div"
-                  className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
-                    sidebarCollapse ? "justify-center" : `justify-between`
+                <button
+                  type="button"
+                  className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
+                    sidebarCollapse ? "" : "group-hover:!flex"
+                  } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
+                  {...provided?.dragHandleProps}
+                >
+                  <EllipsisVerticalIcon className="h-4" />
+                  <EllipsisVerticalIcon className="-ml-5 h-4" />
+                </button>
+              </Tooltip>
+            )}
+            <Tooltip
+              tooltipContent={`${project.name}`}
+              position="right"
+              className="ml-2"
+              disabled={!sidebarCollapse}
+            >
+              <Disclosure.Button
+                as="div"
+                className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
+                  sidebarCollapse ? "justify-center" : `justify-between`
+                }`}
+              >
+                <div
+                  className={`flex items-center flex-grow w-full truncate gap-x-2 ${
+                    sidebarCollapse ? "justify-center" : ""
                   }`}
                 >
-                  <div
-                    className={`flex items-center flex-grow w-full truncate gap-x-2 ${
-                      sidebarCollapse ? "justify-center" : ""
-                    }`}
-                  >
-                    {project.emoji ? (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                        {renderEmoji(project.emoji)}
-                      </span>
-                    ) : project.icon_prop ? (
-                      <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
-                        {renderEmoji(project.icon_prop)}
-                      </div>
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {project?.name.charAt(0)}
-                      </span>
-                    )}
+                  {project.emoji ? (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {renderEmoji(project.emoji)}
+                    </span>
+                  ) : project.icon_prop ? (
+                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                      {renderEmoji(project.icon_prop)}
+                    </div>
+                  ) : (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                      {project?.name.charAt(0)}
+                    </span>
+                  )}
 
-                    {!sidebarCollapse && (
-                      <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
-                        {project.name}
-                      </p>
-                    )}
-                  </div>
                   {!sidebarCollapse && (
-                    <ExpandMoreOutlined
-                      fontSize="small"
-                      className={`flex-shrink-0 ${
-                        open ? "rotate-180" : ""
-                      } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
-                    />
+                    <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
+                      {project.name}
+                    </p>
                   )}
-                </Disclosure.Button>
-              </Tooltip>
+                </div>
+                {!sidebarCollapse && (
+                  <ExpandMoreOutlined
+                    fontSize="small"
+                    className={`flex-shrink-0 ${
+                      open ? "rotate-180" : ""
+                    } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
+                  />
+                )}
+              </Disclosure.Button>
+            </Tooltip>
 
-              {!sidebarCollapse && (
-                <CustomMenu
-                  className="hidden group-hover:block flex-shrink-0"
-                  buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
-                  ellipsis
-                >
-                  {!shortContextMenu && isAdmin && (
-                    <CustomMenu.MenuItem onClick={handleDeleteProject}>
-                      <span className="flex items-center justify-start gap-2 ">
-                        <TrashIcon className="h-4 w-4" />
-                        <span>Delete project</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  {!project.is_favorite && (
-                    <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                      <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4" />
-                        <span>Add to favorites</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  {project.is_favorite && (
-                    <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                      <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                        <span>Remove from favorites</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center justify-start gap-2">
-                      <LinkIcon className="h-4 w-4" />
-                      <span>Copy project link</span>
+            {!sidebarCollapse && (
+              <CustomMenu
+                className="hidden group-hover:block flex-shrink-0"
+                buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
+                ellipsis
+              >
+                {!shortContextMenu && isAdmin && (
+                  <CustomMenu.MenuItem onClick={handleDeleteProject}>
+                    <span className="flex items-center justify-start gap-2 ">
+                      <TrashIcon className="h-4 w-4" />
+                      <span>Delete project</span>
                     </span>
                   </CustomMenu.MenuItem>
+                )}
+                {!project.is_favorite && (
+                  <CustomMenu.MenuItem onClick={handleAddToFavorites}>
+                    <span className="flex items-center justify-start gap-2">
+                      <StarIcon className="h-4 w-4" />
+                      <span>Add to favorites</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )}
+                {project.is_favorite && (
+                  <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                    <span className="flex items-center justify-start gap-2">
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <span>Remove from favorites</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )}
+                <CustomMenu.MenuItem onClick={handleCopyText}>
+                  <span className="flex items-center justify-start gap-2">
+                    <LinkIcon className="h-4 w-4" />
+                    <span>Copy project link</span>
+                  </span>
+                </CustomMenu.MenuItem>
 
-                  {/* publish project settings */}
-                  {isAdmin && (
-                    <CustomMenu.MenuItem
-                      onClick={() => projectPublish.handleProjectModal(project?.id)}
-                    >
-                      <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
-                        <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
-                          <Icon iconName="ios_share" className="!text-base" />
-                        </div>
-                        <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
+                {/* publish project settings */}
+                {isAdmin && (
+                  <CustomMenu.MenuItem
+                    onClick={() => projectPublish.handleProjectModal(project?.id)}
+                  >
+                    <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
+                      <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
+                        <Icon iconName="ios_share" className="!text-base" />
                       </div>
-                    </CustomMenu.MenuItem>
-                  )}
+                      <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
 
-                  {project.archive_in > 0 && (
-                    <CustomMenu.MenuItem
-                      onClick={() =>
-                        router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)
-                      }
-                    >
-                      <div className="flex items-center justify-start gap-2">
-                        <ArchiveOutlined fontSize="small" />
-                        <span>Archived Issues</span>
-                      </div>
-                    </CustomMenu.MenuItem>
-                  )}
+                {project.archive_in > 0 && (
                   <CustomMenu.MenuItem
                     onClick={() =>
-                      router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)
+                      router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)
                     }
                   >
                     <div className="flex items-center justify-start gap-2">
-                      <Icon iconName="settings" className="!text-base !leading-4" />
-                      <span>Settings</span>
+                      <ArchiveOutlined fontSize="small" />
+                      <span>Archived Issues</span>
                     </div>
                   </CustomMenu.MenuItem>
-                </CustomMenu>
-              )}
-            </div>
+                )}
+                <CustomMenu.MenuItem
+                  onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
+                >
+                  <div className="flex items-center justify-start gap-2">
+                    <Icon iconName="settings" className="!text-base !leading-4" />
+                    <span>Settings</span>
+                  </div>
+                </CustomMenu.MenuItem>
 
-            <Transition
-              enter="transition duration-100 ease-out"
-              enterFrom="transform scale-95 opacity-0"
-              enterTo="transform scale-100 opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform scale-100 opacity-100"
-              leaveTo="transform scale-95 opacity-0"
-            >
-              <Disclosure.Panel
-                className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}
-              >
-                {navigation(workspaceSlug as string, project?.id).map((item) => {
-                  if (
-                    (item.name === "Cycles" && !project.cycle_view) ||
-                    (item.name === "Modules" && !project.module_view) ||
-                    (item.name === "Views" && !project.issue_views_view) ||
-                    (item.name === "Pages" && !project.page_view)
-                  )
-                    return;
+                {/* leave project */}
+                {isViewerOrGuest && (
+                  <CustomMenu.MenuItem
+                    onClick={() =>
+                      projectStore.handleProjectLeaveModal({
+                        id: project?.id,
+                        name: project?.name,
+                        workspaceSlug: workspaceSlug as string,
+                      })
+                    }
+                  >
+                    <div className="flex items-center justify-start gap-2">
+                      <Icon iconName="logout" className="!text-base !leading-4" />
+                      <span>Leave Project</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            )}
+          </div>
 
-                  return (
-                    <Link key={item.name} href={item.href}>
-                      <a className="block w-full">
-                        <Tooltip
-                          tooltipContent={`${project?.name}: ${item.name}`}
-                          position="right"
-                          className="ml-2"
-                          disabled={!sidebarCollapse}
+          <Transition
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
+              {navigation(workspaceSlug as string, project?.id).map((item) => {
+                if (
+                  (item.name === "Cycles" && !project.cycle_view) ||
+                  (item.name === "Modules" && !project.module_view) ||
+                  (item.name === "Views" && !project.issue_views_view) ||
+                  (item.name === "Pages" && !project.page_view)
+                )
+                  return;
+
+                return (
+                  <Link key={item.name} href={item.href}>
+                    <a className="block w-full">
+                      <Tooltip
+                        tooltipContent={`${project?.name}: ${item.name}`}
+                        position="right"
+                        className="ml-2"
+                        disabled={!sidebarCollapse}
+                      >
+                        <div
+                          className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
+                            router.asPath.includes(item.href)
+                              ? "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"
+                          } ${sidebarCollapse ? "justify-center" : ""}`}
                         >
-                          <div
-                            className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
-                              router.asPath.includes(item.href)
-                                ? "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"
-                            } ${sidebarCollapse ? "justify-center" : ""}`}
-                          >
-                            <item.Icon
-                              sx={{
-                                fontSize: 18,
-                              }}
-                            />
-                            {!sidebarCollapse && item.name}
-                          </div>
-                        </Tooltip>
-                      </a>
-                    </Link>
-                  );
-                })}
-              </Disclosure.Panel>
-            </Transition>
-          </>
-        )}
-      </Disclosure>
-    );
-  }
-);
+                          <item.Icon
+                            sx={{
+                              fontSize: 18,
+                            }}
+                          />
+                          {!sidebarCollapse && item.name}
+                        </div>
+                      </Tooltip>
+                    </a>
+                  </Link>
+                );
+              })}
+            </Disclosure.Panel>
+          </Transition>
+        </>
+      )}
+    </Disclosure>
+  );
+});

web/components/views/gantt-chart.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
 import useUser from "hooks/use-user";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -19,6 +20,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
   const { workspaceSlug, projectId, viewId } = router.query;
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartViewIssues(
     workspaceSlug as string,
@@ -26,6 +28,8 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
     viewId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -38,6 +42,10 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
         }
         SidebarBlockRender={IssueGanttSidebarBlock}
         BlockRender={IssueGanttBlock}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed}
       />
     </div>
   );

web/layouts/app-layout/app-sidebar.tsx

@@ -9,6 +9,7 @@ import {
 } from "components/workspace";
 import { ProjectSidebarList } from "components/project";
 import { PublishProjectModal } from "components/project/publish-project/modal";
+import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
@@ -38,7 +39,10 @@ const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSide
         <ProjectSidebarList />
         <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
       </div>
+      {/* publish project modal */}
       <PublishProjectModal />
+      {/* project leave modal */}
+      <ConfirmProjectLeaveModal />
     </div>
   );
 });

web/services/project.service.ts

@@ -21,7 +21,7 @@ const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 const trackEvent =
   process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
 
-class ProjectServices extends APIService {
+export class ProjectServices extends APIService {
   constructor() {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
@@ -142,6 +142,30 @@ class ProjectServices extends APIService {
       });
   }
 
+  async leaveProject(
+    workspaceSlug: string,
+    projectId: string,
+    user: ICurrentUserResponse
+  ): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackProjectEvent(
+            "PROJECT_MEMBER_LEAVE",
+            {
+              workspaceSlug,
+              projectId,
+              ...response?.data,
+            },
+            user
+          );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async joinProjects(data: any): Promise<any> {
     return this.post("/api/users/me/invitations/projects/", data)
       .then((response) => response?.data)

web/services/track-event.service.ts

@@ -35,7 +35,8 @@ type ProjectEventType =
   | "CREATE_PROJECT"
   | "UPDATE_PROJECT"
   | "DELETE_PROJECT"
-  | "PROJECT_MEMBER_INVITE";
+  | "PROJECT_MEMBER_INVITE"
+  | "PROJECT_MEMBER_LEAVE";
 
 type IssueEventType = "ISSUE_CREATE" | "ISSUE_UPDATE" | "ISSUE_DELETE";
 
@@ -163,7 +164,11 @@ class TrackEventServices extends APIService {
     user: ICurrentUserResponse | undefined
   ): Promise<any> {
     let payload: any;
-    if (eventName !== "DELETE_PROJECT" && eventName !== "PROJECT_MEMBER_INVITE")
+    if (
+      eventName !== "DELETE_PROJECT" &&
+      eventName !== "PROJECT_MEMBER_INVITE" &&
+      eventName !== "PROJECT_MEMBER_LEAVE"
+    )
       payload = {
         workspaceId: data?.workspace_detail?.id,
         workspaceName: data?.workspace_detail?.name,

web/store/project-publish.tsx

@@ -21,7 +21,8 @@ export interface IProjectPublishSettings {
 }
 
 export interface IProjectPublishStore {
-  loader: boolean;
+  generalLoader: boolean;
+  fetchSettingsLoader: boolean;
   error: any | null;
 
   projectPublishModal: boolean;
@@ -35,7 +36,7 @@ export interface IProjectPublishStore {
     project_slug: string,
     user: any
   ) => Promise<void>;
-  createProjectSettingsAsync: (
+  publishProject: (
     workspace_slug: string,
     project_slug: string,
     data: IProjectPublishSettings,
@@ -48,7 +49,7 @@ export interface IProjectPublishStore {
     data: IProjectPublishSettings,
     user: any
   ) => Promise<void>;
-  deleteProjectSettingsAsync: (
+  unPublishProject: (
     workspace_slug: string,
     project_slug: string,
     project_publish_id: string,
@@ -57,7 +58,8 @@ export interface IProjectPublishStore {
 }
 
 class ProjectPublishStore implements IProjectPublishStore {
-  loader: boolean = false;
+  generalLoader: boolean = false;
+  fetchSettingsLoader: boolean = false;
   error: any | null = null;
 
   projectPublishModal: boolean = false;
@@ -72,7 +74,8 @@ class ProjectPublishStore implements IProjectPublishStore {
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observable
-      loader: observable,
+      generalLoader: observable,
+      fetchSettingsLoader: observable,
       error: observable,
 
       projectPublishModal: observable,
@@ -80,6 +83,10 @@ class ProjectPublishStore implements IProjectPublishStore {
       projectPublishSettings: observable.ref,
       // action
       handleProjectModal: action,
+      getProjectSettingsAsync: action,
+      publishProject: action,
+      updateProjectSettingsAsync: action,
+      unPublishProject: action,
       // computed
     });
 
@@ -100,7 +107,7 @@ class ProjectPublishStore implements IProjectPublishStore {
 
   getProjectSettingsAsync = async (workspace_slug: string, project_slug: string, user: any) => {
     try {
-      this.loader = true;
+      this.fetchSettingsLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.getProjectSettingsAsync(
@@ -128,30 +135,30 @@ class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
+          this.fetchSettingsLoader = false;
           this.error = null;
         });
       } else {
         this.projectPublishSettings = "not-initialized";
-        this.loader = false;
+        this.fetchSettingsLoader = false;
         this.error = null;
       }
       return response;
     } catch (error) {
-      this.loader = false;
+      this.fetchSettingsLoader = false;
       this.error = error;
       return error;
     }
   };
 
-  createProjectSettingsAsync = async (
+  publishProject = async (
     workspace_slug: string,
     project_slug: string,
     data: IProjectPublishSettings,
     user: any
   ) => {
     try {
-      this.loader = true;
+      this.generalLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.createProjectSettingsAsync(
@@ -174,14 +181,14 @@ class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
+          this.generalLoader = false;
           this.error = null;
         });
 
         return response;
       }
     } catch (error) {
-      this.loader = false;
+      this.generalLoader = false;
       this.error = error;
       return error;
     }
@@ -195,7 +202,7 @@ class ProjectPublishStore implements IProjectPublishStore {
     user: any
   ) => {
     try {
-      this.loader = true;
+      this.generalLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.updateProjectSettingsAsync(
@@ -219,27 +226,27 @@ class ProjectPublishStore implements IProjectPublishStore {
 
         runInAction(() => {
           this.projectPublishSettings = _projectPublishSettings;
-          this.loader = false;
+          this.generalLoader = false;
           this.error = null;
         });
 
         return response;
       }
     } catch (error) {
-      this.loader = false;
+      this.generalLoader = false;
       this.error = error;
       return error;
     }
   };
 
-  deleteProjectSettingsAsync = async (
+  unPublishProject = async (
     workspace_slug: string,
     project_slug: string,
     project_publish_id: string,
     user: any
   ) => {
     try {
-      this.loader = true;
+      this.generalLoader = true;
       this.error = null;
 
       const response = await this.projectPublishService.deleteProjectSettingsAsync(
@@ -251,13 +258,13 @@ class ProjectPublishStore implements IProjectPublishStore {
 
       runInAction(() => {
         this.projectPublishSettings = "not-initialized";
-        this.loader = false;
+        this.generalLoader = false;
         this.error = null;
       });
 
       return response;
     } catch (error) {
-      this.loader = false;
+      this.generalLoader = false;
       this.error = error;
       return error;
     }

web/store/project.ts

@@ -0,0 +1,86 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "./root";
+// services
+import { ProjectServices } from "services/project.service";
+
+export interface IProject {
+  id: string;
+  name: string;
+  workspaceSlug: string;
+}
+
+export interface IProjectStore {
+  loader: boolean;
+  error: any | null;
+
+  projectLeaveModal: boolean;
+  projectLeaveDetails: IProject | any;
+
+  handleProjectLeaveModal: (project: IProject | null) => void;
+
+  leaveProject: (workspace_slug: string, project_slug: string, user: any) => Promise<void>;
+}
+
+class ProjectStore implements IProjectStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  projectLeaveModal: boolean = false;
+  projectLeaveDetails: IProject | null = null;
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      projectLeaveModal: observable,
+      projectLeaveDetails: observable.ref,
+      // action
+      handleProjectLeaveModal: action,
+      leaveProject: action,
+      // computed
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectServices();
+  }
+
+  handleProjectLeaveModal = (project: IProject | null = null) => {
+    if (project && project?.id) {
+      this.projectLeaveModal = !this.projectLeaveModal;
+      this.projectLeaveDetails = project;
+    } else {
+      this.projectLeaveModal = !this.projectLeaveModal;
+      this.projectLeaveDetails = null;
+    }
+  };
+
+  leaveProject = async (workspace_slug: string, project_slug: string, user: any) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.leaveProject(workspace_slug, project_slug, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}
+
+export default ProjectStore;

web/store/root.ts

@@ -3,15 +3,17 @@ import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import UserStore from "./user";
 import ThemeStore from "./theme";
-import IssuesStore from "./issues";
+import ProjectStore, { IProjectStore } from "./project";
 import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
 import KanbanStore from "./kanban";
+import IssuesStore from "./issues";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   user;
   theme;
+  project: IProjectStore;
   projectPublish: IProjectPublishStore;
   issues: IssuesStore;
   kanban: KanbanStore;
@@ -19,6 +21,7 @@ export class RootStore {
   constructor() {
     this.user = new UserStore(this);
     this.theme = new ThemeStore(this);
+    this.project = new ProjectStore(this);
     this.projectPublish = new ProjectPublishStore(this);
     this.issues = new IssuesStore(this);
     this.kanban = new KanbanStore(this);