feat(admin): enable shared localization runtime in God Mode

apps/admin/app/(all)/(dashboard)/general/form.tsx

@@ -10,6 +10,7 @@ import { Telescope } from "lucide-react";
 // plane imports
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { useTranslation } from "@plane/i18n";
 import type { IInstance, IInstanceAdmin } from "@plane/types";
 import { Input, ToggleSwitch } from "@plane/ui";
 // components
@@ -25,6 +26,7 @@ export interface IGeneralConfigurationForm {
 export const GeneralConfigurationForm = observer(function GeneralConfigurationForm(props: IGeneralConfigurationForm) {
   const { instance, instanceAdmins } = props;
   // hooks
+  const { t } = useTranslation();
   const { updateInstanceInfo } = useInstance();
 
   // form data
@@ -46,7 +48,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       .then(() =>
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success",
+          title: t("success"),
           message: "Settings updated successfully",
         })
       )
@@ -70,7 +72,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
           />
 
           <div className="flex flex-col gap-1">
-            <h4 className="text-13 text-tertiary">Email</h4>
+            <h4 className="text-13 text-tertiary">{t("email")}</h4>
             <Input
               id="email"
               name="email"
@@ -143,7 +145,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
           }}
           loading={isSubmitting}
         >
-          {isSubmitting ? "Saving" : "Save changes"}
+          {isSubmitting ? t("saving") : t("save_changes")}
         </Button>
       </div>
     </div>

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -10,6 +10,7 @@ import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
 import type { EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
 import { API_BASE_URL } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
 import { Input, Spinner } from "@plane/ui";
@@ -50,6 +51,7 @@ const defaultFromData: TFormData = {
 };
 
 export function InstanceSignInForm() {
+  const { t } = useTranslation();
   // search params
   const searchParams = useSearchParams();
   const emailParam = searchParams.get("email") || undefined;
@@ -133,15 +135,15 @@ export function InstanceSignInForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 font-medium text-tertiary" htmlFor="email">
-                Email <span className="text-danger-primary">*</span>
+                {t("auth.common.email.label")} <span className="text-danger-primary">*</span>
               </label>
               <Input
-                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
+                className="w-full border border-subtle bg-surface-1! placeholder:text-placeholder"
                 id="email"
                 name="email"
                 type="email"
                 inputSize="md"
-                placeholder="name@company.com"
+                placeholder={t("auth.common.email.placeholder")}
                 value={formData.email}
                 onChange={(e) => handleFormChange("email", e.target.value)}
                 autoComplete="off"
@@ -151,24 +153,24 @@ export function InstanceSignInForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 font-medium text-tertiary" htmlFor="password">
-                Password <span className="text-danger-primary">*</span>
+                {t("auth.common.password.label")} <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
+                  className="w-full border border-subtle bg-surface-1! placeholder:text-placeholder"
                   id="password"
                   name="password"
                   type={showPassword ? "text" : "password"}
                   inputSize="md"
-                  placeholder="Enter your password"
+                  placeholder={t("auth.common.password.placeholder")}
                   value={formData.password}
                   onChange={(e) => handleFormChange("password", e.target.value)}
                   autoComplete="off"
                 />
                 {showPassword ? (
                   <button
                     type="button"
-                    aria-label="Hide password"
+                    aria-label={t("aria_labels.auth_forms.hide_password")}
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
@@ -177,7 +179,7 @@ export function InstanceSignInForm() {
                 ) : (
                   <button
                     type="button"
-                    aria-label="Show password"
+                    aria-label={t("aria_labels.auth_forms.show_password")}
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >

apps/admin/components/common/header/core.ts

@@ -4,16 +4,19 @@
  * See the LICENSE file for details.
  */
 
+export const CORE_HEADER_SEGMENT_LABEL_KEYS: Record<string, string> = {
+  general: "common.general",
+  email: "email",
+  authentication: "workspace_settings.settings.members.details.authentication",
+  workspace: "common.workspace",
+  create: "common.create",
+};
+
 export const CORE_HEADER_SEGMENT_LABELS: Record<string, string> = {
-  general: "General",
   ai: "Artificial Intelligence",
-  email: "Email",
-  authentication: "Authentication",
   image: "Image",
   google: "Google",
   github: "GitHub",
   gitlab: "GitLab",
   gitea: "Gitea",
-  workspace: "Workspace",
-  create: "Create",
 };

apps/admin/components/common/header/index.tsx

@@ -8,13 +8,14 @@ import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Menu, Settings } from "lucide-react";
 // icons
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "../breadcrumb-link";
 // hooks
 import { useTheme } from "@/hooks/store";
 // local imports
-import { CORE_HEADER_SEGMENT_LABELS } from "./core";
+import { CORE_HEADER_SEGMENT_LABEL_KEYS, CORE_HEADER_SEGMENT_LABELS } from "./core";
 import { EXTENDED_HEADER_SEGMENT_LABELS } from "./extended";
 
 export const HamburgerToggle = observer(function HamburgerToggle() {
@@ -37,25 +38,27 @@ const HEADER_SEGMENT_LABELS = {
 };
 
 // Function to dynamically generate breadcrumb items based on pathname
-const generateBreadcrumbItems = (pathname: string) => {
+const generateBreadcrumbItems = (pathname: string, t: (key: string) => string) => {
   const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
   pathSegments.pop();
 
   let currentUrl = "";
   const breadcrumbItems = pathSegments.map((segment) => {
     currentUrl += "/" + segment;
+    const translationKey = CORE_HEADER_SEGMENT_LABEL_KEYS[segment];
     return {
-      title: HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase(),
+      title: translationKey ? t(translationKey) : (HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase()),
       href: currentUrl,
     };
   });
   return breadcrumbItems;
 };
 
 export const AdminHeader = observer(function AdminHeader() {
+  const { t } = useTranslation();
   const pathName = usePathname();
 
-  const breadcrumbItems = generateBreadcrumbItems(pathName || "");
+  const breadcrumbItems = generateBreadcrumbItems(pathName || "", t);
 
   return (
     <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-subtle bg-surface-1 p-4">
@@ -67,7 +70,7 @@ export const AdminHeader = observer(function AdminHeader() {
               component={
                 <BreadcrumbLink
                   href="/general/"
-                  label="Settings"
+                  label={t("settings")}
                   icon={<Settings className="h-4 w-4 text-tertiary" />}
                 />
               }

apps/admin/components/common/new-user-popup.tsx

@@ -9,6 +9,7 @@ import Link from "next/link";
 import { useTheme as useNextTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/propel/button";
+import { useTranslation } from "@plane/i18n";
 import { resolveGeneralTheme } from "@plane/utils";
 // hooks
 import TakeoffIconDark from "@/app/assets/logos/takeoff-icon-dark.svg?url";
@@ -18,6 +19,7 @@ import { useTheme } from "@/hooks/store";
 
 export const NewUserPopup = observer(function NewUserPopup() {
   // hooks
+  const { t } = useTranslation();
   const { isNewUserPopup, toggleNewUserPopup } = useTheme();
   // theme
   const { resolvedTheme } = useNextTheme();
@@ -27,17 +29,16 @@ export const NewUserPopup = observer(function NewUserPopup() {
     <div className="shadow-md absolute right-8 bottom-8 w-96 rounded-lg border border-subtle bg-surface-1 p-6">
       <div className="flex gap-4">
         <div className="grow">
-          <div className="text-14 font-semibold">Create workspace</div>
+          <div className="text-14 font-semibold">{t("create_workspace")}</div>
           <div className="py-2 text-13 font-medium text-tertiary">
-            Instance setup done! Welcome to Plane instance portal. Start your journey with by creating your first
-            workspace.
+            Instance setup done! Welcome to Plane instance portal. Start your journey by creating your first workspace.
           </div>
           <div className="flex items-center gap-4 pt-2">
             <Link href="/workspace/create" className={getButtonStyling("primary", "lg")}>
-              Create workspace
+              {t("create_workspace")}
             </Link>
             <Button variant="secondary" size="lg" onClick={toggleNewUserPopup}>
-              Close
+              {t("close")}
             </Button>
           </div>
         </div>

apps/admin/components/instance/setup-form.tsx

@@ -10,6 +10,7 @@ import { useSearchParams } from "next/navigation";
 import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
 import { Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
@@ -58,6 +59,7 @@ const defaultFromData: TFormData = {
 };
 
 export function InstanceSetupForm() {
+  const { t } = useTranslation();
   // search params
   const searchParams = useSearchParams();
   const firstNameParam = searchParams?.get("first_name") || undefined;
@@ -163,10 +165,10 @@ export function InstanceSetupForm() {
             <div className="flex flex-col items-center gap-4 sm:flex-row">
               <div className="w-full space-y-1">
                 <label className="text-13 font-medium text-tertiary" htmlFor="first_name">
-                  First name <span className="text-danger-primary">*</span>
+                  {t("first_name")} <span className="text-danger-primary">*</span>
                 </label>
                 <Input
-                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
+                  className="w-full border border-subtle bg-surface-1! placeholder:text-placeholder"
                   id="first_name"
                   name="first_name"
                   type="text"
@@ -186,10 +188,10 @@ export function InstanceSetupForm() {
               </div>
               <div className="w-full space-y-1">
                 <label className="text-13 font-medium text-tertiary" htmlFor="last_name">
-                  Last name <span className="text-danger-primary">*</span>
+                  {t("last_name")} <span className="text-danger-primary">*</span>
                 </label>
                 <Input
-                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
+                  className="w-full border border-subtle bg-surface-1! placeholder:text-placeholder"
                   id="last_name"
                   name="last_name"
                   type="text"
@@ -210,15 +212,15 @@ export function InstanceSetupForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 font-medium text-tertiary" htmlFor="email">
-                Email <span className="text-danger-primary">*</span>
+                {t("auth.common.email.label")} <span className="text-danger-primary">*</span>
               </label>
               <Input
-                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
+                className="w-full border border-subtle bg-surface-1! placeholder:text-placeholder"
                 id="email"
                 name="email"
                 type="email"
                 inputSize="md"
-                placeholder="name@company.com"
+                placeholder={t("auth.common.email.placeholder")}
                 value={formData.email}
                 onChange={(e) => handleFormChange("email", e.target.value)}
                 hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
@@ -234,7 +236,7 @@ export function InstanceSetupForm() {
                 Company name <span className="text-danger-primary">*</span>
               </label>
               <Input
-                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
+                className="w-full border border-subtle bg-surface-1! placeholder:text-placeholder"
                 id="company_name"
                 name="company_name"
                 type="text"
@@ -253,16 +255,16 @@ export function InstanceSetupForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 font-medium text-tertiary" htmlFor="password">
-                Set a password <span className="text-danger-primary">*</span>
+                {t("auth.common.password.set_password")} <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
+                  className="w-full border border-subtle bg-surface-1! placeholder:text-placeholder"
                   id="password"
                   name="password"
                   type={showPassword.password ? "text" : "password"}
                   inputSize="md"
-                  placeholder="New password"
+                  placeholder={t("auth.common.password.new_password.placeholder")}
                   value={formData.password}
                   onChange={(e) => handleFormChange("password", e.target.value)}
                   hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
@@ -273,7 +275,7 @@ export function InstanceSetupForm() {
                 {showPassword.password ? (
                   <button
                     type="button"
-                    aria-label="Hide password"
+                    aria-label={t("aria_labels.auth_forms.hide_password")}
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
@@ -282,7 +284,7 @@ export function InstanceSetupForm() {
                 ) : (
                   <button
                     type="button"
-                    aria-label="Show password"
+                    aria-label={t("aria_labels.auth_forms.show_password")}
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
@@ -298,7 +300,7 @@ export function InstanceSetupForm() {
 
             <div className="w-full space-y-1">
               <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
-                Confirm password <span className="text-danger-primary">*</span>
+                {t("auth.common.password.confirm_password.label")} <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
@@ -308,16 +310,16 @@ export function InstanceSetupForm() {
                   inputSize="md"
                   value={formData.confirm_password}
                   onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                  placeholder="Confirm password"
-                  className="w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
+                  placeholder={t("auth.common.password.confirm_password.placeholder")}
+                  className="w-full border border-subtle bg-surface-1! pr-12 placeholder:text-placeholder"
                   onFocus={() => setIsRetryPasswordInputFocused(true)}
                   onBlur={() => setIsRetryPasswordInputFocused(false)}
                   autoComplete="new-password"
                 />
                 {showPassword.retypePassword ? (
                   <button
                     type="button"
-                    aria-label="Hide password"
+                    aria-label={t("aria_labels.auth_forms.hide_password")}
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
@@ -326,7 +328,7 @@ export function InstanceSetupForm() {
                 ) : (
                   <button
                     type="button"
-                    aria-label="Show password"
+                    aria-label={t("aria_labels.auth_forms.show_password")}
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
@@ -337,7 +339,7 @@ export function InstanceSetupForm() {
               {!!formData.confirm_password &&
                 formData.password !== formData.confirm_password &&
                 renderPasswordMatchError && (
-                  <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>
+                  <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
                 )}
             </div>
 
@@ -366,7 +368,7 @@ export function InstanceSetupForm() {
 
             <div className="py-2">
               <Button type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : t("common.continue")}
               </Button>
             </div>
           </form>