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,18 +81,20 @@ 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 { projectPublish, project: projectStore } = store;
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -100,6 +103,8 @@ export const SingleSidebarProject: React.FC<Props> = observer(
 
   const isAdmin = project.member_role === 20;
 
+  const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
+
   const handleAddToFavorites = () => {
     if (!workspaceSlug) return;
 
@@ -284,15 +289,31 @@ export const SingleSidebarProject: React.FC<Props> = observer(
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem
-                    onClick={() =>
+                  onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
-                      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>
+
+                {/* 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>
@@ -305,9 +326,7 @@ export const SingleSidebarProject: React.FC<Props> = observer(
             leaveFrom="transform scale-100 opacity-100"
             leaveTo="transform scale-95 opacity-0"
           >
-              <Disclosure.Panel
+            <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
-                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) ||
@@ -351,5 +370,4 @@ export const SingleSidebarProject: React.FC<Props> = observer(
       )}
     </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);
   }