From 783759ad347d62473c7d2f0e478e9e7c43bdbdef Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Wed, 4 Oct 2023 17:13:31 -0700
Subject: [PATCH] [CL-134] Add logging in case of mismatch template tags and
 i18n-parts

---
 libs/components/src/i18n/i18n.component.ts | 10 +++++++++-
 libs/components/src/i18n/i18n.stories.ts   |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/i18n/i18n.component.ts b/libs/components/src/i18n/i18n.component.ts
index edf12c5fa1c..87e91d09c17 100644
--- a/libs/components/src/i18n/i18n.component.ts
+++ b/libs/components/src/i18n/i18n.component.ts
@@ -8,6 +8,7 @@ import {
 } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 
 import { SharedModule } from "../shared";
 
@@ -68,7 +69,7 @@ export class I18nComponent implements AfterContentInit {
 
   protected translationParts: I18nStringPart[] = [];
 
-  constructor(private i18nService: I18nService) {}
+  constructor(private i18nService: I18nService, private logService: LogService) {}
 
   ngAfterContentInit() {
     const translatedText = this.i18nService.t(
@@ -79,6 +80,13 @@ export class I18nComponent implements AfterContentInit {
     );
 
     this.translationParts = this.parseTranslatedString(translatedText);
+
+    if (this.translationParts.length !== this.templateTags.length) {
+      this.logService.warning(
+        `The translation for "${this.translationKey}" has ${this.translationParts.length} template tags(s), but ${this.templateTags.length} bit-i18n-part directive(s) were found.`
+      );
+    }
+
     // Assign any templateRefs to the translation parts
     this.templateTags.forEach((tag, index) => {
       this.translationParts.forEach((part) => {
diff --git a/libs/components/src/i18n/i18n.stories.ts b/libs/components/src/i18n/i18n.stories.ts
index 72a69eab81a..b0bf069dc7a 100644
--- a/libs/components/src/i18n/i18n.stories.ts
+++ b/libs/components/src/i18n/i18n.stories.ts
@@ -1,6 +1,8 @@
 import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { ConsoleLogService } from "@bitwarden/common/platform/services/console-log.service";
 
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -28,6 +30,10 @@ export default {
             });
           },
         },
+        {
+          provide: LogService,
+          useFactory: () => new ConsoleLogService(true),
+        },
       ],
     }),
   ],