add use code-mirror directive for host variables; fix multiple code-mirrors on page at once

awx/ui/client/features/output/details.partial.html

@@ -350,7 +350,7 @@
 <at-code-mirror
     class="JobResults-resultRow"
     ng-if="vm.extraVars"
-    variables="{{ vm.extraVars.value }}"
+    variables="vm.extraVars.value"
     tooltip="{{ vm.extraVars.tooltip }}"
     label="{{ vm.extraVars.label }}"
     name="{{ vm.extraVars.name }}"
@@ -361,7 +361,7 @@
 <at-code-mirror
     class="JobResults-resultRow"
     ng-if="vm.artifacts"
-    variables="{{ vm.artifacts.value }}"
+    variables="vm.artifacts.value"
     tooltip="{{ vm.artifacts.tooltip }}"
     label="{{ vm.artifacts.label }}"
     name="{{ vm.artifacts.name }}"

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

@@ -9,18 +9,19 @@ function atCodeMirrorController (
     ParseTypeChange
 ) {
     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.value = $scope.variables.value;
         $scope.parseType = ParseType;
 
+        $scope[variablesName] = $scope.variables;
         ParseTypeChange({
             scope: $scope,
-            variable: 'variables',
+            variable: variablesName,
             parse_variable: 'parseType',
             field_id: `${$scope.name}_variables`,
             readOnly: $scope.disabled
@@ -37,10 +38,11 @@ function atCodeMirrorController (
         // user changes the format from yaml to json in the
         // modal but CM in the form is set to YAML
         $scope.variables = varsFromModal;
+        $scope[variablesName] = $scope.variables;
         // New set of variables from the modal, reinit codemirror
         ParseTypeChange({
             scope: $scope,
-            variable: 'variables',
+            variable: variablesName,
             parse_variable: 'parseType',
             field_id: `${$scope.name}_variables`,
             readOnly: $scope.disabled
@@ -56,6 +58,7 @@ function atCodeMirrorController (
     vm.expanded = false;
     vm.close = close;
     vm.expand = expand;
+    vm.variablesName = variablesName;
     if ($scope.init) {
         $scope.init = init;
     }

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

@@ -23,7 +23,7 @@
                             type="radio"
                             value="yaml"
                             ng-model="parseType"
-                            ng-change="parseTypeChange('parseType', 'variables')"
+                            ng-change="parseTypeChange('parseType', vm.variablesName)"
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.YAML')}}
                     </label>
@@ -32,7 +32,7 @@
                             type="radio"
                             value="json"
                             ng-model="parseType"
-                            ng-change="parseTypeChange('parseType', 'variables')"
+                            ng-change="parseTypeChange('parseType', vm.variablesName)"
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.JSON')}}
                     </label>

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

@@ -13,7 +13,7 @@ function atCodeMirrorModalController (
     ParseTypeChange
 ) {
     const vm = this;
-    const variablesName = `${$scope.name}_variables`;
+    // const variablesName = `${$scope.name}_variables`;
     function resize () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
@@ -53,8 +53,6 @@ function atCodeMirrorModalController (
             minWidth: 600
         });
         $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize);
-
-        $scope.foovars = 'testing';
     }
 
     vm.strings = strings;

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

@@ -65,12 +65,15 @@ function(i18n) {
                     type: 'text'
                 },
                 variables: {
+                    root: 'host_variables',
                     label: i18n._('Variables'),
-                    type: 'textarea',
+                    type: 'code_mirror',
                     rows: 6,
+                    variables: 'variables',
                     class: 'Form-formGroup--fullWidth',
                     "default": "---",
-                    awPopOver: "<p>" + i18n._("Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.") + "</p>" +
+                    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>" +
                         "JSON:<br />\n" +
                         "<blockquote>{<br />&emsp;\"somevar\": \"somevalue\",<br />&emsp;\"password\": \"magic\"<br /> }</blockquote>\n" +
                         "YAML:<br />\n" +

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

@@ -40,11 +40,11 @@
             $rootScope.breadcrumb.host_name = host.name;
  			$scope.description = host.description;
 			$scope.host_variables = getVars(host.variables);
-        	ParseTypeChange({
+        	// ParseTypeChange({
-        		scope: $scope,
+        	// 	scope: $scope,
-        		field_id: 'host_host_variables',
+        	// 	field_id: 'host_host_variables',
-        		variable: 'host_variables',
+        	// 	variable: 'host_variables',
-        	});
+        	// });
  		};
 
 		// Adding this function b/c sometimes extra vars are returned to the

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

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

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

@@ -66,33 +66,20 @@ function(i18n) {
                 dataContainer: 'body',
                 control: '<instance-groups-multiselect instance-groups="instance_groups" field-is-disabled="!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)"></instance-groups-multiselect>',
             },
-            // inventory_variables: {
-            //     realName: 'variables',
-            //     label: i18n._('Variables'),
-            //     type: 'textarea',
-            //     class: 'Form-formGroup--fullWidth',
-            //     rows: 6,
-            //     "default": "---",
-            //     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'),
-            //     dataPlacement: 'right',
-            //     dataContainer: 'body',
-            //     ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
-            // },
             inventory_variables: {
-                realName: 'variables',
+                // realName: 'variables',
                 root: 'inventory',
                 label: i18n._('Variables'),
                 type: 'code_mirror',
                 class: 'Form-formGroup--fullWidth',
-                rows: 6,
+                // rows: 6,
-                "default": "---",
+                // "default": "---",
                 variables: 'inventory_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'),
+                // dataTitle: i18n._('Variables'),
-                dataPlacement: 'right',
+                // dataPlacement: 'right',
-                dataContainer: 'body',
+                // dataContainer: 'body',
-                ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
+                // ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
             }
         },
 

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

@@ -1370,7 +1370,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += `class="${field.class}" `;
                         html += `label="${field.label}" `;
                         html += `tooltip="${field.awPopOver}" `;
-                        html += `name="${field.root}" `;
+                        html += `name="${fld}" `;
                         html += `variables="${field.variables}" `;
                         html += '></at-code-mirror>';
                     }