[CL-18] toast component and service (#6490)

Update toast styles and new service to CL.

apps/browser/src/_locales/en/messages.json

@@ -3000,6 +3000,9 @@
     "message": "Error saving credentials. Check console for details.",
     "description": "Notification message for when saving credentials has failed."
   },
+  "success": {
+    "message": "Success"
+  },
   "removePasskey": {
     "message": "Remove passkey"
   },

apps/browser/src/platform/services/platform-utils/foreground-platform-utils.service.ts

@@ -1,13 +1,10 @@
-import { SecurityContext } from "@angular/core";
-import { DomSanitizer } from "@angular/platform-browser";
-import { ToastrService } from "ngx-toastr";
+import { ToastService } from "@bitwarden/components";
 
 import { BrowserPlatformUtilsService } from "./browser-platform-utils.service";
 
 export class ForegroundPlatformUtilsService extends BrowserPlatformUtilsService {
   constructor(
-    private sanitizer: DomSanitizer,
-    private toastrService: ToastrService,
+    private toastService: ToastService,
     clipboardWriteCallback: (clipboardValue: string, clearMs: number) => void,
     biometricCallback: () => Promise<boolean>,
     win: Window & typeof globalThis,
@@ -21,20 +18,6 @@ export class ForegroundPlatformUtilsService extends BrowserPlatformUtilsService
     text: string | string[],
     options?: any,
   ): void {
-    if (typeof text === "string") {
-      // Already in the correct format
-    } else if (text.length === 1) {
-      text = text[0];
-    } else {
-      let message = "";
-      text.forEach(
-        (t: string) =>
-          (message += "<p>" + this.sanitizer.sanitize(SecurityContext.HTML, t) + "</p>"),
-      );
-      text = message;
-      options.enableHtml = true;
-    }
-    this.toastrService.show(text, title, options, "toast-" + type);
-    // noop
+    this.toastService._showToast({ type, title, text, options });
   }
 }

apps/browser/src/popup/app.component.ts

@@ -1,19 +1,18 @@
 import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
-import { ToastrService } from "ngx-toastr";
 import { filter, concatMap, Subject, takeUntil, firstValueFrom, map } from "rxjs";
 
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { DialogService, SimpleDialogOptions } from "@bitwarden/components";
+import { DialogService, SimpleDialogOptions, ToastService } from "@bitwarden/components";
 
 import { BrowserApi } from "../platform/browser/browser-api";
 import { ZonedMessageListenerService } from "../platform/browser/zoned-message-listener.service";
 import { BrowserStateService } from "../platform/services/abstractions/browser-state.service";
-import { ForegroundPlatformUtilsService } from "../platform/services/platform-utils/foreground-platform-utils.service";
 import { BrowserSendStateService } from "../tools/popup/services/browser-send-state.service";
 import { VaultBrowserStateService } from "../vault/services/vault-browser-state.service";
 
@@ -35,7 +34,6 @@ export class AppComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
   constructor(
-    private toastrService: ToastrService,
     private broadcasterService: BroadcasterService,
     private authService: AuthService,
     private i18nService: I18nService,
@@ -46,9 +44,10 @@ export class AppComponent implements OnInit, OnDestroy {
     private cipherService: CipherService,
     private changeDetectorRef: ChangeDetectorRef,
     private ngZone: NgZone,
-    private platformUtilsService: ForegroundPlatformUtilsService,
+    private platformUtilsService: PlatformUtilsService,
     private dialogService: DialogService,
     private browserMessagingApi: ZonedMessageListenerService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -83,10 +82,10 @@ export class AppComponent implements OnInit, OnDestroy {
       if (msg.command === "doneLoggingOut") {
         this.authService.logOut(async () => {
           if (msg.expired) {
-            this.showToast({
-              type: "warning",
+            this.toastService.showToast({
+              variant: "warning",
               title: this.i18nService.t("loggedOut"),
-              text: this.i18nService.t("loginExpired"),
+              message: this.i18nService.t("loginExpired"),
             });
           }
 
@@ -116,7 +115,7 @@ export class AppComponent implements OnInit, OnDestroy {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.showNativeMessagingFingerprintDialog(msg);
       } else if (msg.command === "showToast") {
-        this.showToast(msg);
+        this.toastService._showToast(msg);
       } else if (msg.command === "reloadProcess") {
         const forceWindowReload =
           this.platformUtilsService.isSafari() ||

apps/browser/src/popup/app.module.ts

@@ -11,11 +11,10 @@ import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component";
-import { BitwardenToastModule } from "@bitwarden/angular/components/toastr.component";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
 import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
-import { AvatarModule, ButtonModule } from "@bitwarden/components";
+import { AvatarModule, ButtonModule, ToastModule } from "@bitwarden/components";
 import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
 
 import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component";
@@ -87,7 +86,7 @@ import "../platform/popup/locales";
   imports: [
     A11yModule,
     AppRoutingModule,
-    BitwardenToastModule.forRoot({
+    ToastModule.forRoot({
       maxOpened: 2,
       autoDismiss: true,
       closeButton: true,

apps/browser/src/popup/scss/popup.scss

@@ -8,7 +8,6 @@
 @import "buttons.scss";
 @import "misc.scss";
 @import "modal.scss";
-@import "plugins.scss";
 @import "environment.scss";
 @import "pages.scss";
 @import "@angular/cdk/overlay-prebuilt.css";

apps/browser/src/popup/services/services.module.ts

@@ -1,7 +1,5 @@
 import { APP_INITIALIZER, NgModule, NgZone } from "@angular/core";
-import { DomSanitizer } from "@angular/platform-browser";
 import { Router } from "@angular/router";
-import { ToastrService } from "ngx-toastr";
 
 import { UnauthGuard as BaseUnauthGuardService } from "@bitwarden/angular/auth/guards";
 import { AngularThemingService } from "@bitwarden/angular/platform/services/theming/angular-theming.service";
@@ -83,7 +81,7 @@ import { FolderService as FolderServiceAbstraction } from "@bitwarden/common/vau
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { TotpService as TotpServiceAbstraction } from "@bitwarden/common/vault/abstractions/totp.service";
 import { TotpService } from "@bitwarden/common/vault/services/totp.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { UnauthGuardService } from "../../auth/popup/services";
 import { AutofillService as AutofillServiceAbstraction } from "../../autofill/services/abstractions/autofill.service";
@@ -259,15 +257,9 @@ const safeProviders: SafeProvider[] = [
   }),
   safeProvider({
     provide: PlatformUtilsService,
-    useExisting: ForegroundPlatformUtilsService,
-  }),
-  safeProvider({
-    provide: ForegroundPlatformUtilsService,
-    useClass: ForegroundPlatformUtilsService,
-    useFactory: (sanitizer: DomSanitizer, toastrService: ToastrService) => {
+    useFactory: (toastService: ToastService) => {
       return new ForegroundPlatformUtilsService(
-        sanitizer,
-        toastrService,
+        toastService,
         (clipboardValue: string, clearMs: number) => {
           void BrowserApi.sendMessage("clearClipboard", { clipboardValue, clearMs });
         },
@@ -284,7 +276,7 @@ const safeProviders: SafeProvider[] = [
         window,
       );
     },
-    deps: [DomSanitizer, ToastrService],
+    deps: [ToastService],
   }),
   safeProvider({
     provide: PasswordGenerationServiceAbstraction,

apps/desktop/src/app/app.component.ts

@@ -3,14 +3,11 @@ import {
   NgZone,
   OnDestroy,
   OnInit,
-  SecurityContext,
   Type,
   ViewChild,
   ViewContainerRef,
 } from "@angular/core";
-import { DomSanitizer } from "@angular/platform-browser";
 import { Router } from "@angular/router";
-import { IndividualConfig, ToastrService } from "ngx-toastr";
 import { firstValueFrom, Subject, takeUntil } from "rxjs";
 
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
@@ -49,7 +46,7 @@ import { CollectionService } from "@bitwarden/common/vault/abstractions/collecti
 import { InternalFolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { DeleteAccountComponent } from "../auth/delete-account.component";
 import { LoginApprovalComponent } from "../auth/login/login-approval.component";
@@ -129,9 +126,8 @@ export class AppComponent implements OnInit, OnDestroy {
     private cipherService: CipherService,
     private authService: AuthService,
     private router: Router,
-    private toastrService: ToastrService,
+    private toastService: ToastService,
     private i18nService: I18nService,
-    private sanitizer: DomSanitizer,
     private ngZone: NgZone,
     private vaultTimeoutService: VaultTimeoutService,
     private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
@@ -294,7 +290,7 @@ export class AppComponent implements OnInit, OnDestroy {
             );
             break;
           case "showToast":
-            this.showToast(message);
+            this.toastService._showToast(message);
             break;
           case "copiedToClipboard":
             if (!message.clearing) {
@@ -674,34 +670,6 @@ export class AppComponent implements OnInit, OnDestroy {
     });
   }
 
-  private showToast(msg: any) {
-    let message = "";
-
-    const options: Partial<IndividualConfig> = {};
-
-    if (typeof msg.text === "string") {
-      message = msg.text;
-    } else if (msg.text.length === 1) {
-      message = msg.text[0];
-    } else {
-      msg.text.forEach(
-        (t: string) =>
-          (message += "<p>" + this.sanitizer.sanitize(SecurityContext.HTML, t) + "</p>"),
-      );
-      options.enableHtml = true;
-    }
-    if (msg.options != null) {
-      if (msg.options.trustedHtml === true) {
-        options.enableHtml = true;
-      }
-      if (msg.options.timeout != null && msg.options.timeout > 0) {
-        options.timeOut = msg.options.timeout;
-      }
-    }
-
-    this.toastrService.show(message, msg.title, options, "toast-" + msg.type);
-  }
-
   private routeToVault(action: string, cipherType: CipherType) {
     if (!this.router.url.includes("vault")) {
       // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.

apps/desktop/src/locales/en/messages.json

@@ -2697,6 +2697,9 @@
     "message": "Common formats",
     "description": "Label indicating the most common import formats"
   },
+  "success": {
+    "message": "Success"
+  },
   "troubleshooting": {
     "message": "Troubleshooting"
   },