PM-24242 Add IDs to AtRisk Notification for automation (#15865)

* PM-24242

* fix ts issue in storybook

apps/browser/src/autofill/content/components/buttons/action-button.ts

@@ -8,6 +8,7 @@ import { Spinner } from "../icons";
 
 export type ActionButtonProps = {
   buttonText: string | TemplateResult;
+  dataTestId?: string;
   disabled?: boolean;
   isLoading?: boolean;
   theme: Theme;
@@ -17,6 +18,7 @@ export type ActionButtonProps = {
 
 export function ActionButton({
   buttonText,
+  dataTestId,
   disabled = false,
   isLoading = false,
   theme,
@@ -32,6 +34,7 @@ export function ActionButton({
   return html`
     <button
       class=${actionButtonStyles({ disabled, fullWidth, isLoading, theme })}
+      data-testid="${dataTestId}"
       title=${buttonText}
       type="button"
       @click=${handleButtonClick}

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

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from "@storybook/web-components";
 
 import { ThemeTypes } from "@bitwarden/common/platform/enums";
 
+import { NotificationTypes } from "../../../../../notification/abstractions/notification-bar";
+import { getNotificationTestId } from "../../../../../notification/bar";
 import {
   AtRiskNotification,
   AtRiskNotificationProps,
@@ -30,8 +32,10 @@ export default {
   },
 } as Meta<AtRiskNotificationProps>;
 
-const Template = (args: AtRiskNotificationProps) => AtRiskNotification({ ...args });
-
+const Template = (args: AtRiskNotificationProps) => {
+  const notificationTestId = getNotificationTestId(NotificationTypes.AtRiskPassword);
+  return AtRiskNotification({ ...args, notificationTestId });
+};
 export const Default: StoryObj<AtRiskNotificationProps> = {
   render: Template,
 };

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

@@ -18,11 +18,13 @@ export type AtRiskNotificationProps = NotificationBarIframeInitData & {
   handleCloseNotification: (e: Event) => void;
 } & {
   i18n: I18n;
+  notificationTestId: string;
 };
 
 export function AtRiskNotification({
   handleCloseNotification,
   i18n,
+  notificationTestId,
   theme = ThemeTypes.Light,
   params,
 }: AtRiskNotificationProps) {
@@ -33,7 +35,7 @@ export function AtRiskNotification({
   );
 
   return html`
-    <div class=${atRiskNotificationContainerStyles(theme)}>
+    <div data-testid="${notificationTestId}" class=${atRiskNotificationContainerStyles(theme)}>
       ${NotificationHeader({
         handleCloseNotification,
         i18n,

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

@@ -26,6 +26,7 @@ export function AtRiskNotificationFooter({
         open(passwordChangeUri, "_blank");
       },
       buttonText: AdditionalTasksButtonContent({ buttonText: i18n.changePassword, theme }),
+      dataTestId: "change-password-button",
       theme,
       fullWidth: false,
     })}

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

@@ -200,7 +200,7 @@ export function getNotificationTestId(
     [NotificationTypes.Unlock]: "unlock-notification-bar",
     [NotificationTypes.Add]: "save-notification-bar",
     [NotificationTypes.Change]: "update-notification-bar",
-    [NotificationTypes.AtRiskPassword]: "at-risk-password-notification-bar",
+    [NotificationTypes.AtRiskPassword]: "at-risk-notification-bar",
   }[notificationType];
 }
 
@@ -287,6 +287,7 @@ async function initNotificationBar(message: NotificationBarWindowMessage) {
           type: notificationBarIframeInitData.type as NotificationType,
           theme: resolvedTheme,
           i18n,
+          notificationTestId,
           params: initData.params,
           handleCloseNotification,
         }),