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"
>