Ensure labels on nav-buttons can be translated (#12084)

- Introduce using i18n by importing JslibModule - Use i18n within markup - Ensure navButtons.labels is a key that is present in the en/messages.json Co-authored-by: Daniel James Smith <[email protected]>
bitwarden · Nov 21, 2024 · 228817b · 228817b
1 parent 3732f12
commit 228817b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -313,6 +313,10 @@ export default {
               back: "Back",
               loading: "Loading",
               search: "Search",
+              vault: "Vault",
+              generator: "Generator",
+              send: "Send",
+              settings: "Settings",
             });
           },
         },

diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -28,7 +28,7 @@
               aria-hidden="true"
             ></i>
             <span class="tw-truncate tw-max-w-full">
-              {{ button.label }}
+              {{ button.label | i18n }}
             </span>
           </button>
         </li>

diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
@@ -2,39 +2,40 @@ import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { LinkModule } from "@bitwarden/components";
 
 @Component({
   selector: "popup-tab-navigation",
   templateUrl: "popup-tab-navigation.component.html",
   standalone: true,
-  imports: [CommonModule, LinkModule, RouterModule],
+  imports: [CommonModule, LinkModule, RouterModule, JslibModule],
   host: {
     class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col",
   },
 })
 export class PopupTabNavigationComponent {
   navButtons = [
     {
-      label: "Vault",
+      label: "vault",
       page: "/tabs/vault",
       iconKey: "lock",
       iconKeyActive: "lock-f",
     },
     {
-      label: "Generator",
+      label: "generator",
       page: "/tabs/generator",
       iconKey: "generate",
       iconKeyActive: "generate-f",
     },
     {
-      label: "Send",
+      label: "send",
       page: "/tabs/send",
       iconKey: "send",
       iconKeyActive: "send-f",
     },
     {
-      label: "Settings",
+      label: "settings",
       page: "/tabs/settings",
       iconKey: "cog",
       iconKeyActive: "cog-f",