(3.x) Fixes for Wizard Issues

Fixes to:
hide the back button only when ‘true’ is passed,
remove trailing space on next and back buttons,
reduce margin on cancel button when no back button

Fixes #468
Fixes #469
Fixes #474

Author: jeff-phillips-18

src/wizard/wizard-directive.js

@@ -399,9 +399,7 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
       $scope.steps = [];
       $scope.context = {};
       this.context = $scope.context;
-      $scope.hideHeader = $scope.hideHeader === 'true';
       this.hideSidebar = $scope.hideSidebar === 'true';
-      $scope.hideBaackButton = $scope.hideBackButton === 'true';
 
       // If a step class is given use it for all steps
       if (angular.isDefined($scope.stepClass)) {
@@ -702,6 +700,16 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
       $scope.wizard = this;
     },
     link: function ($scope) {
+      $scope.$watch('hideBackButton', function () {
+        $scope.hideBackButton = $scope.hideBackButton === 'true' || $scope.hideBackButton === true;
+      });
+      $scope.$watch('hideHeader', function () {
+        $scope.hideHeader = $scope.hideHeader === 'true' || $scope.hideHeader === true;
+      });
+      $scope.$watch('hideSidebar', function () {
+        $scope.hideSidebar = $scope.hideSidebar === 'true' || $scope.hideSidebar === true;
+      });
+
       $scope.$watch('wizardReady', function () {
         if ($scope.wizardReady) {
           $scope.goTo($scope.getEnabledSteps()[0]);

src/wizard/wizard.html

@@ -29,21 +29,30 @@ <h3 class="blank-slate-pf-main-action">{{loadingWizardTitle}}</h3>
     <div class="wizard-pf-position-override" ng-transclude ></div>
   </div>
   <div class="modal-footer wizard-pf-footer wizard-pf-position-override" ng-class="{'wizard-pf-footer-inline': embedInPage}">
-    <button pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel" ng-disabled="wizardDone" ng-click="onCancel()" ng-if="!embedInPage">{{cancelTitle}}</button>
+    <button pf-wiz-cancel
+            class="btn btn-default btn-cancel wizard-pf-cancel"
+            ng-class="{'wizard-pf-cancel-no-back': hideBackButton}"
+            ng-disabled="wizardDone"
+            ng-click="onCancel()"
+            ng-if="!embedInPage">{{cancelTitle}}</button>
     <div ng-if="!hideBackButton" class="tooltip-wrapper" uib-tooltip="{{prevTooltip}}" tooltip-placement="left">
-      <button id="backButton" pf-wiz-previous class="btn btn-default" ng-disabled="!wizardReady || wizardDone || !prevEnabled || firstStep"
-              callback="backCallback">
-        <span class="i fa fa-angular-left"></span>
-        {{backTitle}}
-      </button>
+      <button pf-wiz-previous
+              id="backButton"
+              class="btn btn-default"
+              ng-disabled="!wizardReady || wizardDone || !prevEnabled || firstStep"
+              callback="backCallback">{{backTitle}}</button>
     </div>
     <div class="tooltip-wrapper" uib-tooltip="{{nextTooltip}}" tooltip-placement="left">
-      <button id="nextButton" pf-wiz-next class="btn btn-primary wizard-pf-next" ng-disabled="!wizardReady || !nextEnabled"
-              callback="nextCallback">
-        {{nextTitle}}
-        <span class="i fa fa-angular-right"></span>
-      </button>
+      <button pf-wiz-next
+              id="nextButton"
+              class="btn btn-primary wizard-pf-next"
+              ng-disabled="!wizardReady || !nextEnabled"
+              callback="nextCallback">{{nextTitle}}</button>
     </div>
-    <button pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-cancel-inline" ng-disabled="wizardDone" ng-click="onCancel()" ng-if="embedInPage">{{cancelTitle}}</button>
+    <button pf-wiz-cancel
+            class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-cancel-inline"
+            ng-disabled="wizardDone"
+            ng-click="onCancel()"
+            ng-if="embedInPage">{{cancelTitle}}</button>
   </div>
 </div>

styles/angular-patternfly.css

@@ -480,3 +480,7 @@ accordion > .panel-group .panel-open .panel-title > a:before {
   border-color: #bbb;
   color: #bbb;
 }
+
+.wizard-pf-footer .btn-cancel.wizard-pf-cancel-no-back {
+  margin-right: 0;
+}

test/wizard/wizard-container-hide-back.html

@@ -7,7 +7,7 @@
   next-callback="nextCallback"
   back-callback="backCallback"
   current-step="currentStep"
-  hide-back-button="true"
+  hide-back-button="{{hideBackButton}}"
   wizard-done="deployComplete || deployInProgress"
   loading-secondary-information="secondaryLoadInformation">
   <div ng-include="'test/wizard/wizard-test-steps.html'"></div>

test/wizard/wizard.spec.js

@@ -263,12 +263,28 @@ describe('Directive:  pfWizard', function () {
     expect(sidebarPanel.length).toBe(3);
   });
 
+  it('should show the back button when not specified', function () {
+    setupWizard('test/wizard/wizard-container.html');
+
+    var backButton = element.find('.wizard-pf-footer #backButton');
+    expect(backButton.length).toBe(1);
+  });
+
   it('should hide the back button when specified', function () {
+    $scope.hideBackButton = true;
     setupWizard('test/wizard/wizard-container-hide-back.html');
     $timeout.flush();
     $timeout.flush();
 
     var backButton = element.find('.wizard-pf-footer #backButton');
     expect(backButton.length).toBe(0);
   });
+
+  it('should not hide the back button when specified', function () {
+    $scope.hideBackButton = false;
+    setupWizard('test/wizard/wizard-container-hide-back.html');
+
+    var backButton = element.find('.wizard-pf-footer #backButton');
+    expect(backButton.length).toBe(1);
+  });
 });