diff --git a/apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts b/apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts
index 450bfb2422..f5cb472a59 100644
--- a/apps/browser/src/platform/popup/popup-section-header/popup-section-header.stories.ts
+++ b/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: `
+
+
+
+ `,
+ }),
+ args: {
+ title: "Title Suffix",
+ },
+};
+
export const WithSections: Story = {
render: () => ({
template: `
diff --git a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
index d1735a8efe..0b108e8b81 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
+++ b/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
>
-
+
+
+
{{
"autofillSuggestionsTip" | i18n
}}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
index 99662393bd..c00e585e73 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
+++ b/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 =
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();
+ }
}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
index 55463a85f8..d3bb85c710 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -1,6 +1,15 @@
0">
{{ ciphers.length }}
+
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
index 27ee0a2cc0..f9b34e9616 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
+++ b/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();
+
+ /**
+ * Option to show the autofill button for each item.
+ */
@Input({ transform: booleanAttribute })
showAutoFill: boolean;
}