Added collapsible help panel to Credential detail page for Kind. Added auto collapse/expand based on whether or not a kind has been selected.

awx/ui/static/js/forms/Credentials.js

@@ -13,6 +13,7 @@ angular.module('CredentialFormDefinition', [])
         editTitle: '{{ name }}',                                   //Legend in edit mode
         name: 'credential',
         well: true,
+        forceListeners: true,
 
         fields: {
             name: {
@@ -69,7 +70,24 @@ angular.module('CredentialFormDefinition', [])
                 ngOptions: 'kind.label for kind in credential_kind_options',
                 ngChange: 'kindChange()',
                 addRequired: true, 
-                editRequired: true
+                editRequired: true,
+                helpCollapse: [
+                    { hdr: 'Credential Type',
+                      content: '<p>Choose a type based on how this credential will be used: ' +
+                               '<dl>\n' +
+                               '<dt>AWS</dt>\n' +
+                               '<dd>Access keys for running cloud inventory sync with Amazon Web Services.</dd>\n' +
+                               '<dt>Machine</dt>\n' +
+                               '<dd>Define SSH and Sudo access for playbooks. Used when submitting jobs to run playbooks ' +
+                                   'on a remote host.</dd>' +
+                               '<dt>Rackspace</dt>\n' + 
+                               '<dd>Credentials for running cloud inventory sync with Rackspace.</dd>\n' + 
+                               '<dt>SCM</dt>\n' +
+                               '<dd>Used on projects to clone and update local source code repositories ' + 
+                                   ' from a remote revision control system such as Git, SVN or Mercurial.</dd>\n' +
+                               '</dl>\n'
+
+                    }]
                 },
             access_key: {
                 label: 'Access Key',

awx/ui/static/js/helpers/Credentials.js

@@ -9,7 +9,7 @@
 
 angular.module('CredentialsHelper', ['Utilities'])  
     
-    .factory('KindChange', [ function() {
+    .factory('KindChange', [ 'Empty', function(Empty) {
     return function(params) {
       
         var scope = params.scope; 
@@ -22,21 +22,23 @@ angular.module('CredentialsHelper', ['Utilities'])
         scope['rackspace_required'] = false;
         scope['sshKeyDataLabel'] = 'SSH Private Key';
         
-        // Apply kind specific settings
+        if (!Empty(scope['kind'])) {
-        switch(scope['kind'].value) {
+            // Apply kind specific settings
-            case 'aws':
+            switch(scope['kind'].value) {
-                scope['aws_required'] = true;
+                case 'aws':
-                break; 
+                    scope['aws_required'] = true;
-            case 'rax': 
+                    break; 
-                scope['rackspace_required'] = true;
+                case 'rax': 
-                break;
+                    scope['rackspace_required'] = true;
-            case 'ssh':
+                    break;
-                scope['usernameLabel'] = 'SSH Username';
+                case 'ssh':
-                break; 
+                    scope['usernameLabel'] = 'SSH Username';
-            case 'scm':
+                    break; 
-                scope['sshKeyDataLabel'] = 'SCM Private Key';
+                case 'scm':
-                break;
+                    scope['sshKeyDataLabel'] = 'SCM Private Key';
-        } 
+                    break;
+            } 
+        }
 
         // Reset all the field values related to Kind.
         if (reset) {
@@ -53,6 +55,20 @@ angular.module('CredentialsHelper', ['Utilities'])
            scope['sudo_password_confirm'] = null;
         }
 
+        // Collapse or open help widget based on whether scm value is selected
+        var collapse = $('#credential_kind').parent().find('.panel-collapse').first();
+        var id = collapse.attr('id');
+        if (!Empty(scope.kind) && scope.kind.value !== '') {   
+           if ( $('#' + id + '-icon').hasClass('icon-minus') ) {
+              scope.accordionToggle('#' + id);
+           }
+        }
+        else {
+           if ( $('#' + id + '-icon').hasClass('icon-plus') ) {
+              scope.accordionToggle('#' + id);
+           }
+        }
+
         }
         }])
 

awx/ui/static/less/ansible-ui.less

@@ -165,17 +165,26 @@ hr {
 }
 
 /* help collapse */
-h4.panel-title {
+  h4.panel-title {
-  font-size: 14px;
+    font-size: 14px;
-}
+  }
 
-.panel-heading:hover {
+  .panel-heading:hover {
-  cursor: pointer;  
+    cursor: pointer;  
-}
+  }
 
-.panel-default>.panel-heading .collapse-help-icon {
+  .panel-default>.panel-heading .collapse-help-icon {
-  color: @grey;
+    color: @grey;
-}
+  }
+
+  .collapsible-help {
+    dl {
+      margin-left: 15px;
+    }   
+    dt {
+      margin-top: 15px;
+    }  
+  }
 
 th.actions-column,
 td.actions {