[PM-12505] - add delete send button to footer (#11187)

* add delete send button to footer

* add basic error handling

* update copy. user bitAction

* use arrow function. remove border class

apps/browser/src/_locales/en/messages.json

@@ -2374,6 +2374,10 @@
     "message": "Are you sure you want to delete this Send?",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
+  "deleteSendPermanentConfirmation": {
+    "message": "Are you sure you want to permanently delete this Send?",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "editSend": {
     "message": "Edit Send",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."

apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html

@@ -13,5 +13,14 @@
     <button bitButton type="submit" form="sendForm" buttonType="primary" #submitBtn>
       {{ "save" | i18n }}
     </button>
+    <button
+      *ngIf="config?.mode !== 'add'"
+      type="button"
+      buttonType="danger"
+      class="tw-ml-auto bwi-lg"
+      bitIconButton="bwi-trash"
+      [bitAction]="deleteSend"
+      appA11yTitle="{{ 'delete' | i18n }}"
+    ></button>
   </popup-footer>
 </popup-page>

apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts

@@ -8,8 +8,16 @@ import { map, switchMap } from "rxjs";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendId } from "@bitwarden/common/types/guid";
-import { AsyncActionsModule, ButtonModule, SearchModule } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  DialogService,
+  IconButtonModule,
+  SearchModule,
+  ToastService,
+} from "@bitwarden/components";
 import {
   DefaultSendFormConfigService,
   SendFormConfig,
@@ -58,6 +66,7 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
     JslibModule,
     FormsModule,
     ButtonModule,
+    IconButtonModule,
     PopupPageComponent,
     PopupHeaderComponent,
     PopupFooterComponent,
@@ -81,6 +90,9 @@ export class SendAddEditComponent {
     private location: Location,
     private i18nService: I18nService,
     private addEditFormConfigService: SendFormConfigService,
+    private sendApiService: SendApiService,
+    private toastService: ToastService,
+    private dialogService: DialogService,
   ) {
     this.subscribeToParams();
   }
@@ -92,6 +104,37 @@ export class SendAddEditComponent {
     this.location.back();
   }
 
+  deleteSend = async () => {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteSend" },
+      content: { key: "deleteSendPermanentConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await this.sendApiService.delete(this.config.originalSend?.id);
+    } catch (e) {
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: e.message,
+      });
+      return;
+    }
+
+    this.location.back();
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("deletedSend"),
+    });
+  };
+
   /**
    * Subscribes to the route query parameters and builds the configuration based on the parameters.
    */

libs/tools/send/send-ui/src/send-list-items-container/send-list-items-container.component.ts

@@ -64,7 +64,7 @@ export class SendListItemsContainerComponent {
   async deleteSend(s: SendView): Promise<boolean> {
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "deleteSend" },
-      content: { key: "deleteSendConfirmation" },
+      content: { key: "deleteSendPermanentConfirmation" },
       type: "warning",
     });