[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

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.ts

@@ -3,6 +3,7 @@ import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from "@angular/forms";
 import { Subject, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from "@bitwarden/common/abstractions/cryptoFunction.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrgDomainApiServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain-api.service.abstraction";
@@ -64,7 +65,8 @@ export class DomainAddEditDialogComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     private orgDomainApiService: OrgDomainApiServiceAbstraction,
     private orgDomainService: OrgDomainServiceAbstraction,
-    private validationService: ValidationService
+    private validationService: ValidationService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   //#region Angular Method Implementations
@@ -248,13 +250,12 @@ export class DomainAddEditDialogComponent implements OnInit, OnDestroy {
   }
 
   deleteDomain = async (): Promise<void> => {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("removeDomainWarning"),
-      this.i18nService.t("removeDomain"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removeDomain" },
+      content: { key: "removeDomainWarning" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return;
     }

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.ts

@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Params } from "@angular/router";
 import { concatMap, Observable, Subject, take, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrgDomainApiServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain-api.service.abstraction";
 import { OrgDomainServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain.service.abstraction";
@@ -10,7 +11,6 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
 import { HttpStatusCode } from "@bitwarden/common/enums";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
-import { DialogService } from "@bitwarden/components";
 
 import {
   DomainAddEditDialogComponent,
@@ -35,7 +35,7 @@ export class DomainVerificationComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     private orgDomainApiService: OrgDomainApiServiceAbstraction,
     private orgDomainService: OrgDomainServiceAbstraction,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private validationService: ValidationService
   ) {}
 
@@ -154,13 +154,12 @@ export class DomainVerificationComponent implements OnInit, OnDestroy {
   }
 
   async deleteDomain(orgDomainId: string): Promise<void> {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("removeDomainWarning"),
-      this.i18nService.t("removeDomain"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removeDomain" },
+      content: { key: "removeDomainWarning" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return;
     }

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { UntypedFormBuilder, FormControl } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -45,7 +46,8 @@ export class ScimComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private environmentService: EnvironmentService,
-    private organizationApiService: OrganizationApiServiceAbstraction
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -84,13 +86,13 @@ export class ScimComponent implements OnInit {
   }
 
   async rotateScimKey() {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("rotateScimKeyWarning"),
-      this.i18nService.t("rotateScimKey"),
-      this.i18nService.t("rotateKey"),
-      this.i18nService.t("cancel"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "rotateScimKey" },
+      content: { key: "rotateScimKeyWarning" },
+      acceptButtonText: { key: "rotateKey" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }

bitwarden_license/bit-web/src/app/admin-console/providers/clients/add-organization.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
@@ -27,7 +28,8 @@ export class AddOrganizationComponent implements OnInit {
     private webProviderService: WebProviderService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private validationService: ValidationService
+    private validationService: ValidationService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -49,13 +51,14 @@ export class AddOrganizationComponent implements OnInit {
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("addOrganizationConfirmation", organization.name, this.provider.name),
-      organization.name,
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: organization.name,
+      content: {
+        key: "addOrganizationConfirmation",
+        placeholders: [organization.name, this.provider.name],
+      },
+      type: SimpleDialogType.WARNING,
+    });
 
     if (!confirmed) {
       return false;

bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs/operators";
 
+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";
@@ -61,7 +62,8 @@ export class ClientsComponent implements OnInit {
     private logService: LogService,
     private modalService: ModalService,
     private organizationService: OrganizationService,
-    private organizationApiService: OrganizationApiServiceAbstraction
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -153,13 +155,11 @@ export class ClientsComponent implements OnInit {
   }
 
   async remove(organization: ProviderOrganizationOrganizationDetailsResponse) {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("detachOrganizationConfirmation"),
-      organization.organizationName,
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: organization.organizationName,
+      content: { key: "detachOrganizationConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
 
     if (!confirmed) {
       return false;

bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.ts

@@ -4,6 +4,7 @@ import { first } from "rxjs/operators";
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import { DialogServiceAbstraction } 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";
@@ -68,7 +69,8 @@ export class PeopleComponent
     searchPipe: SearchPipe,
     userNamePipe: UserNamePipe,
     stateService: StateService,
-    private providerService: ProviderService
+    private providerService: ProviderService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       apiService,
@@ -81,7 +83,8 @@ export class PeopleComponent
       logService,
       searchPipe,
       userNamePipe,
-      stateService
+      stateService,
+      dialogService
     );
   }
 

bitwarden_license/bit-web/src/app/admin-console/providers/manage/user-add-edit.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -36,7 +37,8 @@ export class UserAddEditComponent implements OnInit {
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private logService: LogService
+    private logService: LogService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -91,13 +93,12 @@ export class UserAddEditComponent implements OnInit {
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("removeUserConfirmation"),
-      this.name,
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: this.name,
+      content: { key: "removeUserConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.ts

@@ -13,11 +13,11 @@ import {
   share,
 } 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 { StateService } from "@bitwarden/common/abstractions/state.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { DialogService } from "@bitwarden/components";
 
 import { ProjectListView } from "../models/view/project-list.view";
 import { SecretListView } from "../models/view/secret-list.view";
@@ -84,7 +84,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
     private projectService: ProjectService,
     private secretService: SecretService,
     private serviceAccountService: ServiceAccountService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private organizationService: OrganizationService,
     private stateService: StateService,
     private platformUtilsService: PlatformUtilsService,

bitwarden_license/bit-web/src/app/secrets-manager/projects/dialog/project-delete-dialog.component.ts

@@ -8,9 +8,9 @@ import {
   AbstractControl,
 } from "@angular/forms";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { DialogService } from "@bitwarden/components";
 
 import { ProjectListView } from "../../models/view/project-list.view";
 import {
@@ -38,7 +38,7 @@ export class ProjectDeleteDialogComponent implements OnInit {
     private projectService: ProjectService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   ngOnInit(): void {

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project-people.component.ts

@@ -2,8 +2,9 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { map, Observable, share, startWith, Subject, switchMap, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
-import { DialogService, SelectItemView } from "@bitwarden/components";
+import { SelectItemView } from "@bitwarden/components";
 
 import {
   GroupProjectAccessPolicyView,
@@ -143,7 +144,7 @@ export class ProjectPeopleComponent implements OnInit, OnDestroy {
 
   constructor(
     private route: ActivatedRoute,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private validationService: ValidationService,
     private accessPolicyService: AccessPolicyService
   ) {}

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project-secrets.component.ts

@@ -2,9 +2,9 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatest, combineLatestWith, filter, Observable, startWith, switchMap } 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 { DialogService } from "@bitwarden/components";
 
 import { ProjectView } from "../../models/view/project.view";
 import { SecretListView } from "../../models/view/secret-list.view";
@@ -36,7 +36,7 @@ export class ProjectSecretsComponent {
     private route: ActivatedRoute,
     private projectService: ProjectService,
     private secretService: SecretService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService
   ) {}

bitwarden_license/bit-web/src/app/secrets-manager/projects/project/project.component.ts

@@ -11,7 +11,7 @@ import {
   takeUntil,
 } from "rxjs";
 
-import { DialogService } from "@bitwarden/components";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
 import { ProjectView } from "../../models/view/project.view";
 import {
@@ -36,8 +36,8 @@ export class ProjectComponent implements OnInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private projectService: ProjectService,
-    private dialogService: DialogService,
-    private router: Router
+    private router: Router,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   ngOnInit(): void {

bitwarden_license/bit-web/src/app/secrets-manager/projects/projects/projects.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatest, lastValueFrom, Observable, startWith, switchMap } from "rxjs";
 
-import { DialogService } from "@bitwarden/components";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
 import { ProjectListView } from "../../models/view/project-list.view";
 import { AccessPolicyService } from "../../shared/access-policies/access-policy.service";
@@ -37,7 +37,7 @@ export class ProjectsComponent implements OnInit {
     private route: ActivatedRoute,
     private projectService: ProjectService,
     private accessPolicyService: AccessPolicyService,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   ngOnInit() {

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-delete.component.ts

@@ -1,9 +1,9 @@
 import { 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 { DialogService } from "@bitwarden/components";
 
 import { SecretListView } from "../../models/view/secret-list.view";
 import {
@@ -27,7 +27,7 @@ export class SecretDeleteDialogComponent {
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     @Inject(DIALOG_DATA) private data: SecretDeleteOperation,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   showSoftDeleteSecretWarning = this.data.secrets.length === 1;

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts

@@ -3,11 +3,11 @@ import { Component, Inject, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { lastValueFrom, Subject, takeUntil } 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 { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Utils } from "@bitwarden/common/misc/utils";
-import { DialogService } from "@bitwarden/components";
 
 import { ProjectListView } from "../../models/view/project-list.view";
 import { ProjectView } from "../../models/view/project.view";
@@ -56,7 +56,7 @@ export class SecretDialogComponent implements OnInit {
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private projectService: ProjectService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private organizationService: OrganizationService
   ) {}
 

bitwarden_license/bit-web/src/app/secrets-manager/secrets/secrets.component.ts

@@ -2,9 +2,9 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatestWith, Observable, startWith, switchMap } 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 { DialogService } from "@bitwarden/components";
 
 import { SecretListView } from "../models/view/secret-list.view";
 import { SecretsListComponent } from "../shared/secrets-list.component";
@@ -33,7 +33,7 @@ export class SecretsComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private secretService: SecretService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService
   ) {}

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-tokens.component.ts

@@ -2,9 +2,9 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatestWith, Observable, startWith, switchMap } from "rxjs";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { DialogService } from "@bitwarden/components";
 import { UserVerificationPromptComponent } from "@bitwarden/web-vault/app/components/user-verification-prompt.component";
 
 import { AccessTokenView } from "../models/view/access-token.view";
@@ -25,7 +25,7 @@ export class AccessTokenComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private accessService: AccessService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private modalService: ModalService,
     private platformUtilsService: PlatformUtilsService
   ) {}

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/dialogs/access-token-create-dialog.component.ts

@@ -2,7 +2,7 @@ import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 
-import { DialogService } from "@bitwarden/components";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
 import { ServiceAccountView } from "../../../models/view/service-account.view";
 import { AccessTokenView } from "../../models/view/access-token.view";
@@ -30,7 +30,7 @@ export class AccessTokenCreateDialogComponent implements OnInit {
   constructor(
     public dialogRef: DialogRef,
     @Inject(DIALOG_DATA) public data: AccessTokenOperation,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private accessService: AccessService
   ) {}
 
@@ -83,7 +83,7 @@ export class AccessTokenCreateDialogComponent implements OnInit {
   }
 
   static openNewAccessTokenDialog(
-    dialogService: DialogService,
+    dialogService: DialogServiceAbstraction,
     serviceAccountId: string,
     organizationId: string
   ) {

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/dialog/service-account-delete-dialog.component.ts

@@ -8,9 +8,9 @@ import {
   AbstractControl,
 } from "@angular/forms";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { DialogService } from "@bitwarden/components";
 
 import { ServiceAccountView } from "../../models/view/service-account.view";
 import {
@@ -38,7 +38,7 @@ export class ServiceAccountDeleteDialogComponent {
     private serviceAccountService: ServiceAccountService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   get title() {

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/people/service-account-people.component.ts

@@ -11,9 +11,13 @@ import {
   takeUntil,
 } from "rxjs";
 
+import {
+  SimpleDialogType,
+  DialogServiceAbstraction,
+  SimpleDialogOptions,
+} from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
-import { DialogService, SimpleDialogOptions, SimpleDialogType } from "@bitwarden/components";
 import { SelectItemView } from "@bitwarden/components/src/multi-select/models/select-item-view";
 
 import {
@@ -131,10 +135,10 @@ export class ServiceAccountPeopleComponent {
         title: this.i18nService.t("saPeopleWarningTitle"),
         content: this.i18nService.t("saPeopleWarningMessage"),
         type: SimpleDialogType.WARNING,
-        acceptButtonText: this.i18nService.t("close"),
+        acceptButtonText: { key: "close" },
         cancelButtonText: null,
       };
-      this.dialogService.openSimpleDialog(simpleDialogOpts);
+      this.dialogService.openSimpleDialogRef(simpleDialogOpts);
     } catch (e) {
       this.validationService.showError(e);
     }
@@ -142,7 +146,7 @@ export class ServiceAccountPeopleComponent {
 
   constructor(
     private route: ActivatedRoute,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private i18nService: I18nService,
     private validationService: ValidationService,
     private accessPolicyService: AccessPolicyService

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-account.component.ts

@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { switchMap } from "rxjs";
 
-import { DialogService } from "@bitwarden/components";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
 import { AccessTokenCreateDialogComponent } from "./access/dialogs/access-token-create-dialog.component";
 import { ServiceAccountService } from "./service-account.service";
@@ -32,7 +32,7 @@ export class ServiceAccountComponent {
   constructor(
     private route: ActivatedRoute,
     private serviceAccountService: ServiceAccountService,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   protected openNewAccessTokenDialog() {

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatest, Observable, startWith, switchMap } from "rxjs";
 
-import { DialogService } from "@bitwarden/components";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
 import { ServiceAccountView } from "../models/view/service-account.view";
 import { AccessPolicyService } from "../shared/access-policies/access-policy.service";
@@ -30,7 +30,7 @@ export class ServiceAccountsComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private accessPolicyService: AccessPolicyService,
     private serviceAccountService: ServiceAccountService
   ) {}

bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-import.component.ts

@@ -3,12 +3,12 @@ import { FormControl, FormGroup } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { DialogService } from "@bitwarden/components";
 
 import {
   SecretsManagerImportErrorDialogComponent,
@@ -37,7 +37,7 @@ export class SecretsManagerImportComponent implements OnInit, OnDestroy {
     protected fileDownloadService: FileDownloadService,
     private logService: LogService,
     private secretsManagerPortingApiService: SecretsManagerPortingApiService,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {

bitwarden_license/bit-web/src/app/secrets-manager/shared/new-menu.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 
-import { DialogService } from "@bitwarden/components";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
 import {
   ProjectDialogComponent,
@@ -26,7 +26,7 @@ export class NewMenuComponent implements OnInit, OnDestroy {
   private organizationId: string;
   private destroy$: Subject<void> = new Subject<void>();
 
-  constructor(private route: ActivatedRoute, private dialogService: DialogService) {}
+  constructor(private route: ActivatedRoute, private dialogService: DialogServiceAbstraction) {}
 
   ngOnInit() {
     this.route.params.pipe(takeUntil(this.destroy$)).subscribe((params: any) => {

bitwarden_license/bit-web/src/app/secrets-manager/trash/trash.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatestWith, Observable, startWith, switchMap } from "rxjs";
 
-import { DialogService } from "@bitwarden/components";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
 import { SecretListView } from "../models/view/secret-list.view";
 import { SecretService } from "../secrets/secret.service";
@@ -28,7 +28,7 @@ export class TrashComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private secretService: SecretService,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   ngOnInit() {