fix(pfToastNotificationList): HTML Content for Toast Notifications

Allow HTML content for Toast Notifications

Author: cdcabrera

src/notification/toast-notification-list.component.js

@@ -7,8 +7,8 @@
  * @param {Array} notifications The list of current notifications to display. Each notification should have the following (see pfToastNotification):
  *           <ul style='list-style-type: none'>
  *             <li>.type - (String) The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'
- *             <li>.header - (String) The header to display for the notification (optional)
- *             <li>.message - (String) The main text message of the notification.
+ *             <li>.header - (String) The header to display for the notification, accepts HTML content. (optional)
+ *             <li>.message - (String) The main text message of the notification. Accepts HTML content.
  *             <li>.actionTitle Text to show for the primary action, optional.
  *             <li>.actionCallback (function(this notification)) Function to invoke when primary action is selected, optional
  *             <li>.menuActions  Optional list of actions to place in the kebab menu:<br/>
@@ -118,7 +118,7 @@
 
        $scope.type = $scope.types[0];
        $scope.header = 'Default header.';
-       $scope.message = 'Default notification message.';
+       $scope.message = 'Default <strong>notification</strong> message.';
        $scope.showClose = false;
        $scope.persistent = false;
 
@@ -193,7 +193,7 @@
            $scope.handleAction,
            ($scope.showMenu ? $scope.menuActions : undefined)
          );
-       }
+       };
 
        $scope.notifications = Notifications.data;
      });
@@ -225,3 +225,4 @@ angular.module('patternfly.notification').component('pfToastNotificationList', {
     };
   }
 });
+

src/notification/toast-notification.component.js

@@ -5,8 +5,8 @@
  * @scope
  *
  * @param {string} notificationType The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'
- * @param {string} header The header text of the notification.
- * @param {string} message The main text message of the notification.
+ * @param {string} header The header text of the notification. Accepts HTML content.
+ * @param {string} message The main text message of the notification. Accepts HTML content.
  * @param {boolean} showClose Flag to show the close button, default: true
  * @param {function} closeCallback (function(data)) Function to invoke when close action is selected, optional
  * @param {string} actionTitle Text to show for the primary action, optional.
@@ -107,7 +107,7 @@
        $scope.showClose = false;
 
        $scope.header = 'Default Header.';
-       $scope.message = 'Default Message.';
+       $scope.message = 'Default <strong>notification</strong> message.';
        $scope.primaryAction = '';
 
        $scope.updateType = function(item) {
@@ -190,7 +190,7 @@ angular.module( 'patternfly.notification' ).component('pfToastNotification', {
     'data': '=?'
   },
   templateUrl: 'notification/toast-notification.html',
-  controller: function () {
+  controller: function ($sce) {
     'use strict';
     var ctrl = this,
       _showClose;
@@ -249,5 +249,10 @@ angular.module( 'patternfly.notification' ).component('pfToastNotification', {
         ctrl.updateShowClose();
       }
     };
+
+    ctrl.trustAsHtml = function (html) {
+      return $sce.trustAsHtml(html);
+    };
   }
 });
+

src/notification/toast-notification.html

@@ -27,10 +27,9 @@
   <span class="pficon pficon-info" ng-if="$ctrl.notificationType === 'info'"></span>
   <span class="pficon pficon-error-circle-o" ng-if="$ctrl.notificationType === 'danger'"></span>
   <span class="pficon pficon-warning-triangle-o" ng-if="$ctrl.notificationType === 'warning'"></span>
-  <span ng-if="$ctrl.header">
-    <strong>{{$ctrl.header}}</strong> {{$ctrl.message}}
-  </span>
-  <span ng-if="!$ctrl.header">
-    {{$ctrl.message}}
+  <span>
+    <strong ng-if="$ctrl.header" ng-bind-html="$ctrl.trustAsHtml($ctrl.header)"></strong>
+    <span ng-bind-html="$ctrl.trustAsHtml($ctrl.message)"></span>
   </span>
 </div>
+

test/notification/toast-notification-list.spec.js

@@ -157,12 +157,13 @@ describe('Component: pfToastNotificationList', function () {
     // No Menu Actions
     $scope.notifications.forEach(function(nextItem) {
       nextItem.menuActions = undefined;
-    })
+    });
+
     var htmlTmp = '<pf-toast-notification-list notifications="notifications" show-close="false" close-callback="handleClose"></pf-toast-notification-list>';
 
     compileHTML(htmlTmp, $scope);
 
-    var closeButton = element.find('.toast-notifications-list-pf .toast-pf button.close');
+    closeButton = element.find('.toast-notifications-list-pf .toast-pf button.close');
     expect(closeButton.length).toBe(3);
 
     expect($scope.closeData).toBeUndefined();
@@ -208,3 +209,4 @@ describe('Component: pfToastNotificationList', function () {
     expect($scope.menuData.header).toBe("Header 1");
   });
 });
+

test/notification/toast-notification.spec.js

@@ -21,13 +21,13 @@ describe('Component: pfToastNotification', function () {
     scope.$digest();
   };
 
-  var setupHTML = function (notificationType, header, showClose, primaryAction, showMenu, data) {
+  var setupHTML = function (notificationType, header, message, showClose, primaryAction, showMenu, data) {
     $scope.type = notificationType;
     $scope.header = header;
-    $scope.message = "Test Toast Notification Message";
+    $scope.message = message || "Test Toast Notification Message";
     $scope.showClose = showClose;
     $scope.primaryAction = primaryAction;
-    $scope.data = data
+    $scope.data = data;
 
     $scope.closeData = undefined;
     $scope.closeCallback = function (data) {
@@ -100,26 +100,38 @@ describe('Component: pfToastNotification', function () {
   };
 
   it('should have the correct header and message', function () {
-    setupHTML ("info", "Test Header", false, '', false);
+    setupHTML ("info", "Test Header", null, false, '', false);
     header = element.find('.toast-pf span strong');
     expect(header.length).toBe(1);
     expect(header.text()).toBe("Test Header");
-    message = element.find('.toast-pf span');
+    message = element.find('.toast-pf > span');
     expect(message.length).toBe(2);
     expect(angular.element(message[1]).text()).toContain("Test Toast Notification Message");
   });
 
   it('should have the correct message when no header is given', function () {
-    setupHTML ("info", "", false, '', false);
+    setupHTML ("info", "", null, false, '', false);
     var header = element.find('.toast-pf span strong');
     expect(header.length).toBe(0);
-    var message = element.find('.toast-pf span');
+    var message = element.find('.toast-pf > span');
     expect(message.length).toBe(2);
     expect(angular.element(message[1]).text()).toContain("Test Toast Notification Message");
   });
 
+  it('should allow HTML content within the header and message', function () {
+    setupHTML ("info", "<em>Test Header</em>", null, false, '', false);
+    var header = element.find('.toast-pf span strong em');
+    expect(header.length).toBe(1);
+    expect(header.text()).toContain("Test Header");
+
+    setupHTML ("info", "", "<em>Test Notification Message</em>", false, '', false);
+    var message = element.find('.toast-pf > span em');
+    expect(message.length).toBe(1);
+    expect(message.text()).toContain("Test Notification Message");
+  });
+
   it('should have the correct status icon', function () {
-    setupHTML ("success", "Test Header", false, '', false);
+    setupHTML ("success", "Test Header", null, false, '', false);
     var okIcon = element.find('.pficon.pficon-ok');
     var infoIcon = element.find('.pficon.pficon-info');
     var errorIcon = element.find('.pficon.pficon-error-circle-o');
@@ -129,7 +141,7 @@ describe('Component: pfToastNotification', function () {
     expect(errorIcon.length).toBe(0);
     expect(warnIcon.length).toBe(0);
 
-    setupHTML ("info", "Test Header", false, '', false);
+    setupHTML ("info", "Test Header", null, false, '', false);
     okIcon = element.find('.pficon.pficon-ok');
     infoIcon = element.find('.pficon.pficon-info');
     errorIcon = element.find('.pficon.pficon-error-circle-o');
@@ -139,7 +151,7 @@ describe('Component: pfToastNotification', function () {
     expect(errorIcon.length).toBe(0);
     expect(warnIcon.length).toBe(0);
 
-    setupHTML ("danger", "Test Header", false, '', false);
+    setupHTML ("danger", "Test Header", null, false, '', false);
     okIcon = element.find('.pficon.pficon-ok');
     infoIcon = element.find('.pficon.pficon-info');
     errorIcon = element.find('.pficon.pficon-error-circle-o');
@@ -149,7 +161,7 @@ describe('Component: pfToastNotification', function () {
     expect(errorIcon.length).toBe(1);
     expect(warnIcon.length).toBe(0);
 
-    setupHTML ("warning", "Test Header", false, '', false);
+    setupHTML ("warning", "Test Header", null, false, '', false);
     okIcon = element.find('.pficon.pficon-ok');
     infoIcon = element.find('.pficon.pficon-info');
     errorIcon = element.find('.pficon.pficon-error-circle-o');
@@ -162,11 +174,11 @@ describe('Component: pfToastNotification', function () {
   });
 
   it('should have the close button when specified', function () {
-    setupHTML ("success", "Test Header", false, 'Test Action', true);
+    setupHTML ("success", "Test Header", null, false, 'Test Action', true);
     var closeButton = element.find('button.close');
     expect(closeButton.length).toBe(0);
 
-    setupHTML ("success", "Test Header", true, 'Test Action', false);
+    setupHTML ("success", "Test Header", null, true, 'Test Action', false);
     closeButton = element.find('button.close');
     expect(closeButton.length).toBe(1);
 
@@ -179,13 +191,13 @@ describe('Component: pfToastNotification', function () {
     expect($scope.closeData.title).toBe("Test Notification");
 
     // No close button even if specified when menu actions exist
-    setupHTML ("success", "Test Header", true, 'Test Action', true);
+    setupHTML ("success", "Test Header", null, true, 'Test Action', true);
     closeButton = element.find('button.close');
     expect(closeButton.length).toBe(0);
   });
 
   it('should have the correct primary action and call the correct callback when clicked', function () {
-    setupHTML ("success", "Test Header", false, 'Test Action', false);
+    setupHTML ("success", "Test Header", null, false, 'Test Action', false);
     var actionButton = element.find('.toast-pf-action > a');
     expect(actionButton.length).toBe(1);
     expect($scope.actionData).toBeUndefined();
@@ -198,7 +210,7 @@ describe('Component: pfToastNotification', function () {
   });
 
   it('should have the correct kebab menu and call the correct callback when items are clicked', function () {
-    setupHTML ("success", "Test Header", false, 'Test Action', true);
+    setupHTML ("success", "Test Header", null, false, 'Test Action', true);
     var menuIndicator = element.find('.dropdown-kebab-pf');
     expect(menuIndicator.length).toBe(1);
     var menuItems = element.find('.dropdown-kebab-pf .dropdown-menu li');
@@ -219,13 +231,13 @@ describe('Component: pfToastNotification', function () {
   });
 
   it('should have correct number of separators', function () {
-    setupHTML ("success", "Test Header", false, 'Test Action', true);
+    setupHTML ("success", "Test Header", null, false, 'Test Action', true);
     var fields = element.find('.dropdown-kebab-pf .dropdown-menu .divider');
     expect(fields.length).toBe(1);
   });
 
   it('should correctly disable actions and not call the callback if clicked', function () {
-    setupHTML ("success", "Test Header", false, 'Test Action', true);
+    setupHTML ("success", "Test Header", null, false, 'Test Action', true);
     var fields = element.find('.dropdown-kebab-pf .dropdown-menu .disabled > a');
     expect(fields.length).toBe(1);
 
@@ -239,3 +251,4 @@ describe('Component: pfToastNotification', function () {
     expect($scope.menuData).toBeUndefined();
   });
 });
+