From b23d62a28014b39f0bf6f2f7846145c757a07113 Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Fri, 8 Nov 2024 00:28:32 +0100 Subject: [PATCH] [PM-14183] Show success toast on copy history value (#11911) * Remove unnecessary copy icon * Fix styling of copy success toast - Use CopyClick directive instead of manually copying and showing the toast - Adjust tests --------- Co-authored-by: Daniel James Smith --- .../password-history-view.component.html | 8 +++--- .../password-history-view.component.spec.ts | 24 ++---------------- .../password-history-view.component.ts | 25 ++----------------- 3 files changed, 8 insertions(+), 49 deletions(-) diff --git a/libs/vault/src/components/password-history-view/password-history-view.component.html b/libs/vault/src/components/password-history-view/password-history-view.component.html index 44b7fea5f7..459c679945 100644 --- a/libs/vault/src/components/password-history-view/password-history-view.component.html +++ b/libs/vault/src/components/password-history-view/password-history-view.component.html @@ -15,10 +15,10 @@ bitIconButton="bwi-clone" [appA11yTitle]="'copyPassword' | i18n" appStopClick - (click)="copy(h.password)" - > - - + [appCopyClick]="h.password" + [valueLabel]="'password' | i18n" + showToast + > diff --git a/libs/vault/src/components/password-history-view/password-history-view.component.spec.ts b/libs/vault/src/components/password-history-view/password-history-view.component.spec.ts index 8772a24582..3900681f23 100644 --- a/libs/vault/src/components/password-history-view/password-history-view.component.spec.ts +++ b/libs/vault/src/components/password-history-view/password-history-view.component.spec.ts @@ -3,14 +3,13 @@ import { By } from "@angular/platform-browser"; import { BehaviorSubject } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { WINDOW } from "@bitwarden/angular/services/injection-tokens"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service"; import { CipherType } from "@bitwarden/common/vault/enums"; import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; -import { ColorPasswordModule, ItemModule, ToastService } from "@bitwarden/components"; +import { ColorPasswordModule, ItemModule } from "@bitwarden/components"; import { ColorPasswordComponent } from "@bitwarden/components/src/color-password/color-password.component"; import { PasswordHistoryViewComponent } from "./password-history-view.component"; @@ -25,8 +24,6 @@ describe("PasswordHistoryViewComponent", () => { organizationId: "222-444-555", } as CipherView; - const copyToClipboard = jest.fn(); - const showToast = jest.fn(); const activeAccount$ = new BehaviorSubject<{ id: string }>({ id: "666-444-444" }); const mockCipherService = { get: jest.fn().mockResolvedValue({ decrypt: jest.fn().mockResolvedValue(mockCipher) }), @@ -36,17 +33,13 @@ describe("PasswordHistoryViewComponent", () => { beforeEach(async () => { mockCipherService.get.mockClear(); mockCipherService.getKeyForCipherKeyDecryption.mockClear(); - copyToClipboard.mockClear(); - showToast.mockClear(); await TestBed.configureTestingModule({ imports: [ItemModule, ColorPasswordModule, JslibModule], providers: [ - { provide: WINDOW, useValue: window }, { provide: CipherService, useValue: mockCipherService }, - { provide: PlatformUtilsService, useValue: { copyToClipboard } }, + { provide: PlatformUtilsService }, { provide: AccountService, useValue: { activeAccount$ } }, - { provide: ToastService, useValue: { showToast } }, { provide: I18nService, useValue: { t: (key: string) => key } }, ], }).compileComponents(); @@ -80,18 +73,5 @@ describe("PasswordHistoryViewComponent", () => { "bad-password-2", ]); }); - - it("copies a password", () => { - const copyButton = fixture.debugElement.query(By.css("button")); - - copyButton.nativeElement.click(); - - expect(copyToClipboard).toHaveBeenCalledWith("bad-password-1", { window: window }); - expect(showToast).toHaveBeenCalledWith({ - message: "passwordCopied", - title: "", - variant: "info", - }); - }); }); }); diff --git a/libs/vault/src/components/password-history-view/password-history-view.component.ts b/libs/vault/src/components/password-history-view/password-history-view.component.ts index 5e858af727..a0f0aa6b35 100644 --- a/libs/vault/src/components/password-history-view/password-history-view.component.ts +++ b/libs/vault/src/components/password-history-view/password-history-view.component.ts @@ -1,21 +1,14 @@ import { CommonModule } from "@angular/common"; -import { OnInit, Inject, Component, Input } from "@angular/core"; +import { OnInit, Component, Input } from "@angular/core"; import { firstValueFrom, map } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; -import { WINDOW } from "@bitwarden/angular/services/injection-tokens"; import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { CipherId, UserId } from "@bitwarden/common/types/guid"; import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service"; import { PasswordHistoryView } from "@bitwarden/common/vault/models/view/password-history.view"; -import { - ToastService, - ItemModule, - ColorPasswordModule, - IconButtonModule, -} from "@bitwarden/components"; +import { ItemModule, ColorPasswordModule, IconButtonModule } from "@bitwarden/components"; @Component({ selector: "vault-password-history-view", @@ -33,29 +26,15 @@ export class PasswordHistoryViewComponent implements OnInit { history: PasswordHistoryView[] = []; constructor( - @Inject(WINDOW) private win: Window, protected cipherService: CipherService, - protected platformUtilsService: PlatformUtilsService, protected i18nService: I18nService, protected accountService: AccountService, - protected toastService: ToastService, ) {} async ngOnInit() { await this.init(); } - /** Copies a password to the clipboard. */ - copy(password: string) { - const copyOptions = this.win != null ? { window: this.win } : undefined; - this.platformUtilsService.copyToClipboard(password, copyOptions); - this.toastService.showToast({ - variant: "info", - title: "", - message: this.i18nService.t("passwordCopied"), - }); - } - /** Retrieve the password history for the given cipher */ protected async init() { const cipher = await this.cipherService.get(this.cipherId);