[WEB-3173] chore: language support for cycles constant file

web/core/constants/cycle.ts → packages/constants/src/cycle.ts

@@ -1,56 +1,40 @@
 // types
-import { TCycleLayoutOptions, TCycleTabOptions } from "@plane/types";
-
-export const CYCLE_TABS_LIST: {
-  key: TCycleTabOptions;
-  name: string;
-}[] = [
-  {
-    key: "active",
-    name: "Active",
-  },
-  {
-    key: "all",
-    name: "All",
-  },
-];
-
 export const CYCLE_STATUS: {
-  label: string;
+  i18n_label: string;
   value: "current" | "upcoming" | "completed" | "draft";
-  title: string;
+  i18n_title: string;
   color: string;
   textColor: string;
   bgColor: string;
 }[] = [
   {
-    label: "day left",
+    i18n_label: "project_cycles.status.days_left",
     value: "current",
-    title: "In progress",
+    i18n_title: "project_cycles.status.in_progress",
     color: "#F59E0B",
     textColor: "text-amber-500",
     bgColor: "bg-amber-50",
   },
   {
-    label: "Yet to start",
+    i18n_label: "project_cycles.status.yet_to_start",
     value: "upcoming",
-    title: "Yet to start",
+    i18n_title: "project_cycles.status.yet_to_start",
     color: "#3F76FF",
     textColor: "text-blue-500",
     bgColor: "bg-indigo-50",
   },
   {
-    label: "Completed",
+    i18n_label: "project_cycles.status.completed",
     value: "completed",
-    title: "Completed",
+    i18n_title: "project_cycles.status.completed",
     color: "#16A34A",
     textColor: "text-green-600",
     bgColor: "bg-green-50",
   },
   {
-    label: "Draft",
+    i18n_label: "project_cycles.status.draft",
     value: "draft",
-    title: "Draft",
+    i18n_title: "project_cycles.status.draft",
     color: "#525252",
     textColor: "text-custom-text-300",
     bgColor: "bg-custom-background-90",

packages/constants/src/index.ts

@@ -16,6 +16,7 @@ export * from "./tab-indices";
 export * from "./user";
 export * from "./workspace";
 export * from "./stickies";
+export * from "./cycle";
 export * from "./module";
 export * from "./project";
 export * from "./views";

packages/i18n/src/locales/en/translations.json

@@ -882,6 +882,13 @@
   },
 
   "project_cycles": {
+    "status": {
+      "days_left": "Days left",
+      "completed": "Completed",
+      "yet_to_start": "Yet to start",
+      "in_progress": "In progress",
+      "draft": "Draft"
+    },
     "empty_state": {
       "general": {
         "title": "Group and timebox your work in Cycles.",

packages/i18n/src/locales/es/translations.json

@@ -883,6 +883,13 @@
   },
 
   "project_cycles": {
+    "status": {
+      "days_left": "Días restantes",
+      "completed": "Completado",
+      "yet_to_start": "Por comenzar",
+      "in_progress": "En progreso", 
+      "draft": "Borrador"
+    },
     "empty_state": {
       "general": {
         "title": "Agrupa y organiza tu trabajo en Ciclos.",

packages/i18n/src/locales/fr/translations.json

@@ -880,6 +880,13 @@
   },
 
   "project_cycles": {
+    "status": {
+      "days_left": "Jours restants",
+      "completed": "Terminé",
+      "yet_to_start": "À démarrer",
+      "in_progress": "En cours",
+      "draft": "Brouillon"
+    },
     "empty_state": {
       "general": {
         "title": "Groupez et cadrez votre travail en cycles.",

packages/i18n/src/locales/ja/translations.json

@@ -883,6 +883,13 @@
   },
 
   "project_cycles": {
+    "status": {
+      "days_left": "残り日数",
+      "completed": "完了",
+      "yet_to_start": "未着手",
+      "in_progress": "進行中",
+      "draft": "下書き"
+    },
     "empty_state": {
       "general": {
         "title": "作業をサイクルにまとめ、フレーム化します。",

packages/i18n/src/locales/zh-CN/translations.json

@@ -879,6 +879,15 @@
       "manual": "手动"
     }
   },
+  "project_cycles": {
+    "status": {
+      "days_left": "剩余天数",
+      "completed": "已完成",
+      "yet_to_start": "待开始",
+      "in_progress": "进行中",
+      "draft": "草稿"
+    }
+  },
   "notification": {
     "label": "通知",
     "tabs": {

web/core/components/cycles/analytics-sidebar/sidebar-header.tsx

@@ -5,13 +5,14 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { ArchiveIcon, ArchiveRestoreIcon, ChevronRight, EllipsisIcon, LinkIcon, Trash2 } from "lucide-react";
 // types
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle } from "@plane/types";
 // ui
 import { CustomMenu, setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns";
 // constants
-import { CYCLE_STATUS } from "@/constants/cycle";
 import { CYCLE_UPDATED } from "@/constants/event-tracker";
 // helpers
 import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
@@ -53,6 +54,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
   const { allowPermissions } = useUserPermissions();
   const { updateCycleDetails, restoreCycle } = useCycle();
   const { setTrackElement, captureCycleEvent } = useEventTracker();
+  const { t } = useTranslation();
 
   // form info
   const { control, reset } = useForm({
@@ -283,7 +285,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
                 backgroundColor: `${currentCycle.color}20`,
               }}
             >
-              {currentCycle.title}
+              {t(currentCycle.i18n_title)}
             </span>
           )}
         </div>

web/core/components/cycles/applied-filters/status.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
-import { CYCLE_STATUS } from "@/constants/cycle";
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { cn } from "@/helpers/common.helper";
 
 type Props = {
@@ -11,6 +12,7 @@ type Props = {
 
 export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
 
   return (
     <>
@@ -25,7 +27,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
               statusDetails?.textColor
             )}
           >
-            {statusDetails?.title}
+            {statusDetails && t(statusDetails?.i18n_title)}
             {editable && (
               <button
                 type="button"

web/core/components/cycles/dropdowns/filters/status.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TCycleGroups } from "@plane/types";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
 // types
-import { CYCLE_STATUS } from "@/constants/cycle";
 // constants
 
 type Props = {
@@ -17,7 +18,8 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
-
+  //hooks
+  const { t } = useTranslation();
   const appliedFiltersCount = appliedFilters?.length ?? 0;
   const filteredOptions = CYCLE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
 
@@ -36,7 +38,7 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
                 key={status.value}
                 isChecked={appliedFilters?.includes(status.value) ? true : false}
                 onClick={() => handleUpdate(status.value)}
-                title={status.title}
+                title={t(status.i18n_title)}
               />
             ))
           ) : (