[WEB-545] chore: completed cycle empty state (#3931)

* chore: completed cycle issue transfer empty state added * chore: cycle empty state variable updated * chore: empty state config file updated
makeplane · Mar 11, 2024 · 48c9b78 · 48c9b78
1 parent 9c29ad1
commit 48c9b78
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 100 deletions.
diff --git a/web/components/empty-state/empty-state.tsx b/web/components/empty-state/empty-state.tsx
@@ -9,12 +9,12 @@ import { useUser } from "hooks/store";
 import { Button, TButtonVariant } from "@plane/ui";
 import { ComicBoxButton } from "./comic-box-button";
 // constant
-import { EMPTY_STATE_DETAILS, EmptyStateKeys } from "constants/empty-state";
+import { EMPTY_STATE_DETAILS, EmptyStateType } from "constants/empty-state";
 // helpers
 import { cn } from "helpers/common.helper";
 
 export type EmptyStateProps = {
-  type: EmptyStateKeys;
+  type: EmptyStateType;
   size?: "sm" | "md" | "lg";
   layout?: "widget-simple" | "screen-detailed" | "screen-simple";
   additionalPath?: string;

diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/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 isCompletedCycleSnapshotAvailable = !isEmpty(cycleDetails?.progress_snapshot ?? {});
+
+  const emptyStateType = isCompletedCycleSnapshotAvailable
+    ? EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES
+    : isEmptyFilters
+    ? EmptyStateType.PROJECT_EMPTY_FILTER
+    : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
+  const additionalPath = isCompletedCycleSnapshotAvailable ? undefined : activeLayout ?? "list";
   const emptyStateSize = isEmptyFilters ? "lg" : "sm";
 
   return (
@@ -76,14 +86,18 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
           additionalPath={additionalPath}
           size={emptyStateSize}
           primaryButtonOnClick={
-            isEmptyFilters
-              ? undefined
-              : () => {
+            !isCompletedCycleSnapshotAvailable && !isEmptyFilters
+              ? () => {
                   setTrackElement("Cycle issue empty state");
                   toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                 }
+              : undefined
+          }
+          secondaryButtonOnClick={
+            !isCompletedCycleSnapshotAvailable && isEmptyFilters
+              ? handleClearAllFilters
+              : () => setCycleIssuesListModal(true)
           }
-          secondaryButtonOnClick={isEmptyFilters ? handleClearAllFilters : () => setCycleIssuesListModal(true)}
         />
       </div>
     </>