do not show irrelevant success information in the notification confirmation in an error case (#14825)

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

@@ -37,7 +37,7 @@ export function NotificationConfirmationBody({
   theme,
   handleOpenVault,
 }: NotificationConfirmationBodyProps) {
-  const IconComponent = tasksAreComplete ? Keyhole : !error ? Celebrate : Warning;
+  const IconComponent = error ? Warning : tasksAreComplete ? Celebrate : Keyhole;
 
   const showConfirmationMessage = confirmationMessage || buttonText || messageDetails;
 
@@ -48,8 +48,7 @@ export function NotificationConfirmationBody({
         ? NotificationConfirmationMessage({
             buttonAria,
             buttonText,
-            error,
-            itemName,
+            itemName: error ? undefined : itemName,
             message: confirmationMessage,
             messageDetails,
             theme,

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

@@ -51,9 +51,9 @@ export function NotificationConfirmationContainer({
 
   let messageDetails: string | undefined;
   let remainingTasksCount: number | undefined;
-  let tasksAreComplete: boolean = false;
+  let tasksAreComplete: boolean = true;
 
-  if (task) {
+  if (task && !error) {
     remainingTasksCount = task.remainingTasksCount || 0;
     tasksAreComplete = remainingTasksCount === 0;
 
@@ -85,7 +85,7 @@ export function NotificationConfirmationContainer({
         theme,
         handleOpenVault,
       })}
-      ${remainingTasksCount
+      ${!error && remainingTasksCount
         ? NotificationConfirmationFooter({
             i18n,
             theme,

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

@@ -8,7 +8,6 @@ import { spacing, themes, typography } from "../../constants/styles";
 export type NotificationConfirmationMessageProps = {
   buttonAria?: string;
   buttonText?: string;
-  error?: string;
   itemName?: string;
   message?: string;
   messageDetails?: string;
@@ -19,7 +18,6 @@ export type NotificationConfirmationMessageProps = {
 export function NotificationConfirmationMessage({
   buttonAria,
   buttonText,
-  error,
   itemName,
   message,
   messageDetails,
@@ -31,7 +29,7 @@ export function NotificationConfirmationMessage({
       ${message || buttonText
         ? html`
             <div class=${singleLineWrapperStyles}>
-              ${!error && itemName
+              ${itemName
                 ? html`
                     <span class=${itemNameStyles(theme)} title=${itemName}> ${itemName} </span>
                   `