[PM-16858] - adjust generator dialog action button to match browser extension UI (#12788)

* adjust generator dialog buttons to match browser extension UI

* put dialog label into generator config

* fix types. remove i18n key

* use event emitted pattern for getting algorithm config

* favor arrow function

* move function call

* append key to i18n prop

* fix test

libs/tools/generator/components/src/password-generator.component.ts

@@ -93,6 +93,10 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
   @Output()
   readonly onGenerated = new EventEmitter<GeneratedCredential>();
 
+  /** emits algorithm info when the selected algorithm changes */
+  @Output()
+  readonly onAlgorithm = new EventEmitter<AlgorithmInfo>();
+
   async ngOnInit() {
     if (this.userId) {
       this.userId$.next(this.userId);
@@ -185,6 +189,7 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
         // template bindings refresh immediately
         this.zone.run(() => {
           this.algorithm$.next(algorithm);
+          this.onAlgorithm.next(algorithm);
         });
       });
 

libs/tools/generator/components/src/username-generator.component.ts

@@ -78,6 +78,10 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
   @Output()
   readonly onGenerated = new EventEmitter<GeneratedCredential>();
 
+  /** emits algorithm info when the selected algorithm changes */
+  @Output()
+  readonly onAlgorithm = new EventEmitter<AlgorithmInfo>();
+
   /** Removes bottom margin from internal elements */
   @Input({ transform: coerceBooleanProperty }) disableMargin = false;
 
@@ -247,6 +251,7 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
         // template bindings refresh immediately
         this.zone.run(() => {
           this.algorithm$.next(algorithm);
+          this.onAlgorithm.next(algorithm);
         });
       });
 

libs/tools/generator/core/src/data/generators.ts

@@ -58,6 +58,7 @@ const PASSPHRASE: CredentialGeneratorConfiguration<
   generateKey: "generatePassphrase",
   generatedValueKey: "passphrase",
   copyKey: "copyPassphrase",
+  useGeneratedValueKey: "useThisPassphrase",
   onlyOnRequest: false,
   request: [],
   engine: {
@@ -119,6 +120,7 @@ const PASSWORD: CredentialGeneratorConfiguration<
   generateKey: "generatePassword",
   generatedValueKey: "password",
   copyKey: "copyPassword",
+  useGeneratedValueKey: "useThisPassword",
   onlyOnRequest: false,
   request: [],
   engine: {
@@ -195,6 +197,7 @@ const USERNAME: CredentialGeneratorConfiguration<EffUsernameGenerationOptions, N
     generateKey: "generateUsername",
     generatedValueKey: "username",
     copyKey: "copyUsername",
+    useGeneratedValueKey: "useThisUsername",
     onlyOnRequest: false,
     request: [],
     engine: {
@@ -247,6 +250,7 @@ const CATCHALL: CredentialGeneratorConfiguration<CatchallGenerationOptions, NoPo
     generateKey: "generateEmail",
     generatedValueKey: "email",
     copyKey: "copyEmail",
+    useGeneratedValueKey: "useThisEmail",
     onlyOnRequest: false,
     request: [],
     engine: {
@@ -302,6 +306,7 @@ const SUBADDRESS: CredentialGeneratorConfiguration<SubaddressGenerationOptions,
     generateKey: "generateEmail",
     generatedValueKey: "email",
     copyKey: "copyEmail",
+    useGeneratedValueKey: "useThisEmail",
     onlyOnRequest: false,
     request: [],
     engine: {
@@ -359,6 +364,7 @@ export function toCredentialGeneratorConfiguration<Settings extends ApiSettings
     generateKey: "generateEmail",
     generatedValueKey: "email",
     copyKey: "copyEmail",
+    useGeneratedValueKey: "useThisEmail",
     onlyOnRequest: true,
     request: configuration.forwarder.request,
     engine: {

libs/tools/generator/core/src/services/credential-generator.service.spec.ts

@@ -74,6 +74,7 @@ const SomeNameKey = "passphraseKey";
 const SomeGenerateKey = "generateKey";
 const SomeGeneratedValueKey = "generatedValueKey";
 const SomeCopyKey = "copyKey";
+const SomeUseGeneratedValueKey = "useGeneratedValueKey";
 
 // fake the configuration
 const SomeConfiguration: CredentialGeneratorConfiguration<SomeSettings, SomePolicy> = {
@@ -83,6 +84,7 @@ const SomeConfiguration: CredentialGeneratorConfiguration<SomeSettings, SomePoli
   generateKey: SomeGenerateKey,
   generatedValueKey: SomeGeneratedValueKey,
   copyKey: SomeCopyKey,
+  useGeneratedValueKey: SomeUseGeneratedValueKey,
   onlyOnRequest: false,
   request: [],
   engine: {

libs/tools/generator/core/src/services/credential-generator.service.ts

@@ -258,6 +258,7 @@ export class CredentialGeneratorService {
       generate: this.i18nService.t(generator.generateKey),
       generatedValue: this.i18nService.t(generator.generatedValueKey),
       copy: this.i18nService.t(generator.copyKey),
+      useGeneratedValue: this.i18nService.t(generator.useGeneratedValueKey),
       onlyOnRequest: generator.onlyOnRequest,
       request: generator.request,
     };

libs/tools/generator/core/src/types/credential-generator-configuration.ts

@@ -37,6 +37,9 @@ export type AlgorithmInfo = {
   /* Localized copy button label */
   copy: string;
 
+  /* Localized dialog button label */
+  useGeneratedValue: string;
+
   /* Localized generated value label */
   generatedValue: string;
 
@@ -82,6 +85,9 @@ export type CredentialGeneratorInfo = {
   /* Localization key for the copy button label */
   copyKey: string;
 
+  /* Localized "use generated credential" button label */
+  useGeneratedValueKey: string;
+
   /* Localization key for describing values generated by this generator */
   generatedValueKey: string;