Remove unneeded props.

apps/browser/src/autofill/content/components/notification/at-risk-password/body.ts

@@ -2,7 +2,7 @@ import { html, nothing } from "lit";
 
 import { Theme } from "@bitwarden/common/platform/enums";
 
-import { Celebrate, Keyhole, Warning } from "../../illustrations";
+import { Warning } from "../../illustrations";
 import { iconContainerStyles, notificationConfirmationBodyStyles } from "../confirmation/body";
 
 import { AtRiskNotificationMessage } from "./message";
@@ -10,40 +10,25 @@ import { AtRiskNotificationMessage } from "./message";
 export const componentClassPrefix = "notification-confirmation-body";
 
 export type AtRiskNotificationBodyProps = {
-  buttonAria: string;
-  buttonText: string;
   confirmationMessage: string;
-  error?: string;
-  itemName?: string;
   messageDetails?: string;
-  tasksAreComplete?: boolean;
   theme: Theme;
   handleOpenVault: (e: Event) => void;
 };
 
 export function AtRiskNotificationBody({
-  buttonAria,
-  buttonText,
   confirmationMessage,
-  error,
-  itemName,
   messageDetails,
-  tasksAreComplete,
   theme,
   handleOpenVault,
 }: AtRiskNotificationBodyProps) {
-  const IconComponent = tasksAreComplete ? Keyhole : !error ? Celebrate : Warning;
-
-  const showConfirmationMessage = confirmationMessage || buttonText || messageDetails;
+  const showConfirmationMessage = confirmationMessage || messageDetails;
 
   return html`
     <div class=${notificationConfirmationBodyStyles({ theme })}>
-      <div class=${iconContainerStyles(error)}>${IconComponent({ theme })}</div>
+      <div class=${iconContainerStyles(true)}>${Warning()}</div>
       ${showConfirmationMessage
         ? AtRiskNotificationMessage({
-            buttonAria,
-            buttonText,
-            itemName,
             message: confirmationMessage,
             messageDetails,
             theme,

apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts

@@ -17,25 +17,21 @@ import { AtRiskNotificationFooter } from "./footer";
 
 export type AtRiskNotificationProps = NotificationBarIframeInitData & {
   handleCloseNotification: (e: Event) => void;
-  handleOpenVault: (e: Event) => void;
-  handleOpenTasks: (e: Event) => void;
 } & {
   error?: string;
   i18n: I18n;
-  itemName: string;
   type: NotificationType;
   params: AtRiskPasswordNotificationParams;
 };
 
 export function AtRiskNotification({
-  error,
   handleCloseNotification,
   i18n,
   theme = ThemeTypes.Light,
   type,
   params,
 }: AtRiskNotificationProps) {
-  const headerMessage = getHeaderMessage(i18n, type, error);
+  const headerMessage = getHeaderMessage(i18n, type);
   const { passwordChangeUri, organizationName } = params;
 
   return html`
@@ -46,13 +42,8 @@ export function AtRiskNotification({
         theme,
       })}
       ${AtRiskNotificationBody({
-        buttonAria: "",
-        error: "At risk password",
         theme,
-        tasksAreComplete: false,
-        itemName: "",
         handleOpenVault: () => {},
-        buttonText: "",
         confirmationMessage: chrome.i18n.getMessage(
           passwordChangeUri ? "atRiskChangePrompt" : "atRiskNavigatePrompt",
           organizationName,
@@ -67,10 +58,6 @@ export function AtRiskNotification({
   `;
 }
 
-function getHeaderMessage(i18n: I18n, type?: NotificationType, error?: string) {
-  if (error) {
-    return i18n.saveFailure;
-  }
-
+function getHeaderMessage(i18n: I18n, type?: NotificationType) {
   return type === NotificationTypes.AtRiskPassword ? i18n.changePassword : undefined;
 }

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

@@ -60,7 +60,7 @@ export function NotificationConfirmationBody({
 }
 
 // Allow sharing of styles between notifications (@TODO isolate structural/presentational component layer)
-export const iconContainerStyles = (error?: string) => css`
+export const iconContainerStyles = (error?: string | boolean) => css`
   > svg {
     width: ${!error ? "50px" : "40px"};
     height: fit-content;

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

@@ -32,6 +32,7 @@ type NotificationBarIframeInitData = {
   removeIndividualVault?: boolean;
   theme?: Theme;
   type?: NotificationType;
+  params?: AtRiskPasswordNotificationParams | any;
 };
 
 type NotificationBarWindowMessage = {

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

@@ -7,6 +7,7 @@ import type { FolderView } from "@bitwarden/common/vault/models/view/folder.view
 import { AdjustNotificationBarMessageData } from "../background/abstractions/notification.background";
 import { NotificationCipherData } from "../content/components/cipher/types";
 import { CollectionView, OrgView } from "../content/components/common-types";
+import { AtRiskNotification } from "../content/components/notification/at-risk-password/container";
 import { NotificationConfirmationContainer } from "../content/components/notification/confirmation/container";
 import { NotificationContainer } from "../content/components/notification/container";
 import { selectedFolder as selectedFolderSignal } from "../content/components/signals/selected-folder";
@@ -19,6 +20,7 @@ import {
   NotificationBarWindowMessage,
   NotificationBarIframeInitData,
   NotificationType,
+  NotificationTypes,
 } from "./abstractions/notification-bar";
 
 const logService = new ConsoleLogService(false);
@@ -149,7 +151,24 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
     document.body.innerHTML = "";
     // Current implementations utilize a require for scss files which creates the need to remove the node.
     document.head.querySelectorAll('link[rel="stylesheet"]').forEach((node) => node.remove());
+
+    // Handle AtRiskPasswordNotification render
+    if (notificationBarIframeInitData.type === NotificationTypes.AtRiskPassword) {
+      return render(
+        AtRiskNotification({
+          ...notificationBarIframeInitData,
+          type: notificationBarIframeInitData.type as NotificationType,
+          theme: resolvedTheme,
+          i18n,
+          params: initData.params,
+          handleCloseNotification,
+        }),
+        document.body,
+      );
+    }
+
     const orgId = selectedVaultSignal.get();
+
     await Promise.all([
       new Promise<OrgView[]>((resolve) =>
         sendPlatformMessage({ command: "bgGetOrgData" }, resolve),
@@ -183,7 +202,6 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
           handleSaveAction,
           handleEditOrUpdateAction,
           i18n,
-          params: initData.params,
         }),
         document.body,
       );