[WEB-2870]feat: language support (#6215)

* fix: adding language support package * fix: language support implementation using mobx * fix: adding more languages for support * fix: profile settings translations * feat: added language support for sidebar and user settings * feat: added language support for deactivation modal * fix: added project sync after transfer issues (#6200) * code refactor and improvement (#6203) * chore: package code refactoring * chore: component restructuring and refactor * chore: comment create improvement * refactor: enhance workspace and project wrapper modularity (#6207) * [WEB-2678]feat: added functionality to add labels directly from dropdown (#6211) * enhancement:added functionality to add features directly from dropdown * fix: fixed import order * fix: fixed lint errors * chore: added common component for project activity (#6212) * chore: added common component for project activity * fix: added enum * fix: added enum for initiatives * - Do not clear temp files that are locked. (#6214) - Handle edge cases in sync workspace * fix: labels empty state for drop down (#6216) * refactor: remove cn helper function from the editor package (#6217) * * feat: added language support to issue create modal in sidebar * fix: project activity type * * fix: added missing translations * fix: modified translation for plurals * fix: fixed spanish translation * dev: language type error in space user profile types * fix: type fixes * chore: added alpha tag --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com> Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: Akshita Goyal <36129505+gakshita@users.noreply.github.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> Co-authored-by: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Co-authored-by: gurusinath <gurusainath007@gmail.com>
2025-01-03 14:16:26 +05:30 · 2025-01-03 14:16:26 +05:30 · 873e4330bc
commit 873e4330bc
parent ade0aa1643
84 changed files with 2588 additions and 873 deletions
--- a/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
@ -3,6 +3,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ContentWrapper, getButtonStyling } from "@plane/ui";
 // components
@ -16,6 +17,7 @@ import { cn } from "@/helpers/common.helper";
 import { useUser } from "@/hooks/store";

 export const WorkspaceActiveCyclesUpgrade = observer(() => {
+  const { t } = useTranslation();
  // store hooks
  const {
    userProfile: { data: userProfile },
@ -33,10 +35,8 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
      >
        <div className="relative flex flex-col justify-center gap-7 px-14 lg:w-1/2">
          <div className="flex max-w-64 flex-col gap-2">
-            <h2 className="text-2xl font-semibold">On-demand snapshots of all your cycles</h2>
-            <p className="text-base font-medium text-custom-text-300">
-              Monitor cycles across projects, track high-priority issues, and zoom in cycles that need attention.
-            </p>
+            <h2 className="text-2xl font-semibold">{t("on_demand_snapshots_of_all_your_cycles")}</h2>
+            <p className="text-base font-medium text-custom-text-300">{t("active_cycles_description")}</p>
          </div>
          <div className="flex items-center gap-3">
            <a
@ -46,7 +46,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
              rel="noreferrer"
            >
              <ProIcon className="h-3.5 w-3.5 text-white" />
-              Upgrade
+              {t("upgrade")}
            </a>
          </div>
          <span className="absolute left-0 top-0">
@ -81,11 +81,11 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
      <div className="grid h-full grid-cols-1 gap-5 pb-8 lg:grid-cols-2 xl:grid-cols-3">
        {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
          <div key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-custom-background-80 p-4">
-            <div className="flex items-center gap-2 justify-between">
-              <h3 className="font-medium">{item.title}</h3>
-              <item.icon className="h-4 w-4 text-blue-500" />
+            <div className="flex gap-2 justify-between">
+              <h3 className="font-medium">{t(item.key)}</h3>
+              <item.icon className="mt-1 h-4 w-4 text-blue-500" />
            </div>
-            <span className="text-sm text-custom-text-300">{item.description}</span>
+            <span className="text-sm text-custom-text-300">{t(`${item.key}_description`)}</span>
          </div>
        ))}
      </div>
--- a/web/ce/components/global/product-updates-header.tsx
+++ b/web/ce/components/global/product-updates-header.tsx
@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
+import { useTranslation } from "@plane/i18n";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // assets
@ -7,20 +8,23 @@ import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 // package.json
 import packageJson from "package.json";

-export const ProductUpdatesHeader = observer(() => (
-  <div className="flex gap-2 mx-6 my-4 items-center justify-between flex-shrink-0">
-    <div className="flex w-full items-center">
-      <div className="flex gap-2 text-xl font-medium">What&apos;s new</div>
+export const ProductUpdatesHeader = observer(() => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex gap-2 mx-6 my-4 items-center justify-between flex-shrink-0">
+      <div className="flex w-full items-center">
+        <div className="flex gap-2 text-xl font-medium">{t("whats_new")}</div>
      <div
-        className={cn(
-          "px-2 mx-2 py-0.5 text-center text-xs font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100"
-        )}
-      >
-        Version: v{packageJson.version}
+          className={cn(
+            "px-2 mx-2 py-0.5 text-center text-xs font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100"
+          )}
+        >
+          {t("version")}: v{packageJson.version}
+        </div>
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-8">
+        <Image src={PlaneLogo} alt="Plane" width={24} height={24} />
      </div>
    </div>
-    <div className="flex flex-shrink-0 items-center gap-8">
-      <Image src={PlaneLogo} alt="Plane" width={24} height={24} />
-    </div>
-  </div>
-));
+  );
+});
--- a/web/ce/components/global/version-number.tsx
+++ b/web/ce/components/global/version-number.tsx
@ -1,4 +1,8 @@
 // assets
+import { useTranslation } from "@plane/i18n";
 import packageJson from "package.json";

-export const PlaneVersionNumber: React.FC = () => <span>Version: v{packageJson.version}</span>;
+export const PlaneVersionNumber: React.FC = () => {
+  const { t } = useTranslation();
+  return <span>{t("version")}: v{packageJson.version}</span>;
+};
--- a/web/ce/components/projects/create/attributes.tsx
+++ b/web/ce/components/projects/create/attributes.tsx
@ -1,6 +1,7 @@
 "use client";
 import { FC } from "react";
 import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "@plane/i18n";
 import { IProject } from "@plane/types";
 // ui
 import { CustomSelect } from "@plane/ui";
@ -18,6 +19,7 @@ type Props = {

 const ProjectAttributes: FC<Props> = (props) => {
  const { isMobile = false } = props;
+  const { t } = useTranslation();
  const { control } = useFormContext<IProject>();
  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
  return (
@ -41,7 +43,7 @@ const ProjectAttributes: FC<Props> = (props) => {
                        {currentNetwork.label}
                      </>
                    ) : (
-                      <span className="text-custom-text-400">Select network</span>
+                      <span className="text-custom-text-400">{t("select_network")}</span>
                    )}
                  </div>
                }
@ -77,7 +79,7 @@ const ProjectAttributes: FC<Props> = (props) => {
                <MemberDropdown
                  value={value}
                  onChange={(lead) => onChange(lead === value ? null : lead)}
-                  placeholder="Lead"
+                  placeholder={t("lead")}
                  multiple={false}
                  buttonVariant="border-with-text"
                  tabIndex={5}
--- a/web/ce/components/projects/create/root.tsx
+++ b/web/ce/components/projects/create/root.tsx
@ -3,6 +3,7 @@
 import { useState, FC } from "react";
 import { observer } from "mobx-react";
 import { FormProvider, useForm } from "react-hook-form";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { setToast, TOAST_TYPE } from "@plane/ui";
 // constants
@ -47,6 +48,7 @@ const defaultValues: Partial<TProject> = {
 export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) => {
  const { setToFavorite, workspaceSlug, onClose, handleNextStep, updateCoverImageStatus } = props;
  // store
+  const { t } = useTranslation();
  const { captureProjectEvent } = useEventTracker();
  const { addProjectToFavorites, createProject } = useProject();
  // states
@ -64,8 +66,8 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
    addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
      setToast({
        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
+        title: t("error"),
+        message: t("failed_to_remove_project_from_favorites"),
      });
    });
  };
@ -95,8 +97,8 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
        });
        setToast({
          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Project created successfully.",
+          title: t("success"),
+          message: t("project_created_successfully"),
        });
        if (setToFavorite) {
          handleAddToFavorites(res.id);
@ -107,7 +109,7 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
        Object.keys(err.data).map((key) => {
          setToast({
            type: TOAST_TYPE.ERROR,
-            title: "Error!",
+            title: t("error"),
            message: err.data[key],
          });
          captureProjectEvent({
--- a/web/ce/components/workspace/edition-badge.tsx
+++ b/web/ce/components/workspace/edition-badge.tsx
@ -1,5 +1,6 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Button, Tooltip } from "@plane/ui";
 // hooks
@ -11,6 +12,7 @@ import { PaidPlanUpgradeModal } from "./upgrade";

 export const WorkspaceEditionBadge = observer(() => {
  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
  // states
  const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);

@ -27,7 +29,7 @@ export const WorkspaceEditionBadge = observer(() => {
          className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
          onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
        >
-          Upgrade
+          {t("upgrade")}
        </Button>
      </Tooltip>
    </>