[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
2025-12-29 06:33:40 +00:00 · 2023-05-02 18:46:03 +02:00
parent 7c4b2c04b9
commit 4e1867682f
144 changed files with 1514 additions and 1212 deletions
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.ts
+++ b/apps/web/src/app/vault/individual-vault/add-edit.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/vault/components/add-edit.component";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -57,7 +58,8 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
    organizationService: OrganizationService,
    logService: LogService,
    passwordRepromptService: PasswordRepromptService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
  ) {
    super(
      cipherService,
@@ -73,7 +75,8 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
      logService,
      passwordRepromptService,
      organizationService,
-      sendApiService
+      sendApiService,
+      dialogService
    );
  }

--- a/apps/web/src/app/vault/individual-vault/attachments.component.ts
+++ b/apps/web/src/app/vault/individual-vault/attachments.component.ts
@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AttachmentsComponent as BaseAttachmentsComponent } from "@bitwarden/angular/vault/components/attachments.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -27,7 +28,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
    platformUtilsService: PlatformUtilsService,
    apiService: ApiService,
    logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
  ) {
    super(
      cipherService,
@@ -38,7 +40,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
      window,
      logService,
      stateService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
    );
  }

--- a/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-delete-dialog/bulk-delete-dialog.component.ts
+++ b/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-delete-dialog/bulk-delete-dialog.component.ts
@@ -1,6 +1,7 @@
 import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -8,7 +9,6 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { CollectionBulkDeleteRequest } from "@bitwarden/common/models/request/collection-bulk-delete.request";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherBulkDeleteRequest } from "@bitwarden/common/vault/models/request/cipher-bulk-delete.request";
-import { DialogService } from "@bitwarden/components";

 export interface BulkDeleteDialogParams {
  cipherIds?: string[];
@@ -28,7 +28,7 @@ export enum BulkDeleteDialogResult {
 * @param config Configuration for the dialog
 */
 export const openBulkDeleteDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
  config: DialogConfig<BulkDeleteDialogParams>
 ) => {
  return dialogService.open<BulkDeleteDialogResult, BulkDeleteDialogParams>(
--- a/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-move-dialog/bulk-move-dialog.component.ts
+++ b/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-move-dialog/bulk-move-dialog.component.ts
@@ -3,12 +3,12 @@ import { Component, Inject, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { firstValueFrom, Observable } from "rxjs";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
-import { DialogService } from "@bitwarden/components";

 export interface BulkMoveDialogParams {
  cipherIds?: string[];
@@ -25,7 +25,7 @@ export enum BulkMoveDialogResult {
 * @param config Configuration for the dialog
 */
 export const openBulkMoveDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
  config: DialogConfig<BulkMoveDialogParams>
 ) => {
  return dialogService.open<BulkMoveDialogResult, BulkMoveDialogParams>(
--- a/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-restore-dialog/bulk-restore-dialog.component.ts
+++ b/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-restore-dialog/bulk-restore-dialog.component.ts
@@ -1,10 +1,10 @@
 import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { DialogService } from "@bitwarden/components";

 export interface BulkRestoreDialogParams {
  cipherIds: string[];
@@ -21,7 +21,7 @@ export enum BulkRestoreDialogResult {
 * @param config Configuration for the dialog
 */
 export const openBulkRestoreDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
  config: DialogConfig<BulkRestoreDialogParams>
 ) => {
  return dialogService.open<BulkRestoreDialogResult, BulkRestoreDialogParams>(
--- a/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-share-dialog/bulk-share-dialog.component.ts
+++ b/apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-share-dialog/bulk-share-dialog.component.ts
@@ -1,6 +1,7 @@
 import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject, OnInit } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -11,7 +12,6 @@ import { CollectionView } from "@bitwarden/common/admin-console/models/view/coll
 import { Checkable, isChecked } from "@bitwarden/common/types/checkable";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";

 export interface BulkShareDialogParams {
  ciphers: CipherView[];
@@ -29,7 +29,7 @@ export enum BulkShareDialogResult {
 * @param config Configuration for the dialog
 */
 export const openBulkShareDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
  config: DialogConfig<BulkShareDialogParams>
 ) => {
  return dialogService.open<BulkShareDialogResult, BulkShareDialogParams>(
--- a/apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts
+++ b/apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts
@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -18,8 +19,16 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
    folderApiService: FolderApiServiceAbstraction,
    i18nService: I18nService,
    platformUtilsService: PlatformUtilsService,
-    logService: LogService
+    logService: LogService,
+    dialogService: DialogServiceAbstraction
  ) {
-    super(folderService, folderApiService, i18nService, platformUtilsService, logService);
+    super(
+      folderService,
+      folderApiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      dialogService
+    );
  }
 }
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { map, Subject, takeUntil } from "rxjs";

+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -40,7 +41,8 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
    private modalService: ModalService,
    private logService: LogService,
    private organizationApiService: OrganizationApiServiceAbstraction,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    private dialogService: DialogServiceAbstraction
  ) {}

  async ngOnInit() {
@@ -80,13 +82,12 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
  }

  async unlinkSso(org: Organization) {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("unlinkSsoConfirmation"),
-      org.name,
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: org.name,
+      content: { key: "unlinkSsoConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -103,13 +104,12 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
  }

  async leave(org: Organization) {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("leaveOrganizationConfirmation"),
-      org.name,
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: org.name,
+      content: { key: "leaveOrganizationConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -29,6 +29,7 @@ import {
 } from "rxjs/operators";

 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -54,7 +55,7 @@ import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/pa
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService, Icons } from "@bitwarden/components";
+import { Icons } from "@bitwarden/components";

 import { UpdateKeyComponent } from "../../settings/update-key.component";
 import { VaultItemEvent } from "../components/vault-items/vault-item-event";
@@ -151,7 +152,7 @@ export class VaultComponent implements OnInit, OnDestroy {
    private changeDetectorRef: ChangeDetectorRef,
    private i18nService: I18nService,
    private modalService: ModalService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
    private tokenService: TokenService,
    private cryptoService: CryptoService,
    private messagingService: MessagingService,
@@ -650,13 +651,13 @@ export class VaultComponent implements OnInit, OnDestroy {
    if (!c.isDeleted) {
      return;
    }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("restoreItemConfirmation"),
-      this.i18nService.t("restoreItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "restoreItemConfirmation" },
+      content: { key: "restoreItem" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -701,15 +702,13 @@ export class VaultComponent implements OnInit, OnDestroy {
    }

    const permanent = c.isDeleted;
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t(
-        permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation"
-      ),
-      this.i18nService.t(permanent ? "permanentlyDeleteItem" : "deleteItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: permanent ? "permanentlyDeleteItem" : "deleteItem" },
+      content: { key: permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
--- a/apps/web/src/app/vault/org-vault/add-edit.component.ts
+++ b/apps/web/src/app/vault/org-vault/add-edit.component.ts
@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -49,7 +50,8 @@ export class AddEditComponent extends BaseAddEditComponent {
    logService: LogService,
    passwordRepromptService: PasswordRepromptService,
    organizationService: OrganizationService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
  ) {
    super(
      cipherService,
@@ -67,7 +69,8 @@ export class AddEditComponent extends BaseAddEditComponent {
      organizationService,
      logService,
      passwordRepromptService,
-      sendApiService
+      sendApiService,
+      dialogService
    );
  }

--- a/apps/web/src/app/vault/org-vault/attachments.component.ts
+++ b/apps/web/src/app/vault/org-vault/attachments.component.ts
@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";

+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
@@ -31,7 +32,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
    platformUtilsService: PlatformUtilsService,
    apiService: ApiService,
    logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
  ) {
    super(
      cipherService,
@@ -41,7 +43,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
      platformUtilsService,
      apiService,
      logService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
    );
  }

--- a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts
@@ -2,17 +2,17 @@ import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";

+import {
+  SimpleDialogType,
+  DialogServiceAbstraction,
+  SimpleDialogCloseType,
+  SimpleDialogOptions,
+} from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { ProductType } from "@bitwarden/common/enums";
 import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
-import {
-  DialogService,
-  SimpleDialogCloseType,
-  SimpleDialogOptions,
-  SimpleDialogType,
-} from "@bitwarden/components";

 import {
  CollectionAdminService,
@@ -66,7 +66,7 @@ export class VaultHeaderComponent {
  constructor(
    private organizationService: OrganizationService,
    private i18nService: I18nService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
    private collectionAdminService: CollectionAdminService,
    private router: Router
  ) {}
@@ -126,7 +126,7 @@ export class VaultHeaderComponent {
      orgUpgradeSimpleDialogOpts.cancelButtonText = null; // hide secondary btn
    }

-    const simpleDialog = this.dialogService.openSimpleDialog(orgUpgradeSimpleDialogOpts);
+    const simpleDialog = this.dialogService.openSimpleDialogRef(orgUpgradeSimpleDialogOpts);

    firstValueFrom(simpleDialog.closed).then((result: SimpleDialogCloseType | undefined) => {
      if (!result) {
--- a/apps/web/src/app/vault/org-vault/vault.component.ts
+++ b/apps/web/src/app/vault/org-vault/vault.component.ts
@@ -30,6 +30,7 @@ import {
 } from "rxjs/operators";

 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -52,7 +53,7 @@ import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/pa
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService, Icons } from "@bitwarden/components";
+import { Icons } from "@bitwarden/components";

 import {
  CollectionAdminService,
@@ -147,7 +148,7 @@ export class VaultComponent implements OnInit, OnDestroy {
    private syncService: SyncService,
    private i18nService: I18nService,
    private modalService: ModalService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
    private messagingService: MessagingService,
    private broadcasterService: BroadcasterService,
    private ngZone: NgZone,
@@ -662,13 +663,13 @@ export class VaultComponent implements OnInit, OnDestroy {
    if (!c.isDeleted) {
      return;
    }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("restoreItemConfirmation"),
-      this.i18nService.t("restoreItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "restoreItem" },
+      content: { key: "restoreItemConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -714,15 +715,13 @@ export class VaultComponent implements OnInit, OnDestroy {
    }

    const permanent = c.isDeleted;
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t(
-        permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation"
-      ),
-      this.i18nService.t(permanent ? "permanentlyDeleteItem" : "deleteItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: permanent ? "permanentlyDeleteItem" : "deleteItem" },
+      content: { key: permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -752,13 +751,12 @@ export class VaultComponent implements OnInit, OnDestroy {
      );
      return;
    }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("deleteCollectionConfirmation"),
-      collection.name,
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: collection.name,
+      content: { key: "deleteCollectionConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return;
    }