AMBARI-13544. Kerberos: credential dialog ux edits

ambari-web/app/messages.js

@@ -1043,6 +1043,8 @@ Em.I18n.translations = {
   'admin.kerberos.credentials.store.hint.not.supported': 'Ambari is not configured for storing credentials',
   'admin.kerberos.credentials.store.label': 'Save Admin Credentials',
   'admin.kerberos.credentials.store.menu.label': 'Manage KDC Credentials',
+  'admin.kerberos.credentials.form.header.stored': 'Update or remove the stored KDC Credentials in the encrypted credential store.',
+  'admin.kerberos.credentials.form.header.not.stored': 'Specify the KDC Admin Credentials to remember in the encrypted credential store.',
   'admin.kerberos.credentials.remove.confirmation.header': 'Remove KDC Credentials Confirmation',
   'admin.kerberos.credentials.remove.confirmation.body': 'You are about to remove the KDC Credentials from Ambari. Are you sure?',
   'admin.kerberos.wizard.configuration.note': 'This is the initial configuration created by Enable Kerberos wizard.',

ambari-web/app/templates/common/form/manage_credentilas_form.hbs

@@ -16,8 +16,10 @@
 * limitations under the License.
 }}
 
-
 <form class="form-horizontal">
+  <p class="alert alert-info">
+    {{view.formHeader}}
+  </p>
   <div class="control-group">
     <label class="control-label">{{t popup.invalid.KDC.admin.principal}}</label>
     <div class="controls">
@@ -30,29 +32,4 @@
       {{view Ember.TextField type="password" valueBinding="view.password" class="form-control"}}
     </div>
   </div>
-  <div class="control-group">
-    <span class="control-label"></span>
-    <div class="controls">
-      {{#if App.supports.storeKDCCredentials}}
-        <label>
-          {{view Ember.Checkbox checkedBinding="view.storeCredentials" disabledBinding="view.checkboxDisabled" classNames="pull-left"}}
-          <span {{bindAttr class=":mls view.checkboxDisabled:muted"}}>
-            {{t admin.kerberos.credentials.store.label}}
-            <a class="icon-question-sign icon-blue" rel="tooltip" href="javascript:void(null);" data-toggle="tooltip" {{bindAttr data-original-title="view.hintMessage"}}><a/>
-          </span>
-        </label>
-      {{/if}}
-    </div>
-  </div>
-  <div class="control-group">
-    <span class="control-label"></span>
-    <div class="controls">
-      <button {{bindAttr class=":btn :btn-danger :pull-left view.isRemovable::hidden" disabled="view.isRemoveDisabled"}} {{action removeKDCCredentials target="view"}}>
-        <i class="icon-remove-circle"></i> {{t common.remove}}</button>
-      <div {{bindAttr class=":spinner :mll :pull-left view.isActionInProgress::hide"}}></div>
-      {{#if view.actionStatus}}
-        <span class="pull-left lh-btn mll text-success">{{view.actionStatus}}</span>
-      {{/if}}
-    </div>
-  </div>
 </form>

ambari-web/app/templates/common/modal_popup.hbs

@@ -52,7 +52,7 @@
           {{t app.settings.notShowBgOperations}}</label>
         {{/if}}
         {{#if view.third}}
-          <button class="btn" {{bindAttr disabled="view.disableThird"}} {{action onThird target="view"}}>{{view.third}}</button>
+          <button {{bindAttr disabled="view.disableThird" class=":btn view.thirdClass"}} {{action onThird target="view"}}>{{view.third}}</button>
         {{/if}}
         {{#if view.secondary}}
           <button {{bindAttr disabled="view.disableSecondary" class=":btn view.secondaryClass"}} {{action onSecondary target="view"}}>{{view.secondary}}</button>

ambari-web/app/templates/main/admin/kerberos.hbs

@@ -25,7 +25,9 @@
             <button class="btn btn-success" id="regenerate-keytabs" {{bindAttr disabled="isKerberosButtonsDisabled"}} {{action regenerateKeytabs target="controller"}}>
               <i class="icon-repeat"></i> {{t admin.kerberos.button.regenerateKeytabs}}</button>
             {{#if App.supports.storeKDCCredentials}}
-              <button class="btn btn-primary" {{action showManageKDCCredentialsPopup target="controller"}}>{{t admin.kerberos.credentials.store.menu.label}}</button>
+              {{#if App.isCredentialStorePersistent}}
+                <button class="btn btn-primary" {{action showManageKDCCredentialsPopup target="controller"}}>{{t admin.kerberos.credentials.store.menu.label}}</button>
+              {{/if}}
             {{/if}}
           {{/unless}}
           <br/>

ambari-web/app/views/common/form/manage_credentials_form_view.js

@@ -85,9 +85,15 @@ App.ManageCredentialsFormView = Em.View.extend({
    * @type {string}
    */
   storageType: function() {
-    return this.get('storeCredentials') ? credentialsUtils.STORE_TYPES.PERSISTENT : credentialsUtils.STORE_TYPES.TEMPORARY;
+    return credentialsUtils.STORE_TYPES.PERSISTENT;
   }.property('storeCredentials'),
 
+  formHeader: function() {
+    return this.get('isRemovable') ?
+      Em.I18n.t('admin.kerberos.credentials.form.header.stored') :
+      Em.I18n.t('admin.kerberos.credentials.form.header.not.stored');
+  }.property('isRemovable'),
+
   /**
    * Message to display in tooltip regarding persistent storage state.
    *
@@ -157,11 +163,12 @@ App.ManageCredentialsFormView = Em.View.extend({
   /**
    * Remove KDC credentials action.
    *
-   * @returns {App.ModalPopup}
+   * @returns {object} for better testing purpose returns object { deferred: $.Deferred, popup: App.ModalPopup }
    */
   removeKDCCredentials: function() {
     var t = Em.I18n.t;
     var self = this;
+    var dfd = $.Deferred();
     this.set('actionStatus', false);
     var popup = App.showConfirmationPopup(
       function() {
@@ -172,6 +179,7 @@ App.ManageCredentialsFormView = Em.View.extend({
             self.prepareContent();
             self.set('actionStatus', Em.I18n.t('common.success'));
             self.get('parentView').set('isCredentialsRemoved', true);
+            dfd.resolve();
           });
       }, t('admin.kerberos.credentials.remove.confirmation.body'),
       function () {},
@@ -179,7 +187,10 @@ App.ManageCredentialsFormView = Em.View.extend({
       t('yes'),
       false);
     popup.set('secondary', t('no'));
-    return popup;
+    return {
+      deferred: dfd,
+      popup: popup
+    };
   },
 
   /**

ambari-web/app/views/common/modal_popup.js

@@ -36,6 +36,7 @@ App.ModalPopup = Ember.View.extend({
   disableThird: false,
   primaryClass: 'btn-success',
   secondaryClass: '',
+  thirdClass: '',
   onPrimary: function () {
     this.hide();
   },
@@ -120,4 +121,4 @@ App.ModalPopup.reopenClass({
     return popup;
   }
 
-});
+});

ambari-web/app/views/common/modal_popups/manage_kdc_credentials_popup.js

@@ -17,7 +17,6 @@
  */
 
 var App = require('app');
-var credentialsUtils = require('utils/credentials');
 
 /**
  * @return {*}
@@ -27,6 +26,14 @@ App.showManageCredentialsPopup = function () {
     header: Em.I18n.t('admin.kerberos.credentials.store.menu.label'),
     bodyClass: App.ManageCredentialsFormView,
     primary: Em.I18n.t('common.save'),
+
+    thirdClass: 'pull-left btn-danger',
+    third: function() {
+      return this.get('formView.isRemovable') ?
+        Em.I18n.t('common.remove') :
+        null;
+    }.property('formView.isRemovable'),
+
     isCredentialsRemoved: false,
 
     disablePrimary: function() {
@@ -37,12 +44,6 @@ App.showManageCredentialsPopup = function () {
       return this.get('childViews').findProperty('viewName', 'manageCredentialsForm');
     }.property(),
 
-    credentialsRemoveObserver: function() {
-      if (this.get('isCredentialsRemoved')) {
-        this.hide();
-      }
-    }.observes('isCredentialsRemoved'),
-
     onPrimary: function() {
       var self = this;
       var formView = this.get('formView');
@@ -53,6 +54,15 @@ App.showManageCredentialsPopup = function () {
       } else {
         this.hide();
       }
+    },
+
+    onThird: function() {
+      var self = this;
+      if (this.get('formView')) {
+        this.get('formView').removeKDCCredentials().deferred.always(function() {
+          self.hide();
+        });
+      }
     }
   });
 };

ambari-web/test/views/common/form/manage_kdc_credentials_form_test.js

@@ -104,13 +104,13 @@ describe('#App.ManageCredentialsFormView', function() {
 
   describe('#removeKDCCredentials', function() {
     it('should show confirmation popup', function() {
-      var popup = view.removeKDCCredentials();
+      var popup = view.removeKDCCredentials().popup;
       expect(popup).be.instanceof(App.ModalPopup);
       popup.destroy();
     });
     it('should call credentialUtils#removeCredentials', function() {
       this.clock = sinon.useFakeTimers();
-      var popup = view.removeKDCCredentials();
+      var popup = view.removeKDCCredentials().popup;
       assert.isFalse(view.get('actionStatus'), '#actionStatus before remove');
       sinon.stub(credentialUtils, 'removeCredentials', function() {
         var dfd = $.Deferred();