[WEB-545] chore: completed cycle empty state

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
+import isEmpty from "lodash/isEmpty";
 // hooks
-import { useApplication, useEventTracker, useIssues } from "hooks/store";
+import { useApplication, useCycle, useEventTracker, useIssues } from "hooks/store";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 import { ExistingIssuesListModal } from "components/core";
@@ -27,12 +28,15 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   // states
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
   // store hooks
+  const { getCycleById } = useCycle();
   const { issues } = useIssues(EIssuesStoreType.CYCLE);
   const {
     commandPalette: { toggleCreateIssueModal },
   } = useApplication();
   const { setTrackElement } = useEventTracker();
 
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
+
   const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
@@ -56,8 +60,14 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
       );
   };
 
-  const emptyStateType = isEmptyFilters ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
-  const additionalPath = activeLayout ?? "list";
+  const isCompletedCycle = !isEmpty(cycleDetails?.progress_snapshot ?? {});
+
+  const emptyStateType = isCompletedCycle
+    ? EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES
+    : isEmptyFilters
+    ? EmptyStateType.PROJECT_EMPTY_FILTER
+    : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
+  const additionalPath = isCompletedCycle ? undefined : activeLayout ?? "list";
   const emptyStateSize = isEmptyFilters ? "lg" : "sm";
 
   return (
@@ -76,14 +86,16 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
           additionalPath={additionalPath}
           size={emptyStateSize}
           primaryButtonOnClick={
-            isEmptyFilters
-              ? undefined
-              : () => {
+            !isCompletedCycle && !isEmptyFilters
+              ? () => {
                   setTrackElement("Cycle issue empty state");
                   toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                 }
+              : undefined
+          }
+          secondaryButtonOnClick={
+            !isCompletedCycle && isEmptyFilters ? handleClearAllFilters : () => setCycleIssuesListModal(true)
           }
-          secondaryButtonOnClick={isEmptyFilters ? handleClearAllFilters : () => setCycleIssuesListModal(true)}
         />
       </div>
     </>

web/constants/empty-state.ts

@@ -54,6 +54,7 @@ export enum EmptyStateType {
   PROJECT_CYCLE_UPCOMING = "project-cycle-upcoming",
   PROJECT_CYCLE_COMPLETED = "project-cycle-completed",
   PROJECT_CYCLE_DRAFT = "project-cycle-draft",
+  PROJECT_CYCLE_COMPLETED_NO_ISSUES = "project-cycle-completed-no-issues",
   PROJECT_EMPTY_FILTER = "project-empty-filter",
   PROJECT_ARCHIVED_EMPTY_FILTER = "project-archived-empty-filter",
   PROJECT_DRAFT_EMPTY_FILTER = "project-draft-empty-filter",
@@ -311,6 +312,13 @@ const emptyStateDetails = {
     description: "No dates added in cycles? Find them here as drafts.",
     path: "/empty-state/cycle/draft",
   },
+  "project-cycle-completed-no-issues": {
+    key: "project-cycle-completed-no-issues",
+    title: "No issues in the cycle",
+    description:
+      "No issues in the cycle. Issues are either transferred or hidden. To see hidden issues if any, update your display properties accordingly.",
+    path: "/empty-state/cycle/completed-no-issues",
+  },
   // empty filters
   "project-empty-filter": {
     key: "project-empty-filter",