pm-18084 Connect new notification bar experience buttons (#13339)

* pm-18084 -initial structure and functions implemented

* update stories to match new args

* change handleSave name

* include new login button for save

* fix stories

apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts

@@ -12,6 +12,7 @@ type Args = {
   ciphers: NotificationCipherData[];
   notificationType: NotificationType;
   theme: Theme;
+  handleEditOrUpdateAction: (e: Event) => void;
 };
 
 export default {

apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts

@@ -8,6 +8,7 @@ import { NotificationFooter } from "../../notification/footer";
 type Args = {
   notificationType: NotificationType;
   theme: Theme;
+  handleSaveAction: (e: Event) => void;
 };
 
 export default {

apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts

@@ -6,6 +6,7 @@ import { ButtonRow } from "../../rows/button-row";
 
 type Args = {
   theme: Theme;
+  buttonAction: (e: Event) => void;
 };
 
 export default {

apps/browser/src/autofill/content/components/notification/body.ts

@@ -19,11 +19,13 @@ export function NotificationBody({
   ciphers,
   notificationType,
   theme = ThemeTypes.Light,
+  handleEditOrUpdateAction,
 }: {
   ciphers: NotificationCipherData[];
   customClasses?: string[];
   notificationType?: NotificationType;
   theme: Theme;
+  handleEditOrUpdateAction: (e: Event) => void;
 }) {
   // @TODO get client vendor from context
   const isSafari = false;
@@ -37,9 +39,7 @@ export function NotificationBody({
             cipher,
             notificationType,
             theme,
-            handleAction: () => {
+            handleAction: handleEditOrUpdateAction,
-              // @TODO connect update or edit actions to handler
-            },
           }),
         }),
       )}

apps/browser/src/autofill/content/components/notification/container.ts

@@ -24,7 +24,13 @@ export function NotificationContainer({
   theme = ThemeTypes.Light,
   type,
   ciphers,
-}: NotificationBarIframeInitData & { handleCloseNotification: (e: Event) => void } & {
+  handleSaveAction,
+  handleEditOrUpdateAction,
+}: NotificationBarIframeInitData & {
+  handleCloseNotification: (e: Event) => void;
+  handleSaveAction: (e: Event) => void;
+  handleEditOrUpdateAction: (e: Event) => void;
+} & {
   i18n: { [key: string]: string };
   type: NotificationType; // @TODO typing override for generic `NotificationBarIframeInitData.type`
   ciphers: NotificationCipherData[];
@@ -42,12 +48,14 @@ export function NotificationContainer({
       })}
       ${showBody
         ? NotificationBody({
+            handleEditOrUpdateAction,
             ciphers,
             notificationType: type,
             theme,
           })
         : null}
       ${NotificationFooter({
+        handleSaveAction,
         theme,
         notificationType: type,
       })}

apps/browser/src/autofill/content/components/notification/footer.ts

@@ -12,9 +12,11 @@ import { ActionRow } from "../rows/action-row";
 import { ButtonRow } from "../rows/button-row";
 
 export function NotificationFooter({
+  handleSaveAction,
   notificationType,
   theme,
 }: {
+  handleSaveAction: (e: Event) => void;
   notificationType?: NotificationType;
   theme: Theme;
 }) {
@@ -25,8 +27,12 @@ export function NotificationFooter({
   return html`
     <div class=${notificationFooterStyles({ theme })}>
       ${isChangeNotification
-        ? ActionRow({ itemText: saveNewItemText, handleAction: () => {}, theme })
+        ? ActionRow({
-        : ButtonRow({ theme })}
+            itemText: saveNewItemText,
+            handleAction: handleSaveAction,
+            theme,
+          })
+        : ButtonRow({ theme, buttonAction: handleSaveAction })}
     </div>
   `;
 }

apps/browser/src/autofill/content/components/rows/button-row.ts

@@ -8,12 +8,18 @@ import { spacing, themes } from "../../../content/components/constants/styles";
 import { Folder, User } from "../../../content/components/icons";
 import { DropdownMenu } from "../dropdown-menu";
 
-export function ButtonRow({ theme }: { theme: Theme }) {
+export function ButtonRow({
+  theme,
+  buttonAction,
+}: {
+  theme: Theme;
+  buttonAction: (e: Event) => void;
+}) {
   return html`
     <div class=${buttonRowStyles}>
       ${[
         ActionButton({
-          buttonAction: () => {},
+          buttonAction: buttonAction,
           buttonText: "Action Button",
           theme,
         }),

apps/browser/src/autofill/notification/bar.ts

@@ -97,6 +97,8 @@ function initNotificationBar(message: NotificationBarWindowMessage) {
           type: notificationBarIframeInitData.type as NotificationType,
           theme: resolvedTheme,
           handleCloseNotification,
+          handleSaveAction,
+          handleEditOrUpdateAction,
           i18n,
           ciphers: cipherData,
         }),
@@ -169,14 +171,27 @@ function initNotificationBar(message: NotificationBarWindowMessage) {
 
   globalThis.addEventListener("resize", adjustHeight);
   adjustHeight();
-}
-
   function handleCloseNotification(e: Event) {
     e.preventDefault();
     sendPlatformMessage({
       command: "bgCloseNotificationBar",
     });
   }
+  function handleEditOrUpdateAction(e: Event) {
+    const notificationType = initData.type;
+    e.preventDefault();
+    notificationType === "add" ? sendSaveCipherMessage(true) : sendSaveCipherMessage(false);
+  }
+}
+
+function handleSaveAction(e: Event) {
+  e.preventDefault();
+
+  sendSaveCipherMessage(removeIndividualVault());
+  if (removeIndividualVault()) {
+    return;
+  }
+}
 
 function handleTypeAdd() {
   setContent(document.getElementById("template-add") as HTMLTemplateElement);