From e8f53fe9b716b4ac0ae6778245e704ddfd094e20 Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Wed, 18 Jun 2025 14:44:21 -0700 Subject: [PATCH] [PM-22756] Send minimizeOnCopy message during copy on Desktop platform (#15232) * [PM-22756] Send minimizeOnCopy message during copy on Desktop platform * [PM-22756] Introduce optional CopyClickListener pattern * [PM-22756] Introduce CopyService that wraps PlatformUtilsService.copyToClipboard to allow scoped implementations * [PM-22756] Introduce DesktopVaultCopyService that sends the minimizeOnCopy message * [PM-22756] Remove leftover onCopy method * [PM-22756] Fix failing tests * [PM-22756] Revert CopyService solution * [PM-22756] Cleanup * [PM-22756] Update test * [PM-22756] Cleanup leftover test changes --- .../src/vault/app/vault/vault-v2.component.ts | 19 ++++++++++++----- .../copy-click/copy-click.directive.spec.ts | 17 +++++++++++---- .../src/copy-click/copy-click.directive.ts | 21 ++++++++++++++----- 3 files changed, 43 insertions(+), 14 deletions(-) diff --git a/apps/desktop/src/vault/app/vault/vault-v2.component.ts b/apps/desktop/src/vault/app/vault/vault-v2.component.ts index a84a868f4ca..354752c8b36 100644 --- a/apps/desktop/src/vault/app/vault/vault-v2.component.ts +++ b/apps/desktop/src/vault/app/vault/vault-v2.component.ts @@ -13,8 +13,6 @@ import { firstValueFrom, Subject, takeUntil, switchMap, lastValueFrom, Observabl import { filter, map, take } from "rxjs/operators"; import { CollectionService, CollectionView } from "@bitwarden/admin-console/common"; -import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref"; -import { ModalService } from "@bitwarden/angular/services/modal.service"; import { VaultViewPasswordHistoryService } from "@bitwarden/angular/services/view-password-history.service"; import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; @@ -45,6 +43,8 @@ import { DialogService, ItemModule, ToastService, + CopyClickListener, + COPY_CLICK_LISTENER, } from "@bitwarden/components"; import { I18nPipe } from "@bitwarden/ui-common"; import { @@ -115,9 +115,13 @@ const BroadcasterSubscriptionId = "VaultComponent"; useClass: DesktopPremiumUpgradePromptService, }, { provide: CipherFormGenerationService, useClass: DesktopCredentialGenerationService }, + { + provide: COPY_CLICK_LISTENER, + useExisting: VaultV2Component, + }, ], }) -export class VaultV2Component implements OnInit, OnDestroy { +export class VaultV2Component implements OnInit, OnDestroy, CopyClickListener { @ViewChild(VaultItemsV2Component, { static: true }) vaultItemsComponent: VaultItemsV2Component | null = null; @ViewChild(VaultFilterComponent, { static: true }) @@ -161,7 +165,6 @@ export class VaultV2Component implements OnInit, OnDestroy { ), ); - private modal: ModalRef | null = null; private componentIsDestroyed$ = new Subject(); private allOrganizations: Organization[] = []; private allCollections: CollectionView[] = []; @@ -170,7 +173,6 @@ export class VaultV2Component implements OnInit, OnDestroy { private route: ActivatedRoute, private router: Router, private i18nService: I18nService, - private modalService: ModalService, private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone, @@ -378,6 +380,13 @@ export class VaultV2Component implements OnInit, OnDestroy { } } + /** + * Handler for Vault level CopyClickDirectives to send the minimizeOnCopy message + */ + onCopy() { + this.messagingService.send("minimizeOnCopy"); + } + async viewCipher(cipher: CipherView) { if (await this.shouldReprompt(cipher, "view")) { return; diff --git a/libs/components/src/copy-click/copy-click.directive.spec.ts b/libs/components/src/copy-click/copy-click.directive.spec.ts index 38f8ccb43cb..321a18596e4 100644 --- a/libs/components/src/copy-click/copy-click.directive.spec.ts +++ b/libs/components/src/copy-click/copy-click.directive.spec.ts @@ -1,10 +1,11 @@ import { Component, ElementRef, ViewChild } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { mock } from "jest-mock-extended"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; -import { ToastService } from "../"; +import { ToastService, CopyClickListener, COPY_CLICK_LISTENER } from "../"; import { CopyClickDirective } from "./copy-click.directive"; @@ -34,10 +35,12 @@ describe("CopyClickDirective", () => { let fixture: ComponentFixture; const copyToClipboard = jest.fn(); const showToast = jest.fn(); + const copyClickListener = mock(); beforeEach(async () => { copyToClipboard.mockClear(); showToast.mockClear(); + copyClickListener.onCopy.mockClear(); await TestBed.configureTestingModule({ imports: [TestCopyClickComponent], @@ -55,6 +58,7 @@ describe("CopyClickDirective", () => { }, { provide: PlatformUtilsService, useValue: { copyToClipboard } }, { provide: ToastService, useValue: { showToast } }, + { provide: COPY_CLICK_LISTENER, useValue: copyClickListener }, ], }).compileComponents(); @@ -92,7 +96,6 @@ describe("CopyClickDirective", () => { successToastButton.click(); expect(showToast).toHaveBeenCalledWith({ message: "copySuccessful", - title: null, variant: "success", }); }); @@ -103,7 +106,6 @@ describe("CopyClickDirective", () => { infoToastButton.click(); expect(showToast).toHaveBeenCalledWith({ message: "copySuccessful", - title: null, variant: "info", }); }); @@ -115,8 +117,15 @@ describe("CopyClickDirective", () => { expect(showToast).toHaveBeenCalledWith({ message: "valueCopied Content", - title: null, variant: "success", }); }); + + it("should call copyClickListener.onCopy when value is copied", () => { + const successToastButton = fixture.componentInstance.successToastButton.nativeElement; + + successToastButton.click(); + + expect(copyClickListener.onCopy).toHaveBeenCalledWith("success toast shown"); + }); }); diff --git a/libs/components/src/copy-click/copy-click.directive.ts b/libs/components/src/copy-click/copy-click.directive.ts index 1dfaf4387dc..514a55a0242 100644 --- a/libs/components/src/copy-click/copy-click.directive.ts +++ b/libs/components/src/copy-click/copy-click.directive.ts @@ -1,12 +1,19 @@ -// FIXME: Update this file to be type safe and remove this and next line -// @ts-strict-ignore -import { Directive, HostListener, Input } from "@angular/core"; +import { Directive, HostListener, Input, InjectionToken, Inject, Optional } from "@angular/core"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { ToastService, ToastVariant } from "../"; +/** + * Listener that can be provided to receive copy events to allow for customized behavior. + */ +export interface CopyClickListener { + onCopy(value: string): void; +} + +export const COPY_CLICK_LISTENER = new InjectionToken("CopyClickListener"); + @Directive({ selector: "[appCopyClick]", }) @@ -18,6 +25,7 @@ export class CopyClickDirective { private platformUtilsService: PlatformUtilsService, private toastService: ToastService, private i18nService: I18nService, + @Optional() @Inject(COPY_CLICK_LISTENER) private copyListener?: CopyClickListener, ) {} @Input("appCopyClick") valueToCopy = ""; @@ -26,7 +34,7 @@ export class CopyClickDirective { * When set, the toast displayed will show ` copied` * instead of the default messaging. */ - @Input() valueLabel: string; + @Input() valueLabel?: string; /** * When set without a value, a success toast will be shown when the value is copied @@ -54,6 +62,10 @@ export class CopyClickDirective { @HostListener("click") onClick() { this.platformUtilsService.copyToClipboard(this.valueToCopy); + if (this.copyListener) { + this.copyListener.onCopy(this.valueToCopy); + } + if (this._showToast) { const message = this.valueLabel ? this.i18nService.t("valueCopied", this.valueLabel) @@ -61,7 +73,6 @@ export class CopyClickDirective { this.toastService.showToast({ variant: this.toastVariant, - title: null, message, }); }