[PM-16804] Add supporting Vault component presentational updates for blocked domains

apps/browser/src/_locales/en/messages.json

@@ -2339,11 +2339,11 @@
   "blockedDomainsDesc": {
     "message": "Autofill and other related features will not be offered for these websites. You must refresh the page for changes to take effect."
   },
-  "autofillBlockedNotice": {
-    "message": "Autofill is blocked for this website. Review or change this in settings."
+  "autofillBlockedNoticeV2": {
+    "message": "Autofill is blocked for this website."
   },
-  "autofillBlockedTooltip": {
-    "message": "Autofill is blocked on this website. Review in settings."
+  "autofillBlockedNoticeGuidance": {
+    "message": "Change this in settings"
   },
   "websiteItemLabel": {
     "message": "Website $number$ (URI)",
@@ -4007,8 +4007,8 @@
   "passkeyRemoved": {
     "message": "Passkey removed"
   },
-  "autofillSuggestions": {
-    "message": "Autofill suggestions"
+  "itemSuggestions": {
+    "message": "Suggested items"
   },
   "autofillSuggestionsTip": {
     "message": "Save a login item for this site to autofill"

apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html

@@ -1,7 +1,7 @@
 <app-vault-list-items-container
   *ngIf="autofillCiphers$ | async as ciphers"
   [ciphers]="ciphers"
-  [title]="'autofillSuggestions' | i18n"
+  [title]="'itemSuggestions' | i18n"
   [showRefresh]="showRefresh"
   (onRefresh)="refreshCurrentTab()"
   [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null"

apps/browser/src/vault/popup/components/vault-v2/blocked-injection-banner/blocked-injection-banner.component.html

@@ -0,0 +1,10 @@
+<bit-banner
+  *ngIf="showCurrentTabIsBlockedBanner$ | async"
+  bannerType="info"
+  (onClose)="handleCurrentTabIsBlockedBannerDismiss()"
+>
+  {{ "autofillBlockedNoticeV2" | i18n }}
+  <a bitLink linkType="secondary" [routerLink]="blockedURISettingsRoute">
+    {{ "autofillBlockedNoticeGuidance" | i18n }}
+  </a>
+</bit-banner>

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

@@ -0,0 +1,53 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Observable } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  BannerModule,
+  IconButtonModule,
+  LinkModule,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service";
+
+const blockedURISettingsRoute = "/blocked-domains";
+
+@Component({
+  standalone: true,
+  imports: [
+    BannerModule,
+    CommonModule,
+    IconButtonModule,
+    JslibModule,
+    LinkModule,
+    RouterModule,
+    TypographyModule,
+  ],
+  selector: "blocked-injection-banner",
+  templateUrl: "blocked-injection-banner.component.html",
+})
+export class BlockedInjectionBanner implements OnInit {
+  /**
+   * Flag indicating that the banner should be shown
+   */
+  protected showCurrentTabIsBlockedBanner$: Observable<boolean> =
+    this.vaultPopupAutofillService.showCurrentTabIsBlockedBanner$;
+
+  /**
+   * Hostname for current tab
+   */
+  protected currentTabHostname?: string;
+
+  blockedURISettingsRoute: string = blockedURISettingsRoute;
+
+  constructor(private vaultPopupAutofillService: VaultPopupAutofillService) {}
+
+  async ngOnInit() {}
+
+  async handleCurrentTabIsBlockedBannerDismiss() {
+    await this.vaultPopupAutofillService.dismissCurrentTabIsBlockedBanner();
+  }
+}

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

@@ -27,10 +27,15 @@ <h2 bitTypography="h6">
         <button
           bit-item-content
           type="button"
-          (click)="primaryActionAutofill ? doAutofill(cipher) : onViewCipher(cipher)"
+          (click)="
+            primaryActionAutofill && !currentURIIsBlocked
+              ? doAutofill(cipher)
+              : onViewCipher(cipher)
+          "
           (dblclick)="launchCipher(cipher)"
           [appA11yTitle]="
-            (primaryActionAutofill ? 'autofillTitle' : 'viewItemTitle') | i18n: cipher.name
+            (primaryActionAutofill && !currentURIIsBlocked ? 'autofillTitle' : 'viewItemTitle')
+              | i18n: cipher.name
           "
           class="{{ itemHeightClass }}"
         >
@@ -53,7 +58,9 @@ <h2 bitTypography="h6">
           <span slot="secondary">{{ cipher.subTitle }}</span>
         </button>
         <ng-container slot="end">
-          <bit-item-action *ngIf="showAutofillButton && !primaryActionAutofill">
+          <bit-item-action
+            *ngIf="showAutofillButton && !currentURIIsBlocked && !primaryActionAutofill"
+          >
             <button
               type="button"
               bitBadge
@@ -78,7 +85,7 @@ <h2 bitTypography="h6">
           <app-item-copy-actions [cipher]="cipher"></app-item-copy-actions>
           <app-item-more-options
             [cipher]="cipher"
-            [hideAutofillOptions]="showAutofillButton"
+            [hideAutofillOptions]="showAutofillButton || currentURIIsBlocked"
             [showViewOption]="primaryActionAutofill"
           ></app-item-more-options>
         </ng-container>

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

@@ -12,8 +12,8 @@
   Output,
   signal,
 } from "@angular/core";
-import { Router, RouterLink } from "@angular/router";
-import { map } from "rxjs";
+import { Router } from "@angular/router";
+import { firstValueFrom, map } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -56,7 +56,6 @@
     TypographyModule,
     JslibModule,
     SectionHeaderComponent,
-    RouterLink,
     ItemCopyActionsComponent,
     ItemMoreOptionsComponent,
     OrgIconDirective,
@@ -125,6 +124,11 @@
   @Output()
   onRefresh = new EventEmitter<void>();
 
+  /**
+   * Flag indicating that the current tab location is blocked
+   */
+  currentURIIsBlocked: boolean = false;
+
   /**
    * Option to show the autofill button for each item.
    */
@@ -178,6 +182,10 @@
 
       this.autofillShortcutTooltip.set(`${autofillTitle} ${autofillShortcut}`);
     }
+
+    this.currentURIIsBlocked = await firstValueFrom(
+      this.vaultPopupAutofillService.currentTabIsOnBlocklist$,
+    );
   }
 
   /**

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

@@ -22,6 +22,11 @@
     </bit-no-items>
   </div>
 
+  <blocked-injection-banner
+    *ngIf="vaultState !== VaultStateEnum.Empty"
+    slot="full-width-notice"
+  ></blocked-injection-banner>
+
   <!-- Show search & filters outside of the scroll area of the page -->
   <ng-container
     slot="above-scroll-area"

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

@@ -21,6 +21,7 @@
 import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
 import { VaultUiOnboardingService } from "../../services/vault-ui-onboarding.service";
 
+import { BlockedInjectionBanner } from "./blocked-injection-banner/blocked-injection-banner.component";
 import {
   NewItemDropdownV2Component,
   NewItemInitialValues,
@@ -40,6 +41,7 @@
   templateUrl: "vault-v2.component.html",
   standalone: true,
   imports: [
+    BlockedInjectionBanner,
     PopupPageComponent,
     PopupHeaderComponent,
     PopOutComponent,

apps/browser/src/vault/popup/services/vault-popup-autofill.service.spec.ts

@@ -4,6 +4,7 @@ import { mock } from "jest-mock-extended";
 import { BehaviorSubject, of } from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
@@ -42,6 +43,7 @@ describe("VaultPopupAutofillService", () => {
 
   // Create mocks for VaultPopupAutofillService
   const mockAutofillService = mock<AutofillService>();
+  const mockDomainSettingsService = mock<DomainSettingsService>();
   const mockI18nService = mock<I18nService>();
   const mockToastService = mock<ToastService>();
   const mockPlatformUtilsService = mock<PlatformUtilsService>();
@@ -69,6 +71,7 @@ describe("VaultPopupAutofillService", () => {
     testBed = TestBed.configureTestingModule({
       providers: [
         { provide: AutofillService, useValue: mockAutofillService },
+        { provide: DomainSettingsService, useValue: mockDomainSettingsService },
         { provide: I18nService, useValue: mockI18nService },
         { provide: ToastService, useValue: mockToastService },
         { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },

apps/browser/src/vault/popup/services/vault-popup-autofill.service.ts

@@ -15,6 +15,7 @@
 } from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
@@ -65,6 +66,72 @@
     shareReplay({ refCount: false, bufferSize: 1 }),
   );
 
+  currentTabIsOnBlocklist$: Observable<boolean> = combineLatest([
+    this.domainSettingsService.blockedInteractionsUris$,
+    this.currentAutofillTab$,
+  ]).pipe(
+    map(([blockedInteractionsUris, currentTab]) => {
+      if (blockedInteractionsUris && currentTab?.url?.length) {
+        const tabURL = new URL(currentTab.url);
+        const tabIsBlocked = Object.keys(blockedInteractionsUris).includes(tabURL.hostname);
+
+        if (tabIsBlocked) {
+          return true;
+        }
+      }
+
+      return false;
+    }),
+    shareReplay({ refCount: false, bufferSize: 1 }),
+  );
+
+  showCurrentTabIsBlockedBanner$: Observable<boolean> = combineLatest([
+    this.domainSettingsService.blockedInteractionsUris$,
+    this.currentAutofillTab$,
+  ]).pipe(
+    map(([blockedInteractionsUris, currentTab]) => {
+      if (blockedInteractionsUris && currentTab?.url?.length) {
+        const tabURL = new URL(currentTab.url);
+        const tabIsBlocked = Object.keys(blockedInteractionsUris).includes(tabURL.hostname);
+
+        const showScriptInjectionIsBlockedBanner =
+          tabIsBlocked && !blockedInteractionsUris[tabURL.hostname]?.bannerIsDismissed;
+
+        return showScriptInjectionIsBlockedBanner;
+      }
+
+      return false;
+    }),
+    shareReplay({ refCount: false, bufferSize: 1 }),
+  );
+
+  async dismissCurrentTabIsBlockedBanner() {
+    try {
+      const currentTab = await firstValueFrom(this.currentAutofillTab$);
+      const currentTabURL = currentTab?.url.length && new URL(currentTab.url);
+
+      const currentTabHostname = currentTabURL && currentTabURL.hostname;
+
+      if (!currentTabHostname) {
+        return;
+      }
+
+      const blockedURIs = await firstValueFrom(this.domainSettingsService.blockedInteractionsUris$);
+      const tabIsBlocked = Object.keys(blockedURIs).includes(currentTabHostname);
+
+      if (tabIsBlocked) {
+        void this.domainSettingsService.setBlockedInteractionsUris({
+          ...blockedURIs,
+          [currentTabHostname as string]: { bannerIsDismissed: true },
+        });
+      }
+    } catch (e) {
+      throw new Error(
+        "There was a problem dismissing the blocked interaction URI notification banner",
+      );
+    }
+  }
+
   /**
    * Observable that indicates whether autofill is allowed in the current context.
    * Autofill is allowed when there is a current tab and the popup is not in a popout window.
@@ -123,6 +190,7 @@
 
   constructor(
     private autofillService: AutofillService,
+    private domainSettingsService: DomainSettingsService,
     private i18nService: I18nService,
     private toastService: ToastService,
     private platformUtilService: PlatformUtilsService,