[PM-8486] Browser Refresh - Autofill functionality (#9616)

* [PM-8486] Introduce VaultPopupAutofill service * [PM-8486] Remove moved autofill functionality from VaultPopupItem service * [PM-8486] Add autofill functionality to button and menu options * [PM-8486] Hide Autofill and Save option for Cards/Identities * [PM-8486] Reduce nesting in closePopup * [PM-8486] Breakup doAutofillAndSave method * [PM-8486] Start subscription in autofill service constructor * [PM-8486] Cleanup missed calls to removed methods
bitwarden · Jun 27, 2024 · b7a961b · b7a961b
1 parent 2042b3a
commit b7a961b
Show file tree

Hide file tree

Showing 10 changed files with 640 additions and 86 deletions.
diff --git a/...opup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts b/...opup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
@@ -12,6 +12,7 @@ import {
 } from "@bitwarden/components";
 
 import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
+import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service";
 import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
 import { PopupCipherView } from "../../../views/popup-cipher.view";
 import { VaultListItemsContainerComponent } from "../vault-list-items-container/vault-list-items-container.component";
@@ -53,15 +54,18 @@ export class AutofillVaultListItemsComponent {
   protected showEmptyAutofillTip$: Observable<boolean> = combineLatest([
     this.vaultPopupItemsService.hasFilterApplied$,
     this.autofillCiphers$,
-    this.vaultPopupItemsService.autofillAllowed$,
+    this.vaultPopupAutofillService.autofillAllowed$,
   ]).pipe(
     map(
       ([hasFilter, ciphers, canAutoFill]) =>
         !hasFilter && canAutoFill && ciphers.filter((c) => c.type == CipherType.Login).length === 0,
     ),
   );
 
-  constructor(private vaultPopupItemsService: VaultPopupItemsService) {
+  constructor(
+    private vaultPopupItemsService: VaultPopupItemsService,
+    private vaultPopupAutofillService: VaultPopupAutofillService,
+  ) {
     // TODO: Migrate logic to show Autofill policy toast PM-8144
   }
 
@@ -70,6 +74,6 @@ export class AutofillVaultListItemsComponent {
    * @protected
    */
   protected refreshCurrentTab() {
-    this.vaultPopupItemsService.refreshCurrentTab();
+    this.vaultPopupAutofillService.refreshCurrentTab();
   }
 }
diff --git a/...er/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html b/...er/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
@@ -10,10 +10,10 @@
   <bit-menu #moreOptions>
     <ng-container *ngIf="canAutofill && !hideAutofillOptions">
       <ng-container *ngIf="autofillAllowed$ | async">
-        <button type="button" bitMenuItem>
+        <button type="button" bitMenuItem (click)="doAutofill()">
           {{ "autofill" | i18n }}
         </button>
-        <button type="button" bitMenuItem *ngIf="canEdit">
+        <button type="button" bitMenuItem *ngIf="canEdit && isLogin" (click)="doAutofillAndSave()">
           {{ "fillAndSave" | i18n }}
         </button>
       </ng-container>

diff --git a/...wser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts b/...wser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
@@ -18,7 +18,7 @@ import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { BrowserApi } from "../../../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
-import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service";
 
 @Component({
   standalone: true,
@@ -39,16 +39,16 @@ export class ItemMoreOptionsComponent {
   @Input({ transform: booleanAttribute })
   hideAutofillOptions: boolean;
 
-  protected autofillAllowed$ = this.vaultPopupItemsService.autofillAllowed$;
+  protected autofillAllowed$ = this.vaultPopupAutofillService.autofillAllowed$;
 
   constructor(
     private cipherService: CipherService,
-    private vaultPopupItemsService: VaultPopupItemsService,
     private passwordRepromptService: PasswordRepromptService,
     private toastService: ToastService,
     private dialogService: DialogService,
     private router: Router,
     private i18nService: I18nService,
+    private vaultPopupAutofillService: VaultPopupAutofillService,
   ) {}
 
   get canEdit() {
@@ -62,10 +62,22 @@ export class ItemMoreOptionsComponent {
     return [CipherType.Login, CipherType.Card, CipherType.Identity].includes(this.cipher.type);
   }
 
+  get isLogin() {
+    return this.cipher.type === CipherType.Login;
+  }
+
   get favoriteText() {
     return this.cipher.favorite ? "unfavorite" : "favorite";
   }
 
+  async doAutofill() {
+    await this.vaultPopupAutofillService.doAutofill(this.cipher);
+  }
+
+  async doAutofillAndSave() {
+    await this.vaultPopupAutofillService.doAutofillAndSave(this.cipher);
+  }
+
   /**
    * Determines if the login cipher can be launched in a new browser tab.
    */

diff --git a/.../components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/.../components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -40,6 +40,7 @@ <h2 bitTypography="h6">
             type="button"
             bitBadge
             variant="primary"
+            (click)="doAutofill(cipher)"
             [title]="'autofillTitle' | i18n: cipher.name"
             [attr.aria-label]="'autofillTitle' | i18n: cipher.name"
           >

diff --git a/...up/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts b/...up/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
@@ -14,6 +14,7 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 
+import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service";
 import { PopupCipherView } from "../../../views/popup-cipher.view";
 import { ItemCopyActionsComponent } from "../item-copy-action/item-copy-actions.component";
 import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options.component";
@@ -87,5 +88,12 @@ export class VaultListItemsContainerComponent {
     return cipher.collections[0]?.name;
   }
 
-  constructor(private i18nService: I18nService) {}
+  constructor(
+    private i18nService: I18nService,
+    private vaultPopupAutofillService: VaultPopupAutofillService,
+  ) {}
+
+  async doAutofill(cipher: PopupCipherView) {
+    await this.vaultPopupAutofillService.doAutofill(cipher);
+  }
 }
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault/vault-v2.component.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { Router, RouterLink } from "@angular/router";
+import { RouterLink } from "@angular/router";
 import { combineLatest } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -59,10 +59,7 @@ export class VaultV2Component implements OnInit, OnDestroy {
 
   protected VaultStateEnum = VaultState;
 
-  constructor(
-    private vaultPopupItemsService: VaultPopupItemsService,
-    private router: Router,
-  ) {
+  constructor(private vaultPopupItemsService: VaultPopupItemsService) {
     combineLatest([
       this.vaultPopupItemsService.emptyVault$,
       this.vaultPopupItemsService.noFilteredResults$,