From 8fcf717ec4661130732bd56b67b975bf70f67ab4 Mon Sep 17 00:00:00 2001 From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com> Date: Mon, 5 Aug 2024 13:00:29 -0500 Subject: [PATCH] [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 --- .../directives/copy-click.directive.spec.ts | 26 ++++++++++++++++++- .../src/directives/copy-click.directive.ts | 12 ++++++++- .../additional-options.component.html | 1 + .../card-details-view.component.html | 2 ++ .../custom-fields-v2.component.html | 2 ++ .../view-identity-sections.component.html | 9 +++++++ 6 files changed, 50 insertions(+), 2 deletions(-) diff --git a/libs/angular/src/directives/copy-click.directive.spec.ts b/libs/angular/src/directives/copy-click.directive.spec.ts index a64b6658b3..29466f7fbe 100644 --- a/libs/angular/src/directives/copy-click.directive.spec.ts +++ b/libs/angular/src/directives/copy-click.directive.spec.ts @@ -12,12 +12,14 @@ import { CopyClickDirective } from "./copy-click.directive"; + `, }) class TestCopyClickComponent { @ViewChild("noToast") noToastButton: ElementRef; @ViewChild("infoToast") infoToastButton: ElementRef; @ViewChild("successToast") successToastButton: ElementRef; + @ViewChild("toastWithLabel") toastWithLabelButton: ElementRef; } 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", + }); + }); }); diff --git a/libs/angular/src/directives/copy-click.directive.ts b/libs/angular/src/directives/copy-click.directive.ts index 0d764c95ed..c0b7fac02a 100644 --- a/libs/angular/src/directives/copy-click.directive.ts +++ b/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 ` 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, }); } } diff --git a/libs/vault/src/cipher-view/additional-options/additional-options.component.html b/libs/vault/src/cipher-view/additional-options/additional-options.component.html index 1f33bb7882..59b2753945 100644 --- a/libs/vault/src/cipher-view/additional-options/additional-options.component.html +++ b/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" > diff --git a/libs/vault/src/cipher-view/card-details/card-details-view.component.html b/libs/vault/src/cipher-view/card-details/card-details-view.component.html index 108b148016..588849eaee 100644 --- a/libs/vault/src/cipher-view/card-details/card-details-view.component.html +++ b/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" > @@ -75,6 +76,7 @@ type="button" [appCopyClick]="card.code" showToast + [valueLabel]="'securityCode' | i18n" [appA11yTitle]="'copyValue' | i18n" data-testid="copy-code" > diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html index 7ffec66427..d4c29cf262 100644 --- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html +++ b/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" > @@ -30,6 +31,7 @@ type="button" [appCopyClick]="field.value" showToast + [valueLabel]="field.name" [appA11yTitle]="'copyValue' | i18n" > diff --git a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html index bd6ed2e00b..d12a729f99 100644 --- a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html +++ b/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" > @@ -26,6 +27,7 @@ [appA11yTitle]="'copyUsername' | i18n" [appCopyClick]="cipher.identity.username" showToast + [valueLabel]="'username' | i18n" > @@ -38,6 +40,7 @@ [appA11yTitle]="'copyCompany' | i18n" [appCopyClick]="cipher.identity.company" showToast + [valueLabel]="'company' | i18n" > @@ -66,6 +69,7 @@ [appA11yTitle]="'copySSN' | i18n" [appCopyClick]="cipher.identity.ssn" showToast + [valueLabel]="'ssn' | i18n" > @@ -91,6 +95,7 @@ [appA11yTitle]="'copyPassportNumber' | i18n" [appCopyClick]="cipher.identity.passportNumber" showToast + [valueLabel]="'passportNumber' | i18n" > @@ -103,6 +108,7 @@ [appA11yTitle]="'copyLicenseNumber' | i18n" [appCopyClick]="cipher.identity.licenseNumber" showToast + [valueLabel]="'licenseNumber' | i18n" > @@ -124,6 +130,7 @@ [appA11yTitle]="'copyEmail' | i18n" [appCopyClick]="cipher.identity.email" showToast + [valueLabel]="'email' | i18n" > @@ -136,6 +143,7 @@ [appA11yTitle]="'copyPhone' | i18n" [appCopyClick]="cipher.identity.phone" showToast + [valueLabel]="'phone' | i18n" > @@ -155,6 +163,7 @@ [appA11yTitle]="'copyAddress' | i18n" [appCopyClick]="addressFields" showToast + [valueLabel]="'address' | i18n" >