[PM-13888] Extension: Persist Scroll from Vault

apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.spec.ts

@@ -21,12 +21,15 @@ import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/sp
 import { UserId } from "@bitwarden/common/types/guid";
 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 { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { CopyCipherFieldService } from "@bitwarden/vault";
 
 import { BrowserApi } from "../../../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
 import { PopupRouterCacheService } from "../../../../../platform/popup/view-cache/popup-router-cache.service";
+import { VaultPopupScrollPositionService } from "../../../services/vault-popup-scroll-position.service";
 
 import { VaultPopupAutofillService } from "./../../../services/vault-popup-autofill.service";
 import { ViewV2Component } from "./view-v2.component";
@@ -44,6 +47,10 @@ describe("ViewV2Component", () => {
   const collect = jest.fn().mockResolvedValue(null);
   const doAutofill = jest.fn().mockResolvedValue(true);
   const copy = jest.fn().mockResolvedValue(true);
+  const back = jest.fn().mockResolvedValue(null);
+  const openSimpleDialog = jest.fn().mockResolvedValue(true);
+  const stop = jest.fn();
+  const showToast = jest.fn();
 
   const mockCipher = {
     id: "122-333-444",
@@ -54,7 +61,7 @@ describe("ViewV2Component", () => {
       password: "test-password",
       totp: "123",
     },
-  };
+  } as unknown as CipherView;
 
   const mockVaultPopupAutofillService = {
     doAutofill,
@@ -68,13 +75,21 @@ describe("ViewV2Component", () => {
   const mockCipherService = {
     get: jest.fn().mockResolvedValue({ decrypt: jest.fn().mockResolvedValue(mockCipher) }),
     getKeyForCipherKeyDecryption: jest.fn().mockResolvedValue({}),
+    deleteWithServer: jest.fn().mockResolvedValue(undefined),
+    softDeleteWithServer: jest.fn().mockResolvedValue(undefined),
   };
 
   beforeEach(async () => {
+    mockCipherService.deleteWithServer.mockClear();
+    mockCipherService.softDeleteWithServer.mockClear();
     mockNavigate.mockClear();
     collect.mockClear();
     doAutofill.mockClear();
     copy.mockClear();
+    stop.mockClear();
+    openSimpleDialog.mockClear();
+    back.mockClear();
+    showToast.mockClear();
 
     await TestBed.configureTestingModule({
       imports: [ViewV2Component],
@@ -84,9 +99,12 @@ describe("ViewV2Component", () => {
         { provide: LogService, useValue: mock<LogService>() },
         { provide: PlatformUtilsService, useValue: mock<PlatformUtilsService>() },
         { provide: ConfigService, useValue: mock<ConfigService>() },
-        { provide: PopupRouterCacheService, useValue: mock<PopupRouterCacheService>() },
+        { provide: PopupRouterCacheService, useValue: mock<PopupRouterCacheService>({ back }) },
         { provide: ActivatedRoute, useValue: { queryParams: params$ } },
         { provide: EventCollectionService, useValue: { collect } },
+        { provide: VaultPopupScrollPositionService, useValue: { stop } },
+        { provide: VaultPopupAutofillService, useValue: mockVaultPopupAutofillService },
+        { provide: ToastService, useValue: { showToast } },
         {
           provide: I18nService,
           useValue: {
@@ -98,7 +116,6 @@ describe("ViewV2Component", () => {
             },
           },
         },
-        { provide: VaultPopupAutofillService, useValue: mockVaultPopupAutofillService },
         {
           provide: AccountService,
           useValue: accountService,
@@ -114,7 +131,13 @@ describe("ViewV2Component", () => {
           useValue: mockCopyCipherFieldService,
         },
       ],
-    }).compileComponents();
+    })
+      .overrideProvider(DialogService, {
+        useValue: {
+          openSimpleDialog,
+        },
+      })
+      .compileComponents();
 
     fixture = TestBed.createComponent(ViewV2Component);
     component = fixture.componentInstance;
@@ -223,4 +246,130 @@ describe("ViewV2Component", () => {
       expect(closeSpy).toHaveBeenCalledOnce();
     }));
   });
+
+  describe("delete", () => {
+    beforeEach(() => {
+      component.cipher = mockCipher;
+    });
+
+    it("opens confirmation modal", async () => {
+      await component.delete();
+
+      expect(openSimpleDialog).toHaveBeenCalledOnce();
+    });
+
+    it("navigates back", async () => {
+      await component.delete();
+
+      expect(back).toHaveBeenCalledOnce();
+    });
+
+    it("stops scroll position service", async () => {
+      await component.delete();
+
+      expect(stop).toHaveBeenCalledOnce();
+      expect(stop).toHaveBeenCalledWith(true);
+    });
+
+    describe("deny confirmation", () => {
+      beforeEach(() => {
+        openSimpleDialog.mockResolvedValue(false);
+      });
+
+      it("does not delete the cipher", async () => {
+        await component.delete();
+
+        expect(mockCipherService.deleteWithServer).not.toHaveBeenCalled();
+        expect(mockCipherService.softDeleteWithServer).not.toHaveBeenCalled();
+      });
+
+      it("does not interact with side effects", () => {
+        expect(back).not.toHaveBeenCalled();
+        expect(stop).not.toHaveBeenCalled();
+        expect(showToast).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("accept confirmation", () => {
+      beforeEach(() => {
+        openSimpleDialog.mockResolvedValue(true);
+      });
+
+      describe("soft delete", () => {
+        beforeEach(() => {
+          (mockCipher as any).isDeleted = null;
+        });
+
+        it("opens confirmation dialog", async () => {
+          await component.delete();
+
+          expect(openSimpleDialog).toHaveBeenCalledOnce();
+          expect(openSimpleDialog).toHaveBeenCalledWith({
+            content: {
+              key: "deleteItemConfirmation",
+            },
+            title: {
+              key: "deleteItem",
+            },
+            type: "warning",
+          });
+        });
+
+        it("calls soft delete", async () => {
+          await component.delete();
+
+          expect(mockCipherService.softDeleteWithServer).toHaveBeenCalled();
+          expect(mockCipherService.deleteWithServer).not.toHaveBeenCalled();
+        });
+
+        it("shows toast", async () => {
+          await component.delete();
+
+          expect(showToast).toHaveBeenCalledWith({
+            variant: "success",
+            title: null,
+            message: "deletedItem",
+          });
+        });
+      });
+
+      describe("hard delete", () => {
+        beforeEach(() => {
+          (mockCipher as any).isDeleted = true;
+        });
+
+        it("opens confirmation dialog", async () => {
+          await component.delete();
+
+          expect(openSimpleDialog).toHaveBeenCalledOnce();
+          expect(openSimpleDialog).toHaveBeenCalledWith({
+            content: {
+              key: "permanentlyDeleteItemConfirmation",
+            },
+            title: {
+              key: "deleteItem",
+            },
+            type: "warning",
+          });
+        });
+
+        it("calls soft delete", async () => {
+          await component.delete();
+
+          expect(mockCipherService.deleteWithServer).toHaveBeenCalled();
+          expect(mockCipherService.softDeleteWithServer).not.toHaveBeenCalled();
+        });
+
+        it("shows toast", async () => {
+          await component.delete();
+
+          expect(showToast).toHaveBeenCalledWith({
+            variant: "success",
+            title: null,
+            message: "permanentlyDeletedItem",
+          });
+        });
+      });
+    });
+  });
 });

apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts

@@ -45,6 +45,7 @@ import { PopOutComponent } from "../../../../../platform/popup/components/pop-ou
 import { PopupRouterCacheService } from "../../../../../platform/popup/view-cache/popup-router-cache.service";
 import { BrowserPremiumUpgradePromptService } from "../../../services/browser-premium-upgrade-prompt.service";
 import { BrowserViewPasswordHistoryService } from "../../../services/browser-view-password-history.service";
+import { VaultPopupScrollPositionService } from "../../../services/vault-popup-scroll-position.service";
 import { closeViewVaultItemPopout, VaultPopoutType } from "../../../utils/vault-popout-window";
 
 import { PopupFooterComponent } from "./../../../../../platform/popup/layout/popup-footer.component";
@@ -109,6 +110,7 @@ export class ViewV2Component {
     private popupRouterCacheService: PopupRouterCacheService,
     protected cipherAuthorizationService: CipherAuthorizationService,
     private copyCipherFieldService: CopyCipherFieldService,
+    private popupScrollPositionService: VaultPopupScrollPositionService,
   ) {
     this.subscribeToParams();
   }
@@ -198,6 +200,7 @@ export class ViewV2Component {
       return false;
     }
 
+    this.popupScrollPositionService.stop(true);
     await this.popupRouterCacheService.back();
 
     this.toastService.showToast({

apps/browser/src/vault/popup/components/vault/vault-v2.component.ts

@@ -1,6 +1,6 @@
-import { ScrollingModule } from "@angular/cdk/scrolling";
+import { CdkVirtualScrollableElement, ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { RouterLink } from "@angular/router";
 import { combineLatest, Observable, shareReplay, switchMap } from "rxjs";
@@ -17,6 +17,7 @@
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
+import { VaultPopupScrollPositionService } from "../../services/vault-popup-scroll-position.service";
 import { VaultUiOnboardingService } from "../../services/vault-ui-onboarding.service";
 import { AutofillVaultListItemsComponent, VaultListItemsContainerComponent } from "../vault-v2";
 import {
@@ -53,7 +54,9 @@
   ],
   providers: [VaultUiOnboardingService],
 })
-export class VaultV2Component implements OnInit, OnDestroy {
+export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(CdkVirtualScrollableElement) virtualScrollElement?: CdkVirtualScrollableElement;
+
   cipherType = CipherType;
 
   protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
@@ -87,6 +90,7 @@
     private vaultPopupItemsService: VaultPopupItemsService,
     private vaultPopupListFiltersService: VaultPopupListFiltersService,
     private vaultUiOnboardingService: VaultUiOnboardingService,
+    private vaultScrollPositionService: VaultPopupScrollPositionService,
   ) {
     combineLatest([
       this.vaultPopupItemsService.emptyVault$,
@@ -112,9 +116,17 @@
       });
   }
 
+  ngAfterViewInit(): void {
+    if (this.virtualScrollElement) {
+      this.vaultScrollPositionService.start(this.virtualScrollElement);
+    }
+  }
+
   async ngOnInit() {
     await this.vaultUiOnboardingService.showOnboardingDialog();
   }
 
-  ngOnDestroy(): void {}
+  ngOnDestroy(): void {
+    this.vaultScrollPositionService.stop();
+  }
 }