Adds atCdeMirror directive

This commit adds a new component to be used for showing CodeMirror
instances, along with an expandable capability to view more variables.
It also removes the previous directive for the Network UI that used
to include this functionality.

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">