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

Update toast styles and new service to CL.

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"
   },

apps/desktop/src/scss/plugins.scss

@@ -1,95 +0,0 @@
-@import "~ngx-toastr/toastr";
-
-@import "variables.scss";
-
-.toast-container {
-  .toast-close-button {
-    @include themify($themes) {
-      color: themed("toastTextColor");
-    }
-    font-size: 18px;
-    margin-right: 4px;
-  }
-
-  .ngx-toastr {
-    @include themify($themes) {
-      color: themed("toastTextColor");
-    }
-    align-items: center;
-    background-image: none !important;
-    border-radius: $border-radius;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
-    display: flex;
-    padding: 15px;
-
-    .toast-close-button {
-      position: absolute;
-      right: 5px;
-      top: 0;
-    }
-
-    &:hover {
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-    }
-
-    .icon i::before {
-      float: left;
-      font-style: normal;
-      font-family: $icomoon-font-family;
-      font-size: 25px;
-      line-height: 20px;
-      padding-right: 15px;
-    }
-
-    .toast-message {
-      p {
-        margin-bottom: 0.5rem;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    &.toast-danger,
-    &.toast-error {
-      @include themify($themes) {
-        background-color: themed("dangerColor");
-      }
-
-      .icon i::before {
-        content: map_get($icons, "error");
-      }
-    }
-
-    &.toast-warning {
-      @include themify($themes) {
-        background-color: themed("warningColor");
-      }
-
-      .icon i::before {
-        content: map_get($icons, "exclamation-triangle");
-      }
-    }
-
-    &.toast-info {
-      @include themify($themes) {
-        background-color: themed("infoColor");
-      }
-
-      .icon i:before {
-        content: map_get($icons, "info-circle");
-      }
-    }
-
-    &.toast-success {
-      @include themify($themes) {
-        background-color: themed("successColor");
-      }
-
-      .icon i:before {
-        content: map_get($icons, "check");
-      }
-    }
-  }
-}

apps/desktop/src/scss/styles.scss

@@ -11,7 +11,6 @@
 @import "buttons.scss";
 @import "misc.scss";
 @import "modal.scss";
-@import "plugins.scss";
 @import "environment.scss";
 @import "header.scss";
 @import "left-nav.scss";