chore: workspace active cycles improvement (#95)

* chore: workspace active cycles constant updated

* chore: workspace active cycles header icon updated

* chore: workspace active cycles empty state updated

web/components/cycles/active-cycle-info.tsx

@@ -15,7 +15,7 @@ import { renderFormattedDate, findHowManyDaysLeft, renderFormattedDateWithoutYea
 import { truncateText } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
-import { CYCLE_STATE_GROUPS_DETAILS } from "constants/cycle";
+import { WORKSPACE_ACTIVE_CYCLE_STATE_GROUPS_DETAILS } from "constants/cycle";
 
 export type ActiveCycleInfoProps = {
   cycle: ICycle;
@@ -53,7 +53,7 @@ export const ActiveCycleInfo: FC<ActiveCycleInfoProps> = (props) => {
     backlog: cycle.backlog_issues,
   };
 
-  const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
+  const progressIndicatorData = WORKSPACE_ACTIVE_CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
     name: group.title,
     value: cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0,
@@ -96,7 +96,7 @@ export const ActiveCycleInfo: FC<ActiveCycleInfoProps> = (props) => {
               position="top-left"
             >
               <span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
-                {`${daysLeft} ${daysLeft > 1 ? "Days" : "Day"} Left`}
+                {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
               </span>
             </Tooltip>
           </div>
@@ -156,7 +156,7 @@ export const ActiveCycleInfo: FC<ActiveCycleInfoProps> = (props) => {
                           <span
                             className="block h-3 w-3 rounded-full"
                             style={{
-                              backgroundColor: CYCLE_STATE_GROUPS_DETAILS[index].color,
+                              backgroundColor: WORKSPACE_ACTIVE_CYCLE_STATE_GROUPS_DETAILS[index].color,
                             }}
                           />
                           <span className="capitalize font-medium w-16">{group}</span>

web/components/headers/workspace-active-cycles.tsx

@@ -1,7 +1,6 @@
 import { observer } from "mobx-react-lite";
-import { SendToBack } from "lucide-react";
 // ui
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs, ContrastIcon } from "@plane/ui";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
@@ -10,7 +9,7 @@ export const WorkspaceActiveCycleHeader = observer(() => (
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            icon={<SendToBack className="h-4 w-4 text-custom-text-300" />}
+            icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
             label="Active Cycles"
           />
         </Breadcrumbs>

web/components/workspace/workspace-active-cycles-list.tsx

@@ -3,14 +3,18 @@ import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import isEqual from "lodash/isEqual";
+// hooks
+import { useUser } from "hooks/store";
 // components
 import { ActiveCycleInfo } from "components/cycles";
-import { Button, ContrastIcon, Spinner } from "@plane/ui";
+import { Button, Spinner } from "@plane/ui";
+import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // services
 import { CycleService } from "services/cycle.service";
 const cycleService = new CycleService();
 // constants
 import { WORKSPACE_ACTIVE_CYCLES_LIST } from "constants/fetch-keys";
+import { EUserWorkspaceRoles } from "constants/workspace";
 // types
 import { ICycle } from "@plane/types";
 
@@ -25,6 +29,11 @@ export const WorkspaceActiveCyclesList = observer(() => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const {
+    membership: { currentWorkspaceRole },
+    currentUser,
+  } = useUser();
+
   // fetching active cycles in workspace
   const { data: workspaceActiveCycles, isLoading } = useSWR(
     workspaceSlug && cursor ? WORKSPACE_ACTIVE_CYCLES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
@@ -54,6 +63,13 @@ export const WorkspaceActiveCyclesList = observer(() => {
     );
   }
 
+  const EmptyStateImagePath = getEmptyStateImagePath(
+    "onboarding",
+    "workspace-active-cycles",
+    currentUser?.theme.theme === "light"
+  );
+  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <div className="h-full w-full">
       {allCyclesData.length > 0 ? (
@@ -74,17 +90,13 @@ export const WorkspaceActiveCyclesList = observer(() => {
           )}
         </>
       ) : (
-        <div className="grid h-full place-items-center text-center">
-          <div className="space-y-2">
-            <div className="mx-auto flex justify-center">
-              <ContrastIcon className="h-40 w-40 text-custom-text-300" />
-            </div>
-            <h4 className="text-base text-custom-text-200">
-              Cycles running across all your projects can be seen here. Use this to track how the org is delivering
-              value across teams
-            </h4>
-          </div>
-        </div>
+        <EmptyState
+          image={EmptyStateImagePath}
+          title="No active cycles"
+          description="Cycles of your projects that includes any period that encompasses today's date within its range. Find the progress and details of all your active cycle here."
+          size="lg"
+          disabled={!isEditingAllowed}
+        />
       )}
     </div>
   );

web/constants/cycle.ts

@@ -186,3 +186,28 @@ export const CYCLE_EMPTY_STATE_DETAILS = {
     description: "No dates added in cycles? Find them here as drafts.",
   },
 };
+
+
+// ee
+export const WORKSPACE_ACTIVE_CYCLE_STATE_GROUPS_DETAILS = [
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#d687ff",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#FFC53D",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#FB923C",
+  },
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#F0F0F3",
+  },
+];