AMBARI-17610. Installer and Add Host wizard: clicking next button on "Confirm Hosts" page shows spinner without disabling next button (alexantonenko)

ambari-web/app/controllers/wizard/step3_controller.js

@@ -205,6 +205,10 @@ App.WizardStep3Controller = Em.Controller.extend(App.ReloadPopupMixin, {
     return (App.get('testMode')) ? true : !this.get('isRegistrationInProgress');
   }.property('isRegistrationInProgress'),
 
+  isNextButtonDisabled: Em.computed.or('App.router.btnClickInProgress', 'isSubmitDisabled'),
+
+  isBackButtonDisabled: Em.computed.or('App.router.btnClickInProgress', 'isBackDisabled'),
+
   /**
    * Progress value for "update hosts status" process
    * @type {number}

ambari-web/app/controllers/wizard/step9_controller.js

@@ -114,6 +114,8 @@ App.WizardStep9Controller = Em.Controller.extend(App.ReloadPopupMixin, {
     return !validStates.contains(this.get('content.cluster.status')) || App.get('router.btnClickInProgress');
   }.property('content.cluster.status'),
 
+  isNextButtonDisabled: Em.computed.or('App.router.nextBtnClickInProgress', 'isSubmitDisabled'),
+
   /**
    * Observer function: Enables previous steps link if install task failed in installer wizard.
    * @method togglePreviousSteps

ambari-web/app/templates/wizard/step3.hbs

@@ -148,13 +148,13 @@
     {{/unless}}
   </div>
   <div class="btn-area">
-    <button type="button" class="btn pull-left installer-back-btn" {{bindAttr disabled="isBackDisabled"}} {{action back}}>
+    <button type="button" class="btn pull-left installer-back-btn" {{bindAttr disabled="isBackButtonDisabled"}} {{action back}}>
       &larr; {{t common.back}}
       {{#if App.router.backBtnClickInProgress}}
         {{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
       {{/if}}
     </button>
-    <button type="button" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>
+    <button type="button" class="btn btn-success pull-right" {{bindAttr disabled="isNextButtonDisabled"}} {{action submit target="controller"}}>
       {{#if App.router.nextBtnClickInProgress}}
         {{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
       {{/if}}

ambari-web/app/templates/wizard/step9.hbs

@@ -136,7 +136,7 @@
       </p>
     {{/if}}
     <div class="btn-area">
-      <button class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>
+      <button class="btn btn-success pull-right" {{bindAttr disabled="isNextButtonDisabled"}} {{action submit target="controller"}}>
         {{#if App.router.nextBtnClickInProgress}}
           {{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
         {{/if}}

ambari-web/test/controllers/wizard/step3_test.js

@@ -3174,4 +3174,122 @@ describe('App.WizardStep3Controller', function () {
 
   });
 
+  describe('#isNextButtonDisabled', function () {
+
+    var cases = [
+      {
+        btnClickInProgress: true,
+        isSubmitDisabled: true,
+        isNextButtonDisabled: true,
+        description: 'button clicked, submit disabled',
+        title: 'next button disabled'
+      },
+      {
+        btnClickInProgress: true,
+        isSubmitDisabled: false,
+        isNextButtonDisabled: true,
+        description: 'button clicked, submit not disabled',
+        title: 'next button disabled'
+      },
+      {
+        btnClickInProgress: false,
+        isSubmitDisabled: true,
+        isNextButtonDisabled: true,
+        description: 'no button clicked, submit disabled',
+        title: 'next button disabled'
+      },
+      {
+        btnClickInProgress: false,
+        isSubmitDisabled: false,
+        isNextButtonDisabled: false,
+        description: 'no button clicked, submit not disabled',
+        title: 'next button enabled'
+      }
+    ];
+
+    cases.forEach(function (item) {
+
+      describe(item.description, function () {
+
+        beforeEach(function () {
+          c.set('isSubmitDisabled', item.isSubmitDisabled);
+          sinon.stub(App, 'get').withArgs('router.btnClickInProgress').returns(item.btnClickInProgress);
+          c.propertyDidChange('isSubmitDisabled');
+          c.propertyDidChange('App.router.btnClickInProgress');
+        });
+
+        afterEach(function () {
+          App.get.restore();
+        });
+
+        it(item.title, function () {
+          expect(c.get('isNextButtonDisabled')).to.equal(item.isNextButtonDisabled);
+        });
+
+      });
+
+    });
+
+  });
+
+  describe('#isBackButtonDisabled', function () {
+
+    var cases = [
+      {
+        btnClickInProgress: true,
+        isBackDisabled: true,
+        isBackButtonDisabled: true,
+        description: 'button clicked, stepping back disabled',
+        title: 'back button disabled'
+      },
+      {
+        btnClickInProgress: true,
+        isBackDisabled: false,
+        isBackButtonDisabled: true,
+        description: 'button clicked, stepping back not disabled',
+        title: 'back button disabled'
+      },
+      {
+        btnClickInProgress: false,
+        isBackDisabled: true,
+        isBackButtonDisabled: true,
+        description: 'no button clicked, stepping back disabled',
+        title: 'back button disabled'
+      },
+      {
+        btnClickInProgress: false,
+        isBackDisabled: false,
+        isBackButtonDisabled: false,
+        description: 'no button clicked, stepping back not disabled',
+        title: 'back button enabled'
+      }
+    ];
+
+    cases.forEach(function (item) {
+
+      describe(item.description, function () {
+
+        beforeEach(function () {
+          c.reopen({
+            isBackDisabled: item.isBackDisabled
+          });
+          sinon.stub(App, 'get').withArgs('router.btnClickInProgress').returns(item.btnClickInProgress);
+          c.propertyDidChange('isBackDisabled');
+          c.propertyDidChange('App.router.btnClickInProgress');
+        });
+
+        afterEach(function () {
+          App.get.restore();
+        });
+
+        it(item.title, function () {
+          expect(c.get('isBackButtonDisabled')).to.equal(item.isBackButtonDisabled);
+        });
+
+      });
+
+    });
+
+  });
+
 });

ambari-web/test/controllers/wizard/step9_test.js

@@ -1853,4 +1853,64 @@ describe('App.InstallerStep9Controller', function () {
 
   });
 
+  describe('#isNextButtonDisabled', function () {
+
+    var cases = [
+      {
+        nextBtnClickInProgress: true,
+        isSubmitDisabled: true,
+        isNextButtonDisabled: true,
+        description: 'button clicked, submit disabled',
+        title: 'next button disabled'
+      },
+      {
+        nextBtnClickInProgress: true,
+        isSubmitDisabled: false,
+        isNextButtonDisabled: true,
+        description: 'button clicked, submit not disabled',
+        title: 'next button disabled'
+      },
+      {
+        nextBtnClickInProgress: false,
+        isSubmitDisabled: true,
+        isNextButtonDisabled: true,
+        description: 'no button clicked, submit disabled',
+        title: 'next button disabled'
+      },
+      {
+        nextBtnClickInProgress: false,
+        isSubmitDisabled: false,
+        isNextButtonDisabled: false,
+        description: 'no button clicked, submit not disabled',
+        title: 'next button enabled'
+      }
+    ];
+
+    cases.forEach(function (item) {
+
+      describe(item.description, function () {
+
+        beforeEach(function () {
+          c.reopen({
+            isSubmitDisabled: item.isSubmitDisabled
+          });
+          sinon.stub(App, 'get').withArgs('router.nextBtnClickInProgress').returns(item.nextBtnClickInProgress);
+          c.propertyDidChange('isSubmitDisabled');
+          c.propertyDidChange('App.router.nextBtnClickInProgress');
+        });
+
+        afterEach(function () {
+          App.get.restore();
+        });
+
+        it(item.title, function () {
+          expect(c.get('isNextButtonDisabled')).to.equal(item.isNextButtonDisabled);
+        });
+
+      });
+
+    });
+
+  });
+
 });