feat: Leaving from project for viewer and guest roles has implemented (#2079)

* feat: leave project services and components

* feat: Leaving from project for viewer and guest roles has implemented

---------

Co-authored-by: dakshesh14 <dakshesh.jain14@gmail.com>

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

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.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,20 +3,23 @@ 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 IssuesStore from "./issues";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   user;
   theme;
+  project: IProjectStore;
   projectPublish: IProjectPublishStore;
   issues: IssuesStore;
 
   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);
   }