[PM-1504] Migrate Dialogs to DialogService (#5013)

This PR introduces a generic `DialogService` which can be used by all the clients. This allows us to decouple dialogs from the `PlatformUtilsHelper`.

The `DialogService` provides a new method, `openSimpleDialog` which is the new interface for that type of dialogs.

This gives us 3 different implementations: 
- Web: DialogService modern dialogs
- Browser: SweetAlert
- Desktop: Native electron based

libs/angular/src/tools/export/components/export.component.ts

@@ -14,6 +14,8 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { EncryptedExportType, EventType } from "@bitwarden/common/enums";
 import { VaultExportServiceAbstraction } from "@bitwarden/exporter/vault-export";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../../services/dialog";
+
 @Directive()
 export class ExportComponent implements OnInit, OnDestroy {
   @Output() onSaved = new EventEmitter();
@@ -48,7 +50,8 @@ export class ExportComponent implements OnInit, OnDestroy {
     private logService: LogService,
     private userVerificationService: UserVerificationService,
     private formBuilder: UntypedFormBuilder,
-    protected fileDownloadService: FileDownloadService
+    protected fileDownloadService: FileDownloadService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -126,25 +129,22 @@ export class ExportComponent implements OnInit, OnDestroy {
 
   async warningDialog() {
     if (this.encryptedFormat) {
-      return await this.platformUtilsService.showDialog(
-        "<p>" +
+      return await this.dialogService.openSimpleDialog({
+        title: { key: "confirmVaultExport" },
+        content:
           this.i18nService.t("encExportKeyWarningDesc") +
-          "<p>" +
+          " " +
           this.i18nService.t("encExportAccountWarningDesc"),
-        this.i18nService.t("confirmVaultExport"),
-        this.i18nService.t("exportVault"),
-        this.i18nService.t("cancel"),
-        "warning",
-        true
-      );
+        acceptButtonText: { key: "exportVault" },
+        type: SimpleDialogType.WARNING,
+      });
     } else {
-      return await this.platformUtilsService.showDialog(
-        this.i18nService.t("exportWarningDesc"),
-        this.i18nService.t("confirmVaultExport"),
-        this.i18nService.t("exportVault"),
-        this.i18nService.t("cancel"),
-        "warning"
-      );
+      return await this.dialogService.openSimpleDialog({
+        title: { key: "confirmVaultExport" },
+        content: { key: "exportWarningDesc" },
+        acceptButtonText: { key: "exportVault" },
+        type: SimpleDialogType.WARNING,
+      });
     }
   }
 

libs/angular/src/tools/send/add-edit.component.ts

@@ -19,6 +19,8 @@ import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
 @Directive()
 export class AddEditComponent implements OnInit, OnDestroy {
   @Input() sendId: string;
@@ -60,7 +62,8 @@ export class AddEditComponent implements OnInit, OnDestroy {
     protected policyService: PolicyService,
     private logService: LogService,
     protected stateService: StateService,
-    protected sendApiService: SendApiService
+    protected sendApiService: SendApiService,
+    protected dialogService: DialogServiceAbstraction
   ) {
     this.typeOptions = [
       { name: i18nService.t("sendTypeFile"), value: SendType.File },
@@ -229,15 +232,13 @@ export class AddEditComponent implements OnInit, OnDestroy {
     if (this.deletePromise != null) {
       return false;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("deleteSendConfirmation"),
-      this.i18nService.t("deleteSend"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning",
-      false,
-      this.componentName != "" ? this.componentName + " .modal-content" : null
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteSend" },
+      content: { key: "deleteSendConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }
@@ -308,14 +309,14 @@ export class AddEditComponent implements OnInit, OnDestroy {
         this.i18nService.t(this.editMode ? "editedSend" : "createdSend")
       );
     } else {
-      await this.platformUtilsService.showDialog(
-        this.i18nService.t(this.editMode ? "editedSend" : "createdSend"),
-        null,
-        this.i18nService.t("ok"),
-        null,
-        "success",
-        null
-      );
+      await this.dialogService.openSimpleDialog({
+        title: "",
+        content: { key: this.editMode ? "editedSend" : "createdSend" },
+        acceptButtonText: { key: "ok" },
+        cancelButtonText: null,
+        type: SimpleDialogType.SUCCESS,
+      });
+
       await this.copyLinkToClipboard(this.link);
     }
   }

libs/angular/src/tools/send/send.component.ts

@@ -13,6 +13,8 @@ import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
 @Directive()
 export class SendComponent implements OnInit, OnDestroy {
   disableSend = false;
@@ -49,7 +51,8 @@ export class SendComponent implements OnInit, OnDestroy {
     protected searchService: SearchService,
     protected policyService: PolicyService,
     private logService: LogService,
-    protected sendApiService: SendApiService
+    protected sendApiService: SendApiService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -125,13 +128,13 @@ export class SendComponent implements OnInit, OnDestroy {
     if (this.actionPromise != null || s.password == null) {
       return;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("removePasswordConfirmation"),
-      this.i18nService.t("removePassword"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removePassword" },
+      content: { key: "removePasswordConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }
@@ -156,13 +159,13 @@ export class SendComponent implements OnInit, OnDestroy {
     if (this.actionPromise != null) {
       return false;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("deleteSendConfirmation"),
-      this.i18nService.t("deleteSend"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteSend" },
+      content: { key: "deleteSendConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }