chore: ln support modules constants

packages/constants/src/index.ts

@@ -14,3 +14,4 @@ export * from "./swr";
 export * from "./user";
 export * from "./workspace";
 export * from "./stickies";
+export * from "./module";

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

@@ -1,6 +1,10 @@
 import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
 // types
-import { TModuleLayoutOptions, TModuleOrderByOptions, TModuleStatus } from "@plane/types";
+import {
+  TModuleLayoutOptions,
+  TModuleOrderByOptions,
+  TModuleStatus,
+} from "@plane/types";
 
 export const MODULE_STATUS: {
   label: string;
@@ -10,90 +14,97 @@ export const MODULE_STATUS: {
   bgColor: string;
 }[] = [
   {
-    label: "Backlog",
+    label: "project_modules.status.backlog",
     value: "backlog",
     color: "#a3a3a2",
     textColor: "text-custom-text-400",
     bgColor: "bg-custom-background-80",
   },
   {
-    label: "Planned",
+    label: "project_modules.status.planned",
     value: "planned",
     color: "#3f76ff",
     textColor: "text-blue-500",
     bgColor: "bg-indigo-50",
   },
   {
-    label: "In Progress",
+    label: "project_modules.status.in_progress",
     value: "in-progress",
     color: "#f39e1f",
     textColor: "text-amber-500",
     bgColor: "bg-amber-50",
   },
   {
-    label: "Paused",
+    label: "project_modules.status.paused",
     value: "paused",
     color: "#525252",
     textColor: "text-custom-text-300",
     bgColor: "bg-custom-background-90",
   },
   {
-    label: "Completed",
+    label: "project_modules.status.completed",
     value: "completed",
     color: "#16a34a",
     textColor: "text-green-600",
     bgColor: "bg-green-100",
   },
   {
-    label: "Cancelled",
+    label: "project_modules.status.cancelled",
     value: "cancelled",
     color: "#ef4444",
     textColor: "text-red-500",
     bgColor: "bg-red-50",
   },
 ];
 
-export const MODULE_VIEW_LAYOUTS: { key: TModuleLayoutOptions; icon: any; title: string }[] = [
+export const MODULE_VIEW_LAYOUTS: {
+  key: TModuleLayoutOptions;
+  icon: any;
+  title: string;
+}[] = [
   {
     key: "list",
     icon: List,
-    title: "List layout",
+    title: "project_modules.layout.list",
   },
   {
     key: "board",
     icon: LayoutGrid,
-    title: "Gallery layout",
+    title: "project_modules.layout.board",
   },
   {
     key: "gantt",
     icon: GanttChartSquare,
-    title: "Timeline layout",
+    title: "project_modules.layout.timeline",
   },
 ];
 
-export const MODULE_ORDER_BY_OPTIONS: { key: TModuleOrderByOptions; label: string }[] = [
+export const MODULE_ORDER_BY_OPTIONS: {
+  key: TModuleOrderByOptions;
+  label: string;
+}[] = [
   {
     key: "name",
-    label: "Name",
+    label: "project_modules.order_by.name",
   },
   {
     key: "progress",
-    label: "Progress",
+    label: "project_modules.order_by.progress",
   },
   {
     key: "issues_length",
-    label: "Number of issues",
+    label: "project_modules.order_by.issues",
   },
   {
     key: "target_date",
-    label: "Due date",
+    label: "project_modules.order_by.due_date",
   },
   {
     key: "created_at",
-    label: "Created date",
+    label: "project_modules.order_by.created_at",
   },
   {
     key: "sort_order",
-    label: "Manual",
+    label: "project_modules.order_by.manual",
   },
 ];

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

@@ -316,5 +316,29 @@
   "change_parent_issue": "Change parent issue",
   "remove_parent_issue": "Remove parent issue",
   "add_parent": "Add parent",
-  "loading_members": "Loading members..."
+  "loading_members": "Loading members...",
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Planned",
+      "in_progress": "In Progress",
+      "paused": "Paused",
+      "completed": "Completed",
+      "cancelled": "Cancelled"
+    },
+    "layout": {
+      "list": "List layout",
+      "board": "Gallery layout",
+      "timeline": "Timeline layout"
+    },
+    "order_by": {
+      "name": "Name",
+      "progress": "Progress",
+      "issues": "Number of issues",
+      "due_date": "Due date",
+      "created_at": "Created date",
+      "manual": "Manual"
+    }
+  }
+
 }

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx

@@ -2,13 +2,15 @@
 
 import { observer } from "mobx-react";
 import { ChevronDown } from "lucide-react";
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { CustomMenu, Row } from "@plane/ui";
-import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
 import { useModuleFilter, useProject } from "@/hooks/store";
 
 export const ModulesListMobileHeader = observer(() => {
   const { currentProjectDetails } = useProject();
   const { updateDisplayFilters } = useModuleFilter();
+  const { t } = useTranslation();
 
   return (
     <div className="flex justify-start md:hidden">
@@ -35,7 +37,7 @@ export const ModulesListMobileHeader = observer(() => {
               className="flex items-center gap-2"
             >
               <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <div className="text-custom-text-300">{t(layout.title)}</div>
             </CustomMenu.MenuItem>
           );
         })}

web/core/components/modules/analytics-sidebar/root.tsx

@@ -18,6 +18,8 @@ import {
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane types
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
 import {
@@ -46,7 +48,7 @@ import {
   MODULE_LINK_UPDATED,
   MODULE_UPDATED,
 } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
+
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
@@ -84,7 +86,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = useParams();
 
   // store hooks
-
+  const { t } = useTranslation();
   const { allowPermissions } = useUserPermissions();
 
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink, restoreModule } =
@@ -374,7 +376,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                         backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
                       }}
                     >
-                      {moduleStatus?.label ?? "Backlog"}
+                      {(moduleStatus && t(moduleStatus?.label)) ?? t("project_modules.status.backlog")}
                     </span>
                   }
                   value={value}
@@ -387,7 +389,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                     <CustomSelect.Option key={status.value} value={status.value}>
                       <div className="flex items-center gap-2">
                         <ModuleStatusIcon status={status.value} />
-                        {status.label}
+                        {t(status.label)}
                       </div>
                     </CustomSelect.Option>
                   ))}

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

@@ -3,9 +3,10 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // ui
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ModuleStatusIcon } from "@plane/ui";
 // constants
-import { MODULE_STATUS } from "@/constants/module";
 
 type Props = {
   handleRemove: (val: string) => void;
@@ -15,6 +16,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) => {
         return (
           <div key={status} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
             <ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
-            {statusDetails.label}
+            {t(statusDetails.label)}
             {editable && (
               <button
                 type="button"

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

@@ -2,14 +2,12 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TModuleStatus } from "@plane/types";
 // components
 import { ModuleStatusIcon } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// ui
-// types
-import { MODULE_STATUS } from "@/constants/module";
-// constants
 
 type Props = {
   appliedFilters: TModuleStatus[] | null;
@@ -21,6 +19,7 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
+  const { t } = useTranslation();
 
   const filteredOptions = MODULE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
   const appliedFiltersCount = appliedFilters?.length ?? 0;
@@ -41,7 +40,7 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
                 isChecked={appliedFilters?.includes(status.value) ? true : false}
                 onClick={() => handleUpdate(status.value)}
                 icon={<ModuleStatusIcon status={status.value} />}
-                title={status.label}
+                title={t(status.label)}
               />
             ))
           ) : (

web/core/components/modules/dropdowns/order-by.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TModuleOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu, getButtonStyling } from "@plane/ui";
 // helpers
-import { MODULE_ORDER_BY_OPTIONS } from "@/constants/module";
 import { cn } from "@/helpers/common.helper";
 // types
 // constants
@@ -17,6 +18,8 @@ type Props = {
 
 export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
   const { onChange, value } = props;
+  // hooks
+  const { t } = useTranslation();
 
   const orderByDetails = MODULE_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
 
@@ -28,7 +31,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
       customButton={
         <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
-          {orderByDetails?.label}
+          {orderByDetails && t(orderByDetails?.label)}
           <ChevronDown className="size-3" strokeWidth={2} />
         </div>
       }
@@ -45,7 +48,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
             else onChange(option.key);
           }}
         >
-          {option.label}
+          {t(option.label)}
           {value?.includes(option.key) && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}

web/core/components/modules/gantt-chart/blocks.tsx

@@ -4,12 +4,12 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 // ui
+import { MODULE_STATUS } from "@plane/constants";
 import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 // components
 import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
 import { getBlockViewDetails } from "@/components/issues/issue-layouts/utils";
 // constants
-import { MODULE_STATUS } from "@/constants/module";
 // hooks
 import { useModule } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";

web/core/components/modules/module-card-item.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { Info, SquareUser } from "lucide-react";
 // plane package imports
-import { PROGRESS_STATE_GROUPS_DETAILS } from "@plane/constants";
+import { MODULE_STATUS, PROGRESS_STATE_GROUPS_DETAILS } from "@plane/constants";
 import { IModule } from "@plane/types";
 import {
   Card,
@@ -25,7 +25,6 @@ import { ModuleQuickActions } from "@/components/modules";
 import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { generateQueryParams } from "@/helpers/router.helper";

web/core/components/modules/module-list-item-action.tsx

@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 // icons
 import { SquareUser } from "lucide-react";
 // types
+import { MODULE_STATUS } from "@plane/constants";
 import { IModule } from "@plane/types";
 // ui
 import { FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
@@ -15,7 +16,6 @@ import { ModuleQuickActions } from "@/components/modules";
 import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
 // constants
 import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
 // hooks
 import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
 import { useEventTracker, useMember, useModule, useUserPermissions } from "@/hooks/store";