From 3a6571df5f0a016a5742841b555c588437b3ecbb Mon Sep 17 00:00:00 2001
From: Vamsi krishna <matalav55@gmail.com>
Date: Tue, 24 Dec 2024 20:04:58 +0530
Subject: [PATCH 1/2] chore: added issue count for upcoming cycles

---
 .../cycles/list/cycle-list-item-action.tsx     | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/core/components/cycles/list/cycle-list-item-action.tsx b/web/core/components/cycles/list/cycle-list-item-action.tsx
index 73dca345d7c..ad9a85f8c57 100644
--- a/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -8,7 +8,16 @@ import { Eye, Users } from "lucide-react";
 // types
 import { ICycle, TCycleGroups } from "@plane/types";
 // ui
-import { Avatar, AvatarGroup, FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
+import {
+  Avatar,
+  AvatarGroup,
+  FavoriteStar,
+  LayersIcon,
+  TOAST_TYPE,
+  Tooltip,
+  setPromiseToast,
+  setToast,
+} from "@plane/ui";
 // components
 import { CycleQuickActions } from "@/components/cycles";
 import { DateRangeDropdown } from "@/components/dropdowns";
@@ -216,6 +225,13 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
         <span>More details</span>
       </button>
 
+      {(cycleStatus === "draft" || "upcoming") && (
+        <div className="flex items-center gap-1">
+          <LayersIcon className="h-4 w-4 text-custom-text-300" />
+          <span className="text-xs text-custom-text-300">{cycleDetails.total_issues}</span>
+        </div>
+      )}
+
       {!isActive && (
         <Controller
           control={control}

From 56e1dd40339338bbe5b3354f301956cfd8eebf91 Mon Sep 17 00:00:00 2001
From: Vamsi krishna <matalav55@gmail.com>
Date: Tue, 24 Dec 2024 20:17:55 +0530
Subject: [PATCH 2/2] chore: memoized show issue count

---
 web/core/components/cycles/list/cycle-list-item-action.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/core/components/cycles/list/cycle-list-item-action.tsx b/web/core/components/cycles/list/cycle-list-item-action.tsx
index ad9a85f8c57..d83256b89bc 100644
--- a/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FC, MouseEvent, useEffect } from "react";
+import React, { FC, MouseEvent, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useSearchParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
@@ -75,6 +75,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
 
   // derived values
   const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+  const showIssueCount = useMemo(() => cycleStatus === "draft" || cycleStatus === "upcoming", [cycleStatus]);
   const isEditingAllowed = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.PROJECT,
@@ -225,7 +226,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
         <span>More details</span>
       </button>
 
-      {(cycleStatus === "draft" || "upcoming") && (
+      {showIssueCount && (
         <div className="flex items-center gap-1">
           <LayersIcon className="h-4 w-4 text-custom-text-300" />
           <span className="text-xs text-custom-text-300">{cycleDetails.total_issues}</span>