fix: cycles and modules sidebar mutation (#831)

apps/app/components/core/existing-issues-list-modal.tsx

@@ -19,7 +19,12 @@ import { LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue } from "types";
 // fetch-keys
-import { CYCLE_ISSUES_WITH_PARAMS, MODULE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
+import {
+  CYCLE_DETAILS,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_DETAILS,
+  MODULE_ISSUES_WITH_PARAMS,
+} from "constants/fetch-keys";
 
 type FormInput = {
   issues: string[];
@@ -76,8 +81,14 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
     }
 
     await handleOnSubmit(data);
-    if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+    if (cycleId) {
-    if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+      mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+      mutate(CYCLE_DETAILS(cycleId as string));
+    }
+    if (moduleId) {
+      mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+      mutate(MODULE_DETAILS(moduleId as string));
+    }
 
     handleClose();
 

apps/app/components/core/issues-view.tsx

@@ -234,7 +234,7 @@ export const IssuesView: React.FC<Props> = ({
             )
               trackEventServices.trackIssueMarkedAsDoneEvent({
                 workspaceSlug,
-                workspaceId: draggedItem.workspace_detail.id,
+                workspaceId: draggedItem.workspace,
                 projectName: draggedItem.project_detail.name,
                 projectIdentifier: draggedItem.project_detail.identifier,
                 projectId,

apps/app/components/issues/modal.tsx

@@ -29,6 +29,8 @@ import {
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   CYCLE_ISSUES_WITH_PARAMS,
   MODULE_ISSUES_WITH_PARAMS,
+  CYCLE_DETAILS,
+  MODULE_DETAILS,
 } from "constants/fetch-keys";
 
 export interface IssuesModalProps {
@@ -101,7 +103,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         issues: [issueId],
       })
       .then(() => {
-        mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
+        if (cycleId) {
+          mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
+          mutate(CYCLE_DETAILS(cycleId as string));
+        }
       });
   };
 
@@ -113,7 +118,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         issues: [issueId],
       })
       .then(() => {
-        mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+        if (moduleId) {
+          mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+          mutate(MODULE_DETAILS(moduleId as string));
+        }
       });
   };
 

apps/app/components/issues/view-select/assignee.tsx

@@ -75,8 +75,8 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
 
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
-            workspaceSlug: issue.workspace_detail.slug,
+            workspaceSlug,
-            workspaceId: issue.workspace_detail.id,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,

apps/app/components/issues/view-select/due-date.tsx

@@ -1,3 +1,5 @@
+import { useRouter } from "next/router";
+
 // ui
 import { CustomDatePicker, Tooltip } from "components/ui";
 // helpers
@@ -13,41 +15,46 @@ type Props = {
   isNotAllowed: boolean;
 };
 
-export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => (
+export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue, isNotAllowed }) => {
-  <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
+  const router = useRouter();
-    <div
+  const { workspaceSlug } = router.query;
-      className={`group relative ${
+
-        issue.target_date === null
+  return (
-          ? ""
+    <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
-          : issue.target_date < new Date().toISOString()
+      <div
-          ? "text-red-600"
+        className={`group relative ${
-          : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
+          issue.target_date === null
-      }`}
+            ? ""
-    >
+            : issue.target_date < new Date().toISOString()
-      <CustomDatePicker
+            ? "text-red-600"
-        placeholder="N/A"
+            : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
-        value={issue?.target_date}
+        }`}
-        onChange={(val) => {
+      >
-          partialUpdateIssue({
+        <CustomDatePicker
-            target_date: val,
+          placeholder="N/A"
-            priority: issue.priority,
+          value={issue?.target_date}
-            state: issue.state,
+          onChange={(val) => {
-          });
+            partialUpdateIssue({
-          trackEventServices.trackIssuePartialPropertyUpdateEvent(
+              target_date: val,
-            {
+              priority: issue.priority,
-              workspaceSlug: issue.workspace_detail.slug,
+              state: issue.state,
-              workspaceId: issue.workspace_detail.id,
+            });
-              projectId: issue.project_detail.id,
+            trackEventServices.trackIssuePartialPropertyUpdateEvent(
-              projectIdentifier: issue.project_detail.identifier,
+              {
-              projectName: issue.project_detail.name,
+                workspaceSlug,
-              issueId: issue.id,
+                workspaceId: issue.workspace,
-            },
+                projectId: issue.project_detail.id,
-            "ISSUE_PROPERTY_UPDATE_DUE_DATE"
+                projectIdentifier: issue.project_detail.identifier,
-          );
+                projectName: issue.project_detail.name,
-        }}
+                issueId: issue.id,
-        className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
+              },
-        disabled={isNotAllowed}
+              "ISSUE_PROPERTY_UPDATE_DUE_DATE"
-      />
+            );
-    </div>
+          }}
-  </Tooltip>
+          className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
-);
+          disabled={isNotAllowed}
+        />
+      </div>
+    </Tooltip>
+  );
+};

apps/app/components/issues/view-select/estimate.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 
+import { useRouter } from "next/router";
+
+// services
+import trackEventServices from "services/track-event.service";
+// hooks
+import useEstimateOption from "hooks/use-estimate-option";
 // ui
 import { CustomSelect, Tooltip } from "components/ui";
 // icons
-import { getPriorityIcon } from "components/icons/priority-icon";
+import { PlayIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue } from "types";
-// constants
-import { PRIORITIES } from "constants/project";
-// services
-import trackEventServices from "services/track-event.service";
-import useEstimateOption from "hooks/use-estimate-option";
-import { PlayIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   issue: IIssue;
@@ -28,6 +28,9 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   selfPositioned = false,
   isNotAllowed,
 }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
   const { isEstimateActive, estimatePoints } = useEstimateOption(issue.estimate_point);
 
   const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
@@ -41,8 +44,8 @@ export const ViewEstimateSelect: React.FC<Props> = ({
         partialUpdateIssue({ estimate_point: val });
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
-            workspaceSlug: issue.workspace_detail.slug,
+            workspaceSlug,
-            workspaceId: issue.workspace_detail.id,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,

apps/app/components/issues/view-select/priority.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { useRouter } from "next/router";
+
 // ui
 import { CustomSelect, Tooltip } from "components/ui";
 // icons
@@ -25,63 +27,68 @@ export const ViewPrioritySelect: React.FC<Props> = ({
   position = "left",
   selfPositioned = false,
   isNotAllowed,
-}) => (
+}) => {
-  <CustomSelect
+  const router = useRouter();
-    value={issue.priority}
+  const { workspaceSlug } = router.query;
-    onChange={(data: string) => {
+
-      partialUpdateIssue({ priority: data });
+  return (
-      trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    <CustomSelect
-        {
+      value={issue.priority}
-          workspaceSlug: issue.workspace_detail.slug,
+      onChange={(data: string) => {
-          workspaceId: issue.workspace_detail.id,
+        partialUpdateIssue({ priority: data });
-          projectId: issue.project_detail.id,
+        trackEventServices.trackIssuePartialPropertyUpdateEvent(
-          projectIdentifier: issue.project_detail.identifier,
+          {
-          projectName: issue.project_detail.name,
+            workspaceSlug,
-          issueId: issue.id,
+            workspaceId: issue.workspace,
-        },
+            projectId: issue.project_detail.id,
-        "ISSUE_PROPERTY_UPDATE_PRIORITY"
+            projectIdentifier: issue.project_detail.identifier,
-      );
+            projectName: issue.project_detail.name,
-    }}
+            issueId: issue.id,
-    maxHeight="md"
+          },
-    customButton={
+          "ISSUE_PROPERTY_UPDATE_PRIORITY"
-      <button
+        );
-        type="button"
+      }}
-        className={`grid h-6 w-6 place-items-center rounded ${
+      maxHeight="md"
-          isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+      customButton={
-        } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+        <button
-          issue.priority === "urgent"
+          type="button"
-            ? "bg-red-100 text-red-600 hover:bg-red-100"
+          className={`grid h-6 w-6 place-items-center rounded ${
-            : issue.priority === "high"
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-            ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
+          } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-            : issue.priority === "medium"
+            issue.priority === "urgent"
-            ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
+              ? "bg-red-100 text-red-600 hover:bg-red-100"
-            : issue.priority === "low"
+              : issue.priority === "high"
-            ? "bg-green-100 text-green-500 hover:bg-green-100"
+              ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
-            : "bg-gray-100"
+              : issue.priority === "medium"
-        } border-none`}
+              ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
-      >
+              : issue.priority === "low"
-        <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
+              ? "bg-green-100 text-green-500 hover:bg-green-100"
-          <span>
+              : "bg-gray-100"
-            {getPriorityIcon(
+          } border-none`}
-              issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+        >
-              "text-sm"
+          <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
-            )}
+            <span>
-          </span>
+              {getPriorityIcon(
-        </Tooltip>
+                issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-      </button>
+                "text-sm"
-    }
+              )}
-    noChevron
+            </span>
-    disabled={isNotAllowed}
+          </Tooltip>
-    position={position}
+        </button>
-    selfPositioned={selfPositioned}
+      }
-  >
+      noChevron
-    {PRIORITIES?.map((priority) => (
+      disabled={isNotAllowed}
-      <CustomSelect.Option key={priority} value={priority} className="capitalize">
+      position={position}
-        <>
+      selfPositioned={selfPositioned}
-          {getPriorityIcon(priority, "text-sm")}
+    >
-          {priority ?? "None"}
+      {PRIORITIES?.map((priority) => (
-        </>
+        <CustomSelect.Option key={priority} value={priority} className="capitalize">
-      </CustomSelect.Option>
+          <>
-    ))}
+            {getPriorityIcon(priority, "text-sm")}
-  </CustomSelect>
+            {priority ?? "None"}
-);
+          </>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+};

apps/app/components/issues/view-select/state.tsx

@@ -67,8 +67,8 @@ export const ViewStateSelect: React.FC<Props> = ({
         });
         trackEventServices.trackIssuePartialPropertyUpdateEvent(
           {
-            workspaceSlug: issue.workspace_detail.slug,
+            workspaceSlug,
-            workspaceId: issue.workspace_detail.id,
+            workspaceId: issue.workspace,
             projectId: issue.project_detail.id,
             projectIdentifier: issue.project_detail.identifier,
             projectName: issue.project_detail.name,