PM-19281 localize relevant notification bar text (#14327)

* PM-19281 localize todo text * update storybook
2025-12-06 00:13:28 +00:00 · 2025-04-23 09:59:05 -04:00
parent 60fe8fa7b0
commit 8e1dfb7d21
9 changed files with 27 additions and 13 deletions
--- a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
@@ -8,24 +8,24 @@ export function CipherAction({
  handleAction = () => {
    /* no-op */
  },
+  i18n,
  notificationType,
  theme,
 }: {
  handleAction?: (e: Event) => void;
+  i18n: { [key: string]: string };
  notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
  theme: Theme;
 }) {
  return notificationType === NotificationTypes.Change
    ? BadgeButton({
        buttonAction: handleAction,
-        // @TODO localize
-        buttonText: "Update",
+        buttonText: i18n.notificationUpdate,
        theme,
      })
    : EditButton({
        buttonAction: handleAction,
-        // @TODO localize
-        buttonText: "Edit",
+        buttonText: i18n.notificationEdit,
        theme,
      });
 }
--- a/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
@@ -19,11 +19,13 @@ const cipherIconWidth = "24px";
 export function CipherItem({
  cipher,
  handleAction,
+  i18n,
  notificationType,
  theme = ThemeTypes.Light,
 }: {
  cipher: NotificationCipherData;
  handleAction?: (e: Event) => void;
+  i18n: { [key: string]: string };
  notificationType?: NotificationType;
  theme: Theme;
 }) {
@@ -34,7 +36,7 @@ export function CipherItem({

  if (notificationType === NotificationTypes.Change || notificationType === NotificationTypes.Add) {
    cipherActionButton = html`<div>
-      ${CipherAction({ handleAction, notificationType, theme })}
+      ${CipherAction({ handleAction, i18n, notificationType, theme })}
    </div>`;
  }

--- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts
@@ -7,6 +7,7 @@ import { CipherAction } from "../../cipher/cipher-action";

 type Args = {
  handleAction?: (e: Event) => void;
+  i18n: { [key: string]: string };
  notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
  theme: Theme;
 };
--- a/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts
@@ -10,6 +10,7 @@ import { NotificationBody } from "../../notification/body";

 type Args = {
  ciphers: NotificationCipherData[];
+  i18n: { [key: string]: string };
  notificationType: NotificationType;
  theme: Theme;
  handleEditOrUpdateAction: (e: Event) => void;
--- a/apps/browser/src/autofill/content/components/notification/body.ts
+++ b/apps/browser/src/autofill/content/components/notification/body.ts
@@ -17,12 +17,14 @@ const { css } = createEmotion({

 export function NotificationBody({
  ciphers = [],
+  i18n,
  notificationType,
  theme = ThemeTypes.Light,
  handleEditOrUpdateAction,
 }: {
  ciphers?: NotificationCipherData[];
  customClasses?: string[];
+  i18n: { [key: string]: string };
  notificationType?: NotificationType;
  theme: Theme;
  handleEditOrUpdateAction: (e: Event) => void;
@@ -37,6 +39,7 @@ export function NotificationBody({
          theme,
          children: CipherItem({
            cipher,
+            i18n,
            notificationType,
            theme,
            handleAction: handleEditOrUpdateAction,
--- a/apps/browser/src/autofill/content/components/notification/button-row.ts
+++ b/apps/browser/src/autofill/content/components/notification/button-row.ts
@@ -22,17 +22,19 @@ function getVaultIconByProductTier(productTierType?: ProductTierType): Option["i
 }

 export type NotificationButtonRowProps = {
-  theme: Theme;
+  folders?: FolderView[];
+  i18n: { [key: string]: string };
+  organizations?: OrgView[];
  primaryButton: {
    text: string;
    handlePrimaryButtonClick: (args: any) => void;
  };
-  folders?: FolderView[];
-  organizations?: OrgView[];
+  theme: Theme;
 };

 export function NotificationButtonRow({
  folders,
+  i18n,
  organizations,
  primaryButton,
  theme,
@@ -40,7 +42,7 @@ export function NotificationButtonRow({
  const currentUserVaultOption: Option = {
    icon: User,
    default: true,
-    text: "My vault", // @TODO localize
+    text: i18n.myVault,
    value: "0",
  };
  const organizationOptions: Option[] = organizations?.length
@@ -84,7 +86,7 @@ export function NotificationButtonRow({
          ? [
              {
                id: "organization",
-                label: "Vault", // @TODO localize
+                label: i18n.vault,
                options: organizationOptions,
              },
            ]
@@ -93,7 +95,7 @@ export function NotificationButtonRow({
          ? [
              {
                id: "folder",
-                label: "Folder", // @TODO localize
+                label: i18n.folder,
                options: folderOptions,
              },
            ]
--- a/apps/browser/src/autofill/content/components/notification/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/container.ts
@@ -59,6 +59,7 @@ export function NotificationContainer({
            ciphers,
            notificationType: type,
            theme,
+            i18n,
          })
        : null}
      ${NotificationFooter({
--- a/apps/browser/src/autofill/content/components/notification/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/footer.ts
@@ -38,6 +38,7 @@ export function NotificationFooter({
        ? NotificationButtonRow({
            folders,
            organizations,
+            i18n,
            primaryButton: {
              handlePrimaryButtonClick: handleSaveAction,
              text: primaryButtonText,
--- a/apps/browser/src/autofill/notification/bar.ts
+++ b/apps/browser/src/autofill/notification/bar.ts
@@ -53,6 +53,7 @@ function getI18n() {
  return {
    appName: chrome.i18n.getMessage("appName"),
    close: chrome.i18n.getMessage("close"),
+    collection: chrome.i18n.getMessage("collection"),
    folder: chrome.i18n.getMessage("folder"),
    loginSaveSuccess: chrome.i18n.getMessage("loginSaveSuccess"),
    loginSaveSuccessDetails: chrome.i18n.getMessage("loginSaveSuccessDetails"),
@@ -63,10 +64,11 @@ function getI18n() {
    nextSecurityTaskAction: chrome.i18n.getMessage("nextSecurityTaskAction"),
    newItem: chrome.i18n.getMessage("newItem"),
    never: chrome.i18n.getMessage("never"),
+    myVault: chrome.i18n.getMessage("myVault"),
    notificationAddDesc: chrome.i18n.getMessage("notificationAddDesc"),
    notificationAddSave: chrome.i18n.getMessage("notificationAddSave"),
    notificationChangeDesc: chrome.i18n.getMessage("notificationChangeDesc"),
-    notificationChangeSave: chrome.i18n.getMessage("notificationChangeSave"),
+    notificationUpdate: chrome.i18n.getMessage("notificationChangeSave"),
    notificationEdit: chrome.i18n.getMessage("edit"),
    notificationUnlock: chrome.i18n.getMessage("notificationUnlock"),
    notificationUnlockDesc: chrome.i18n.getMessage("notificationUnlockDesc"),
@@ -78,6 +80,7 @@ function getI18n() {
    typeLogin: chrome.i18n.getMessage("typeLogin"),
    updateLoginAction: chrome.i18n.getMessage("updateLoginAction"),
    updateLoginPrompt: chrome.i18n.getMessage("updateLoginPrompt"),
+    vault: chrome.i18n.getMessage("vault"),
    view: chrome.i18n.getMessage("view"),
  };
 }
@@ -200,7 +203,7 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
    const changeTemplate = document.getElementById("template-change") as HTMLTemplateElement;

    const changeButton = findElementById<HTMLSelectElement>(changeTemplate, "change-save");
-    changeButton.textContent = i18n.notificationChangeSave;
+    changeButton.textContent = i18n.notificationUpdate;

    const changeEditButton = findElementById<HTMLButtonElement>(changeTemplate, "change-edit");
    changeEditButton.textContent = i18n.notificationEdit;