[PM-16245] delete btn in browser edit item

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html

@@ -26,5 +26,15 @@
     <button bitButton type="submit" form="cipherForm" buttonType="primary" #submitBtn>
       {{ "save" | i18n }}
     </button>
+
+    <button
+      slot="end"
+      *ngIf="canDeleteCipher$ | async"
+      [bitAction]="delete"
+      type="button"
+      buttonType="danger"
+      bitIconButton="bwi-trash"
+      [appA11yTitle]="'delete' | i18n"
+    ></button>
   </popup-footer>
 </popup-page>

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.spec.ts

@@ -7,11 +7,13 @@ import { EventCollectionService } from "@bitwarden/common/abstractions/event/eve
 import { EventType } from "@bitwarden/common/enums";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
 import { AddEditCipherInfo } from "@bitwarden/common/vault/types/add-edit-cipher-info";
 import {
   CipherFormConfig,
@@ -71,6 +73,13 @@ describe("AddEditV2Component", () => {
         { provide: I18nService, useValue: { t: (key: string) => key } },
         { provide: CipherService, useValue: cipherServiceMock },
         { provide: EventCollectionService, useValue: { collect } },
+        { provide: LogService, useValue: mock<LogService>() },
+        {
+          provide: CipherAuthorizationService,
+          useValue: {
+            canDeleteCipher$: jest.fn().mockReturnValue(true),
+          },
+        },
       ],
     })
       .overrideProvider(CipherFormConfigService, {
@@ -326,4 +335,23 @@ describe("AddEditV2Component", () => {
       expect(back).toHaveBeenCalled();
     });
   });
+
+  describe("delete", () => {
+    it("dialogService openSimpleDialog called when deleteBtn is hit", async () => {
+      const dialogSpy = jest
+        .spyOn(component["dialogService"], "openSimpleDialog")
+        .mockResolvedValue(true);
+
+      await component.delete();
+      expect(dialogSpy).toHaveBeenCalled();
+    });
+
+    it("should call deleteCipher when user confirms deletion", async () => {
+      const deleteCipherSpy = jest.spyOn(component as any, "deleteCipher");
+      jest.spyOn(component["dialogService"], "openSimpleDialog").mockResolvedValue(true);
+
+      await component.delete();
+      expect(deleteCipherSpy).toHaveBeenCalled();
+    });
+  });
 });

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -5,18 +5,27 @@
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule } from "@angular/forms";
 import { ActivatedRoute, Params, Router } from "@angular/router";
-import { firstValueFrom, map, switchMap } from "rxjs";
+import { firstValueFrom, map, Observable, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { CipherId, CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
 import { AddEditCipherInfo } from "@bitwarden/common/vault/types/add-edit-cipher-info";
-import { AsyncActionsModule, ButtonModule, SearchModule } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  SearchModule,
+  IconButtonModule,
+  DialogService,
+  ToastService,
+} from "@bitwarden/components";
 import {
   CipherFormConfig,
   CipherFormConfigService,
@@ -131,11 +140,13 @@
     CipherFormModule,
     AsyncActionsModule,
     PopOutComponent,
+    IconButtonModule,
   ],
 })
 export class AddEditV2Component implements OnInit {
   headerText: string;
   config: CipherFormConfig;
+  canDeleteCipher$: Observable<boolean>;
 
   get loading() {
     return this.config == null;
@@ -165,6 +176,10 @@
     private router: Router,
     private cipherService: CipherService,
     private eventCollectionService: EventCollectionService,
+    private logService: LogService,
+    private toastService: ToastService,
+    private dialogService: DialogService,
+    protected cipherAuthorizationService: CipherAuthorizationService,
   ) {
     this.subscribeToParams();
   }
@@ -281,6 +296,10 @@
           }
 
           if (["edit", "partial-edit"].includes(config.mode) && config.originalCipher?.id) {
+            this.canDeleteCipher$ = this.cipherAuthorizationService.canDeleteCipher$(
+              config.originalCipher,
+            );
+
             await this.eventCollectionService.collect(
               EventType.Cipher_ClientViewed,
               config.originalCipher.id,
@@ -337,6 +356,43 @@
         return this.i18nService.t(partOne, this.i18nService.t("typeSshKey"));
     }
   }
+
+  delete = async () => {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteItem" },
+      content: {
+        key: "deleteItemConfirmation",
+      },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return false;
+    }
+
+    try {
+      await this.deleteCipher();
+    } catch (e) {
+      this.logService.error(e);
+      return false;
+    }
+
+    await this.router.navigate([""]);
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("deletedItem"),
+    });
+
+    return true;
+  };
+
+  protected deleteCipher() {
+    return this.config.originalCipher.deletedDate
+      ? this.cipherService.deleteWithServer(this.config.originalCipher.id)
+      : this.cipherService.softDeleteWithServer(this.config.originalCipher.id);
+  }
 }
 
 /**