PM-20514 do not allow users without edit permissions to edit a cipher in notification bar (#14521)

* PM-20514 add edit check and error out of update password early

* pass error

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

@@ -737,8 +737,10 @@ export default class NotificationBackground {
     const cipher = await this.cipherService.encrypt(cipherView, userId);
 
     const shouldGetTasks = await this.getNotificationFlag();
-
     try {
+      if (!cipherView.edit) {
+        throw new Error("You do not have permission to edit this cipher.");
+      }
       const tasks = shouldGetTasks ? await this.getSecurityTasks(userId) : [];
       const updatedCipherTask = tasks.find((task) => task.cipherId === cipherView?.id);
       const cipherHasTask = !!updatedCipherTask?.id;

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

@@ -22,7 +22,7 @@ export type NotificationConfirmationBodyProps = {
   messageDetails?: string;
   tasksAreComplete?: boolean;
   theme: Theme;
-  handleOpenVault: () => void;
+  handleOpenVault: (e: Event) => void;
 };
 
 export function NotificationConfirmationBody({

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

@@ -21,7 +21,7 @@ import { NotificationConfirmationFooter } from "./footer";
 
 export type NotificationConfirmationContainerProps = NotificationBarIframeInitData & {
   handleCloseNotification: (e: Event) => void;
-  handleOpenVault: () => void;
+  handleOpenVault: (e: Event) => void;
   handleOpenTasks: (e: Event) => void;
 } & {
   error?: string;
@@ -75,8 +75,10 @@ export function NotificationConfirmationContainer({
         buttonAria,
         buttonText,
         confirmationMessage,
-        tasksAreComplete,
+        error,
+        itemName,
         messageDetails,
+        tasksAreComplete,
         theme,
         handleOpenVault,
       })}

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

@@ -10,7 +10,7 @@ export type NotificationConfirmationMessageProps = {
   buttonText?: string;
   message?: string;
   messageDetails?: string;
-  handleClick: () => void;
+  handleClick: (e: Event) => void;
   theme: Theme;
 };
 
@@ -37,7 +37,7 @@ export function NotificationConfirmationMessage({
                       title=${buttonText}
                       class=${notificationConfirmationButtonTextStyles(theme)}
                       @click=${handleClick}
-                      @keydown=${(e: KeyboardEvent) => handleButtonKeyDown(e, handleClick)}
+                      @keydown=${(e: KeyboardEvent) => handleButtonKeyDown(e, () => handleClick(e))}
                       aria-label=${buttonAria}
                       tabindex="0"
                       role="button"

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

@@ -417,7 +417,8 @@ function handleSaveCipherConfirmation(message: NotificationBarWindowMessage) {
       error,
       itemName: itemName ?? i18n.typeLogin,
       task,
-      handleOpenVault: () => cipherId && openViewVaultItemPopout(cipherId),
+      handleOpenVault: (e: Event) =>
+        cipherId ? openViewVaultItemPopout(cipherId) : openAddEditVaultItemPopout(e, {}),
       handleOpenTasks: () => sendPlatformMessage({ command: "bgOpenAtRisksPasswords" }),
     }),
     document.body,