[PM-8333] Autofill refresh button for sidebar popup (Firefox) (#9314)

* [PM-8333] Ensure title suffix is aligned with title

* [PM-8333] Add refresh button for autofill list items section for FF sidebar

* [PM-8333] Add button type

apps/browser/src/platform/popup/popup-section-header/popup-section-header.component.html

@@ -1,5 +1,5 @@
 <div class="tw-flex tw-justify-between tw-items-end tw-gap-1 tw-px-1 tw-pb-1">
-  <div>
+  <div class="tw-flex tw-items-center tw-gap-1">
     <h2 bitTypography="h6" noMargin class="tw-mb-0 tw-text-headers">
       {{ title }}
     </h2>

apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
 import {
   CardComponent,
@@ -64,6 +64,20 @@ export const TailingIcon: Story = {
   },
 };
 
+export const TitleSuffix: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <popup-section-header [title]="title">
+        <button bitIconButton="bwi-refresh" size="small" slot="title-suffix"></button>
+      </popup-section-header>
+    `,
+  }),
+  args: {
+    title: "Title Suffix",
+  },
+};
+
 export const WithSections: Story = {
   render: () => ({
     template: `

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

@@ -2,11 +2,23 @@
   *ngIf="autofillCiphers$ | async as ciphers"
   [ciphers]="ciphers"
   [title]="'autofillSuggestions' | i18n"
+  [showRefresh]="showRefresh"
+  (onRefresh)="refreshCurrentTab()"
   showAutoFill
 ></app-vault-list-items-container>
 <ng-container *ngIf="showEmptyAutofillTip$ | async">
   <bit-section>
-    <popup-section-header [title]="'autofillSuggestions' | i18n"></popup-section-header>
+    <popup-section-header [title]="'autofillSuggestions' | i18n">
+      <button
+        *ngIf="showRefresh"
+        bitIconButton="bwi-refresh"
+        size="small"
+        slot="title-suffix"
+        type="button"
+        [appA11yTitle]="'refresh' | i18n"
+        (click)="refreshCurrentTab()"
+      ></button>
+    </popup-section-header>
     <span class="tw-text-muted tw-px-1" bitTypography="body2">{{
       "autofillSuggestionsTip" | i18n
     }}</span>

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

@@ -4,8 +4,9 @@ import { combineLatest, map, Observable } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { SectionComponent, TypographyModule } from "@bitwarden/components";
+import { IconButtonModule, SectionComponent, TypographyModule } from "@bitwarden/components";
 
+import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
 import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup-section-header/popup-section-header.component";
 import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
 import { VaultListItemsContainerComponent } from "../vault-list-items-container/vault-list-items-container.component";
@@ -19,6 +20,7 @@ import { VaultListItemsContainerComponent } from "../vault-list-items-container/
     VaultListItemsContainerComponent,
     JslibModule,
     PopupSectionHeaderComponent,
+    IconButtonModule,
   ],
   selector: "app-autofill-vault-list-items",
   templateUrl: "autofill-vault-list-items.component.html",
@@ -31,6 +33,12 @@ export class AutofillVaultListItemsComponent {
   protected autofillCiphers$: Observable<CipherView[]> =
     this.vaultPopupItemsService.autoFillCiphers$;
 
+  /**
+   * Flag indicating whether the refresh button should be shown. Only shown when the popup is within the FF sidebar.
+   * @protected
+   */
+  protected showRefresh: boolean = BrowserPopupUtils.inSidebar(window);
+
   /**
    * 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
@@ -48,4 +56,12 @@ export class AutofillVaultListItemsComponent {
   constructor(private vaultPopupItemsService: VaultPopupItemsService) {
     // TODO: Migrate logic to show Autofill policy toast PM-8144
   }
+
+  /**
+   * Refreshes the current tab to re-populate the autofill ciphers.
+   * @protected
+   */
+  protected refreshCurrentTab() {
+    this.vaultPopupItemsService.refreshCurrentTab();
+  }
 }

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

@@ -1,6 +1,15 @@
 <bit-section *ngIf="ciphers?.length > 0">
   <popup-section-header [title]="title">
     <span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
+    <button
+      *ngIf="showRefresh"
+      bitIconButton="bwi-refresh"
+      type="button"
+      size="small"
+      slot="title-suffix"
+      (click)="onRefresh.emit()"
+      [appA11yTitle]="'refresh' | i18n"
+    ></button>
   </popup-section-header>
   <bit-item-group>
     <bit-item *ngFor="let cipher of ciphers">

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

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { booleanAttribute, Component, Input } from "@angular/core";
+import { booleanAttribute, Component, EventEmitter, Input, Output } from "@angular/core";
 import { RouterLink } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -33,12 +33,33 @@ import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup
   standalone: true,
 })
 export class VaultListItemsContainerComponent {
+  /**
+   * The list of ciphers to display.
+   */
   @Input()
   ciphers: CipherView[];
 
+  /**
+   * Title for the vault list item section.
+   */
   @Input()
   title: string;
 
+  /**
+   * Option to show a refresh button in the section header.
+   */
+  @Input({ transform: booleanAttribute })
+  showRefresh: boolean;
+
+  /**
+   * Event emitted when the refresh button is clicked.
+   */
+  @Output()
+  onRefresh = new EventEmitter<void>();
+
+  /**
+   * Option to show the autofill button for each item.
+   */
   @Input({ transform: booleanAttribute })
   showAutoFill: boolean;
 }