fix: cycle favorite mutation (#3659)

* fix: cycle favorite mutation

* fix: issue details sidebar overflow fix

web/components/cycles/cycles-board-card.tsx

@@ -1,6 +1,7 @@
 import { FC, MouseEvent, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
+import { observer } from "mobx-react";
 // hooks
 import { useEventTracker, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -26,7 +27,7 @@ export interface ICyclesBoardCard {
   cycleId: string;
 }
 
-export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
+export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const { cycleId, workspaceSlug, projectId } = props;
   // states
   const [updateModal, setUpdateModal] = useState(false);
@@ -69,8 +70,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     ? cycleTotalIssues === 0
       ? "0 Issue"
       : cycleTotalIssues === cycleDetails.completed_issues
-        ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
+      ? `${cycleTotalIssues} Issue${cycleTotalIssues > 1 ? "s" : ""}`
-        : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
+      : `${cycleDetails.completed_issues}/${cycleTotalIssues} Issues`
     : "0 Issue";
 
   const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
@@ -295,4 +296,4 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
       </Link>
     </div>
   );
-};
+});

web/components/cycles/cycles-list-item.tsx

@@ -1,6 +1,7 @@
 import { FC, MouseEvent, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react";
 // hooks
 import { useEventTracker, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -30,7 +31,7 @@ type TCyclesListItem = {
   projectId: string;
 };
 
-export const CyclesListItem: FC<TCyclesListItem> = (props) => {
+export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   const { cycleId, workspaceSlug, projectId } = props;
   // states
   const [updateModal, setUpdateModal] = useState(false);
@@ -289,4 +290,4 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
       </Link>
     </>
   );
-};
+});

web/components/issues/issue-detail/sidebar.tsx

@@ -15,7 +15,7 @@ import {
   CalendarCheck2,
 } from "lucide-react";
 // hooks
-import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "hooks/store";
+import { useEstimate, useIssueDetail, useProject, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import {
@@ -56,11 +56,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issueOperations, is_archived, is_editable } = props;
   // router
   const router = useRouter();
-  const { inboxIssueId } = router.query;
   // store hooks
   const { getProjectById } = useProject();
   const { currentUser } = useUser();
-  const { projectStates } = useProjectState();
   const { areEstimatesEnabledForCurrentProject } = useEstimate();
   const { setToastAlert } = useToast();
   const {
@@ -91,8 +89,6 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const maxDate = issue.target_date ? new Date(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
 
-  const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
-
   return (
     <>
       {workspaceSlug && projectId && issue && (
@@ -108,22 +104,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
       )}
 
       <div className="flex h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-        <div className="flex items-center justify-between px-5 pb-3">
+        <div className="flex items-center justify-end px-5 pb-3">
-          <div className="flex items-center gap-x-2">
-            {currentIssueState ? (
-              <StateGroupIcon
-                className="h-4 w-4"
-                stateGroup={currentIssueState.group}
-                color={currentIssueState.color}
-              />
-            ) : inboxIssueId ? (
-              <StateGroupIcon className="h-4 w-4" stateGroup="backlog" color="#ff7700" />
-            ) : null}
-            <h4 className="text-lg font-medium text-custom-text-300">
-              {projectDetails?.identifier}-{issue?.sequence_id}
-            </h4>
-          </div>
-
           <div className="flex flex-wrap items-center gap-2">
             {currentUser && !is_archived && (
               <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
@@ -187,8 +168,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
                 className="w-3/5 flex-grow group"
                 buttonContainerClassName="w-full text-left"
-                buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
+                buttonClassName={`text-sm justify-between ${
-                  }`}
+                  issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
+                }`}
                 hideIcon={issue.assignee_ids?.length === 0}
                 dropdownArrow
                 dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
@@ -232,8 +214,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
-              // TODO: add this logic
+                // TODO: add this logic
-              // showPlaceholderIcon
+                // showPlaceholderIcon
               />
             </div>
 
@@ -258,8 +240,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
                 hideIcon
                 clearIconClassName="h-3 w-3 hidden group-hover:inline"
-              // TODO: add this logic
+                // TODO: add this logic
-              // showPlaceholderIcon
+                // showPlaceholderIcon
               />
             </div>