Merge pull request #1041 from kensible/#957-subform-styling

Create sub forms for dropdowns. Dropdowns affected: SCM source and credentials details.

awx/ui/client/legacy-styles/forms.less

@@ -141,6 +141,28 @@
     padding-right: 50px;
 }
 
+.Form-subForm {
+    width: 100%;
+    border-left: 5px solid @default-border;
+    margin-left: -20px;
+    padding-left: 15px;
+    margin-bottom: 15px;
+
+    .Form-formGroup {
+        float: left;
+    }
+}
+
+.Form-subForm--title {
+  font-weight: bold;
+  text-transform: uppercase;
+  color: @default-interface-txt;
+  font-size: small;
+  width: 100%;
+  float: left;
+  margin-bottom: 10px;
+}
+
 .Form-textAreaLabel{
     width:100%;
 }

awx/ui/client/src/forms/Credentials.js

@@ -18,6 +18,9 @@ export default
             editTitle: '{{ name }}', //Legend in edit mode
             name: 'credential',
             forceListeners: true,
+            subFormTitles: {
+                credentialSubForm: 'Type Details',
+            },
 
             actions: {
 
@@ -103,7 +106,8 @@ export default
                             '</dl>\n',
                     dataTitle: 'Type',
                     dataPlacement: 'right',
-                    dataContainer: "body"
+                    dataContainer: "body",
+                    hasSubForm: true,
                     // helpCollapse: [{
                     //     hdr: 'Select a Credential Type',
                     //     content: '<dl>\n' +
@@ -131,7 +135,8 @@ export default
                         init: false
                     },
                     autocomplete: false,
-                    apiField: 'username'
+                    apiField: 'username',
+                    subForm: 'credentialSubForm',
                 },
                 secret_key: {
                     label: 'Secret Key',
@@ -145,7 +150,8 @@ export default
                     ask: false,
                     clear: false,
                     hasShowInputButton: true,
-                    apiField: 'passwowrd'
+                    apiField: 'passwowrd',
+                    subForm: 'credentialSubForm'
                 },
                 security_token: {
                     label: 'STS Token',
@@ -157,7 +163,8 @@ export default
                     hasShowInputButton: true,
                     dataTitle: 'STS Token',
                     dataPlacement: 'right',
-                    dataContainer: "body"
+                    dataContainer: "body",
+                    subForm: 'credentialSubForm'
                 },
                 "host": {
                     labelBind: 'hostLabel',
@@ -172,7 +179,8 @@ export default
                     awRequiredWhen: {
                         variable: 'host_required',
                         init: false
-                    }
+                    },
+                    subForm: 'credentialSubForm'
                 },
                 "username": {
                     labelBind: 'usernameLabel',
@@ -183,7 +191,8 @@ export default
                         variable: 'username_required',
                         init: false
                     },
-                    autocomplete: false
+                    autocomplete: false,
+                    subForm: "credentialSubForm"
                 },
                 "email_address": {
                     labelBind: 'usernameLabel',
@@ -197,7 +206,8 @@ export default
                     awPopOver: '<p>The email address assigned to the Google Compute Engine <b><i>service account.</b></i></p>',
                     dataTitle: 'Email',
                     dataPlacement: 'right',
-                    dataContainer: "body"
+                    dataContainer: "body",
+                    subForm: 'credentialSubForm'
                 },
                 "subscription_id": {
                     labelBind: "usernameLabel",
@@ -213,8 +223,8 @@ export default
                     awPopOver: '<p>Subscription ID is an Azure construct, which is mapped to a username.</p>',
                     dataTitle: 'Subscription ID',
                     dataPlacement: 'right',
-                    dataContainer: "body"
+                    dataContainer: "body",
-
+                    subForm: 'credentialSubForm'
                 },
                 "api_key": {
                     label: 'API Key',
@@ -228,6 +238,7 @@ export default
                     ask: false,
                     hasShowInputButton: true,
                     clear: false,
+                    subForm: 'credentialSubForm'
                 },
                 "password": {
                     labelBind: 'passwordLabel',
@@ -242,7 +253,8 @@ export default
                     awRequiredWhen: {
                         variable: "password_required",
                         init: false
-                    }
+                    },
+                    subForm: "credentialSubForm"
                 },
                 "ssh_password": {
                     label: 'Password', // formally 'SSH Password'
@@ -252,7 +264,8 @@ export default
                     editRequired: false,
                     ask: true,
                     hasShowInputButton: true,
-                    autocomplete: false
+                    autocomplete: false,
+                    subForm: 'credentialSubForm'
                 },
                 "ssh_key_data": {
                     labelBind: 'sshKeyDataLabel',
@@ -273,7 +286,8 @@ export default
                     awPopOverWatch:   "key_description",
                     dataTitle: 'Help',
                     dataPlacement: 'right',
-                    dataContainer: "body"
+                    dataContainer: "body",
+                    subForm: "credentialSubForm"
                 },
                 "ssh_key_unlock": {
                     label: 'Private Key Passphrase',
@@ -285,6 +299,7 @@ export default
                     ask: true,
                     hasShowInputButton: true,
                     askShow: "kind.value == 'ssh'",  // Only allow ask for machine credentials
+                    subForm: 'credentialSubForm'
                 },
                 "become_method": {
                     label: "Privilege Escalation",
@@ -297,7 +312,8 @@ export default
                     "This is equivalent to specifying the <code>--become-method=BECOME_METHOD</code> parameter, where <code>BECOME_METHOD</code> could be "+
                     "<code>sudo | su | pbrun | pfexec | runas</code> <br>(defaults to <code>sudo</code>)</p>",
                     dataPlacement: 'right',
-                    dataContainer: "body"
+                    dataContainer: "body",
+                    subForm: 'credentialSubForm'
                 },
                 "become_username": {
                     label: 'Privilege Escalation Username',
@@ -305,7 +321,8 @@ export default
                     ngShow: "kind.value == 'ssh' && (become_method && become_method.value)",
                     addRequired: false,
                     editRequired: false,
-                    autocomplete: false
+                    autocomplete: false,
+                    subForm: 'credentialSubForm'
                 },
                 "become_password": {
                     label: 'Privilege Escalation Password',
@@ -315,7 +332,8 @@ export default
                     editRequired: false,
                     ask: true,
                     hasShowInputButton: true,
-                    autocomplete: false
+                    autocomplete: false,
+                    subForm: 'credentialSubForm'
                 },
                 "project": {
                     labelBind: 'projectLabel',
@@ -331,7 +349,8 @@ export default
                     awRequiredWhen: {
                         variable: 'project_required',
                         init: false
-                    }
+                    },
+                    subForm: 'credentialSubForm'
                 },
                 "vault_password": {
                     label: "Vault Password",
@@ -341,7 +360,8 @@ export default
                     editRequired: false,
                     ask: true,
                     hasShowInputButton: true,
-                    autocomplete: false
+                    autocomplete: false,
+                    subForm: 'credentialSubForm'
                 }
             },
 

awx/ui/client/src/forms/Projects.js

@@ -19,6 +19,10 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
         name: 'project',
         forceListeners: true,
         tabs: true,
+        subFormTitles: {
+            sourceSubForm: 'Source Details',
+        },
+
 
         fields: {
             name: {
@@ -62,7 +66,8 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                 ngOptions: 'type.label for type in scm_type_options track by type.value',
                 ngChange: 'scmChange()',
                 addRequired: true,
-                editRequired: true
+                editRequired: true,
+                hasSubForm: true
             },
             missing_path_alert: {
                 type: 'alertblock',
@@ -112,6 +117,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                     variable: "scmRequired",
                     init: false
                 },
+                subForm: 'sourceSubForm',
                 helpCollapse: [{
                     hdr: 'GIT URLs',
                     content: '<p>Example URLs for GIT SCM include:</p><ul class=\"no-bullets\"><li>https://github.com/ansible/ansible.git</li>' +
@@ -135,14 +141,15 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                         'Do not put the username and key in the URL. ' +
                         'If using Bitbucket and SSH, do not supply your Bitbucket username.',
                     show: "scm_type.value == 'hg'"
-                }]
+                }],
             },
             scm_branch: {
                 labelBind: "scmBranchLabel",
                 type: 'text',
                 ngShow: "scm_type && scm_type.value !== 'manual'",
                 addRequired: false,
-                editRequired: false
+                editRequired: false,
+                subForm: 'sourceSubForm'
             },
             credential: {
                 label: 'SCM Credential',
@@ -152,12 +159,14 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                 sourceField: 'name',
                 ngClick: 'lookUpCredential()',
                 addRequired: false,
-                editRequired: false
+                editRequired: false,
+                subForm: 'sourceSubForm'
             },
             checkbox_group: {
                 label: 'SCM Update Options',
                 type: 'checkbox_group',
                 ngShow: "scm_type && scm_type.value !== 'manual'",
+                subForm: 'sourceSubForm',
                 fields: [{
                     name: 'scm_clean',
                     label: 'Clean',

awx/ui/client/src/shared/form-generator.js

@@ -1476,6 +1476,9 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                     }
                     html += "</div>\n";
                 } else {
+                    var inSubForm = false;
+                    var currentSubForm = undefined;
+                    var hasSubFormField;
                     // original, single-column form
                     section = '';
                     group = '';
@@ -1502,9 +1505,33 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                                 html += "<div" + sectionShow + ">\n";
                                 section = field.section;
                             }
+
+                            // To hide/show the subform when the value changes on parent
+                            if (field.hasSubForm === true) {
+                              hasSubFormField = fld;
+                            }
+
+                            // Add a subform container
+                            if(field.subForm && currentSubForm === undefined) {
+                                currentSubForm = field.subForm;
+                                var subFormTitle = this.form.subFormTitles[field.subForm];
+
+                                html += '<div class="Form-subForm '+ currentSubForm + '" ng-hide="'+ hasSubFormField + '.value === undefined"> ';
+                                html += '<span class="Form-subForm--title">'+ subFormTitle +'</span>';
+                            }
+                            else if (!field.subForm && currentSubForm !== undefined) {
+                               currentSubForm = undefined;
+                               html += '</div></div> ';
+                            }
+
                             html += this.buildField(fld, field, options, this.form);
+
                         }
                     }
+                    if (currentSubForm) {
+                      currentSubForm = undefined;
+                      html += '</div>';
+                    }
                     if (section !== '') {
                         html += "</div>\n</div>\n";
                     }