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

* PM-19281 localize todo text

* update storybook

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: i18n.notificationUpdate,
-        buttonText: "Update",
         theme,
       })
     : EditButton({
         buttonAction: handleAction,
-        // @TODO localize
+        buttonText: i18n.notificationEdit,
-        buttonText: "Edit",
         theme,
       });
 }

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>`;
   }
 

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;
 };

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;

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,

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[];
+  theme: Theme;
-  organizations?: OrgView[];
 };
 
 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,
               },
             ]

apps/browser/src/autofill/content/components/notification/container.ts

@@ -59,6 +59,7 @@ export function NotificationContainer({
             ciphers,
             notificationType: type,
             theme,
+            i18n,
           })
         : null}
       ${NotificationFooter({

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,

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;