add autofill blocked domain indicators to autofill suggestions sectio…

…n header
bitwarden · Nov 15, 2024 · f96b5f1 · f96b5f1
1 parent 74ea822
commit f96b5f1
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 16 deletions.
diff --git a/...up/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html b/...up/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
@@ -3,6 +3,7 @@
   [ciphers]="ciphers"
   [title]="'autofillSuggestions' | i18n"
   [showRefresh]="showRefresh"
+  [sectionIndicators]="sectionIndicators"
   (onRefresh)="refreshCurrentTab()"
   [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null"
   showAutofillButton

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
@@ -1,15 +1,10 @@
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { combineLatest, map, Observable } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import {
-  IconButtonModule,
-  SectionComponent,
-  SectionHeaderComponent,
-  TypographyModule,
-} from "@bitwarden/components";
+import { IconButtonModule, TypographyModule } from "@bitwarden/components";
 
 import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
 import { VaultPopupAutofillService } from "../../../services/vault-popup-autofill.service";
@@ -21,11 +16,9 @@ import { VaultListItemsContainerComponent } from "../vault-list-items-container/
   standalone: true,
   imports: [
     CommonModule,
-    SectionComponent,
     TypographyModule,
     VaultListItemsContainerComponent,
     JslibModule,
-    SectionHeaderComponent,
     IconButtonModule,
   ],
   selector: "app-autofill-vault-list-items",
@@ -45,6 +38,11 @@ export class AutofillVaultListItemsComponent {
    */
   protected showRefresh: boolean = BrowserPopupUtils.inSidebar(window);
 
+  /**
+   * Indicators for the section.
+   */
+  @Input() sectionIndicators: string[];
+
   /**
    * Observable that determines whether the empty autofill tip should be shown.
    * The tip is shown when there are no login ciphers to autofill, no filter is applied, and autofill is allowed in

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
@@ -3,6 +3,11 @@
     <bit-section-header>
       <h2 bitTypography="h6">
         {{ title }}
+        <i
+          *ngIf="showAutofillBlockedIndicator"
+          class="bwi bwi-info-circle"
+          [appA11yTitle]="'autofillBlockedTooltip' | i18n"
+        ></i>
       </h2>
       <button
         *ngIf="showRefresh"

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
@@ -1,7 +1,7 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core";
-import { Router, RouterLink } from "@angular/router";
+import { booleanAttribute, Component, EventEmitter, Input, Output, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -38,7 +38,6 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
     TypographyModule,
     JslibModule,
     SectionHeaderComponent,
-    RouterLink,
     ItemCopyActionsComponent,
     ItemMoreOptionsComponent,
     OrgIconDirective,
@@ -48,9 +47,10 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
   templateUrl: "vault-list-items-container.component.html",
   standalone: true,
 })
-export class VaultListItemsContainerComponent {
+export class VaultListItemsContainerComponent implements OnInit {
   protected ItemHeightClass = BitItemHeightClass;
   protected ItemHeight = BitItemHeight;
+  protected showAutofillBlockedIndicator = false;
 
   /**
    * Timeout used to add a small delay when selecting a cipher to allow for double click to launch
@@ -70,6 +70,11 @@ export class VaultListItemsContainerComponent {
   @Input()
   title: string;
 
+  /**
+   * Indicators for the section.
+   */
+  @Input() sectionIndicators: string[];
+
   /**
    * Optional description for the vault list item section. Will be shown below the title even when
    * no ciphers are available.
@@ -122,6 +127,12 @@ export class VaultListItemsContainerComponent {
     private router: Router,
   ) {}
 
+  ngOnInit() {
+    this.showAutofillBlockedIndicator = !!this.sectionIndicators?.find(
+      (i) => i === "autofillDisabled",
+    );
+  }
+
   /**
    * Launches the login cipher in a new browser tab.
    */

diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
@@ -72,7 +72,9 @@
       cdkVirtualScrollingElement
       class="tw-h-full tw-p-3 tw-styled-scrollbar"
     >
-      <app-autofill-vault-list-items></app-autofill-vault-list-items>
+      <app-autofill-vault-list-items
+        [sectionIndicators]="sectionIndicators"
+      ></app-autofill-vault-list-items>
       <app-vault-list-items-container
         [title]="'favorites' | i18n"
         [ciphers]="favoriteCiphers$ | async"

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
@@ -2,7 +2,6 @@ import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { RouterLink } from "@angular/router";
 import { combineLatest, firstValueFrom, Observable, shareReplay, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -51,7 +50,6 @@ enum VaultState {
     VaultListFiltersComponent,
     BannerModule,
     ButtonModule,
-    RouterLink,
     VaultV2SearchComponent,
     NewItemDropdownV2Component,
     ScrollingModule,
@@ -67,6 +65,7 @@ export class VaultV2Component implements OnInit, OnDestroy {
   protected scriptInjectionIsBlocked = false;
   protected showScriptInjectionIsBlockedBanner = false;
   protected autofillTabHostname: string = null;
+  protected sectionIndicators: string[] = [];
 
   protected newItemItemValues$: Observable<NewItemInitialValues> =
     this.vaultPopupListFiltersService.filters$.pipe(
@@ -136,6 +135,10 @@ export class VaultV2Component implements OnInit, OnDestroy {
 
           this.scriptInjectionIsBlocked = autofillTabIsBlocked;
 
+          if (autofillTabIsBlocked) {
+            this.sectionIndicators.push("autofillDisabled");
+          }
+
           this.showScriptInjectionIsBlockedBanner =
             autofillTabIsBlocked &&
             !blockedInteractionsUris[autofillTabURL.hostname]?.bannerIsDismissed;