centralize variable parsing logic in code mirror directive

awx/ui/client/lib/components/code-mirror/code-mirror.directive.js

@@ -1,7 +1,6 @@
 const templateUrl = require('~components/code-mirror/code-mirror.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-const ParseType = 'yaml';
 
 function atCodeMirrorController (
     $scope,
@@ -10,13 +9,15 @@ function atCodeMirrorController (
 ) {
     const vm = this;
     const variablesName = `${$scope.name}_variables`;
+
     function init () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
-        $scope.parseType = ParseType;
+        $scope.variables = sanitizeVars($scope.variables);
+        $scope.parseType = 'yaml';
 
         $scope.variablesName = variablesName;
         $scope[variablesName] = $scope.variables;
@@ -59,6 +60,32 @@ function atCodeMirrorController (
         vm.expanded = false;
     }
 
+    // Adding this function b/c sometimes extra vars are returned to the
+    // UI as a string (ex: "foo: bar"), and other times as a
+    // json-object-string (ex: "{"foo": "bar"}"). CodeMirror wouldn't know
+    // how to prettify the latter. The latter occurs when host vars were
+    // system generated and not user-input (such as adding a cloud host);
+    function sanitizeVars (str) {
+        // Quick function to test if the host vars are a json-object-string,
+        // by testing if they can be converted to a JSON object w/o error.
+        function IsJsonString (varStr) {
+            try {
+                JSON.parse(varStr);
+            } catch (e) {
+                return false;
+            }
+            return true;
+        }
+
+        if (str === '' || str === '{}') {
+            return '---';
+        } else if (IsJsonString(str)) {
+            str = JSON.parse(str);
+            return jsyaml.safeDump(str);
+        }
+        return str;
+    }
+
     vm.name = $scope.name;
     vm.strings = strings;
     vm.expanded = false;
@@ -70,7 +97,7 @@ function atCodeMirrorController (
         $scope.init = init;
     }
     angular.element(document).ready(() => {
-        init($scope.variables, $scope.name);
+        init();
     });
 }
 

awx/ui/client/lib/components/code-mirror/code-mirror.partial.html

@@ -18,7 +18,7 @@
              </a>
              <div class="atCodeMirror-toggleContainer FormToggle-container">
                  <div class="btn-group">
-                    <label ng-class="{'btn-primary': parseType === 'yaml','Button-primary--hollow' : parseType === 'json'}" class="btn btn-xs btn-primary">
+                    <label ng-class="{'btn-primary': parseType === 'yaml','Button-primary--hollow' : parseType === 'json'}" class="btn btn-xs">
                         <input
                             type="radio"
                             value="yaml"
@@ -27,7 +27,7 @@
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.YAML')}}
                     </label>
-                    <label ng-class="{'btn-primary': parseType === 'json','Button-primary--hollow' : parseType === 'yaml'}" class="btn btn-xs Button-primary--hollow">
+                    <label ng-class="{'btn-primary': parseType === 'json','Button-primary--hollow' : parseType === 'yaml'}" class="btn btn-xs">
                         <input
                             type="radio"
                             value="json"

awx/ui/client/src/inventories-hosts/hosts/edit/host-edit.controller.js

@@ -42,43 +42,8 @@
  			$rootScope.breadcrumb.host_name = host.data.name;
             $scope.name = host.data.name;
  			$scope.description = host.data.description;
-			$scope.variables = getVars(host.data.variables);
+			$scope.variables = host.data.variables;
-        	ParseTypeChange({
-        		scope: $scope,
-        		field_id: 'host_variables',
-        		variable: 'variables',
-        	});
  		};
 
-		// Adding this function b/c sometimes extra vars are returned to the
-		// UI as a string (ex: "foo: bar"), and other times as a
-		// json-object-string (ex: "{"foo": "bar"}"). CodeMirror wouldn't know
-		// how to prettify the latter. The latter occurs when host vars were
-		// system generated and not user-input (such as adding a cloud host);
-		function getVars(str){
-
-			// Quick function to test if the host vars are a json-object-string,
-			// by testing if they can be converted to a JSON object w/o error.
-			function IsJsonString(str) {
-				try {
-					JSON.parse(str);
-				} catch (e) {
-					return false;
-				}
-				return true;
-			}
-
-			if(str === ''){
-				return '---';
-			}
-			else if(IsJsonString(str)){
-				str = JSON.parse(str);
-				return jsyaml.safeDump(str);
-			}
-			else if(!IsJsonString(str)){
-				return str;
-			}
-		}
-
  		init();
  	}];

awx/ui/client/src/inventories-hosts/hosts/host.form.js

@@ -65,24 +65,18 @@ function(i18n) {
                     type: 'text'
                 },
                 variables: {
-                    root: 'host_variables',
                     label: i18n._('Variables'),
                     type: 'code_mirror',
-                    rows: 6,
                     variables: 'variables',
                     class: 'Form-formGroup--fullWidth',
                     "default": "---",
-                    awPopOver: i18n._('Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.'),
+                    awPopOver: "<p>" + i18n._("Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.") + "</p>" +
-                    _awPopOver: "<p>" + i18n._("Enter inventory variables 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" +
+                        "<blockquote>{<br />&emsp;&quot;somevar&quot;: &quot;somevalue&quot;,<br />&emsp;&quot;password&quot;: &quot;magic&quot;<br /> }</blockquote>\n" +
                         "YAML:<br />\n" +
                         "<blockquote>---<br />somevar: somevalue<br />password: magic<br /></blockquote>\n" +
-                        '<p>' + i18n.sprintf(i18n._('View JSON examples at %s'), '<a href="http://www.json.org" target="_blank">www.json.org</a>') + '</p>' +
+                        '<p>' + i18n.sprintf(i18n._('View JSON examples at %s'), '<a href=&quot;http://www.json.org&quot; target=&quot;_blank&quot;>www.json.org</a>') + '</p>' +
-                        '<p>' + i18n.sprintf(i18n._('View YAML examples at %s'), '<a href="http://docs.ansible.com/YAMLSyntax.html" target="_blank">docs.ansible.com</a>') + '</p>',
+                        '<p>' + i18n.sprintf(i18n._('View YAML examples at %s'), '<a href=&quot;http://docs.ansible.com/YAMLSyntax.html&quot; target=&quot;_blank&quot;>docs.ansible.com</a>') + '</p>',
-                    dataTitle: i18n._('Host Variables'),
-                    dataPlacement: 'right',
-                    dataContainer: 'body'
                 }
             },
 

awx/ui/client/src/inventories-hosts/inventories/related/hosts/edit/host-edit.controller.js

@@ -39,43 +39,8 @@
  			$scope.name = host.name;
             $rootScope.breadcrumb.host_name = host.name;
  			$scope.description = host.description;
-			$scope.host_variables = getVars(host.variables);
+			$scope.host_variables = host.variables;
-        	// ParseTypeChange({
-        	// 	scope: $scope,
-        	// 	field_id: 'host_host_variables',
-        	// 	variable: 'host_variables',
-        	// });
  		};
 
-		// Adding this function b/c sometimes extra vars are returned to the
-		// UI as a string (ex: "foo: bar"), and other times as a
-		// json-object-string (ex: "{"foo": "bar"}"). CodeMirror wouldn't know
-		// how to prettify the latter. The latter occurs when host vars were
-		// system generated and not user-input (such as adding a cloud host);
-		function getVars(str){
-
-			// Quick function to test if the host vars are a json-object-string,
-			// by testing if they can be converted to a JSON object w/o error.
-			function IsJsonString(str) {
-				try {
-					JSON.parse(str);
-				} catch (e) {
-					return false;
-				}
-				return true;
-			}
-
-			if(str === ''){
-				return '---';
-			}
-			else if(IsJsonString(str)){
-				str = JSON.parse(str);
-				return jsyaml.safeDump(str);
-			}
-			else if(!IsJsonString(str)){
-				return str;
-			}
-		}
-
  		init();
  	}];

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js

@@ -67,8 +67,6 @@ function(i18n) {
                 host_variables: {
                     label: i18n._('Variables'),
                     type: 'code_mirror',
-                    root: 'host_variables',
-                    rows: 6,
                     class: 'Form-formGroup--fullWidth',
                     "default": "---",
                     variables: 'host_variables',
@@ -88,16 +86,6 @@ function(i18n) {
                       '<a href=&quot;http://www.json.org&quot; target=&quot;_blank&quot;>www.json.org</a>'
                     )}</p>
                     <p>${i18n.sprintf(i18n._('View YAML examples at %s'), '<a href=&quot;http://docs.ansible.com/YAMLSyntax.html&quot; target=&quot;_blank&quot;>docs.ansible.com</a>')}</p>`,
-                    // _awPopOver: "<p>" + i18n._("Enter inventory variables 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>' + i18n.sprintf(i18n._('View JSON examples at %s'), '<a href="http://www.json.org" target="_blank">www.json.org</a>') + '</p>' +
-                    //     '<p>' + i18n.sprintf(i18n._('View YAML examples at %s'), '<a href="http://docs.ansible.com/YAMLSyntax.html" target="_blank">docs.ansible.com</a>') + '</p>',
-                    dataTitle: i18n._('Host Variables'),
-                    dataPlacement: 'right',
-                    dataContainer: 'body',
                     ngDisabled: '!(host.summary_fields.user_capabilities.edit || canAdd) || isSmartInvHost'
                 }
             },

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js

@@ -40,13 +40,6 @@ function InventoriesEdit($scope, $location,
         $scope.instance_groups = InstanceGroupsData;
         $scope.canRemediate = CanRemediate;
 
-        // ParseTypeChange({
-        //     scope: $scope,
-        //     variable: 'inventory_variables',
-        //     parse_variable: 'parseType',
-        //     field_id: 'inventory_inventory_variables'
-        // });
-
         OrgAdminLookup.checkForRoleLevelAdminAccess(inventoryData.organization, 'inventory_admin_role')
             .then(function(canEditOrg){
                 $scope.canEditOrg = canEditOrg;

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js

@@ -67,18 +67,12 @@ function(i18n) {
                 control: '<instance-groups-multiselect instance-groups="instance_groups" field-is-disabled="!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)"></instance-groups-multiselect>',
             },
             variables: {
-                root: 'variables',
                 label: i18n._('Variables'),
                 type: 'code_mirror',
                 class: 'Form-formGroup--fullWidth',
-                // rows: 6,
-                // "default": "---",
                 variables: 'variables',
                 awPopOver: i18n._('Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two. Refer to the Ansible Tower documentation for example syntax.'),
-                // dataTitle: i18n._('Variables'),
+                ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
-                // dataPlacement: 'right',
-                // dataContainer: 'body',
-                // ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
             }
         },