Disable angular wizard finish button when clicked

The finish button may be pressed multiple times before the wizard
is closed, causing the underlying action to be invoked multiple
times. This patch disables the button before invoking the action,
re-enabling it if there is some error completing the action.

Closes-Bug: 1520598
Change-Id: If3363f6115af2a949f720eb3833dec405e986308
(cherry picked from commit fec418f830b73f77cc6ae9c73255f0887d296202)

3 files changed, 13 insertions, 1 deletions

diff --git a/horizon/static/framework/widgets/wizard/wizard.controller.js b/horizon/static/framework/widgets/wizard/wizard.controller.js
index 3474ad318..19457bb2b 100644
--- a/horizon/static/framework/widgets/wizard/wizard.controller.js
+++ b/horizon/static/framework/widgets/wizard/wizard.controller.js
@@ -56,6 +56,7 @@
     viewModel.showSpinner = false;
     viewModel.hasError = false;
     viewModel.onClickFinishBtn = onClickFinishBtn;
+    viewModel.isSubmitting = false;
 
     $scope.initPromise.then(onInitSuccess, onInitError);
 
@@ -84,6 +85,7 @@
       viewModel.showSpinner = false;
       viewModel.errorMessage = errorMessage;
       viewModel.hasError = true;
+      viewModel.isSubmitting = false;
     }
 
     function beforeSubmit() {
@@ -98,6 +100,8 @@
     }
 
     function onClickFinishBtn() {
+      // prevent the finish button from being clicked again
+      viewModel.isSubmitting = true;
       beforeSubmit();
       $scope.submit().then(afterSubmit, showError);
     }
diff --git a/horizon/static/framework/widgets/wizard/wizard.html b/horizon/static/framework/widgets/wizard/wizard.html
index 2f7d8f146..34f8a586c 100644
--- a/horizon/static/framework/widgets/wizard/wizard.html
+++ b/horizon/static/framework/widgets/wizard/wizard.html
@@ -50,7 +50,7 @@
 
       <button class="finish btn btn-sm btn-success"
         ng-click="viewModel.onClickFinishBtn()"
-        ng-disabled="wizardForm.$invalid">
+        ng-disabled="wizardForm.$invalid||viewModel.isSubmitting">
         <span ng-class="::viewModel.btnIcon.finish||'fa fa-check'"></span>
         <span ng-bind="::viewModel.btnText.finish"></span>
       </button>
diff --git a/horizon/static/framework/widgets/wizard/wizard.spec.js b/horizon/static/framework/widgets/wizard/wizard.spec.js
index 1a95abd09..5616e4470 100644
--- a/horizon/static/framework/widgets/wizard/wizard.spec.js
+++ b/horizon/static/framework/widgets/wizard/wizard.spec.js
@@ -173,6 +173,14 @@
       expect(element[0].querySelector('button.finish').hasAttribute('disabled')).toBe(false);
     });
 
+    it('should have finish button disabled if isSubmitting is set', function () {
+      $scope.viewModel = { };
+      $scope.$apply();
+      $scope.viewModel.isSubmitting = true;
+      $scope.$apply();
+      expect(element[0].querySelector('button.finish').hasAttribute('disabled')).toBe(true);
+    });
+
     it('should show error message after calling method showError', function () {
       var errorMessage = 'some error message';
       $scope.$apply();