Add Artifacts CodeMirror field to job details.

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

@@ -381,7 +381,7 @@
     flex-wrap: wrap;
 }
 
-.JobResults-resultRow #cm-variables-container {
+.JobResults-resultRow div[id$='variables-container'] {
     width: 100%;
 }
 

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

@@ -572,8 +572,25 @@ function getExtraVarsDetails () {
     const tooltip = strings.get('tooltips.EXTRA_VARS');
     const value = parse(extraVars);
     const disabled = true;
+    const name = 'extra_vars';
 
-    return { label, tooltip, value, disabled };
+    return { label, tooltip, value, disabled, name };
+}
+
+function getArtifactsDetails () {
+    const artifacts = resource.model.get('artifacts');
+
+    if (!artifacts) {
+        return null;
+    }
+
+    const label = strings.get('labels.ARTIFACTS');
+    const tooltip = strings.get('tooltips.ARTIFACTS');
+    const value = parse(artifacts);
+    const disabled = true;
+    const name = 'artifacts';
+
+    return { label, tooltip, value, disabled, name };
 }
 
 function getLabelDetails () {
@@ -781,6 +798,7 @@ function JobDetailsController (
         vm.jobTags = getJobTagDetails();
         vm.skipTags = getSkipTagDetails();
         vm.extraVars = getExtraVarsDetails();
+        vm.artifacts = getArtifactsDetails();
         vm.labels = getLabelDetails();
         vm.inventorySource = getInventorySourceDetails();
         vm.overwrite = getOverwriteDetails();

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

@@ -332,10 +332,22 @@
     ng-if="vm.extraVars"
     variables="{{ vm.extraVars.value }}"
     tooltip="{{ vm.extraVars.tooltip }}"
-    label="{{ vm.extraVars.label}}"
+    label="{{ vm.extraVars.label }}"
+    name="{{ vm.extraVars.name }}"
     disabled="{{ vm.extraVars.disabled }}">
 </at-code-mirror>
 
+<!-- ARTIFACTS DETAIL -->
+<at-code-mirror
+    class="JobResults-resultRow"
+    ng-if="vm.artifacts"
+    variables="{{ vm.artifacts.value }}"
+    tooltip="{{ vm.artifacts.tooltip }}"
+    label="{{ vm.artifacts.label }}"
+    name="{{ vm.artifacts.name }}"
+    disabled="{{ vm.artifacts.disabled }}">
+</at-code-mirror>
+
 <!-- LABELS DETAIL -->
 <div class="JobResults-resultRow" ng-show="vm.labels">
     <div class="JobResults-resultRow">

awx/ui/client/features/output/output.strings.js

@@ -14,6 +14,7 @@ function OutputStrings (BaseString) {
     };
 
     ns.tooltips = {
+        ARTIFACTS: t.s('Read-only view of artifacts added to the job template'),
         CANCEL: t.s('Cancel'),
         COLLAPSE_OUTPUT: t.s('Collapse Output'),
         DELETE: t.s('Delete'),
@@ -49,6 +50,7 @@ function OutputStrings (BaseString) {
     };
 
     ns.labels = {
+        ARTIFACTS: t.s('Artifacts'),
         CREDENTIAL: t.s('Credential'),
         ENVIRONMENT: t.s('Environment'),
         EXECUTION_NODE: t.s('Execution Node'),