[PM-10437][PM-10438] Copy toast message (#10366)

* add option to include a label for copy success message

* add label text to copy success messages for all cipher types

libs/angular/src/directives/copy-click.directive.spec.ts

@@ -12,12 +12,14 @@ import { CopyClickDirective } from "./copy-click.directive";
     <button appCopyClick="no toast shown" #noToast></button>
     <button appCopyClick="info toast shown" showToast="info" #infoToast></button>
     <button appCopyClick="success toast shown" showToast #successToast></button>
+    <button appCopyClick="toast with label" showToast valueLabel="Content" #toastWithLabel></button>
   `,
 })
 class TestCopyClickComponent {
   @ViewChild("noToast") noToastButton: ElementRef<HTMLButtonElement>;
   @ViewChild("infoToast") infoToastButton: ElementRef<HTMLButtonElement>;
   @ViewChild("successToast") successToastButton: ElementRef<HTMLButtonElement>;
+  @ViewChild("toastWithLabel") toastWithLabelButton: ElementRef<HTMLButtonElement>;
 }
 
 describe("CopyClickDirective", () => {
@@ -32,7 +34,17 @@ describe("CopyClickDirective", () => {
     await TestBed.configureTestingModule({
       declarations: [CopyClickDirective, TestCopyClickComponent],
       providers: [
-        { provide: I18nService, useValue: { t: (key: string) => key } },
+        {
+          provide: I18nService,
+          useValue: {
+            t: (key: string, ...rest: string[]) => {
+              if (rest?.length) {
+                return `${key} ${rest.join("")}`;
+              }
+              return key;
+            },
+          },
+        },
         { provide: PlatformUtilsService, useValue: { copyToClipboard } },
         { provide: ToastService, useValue: { showToast } },
       ],
@@ -87,4 +99,16 @@ describe("CopyClickDirective", () => {
       variant: "info",
     });
   });
+
+  it('includes label in toast message when "copyLabel" is set', () => {
+    const toastWithLabelButton = fixture.componentInstance.toastWithLabelButton.nativeElement;
+
+    toastWithLabelButton.click();
+
+    expect(showToast).toHaveBeenCalledWith({
+      message: "valueCopied Content",
+      title: null,
+      variant: "success",
+    });
+  });
 });

libs/angular/src/directives/copy-click.directive.ts

@@ -20,6 +20,12 @@ export class CopyClickDirective {
 
   @Input("appCopyClick") valueToCopy = "";
 
+  /**
+   * When set, the toast displayed will show `<valueLabel> copied`
+   * instead of the default messaging.
+   */
+  @Input() valueLabel: string;
+
   /**
    * When set without a value, a success toast will be shown when the value is copied
    * @example
@@ -47,10 +53,14 @@ export class CopyClickDirective {
     this.platformUtilsService.copyToClipboard(this.valueToCopy);
 
     if (this._showToast) {
+      const message = this.valueLabel
+        ? this.i18nService.t("valueCopied", this.valueLabel)
+        : this.i18nService.t("copySuccessful");
+
       this.toastService.showToast({
         variant: this.toastVariant,
         title: null,
-        message: this.i18nService.t("copySuccessful"),
+        message,
       });
     }
   }

libs/vault/src/cipher-view/additional-options/additional-options.component.html

@@ -13,6 +13,7 @@
         type="button"
         [appCopyClick]="notes"
         showToast
+        [valueLabel]="'note' | i18n"
         [appA11yTitle]="'copyValue' | i18n"
       ></button>
     </bit-form-field>

libs/vault/src/cipher-view/card-details/card-details-view.component.html

@@ -37,6 +37,7 @@
         type="button"
         [appCopyClick]="card.number"
         showToast
+        [valueLabel]="'number' | i18n"
         [appA11yTitle]="'copyValue' | i18n"
         data-testid="copy-number"
       ></button>
@@ -75,6 +76,7 @@
         type="button"
         [appCopyClick]="card.code"
         showToast
+        [valueLabel]="'securityCode' | i18n"
         [appA11yTitle]="'copyValue' | i18n"
         data-testid="copy-code"
       ></button>

libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html

@@ -17,6 +17,7 @@
           type="button"
           [appCopyClick]="field.value"
           showToast
+          [valueLabel]="field.name"
           [appA11yTitle]="'copyValue' | i18n"
         ></button>
       </bit-form-field>
@@ -30,6 +31,7 @@
           type="button"
           [appCopyClick]="field.value"
           showToast
+          [valueLabel]="field.name"
           [appA11yTitle]="'copyValue' | i18n"
         ></button>
       </bit-form-field>

libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html

@@ -14,6 +14,7 @@
         [appA11yTitle]="'copyName' | i18n"
         [appCopyClick]="cipher.identity.fullName"
         showToast
+        [valueLabel]="'name' | i18n"
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="cipher.identity.username">
@@ -26,6 +27,7 @@
         [appA11yTitle]="'copyUsername' | i18n"
         [appCopyClick]="cipher.identity.username"
         showToast
+        [valueLabel]="'username' | i18n"
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="cipher.identity.company">
@@ -38,6 +40,7 @@
         [appA11yTitle]="'copyCompany' | i18n"
         [appCopyClick]="cipher.identity.company"
         showToast
+        [valueLabel]="'company' | i18n"
       ></button>
     </bit-form-field>
   </bit-card>
@@ -66,6 +69,7 @@
         [appA11yTitle]="'copySSN' | i18n"
         [appCopyClick]="cipher.identity.ssn"
         showToast
+        [valueLabel]="'ssn' | i18n"
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="cipher.identity.passportNumber">
@@ -91,6 +95,7 @@
         [appA11yTitle]="'copyPassportNumber' | i18n"
         [appCopyClick]="cipher.identity.passportNumber"
         showToast
+        [valueLabel]="'passportNumber' | i18n"
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="cipher.identity.licenseNumber">
@@ -103,6 +108,7 @@
         [appA11yTitle]="'copyLicenseNumber' | i18n"
         [appCopyClick]="cipher.identity.licenseNumber"
         showToast
+        [valueLabel]="'licenseNumber' | i18n"
       ></button>
     </bit-form-field>
   </bit-card>
@@ -124,6 +130,7 @@
         [appA11yTitle]="'copyEmail' | i18n"
         [appCopyClick]="cipher.identity.email"
         showToast
+        [valueLabel]="'email' | i18n"
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="cipher.identity.phone">
@@ -136,6 +143,7 @@
         [appA11yTitle]="'copyPhone' | i18n"
         [appCopyClick]="cipher.identity.phone"
         showToast
+        [valueLabel]="'phone' | i18n"
       ></button>
     </bit-form-field>
     <bit-form-field *ngIf="addressFields">
@@ -155,6 +163,7 @@
         [appA11yTitle]="'copyAddress' | i18n"
         [appCopyClick]="addressFields"
         showToast
+        [valueLabel]="'address' | i18n"
       ></button>
     </bit-form-field>
   </bit-card>