[CL-106] use CL's DialogService in Desktop & Browser (#5875)

* remove libs/angular dialog service; move simple dialog types to CL * update DialogServiceAbstraction imports to CL * update imports in libs/angular to use CL * colocate simple dialog types * move SimpleConfigurableDialog files under SimpleDialog * remove CL import alias from CL src * update imports * run prettier * convert SimpleDialog enums to types * replace DialogServiceAbstraction with DialogService * restrict libs/angular imports in CL * add deprecation note to ModalService * Delete BrowserDialogService * Remove ElectronDialogService * update browser and desktop services.module * remove os.EOL in simple dialog * change SimpleDialogCloseType to boolean * remove close type
2025-12-06 00:13:28 +00:00 · 2023-08-16 08:26:56 -04:00
parent c304b59c3b
commit a4fcd62c99
147 changed files with 448 additions and 758 deletions
--- a/libs/angular/src/auth/components/change-password.component.ts
+++ b/libs/angular/src/auth/components/change-password.component.ts
@@ -14,8 +14,8 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
+import { DialogService } from "@bitwarden/components";

-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
 import { PasswordColorText } from "../../shared/components/password-strength/password-strength.component";

@Directive()
@@ -44,7 +44,7 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
    protected platformUtilsService: PlatformUtilsService,
    protected policyService: PolicyService,
    protected stateService: StateService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {}

  async ngOnInit() {
@@ -162,7 +162,7 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
      const result = await this.dialogService.openSimpleDialog({
        title: { key: "weakAndExposedMasterPassword" },
        content: { key: "weakAndBreachedMasterPasswordDesc" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });

      if (!result) {
@@ -173,7 +173,7 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
        const result = await this.dialogService.openSimpleDialog({
          title: { key: "weakMasterPassword" },
          content: { key: "weakMasterPasswordDesc" },
-          type: SimpleDialogType.WARNING,
+          type: "warning",
        });

        if (!result) {
@@ -184,7 +184,7 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
        const result = await this.dialogService.openSimpleDialog({
          title: { key: "exposedMasterPassword" },
          content: { key: "exposedMasterPasswordDesc" },
-          type: SimpleDialogType.WARNING,
+          type: "warning",
        });

        if (!result) {
@@ -201,7 +201,7 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
      title: { key: "logOut" },
      content: { key: "logOutConfirmation" },
      acceptButtonText: { key: "logOut" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (confirmed) {
--- a/libs/angular/src/auth/components/lock.component.ts
+++ b/libs/angular/src/auth/components/lock.component.ts
@@ -25,8 +25,7 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
-
-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class LockComponent implements OnInit, OnDestroy {
@@ -70,7 +69,7 @@ export class LockComponent implements OnInit, OnDestroy {
    protected policyApiService: PolicyApiServiceAbstraction,
    protected policyService: InternalPolicyService,
    protected passwordStrengthService: PasswordStrengthServiceAbstraction,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {}

  async ngOnInit() {
@@ -102,7 +101,7 @@ export class LockComponent implements OnInit, OnDestroy {
      title: { key: "logOut" },
      content: { key: "logOutConfirmation" },
      acceptButtonText: { key: "logOut" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (confirmed) {
--- a/libs/angular/src/auth/components/remove-password.component.ts
+++ b/libs/angular/src/auth/components/remove-password.component.ts
@@ -8,8 +8,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-
-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class RemovePasswordComponent implements OnInit {
@@ -29,7 +28,7 @@ export class RemovePasswordComponent implements OnInit {
    private i18nService: I18nService,
    private keyConnectorService: KeyConnectorService,
    private organizationApiService: OrganizationApiServiceAbstraction,
-    private dialogService: DialogServiceAbstraction
+    private dialogService: DialogService
  ) {}

  async ngOnInit() {
@@ -61,7 +60,7 @@ export class RemovePasswordComponent implements OnInit {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: this.organization.name,
      content: { key: "leaveOrganizationConfirmation" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {
--- a/libs/angular/src/auth/components/update-password.component.ts
+++ b/libs/angular/src/auth/components/update-password.component.ts
@@ -17,8 +17,7 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 import { Verification } from "@bitwarden/common/types/verification";
-
-import { DialogServiceAbstraction } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";

@@ -44,7 +43,7 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
    stateService: StateService,
    private userVerificationService: UserVerificationService,
    private logService: LogService,
-    dialogService: DialogServiceAbstraction
+    dialogService: DialogService
  ) {
    super(
      i18nService,
--- a/libs/angular/src/auth/components/update-temp-password.component.ts
+++ b/libs/angular/src/auth/components/update-temp-password.component.ts
@@ -20,8 +20,7 @@ import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/sym
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 import { Verification } from "@bitwarden/common/types/verification";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-
-import { DialogServiceAbstraction } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";

@@ -56,7 +55,7 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent {
    private logService: LogService,
    private userVerificationService: UserVerificationService,
    private router: Router,
-    dialogService: DialogServiceAbstraction
+    dialogService: DialogService
  ) {
    super(
      i18nService,
--- a/libs/angular/src/components/register.component.ts
+++ b/libs/angular/src/components/register.component.ts
@@ -19,13 +19,13 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
+import { DialogService } from "@bitwarden/components";

 import { CaptchaProtectedComponent } from "../auth/components/captcha-protected.component";
 import {
  AllValidationErrors,
  FormValidationErrorsService,
 } from "../platform/abstractions/form-validation-errors.service";
-import { DialogServiceAbstraction, SimpleDialogType } from "../services/dialog";
 import { PasswordColorText } from "../shared/components/password-strength/password-strength.component";
 import { InputsFieldMatch } from "../validators/inputsFieldMatch.validator";

@@ -92,7 +92,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
    environmentService: EnvironmentService,
    protected logService: LogService,
    protected auditService: AuditService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {
    super(environmentService, i18nService, platformUtilsService);
    this.showTerms = !platformUtilsService.isSelfHost();
@@ -232,7 +232,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
      const result = await this.dialogService.openSimpleDialog({
        title: { key: "weakAndExposedMasterPassword" },
        content: { key: "weakAndBreachedMasterPasswordDesc" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });

      if (!result) {
@@ -242,7 +242,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
      const result = await this.dialogService.openSimpleDialog({
        title: { key: "weakMasterPassword" },
        content: { key: "weakMasterPasswordDesc" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });

      if (!result) {
@@ -252,7 +252,7 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
      const result = await this.dialogService.openSimpleDialog({
        title: { key: "exposedMasterPassword" },
        content: { key: "exposedMasterPasswordDesc" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });

      if (!result) {
--- a/libs/angular/src/components/set-password.component.ts
+++ b/libs/angular/src/components/set-password.component.ts
@@ -21,9 +21,9 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { DialogService } from "@bitwarden/components";

 import { ChangePasswordComponent as BaseChangePasswordComponent } from "../auth/components/change-password.component";
-import { DialogServiceAbstraction } from "../services/dialog";

@Directive()
 export class SetPasswordComponent extends BaseChangePasswordComponent {
@@ -52,7 +52,7 @@ export class SetPasswordComponent extends BaseChangePasswordComponent {
    stateService: StateService,
    private organizationApiService: OrganizationApiServiceAbstraction,
    private organizationUserService: OrganizationUserService,
-    dialogService: DialogServiceAbstraction
+    dialogService: DialogService
  ) {
    super(
      i18nService,
--- a/libs/angular/src/services/dialog/dialog.service.abstraction.ts
+++ b/libs/angular/src/services/dialog/dialog.service.abstraction.ts
@@ -1,26 +0,0 @@
-import { Dialog, DialogRef } from "@angular/cdk/dialog";
-
-import { SimpleDialogOptions } from "./simple-dialog-options";
-
-export abstract class DialogServiceAbstraction extends Dialog {
-  /**
-   * Opens a simple dialog, returns true if the user accepted the dialog.
-   *
-   * @param {SimpleDialogOptions} simpleDialogOptions - An object containing options for the dialog.
-   * @returns `boolean` - True if the user accepted the dialog, false otherwise.
-   */
-  openSimpleDialog: (simpleDialogOptions: SimpleDialogOptions) => Promise<boolean>;
-
-  /**
-   * Opens a simple dialog.
-   *
-   * @deprecated Use `openSimpleDialogAcceptedPromise` instead. If you find a use case for the `dialogRef`
-   * please let #wg-component-library know and we can un-deprecate this method.
-   *
-   * @param {SimpleDialogOptions} simpleDialogOptions - An object containing options for the dialog.
-   * @returns `DialogRef` - The reference to the opened dialog.
-   * Contains a closed observable which can be subscribed to for determining which button
-   * a user pressed (see `SimpleDialogCloseType`)
-   */
-  openSimpleDialogRef: (simpleDialogOptions: SimpleDialogOptions) => DialogRef;
-}
--- a/libs/angular/src/services/dialog/dialog.service.ts
+++ b/libs/angular/src/services/dialog/dialog.service.ts
@@ -1,65 +0,0 @@
-import {
-  DialogRef,
-  DialogConfig,
-  Dialog,
-  DEFAULT_DIALOG_CONFIG,
-  DIALOG_SCROLL_STRATEGY,
-} from "@angular/cdk/dialog";
-import { Overlay, OverlayContainer } from "@angular/cdk/overlay";
-import { ComponentType } from "@angular/cdk/portal";
-import { Inject, Injectable, Injector, Optional, SkipSelf, TemplateRef } from "@angular/core";
-
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-
-import { DialogServiceAbstraction } from "./dialog.service.abstraction";
-import { SimpleDialogOptions } from "./simple-dialog-options";
-import { Translation } from "./translation";
-
-// This is a temporary base class for Dialogs. It is intended to be removed once the Component Library is adopted by each app.
-@Injectable()
-export abstract class DialogService extends Dialog implements DialogServiceAbstraction {
-  constructor(
-    /** Parent class constructor */
-    _overlay: Overlay,
-    _injector: Injector,
-    @Optional() @Inject(DEFAULT_DIALOG_CONFIG) _defaultOptions: DialogConfig,
-    @Optional() @SkipSelf() _parentDialog: Dialog,
-    _overlayContainer: OverlayContainer,
-    @Inject(DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
-    protected i18nService: I18nService
-  ) {
-    super(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, scrollStrategy);
-  }
-
-  async openSimpleDialog(options: SimpleDialogOptions): Promise<boolean> {
-    throw new Error("Method not implemented.");
-  }
-
-  openSimpleDialogRef(simpleDialogOptions: SimpleDialogOptions): DialogRef {
-    throw new Error("Method not implemented.");
-  }
-
-  override open<R = unknown, D = unknown, C = unknown>(
-    componentOrTemplateRef: ComponentType<C> | TemplateRef<C>,
-    config?: DialogConfig<D, DialogRef<R, C>>
-  ): DialogRef<R, C> {
-    throw new Error("Method not implemented.");
-  }
-
-  protected translate(translation: string | Translation, defaultKey?: string): string {
-    if (translation == null && defaultKey == null) {
-      return null;
-    }
-
-    if (translation == null) {
-      return this.i18nService.t(defaultKey);
-    }
-
-    // Translation interface use implies we must localize.
-    if (typeof translation === "object") {
-      return this.i18nService.t(translation.key, ...(translation.placeholders ?? []));
-    }
-
-    return translation;
-  }
-}
--- a/libs/angular/src/services/dialog/index.ts
+++ b/libs/angular/src/services/dialog/index.ts
@@ -1,6 +0,0 @@
-export * from "./dialog.service.abstraction";
-export * from "./simple-dialog-options";
-export * from "./simple-dialog-type.enum";
-export * from "./simple-dialog-close-type.enum";
-export * from "./dialog.service";
-export * from "./translation";
--- a/libs/angular/src/services/dialog/simple-dialog-close-type.enum.ts
+++ b/libs/angular/src/services/dialog/simple-dialog-close-type.enum.ts
@@ -1,4 +0,0 @@
-export enum SimpleDialogCloseType {
-  ACCEPT = "accept",
-  CANCEL = "cancel",
-}
--- a/libs/angular/src/services/dialog/simple-dialog-options.ts
+++ b/libs/angular/src/services/dialog/simple-dialog-options.ts
@@ -1,57 +0,0 @@
-import { SimpleDialogType } from "./simple-dialog-type.enum";
-import { Translation } from "./translation";
-
-// Using type lets devs skip optional params w/out having to pass undefined.
-/**
- *
- * @typedef {Object} SimpleDialogOptions - A configuration type for the Simple Dialog component
- */
-export type SimpleDialogOptions = {
-  /**
-   * Dialog title.
-   *
-   * If not localized, pass in a `Translation`. */
-  title: string | Translation;
-
-  /** Dialog content.
-   *
-   * If not localized, pass in a `Translation`. */
-  content: string | Translation;
-
-  /** Dialog type. It controls default icons and icon colors. */
-  type: SimpleDialogType;
-
-  /** Dialog custom icon class.
-   *
-   * If not provided, a standard icon will be inferred from type.
-   * Note: icon color is enforced based on dialog type.  */
-  icon?: string;
-
-  /** Dialog custom accept button text.
-   *
-   * If not provided, ("yes" | i18n) will be used.
-   *
-   * If not localized, pass in a `Translation`  */
-  acceptButtonText?: string | Translation;
-
-  /**
-   * Dialog custom cancel button text.
-   *
-   * If not provided, ("no" | i18n) will be used.
-   *
-   * If custom acceptButtonText is passed in, ("cancel" | i18n) will be used.
-   *
-   * If null is provided, the cancel button will be removed.
-   *
-   * If not localized, pass in a `Translation` */
-  cancelButtonText?: string | Translation;
-
-  /** Whether or not the user can use escape or clicking the backdrop to close the dialog */
-  disableClose?: boolean;
-
-  /**
-   * Custom accept action. Runs when the user clicks the accept button and shows a loading spinner until the promise
-   * is resolved.
-   */
-  acceptAction?: () => Promise<void>;
-};
--- a/libs/angular/src/services/dialog/simple-dialog-type.enum.ts
+++ b/libs/angular/src/services/dialog/simple-dialog-type.enum.ts
@@ -1,7 +0,0 @@
-export enum SimpleDialogType {
-  PRIMARY = "primary",
-  SUCCESS = "success",
-  INFO = "info",
-  WARNING = "warning",
-  DANGER = "danger",
-}
--- a/libs/angular/src/services/dialog/translation.ts
+++ b/libs/angular/src/services/dialog/translation.ts
@@ -1,4 +0,0 @@
-export interface Translation {
-  key: string;
-  placeholders?: Array<string | number>;
-}
--- a/libs/angular/src/services/modal.service.ts
+++ b/libs/angular/src/services/modal.service.ts
@@ -21,6 +21,9 @@ export class ModalConfig<D = any> {
  replaceTopModal?: boolean;
 }

+/**
+ * @deprecated Use the Component Library's `DialogService` instead.
+ */
@Injectable()
 export class ModalService {
  protected modalList: ComponentRef<DynamicModalComponent>[] = [];
@@ -50,7 +53,7 @@ export class ModalService {
  }

  /**
-   * @deprecated Use `dialogService.open` (in web) or `modalService.open` (in desktop/browser) instead.
+   * @deprecated Use `dialogService.open` instead.
   * If replacing an existing call to this method, also remove any `@ViewChild` and `<ng-template>` associated with the
   * existing usage.
   */
--- a/libs/angular/src/tools/export/components/export.component.ts
+++ b/libs/angular/src/tools/export/components/export.component.ts
@@ -12,10 +12,9 @@ import { FileDownloadService } from "@bitwarden/common/platform/abstractions/fil
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
 import { VaultExportServiceAbstraction } from "@bitwarden/exporter/vault-export";

-import { DialogServiceAbstraction, SimpleDialogType } from "../../../services/dialog";
-
@Directive()
 export class ExportComponent implements OnInit, OnDestroy {
  @Output() onSaved = new EventEmitter();
@@ -55,7 +54,7 @@ export class ExportComponent implements OnInit, OnDestroy {
    private userVerificationService: UserVerificationService,
    private formBuilder: UntypedFormBuilder,
    protected fileDownloadService: FileDownloadService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {}

  async ngOnInit() {
@@ -135,14 +134,14 @@ export class ExportComponent implements OnInit, OnDestroy {
          " " +
          this.i18nService.t("encExportAccountWarningDesc"),
        acceptButtonText: { key: "exportVault" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });
    } else {
      return await this.dialogService.openSimpleDialog({
        title: { key: "confirmVaultExport" },
        content: { key: "exportWarningDesc" },
        acceptButtonText: { key: "exportVault" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });
    }
  }
--- a/libs/angular/src/tools/send/add-edit.component.ts
+++ b/libs/angular/src/tools/send/add-edit.component.ts
@@ -18,8 +18,7 @@ import { SendTextView } from "@bitwarden/common/tools/send/models/view/send-text
 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";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class AddEditComponent implements OnInit, OnDestroy {
@@ -63,7 +62,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
    private logService: LogService,
    protected stateService: StateService,
    protected sendApiService: SendApiService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {
    this.typeOptions = [
      { name: i18nService.t("sendTypeFile"), value: SendType.File },
@@ -236,7 +235,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: { key: "deleteSend" },
      content: { key: "deleteSendConfirmation" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {
@@ -314,7 +313,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
        content: { key: this.editMode ? "editedSend" : "createdSend" },
        acceptButtonText: { key: "ok" },
        cancelButtonText: null,
-        type: SimpleDialogType.SUCCESS,
+        type: "success",
      });

      await this.copyLinkToClipboard(this.link);
--- a/libs/angular/src/tools/send/send.component.ts
+++ b/libs/angular/src/tools/send/send.component.ts
@@ -12,8 +12,7 @@ import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
 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";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class SendComponent implements OnInit, OnDestroy {
@@ -59,7 +58,7 @@ export class SendComponent implements OnInit, OnDestroy {
    protected policyService: PolicyService,
    private logService: LogService,
    protected sendApiService: SendApiService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {}

  async ngOnInit() {
@@ -139,7 +138,7 @@ export class SendComponent implements OnInit, OnDestroy {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: { key: "removePassword" },
      content: { key: "removePasswordConfirmation" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {
@@ -170,7 +169,7 @@ export class SendComponent implements OnInit, OnDestroy {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: { key: "deleteSend" },
      content: { key: "deleteSendConfirmation" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {
--- a/libs/angular/src/vault/components/add-edit.component.ts
+++ b/libs/angular/src/vault/components/add-edit.component.ts
@@ -33,8 +33,7 @@ import { IdentityView } from "@bitwarden/common/vault/models/view/identity.view"
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { SecureNoteView } from "@bitwarden/common/vault/models/view/secure-note.view";
-
-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class AddEditComponent implements OnInit, OnDestroy {
@@ -101,7 +100,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
    protected passwordRepromptService: PasswordRepromptService,
    private organizationService: OrganizationService,
    protected sendApiService: SendApiService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {
    this.typeOptions = [
      { name: i18nService.t("typeLogin"), value: CipherType.Login },
@@ -402,7 +401,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
      content: {
        key: this.cipher.isDeleted ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation",
      },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {
@@ -451,7 +450,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
      const confirmed = await this.dialogService.openSimpleDialog({
        title: { key: "overwriteUsername" },
        content: { key: "overwriteUsernameConfirmation" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });

      if (!confirmed) {
@@ -468,7 +467,7 @@ export class AddEditComponent implements OnInit, OnDestroy {
      const confirmed = await this.dialogService.openSimpleDialog({
        title: { key: "overwritePassword" },
        content: { key: "overwritePasswordConfirmation" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });

      if (!confirmed) {
--- a/libs/angular/src/vault/components/attachments.component.ts
+++ b/libs/angular/src/vault/components/attachments.component.ts
@@ -13,8 +13,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.view";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-
-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class AttachmentsComponent implements OnInit {
@@ -43,7 +42,7 @@ export class AttachmentsComponent implements OnInit {
    protected logService: LogService,
    protected stateService: StateService,
    protected fileDownloadService: FileDownloadService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {}

  async ngOnInit() {
@@ -106,7 +105,7 @@ export class AttachmentsComponent implements OnInit {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: { key: "deleteAttachment" },
      content: { key: "deleteAttachmentConfirmation" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {
@@ -201,7 +200,7 @@ export class AttachmentsComponent implements OnInit {
        title: { key: "premiumRequired" },
        content: { key: "premiumRequiredDesc" },
        acceptButtonText: { key: "learnMore" },
-        type: SimpleDialogType.SUCCESS,
+        type: "success",
      });

      if (confirmed) {
@@ -212,7 +211,7 @@ export class AttachmentsComponent implements OnInit {
        title: { key: "featureUnavailable" },
        content: { key: "updateKey" },
        acceptButtonText: { key: "learnMore" },
-        type: SimpleDialogType.WARNING,
+        type: "warning",
      });

      if (confirmed) {
--- a/libs/angular/src/vault/components/folder-add-edit.component.ts
+++ b/libs/angular/src/vault/components/folder-add-edit.component.ts
@@ -7,8 +7,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { FolderApiServiceAbstraction } from "@bitwarden/common/vault/abstractions/folder/folder-api.service.abstraction";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
-
-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class FolderAddEditComponent implements OnInit {
@@ -33,7 +32,7 @@ export class FolderAddEditComponent implements OnInit {
    protected i18nService: I18nService,
    protected platformUtilsService: PlatformUtilsService,
    protected logService: LogService,
-    protected dialogService: DialogServiceAbstraction,
+    protected dialogService: DialogService,
    protected formBuilder: FormBuilder
  ) {}

@@ -74,7 +73,7 @@ export class FolderAddEditComponent implements OnInit {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: { key: "deleteFolder" },
      content: { key: "deleteFolderConfirmation" },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {
--- a/libs/angular/src/vault/components/premium.component.ts
+++ b/libs/angular/src/vault/components/premium.component.ts
@@ -6,8 +6,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-
-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

@Directive()
 export class PremiumComponent implements OnInit {
@@ -22,7 +21,7 @@ export class PremiumComponent implements OnInit {
    protected apiService: ApiService,
    private logService: LogService,
    protected stateService: StateService,
-    protected dialogService: DialogServiceAbstraction,
+    protected dialogService: DialogService,
    private environmentService: EnvironmentService
  ) {
    this.cloudWebVaultUrl = this.environmentService.getCloudWebVaultUrl();
@@ -47,7 +46,7 @@ export class PremiumComponent implements OnInit {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: { key: "premiumPurchase" },
      content: { key: "premiumPurchaseAlert" },
-      type: SimpleDialogType.INFO,
+      type: "info",
    });

    if (confirmed) {
@@ -59,7 +58,7 @@ export class PremiumComponent implements OnInit {
    const confirmed = await this.dialogService.openSimpleDialog({
      title: { key: "premiumManage" },
      content: { key: "premiumManageAlert" },
-      type: SimpleDialogType.INFO,
+      type: "info",
    });

    if (confirmed) {
--- a/libs/angular/src/vault/components/view.component.ts
+++ b/libs/angular/src/vault/components/view.component.ts
@@ -34,8 +34,7 @@ import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.v
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
-
-import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+import { DialogService } from "@bitwarden/components";

 const BroadcasterSubscriptionId = "ViewComponent";

@@ -87,7 +86,7 @@ export class ViewComponent implements OnDestroy, OnInit {
    private logService: LogService,
    protected stateService: StateService,
    protected fileDownloadService: FileDownloadService,
-    protected dialogService: DialogServiceAbstraction
+    protected dialogService: DialogService
  ) {}

  ngOnInit() {
@@ -182,7 +181,7 @@ export class ViewComponent implements OnDestroy, OnInit {
      content: {
        key: this.cipher.isDeleted ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation",
      },
-      type: SimpleDialogType.WARNING,
+      type: "warning",
    });

    if (!confirmed) {