[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

apps/web/src/app/settings/change-kdf/change-kdf.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { KdfConfig } from "@bitwarden/common/auth/models/domain/kdf-config";
 import {
@@ -10,7 +11,6 @@ import {
   DEFAULT_ARGON2_PARALLELISM,
   KdfType,
 } from "@bitwarden/common/enums";
-import { DialogService } from "@bitwarden/components";
 
 import { ChangeKdfConfirmationComponent } from "./change-kdf-confirmation.component";
 
@@ -25,7 +25,7 @@ export class ChangeKdfComponent implements OnInit {
   kdfOptions: any[] = [];
   recommendedPbkdf2Iterations = DEFAULT_PBKDF2_ITERATIONS;
 
-  constructor(private stateService: StateService, private dialogService: DialogService) {
+  constructor(private stateService: StateService, private dialogService: DialogServiceAbstraction) {
     this.kdfOptions = [
       { name: "PBKDF2 SHA-256", value: KdfType.PBKDF2_SHA256 },
       { name: "Argon2id", value: KdfType.Argon2id },

apps/web/src/app/settings/change-password.component.ts

@@ -3,6 +3,7 @@ import { Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "@bitwarden/angular/auth/components/change-password.component";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -61,7 +62,8 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
     private keyConnectorService: KeyConnectorService,
     private router: Router,
     private organizationApiService: OrganizationApiServiceAbstraction,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -70,7 +72,8 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
       passwordGenerationService,
       platformUtilsService,
       policyService,
-      stateService
+      stateService,
+      dialogService
     );
   }
 
@@ -99,13 +102,14 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
       }
 
       if (hasOldAttachments) {
-        const learnMore = await this.platformUtilsService.showDialog(
-          this.i18nService.t("oldAttachmentsNeedFixDesc"),
-          null,
-          this.i18nService.t("learnMore"),
-          this.i18nService.t("close"),
-          "warning"
-        );
+        const learnMore = await this.dialogService.openSimpleDialog({
+          title: { key: "warning" },
+          content: { key: "oldAttachmentsNeedFixDesc" },
+          acceptButtonText: { key: "learnMore" },
+          cancelButtonText: { key: "close" },
+          type: SimpleDialogType.WARNING,
+        });
+
         if (learnMore) {
           this.platformUtilsService.launchUri(
             "https://bitwarden.com/help/attachments/#add-storage-space"
@@ -115,17 +119,17 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
         return;
       }
 
-      const result = await this.platformUtilsService.showDialog(
-        this.i18nService.t("updateEncryptionKeyWarning") +
+      const result = await this.dialogService.openSimpleDialog({
+        title: { key: "rotateEncKeyTitle" },
+        content:
+          this.i18nService.t("updateEncryptionKeyWarning") +
           " " +
           this.i18nService.t("updateEncryptionKeyExportWarning") +
           " " +
           this.i18nService.t("rotateEncKeyConfirmation"),
-        this.i18nService.t("rotateEncKeyTitle"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
+        type: SimpleDialogType.WARNING,
+      });
+
       if (!result) {
         this.rotateEncKey = false;
       }

apps/web/src/app/settings/preferences.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { concatMap, filter, map, Observable, Subject, takeUntil, tap } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -53,7 +54,8 @@ export class PreferencesComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private messagingService: MessagingService,
     private themingService: AbstractThemingService,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private dialogService: DialogServiceAbstraction
   ) {
     this.vaultTimeoutOptions = [
       { name: i18nService.t("oneMinute"), value: 1 },
@@ -112,13 +114,12 @@ export class PreferencesComponent implements OnInit {
       .pipe(
         concatMap(async (action) => {
           if (action === VaultTimeoutAction.LogOut) {
-            const confirmed = await this.platformUtilsService.showDialog(
-              this.i18nService.t("vaultTimeoutLogOutConfirmation"),
-              this.i18nService.t("vaultTimeoutLogOutConfirmationTitle"),
-              this.i18nService.t("yes"),
-              this.i18nService.t("cancel"),
-              "warning"
-            );
+            const confirmed = await this.dialogService.openSimpleDialog({
+              title: { key: "vaultTimeoutLogOutConfirmationTitle" },
+              content: { key: "vaultTimeoutLogOutConfirmation" },
+              type: SimpleDialogType.WARNING,
+            });
+
             if (!confirmed) {
               this.form.controls.vaultTimeoutAction.patchValue(VaultTimeoutAction.Lock, {
                 emitEvent: false,