[PM-8335] Show autofill suggestion when no autofill login items present (#9521)

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

@@ -4,25 +4,6 @@
   [title]="'autofillSuggestions' | i18n"
   [showRefresh]="showRefresh"
   (onRefresh)="refreshCurrentTab()"
+  [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : null"
   showAutofillButton
 ></app-vault-list-items-container>
-<ng-container *ngIf="showEmptyAutofillTip$ | async">
-  <bit-section>
-    <bit-section-header>
-      <h2 bitTypography="h6">
-        {{ "autofillSuggestions" | i18n }}
-      </h2>
-      <button
-        *ngIf="showRefresh"
-        bitIconButton="bwi-refresh"
-        size="small"
-        type="button"
-        [appA11yTitle]="'refresh' | i18n"
-        (click)="refreshCurrentTab()"
-      ></button>
-    </bit-section-header>
-    <span class="tw-text-muted tw-px-1" bitTypography="body2">{{
-      "autofillSuggestionsTip" | i18n
-    }}</span>
-  </bit-section>
-</ng-container>

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

@@ -3,6 +3,7 @@ import { Component } 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,
@@ -45,7 +46,7 @@ export class AutofillVaultListItemsComponent {
 
   /**
    * Observable that determines whether the empty autofill tip should be shown.
-   * The tip is shown when there are no ciphers to autofill, no filter is applied, and autofill is allowed in
+   * The tip is shown when there are no login ciphers to autofill, no filter is applied, and autofill is allowed in
    * the current context (e.g. not in a popout).
    * @protected
    */
@@ -54,7 +55,10 @@ export class AutofillVaultListItemsComponent {
     this.autofillCiphers$,
     this.vaultPopupItemsService.autofillAllowed$,
   ]).pipe(
-    map(([hasFilter, ciphers, canAutoFill]) => !hasFilter && canAutoFill && ciphers.length === 0),
+    map(
+      ([hasFilter, ciphers, canAutoFill]) =>
+        !hasFilter && canAutoFill && ciphers.filter((c) => c.type == CipherType.Login).length === 0,
+    ),
   );
 
   constructor(private vaultPopupItemsService: VaultPopupItemsService) {

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

@@ -1,4 +1,4 @@
-<bit-section *ngIf="ciphers?.length > 0">
+<bit-section *ngIf="ciphers?.length > 0 || description">
   <bit-section-header>
     <h2 bitTypography="h6">
       {{ title }}
@@ -13,6 +13,9 @@
     ></button>
     <span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
   </bit-section-header>
+  <div *ngIf="description" class="tw-text-muted tw-px-1 tw-mb-2" bitTypography="body2">
+    {{ description }}
+  </div>
   <bit-item-group>
     <bit-item *ngFor="let cipher of ciphers">
       <a

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

@@ -50,6 +50,13 @@ export class VaultListItemsContainerComponent {
   @Input()
   title: string;
 
+  /**
+   * Optional description for the vault list item section. Will be shown below the title even when
+   * no ciphers are available.
+   */
+  @Input()
+  description: string;
+
   /**
    * Option to show a refresh button in the section header.
    */