Merge branch 'main' into autofill/pm-8027-inline-menu-appears-within-input-fields-that-do-not-relate-to-user-login

apps/browser/src/autofill/background/abstractions/overlay.background.ts

@@ -77,7 +77,9 @@ type OverlayBackgroundExtensionMessageHandlers = {
   updateFocusedFieldData: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   collectPageDetailsResponse: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
   unlockCompleted: ({ message }: BackgroundMessageParam) => void;
+  addedCipher: () => void;
   addEditCipherSubmitted: () => void;
+  editedCipher: () => void;
   deletedCipher: () => void;
 };
 

apps/browser/src/autofill/background/overlay.background.spec.ts

@@ -1000,29 +1000,23 @@ describe("OverlayBackground", () => {
         });
       });
 
-      describe("addEditCipherSubmitted message handler", () => {
-        it("updates the overlay ciphers", () => {
-          const message = {
-            command: "addEditCipherSubmitted",
-          };
-          jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
+      describe("extension messages that trigger an update of the inline menu ciphers", () => {
+        const extensionMessages = [
+          "addedCipher",
+          "addEditCipherSubmitted",
+          "editedCipher",
+          "deletedCipher",
+        ];
 
-          sendMockExtensionMessage(message);
-
-          expect(overlayBackground["updateOverlayCiphers"]).toHaveBeenCalled();
+        beforeEach(() => {
+          jest.spyOn(overlayBackground, "updateOverlayCiphers").mockImplementation();
         });
-      });
 
-      describe("deletedCipher message handler", () => {
-        it("updates the overlay ciphers", () => {
-          const message = {
-            command: "deletedCipher",
-          };
-          jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
-
-          sendMockExtensionMessage(message);
-
-          expect(overlayBackground["updateOverlayCiphers"]).toHaveBeenCalled();
+        extensionMessages.forEach((message) => {
+          it(`triggers an update of the overlay ciphers when the ${message} message is received`, () => {
+            sendMockExtensionMessage({ command: message });
+            expect(overlayBackground.updateOverlayCiphers).toHaveBeenCalled();
+          });
         });
       });
     });

apps/browser/src/autofill/background/overlay.background.ts

@@ -72,7 +72,9 @@ class OverlayBackground implements OverlayBackgroundInterface {
     updateFocusedFieldData: ({ message, sender }) => this.setFocusedFieldData(message, sender),
     collectPageDetailsResponse: ({ message, sender }) => this.storePageDetails(message, sender),
     unlockCompleted: ({ message }) => this.unlockCompleted(message),
+    addedCipher: () => this.updateOverlayCiphers(),
     addEditCipherSubmitted: () => this.updateOverlayCiphers(),
+    editedCipher: () => this.updateOverlayCiphers(),
     deletedCipher: () => this.updateOverlayCiphers(),
   };
   private readonly overlayButtonPortMessageHandlers: OverlayButtonPortMessageHandlers = {

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

@@ -1,11 +0,0 @@
-<div class="tw-flex tw-justify-between tw-items-end tw-gap-1 tw-px-1 tw-pb-1">
-  <div class="tw-flex tw-items-center tw-gap-1">
-    <h2 bitTypography="h6" noMargin class="tw-mb-0 tw-text-headers">
-      {{ title }}
-    </h2>
-    <ng-content select="[slot=title-suffix]"></ng-content>
-  </div>
-  <div class="tw-text-muted has-[button]:-tw-mb-1">
-    <ng-content select="[slot=end]"></ng-content>
-  </div>
-</div>

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

@@ -1,13 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-import { TypographyModule } from "@bitwarden/components";
-
-@Component({
-  standalone: true,
-  selector: "popup-section-header",
-  templateUrl: "./popup-section-header.component.html",
-  imports: [TypographyModule],
-})
-export class PopupSectionHeaderComponent {
-  @Input() title: string;
-}

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

@@ -1,104 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
-
-import {
-  CardComponent,
-  IconButtonModule,
-  SectionComponent,
-  TypographyModule,
-} from "@bitwarden/components";
-
-import { PopupSectionHeaderComponent } from "./popup-section-header.component";
-
-export default {
-  title: "Browser/Popup Section Header",
-  component: PopupSectionHeaderComponent,
-  args: {
-    title: "Title",
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [SectionComponent, CardComponent, TypographyModule, IconButtonModule],
-    }),
-  ],
-} as Meta<PopupSectionHeaderComponent>;
-
-type Story = StoryObj<PopupSectionHeaderComponent>;
-
-export const OnlyTitle: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <popup-section-header [title]="title"></popup-section-header>
-    `,
-  }),
-  args: {
-    title: "Only Title",
-  },
-};
-
-export const TrailingText: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <popup-section-header [title]="title">
-        <span bitTypography="body2" slot="end">13</span>
-      </popup-section-header>
-    `,
-  }),
-  args: {
-    title: "Trailing Text",
-  },
-};
-
-export const TailingIcon: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <popup-section-header [title]="title">
-        <button bitIconButton="bwi-star" size="small" slot="end"></button>
-      </popup-section-header>
-    `,
-  }),
-  args: {
-    title: "Trailing Icon",
-  },
-};
-
-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: `
-      <div class="tw-bg-background-alt tw-p-2">
-        <bit-section>
-          <popup-section-header title="Section 1">
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
-          </popup-section-header>
-          <bit-card>
-            <h3 bitTypography="h3">Card 1 Content</h3>
-          </bit-card>
-        </bit-section>
-        <bit-section>
-          <popup-section-header title="Section 2">
-            <button bitIconButton="bwi-star" size="small" slot="end"></button>
-          </popup-section-header>
-          <bit-card>
-            <h3 bitTypography="h3">Card 2 Content</h3>
-          </bit-card>
-        </bit-section>
-      </div>
-    `,
-  }),
-};

apps/browser/src/popup/app.module.ts

@@ -46,7 +46,6 @@ import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.comp
 import { PopupHeaderComponent } from "../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../platform/popup/layout/popup-page.component";
 import { PopupTabNavigationComponent } from "../platform/popup/layout/popup-tab-navigation.component";
-import { PopupSectionHeaderComponent } from "../platform/popup/popup-section-header/popup-section-header.component";
 import { FilePopoutCalloutComponent } from "../tools/popup/components/file-popout-callout.component";
 import { GeneratorComponent } from "../tools/popup/generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/password-generator-history.component";
@@ -119,7 +118,6 @@ import "../platform/popup/locales";
     PopupFooterComponent,
     PopupHeaderComponent,
     UserVerificationDialogComponent,
-    PopupSectionHeaderComponent,
     CurrentAccountComponent,
   ],
   declarations: [

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

@@ -8,17 +8,19 @@
 ></app-vault-list-items-container>
 <ng-container *ngIf="showEmptyAutofillTip$ | async">
   <bit-section>
-    <popup-section-header [title]="'autofillSuggestions' | i18n">
+    <bit-section-header>
+      <h2 bitTypography="h6">
+        {{ "autofillSuggestions" | i18n }}
+      </h2>
       <button
         *ngIf="showRefresh"
         bitIconButton="bwi-refresh"
         size="small"
-        slot="title-suffix"
         type="button"
         [appA11yTitle]="'refresh' | i18n"
         (click)="refreshCurrentTab()"
       ></button>
-    </popup-section-header>
+    </bit-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

@@ -3,10 +3,14 @@ import { Component } from "@angular/core";
 import { combineLatest, map, Observable } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { IconButtonModule, SectionComponent, TypographyModule } from "@bitwarden/components";
+import {
+  IconButtonModule,
+  SectionComponent,
+  SectionHeaderComponent,
+  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 { PopupCipherView } from "../../../views/popup-cipher.view";
 import { VaultListItemsContainerComponent } from "../vault-list-items-container/vault-list-items-container.component";
@@ -19,7 +23,7 @@ import { VaultListItemsContainerComponent } from "../vault-list-items-container/
     TypographyModule,
     VaultListItemsContainerComponent,
     JslibModule,
-    PopupSectionHeaderComponent,
+    SectionHeaderComponent,
     IconButtonModule,
   ],
   selector: "app-autofill-vault-list-items",

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

@@ -1,16 +1,18 @@
 <bit-section *ngIf="ciphers?.length > 0">
-  <popup-section-header [title]="title">
-    <span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
+  <bit-section-header>
+    <h2 bitTypography="h6">
+      {{ title }}
+    </h2>
     <button
       *ngIf="showRefresh"
       bitIconButton="bwi-refresh"
       type="button"
       size="small"
-      slot="title-suffix"
       (click)="onRefresh.emit()"
       [appA11yTitle]="'refresh' | i18n"
     ></button>
-  </popup-section-header>
+    <span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
+  </bit-section-header>
   <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

@@ -10,10 +10,10 @@ import {
   IconButtonModule,
   ItemModule,
   SectionComponent,
+  SectionHeaderComponent,
   TypographyModule,
 } from "@bitwarden/components";
 
-import { PopupSectionHeaderComponent } from "../../../../../platform/popup/popup-section-header/popup-section-header.component";
 import { PopupCipherView } from "../../../views/popup-cipher.view";
 import { ItemCopyActionsComponent } from "../item-copy-action/item-copy-actions.component";
 import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options.component";
@@ -28,7 +28,7 @@ import { ItemMoreOptionsComponent } from "../item-more-options/item-more-options
     SectionComponent,
     TypographyModule,
     JslibModule,
-    PopupSectionHeaderComponent,
+    SectionHeaderComponent,
     RouterLink,
     ItemCopyActionsComponent,
     ItemMoreOptionsComponent,