updates to credential types forms and lists

awx/ui/client/src/credential-types/credential-types.form.js

@@ -72,7 +72,14 @@ export default ['i18n', function(i18n) {
                 default: '---',
                 showParseTypeToggle: true,
                 parseTypeName: 'parseTypeInputs',
-                awPopOver: '<p>TODO: input config helper text</p>',
+                awPopOver: "<p>Enter inputs using either JSON or YAML syntax. Use the " +
+                    "radio button to toggle between the two.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />&emsp; \"somevar\": \"somevalue\",<br />&emsp;\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
+                    '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
+                    '<p>View YAML examples at <a href="http://docs.ansible.com/YAMLSyntax.html" target="_blank">docs.ansible.com</a></p>',
                 dataTitle: i18n._('Input Configuration'),
                 dataPlacement: 'right',
                 dataContainer: "body",
@@ -86,7 +93,14 @@ export default ['i18n', function(i18n) {
                 default: '---',
                 showParseTypeToggle: true,
                 parseTypeName: 'parseTypeInjectors',
-                awPopOver: '<p>TODO: injector config helper text</p>',
+                awPopOver: "<p>Enter injectors using either JSON or YAML syntax. Use the " +
+                    "radio button to toggle between the two.</p>" +
+                    "JSON:<br />\n" +
+                    "<blockquote>{<br />&emsp; \"somevar\": \"somevalue\",<br />&emsp;\"password\": \"magic\"<br /> }</blockquote>\n" +
+                    "YAML:<br />\n" +
+                    "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
+                    '<p>View JSON examples at <a href="http://www.json.org" target="_blank">www.json.org</a></p>' +
+                    '<p>View YAML examples at <a href="http://docs.ansible.com/YAMLSyntax.html" target="_blank">docs.ansible.com</a></p>',
                 dataTitle: i18n._('Injector Configuration'),
                 dataPlacement: 'right',
                 dataContainer: "body",

awx/ui/client/src/credential-types/credential-types.list.js

@@ -20,13 +20,9 @@ export default ['i18n', function(i18n){
                 key: true,
                 label: i18n._('Name'),
                 columnClass: 'col-md-3 col-sm-9 col-xs-9',
-                modalColumnClass: 'col-md-8'
+                modalColumnClass: 'col-md-8',
-            },
+                awToolTip: '{{credential_type.description}}',
-            // TODO: update to tooltip on name
+                dataPlacement: 'top'
-            description: {
-                label: i18n._('Description'),
-                excludeModal: true,
-                columnClass: 'col-md-4 hidden-sm hidden-xs'
             },
             kind: {
                 label: i18n._('Type'),

awx/ui/client/src/credential-types/list/list.controller.js

@@ -91,24 +91,24 @@ export default ['$rootScope', '$scope', 'Wait', 'CredentialTypesList',
         // iterate over the list and add fields like type label, after the
         // OPTIONS request returns, or the list is sorted/paginated/searched
         function optionsRequestDataProcessing(){
-            if($scope.list.name === 'credential_types'){
+            $scope.optionsDefer.promise.then(function(options) {
-                if ($scope[list.name] !== undefined) {
+                if($scope.list.name === 'credential_types'){
-                    $scope[list.name].forEach(function(item, item_idx) {
+                    if ($scope[list.name] !== undefined) {
-                        var itm = $scope[list.name][item_idx];
+                        $scope[list.name].forEach(function(item, item_idx) {
-
+                            var itm = $scope[list.name][item_idx];
-                        // Set the item type label
+                            // Set the item type label
-                        if (list.fields.kind && $scope.options &&
+                            if (list.fields.kind && options && options.actions && options.actions.GET && options.actions.GET.kind) {
-                            $scope.options.kind) {
+                                options.actions.GET.kind.choices.forEach(function(choice) {
-                                $scope.options.kind.choices.forEach(function(choice) {
                                     if (choice[0] === item.kind) {
                                         itm.kind_label = choice[1];
                                     }
                                 });
-                        }
+                            }
 
-                    });
+                        });
+                    }
                 }
-            }
+            });
         }
 
         $scope.$watchCollection(`${$scope.list.name}`, function() {

awx/ui/client/src/shared/Utilities.js

@@ -721,7 +721,7 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                     variable = params.variable,
                     callback = params.callback,
                     choice_name = params.choice_name,
-                    options = params.options
+                    options = params.options;
 
                 if (scope[variable]) {
                     scope[variable].length = 0;
@@ -756,7 +756,7 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                     if (callback) {
                         scope.$emit(callback);
                     }
-                }
+                };
 
                 if (!options) {
                   Rest.setUrl(url);

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

@@ -675,7 +675,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                                         <label ng-class="${toggleLeftClass}" class="btn btn-xs">
                                             <input type="radio" value="yaml" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />YAML
                                         </label>
-                                        <label ng-class="${toggleRightClass}" class="btn btn-xs btn-default">
+                                        <label ng-class="${toggleRightClass}" class="btn btn-xs">
                                             <input type="radio" value="json" ng-model="${parseTypeName}" ng-change="parseTypeChange('${parseTypeName}', '${fld}')" />JSON
                                         </label>
                                     </div>