Use i18n Keys (#5286)

Co-authored-by: openhands <openhands@all-hands.dev>
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>

frontend/__tests__/components/context-menu/account-settings-context-menu.test.tsx

@@ -28,8 +28,8 @@ describe("AccountSettingsContextMenu", () => {
     expect(
       screen.getByTestId("account-settings-context-menu"),
     ).toBeInTheDocument();
-    expect(screen.getByText("Account Settings")).toBeInTheDocument();
-    expect(screen.getByText("Logout")).toBeInTheDocument();
+    expect(screen.getByText("ACCOUNT_SETTINGS$SETTINGS")).toBeInTheDocument();
+    expect(screen.getByText("ACCOUNT_SETTINGS$LOGOUT")).toBeInTheDocument();
   });
 
   it("should call onClickAccountSettings when the account settings option is clicked", async () => {
@@ -42,7 +42,7 @@ describe("AccountSettingsContextMenu", () => {
       />,
     );
 
-    const accountSettingsOption = screen.getByText("Account Settings");
+    const accountSettingsOption = screen.getByText("ACCOUNT_SETTINGS$SETTINGS");
     await user.click(accountSettingsOption);
 
     expect(onClickAccountSettingsMock).toHaveBeenCalledOnce();
@@ -58,7 +58,7 @@ describe("AccountSettingsContextMenu", () => {
       />,
     );
 
-    const logoutOption = screen.getByText("Logout");
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
     await user.click(logoutOption);
 
     expect(onLogoutMock).toHaveBeenCalledOnce();
@@ -74,7 +74,7 @@ describe("AccountSettingsContextMenu", () => {
       />,
     );
 
-    const logoutOption = screen.getByText("Logout");
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
     await user.click(logoutOption);
 
     expect(onLogoutMock).not.toHaveBeenCalled();
@@ -90,7 +90,7 @@ describe("AccountSettingsContextMenu", () => {
       />,
     );
 
-    const accountSettingsButton = screen.getByText("Account Settings");
+    const accountSettingsButton = screen.getByText("ACCOUNT_SETTINGS$SETTINGS");
     await user.click(accountSettingsButton);
     await user.click(document.body);
 

frontend/__tests__/components/user-actions.test.tsx

@@ -58,7 +58,7 @@ describe("UserActions", () => {
     const userAvatar = screen.getByTestId("user-avatar");
     await user.click(userAvatar);
 
-    const accountSettingsOption = screen.getByText("Account Settings");
+    const accountSettingsOption = screen.getByText("ACCOUNT_SETTINGS$SETTINGS");
     await user.click(accountSettingsOption);
 
     expect(onClickAccountSettingsMock).toHaveBeenCalledOnce();
@@ -79,7 +79,7 @@ describe("UserActions", () => {
     const userAvatar = screen.getByTestId("user-avatar");
     await user.click(userAvatar);
 
-    const logoutOption = screen.getByText("Logout");
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
     await user.click(logoutOption);
 
     expect(onLogoutMock).toHaveBeenCalledOnce();
@@ -99,7 +99,7 @@ describe("UserActions", () => {
     const userAvatar = screen.getByTestId("user-avatar");
     await user.click(userAvatar);
 
-    const logoutOption = screen.getByText("Logout");
+    const logoutOption = screen.getByText("ACCOUNT_SETTINGS$LOGOUT");
     await user.click(logoutOption);
 
     expect(onLogoutMock).not.toHaveBeenCalled();

frontend/src/components/features/context-menu/account-settings-context-menu.tsx

@@ -1,7 +1,9 @@
+import { useTranslation } from "react-i18next";
 import { ContextMenu } from "./context-menu";
 import { ContextMenuListItem } from "./context-menu-list-item";
 import { ContextMenuSeparator } from "./context-menu-separator";
 import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
+import { I18nKey } from "#/i18n/declaration";
 
 interface AccountSettingsContextMenuProps {
   onClickAccountSettings: () => void;
@@ -17,6 +19,7 @@ export function AccountSettingsContextMenu({
   isLoggedIn,
 }: AccountSettingsContextMenuProps) {
   const ref = useClickOutsideElement<HTMLUListElement>(onClose);
+  const { t } = useTranslation();
 
   return (
     <ContextMenu
@@ -25,11 +28,11 @@ export function AccountSettingsContextMenu({
       className="absolute left-full -top-1 z-10"
     >
       <ContextMenuListItem onClick={onClickAccountSettings}>
-        Account Settings
+        {t(I18nKey.ACCOUNT_SETTINGS$SETTINGS)}
       </ContextMenuListItem>
       <ContextMenuSeparator />
       <ContextMenuListItem onClick={onLogout} isDisabled={!isLoggedIn}>
-        Logout
+        {t(I18nKey.ACCOUNT_SETTINGS$LOGOUT)}
       </ContextMenuListItem>
     </ContextMenu>
   );

frontend/src/components/features/project-menu/ProjectMenuCard.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import posthog from "posthog-js";
+import { useTranslation } from "react-i18next";
 import EllipsisH from "#/icons/ellipsis-h.svg?react";
 import { ProjectMenuCardContextMenu } from "./project.menu-card-context-menu";
 import { ProjectMenuDetailsPlaceholder } from "./project-menu-details-placeholder";
@@ -7,6 +8,7 @@ import { ProjectMenuDetails } from "./project-menu-details";
 import { ConnectToGitHubModal } from "#/components/shared/modals/connect-to-github-modal";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { DownloadModal } from "#/components/shared/download-modal";
+import { I18nKey } from "#/i18n/declaration";
 
 interface ProjectMenuCardProps {
   isConnectedToGitHub: boolean;
@@ -21,6 +23,8 @@ export function ProjectMenuCard({
   isConnectedToGitHub,
   githubData,
 }: ProjectMenuCardProps) {
+  const { t } = useTranslation();
+
   const [contextMenuIsOpen, setContextMenuIsOpen] = React.useState(false);
   const [connectToGitHubModalOpen, setConnectToGitHubModalOpen] =
     React.useState(false);
@@ -71,7 +75,7 @@ export function ProjectMenuCard({
         <button
           type="button"
           onClick={toggleMenuVisibility}
-          aria-label="Open project menu"
+          aria-label={t(I18nKey.PROJECT_MENU_CARD$OPEN)}
         >
           <EllipsisH width={36} height={36} />
         </button>

frontend/src/components/features/project-menu/project-menu-details-placeholder.tsx

@@ -30,7 +30,9 @@ export function ProjectMenuDetailsPlaceholder({
             "hover:underline hover:underline-offset-2",
           )}
         >
-          {!isConnectedToGitHub ? "Connect to GitHub" : "Connected"}
+          {!isConnectedToGitHub
+            ? t(I18nKey.PROJECT_MENU_DETAILS_PLACEHOLDER$CONNECT_TO_GITHUB)
+            : t(I18nKey.PROJECT_MENU_DETAILS_PLACEHOLDER$CONNECTED)}
           <CloudConnection width={12} height={12} />
         </span>
       </button>

frontend/src/components/shared/error-toast.tsx

@@ -1,4 +1,6 @@
 import toast, { Toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 
 interface ErrorToastProps {
   id: Toast["id"];
@@ -6,6 +8,8 @@ interface ErrorToastProps {
 }
 
 export function ErrorToast({ id, error }: ErrorToastProps) {
+  const { t } = useTranslation();
+
   return (
     <div className="flex items-center justify-between w-full h-full">
       <span>{error}</span>
@@ -14,7 +18,7 @@ export function ErrorToast({ id, error }: ErrorToastProps) {
         onClick={() => toast.dismiss(id)}
         className="bg-neutral-500 px-1 rounded h-full"
       >
-        Close
+        {t(I18nKey.ERROR_TOAST$CLOSE_BUTTON_LABEL)}
       </button>
     </div>
   );

frontend/src/i18n/translation.json

@@ -930,7 +930,7 @@
     "pt": "Configurações de compartilhamento",
     "tr": "Paylaşım ayarları"
   },
-  "SECURITY$UNKNOWN_ANALYZER_LABEL":{
+  "SECURITY$UNKNOWN_ANALYZER_LABEL": {
     "en": "Unknown security analyzer chosen",
     "es": "Analizador de seguridad desconocido",
     "zh-CN": "选择了未知的安全分析器",
@@ -1852,19 +1852,19 @@
     "fr": "En attente que le client soit prêt...",
     "tr": "İstemcinin hazır olması bekleniyor..."
   },
-  "ACCOUNT_SETTINGS_MODAL$DISCONNECT":{
+  "ACCOUNT_SETTINGS_MODAL$DISCONNECT": {
     "en": "Disconnect",
     "es": "Desconectar"
   },
-  "ACCOUNT_SETTINGS_MODAL$SAVE":{
+  "ACCOUNT_SETTINGS_MODAL$SAVE": {
     "en": "Save",
     "es": "Guardar"
   },
-  "ACCOUNT_SETTINGS_MODAL$CLOSE":{
+  "ACCOUNT_SETTINGS_MODAL$CLOSE": {
     "en": "Close",
     "es": "Cerrar"
   },
-  "ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID":{
+  "ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID": {
     "en": "GitHub token is invalid. Please try again.",
     "es": ""
   },
@@ -1973,12 +1973,18 @@
     "es": "Toda la información guardada en tu configuración de IA será eliminada, incluyendo tus API Keys"
   },
   "PROJECT_MENU_DETAILS_PLACEHOLDER$NEW_PROJECT_LABEL": {
-    "en":"New Project",
-    "es":"Nuevo proyecto"
+    "en": "New Project",
+    "es": "Nuevo proyecto"
+  },
+  "PROJECT_MENU_DETAILS_PLACEHOLDER$CONNECT_TO_GITHUB": {
+    "en": "Connect to GitHub"
+  },
+  "PROJECT_MENU_DETAILS_PLACEHOLDER$CONNECTED": {
+    "en": "Connected"
   },
   "PROJECT_MENU_DETAILS$AGO_LABEL": {
-    "en":"ago",
-    "es":"atrás"
+    "en": "ago",
+    "es": "atrás"
   },
   "STATUS$ERROR_LLM_AUTHENTICATION": {
     "en": "Error authenticating with the LLM provider. Please check your API key",
@@ -2005,6 +2011,39 @@
     "en": "Download files",
     "es": "Descargar archivos"
   },
+  "PROJECT_MENU_CARD$OPEN": {
+    "en": "Open project menu"
+  },
+  "ACTION_BUTTON$RESUME": {
+    "en": "Resume the agent task"
+  },
+  "ACTION_BUTTON$PAUSE": {
+    "en": "Pause the current task"
+  },
+  "BROWSER$SCREENSHOT_ALT": {
+    "en": "Browser Screenshot"
+  },
+  "ACCOUNT_SETTINGS$SETTINGS": {
+    "en": "Account Settings"
+  },
+  "ACCOUNT_SETTINGS$LOGOUT": {
+    "en": "Logout"
+  },
+  "ERROR_TOAST$CLOSE_BUTTON_LABEL": {
+    "en": "Close"
+  },
+  "FILE_EXPLORER$UPLOAD": {
+    "en": "Upload File"
+  },
+  "FILE_EXPLORER$REFRESH_WORKSPACE": {
+    "en": "Refresh workspace"
+  },
+  "FILE_EXPLORER$OPEN_WORKSPACE": {
+    "en": "Open workspace"
+  },
+  "FILE_EXPLORER$CLOSE_WORKSPACE": {
+    "en": "Close workspace"
+  },
   "ACTION_MESSAGE$RUN": {
     "en": "Running a bash command"
   },