From c780cbc77eb4dabeaeb32bd256b0c293f6083d74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=9C=A8=20Audrey=20=E2=9C=A8?= <ajensen@bitwarden.com>
Date: Fri, 25 Oct 2024 17:43:49 -0400
Subject: [PATCH] use `valueLabel` with `appCopyClick` directive (#11718)

* add `valueLabel` to `appCopyClick` directives
* move generated value description to the configuration
---
 .../src/credential-generator.component.html        |  1 +
 .../src/credential-generator.component.ts          |  8 ++++++++
 .../src/password-generator.component.html          |  1 +
 .../components/src/password-generator.component.ts |  8 ++++++++
 .../src/username-generator.component.html          |  1 +
 .../components/src/username-generator.component.ts |  8 ++++++++
 libs/tools/generator/core/src/data/generators.ts   |  6 ++++++
 .../services/credential-generator.service.spec.ts  |  2 ++
 .../src/services/credential-generator.service.ts   |  1 +
 .../types/credential-generator-configuration.ts    | 14 ++++++++++----
 10 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/libs/tools/generator/components/src/credential-generator.component.html b/libs/tools/generator/components/src/credential-generator.component.html
index 737e32fa1f..f580b75f1b 100644
--- a/libs/tools/generator/components/src/credential-generator.component.html
+++ b/libs/tools/generator/components/src/credential-generator.component.html
@@ -32,6 +32,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     ></button>
   </div>
 </bit-card>
diff --git a/libs/tools/generator/components/src/credential-generator.component.ts b/libs/tools/generator/components/src/credential-generator.component.ts
index e800ce4bd3..579d196a7a 100644
--- a/libs/tools/generator/components/src/credential-generator.component.ts
+++ b/libs/tools/generator/components/src/credential-generator.component.ts
@@ -468,6 +468,14 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   /** Emits hint key for the currently selected credential type */
   protected credentialTypeHint$ = new ReplaySubject<string>(1);
 
diff --git a/libs/tools/generator/components/src/password-generator.component.html b/libs/tools/generator/components/src/password-generator.component.html
index 96aa8f00b1..6726df3085 100644
--- a/libs/tools/generator/components/src/password-generator.component.html
+++ b/libs/tools/generator/components/src/password-generator.component.html
@@ -30,6 +30,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     ></button>
   </div>
 </bit-card>
diff --git a/libs/tools/generator/components/src/password-generator.component.ts b/libs/tools/generator/components/src/password-generator.component.ts
index 60c3f62953..8566edf466 100644
--- a/libs/tools/generator/components/src/password-generator.component.ts
+++ b/libs/tools/generator/components/src/password-generator.component.ts
@@ -233,6 +233,14 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   private toOptions(algorithms: AlgorithmInfo[]) {
     const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
       value: algorithm.id,
diff --git a/libs/tools/generator/components/src/username-generator.component.html b/libs/tools/generator/components/src/username-generator.component.html
index 18b29a6184..36aaae57ce 100644
--- a/libs/tools/generator/components/src/username-generator.component.html
+++ b/libs/tools/generator/components/src/username-generator.component.html
@@ -19,6 +19,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     >
       {{ credentialTypeCopyLabel$ | async }}
     </button>
diff --git a/libs/tools/generator/components/src/username-generator.component.ts b/libs/tools/generator/components/src/username-generator.component.ts
index 5187a313d1..6518ee51ed 100644
--- a/libs/tools/generator/components/src/username-generator.component.ts
+++ b/libs/tools/generator/components/src/username-generator.component.ts
@@ -390,6 +390,14 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   /** Emits hint key for the currently selected credential type */
   protected credentialTypeHint$ = new ReplaySubject<string>(1);
 
diff --git a/libs/tools/generator/core/src/data/generators.ts b/libs/tools/generator/core/src/data/generators.ts
index d86eb52a8f..6090fe789c 100644
--- a/libs/tools/generator/core/src/data/generators.ts
+++ b/libs/tools/generator/core/src/data/generators.ts
@@ -53,6 +53,7 @@ const PASSPHRASE = Object.freeze({
   category: "password",
   nameKey: "passphrase",
   generateKey: "generatePassphrase",
+  generatedValueKey: "passphrase",
   copyKey: "copyPassphrase",
   onlyOnRequest: false,
   request: [],
@@ -95,6 +96,7 @@ const PASSWORD = Object.freeze({
   category: "password",
   nameKey: "password",
   generateKey: "generatePassword",
+  generatedValueKey: "password",
   copyKey: "copyPassword",
   onlyOnRequest: false,
   request: [],
@@ -145,6 +147,7 @@ const USERNAME = Object.freeze({
   category: "username",
   nameKey: "randomWord",
   generateKey: "generateUsername",
+  generatedValueKey: "username",
   copyKey: "copyUsername",
   onlyOnRequest: false,
   request: [],
@@ -181,6 +184,7 @@ const CATCHALL = Object.freeze({
   nameKey: "catchallEmail",
   descriptionKey: "catchallEmailDesc",
   generateKey: "generateEmail",
+  generatedValueKey: "email",
   copyKey: "copyEmail",
   onlyOnRequest: false,
   request: [],
@@ -217,6 +221,7 @@ const SUBADDRESS = Object.freeze({
   nameKey: "plusAddressedEmail",
   descriptionKey: "plusAddressedEmailDesc",
   generateKey: "generateEmail",
+  generatedValueKey: "email",
   copyKey: "copyEmail",
   onlyOnRequest: false,
   request: [],
@@ -256,6 +261,7 @@ export function toCredentialGeneratorConfiguration<Settings extends ApiSettings
     nameKey: configuration.name,
     descriptionKey: "forwardedEmailDesc",
     generateKey: "generateEmail",
+    generatedValueKey: "email",
     copyKey: "copyEmail",
     onlyOnRequest: true,
     request: configuration.forwarder.request,
diff --git a/libs/tools/generator/core/src/services/credential-generator.service.spec.ts b/libs/tools/generator/core/src/services/credential-generator.service.spec.ts
index edb817361d..225745e5f9 100644
--- a/libs/tools/generator/core/src/services/credential-generator.service.spec.ts
+++ b/libs/tools/generator/core/src/services/credential-generator.service.spec.ts
@@ -73,6 +73,7 @@ const SomeAlgorithm = "passphrase";
 const SomeCategory = "password";
 const SomeNameKey = "passphraseKey";
 const SomeGenerateKey = "generateKey";
+const SomeGeneratedValueKey = "generatedValueKey";
 const SomeCopyKey = "copyKey";
 
 // fake the configuration
@@ -81,6 +82,7 @@ const SomeConfiguration: CredentialGeneratorConfiguration<SomeSettings, SomePoli
   category: SomeCategory,
   nameKey: SomeNameKey,
   generateKey: SomeGenerateKey,
+  generatedValueKey: SomeGeneratedValueKey,
   copyKey: SomeCopyKey,
   onlyOnRequest: false,
   request: [],
diff --git a/libs/tools/generator/core/src/services/credential-generator.service.ts b/libs/tools/generator/core/src/services/credential-generator.service.ts
index ebcc207715..04413ba2c0 100644
--- a/libs/tools/generator/core/src/services/credential-generator.service.ts
+++ b/libs/tools/generator/core/src/services/credential-generator.service.ts
@@ -258,6 +258,7 @@ export class CredentialGeneratorService {
       category: generator.category,
       name: integration ? integration.name : this.i18nService.t(generator.nameKey),
       generate: this.i18nService.t(generator.generateKey),
+      generatedValue: this.i18nService.t(generator.generatedValueKey),
       copy: this.i18nService.t(generator.copyKey),
       onlyOnRequest: generator.onlyOnRequest,
       request: generator.request,
diff --git a/libs/tools/generator/core/src/types/credential-generator-configuration.ts b/libs/tools/generator/core/src/types/credential-generator-configuration.ts
index 1798323ec6..22bfa31441 100644
--- a/libs/tools/generator/core/src/types/credential-generator-configuration.ts
+++ b/libs/tools/generator/core/src/types/credential-generator-configuration.ts
@@ -37,6 +37,9 @@ export type AlgorithmInfo = {
   /* Localized copy button label */
   copy: string;
 
+  /* Localized generated value label */
+  generatedValue: string;
+
   /** Localized algorithm description */
   description?: string;
 
@@ -67,18 +70,21 @@ export type CredentialGeneratorInfo = {
   /** The kind of credential generated by this configuration */
   category: CredentialCategory;
 
-  /** Key used to localize the credential name in the I18nService */
+  /** Localization key for the credential name */
   nameKey: string;
 
-  /** Key used to localize the credential description in the I18nService  */
+  /** Localization key for the credential description*/
   descriptionKey?: string;
 
-  /* Localized generate button label */
+  /* Localization key for the generate command label */
   generateKey: string;
 
-  /* Localized copy button label */
+  /* Localization key for the copy button label */
   copyKey: string;
 
+  /* Localization key for describing values generated by this generator */
+  generatedValueKey: string;
+
   /** When true, credential generation must be explicitly requested.
    *  @remarks this property is useful when credential generation
    *   carries side effects, such as configuring a service external