chore: active cycle progress empty state

makeplane · anmolsinghbhatia · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025
commit f7274e454bb4000e9150ef4e01bde3800323ffa9
diff --git a/packages/i18n/src/locales/en/translations.json b/packages/i18n/src/locales/en/translations.json
@@ -606,14 +606,25 @@
   "notification_mentions_empty_state_title": "No issues assigned",
   "notification_mentions_empty_state_description": "Updates for issues assigned to you can be seen here",
 
-  "active_cycle_progress_empty_state_title": "Add issues to the cycle to view it's progress",
-  "active_cycle_chart_empty_state_title": "Add issues to the cycle to view the burndown chart.",
-  "active_cycle_priority_issue_empty_state_title": "Observe high priority issues tackled in the cycle at a glance.",
-  "active_cycle_assignee_empty_state_title": "Add assignees to issues to see a breakdown of work by assignees.",
-  "active_cycle_label_empty_state_title": "Add labels to issues to see the breakdown of work by labels.",
-
-  "workspace_active_cycles_empty_state_title": "No active cycles",
-  "workspace_active_cycles_empty_state_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.",
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Add issues to the cycle to view it's progress"
+      },
+      "chart": {
+        "title": "Add issues to the cycle to view the burndown chart."
+      },
+      "priority_issue": {
+        "title": "Observe high priority issues tackled in the cycle at a glance."
+      },
+      "assignee": {
+        "title": "Add assignees to issues to see a breakdown of work by assignees."
+      },
+      "label": {
+        "title": "Add labels to issues to see the breakdown of work by labels."
+      }
+    }
+  },
 
   "disabled_project": {
     "empty_state": {

diff --git a/packages/i18n/src/locales/es/translations.json b/packages/i18n/src/locales/es/translations.json
@@ -608,14 +608,25 @@
   "notification_mentions_empty_state_title": "No hay problemas asignados",
   "notification_mentions_empty_state_description": "Las actualizaciones de los problemas asignados a ti se pueden ver aquí",
 
-  "active_cycle_progress_empty_state_title": "Añade problemas al ciclo para ver su progreso",
-  "active_cycle_chart_empty_state_title": "Añade problemas al ciclo para ver el gráfico de avance.",
-  "active_cycle_priority_issue_empty_state_title": "Observa los problemas de alta prioridad abordados en el ciclo de un vistazo.",
-  "active_cycle_assignee_empty_state_title": "Añade asignados a los problemas para ver un desglose del trabajo por asignados.",
-  "active_cycle_label_empty_state_title": "Añade etiquetas a los problemas para ver el desglose del trabajo por etiquetas.",
-
-  "workspace_active_cycles_empty_state_title": "No hay ciclos activos",
-  "workspace_active_cycles_empty_state_description": "Ciclos de tus proyectos que incluyen cualquier período que abarque la fecha de hoy dentro de su rango. Encuentra el progreso y los detalles de todos tus ciclos activos aquí.",
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Agrega problemas al ciclo para ver su progreso."
+      },
+      "chart": {
+        "title": "Agrega problemas al ciclo para ver el gráfico de burndown."
+      },
+      "priority_issue": {
+        "title": "Observa de un vistazo los problemas de alta prioridad abordados en el ciclo."
+      },
+      "assignee": {
+        "title": "Asigna responsables a los problemas para ver un desglose del trabajo por responsables."
+      },
+      "label": {
+        "title": "Agrega etiquetas a los problemas para ver el desglose del trabajo por etiquetas."
+      }
+    }
+  },
 
   "disabled_project": {
     "empty_state": {

diff --git a/packages/i18n/src/locales/fr/translations.json b/packages/i18n/src/locales/fr/translations.json
@@ -609,14 +609,25 @@
   "notification_mentions_empty_state_title": "Aucun problème assigné",
   "notification_mentions_empty_state_description": "Les mises à jour des problèmes qui vous sont assignés sont visibles ici.",
 
-  "active_cycle_progress_empty_state_title": "Ajoutez des problèmes au cycle pour voir sa progression.",
-  "active_cycle_chart_empty_state_title": "Ajoutez des problèmes au cycle pour voir le graphique d'avancement.",
-  "active_cycle_priority_issue_empty_state_title": "Observez d'un coup d'œil les problèmes prioritaires traités dans le cycle.",
-  "active_cycle_assignee_empty_state_title": "Ajoutez des assignés aux problèmes pour voir une répartition du travail par assignés.",
-  "active_cycle_label_empty_state_title": "Ajoutez des étiquettes aux problèmes pour voir une répartition du travail par étiquettes.",
-
-  "workspace_active_cycles_empty_state_title": "Aucun cycle actif",
-  "workspace_active_cycles_empty_state_description": "Les cycles de vos projets incluent toute période couvrant la date d'aujourd'hui dans sa plage. Trouvez ici la progression et les détails de tous vos cycles actifs.",
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Ajoutez des problèmes au cycle pour voir sa progression."
+      },
+      "chart": {
+        "title": "Ajoutez des problèmes au cycle pour voir le graphique d'avancement."
+      },
+      "priority_issue": {
+        "title": "Observez d'un coup d'œil les problèmes prioritaires traités dans le cycle."
+      },
+      "assignee": {
+        "title": "Ajoutez des responsables aux problèmes pour voir la répartition du travail par responsable."
+      },
+      "label": {
+        "title": "Ajoutez des étiquettes aux problèmes pour voir la répartition du travail par étiquette."
+      }
+    }
+  },
 
   "disabled_project": {
     "empty_state": {

diff --git a/packages/i18n/src/locales/ja/translations.json b/packages/i18n/src/locales/ja/translations.json
@@ -609,14 +609,25 @@
   "notification_mentions_empty_state_title": "割り当てられた課題はありません",
   "notification_mentions_empty_state_description": "あなたに割り当てられた課題の更新はここで確認できます",
 
-  "active_cycle_progress_empty_state_title": "課題をサイクルに追加して進捗を確認してください",
-  "active_cycle_chart_empty_state_title": "課題をサイクルに追加してバーンダウンチャートを表示してください。",
-  "active_cycle_priority_issue_empty_state_title": "サイクル内で対応された高優先度の課題を一目で確認できます。",
-  "active_cycle_assignee_empty_state_title": "課題に担当者を追加して、担当者別の作業の内訳を確認してください。",
-  "active_cycle_label_empty_state_title": "課題にラベルを追加して、ラベル別の作業の内訳を確認してください。",
-
-  "workspace_active_cycles_empty_state_title": "アクティブなサイクルはありません",
-  "workspace_active_cycles_empty_state_description": "現在の日付を範囲に含むプロジェクトのサイクルです。すべてのアクティブなサイクルの進捗と詳細をここで確認してください。",
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "サイクルに課題を追加して進捗を確認してください。"
+      },
+      "chart": {
+        "title": "サイクルに課題を追加してバーンダウンチャートを確認してください。"
+      },
+      "priority_issue": {
+        "title": "サイクル内で処理された高優先度の課題を一目で把握できます。"
+      },
+      "assignee": {
+        "title": "課題に担当者を追加して、担当者ごとの作業の内訳を確認してください。"
+      },
+      "label": {
+        "title": "課題にラベルを追加して、ラベルごとの作業の内訳を確認してください。"
+      }
+    }
+  },
 
   "disabled_project": {
     "empty_state": {

diff --git a/web/core/components/cycles/active-cycle/cycle-stats.tsx b/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -6,17 +6,16 @@ import { observer } from "mobx-react";
 import { CalendarCheck } from "lucide-react";
 // headless ui
 import { Tab } from "@headlessui/react";
-// types
+// plane imports
 import { EIssuesStoreType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Tooltip, Loader, PriorityIcon, Avatar } from "@plane/ui";
 // components
 import { SingleProgressStats } from "@/components/core";
 import { StateDropdown } from "@/components/dropdowns";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate, renderFormattedDateWithoutYear } from "@/helpers/date-time.helper";
@@ -26,6 +25,7 @@ import { useIssueDetail, useIssues } from "@/hooks/store";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import useLocalStorage from "@/hooks/use-local-storage";
 // plane web components
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { IssueIdentifier } from "@/plane-web/components/issues";
 // store
 import { ActiveCycleIssueDetails } from "@/store/issue/cycle";
@@ -41,11 +41,18 @@ export type ActiveCycleStatsProps = {
 
 export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
   const { workspaceSlug, projectId, cycle, cycleId, handleFiltersUpdate, cycleIssueDetails } = props;
-
+  // local storage
   const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
-
+  // refs
   const issuesContainerRef = useRef<HTMLDivElement | null>(null);
+  // states
   const [issuesLoaderElement, setIssueLoaderElement] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const priorityResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/priority" });
+  const assigneesResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/assignee" });
+  const labelsResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/label" });
 
   const currentValue = (tab: string | null) => {
     switch (tab) {
@@ -231,10 +238,9 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                   </>
                 ) : (
                   <div className="flex items-center justify-center h-full w-full">
-                    <EmptyState
-                      type={EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE}
-                      layout="screen-simple"
-                      size="sm"
+                    <SimpleEmptyState
+                      title={t("active_cycle.empty_state.priority_issue.title")}
+                      assetPath={priorityResolvedPath}
                     />
                   </div>
                 )
@@ -293,10 +299,9 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                 })
               ) : (
                 <div className="flex items-center justify-center h-full w-full">
-                  <EmptyState
-                    type={EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE}
-                    layout="screen-simple"
-                    size="sm"
+                  <SimpleEmptyState
+                    title={t("active_cycle.empty_state.assignee.title")}
+                    assetPath={assigneesResolvedPath}
                   />
                 </div>
               )
@@ -336,7 +341,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                 ))
               ) : (
                 <div className="flex items-center justify-center h-full w-full">
-                  <EmptyState type={EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE} layout="screen-simple" size="sm" />
+                  <SimpleEmptyState title={t("active_cycle.empty_state.label.title")} assetPath={labelsResolvedPath} />
                 </div>
               )
             ) : (

diff --git a/web/core/components/cycles/active-cycle/productivity.tsx b/web/core/components/cycles/active-cycle/productivity.tsx
@@ -1,16 +1,17 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { ICycle, TCycleEstimateType } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
-import { EmptyState } from "@/components/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { useCycle, useProjectEstimates } from "@/hooks/store";
+import { useCycle } from "@/hooks/store";
 // plane web constants
-import { EEstimateSystem } from "@/plane-web/constants/estimates";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { EstimateTypeDropdown } from "../dropdowns/estimate-type-dropdown";
 
 export type ActiveCycleProductivityProps = {
@@ -21,11 +22,13 @@ export type ActiveCycleProductivityProps = {
 
 export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observer((props) => {
   const { workspaceSlug, projectId, cycle } = props;
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { getEstimateTypeByCycleId, setEstimateType } = useCycle();
-
   // derived values
   const estimateType: TCycleEstimateType = (cycle && getEstimateTypeByCycleId(cycle.id)) || "issues";
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/chart" });
 
   const onChange = async (value: TCycleEstimateType) => {
     if (!workspaceSlug || !projectId || !cycle || !cycle.id) return;
@@ -95,7 +98,7 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
         ) : (
           <>
             <div className="flex items-center justify-center h-full w-full">
-              <EmptyState type={EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE} layout="screen-simple" size="sm" />
+              <SimpleEmptyState title={t("active_cycle.empty_state.chart.title")} assetPath={resolvedPath} />
             </div>
           </>
         )}

diff --git a/web/core/components/cycles/active-cycle/progress.tsx b/web/core/components/cycles/active-cycle/progress.tsx
@@ -4,14 +4,14 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 // plane package imports
 import { PROGRESS_STATE_GROUPS_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle, IIssueFilterOptions } from "@plane/types";
 import { LinearProgressIndicator, Loader } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 // hooks
 import { useProjectState } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export type ActiveCycleProgressProps = {
   cycle: ICycle | null;
@@ -22,9 +22,10 @@ export type ActiveCycleProgressProps = {
 
 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props) => {
   const { handleFiltersUpdate, cycle } = props;
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { groupedProjectStates } = useProjectState();
-
   // derived values
   const progressIndicatorData = PROGRESS_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
@@ -40,6 +41,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
         backlog: cycle?.backlog_issues,
       }
     : {};
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/progress" });
 
   return cycle && cycle.hasOwnProperty("started_issues") ? (
     <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
@@ -101,7 +103,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
         </div>
       ) : (
         <div className="flex items-center justify-center h-full w-full">
-          <EmptyState type={EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE} layout="screen-simple" size="sm" />
+          <SimpleEmptyState title={t("active_cycle.empty_state.progress.title")} assetPath={resolvedPath} />
         </div>
       )}
     </div>

diff --git a/web/core/constants/empty-state.tsx b/web/core/constants/empty-state.tsx
@@ -96,14 +96,6 @@ export enum EmptyStateType {
   NOTIFICATION_ARCHIVED_EMPTY_STATE = "notification-archived-empty-state",
   NOTIFICATION_SNOOZED_EMPTY_STATE = "notification-snoozed-empty-state",
   NOTIFICATION_UNREAD_EMPTY_STATE = "notification-unread-empty-state",
-
-  ACTIVE_CYCLE_PROGRESS_EMPTY_STATE = "active-cycle-progress-empty-state",
-  ACTIVE_CYCLE_CHART_EMPTY_STATE = "active-cycle-chart-empty-state",
-  ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE = "active-cycle-priority-issue-empty-state",
-  ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE = "active-cycle-assignee-empty-state",
-  ACTIVE_CYCLE_LABEL_EMPTY_STATE = "active-cycle-label-empty-state",
-
-  WORKSPACE_ACTIVE_CYCLES = "workspace-active-cycles",
   // stickies
   STICKIES = "stickies",
   STICKIES_SEARCH = "stickies-search",
@@ -709,39 +701,6 @@ const emptyStateDetails: Record<EmptyStateType, EmptyStateDetails> = {
     description: "Any notification you archive will be \n available here to help you focus",
     path: "/empty-state/search/archive",
   },
-
-  [EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE,
-    title: "Add issues to the cycle to view it's \n progress",
-    path: "/empty-state/active-cycle/progress",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE,
-    title: "Add issues to the cycle to view the \n burndown chart.",
-    path: "/empty-state/active-cycle/chart",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE,
-    title: "Observe high priority issues tackled in \n the cycle at a glance.",
-    path: "/empty-state/active-cycle/priority",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE,
-    title: "Add assignees to issues to see a \n breakdown of work by assignees.",
-    path: "/empty-state/active-cycle/assignee",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE,
-    title: "Add labels to issues to see the \n breakdown of work by labels.",
-    path: "/empty-state/active-cycle/label",
-  },
-  [EmptyStateType.WORKSPACE_ACTIVE_CYCLES]: {
-    key: EmptyStateType.WORKSPACE_ACTIVE_CYCLES,
-    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.",
-    path: "/empty-state/onboarding/workspace-active-cycles",
-  },
   [EmptyStateType.STICKIES]: {
     key: EmptyStateType.STICKIES,
     title: "Stickies are quick notes and to-dos you take down on the fly.",