fix: bugs (#2761)

* fix: semicolon on estimate settings page

* refactor: project settings automations store implementation

* fix: active cycle stuck on infinite loading

* fix: removed delete project option from sidebar

* fix: discloser not opening when navigating to project

* fix: clear filter not working & filter appearing even if nothing is selected

* refactor: select label store implementation

* refactor: select state store implementation

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

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

web/components/issues/select/label.tsx

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

web/components/issues/select/state.tsx

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

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

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

web/components/views/form.tsx

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

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

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

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

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