From 2a58d50cfa1cb6f229c838240166b36654a22be2 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansibleworks.com>
Date: Mon, 4 Nov 2013 16:49:34 +0000
Subject: [PATCH] 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   | 20 ++++++++++-
 awx/ui/static/js/helpers/Credentials.js | 48 ++++++++++++++++---------
 awx/ui/static/less/ansible-ui.less      | 27 +++++++++-----
 3 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/awx/ui/static/js/forms/Credentials.js b/awx/ui/static/js/forms/Credentials.js
index 391234cf6b..6262ff3e78 100644
--- a/awx/ui/static/js/forms/Credentials.js
+++ b/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',
diff --git a/awx/ui/static/js/helpers/Credentials.js b/awx/ui/static/js/helpers/Credentials.js
index a1ffc003d3..2426790f38 100644
--- a/awx/ui/static/js/helpers/Credentials.js
+++ b/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
-        switch(scope['kind'].value) {
-            case 'aws':
-                scope['aws_required'] = true;
-                break; 
-            case 'rax': 
-                scope['rackspace_required'] = true;
-                break;
-            case 'ssh':
-                scope['usernameLabel'] = 'SSH Username';
-                break; 
-            case 'scm':
-                scope['sshKeyDataLabel'] = 'SCM Private Key';
-                break;
-        } 
+        if (!Empty(scope['kind'])) {
+            // Apply kind specific settings
+            switch(scope['kind'].value) {
+                case 'aws':
+                    scope['aws_required'] = true;
+                    break; 
+                case 'rax': 
+                    scope['rackspace_required'] = true;
+                    break;
+                case 'ssh':
+                    scope['usernameLabel'] = 'SSH Username';
+                    break; 
+                case 'scm':
+                    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);
+           }
+        }
+
         }
         }])
 
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 2931745912..ea3f3acaaa 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -165,17 +165,26 @@ hr {
 }
 
 /* help collapse */
-h4.panel-title {
-  font-size: 14px;
-}
+  h4.panel-title {
+    font-size: 14px;
+  }
 
-.panel-heading:hover {
-  cursor: pointer;  
-}
+  .panel-heading:hover {
+    cursor: pointer;  
+  }
 
-.panel-default>.panel-heading .collapse-help-icon {
-  color: @grey;
-}
+  .panel-default>.panel-heading .collapse-help-icon {
+    color: @grey;
+  }
+
+  .collapsible-help {
+    dl {
+      margin-left: 15px;
+    }   
+    dt {
+      margin-top: 15px;
+    }  
+  }
 
 th.actions-column,
 td.actions {