From 32696ea5f5f9ff81184445204b98d084946b8765 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Thu, 8 Jun 2017 22:05:59 -0400
Subject: [PATCH] (3.x) Fixes for Wizard Issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 src/wizard/wizard-directive.js              | 12 ++++++--
 src/wizard/wizard.html                      | 33 +++++++++++++--------
 styles/angular-patternfly.css               |  4 +++
 test/wizard/wizard-container-hide-back.html |  2 +-
 test/wizard/wizard.spec.js                  | 16 ++++++++++
 5 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/wizard/wizard-directive.js b/src/wizard/wizard-directive.js
index b7d045075..e5f9686c5 100644
--- a/src/wizard/wizard-directive.js
+++ b/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]);
diff --git a/src/wizard/wizard.html b/src/wizard/wizard.html
index 40e1cb4c7..3e62fa8c6 100644
--- a/src/wizard/wizard.html
+++ b/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>
diff --git a/styles/angular-patternfly.css b/styles/angular-patternfly.css
index 5d975ef7d..39580af1b 100644
--- a/styles/angular-patternfly.css
+++ b/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;
+}
diff --git a/test/wizard/wizard-container-hide-back.html b/test/wizard/wizard-container-hide-back.html
index 992728654..31ce87bcc 100755
--- a/test/wizard/wizard-container-hide-back.html
+++ b/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>
diff --git a/test/wizard/wizard.spec.js b/test/wizard/wizard.spec.js
index a1423dd62..822562ade 100644
--- a/test/wizard/wizard.spec.js
+++ b/test/wizard/wizard.spec.js
@@ -263,7 +263,15 @@ 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();
@@ -271,4 +279,12 @@ describe('Directive:  pfWizard', function () {
     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);
+  });
 });