[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 <djsmith85@users.noreply.github.com>

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)"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+          [appCopyClick]="h.password"
+          [valueLabel]="'password' | i18n"
+          showToast
+        ></button>
       </bit-item-action>
     </ng-container>
   </bit-item>

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",
-      });
-    });
   });
 });

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);