job detail style tweaks

awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx

@@ -32,12 +32,42 @@ const CodeMirror = styled(ReactCodeMirror)`
       background: var(--pf-c-form-control--invalid--Background);
       border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);
     }`}
+
+  ${props =>
+    props.options &&
+    props.options.readOnly &&
+    `
+    &,
+    &:hover {
+      --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--300);
+    }
+
+    .CodeMirror-cursors {
+      display: none;
+    }
+
+    .CodeMirror-lines {
+      cursor: default;
+    }
+
+    .CodeMirror-scroll {
+      background-color: var(--pf-c-form-control--disabled--BackgroundColor);
+    }
+  `}
 `;
 
-function CodeMirrorInput({ value, onChange, mode, readOnly, hasErrors, rows }) {
+function CodeMirrorInput({
+  value,
+  onChange,
+  mode,
+  readOnly,
+  hasErrors,
+  rows,
+  className,
+}) {
   return (
     <CodeMirror
-      className="pf-c-form-control"
+      className={`pf-c-form-control ${className}`}
       value={value}
       onBeforeChange={(editor, data, val) => onChange(val)}
       mode={mode}

awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx

@@ -18,6 +18,10 @@ const SmallButton = styled(Button)`
   font-size: var(--pf-global--FontSize--xs);
 `;
 
+const SplitItemRight = styled(SplitItem)`
+  margin-bottom: 5px;
+`;
+
 function VariablesInput(props) {
   const { id, label, readOnly, rows, error, onError, className } = props;
   /* eslint-disable react/destructuring-assignment */
@@ -44,7 +48,7 @@ function VariablesInput(props) {
             {label}
           </label>
         </SplitItem>
-        <SplitItem>
+        <SplitItemRight>
           <ButtonGroup>
             <SmallButton
               onClick={() => {
@@ -79,7 +83,7 @@ function VariablesInput(props) {
               JSON
             </SmallButton>
           </ButtonGroup>
-        </SplitItem>
+        </SplitItemRight>
       </Split>
       <CodeMirrorInput
         mode={mode}

awx/ui_next/src/components/DetailList/DetailList.jsx

@@ -11,6 +11,7 @@ const DetailList = ({ children, stacked, ...props }) => (
 export default styled(DetailList)`
   display: grid;
   grid-gap: 20px;
+  align-items: baseline;
   ${props =>
     props.stacked
       ? `

awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx

@@ -6,7 +6,7 @@ import { CardBody, Button } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { DetailList, Detail } from '@components/DetailList';
 import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
-import { VariablesInput } from '@components/CodeMirrorInput';
+import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput';
 import { toTitleCase } from '@util/strings';
 import { Job } from '../../../types';
 
@@ -15,6 +15,12 @@ const ActionButtonWrapper = styled.div`
   justify-content: flex-end;
 `;
 
+const VariablesInput = styled(_VariablesInput)`
+  .pf-c-form__label {
+    --pf-c-form__label--FontWeight: var(--pf-global--FontWeight--bold);
+  }
+`;
+
 const VERBOSITY = {
   0: '0 (Normal)',
   1: '1 (Verbose)',
@@ -128,14 +134,16 @@ function JobDetail({ job, i18n }) {
           label={i18n._(t`Variables`)}
         />
       )}
-      <VariablesInput
-        css="margin: 20px 0"
-        id="job-artifacts"
-        readOnly
-        value={job.artifacts ? JSON.stringify(job.artifacts) : '{}'}
-        rows={4}
-        label={i18n._(t`Artifacts`)}
-      />
+      {job.artifacts && (
+        <VariablesInput
+          css="margin: 20px 0"
+          id="job-artifacts"
+          readOnly
+          value={JSON.stringify(job.artifacts)}
+          rows={4}
+          label={i18n._(t`Artifacts`)}
+        />
+      )}
       <ActionButtonWrapper>
         <Button
           variant="secondary"