From 43ef4183dfad61146ce9ca72c5011a7ae9ffbd11 Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Fri, 15 Mar 2019 11:42:46 -0400
Subject: [PATCH 01/14] trying to make codemirror editable

---
 .../code-mirror/code-mirror.directive.js      | 19 ++++++++++++-----
 .../code-mirror/code-mirror.partial.html      |  6 +++---
 .../modal/code-mirror-modal.directive.js      | 21 ++++++++++++-------
 .../modal/code-mirror-modal.partial.html      |  7 +++++--
 .../edit/inventory-edit.controller.js         | 12 +++++------
 .../standard-inventory/inventory.form.js      | 16 +++++++++++++-
 awx/ui/client/src/shared/form-generator.js    | 13 +++++++++++-
 .../shared/parse/parse-type-change.factory.js |  2 +-
 8 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 2783f0eaa6..0315485ee4 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -11,21 +11,30 @@ function atCodeMirrorController (
     ParseVariableString
 ) {
     const vm = this;
-    const variables = `${$scope.name}_variables`;
+    const variablesName = `${$scope.name}_variables`;
     function init (vars, name) {
+        console.log('init', $scope, vars);
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
-        $scope[variables] = ParseVariableString(_.cloneDeep(vars));
+        $scope.variablesName = variablesName;
+        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
+        $scope.variables = {
+            value: ParseVariableString(_.cloneDeep(vars)),
+        };
+        $scope.value = $scope.variables.value;
         $scope.parseType = ParseType;
         const options = {
             scope: $scope,
-            variable: variables,
+            variable: 'value', // variablesName,
             parse_variable: ParseVariable,
             field_id: name,
-            readOnly: $scope.disabled
+            readOnly: $scope.disabled,
+            onChange: (value) => {
+                console.log('change', value);
+            },
         };
         ParseTypeChange(options);
     }
@@ -41,7 +50,7 @@ function atCodeMirrorController (
         vm.expanded = false;
     }
 
-    vm.variables = variables;
+    // vm.variablesName = variablesName;
     vm.name = $scope.name;
     vm.modalName = `${vm.name}_modal`;
     vm.strings = strings;
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index 7d149af226..97572159f5 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
@@ -44,15 +44,15 @@
     <textarea
         ng-disabled="disabled"
         rows="6"
-        ng-model="variables"
-        name="variables"
+        ng-model="variables.value"
+        name="variablesName"
         class="form-control Form-textArea"
         id="{{ vm.name }}">
     </textarea>
     <at-code-mirror-modal
         name="{{ vm.modalName }}"
         ng-if="vm.expanded"
-        variables="{{ variables }}"
+        variables="variables"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
         label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
         disabled="{{ disabled || false }}"
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index 4d51a7b8c4..de6029f6c9 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
@@ -11,10 +11,10 @@ function atCodeMirrorModalController (
     $scope,
     strings,
     ParseTypeChange,
-    ParseVariableString
+    // ParseVariableString
 ) {
     const vm = this;
-    const variables = `${$scope.name}_variables`;
+    const variablesName = `${$scope.name}_variables`;
     function resize () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
@@ -28,7 +28,7 @@ function atCodeMirrorModalController (
     }
 
     function toggle () {
-        $scope.parseTypeChange('parseType', variables);
+        $scope.parseTypeChange('parseType', variablesName);
         setTimeout(resize, 0);
     }
 
@@ -39,11 +39,12 @@ function atCodeMirrorModalController (
             $scope.disabled = false;
         }
         $(CodeMirrorModalID).modal('show');
-        $scope[variables] = ParseVariableString(_.cloneDeep(vars));
+        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
         $scope.parseType = ParseType;
+        $scope.value = $scope.variables.value;
         const options = {
             scope: $scope,
-            variable: variables,
+            variable: 'value', // variablesName,
             parse_variable: ParseVariable,
             field_id: name,
             readOnly: $scope.disabled
@@ -58,15 +59,19 @@ function atCodeMirrorModalController (
         $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize);
     }
 
-    vm.variables = variables;
+    vm.variablesName = variablesName;
     vm.name = $scope.name;
     vm.strings = strings;
     vm.toggle = toggle;
+    $scope.close = () => {
+        $scope.variables.value = $scope.value;
+        $scope.closeFn();
+    };
     if ($scope.init) {
         $scope.init = init;
     }
     angular.element(document).ready(() => {
-        init($scope.variables, $scope.name);
+        init($scope.variablesName, $scope.name);
     });
 }
 
@@ -90,7 +95,7 @@ function atCodeMirrorModal () {
             label: '@',
             labelClass: '@',
             tooltip: '@',
-            variables: '@',
+            variables: '=',
             name: '@',
             closeFn: '&'
         }
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
index 9785f439f8..57ca4a07be 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
@@ -46,13 +46,16 @@
                         <div class="at-RowItem-tag at-RowItem-tag--header atCodeMirror-badge" ng-show="disabled === 'true' || disabled === true">
                             {{ vm.strings.get('label.READONLY')}}
                         </div>
-                        <button type="button" class="close" ng-click="closeFn()">
+                        <button type="button" class="close" ng-click="close()">
                             <i class="fa fa-times-circle"></i>
                         </button>
                     </div>
                 </div>
             </div>
             <div class="modal-body">
+                {{extra_variables}}
+                :
+                {{variables.value}}
                 <textarea
                     ng-disabled="disabled"
                     ng-model="extra_variables"
@@ -63,7 +66,7 @@
             </div>
             <div class="modal-footer">
                 <div class="CodeMirror-modalControls">
-                    <button ng-click="closeFn()" class="btn btn-sm btn-default">Close</button>
+                    <button ng-click="close()" class="btn btn-sm btn-default">Close</button>
                 </div>
             </div>
         </div>
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js
index 8f96ae9f6f..6a913598d8 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js
@@ -40,12 +40,12 @@ 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'
-        });
+        // ParseTypeChange({
+        //     scope: $scope,
+        //     variable: 'inventory_variables',
+        //     parse_variable: 'parseType',
+        //     field_id: 'inventory_inventory_variables'
+        // });
 
         OrgAdminLookup.checkForRoleLevelAdminAccess(inventoryData.organization, 'inventory_admin_role')
             .then(function(canEditOrg){
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
index 7e8083bf48..87011f936c 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
@@ -66,13 +66,27 @@ 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',
                 label: i18n._('Variables'),
-                type: 'textarea',
+                type: 'code_mirror',
                 class: 'Form-formGroup--fullWidth',
                 rows: 6,
                 "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'),
                 dataPlacement: 'right',
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index c1b4d7f35f..108c7c3930 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1364,6 +1364,17 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += "</div>\n";
                     }
 
+                    if (field.type === 'code_mirror') {
+                        html += '<at-code-mirror ';
+                        html += `id="${form.name}_${fld}" `;
+                        html += `class="${field.class}" `;
+                        html += `label="${field.label}" `;
+                        html += `tooltip="${field.awPopOver}" `;
+                        html += `name="${field.realName}" `;
+                        html += `variables="{{ ${field.variables} }}" `;
+                        html += '></at-code-mirror>';
+                    }
+
                     if (field.type === 'custom') {
                         let labelOptions = {};
 
@@ -1475,7 +1486,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                             } else {
                                 relatedTabSelected = this.form.activeEditState ? `$state.includes('${this.form.activeEditState}.${itm}') || $state.includes('${this.form.stateTree}.edit.${itm}')` : `$state.includes('${this.form.stateTree}.edit.${itm}')`;
                             }
-                             
+
                             html += `ng-class="{'is-selected' : ${relatedTabSelected}` ;
                             if(this.form.related[itm].disabled){
                                 html += `, 'Form-tab--disabled' : ${this.form.related[itm].disabled }`;
diff --git a/awx/ui/client/src/shared/parse/parse-type-change.factory.js b/awx/ui/client/src/shared/parse/parse-type-change.factory.js
index d54af36dcf..218dfbbe9a 100644
--- a/awx/ui/client/src/shared/parse/parse-type-change.factory.js
+++ b/awx/ui/client/src/shared/parse/parse-type-change.factory.js
@@ -94,7 +94,7 @@ export default
                     // convert json to yaml
                     try {
                         removeField(fld);
-                        
+
                         json_obj = JSON.parse(scope[fld]);
                         if ($.isEmptyObject(json_obj)) {
                             scope[fld] = '---';

From bed63b36903c299492f4cc91fef8447a52907788 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Fri, 15 Mar 2019 16:14:55 -0400
Subject: [PATCH 02/14] Work on getting extra vars popout working on inv form

---
 .../code-mirror/code-mirror.directive.js      | 52 +++++++++----------
 .../code-mirror/code-mirror.partial.html      | 16 +++---
 .../modal/code-mirror-modal.directive.js      | 32 +++++-------
 .../modal/code-mirror-modal.partial.html      |  7 +--
 .../standard-inventory/inventory.form.js      |  1 +
 awx/ui/client/src/shared/form-generator.js    |  4 +-
 6 files changed, 51 insertions(+), 61 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 0315485ee4..555b9579a4 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -1,58 +1,57 @@
 const templateUrl = require('~components/code-mirror/code-mirror.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-const ParseVariable = 'parseType';
 const ParseType = 'yaml';
 
 function atCodeMirrorController (
     $scope,
     strings,
-    ParseTypeChange,
-    ParseVariableString
+    ParseTypeChange
 ) {
     const vm = this;
-    const variablesName = `${$scope.name}_variables`;
-    function init (vars, name) {
-        console.log('init', $scope, vars);
+    function init () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
-        $scope.variablesName = variablesName;
-        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
-        $scope.variables = {
-            value: ParseVariableString(_.cloneDeep(vars)),
-        };
         $scope.value = $scope.variables.value;
         $scope.parseType = ParseType;
-        const options = {
+
+        ParseTypeChange({
             scope: $scope,
-            variable: 'value', // variablesName,
-            parse_variable: ParseVariable,
-            field_id: name,
-            readOnly: $scope.disabled,
-            onChange: (value) => {
-                console.log('change', value);
-            },
-        };
-        ParseTypeChange(options);
+            variable: 'variables',
+            parse_variable: 'parseType',
+            field_id: `${$scope.name}_variables`,
+            readOnly: $scope.disabled
+        });
     }
 
     function expand () {
         vm.expanded = true;
     }
 
-    function close () {
+    function close (varsFromModal) {
+        // TODO: make sure that the variables format matches
+        // parseType before re-initializing CodeMirror.  Ex)
+        // user changes the format from yaml to json in the
+        // modal but CM in the form is set to YAML
+        $scope.variables = varsFromModal;
+        // New set of variables from the modal, reinit codemirror
+        ParseTypeChange({
+            scope: $scope,
+            variable: 'variables',
+            parse_variable: 'parseType',
+            field_id: `${$scope.name}_variables`,
+            readOnly: $scope.disabled
+        });
         $(CodeMirrorModalID).off('hidden.bs.modal');
         $(CodeMirrorModalID).modal('hide');
         $('.popover').popover('hide');
         vm.expanded = false;
     }
 
-    // vm.variablesName = variablesName;
     vm.name = $scope.name;
-    vm.modalName = `${vm.name}_modal`;
     vm.strings = strings;
     vm.expanded = false;
     vm.close = close;
@@ -68,8 +67,7 @@ function atCodeMirrorController (
 atCodeMirrorController.$inject = [
     '$scope',
     'CodeMirrorStrings',
-    'ParseTypeChange',
-    'ParseVariableString'
+    'ParseTypeChange'
 ];
 
 function atCodeMirrorTextarea () {
@@ -86,7 +84,7 @@ function atCodeMirrorTextarea () {
             labelClass: '@',
             tooltip: '@',
             tooltipPlacement: '@',
-            variables: '@',
+            variables: '=',
             name: '@',
             init: '='
         }
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index 97572159f5..da1f492139 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/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', vm.variables)"
+                            ng-change="parseTypeChange('parseType', 'variables')"
                             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', vm.variables)"
+                            ng-change="parseTypeChange('parseType', 'variables')"
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.JSON')}}
                     </label>
@@ -44,18 +44,18 @@
     <textarea
         ng-disabled="disabled"
         rows="6"
-        ng-model="variables.value"
-        name="variablesName"
+        ng-model="variables"
+        name="{{ vm.name }}_variables"
         class="form-control Form-textArea"
-        id="{{ vm.name }}">
+        id="{{ vm.name }}_variables">
     </textarea>
     <at-code-mirror-modal
-        name="{{ vm.modalName }}"
+        name="{{ vm.name }}"
         ng-if="vm.expanded"
-        variables="variables"
+        modal-vars="variables"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
         label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
         disabled="{{ disabled || false }}"
-        close-fn="vm.close()">
+        close-fn="vm.close">
     </at-code-mirror-modal>
 </div>
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index de6029f6c9..4eb77d6e0a 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
@@ -1,7 +1,7 @@
 const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-const ParseVariable = 'parseType';
+// const ParseVariable = 'parseType';
 const ParseType = 'yaml';
 const ModalHeight = '#CodeMirror-modal .modal-dialog';
 const ModalHeader = '.atCodeMirror-label';
@@ -10,8 +10,7 @@ const ModalFooter = '.CodeMirror-modalControls';
 function atCodeMirrorModalController (
     $scope,
     strings,
-    ParseTypeChange,
-    // ParseVariableString
+    ParseTypeChange
 ) {
     const vm = this;
     const variablesName = `${$scope.name}_variables`;
@@ -28,28 +27,25 @@ function atCodeMirrorModalController (
     }
 
     function toggle () {
-        $scope.parseTypeChange('parseType', variablesName);
+        $scope.parseTypeChange('parseType', 'modalVars');
         setTimeout(resize, 0);
     }
 
-    function init (vars, name) {
+    function init () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
         $(CodeMirrorModalID).modal('show');
-        // $scope[variablesName] = ParseVariableString(_.cloneDeep(vars));
         $scope.parseType = ParseType;
-        $scope.value = $scope.variables.value;
-        const options = {
+        ParseTypeChange({
             scope: $scope,
-            variable: 'value', // variablesName,
-            parse_variable: ParseVariable,
-            field_id: name,
+            variable: 'modalVars',
+            parse_variable: 'parseType',
+            field_id: 'variables_modal',
             readOnly: $scope.disabled
-        };
-        ParseTypeChange(options);
+        });
         resize();
         $(CodeMirrorModalID).on('hidden.bs.modal', $scope.closeFn);
         $(`${CodeMirrorModalID} .modal-dialog`).resizable({
@@ -57,15 +53,14 @@ function atCodeMirrorModalController (
             minWidth: 600
         });
         $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize);
+
+        $scope.foovars = 'testing';
     }
 
-    vm.variablesName = variablesName;
-    vm.name = $scope.name;
     vm.strings = strings;
     vm.toggle = toggle;
     $scope.close = () => {
-        $scope.variables.value = $scope.value;
-        $scope.closeFn();
+        $scope.closeFn()($scope.modalVars);
     };
     if ($scope.init) {
         $scope.init = init;
@@ -79,7 +74,6 @@ atCodeMirrorModalController.$inject = [
     '$scope',
     'CodeMirrorStrings',
     'ParseTypeChange',
-    'ParseVariableString',
 ];
 
 function atCodeMirrorModal () {
@@ -95,7 +89,7 @@ function atCodeMirrorModal () {
             label: '@',
             labelClass: '@',
             tooltip: '@',
-            variables: '=',
+            modalVars: '=',
             name: '@',
             closeFn: '&'
         }
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
index 57ca4a07be..662565f3f3 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
@@ -53,15 +53,12 @@
                 </div>
             </div>
             <div class="modal-body">
-                {{extra_variables}}
-                :
-                {{variables.value}}
                 <textarea
                     ng-disabled="disabled"
-                    ng-model="extra_variables"
+                    ng-model="modalVars"
                     name="extra_variables"
                     class="form-control Form-textArea"
-                    id="{{ vm.name }}">
+                    id="variables_modal">
                 </textarea>
             </div>
             <div class="modal-footer">
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
index 87011f936c..b49e6e70d6 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
@@ -81,6 +81,7 @@ function(i18n) {
             // },
             inventory_variables: {
                 realName: 'variables',
+                root: 'inventory',
                 label: i18n._('Variables'),
                 type: 'code_mirror',
                 class: 'Form-formGroup--fullWidth',
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 108c7c3930..1e8440d0ad 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1370,8 +1370,8 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += `class="${field.class}" `;
                         html += `label="${field.label}" `;
                         html += `tooltip="${field.awPopOver}" `;
-                        html += `name="${field.realName}" `;
-                        html += `variables="{{ ${field.variables} }}" `;
+                        html += `name="${field.root}" `;
+                        html += `variables="${field.variables}" `;
                         html += '></at-code-mirror>';
                     }
 

From 5d3e39beac49d1eb742e8f88d0404085cef96ed7 Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Mon, 18 Mar 2019 11:48:21 -0400
Subject: [PATCH 03/14] add use code-mirror directive for host variables; fix
 multiple code-mirrors on page at once

---
 .../features/output/details.partial.html      |  4 +--
 .../code-mirror/code-mirror.directive.js      |  9 +++--
 .../code-mirror/code-mirror.partial.html      |  4 +--
 .../modal/code-mirror-modal.directive.js      |  4 +--
 .../src/inventories-hosts/hosts/host.form.js  |  7 ++--
 .../hosts/edit/host-edit.controller.js        | 10 +++---
 .../related/hosts/related-host.form.js        | 34 ++++++++++++++-----
 .../standard-inventory/inventory.form.js      | 27 ++++-----------
 awx/ui/client/src/shared/form-generator.js    |  2 +-
 9 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index b2faddea97..5ad6dde62e 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/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 }}"
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 555b9579a4..1a18d57b0d 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/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;
     }
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index da1f492139..c4565549c0 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/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>
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index 4eb77d6e0a..02d7d25753 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/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;
diff --git a/awx/ui/client/src/inventories-hosts/hosts/host.form.js b/awx/ui/client/src/inventories-hosts/hosts/host.form.js
index f66f48b4df..43c065fa25 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/host.form.js
+++ b/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" +
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/edit/host-edit.controller.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/edit/host-edit.controller.js
index 52661b4129..c98223bb55 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/edit/host-edit.controller.js
+++ b/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({
-        		scope: $scope,
-        		field_id: 'host_host_variables',
-        		variable: '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
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js
index f368af8329..2097509e40 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js
+++ b/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>" +
-                        "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>',
+                    variables: 'host_variables',
+                    awPopOver: `<p>${i18n._("Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two.")}</p>
+                    JSON:<br />
+                    <blockquote>
+                      {<br />&emsp;&quot;somevar&quot;: &quot;somevalue&quot;,<br />&emsp;&quot;password&quot;: &quot;magic&quot;<br /> }
+                    </blockquote>
+                    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',
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
index b49e6e70d6..48b1d66ddd 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/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,
-                "default": "---",
+                // rows: 6,
+                // "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'),
-                dataPlacement: 'right',
-                dataContainer: 'body',
-                ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
+                // dataTitle: i18n._('Variables'),
+                // dataPlacement: 'right',
+                // dataContainer: 'body',
+                // ngDisabled: '!(inventory_obj.summary_fields.user_capabilities.edit || canAdd)' // TODO: get working
             }
         },
 
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 1e8440d0ad..4a2a2f163c 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/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>';
                     }

From 33b19ebe1fed90d65dbe098b22215c5def56a1c4 Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Mon, 18 Mar 2019 13:53:52 -0400
Subject: [PATCH 04/14] code-mirror: keep yaml/json setting in sync with modal

---
 .../lib/components/code-mirror/code-mirror.directive.js     | 5 ++++-
 .../lib/components/code-mirror/code-mirror.partial.html     | 3 ++-
 .../code-mirror/modal/code-mirror-modal.directive.js        | 6 +++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 1a18d57b0d..622aa1cb13 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -18,6 +18,7 @@ function atCodeMirrorController (
         }
         $scope.parseType = ParseType;
 
+        $scope.variablesName = variablesName;
         $scope[variablesName] = $scope.variables;
         ParseTypeChange({
             scope: $scope,
@@ -32,13 +33,14 @@ function atCodeMirrorController (
         vm.expanded = true;
     }
 
-    function close (varsFromModal) {
+    function close (varsFromModal, parseTypeFromModal) {
         // TODO: make sure that the variables format matches
         // parseType before re-initializing CodeMirror.  Ex)
         // 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;
+        $scope.parseType = parseTypeFromModal;
         // New set of variables from the modal, reinit codemirror
         ParseTypeChange({
             scope: $scope,
@@ -59,6 +61,7 @@ function atCodeMirrorController (
     vm.close = close;
     vm.expand = expand;
     vm.variablesName = variablesName;
+    vm.parseType = $scope.parseType;
     if ($scope.init) {
         $scope.init = init;
     }
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index c4565549c0..a832ca8b6e 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
@@ -53,9 +53,10 @@
         name="{{ vm.name }}"
         ng-if="vm.expanded"
         modal-vars="variables"
+        parse-type="parseType"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
         label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
         disabled="{{ disabled || false }}"
-        close-fn="vm.close">
+        close-fn="vm.close(values, parseType)">
     </at-code-mirror-modal>
 </div>
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index 02d7d25753..e8a8476985 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
@@ -58,7 +58,10 @@ function atCodeMirrorModalController (
     vm.strings = strings;
     vm.toggle = toggle;
     $scope.close = () => {
-        $scope.closeFn()($scope.modalVars);
+        $scope.closeFn({
+            values: $scope.modalVars,
+            parseType: $scope.parseType,
+        });
     };
     if ($scope.init) {
         $scope.init = init;
@@ -88,6 +91,7 @@ function atCodeMirrorModal () {
             labelClass: '@',
             tooltip: '@',
             modalVars: '=',
+            parseType: '=',
             name: '@',
             closeFn: '&'
         }

From ac5dec272b95e041ab3c937dde2e5173148b099e Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Mon, 18 Mar 2019 16:00:45 -0400
Subject: [PATCH 05/14] code-mirror: keep yaml/json in sync when opening modal

---
 .../components/code-mirror/code-mirror.directive.js  |  4 ++++
 .../components/code-mirror/code-mirror.partial.html  |  2 +-
 .../code-mirror/modal/code-mirror-modal.directive.js | 12 ++++--------
 .../code-mirror/modal/code-mirror-modal.partial.html |  8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 622aa1cb13..6bba1f34f3 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -27,6 +27,10 @@ function atCodeMirrorController (
             field_id: `${$scope.name}_variables`,
             readOnly: $scope.disabled
         });
+
+        $scope.$watch(variablesName, () => {
+            $scope.variables = $scope[variablesName];
+        });
     }
 
     function expand () {
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index a832ca8b6e..6b45b94cc9 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
@@ -53,7 +53,7 @@
         name="{{ vm.name }}"
         ng-if="vm.expanded"
         modal-vars="variables"
-        parse-type="parseType"
+        modal-parse-type="parseType"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
         label="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
         disabled="{{ disabled || false }}"
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index e8a8476985..916ed5b9d3 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
@@ -1,8 +1,6 @@
 const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-// const ParseVariable = 'parseType';
-const ParseType = 'yaml';
 const ModalHeight = '#CodeMirror-modal .modal-dialog';
 const ModalHeader = '.atCodeMirror-label';
 const ModalFooter = '.CodeMirror-modalControls';
@@ -13,7 +11,6 @@ function atCodeMirrorModalController (
     ParseTypeChange
 ) {
     const vm = this;
-    // const variablesName = `${$scope.name}_variables`;
     function resize () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
@@ -27,7 +24,7 @@ function atCodeMirrorModalController (
     }
 
     function toggle () {
-        $scope.parseTypeChange('parseType', 'modalVars');
+        $scope.parseTypeChange('modalParseType', 'modalVars');
         setTimeout(resize, 0);
     }
 
@@ -38,11 +35,10 @@ function atCodeMirrorModalController (
             $scope.disabled = false;
         }
         $(CodeMirrorModalID).modal('show');
-        $scope.parseType = ParseType;
         ParseTypeChange({
             scope: $scope,
             variable: 'modalVars',
-            parse_variable: 'parseType',
+            parse_variable: 'modalParseType',
             field_id: 'variables_modal',
             readOnly: $scope.disabled
         });
@@ -60,7 +56,7 @@ function atCodeMirrorModalController (
     $scope.close = () => {
         $scope.closeFn({
             values: $scope.modalVars,
-            parseType: $scope.parseType,
+            parseType: $scope.modalParseType,
         });
     };
     if ($scope.init) {
@@ -91,7 +87,7 @@ function atCodeMirrorModal () {
             labelClass: '@',
             tooltip: '@',
             modalVars: '=',
-            parseType: '=',
+            modalParseType: '=',
             name: '@',
             closeFn: '&'
         }
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
index 662565f3f3..96d31dbd7d 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
@@ -21,20 +21,20 @@
                          </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': modalParseType === 'yaml','Button-primary--hollow' : modalParseType === 'json'}" class="btn btn-xs">
                                     <input
                                         type="radio"
                                         value="yaml"
-                                        ng-model="parseType"
+                                        ng-model="modalParseType"
                                         ng-change="vm.toggle()"
                                         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': modalParseType === 'json','Button-primary--hollow' : modalParseType === 'yaml'}" class="btn btn-xs">
                                     <input
                                         type="radio"
                                         value="json"
-                                        ng-model="parseType"
+                                        ng-model="modalParseType"
                                         ng-change="vm.toggle()"
                                         class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                             {{ vm.strings.get('label.JSON')}}

From b28409c1c70c853b91d0f7ebeab619a1f9cb2ea8 Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Mon, 18 Mar 2019 16:17:19 -0400
Subject: [PATCH 06/14] fix saving inventory variables

---
 .../inventories/standard-inventory/inventory.form.js       | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
index 48b1d66ddd..12dec6fab6 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
@@ -66,15 +66,14 @@ 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',
-                root: 'inventory',
+            variables: {
+                root: 'variables',
                 label: i18n._('Variables'),
                 type: 'code_mirror',
                 class: 'Form-formGroup--fullWidth',
                 // rows: 6,
                 // "default": "---",
-                variables: 'inventory_variables',
+                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'),
                 // dataPlacement: 'right',

From 2ee6713050a33305e563fea96407701939304a8c Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Tue, 19 Mar 2019 11:31:04 -0400
Subject: [PATCH 07/14] centralize variable parsing logic in code mirror
 directive

---
 .../code-mirror/code-mirror.directive.js      | 33 +++++++++++++++--
 .../code-mirror/code-mirror.partial.html      |  4 +-
 .../hosts/edit/host-edit.controller.js        | 37 +------------------
 .../src/inventories-hosts/hosts/host.form.js  | 14 ++-----
 .../hosts/edit/host-edit.controller.js        | 37 +------------------
 .../related/hosts/related-host.form.js        | 12 ------
 .../edit/inventory-edit.controller.js         |  7 ----
 .../standard-inventory/inventory.form.js      |  8 +---
 8 files changed, 39 insertions(+), 113 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 6bba1f34f3..1611a736e5 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/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();
     });
 }
 
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index 6b45b94cc9..018d868b64 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/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"
diff --git a/awx/ui/client/src/inventories-hosts/hosts/edit/host-edit.controller.js b/awx/ui/client/src/inventories-hosts/hosts/edit/host-edit.controller.js
index 3cd6a00c28..219cee0b07 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/edit/host-edit.controller.js
+++ b/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);
-        	ParseTypeChange({
-        		scope: $scope,
-        		field_id: 'host_variables',
-        		variable: 'variables',
-        	});
+			$scope.variables = host.data.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();
  	}];
diff --git a/awx/ui/client/src/inventories-hosts/hosts/host.form.js b/awx/ui/client/src/inventories-hosts/hosts/host.form.js
index 43c065fa25..64a1c88db9 100644
--- a/awx/ui/client/src/inventories-hosts/hosts/host.form.js
+++ b/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 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'
+                        '<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>',
                 }
             },
 
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/edit/host-edit.controller.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/edit/host-edit.controller.js
index c98223bb55..81755c1b17 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/edit/host-edit.controller.js
+++ b/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);
-        	// ParseTypeChange({
-        	// 	scope: $scope,
-        	// 	field_id: 'host_host_variables',
-        	// 	variable: 'host_variables',
-        	// });
+			$scope.host_variables = 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();
  	}];
diff --git a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js
index 2097509e40..2d8616e87f 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.form.js
+++ b/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'
                 }
             },
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js
index 6a913598d8..ce2d8e7ea7 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js
+++ b/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;
diff --git a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
index 12dec6fab6..3cf7629f1d 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/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'),
-                // dataPlacement: 'right',
-                // 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
             }
         },
 

From 5583af2a58b0853b29c78ea71797883cff0db5bf Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Tue, 19 Mar 2019 11:52:31 -0400
Subject: [PATCH 08/14] form generator: add ng-disabled support to code mirror
 fields

---
 awx/ui/client/src/shared/form-generator.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 4a2a2f163c..75ad98de1d 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1372,6 +1372,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += `tooltip="${field.awPopOver}" `;
                         html += `name="${fld}" `;
                         html += `variables="${field.variables}" `;
+                        html += `ng-disabled="${field.ngDisabled}" `
                         html += '></at-code-mirror>';
                     }
 

From b6d8f9c6f60c817351b5295cd1e409c175c1f04b Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Tue, 19 Mar 2019 15:07:10 -0400
Subject: [PATCH 09/14] use code-mirror directive for host facts

---
 .../code-mirror/code-mirror.directive.js          |  8 ++++++++
 .../ansible-facts/ansible-facts.controller.js     | 14 +++-----------
 .../ansible-facts/ansible-facts.partial.html      | 15 +++++++++------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 1611a736e5..07533030da 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -77,6 +77,14 @@ function atCodeMirrorController (
             return true;
         }
 
+        if (typeof str !== 'string') {
+            const yamlStr = jsyaml.safeDump(str);
+            // jsyaml.safeDump doesn't process an empty object correctly
+            if (yamlStr === '{}\n') {
+                return '---';
+            }
+            return yamlStr;
+        }
         if (str === '' || str === '{}') {
             return '---';
         } else if (IsJsonString(str)) {
diff --git a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js
index 2f99c6a075..a4ab5f1024 100644
--- a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js
+++ b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.controller.js
@@ -4,25 +4,17 @@
  * All Rights Reserved
  *************************************************/
 
-function AnsibleFacts($scope, Facts, ParseTypeChange, ParseVariableString) {
+function AnsibleFacts($scope, Facts) {
 
     function init() {
-        $scope.facts = ParseVariableString(Facts);
+        $scope.facts = Facts;
         let rows = (_.isEmpty(Facts)) ? 6 : 20;
         $("#host_facts").attr("rows", rows);
         $scope.parseType = 'yaml';
-        ParseTypeChange({
-             scope: $scope,
-             variable: 'facts',
-             parse_variable: 'parseType',
-             field_id: 'host_facts',
-             readOnly: true
-         });
     }
 
     init();
 
 }
 
-export default ['$scope', 'Facts', 'ParseTypeChange', 'ParseVariableString', AnsibleFacts
-];
+export default ['$scope', 'Facts', AnsibleFacts];
diff --git a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
index 5cb0ac2162..23f0891f0f 100644
--- a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
@@ -1,10 +1,13 @@
 <form class="Form ng-pristine ng-valid ng-valid-required" name="host_form" id="host_form" autocomplete="off" novalidate="">
     <div class="form-group Form-formGroup Form-formGroup--fullWidth">
-        <label class="Form-inputLabelContainer " for="facts">
-		          <span class="Form-inputLabel" translate>FACTS</span>
-         </label>
-         <div>
-             <textarea rows="6"  ng-model="facts" name="facts" class="form-control Form-textArea Form-formGroup--fullWidth" id="host_facts"></textarea>
-         </div>
+        <at-code-mirror
+          id="host_facts"
+          name="facts"
+          class="Form-textArea Form-formGroup--fullWidth"
+          label="facts"
+          variables="facts"
+          tooltip=""
+          disabled="true"
+        ></at-code-mirror>
      </div>
 </form>

From ac890b8cda5f5db942aad2b0b37d96f7e536c4e6 Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Tue, 19 Mar 2019 15:22:02 -0400
Subject: [PATCH 10/14] don't show code-mirror tooltip icon if no tooltip
 provided

---
 .../client/lib/components/code-mirror/code-mirror.partial.html | 3 ++-
 .../shared/ansible-facts/ansible-facts.partial.html            | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index 018d868b64..4253f29a21 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
@@ -13,7 +13,8 @@
                 class="help-link"
                 data-original-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
                 title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
-                tabindex="-1">
+                tabindex="-1"
+                ng-if="tooltip">
                  <i class="fa fa-question-circle"></i>
              </a>
              <div class="atCodeMirror-toggleContainer FormToggle-container">
diff --git a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
index 23f0891f0f..7976a5cb5d 100644
--- a/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
+++ b/awx/ui/client/src/inventories-hosts/shared/ansible-facts/ansible-facts.partial.html
@@ -6,7 +6,6 @@
           class="Form-textArea Form-formGroup--fullWidth"
           label="facts"
           variables="facts"
-          tooltip=""
           disabled="true"
         ></at-code-mirror>
      </div>

From 2657779eda713fced4b50eeab710ea4e83ca686d Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Wed, 20 Mar 2019 08:56:42 -0400
Subject: [PATCH 11/14] cleanup comments

---
 .../components/code-mirror/code-mirror.directive.js  | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 07533030da..9d8a0fcfca 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -39,10 +39,6 @@ function atCodeMirrorController (
     }
 
     function close (varsFromModal, parseTypeFromModal) {
-        // TODO: make sure that the variables format matches
-        // parseType before re-initializing CodeMirror.  Ex)
-        // 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;
         $scope.parseType = parseTypeFromModal;
@@ -61,10 +57,10 @@ function atCodeMirrorController (
     }
 
     // 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);
+    // UI as yaml (ex: "foo: bar"), and other times as a
+    // json-object-string (ex: "{"foo": "bar"}"). The latter typically
+    // 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.

From 86c7fd3b5d46d9f924d8252c6d93dfef81bf9ed8 Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Wed, 20 Mar 2019 11:01:42 -0400
Subject: [PATCH 12/14] codemirror: sync data when closing modal by clicking
 outside

---
 .../modal/code-mirror-modal.directive.js          | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index 916ed5b9d3..a4051084b0 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
@@ -28,6 +28,13 @@ function atCodeMirrorModalController (
         setTimeout(resize, 0);
     }
 
+    $scope.close = () => {
+        $scope.closeFn({
+            values: $scope.modalVars,
+            parseType: $scope.modalParseType,
+        });
+    };
+
     function init () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
@@ -43,7 +50,7 @@ function atCodeMirrorModalController (
             readOnly: $scope.disabled
         });
         resize();
-        $(CodeMirrorModalID).on('hidden.bs.modal', $scope.closeFn);
+        $(CodeMirrorModalID).on('hidden.bs.modal', $scope.close);
         $(`${CodeMirrorModalID} .modal-dialog`).resizable({
             minHeight: 523,
             minWidth: 600
@@ -53,12 +60,6 @@ function atCodeMirrorModalController (
 
     vm.strings = strings;
     vm.toggle = toggle;
-    $scope.close = () => {
-        $scope.closeFn({
-            values: $scope.modalVars,
-            parseType: $scope.modalParseType,
-        });
-    };
     if ($scope.init) {
         $scope.init = init;
     }

From e9cf1475caafe2e3fc8d44b2a6a26a064b8ae98d Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Wed, 20 Mar 2019 11:45:51 -0400
Subject: [PATCH 13/14] de-lint

---
 awx/ui/client/src/shared/form-generator.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 75ad98de1d..5387fca4f5 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1372,7 +1372,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += `tooltip="${field.awPopOver}" `;
                         html += `name="${fld}" `;
                         html += `variables="${field.variables}" `;
-                        html += `ng-disabled="${field.ngDisabled}" `
+                        html += `ng-disabled="${field.ngDisabled}" `;
                         html += '></at-code-mirror>';
                     }
 

From 8e48a3a52318709cd57599c6a030691de7f71c6a Mon Sep 17 00:00:00 2001
From: Keith Grant <kegrant@redhat.com>
Date: Wed, 20 Mar 2019 13:51:10 -0400
Subject: [PATCH 14/14] interpret empty codemirror json content as empty object

---
 awx/ui/client/src/shared/parse/parse-type-change.factory.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/awx/ui/client/src/shared/parse/parse-type-change.factory.js b/awx/ui/client/src/shared/parse/parse-type-change.factory.js
index 218dfbbe9a..2373a06a46 100644
--- a/awx/ui/client/src/shared/parse/parse-type-change.factory.js
+++ b/awx/ui/client/src/shared/parse/parse-type-change.factory.js
@@ -94,8 +94,12 @@ export default
                     // convert json to yaml
                     try {
                         removeField(fld);
+                        let jsonString = scope[fld];
+                        if (jsonString.trim() === '') {
+                          jsonString = '{}';
+                        }
 
-                        json_obj = JSON.parse(scope[fld]);
+                        json_obj = JSON.parse(jsonString);
                         if ($.isEmptyObject(json_obj)) {
                             scope[fld] = '---';
                         }