[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
2026-01-21 11:53:34 +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/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
@@ -3,6 +3,7 @@ import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { combineLatest, of, shareReplay, Subject, switchMap, takeUntil } from "rxjs";

+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -14,7 +15,6 @@ import {
 import { PermissionsApi } from "@bitwarden/common/admin-console/models/api/permissions.api";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { CollectionView } from "@bitwarden/common/admin-console/models/view/collection.view";
-import { DialogService } from "@bitwarden/components";

 import { flagEnabled } from "../../../../../../utils/flags";
 import {
@@ -130,7 +130,8 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
    private collectionAdminService: CollectionAdminService,
    private groupService: GroupService,
    private userService: UserAdminService,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    private dialogService: DialogServiceAbstraction
  ) {}

  async ngOnInit() {
@@ -364,15 +365,13 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
    const message = this.params.usesKeyConnector
      ? "removeUserConfirmationKeyConnector"
      : "removeOrgUserConfirmation";
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t(message),
-      this.i18nService.t("removeUserIdAccess", this.params.name),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning",
-      false,
-      "app-user-add-edit .modal-content"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removeUserIdAccess", placeholders: [this.params.name] },
+      content: { key: message },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -395,15 +394,13 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
      return;
    }

-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("revokeUserConfirmation"),
-      this.i18nService.t("revokeUserId", this.params.name),
-      this.i18nService.t("revokeAccess"),
-      this.i18nService.t("cancel"),
-      "warning",
-      false,
-      "app-user-add-edit .modal-content"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "revokeUserId", placeholders: [this.params.name] },
+      content: { key: "revokeUserConfirmation" },
+      acceptButtonText: { key: "revokeAccess" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -511,7 +508,7 @@ function mapToGroupAccessSelections(groups: string[]): AccessItemValue[] {
 * @param config Configuration for the dialog
 */
 export function openUserAddEditDialog(
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
  config: DialogConfig<MemberDialogParams>
 ) {
  return dialogService.open<MemberDialogResult, MemberDialogParams>(MemberDialogComponent, config);
--- a/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.ts
@@ -10,6 +10,7 @@ import {
 import { Subject, takeUntil } from "rxjs";
 import zxcvbn from "zxcvbn";

+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { PasswordStrengthComponent } from "@bitwarden/angular/shared/components/password-strength/password-strength.component";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -52,7 +53,8 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
    private policyService: PolicyService,
    private cryptoService: CryptoService,
    private logService: LogService,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    private dialogService: DialogServiceAbstraction
  ) {}

  async ngOnInit() {
@@ -135,13 +137,12 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
    }

    if (this.passwordStrengthResult.score < 3) {
-      const result = await this.platformUtilsService.showDialog(
-        this.i18nService.t("weakMasterPasswordDesc"),
-        this.i18nService.t("weakMasterPassword"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
+      const result = await this.dialogService.openSimpleDialog({
+        title: { key: "weakMasterPassword" },
+        content: { key: "weakMasterPasswordDesc" },
+        type: SimpleDialogType.WARNING,
+      });
+
      if (!result) {
        return false;
      }
--- a/apps/web/src/app/admin-console/organizations/members/people.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.ts
@@ -15,6 +15,12 @@ import {

 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import {
+  SimpleDialogType,
+  DialogServiceAbstraction,
+  SimpleDialogCloseType,
+  SimpleDialogOptions,
+} from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -48,12 +54,6 @@ import { CollectionDetailsResponse } from "@bitwarden/common/admin-console/model
 import { ProductType } from "@bitwarden/common/enums";
 import { ListResponse } from "@bitwarden/common/models/response/list.response";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import {
-  DialogService,
-  SimpleDialogCloseType,
-  SimpleDialogOptions,
-  SimpleDialogType,
-} from "@bitwarden/components";

 import { EntityEventsComponent } from "../../../admin-console/organizations/manage/entity-events.component";
 import { BasePeopleComponent } from "../../../common/base.people.component";
@@ -123,7 +123,7 @@ export class PeopleComponent
    private organizationService: OrganizationService,
    private organizationApiService: OrganizationApiServiceAbstraction,
    private organizationUserService: OrganizationUserService,
-    private dialogService: DialogService,
+    dialogService: DialogServiceAbstraction,
    private router: Router,
    private groupService: GroupService,
    private collectionService: CollectionService
@@ -139,7 +139,8 @@ export class PeopleComponent
      logService,
      searchPipe,
      userNamePipe,
-      stateService
+      stateService,
+      dialogService
    );
  }

@@ -362,7 +363,7 @@ export class PeopleComponent
      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) {
@@ -541,17 +542,18 @@ export class PeopleComponent
  }

  protected async removeUserConfirmationDialog(user: OrganizationUserView) {
-    const warningMessage = user.usesKeyConnector
-      ? this.i18nService.t("removeUserConfirmationKeyConnector")
-      : this.i18nService.t("removeOrgUserConfirmation");
+    const content = user.usesKeyConnector
+      ? "removeUserConfirmationKeyConnector"
+      : "removeOrgUserConfirmation";

-    return this.platformUtilsService.showDialog(
-      warningMessage,
-      this.i18nService.t("removeUserIdAccess", this.userNamePipe.transform(user)),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    return await this.dialogService.openSimpleDialog({
+      title: {
+        key: "removeUserIdAccess",
+        placeholders: [this.userNamePipe.transform(user)],
+      },
+      content: { key: content },
+      type: SimpleDialogType.WARNING,
+    });
  }

  private async showBulkStatus(