fix(pfEmptyState): Ability for urlAction in empty state component

Author: Amineta Lo

src/views/empty-state.component.js

@@ -11,6 +11,14 @@
  *   <li>.icon   - (string) class for main icon. Ex. 'pficon pficon-add-circle-o'
  *   <li>.title  - (string) Text for the main title
  *   <li>.info  - (string) Text for the main informational paragraph
+ *   <li>.helpLink - (object) Contains url specific properties and actions
+ *   <ul style='list-style-type: none'>
+ *     <li>.label - (string) Optional text label which appears before the urlLabel
+ *     <li>.urlLabel - (string) Optional text for the clickable portion of the link
+ *     <li>.url - (string) Optional text for url path
+ *     <li>.urlAction - (function) Optional function to invoke a url action when a callback method is specified.
+ *     When both urlAction and url are specified the component will first execute urlAction then nagivate to the url.
+ *   </ul>
  * </ul>
  * @param {array} actionButtons Buttons to display under the icon, title, and informational paragraph.
  *   <ul style='list-style-type: none'>

src/views/empty-state.html

@@ -8,7 +8,7 @@ <h4 id="blank-state-pf-title-{{$id}}" class="h1 blank-state-pf-title">
   <p id="blank-state-pf-info-{{$id}}" class="blank-state-pf-info" ng-if="$ctrl.config.info">
     {{$ctrl.config.info}}
   </p>
-  <p id="blank-state-pf-helpLink-{{$id}}" class="blank-state-pf-helpLink" ng-if="$ctrl.config.helpLink">
+  <p id="blank-state-pf-helpLink-{{$id}}" class="blank-state-pf-helpLink" ng-if="$ctrl.config.helpLink" ng-click="$ctrl.config.helpLink.urlAction()">
     {{$ctrl.config.helpLink.label}} <a href="{{$ctrl.config.helpLink.url}}">{{$ctrl.config.helpLink.urlLabel}}</a>.
   </p>
   <div ng-if="$ctrl.hasMainActions()" class="blank-slate-pf-main-action">

test/views/empty-state.spec.js

@@ -2,8 +2,6 @@ describe('Component:  pfEmptyState', function () {
   var $scope;
   var $compile;
   var element;
-  var performedAction;
-  var updateCount;
 
   // load the controller's module
   beforeEach(function () {
@@ -24,14 +22,20 @@ describe('Component:  pfEmptyState', function () {
   };
 
   beforeEach(function () {
+
+    var performEmptyStateAction = function () {
+      $scope.eventText = 'Empty State Action Executed';
+    };
+
     $scope.config = {
       icon: 'pficon-add-circle-o',
       title: 'Empty State Title',
       info: "This is the Empty State component. The goal of a empty state pattern is to provide a good first impression that helps users to achieve their goals. It should be used when a view is empty because no objects exists and you want to guide the user to perform specific actions.",
       helpLink: {
         label: 'For more information please see',
         urlLabel: 'pfExample',
-        url : '#/api/patternfly.views.component:pfEmptyState'
+        url : '#/api/patternfly.views.component:pfEmptyState',
+        urlAction: performEmptyStateAction
       }
     };
 
@@ -73,6 +77,8 @@ describe('Component:  pfEmptyState', function () {
     expect(element.find('.blank-state-pf-helpLink').text()).toContain('For more information please see');
     expect(element.find('a').text()).toContain('pfExample');
     expect(element.find('a').prop('href')).toContain('#/api/patternfly.views.component:pfEmptyState');
+    element.find('.blank-state-pf-helpLink').click();
+    expect($scope.eventText).toBe('Empty State Action Executed');
 
     var buttons = element.find('button');
     expect(buttons.length).toBe(4);