Merge pull request #1402 from jaredevantabor/vars-component

Adds atCodeMirror directive

awx/ui/client/features/output/_index.less

@@ -352,12 +352,8 @@
     flex-wrap: wrap;
 }
 
-.JobResults-resultRow--variables {
-    flex-direction: column;
-
-    #cm-variables-container {
-        width: 100%;
-    }
+.JobResults-codeMirrorResultRowLabel{
+    font-size: 12px;
 }
 
 .JobResults-resultRowLabel {
@@ -531,4 +527,4 @@ job-results-standard-out {
     cursor: pointer;
     border-radius: 5px;
     font-size: 11px;
-}
+}

awx/ui/client/features/output/details.directive.js

@@ -398,8 +398,9 @@ function getExtraVarsDetails () {
     const label = 'Extra Variables';
     const tooltip = 'Read-only view of extra variables added to the job template.';
     const value = parse(extraVars);
+    const disabled = true;
 
-    return { label, tooltip, value };
+    return { label, tooltip, value, disabled };
 }
 
 function getLabelDetails () {
@@ -558,21 +559,6 @@ function AtJobDetailsController (
         vm.job = _.get(resource.model, 'model.GET', {});
         vm.canDelete = resource.model.get('summary_fields.user_capabilities.delete');
 
-        // XX - Codemirror
-        if (vm.extraVars) {
-            const cm = {
-                parseType: 'yaml',
-                $apply: $scope.$apply,
-                variables: vm.extraVars.value,
-            };
-
-            ParseTypeChange({
-                field_id: 'cm-extra-vars',
-                readOnly: true,
-                scope: cm,
-            });
-        }
-
         vm.cancelJob = cancelJob;
         vm.deleteJob = deleteJob;
         vm.toggleLabels = toggleLabels;

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

@@ -252,23 +252,14 @@
     </div>
 
     <!-- EXTRA VARIABLES DETAIL -->
-    <div class="JobResults-resultRow JobResults-resultRow--variables" ng-show="vm.extraVars">
-        <label class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth">
-            <span>{{ vm.extraVars.label }}</span>
-            <i class="JobResults-extraVarsHelp fa fa-question-circle"
-                aw-tool-tip="{{ vm.extraVars.tooltip }}"
-                data-placement="top">
-            </i>
-        </label>
-        <textarea
-            disabled="disabled"
-            rows="6"
-            ng-model="vm.extraVars.value"
-            name="variables"
-            class="form-control Form-textArea Form-textAreaLabel Form-formGroup--fullWidth"
-            id="cm-extra-vars">
-        </textarea>
-    </div>
+    <at-code-mirror
+        ng-if="vm.extraVars"
+        variables="{{ vm.extraVars.value }}"
+        tooltip="{{ vm.extraVars.tooltip }}"
+        label="{{ vm.extraVars.label}}"
+        label-class="JobResults-codeMirrorResultRowLabel"
+        disabled="{{ vm.extraVars.disabled }}">
+    </at-code-mirror>
 
     <!-- LABELS DETAIL -->
     <div class="JobResults-resultRow" ng-show="vm.labels">