[HXCS-1166] extend SnackBar to customize content appearance (#8379)

* [HXCS-1166] add templateRef to SnackBarData interface

* [HXCS-1166] update SnackBarContentComponent

to be able to manage data.templateRef

* [HXCS-1166] add tests to NotificationService

* [HXCS-1166] fix lint

* [HXCS-1166] add documentation

* [HXCS-1166] follow PR advices

* [HXCS-1166] typos

* [HXCS-1166] update testrail id

---------

Co-authored-by: Adriano Costa <Adriano.Costa@hyland.comgit>

lib/core/src/lib/notifications/services/notification.service.spec.ts

@@ -32,6 +32,7 @@ import { TranslateModule } from '@ngx-translate/core';
     providers: [NotificationService]
 })
 class ProvidesNotificationServiceComponent {
+
     constructor(public notificationService: NotificationService) {
 
     }
@@ -70,6 +71,22 @@ class ProvidesNotificationServiceComponent {
         return this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', matSnackBarConfig);
     }
 
+    sendMessageWithDecorativeIcon() {
+        const notificationConfig = new MatSnackBarConfig();
+        notificationConfig.duration = 1000;
+        notificationConfig.data = {decorativeIcon: 'info'};
+
+        return this.notificationService.openSnackMessage('with decorative icon', notificationConfig);
+    }
+
+    sendMessageWithDecorativeIconAndAction() {
+        const notificationConfig = new MatSnackBarConfig();
+        notificationConfig.duration = 1000;
+        notificationConfig.data = { decorativeIcon: 'folder' };
+
+        return this.notificationService.openSnackMessageAction('with decorative icon', 'TestWarn', notificationConfig);
+    }
+
 }
 
 describe('NotificationService', () => {
@@ -197,4 +214,27 @@ describe('NotificationService', () => {
 
         expect(document.querySelector('snack-bar-container')).not.toBeNull();
     });
+
+    it('should open a message notification bar with a decorative icon', (done) => {
+        const promise = fixture.componentInstance.sendMessageWithDecorativeIcon();
+        promise.afterDismissed().subscribe(() => {
+            done();
+        });
+
+        fixture.detectChanges();
+
+        expect(document.querySelector('[data-automation-id="adf-snackbar-message-content"] mat-icon')).not.toBeNull();
+    });
+
+    it('should open a message notification bar with action and a decorative icon', (done) => {
+        const promise = fixture.componentInstance.sendMessageWithDecorativeIconAndAction();
+        promise.afterDismissed().subscribe(() => {
+            done();
+        });
+
+        fixture.detectChanges();
+
+        expect(document.querySelector('[data-automation-id="adf-snackbar-message-content"] mat-icon')).not.toBeNull();
+     });
+
 });

lib/core/src/lib/snackbar-content/snack-bar-data.ts

@@ -22,4 +22,5 @@ export interface SnackBarData {
     message: string;
     showAction?: boolean;
     callActionOnIconClick?: boolean;
+    decorativeIcon?: string;
 }

lib/core/src/lib/snackbar-content/snackbar-content.component.html

@@ -1,4 +1,6 @@
-<p class="adf-snackbar-message-content" data-automation-id="adf-snackbar-message-content" aria-hidden="true">{{ data.message }}</p>
+<p class="adf-snackbar-message-content" data-automation-id="adf-snackbar-message-content" aria-hidden="true">
+    <mat-icon *ngIf="data.decorativeIcon" data-automation-id="adf-snackbar-decorative-icon">{{ data.decorativeIcon }}</mat-icon>{{ data.message }}
+</p>
 <div *ngIf="data.showAction" class="adf-snackbar-message-content-action" aria-hidden="true">
     <button mat-button (click)="snackBarRef.dismissWithAction()" *ngIf="data.actionLabel" class="adf-snackbar-message-content-action-button"
             data-automation-id="adf-snackbar-message-content-action-button">

lib/core/src/lib/snackbar-content/snackbar-content.component.scss

@@ -4,7 +4,13 @@
     justify-content: space-between;
 
     .adf-snackbar-message-content {
+        display: flex;
+        align-items: center;
         margin: 0;
+
+        mat-icon {
+            margin-right: 8px;
+        }
     }
 
     .adf-snackbar-message-content-action {

lib/testing/src/lib/protractor/core/pages/snackbar.page.ts

@@ -24,6 +24,7 @@ export class SnackbarPage {
     notificationSnackBar = $$(`[data-automation-id='adf-snackbar-message-content']`).first();
     snackBarAction = $(`[data-automation-id='adf-snackbar-message-content-action-button']`);
     snackBarContainerCss = $$('adf-snackbar-content');
+    decorativeIconSnackBar = $(`[data-automation-id='adf-snackbar-decorative-icon']`).first();
 
     async waitForSnackBarToAppear(timeout = 5000) {
         return BrowserVisibility.waitUntilElementIsVisible(this.snackBarContainerCss.first(), timeout,
@@ -45,6 +46,11 @@ export class SnackbarPage {
         return this.snackBarAction.getText();
     }
 
+    async getSnackBarDecorativeIcon(): Promise<string> {
+        await this.waitForSnackBarToAppear();
+        return this.decorativeIconSnackBar.getText();
+    }
+
     async clickSnackBarAction(): Promise<void> {
         await this.waitForSnackBarToAppear();
         await BrowserActions.click(this.snackBarAction);