feat: completed cycle transfer issue validation added (#676)

* feat: completed cycle transfer issue validation added

* style: transfer issue section

* style: issue transfer button

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

@@ -18,7 +18,7 @@ import { AllLists, AllBoards, FilterList } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { CreateUpdateViewModal } from "components/views";
-import { TransferIssuesModal } from "components/cycles";
+import { TransferIssues, TransferIssuesModal } from "components/cycles";
 // ui
 import { EmptySpace, EmptySpaceItem, PrimaryButton, Spinner } from "components/ui";
 import { CalendarView } from "./calendar-view";
@@ -459,23 +459,7 @@ export const IssuesView: React.FC<Props> = ({
         {groupedByIssues ? (
           isNotEmpty ? (
             <>
-              {isCompleted && (
+              {isCompleted && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
-                <div className="flex items-center justify-between mb-4">
-                  <div className="flex items-center gap-2 text-sm text-gray-500">
-                    <ExclamationIcon height={14} width={14} />
-                    <span>Completed cycles are not editable.</span>
-                  </div>
-                  <div>
-                    <PrimaryButton
-                      onClick={() => setTransferIssuesModal(true)}
-                      className="flex items-center gap-3 rounded-lg"
-                    >
-                      <TransferIcon className="h-4 w-4" />
-                      <span>Transfer Issues</span>
-                    </PrimaryButton>
-                  </div>
-                </div>
-              )}
               {issueView === "list" ? (
                 <AllLists
                   type={type}

apps/app/components/cycles/index.ts

@@ -8,3 +8,4 @@ export * from "./sidebar";
 export * from "./single-cycle-card";
 export * from "./empty-cycle";
 export * from "./transfer-issues-modal";
+export * from "./transfer-issues";

apps/app/components/cycles/transfer-issues.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// component
+import { PrimaryButton, Tooltip } from "components/ui";
+// icon
+import { ExclamationIcon, TransferIcon } from "components/icons";
+// services
+import cycleServices from "services/cycles.service";
+// fetch-key
+import { CYCLE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  handleClick: () => void;
+};
+
+export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { data: cycleDetails } = useSWR(
+    cycleId ? CYCLE_DETAILS(cycleId as string) : null,
+    workspaceSlug && projectId && cycleId
+      ? () =>
+          cycleServices.getCycleDetails(
+            workspaceSlug as string,
+            projectId as string,
+            cycleId as string
+          )
+      : null
+  );
+
+  const transferableIssuesCount = cycleDetails
+    ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
+    : 0;
+  return (
+    <div className="flex items-center justify-between -mt-4 mb-4">
+      <div className="flex items-center gap-2 text-sm text-gray-500">
+        <ExclamationIcon height={14} width={14} />
+        <span>Completed cycles are not editable.</span>
+      </div>
+
+      {transferableIssuesCount > 0 && (
+        <div>
+          <PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
+            <TransferIcon className="h-4 w-4" />
+            <span className="text-white">Transfer Issues</span>
+          </PrimaryButton>
+        </div>
+      )}
+    </div>
+  );
+};