DEV Notification Opt-In

Default HTML content to false, allow it on option true

Author: cdcabrera

src/notification/toast-notification.component.js

@@ -5,9 +5,10 @@
  * @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. Accepts HTML content.
- * @param {string} message The main text message of the notification. Accepts HTML content.
+ * @param {string} header The header text of the notification. Accepts HTML content when allowed.
+ * @param {string} message The main text message of the notification. Accepts HTML content when allowed.
  * @param {boolean} showClose Flag to show the close button, default: true
+ * @param {boolean} htmlContent Flag to allow HTML content within the header and message options.
  * @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.
  * @param {function} actionCallback (function(data)) Function to invoke when primary action is selected, optional
@@ -37,9 +38,9 @@
      <div ng-controller="ToastNotificationDemoCtrl" class="row example-container">
        <div class="col-md-12">
          <pf-toast-notification notification-type="{{type}}" header="{{header}}" message="{{message}}"
-              show-close="{{showClose}}" close-callback="closeCallback"
-              action-title="{{primaryAction}}" action-callback="handleAction"
-              menu-actions="menuActions">
+              show-close="{{showClose}}"  html-content="htmlContent"
+              close-callback="closeCallback" action-title="{{primaryAction}}"
+              action-callback="handleAction" menu-actions="menuActions">
          </pf-toast-notification>
 
          <form class="form-horizontal">
@@ -81,13 +82,17 @@
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="type">Show Close:</label>
-             <div class="col-sm-3">
+             <div class="col-sm-1">
              <input type="checkbox" ng-model="showClose"/>
              </div>
              <label class="col-sm-2 control-label" for="type">Show Menu:</label>
-             <div class="col-sm-3">
+             <div class="col-sm-1">
               <input type="checkbox" ng-model="showMenu"/>
              </div>
+             <label class="col-sm-2 control-label" for="type">Allow HTML:</label>
+                <div class="col-sm-1">
+                <input type="checkbox" ng-model="htmlContent"/>
+             </div>
            </div>
          </form>
        </div>
@@ -105,6 +110,7 @@
        $scope.types = ['success','info','danger', 'warning'];
        $scope.type = $scope.types[0];
        $scope.showClose = false;
+       $scope.htmlContent = false;
 
        $scope.header = 'Default Header.';
        $scope.message = 'Default <strong>notification</strong> message.';
@@ -182,6 +188,7 @@ angular.module( 'patternfly.notification' ).component('pfToastNotification', {
     'message': '@',
     'header': '@',
     'showClose': '@',
+    'htmlContent': '<?',
     'closeCallback': '=?',
     'actionTitle': '@',
     'actionCallback': '=?',

src/notification/toast-notification.html

@@ -27,7 +27,11 @@
   <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>
+  <span ng-if="!$ctrl.htmlContent">
+    <strong ng-if="$ctrl.header" ng-bind="$ctrl.header"></strong>
+    <span ng-bind="$ctrl.message"></span>
+  </span>
+  <span ng-if="$ctrl.htmlContent">
     <strong ng-if="$ctrl.header" ng-bind-html="$ctrl.trustAsHtml($ctrl.header)"></strong>
     <span ng-bind-html="$ctrl.trustAsHtml($ctrl.message)"></span>
   </span>

test/notification/toast-notification.spec.js

@@ -21,13 +21,14 @@ describe('Component: pfToastNotification', function () {
     scope.$digest();
   };
 
-  var setupHTML = function (notificationType, header, message, showClose, primaryAction, showMenu, data) {
+  var setupHTML = function (notificationType, header, message, showClose, primaryAction, showMenu, data, htmlContent) {
     $scope.type = notificationType;
     $scope.header = header;
     $scope.message = message || "Test Toast Notification Message";
     $scope.showClose = showClose;
     $scope.primaryAction = primaryAction;
     $scope.data = data;
+    $scope.htmlContent = htmlContent;
 
     $scope.closeData = undefined;
     $scope.closeCallback = function (data) {
@@ -91,9 +92,9 @@ describe('Component: pfToastNotification', function () {
       title: "Test Notification"
     };
     var htmlTmp = '<pf-toast-notification notification-type="{{type}}" header="{{header}}" message="{{message}}"' +
-                  '    show-close="{{showClose}}" close-callback="closeCallback"' +
-                  '    action-title="{{primaryAction}}" action-callback="handleAction"' +
-                  '    menu-actions="menuActions" data="data">' +
+                  '    show-close="{{showClose}}" html-content="htmlContent" ' +
+                  '    close-callback="closeCallback" action-title="{{primaryAction}}"' +
+                  '    action-callback="handleAction" menu-actions="menuActions" data="data">' +
                   '    </pf-toast-notification>';
 
     compileHTML(htmlTmp, $scope);
@@ -119,12 +120,12 @@ describe('Component: pfToastNotification', function () {
   });
 
   it('should allow HTML content within the header and message', function () {
-    setupHTML ("info", "<em>Test Header</em>", null, false, '', false);
+    setupHTML ("info", "<em>Test Header</em>", null, false, '', false, null, true);
     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);
+    setupHTML ("info", "", "<em>Test Notification Message</em>", false, '', false, null, true);
     var message = element.find('.toast-pf > span em');
     expect(message.length).toBe(1);
     expect(message.text()).toContain("Test Notification Message");