diff --git a/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts index c4b32e8b0f1..e43bc08b920 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/notification/body.lit-stories.ts +++ b/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 { diff --git a/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts index d63c72bf019..b03aeeae311 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts +++ b/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 { diff --git a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts index 3283c2798a3..ffef4751627 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts +++ b/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 { diff --git a/apps/browser/src/autofill/content/components/notification/body.ts b/apps/browser/src/autofill/content/components/notification/body.ts index 6dc957ab8b8..2433381dfba 100644 --- a/apps/browser/src/autofill/content/components/notification/body.ts +++ b/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: () => { - // @TODO connect update or edit actions to handler - }, + handleAction: handleEditOrUpdateAction, }), }), )} diff --git a/apps/browser/src/autofill/content/components/notification/container.ts b/apps/browser/src/autofill/content/components/notification/container.ts index 8d1b57c80cd..1cdde3ec3ed 100644 --- a/apps/browser/src/autofill/content/components/notification/container.ts +++ b/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, })} diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts index 91a72dc9aab..edc6d6f6e00 100644 --- a/apps/browser/src/autofill/content/components/notification/footer.ts +++ b/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`
${isChangeNotification - ? ActionRow({ itemText: saveNewItemText, handleAction: () => {}, theme }) - : ButtonRow({ theme })} + ? ActionRow({ + itemText: saveNewItemText, + handleAction: handleSaveAction, + theme, + }) + : ButtonRow({ theme, buttonAction: handleSaveAction })}
`; } diff --git a/apps/browser/src/autofill/content/components/rows/button-row.ts b/apps/browser/src/autofill/content/components/rows/button-row.ts index ce14a242e97..942c8dd55fe 100644 --- a/apps/browser/src/autofill/content/components/rows/button-row.ts +++ b/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`
${[ ActionButton({ - buttonAction: () => {}, + buttonAction: buttonAction, buttonText: "Action Button", theme, }), diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts index 2316df19857..5a8d7855bea 100644 --- a/apps/browser/src/autofill/notification/bar.ts +++ b/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,13 +171,26 @@ 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 handleCloseNotification(e: Event) { +function handleSaveAction(e: Event) { e.preventDefault(); - sendPlatformMessage({ - command: "bgCloseNotificationBar", - }); + + sendSaveCipherMessage(removeIndividualVault()); + if (removeIndividualVault()) { + return; + } } function handleTypeAdd() {