From 4372e977f070edac164c5d66b1a095b18402fe32 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 25 Jun 2019 15:31:14 -0700
Subject: [PATCH 01/12] build basic job details

---
 awx/ui_next/src/api/models/Jobs.js            |   5 +
 .../src/components/DetailList/Detail.jsx      |   2 +-
 awx/ui_next/src/screens/Job/Job.jsx           |  26 ++-
 .../src/screens/Job/JobDetail/JobDetail.jsx   | 150 +++++++++++++++---
 .../src/screens/Job/JobList/JobListItem.jsx   |   2 +-
 awx/ui_next/src/screens/Job/Jobs.jsx          |   2 +-
 6 files changed, 158 insertions(+), 29 deletions(-)

diff --git a/awx/ui_next/src/api/models/Jobs.js b/awx/ui_next/src/api/models/Jobs.js
index 295ee815e8..1c3375691c 100644
--- a/awx/ui_next/src/api/models/Jobs.js
+++ b/awx/ui_next/src/api/models/Jobs.js
@@ -5,6 +5,11 @@ class Jobs extends Base {
     super(http);
     this.baseUrl = '/api/v2/jobs/';
   }
+
+  readDetail (id, type) {
+    // TODO: adjust url based on type
+    return this.http.get(`${this.baseUrl}${id}/`);
+  }
 }
 
 export default Jobs;
diff --git a/awx/ui_next/src/components/DetailList/Detail.jsx b/awx/ui_next/src/components/DetailList/Detail.jsx
index ea65fdc288..761fd6aa94 100644
--- a/awx/ui_next/src/components/DetailList/Detail.jsx
+++ b/awx/ui_next/src/components/DetailList/Detail.jsx
@@ -26,7 +26,7 @@ const DetailValue = styled(({ fullWidth, ...props }) => (
 `;
 
 const Detail = ({ label, value, fullWidth }) => {
-  if (!value) return null;
+  if (!value && typeof value !== 'number') { return null; }
   return (
     <Fragment>
       <DetailName component={TextListItemVariants.dt} fullWidth={fullWidth}>
diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx
index 67b33f6fc5..b936edb0fa 100644
--- a/awx/ui_next/src/screens/Job/Job.jsx
+++ b/awx/ui_next/src/screens/Job/Job.jsx
@@ -49,7 +49,7 @@ class Job extends Component {
 
     this.setState({ contentError: null, hasContentLoading: true });
     try {
-      const { data } = await JobsAPI.readDetail(id);
+      const { data } = await JobsAPI.readDetail(id, match.params.type);
       setBreadcrumb(data);
       this.setState({ job: data });
     } catch (err) {
@@ -106,17 +106,31 @@ class Job extends Component {
         <Card>
           {cardHeader}
           <Switch>
-            <Redirect from="/jobs/:id" to="/jobs/:id/details" exact />
+            <Redirect
+              from="/jobs/:type/:id"
+              to="/jobs/:type/:id/details"
+              exact
+            />
             {job && (
               <Route
-                path="/jobs/:id/details"
-                render={() => <JobDetail match={match} job={job} />}
+                path="/jobs/:type/:id/details"
+                render={() => (
+                  <JobDetail
+                    match={match}
+                    job={job}
+                  />
+                )}
               />
             )}
             {job && (
               <Route
-                path="/jobs/:id/output"
-                render={() => <JobOutput match={match} job={job} />}
+                path="/jobs/:type/:id/output"
+                render={() => (
+                  <JobOutput
+                    match={match}
+                    job={job}
+                  />
+                )}
               />
             )}
           </Switch>
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index a4b1ea8651..93f5a825e6 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -1,35 +1,145 @@
-import React, { Component } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { CardBody, Button } from '@patternfly/react-core';
 import styled from 'styled-components';
+import { DetailList, Detail } from '@components/DetailList';
+import { ChipGroup, Chip } from '@components/Chip';
+import ContentError from '@components/ContentError';
+import ContentLoading from '@components/ContentLoading';
+import { toTitleCase } from '@util/strings';
 
 const ActionButtonWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
 `;
-class JobDetail extends Component {
-  render() {
-    const { job, i18n } = this.props;
 
-    return (
-      <CardBody>
-        <b>{job.name}</b>
+const VERBOSITY = {
+  0: '0 (Normal)',
+  1: '1 (Verbose)',
+  2: '2 (More Verbose)',
+  3: '3 (Debug)',
+  4: '4 (Connection Debug)',
+};
 
-        <ActionButtonWrapper>
-          <Button
-            variant="secondary"
-            aria-label="close"
-            component={Link}
-            to="/jobs"
-          >
-            {i18n._(t`Close`)}
-          </Button>
-        </ActionButtonWrapper>
-      </CardBody>
-    );
-  }
+function JobDetail ({ job, i18n }) {
+  const [instanceGroups, setInstanceGroups] = useState(null);
+  console.log(job);
+  const {
+    job_template: jobTemplate,
+    project,
+    inventory,
+    instance_group: instanceGroup,
+  } = job.summary_fields;
+
+  return (
+    <CardBody>
+      <DetailList>
+        {/* TODO: add status icon? */}
+        <Detail
+          label={i18n._(t`Status`)}
+          value={toTitleCase(job.status)}
+        />
+        <Detail
+          label={i18n._(t`Started`)}
+          value={job.started}
+        />
+        <Detail
+          label={i18n._(t`Finished`)}
+          value={job.finished}
+        />
+        <Detail
+          label={i18n._(t`Template`)}
+          value={(
+            <Link to={`/templates/job_template/${jobTemplate.id}`}>
+              {jobTemplate.name}
+            </Link>
+          )}
+        />
+        <Detail
+          label={i18n._(t`Job Type`)}
+          value={toTitleCase(job.job_type)}
+        />
+        <Detail
+          label={i18n._(t`Inventory`)}
+          value={(
+            <Link to={`/inventory/${inventory.id}`}>
+              {inventory.name}
+            </Link>
+          )}
+        />
+        {/* TODO: show project status icon */}
+        <Detail
+          label={i18n._(t`Project`)}
+          value={(
+            <Link to={`/projects/${project.id}`}>
+              {project.name}
+            </Link>
+          )}
+        />
+        <Detail
+          label={i18n._(t`Revision`)}
+          value={job.scm_revision}
+        />
+        <Detail
+          label={i18n._(t`Playbook`)}
+          value={null}
+        />
+        <Detail
+          label={i18n._(t`Limit`)}
+          value={job.limit}
+        />
+        <Detail
+          label={i18n._(t`Verbosity`)}
+          value={VERBOSITY[job.verbosity]}
+        />
+        <Detail
+          label={i18n._(t`Environment`)}
+          value={null}
+        />
+        <Detail
+          label={i18n._(t`Execution Node`)}
+          value={job.exucution_node}
+        />
+        <Detail
+          label={i18n._(t`Instance Group`)}
+          value={(
+            <Link to={`/instance_groups/${instanceGroup.id}`}>
+              {instanceGroup.name}
+            </Link>
+          )}
+        />
+        <Detail
+          label={i18n._(t`Job Slice`)}
+          value={`${job.job_slice_number}/${job.job_slice_count}`}
+        />
+        {(instanceGroups && instanceGroups.length > 0) && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Instance Groups`)}
+            value={(
+              <ChipGroup showOverflowAfter={5}>
+                {instanceGroups.map(ig => (
+                  <Chip key={ig.id} isReadOnly>{ig.name}</Chip>
+                ))}
+              </ChipGroup>
+            )}
+          />
+        )}
+      </DetailList>
+      <ActionButtonWrapper>
+        <Button
+          variant="secondary"
+          aria-label="close"
+          component={Link}
+          to="/jobs"
+        >
+          {i18n._(t`Close`)}
+        </Button>
+      </ActionButtonWrapper>
+    </CardBody>
+  );
 }
 
 export default withI18n()(withRouter(JobDetail));
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 4d2fe70f53..805d4e1506 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -32,7 +32,7 @@ class JobListItem extends Component {
               <DataListCell key="divider">
                 <VerticalSeparator />
                 <span>
-                  <Link to={`/jobs/${job.id}`}>
+                  <Link to={`/jobs/${job.type}/${job.id}`}>
                     <b>{job.name}</b>
                   </Link>
                 </span>
diff --git a/awx/ui_next/src/screens/Job/Jobs.jsx b/awx/ui_next/src/screens/Job/Jobs.jsx
index fc4311b2bb..a71bfeef71 100644
--- a/awx/ui_next/src/screens/Job/Jobs.jsx
+++ b/awx/ui_next/src/screens/Job/Jobs.jsx
@@ -58,7 +58,7 @@ class Jobs extends Component {
             )}
           />
           <Route
-            path={`${match.path}/:id`}
+            path={`${match.path}/:type/:id`}
             render={() => (
               <Job
                 history={history}

From 968cc8c79cef3bce1289c1d0ca97c1e381517c90 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 26 Jun 2019 15:27:39 -0700
Subject: [PATCH 02/12] add variables & artifacts to job detail

---
 .../src/components/CodeMirrorInput/index.js   |  1 +
 .../src/screens/Job/JobDetail/JobDetail.jsx   | 46 +++++++--
 .../CodeMirrorInput/VariablesInput.jsx        | 99 +++++++++++++++++++
 3 files changed, 137 insertions(+), 9 deletions(-)
 create mode 100644 src/components/CodeMirrorInput/VariablesInput.jsx

diff --git a/awx/ui_next/src/components/CodeMirrorInput/index.js b/awx/ui_next/src/components/CodeMirrorInput/index.js
index 932883224b..48940bbb37 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/index.js
+++ b/awx/ui_next/src/components/CodeMirrorInput/index.js
@@ -1,4 +1,5 @@
 import CodeMirrorInput from './CodeMirrorInput';
 
 export default CodeMirrorInput;
+export { default as VariablesInput } from './VariablesInput';
 export { default as VariablesField } from './VariablesField';
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 93f5a825e6..57e03638ed 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -1,4 +1,4 @@
-import React, { Component, useState, useEffect } from 'react';
+import React from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -6,8 +6,7 @@ import { CardBody, Button } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { DetailList, Detail } from '@components/DetailList';
 import { ChipGroup, Chip } from '@components/Chip';
-import ContentError from '@components/ContentError';
-import ContentLoading from '@components/ContentLoading';
+import { VariablesInput } from '@components/CodeMirrorInput';
 import { toTitleCase } from '@util/strings';
 
 const ActionButtonWrapper = styled.div`
@@ -24,13 +23,13 @@ const VERBOSITY = {
 };
 
 function JobDetail ({ job, i18n }) {
-  const [instanceGroups, setInstanceGroups] = useState(null);
-  console.log(job);
   const {
     job_template: jobTemplate,
     project,
     inventory,
     instance_group: instanceGroup,
+    credentials,
+    labels,
   } = job.summary_fields;
 
   return (
@@ -114,20 +113,49 @@ function JobDetail ({ job, i18n }) {
           label={i18n._(t`Job Slice`)}
           value={`${job.job_slice_number}/${job.job_slice_count}`}
         />
-        {(instanceGroups && instanceGroups.length > 0) && (
+        {(credentials && credentials.length > 0) && (
           <Detail
             fullWidth
-            label={i18n._(t`Instance Groups`)}
+            label={i18n._(t`Credentials`)}
             value={(
               <ChipGroup showOverflowAfter={5}>
-                {instanceGroups.map(ig => (
-                  <Chip key={ig.id} isReadOnly>{ig.name}</Chip>
+                {credentials.map(c => (
+                  <Chip key={c.id} isReadOnly>{c.name}</Chip>
+                ))}
+              </ChipGroup>
+            )}
+          />
+        )}
+        {(labels && labels.count > 0) && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Credentials`)}
+            value={(
+              <ChipGroup showOverflowAfter={5}>
+                {labels.results.map(l => (
+                  <Chip key={l.id} isReadOnly>{l.name}</Chip>
                 ))}
               </ChipGroup>
             )}
           />
         )}
       </DetailList>
+      <VariablesInput
+        css="margin: 20px 0"
+        id="job-variables"
+        readOnly
+        value={job.extra_vars}
+        rows={4}
+        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`)}
+      />
       <ActionButtonWrapper>
         <Button
           variant="secondary"
diff --git a/src/components/CodeMirrorInput/VariablesInput.jsx b/src/components/CodeMirrorInput/VariablesInput.jsx
new file mode 100644
index 0000000000..2d4e96e3f7
--- /dev/null
+++ b/src/components/CodeMirrorInput/VariablesInput.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { string, func, bool, number } from 'prop-types';
+import { Button, Split, SplitItem } from '@patternfly/react-core';
+import styled from 'styled-components';
+import ButtonGroup from '@components/ButtonGroup';
+import { yamlToJson, jsonToYaml } from '@util/yaml';
+import CodeMirrorInput from './CodeMirrorInput';
+
+const YAML_MODE = 'yaml';
+const JSON_MODE = 'javascript';
+
+const SmallButton = styled(Button)`
+  padding: 3px 8px;
+  font-size: var(--pf-global--FontSize--xs);
+`;
+
+function VariablesInput (props) {
+  const { id, label, value, readOnly, rows, error, onChange, onError, className } = props;
+  const [mode, setMode] = useState(YAML_MODE);
+
+  return (
+    <div className={`pf-c-form__group ${className || ''}`}>
+      <Split gutter="sm">
+        <SplitItem>
+          <label htmlFor={id} className="pf-c-form__label">{label}</label>
+        </SplitItem>
+        <SplitItem>
+          <ButtonGroup>
+            <SmallButton
+              onClick={() => {
+                if (mode === YAML_MODE) { return; }
+                try {
+                  onChange(jsonToYaml(value));
+                  setMode(YAML_MODE);
+                } catch (err) {
+                  onError(err.message);
+                }
+              }}
+              variant={mode === YAML_MODE ? 'primary' : 'secondary'}
+            >
+              YAML
+            </SmallButton>
+            <SmallButton
+              onClick={() => {
+                if (mode === JSON_MODE) { return; }
+                try {
+                  onChange(yamlToJson(value));
+                  setMode(JSON_MODE);
+                } catch (err) {
+                  onError(err.message);
+                }
+              }}
+              variant={mode === JSON_MODE ? 'primary' : 'secondary'}
+            >
+              JSON
+            </SmallButton>
+          </ButtonGroup>
+        </SplitItem>
+      </Split>
+      <CodeMirrorInput
+        mode={mode}
+        readOnly={readOnly}
+        value={value}
+        onChange={onChange}
+        rows={rows}
+        hasErrors={!!error}
+      />
+      {error ? (
+        <div
+          className="pf-c-form__helper-text pf-m-error"
+          aria-live="polite"
+        >
+          {error}
+        </div>
+      ) : null }
+    </div>
+  );
+}
+VariablesInput.propTypes = {
+  id: string.isRequired,
+  label: string.isRequired,
+  value: string.isRequired,
+  readOnly: bool,
+  error: string,
+  rows: number,
+  onChange: func,
+  onError: func,
+};
+VariablesInput.defaultProps = {
+  readOnly: false,
+  onChange: () => {},
+  rows: 6,
+  error: null,
+  onError: () => {},
+};
+
+export default styled(VariablesInput)`
+  --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
+`;

From da780c9d7c945158c74eec53b66a7e69122c5f5c Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 28 Jun 2019 14:48:40 -0700
Subject: [PATCH 03/12] make VariablesInput detect whether value is JSON or
 YAML on init

---
 .../CodeMirrorInput/VariablesInput.jsx        | 19 +++++++++++++++----
 awx/ui_next/src/util/strings.js               |  8 ++++++--
 awx/ui_next/src/util/strings.test.js          | 12 +++++++++++-
 awx/ui_next/src/util/yaml.js                  | 12 ++++++++++++
 4 files changed, 44 insertions(+), 7 deletions(-)
 rename {src => awx/ui_next/src}/components/CodeMirrorInput/VariablesInput.jsx (81%)

diff --git a/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
similarity index 81%
rename from src/components/CodeMirrorInput/VariablesInput.jsx
rename to awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
index 2d4e96e3f7..efd43f643e 100644
--- a/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
@@ -3,7 +3,7 @@ import { string, func, bool, number } from 'prop-types';
 import { Button, Split, SplitItem } from '@patternfly/react-core';
 import styled from 'styled-components';
 import ButtonGroup from '@components/ButtonGroup';
-import { yamlToJson, jsonToYaml } from '@util/yaml';
+import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
 
 const YAML_MODE = 'yaml';
@@ -15,8 +15,19 @@ const SmallButton = styled(Button)`
 `;
 
 function VariablesInput (props) {
-  const { id, label, value, readOnly, rows, error, onChange, onError, className } = props;
-  const [mode, setMode] = useState(YAML_MODE);
+  const { id, label, readOnly, rows, error, onError, className } = props;
+  // eslint-disable-next-line react/destructuring-assignment
+  const [value, setValue] = useState(props.value);
+  const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);
+  // eslint-disable-next-line react/destructuring-assignment
+  const isControlled = !!props.onChange;
+
+  const onChange = (newValue) => {
+    if (isControlled) {
+      props.onChange(newValue);
+    }
+    setValue(newValue);
+  };
 
   return (
     <div className={`pf-c-form__group ${className || ''}`}>
@@ -88,7 +99,7 @@ VariablesInput.propTypes = {
 };
 VariablesInput.defaultProps = {
   readOnly: false,
-  onChange: () => {},
+  onChange: null,
   rows: 6,
   error: null,
   onError: () => {},
diff --git a/awx/ui_next/src/util/strings.js b/awx/ui_next/src/util/strings.js
index cc5e00e68e..588bc8b7b6 100644
--- a/awx/ui_next/src/util/strings.js
+++ b/awx/ui_next/src/util/strings.js
@@ -14,9 +14,13 @@ export function ucFirst(str) {
   return `${str[0].toUpperCase()}${str.substr(1)}`;
 }
 
-export const toTitleCase = string =>
-  string
+export const toTitleCase = string => {
+  if (!string) {
+    return '';
+  }
+  return string
     .toLowerCase()
     .split('_')
     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
+};
diff --git a/awx/ui_next/src/util/strings.test.js b/awx/ui_next/src/util/strings.test.js
index ec2e6f3c13..b69db2f489 100644
--- a/awx/ui_next/src/util/strings.test.js
+++ b/awx/ui_next/src/util/strings.test.js
@@ -1,4 +1,4 @@
-import { pluralize, getArticle, ucFirst } from './strings';
+import { pluralize, getArticle, ucFirst, toTitleCase } from './strings';
 
 describe('string utils', () => {
   describe('pluralize', () => {
@@ -31,4 +31,14 @@ describe('string utils', () => {
       expect(ucFirst('team')).toEqual('Team');
     });
   });
+
+  describe('toTitleCase', () => {
+    test('should upper case each word', () => {
+      expect(toTitleCase('a_string_of_words')).toEqual('A String Of Words');
+    });
+
+    test('should return empty string for undefined', () => {
+      expect(toTitleCase(undefined)).toEqual('');
+    });
+  });
 });
diff --git a/awx/ui_next/src/util/yaml.js b/awx/ui_next/src/util/yaml.js
index 22a2cf9815..27b99d0b63 100644
--- a/awx/ui_next/src/util/yaml.js
+++ b/awx/ui_next/src/util/yaml.js
@@ -21,3 +21,15 @@ export function jsonToYaml(jsonString) {
   }
   return yaml.safeDump(value);
 }
+
+export function isJson (jsonString) {
+  if (typeof jsonString !== 'string') { return false; }
+  let value;
+  try {
+    value = JSON.parse(jsonString);
+  } catch (e) {
+    return false;
+  }
+
+  return typeof value === 'object' && value !== null;
+}

From eee1601528b1ac7df481d406b8b23f7133697eda Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 2 Jul 2019 14:54:45 -0700
Subject: [PATCH 04/12] job details: handle different job types

---
 awx/ui_next/src/api/models/Jobs.js            |  12 +-
 awx/ui_next/src/screens/Job/Job.jsx           |  27 ++---
 .../src/screens/Job/JobDetail/JobDetail.jsx   | 108 +++++++++++-------
 .../src/screens/Job/JobList/JobListItem.jsx   |  34 +++---
 4 files changed, 103 insertions(+), 78 deletions(-)

diff --git a/awx/ui_next/src/api/models/Jobs.js b/awx/ui_next/src/api/models/Jobs.js
index 1c3375691c..60f08466dd 100644
--- a/awx/ui_next/src/api/models/Jobs.js
+++ b/awx/ui_next/src/api/models/Jobs.js
@@ -1,5 +1,14 @@
 import Base from '../Base';
 
+const BASE_URLS = {
+  playbook: '/jobs/',
+  project: '/project_updates/',
+  system: '/system_jobs/',
+  inventory: '/inventory_updates/',
+  command: '/ad_hoc_commands/',
+  workflow: '/workflow_jobs/',
+};
+
 class Jobs extends Base {
   constructor(http) {
     super(http);
@@ -7,8 +16,7 @@ class Jobs extends Base {
   }
 
   readDetail (id, type) {
-    // TODO: adjust url based on type
-    return this.http.get(`${this.baseUrl}${id}/`);
+    return this.http.get(`/api/v2${BASE_URLS[type]}${id}/`);
   }
 }
 
diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx
index b936edb0fa..5d21eafd30 100644
--- a/awx/ui_next/src/screens/Job/Job.jsx
+++ b/awx/ui_next/src/screens/Job/Job.jsx
@@ -8,7 +8,6 @@ import {
   CardHeader as PFCardHeader,
   PageSection,
 } from '@patternfly/react-core';
-
 import { JobsAPI } from '@api';
 import ContentError from '@components/ContentError';
 import CardCloseButton from '@components/CardCloseButton';
@@ -111,28 +110,18 @@ class Job extends Component {
               to="/jobs/:type/:id/details"
               exact
             />
-            {job && (
+            {job && [
               <Route
+                key="details"
                 path="/jobs/:type/:id/details"
-                render={() => (
-                  <JobDetail
-                    match={match}
-                    job={job}
-                  />
-                )}
-              />
-            )}
-            {job && (
+                render={() => <JobDetail type={match.params.type} job={job} />}
+              />,
               <Route
+                key="output"
                 path="/jobs/:type/:id/output"
-                render={() => (
-                  <JobOutput
-                    match={match}
-                    job={job}
-                  />
-                )}
-              />
-            )}
+                render={() => <JobOutput type={match.params.type} job={job} />}
+              />,
+            ]}
           </Switch>
         </Card>
       </PageSection>
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 57e03638ed..904150dada 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { shape } from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -48,35 +49,41 @@ function JobDetail ({ job, i18n }) {
           label={i18n._(t`Finished`)}
           value={job.finished}
         />
-        <Detail
-          label={i18n._(t`Template`)}
-          value={(
-            <Link to={`/templates/job_template/${jobTemplate.id}`}>
-              {jobTemplate.name}
-            </Link>
-          )}
-        />
+        {jobTemplate && (
+          <Detail
+            label={i18n._(t`Template`)}
+            value={(
+              <Link to={`/templates/job_template/${jobTemplate.id}`}>
+                {jobTemplate.name}
+              </Link>
+            )}
+          />
+        )}
         <Detail
           label={i18n._(t`Job Type`)}
           value={toTitleCase(job.job_type)}
         />
-        <Detail
-          label={i18n._(t`Inventory`)}
-          value={(
-            <Link to={`/inventory/${inventory.id}`}>
-              {inventory.name}
-            </Link>
-          )}
-        />
+        {inventory && (
+          <Detail
+            label={i18n._(t`Inventory`)}
+            value={(
+              <Link to={`/inventory/${inventory.id}`}>
+                {inventory.name}
+              </Link>
+            )}
+          />
+        )}
         {/* TODO: show project status icon */}
-        <Detail
-          label={i18n._(t`Project`)}
-          value={(
-            <Link to={`/projects/${project.id}`}>
-              {project.name}
-            </Link>
-          )}
-        />
+        {project && (
+          <Detail
+            label={i18n._(t`Project`)}
+            value={(
+              <Link to={`/projects/${project.id}`}>
+                {project.name}
+              </Link>
+            )}
+          />
+        )}
         <Detail
           label={i18n._(t`Revision`)}
           value={job.scm_revision}
@@ -101,18 +108,26 @@ function JobDetail ({ job, i18n }) {
           label={i18n._(t`Execution Node`)}
           value={job.exucution_node}
         />
-        <Detail
-          label={i18n._(t`Instance Group`)}
-          value={(
-            <Link to={`/instance_groups/${instanceGroup.id}`}>
-              {instanceGroup.name}
-            </Link>
-          )}
-        />
-        <Detail
-          label={i18n._(t`Job Slice`)}
-          value={`${job.job_slice_number}/${job.job_slice_count}`}
-        />
+        {instanceGroup && (
+          <Detail
+            label={i18n._(t`Instance Group`)}
+            value={(
+              <Link to={`/instance_groups/${instanceGroup.id}`}>
+                {instanceGroup.name}
+              </Link>
+            )}
+          />
+        )}
+        {
+          typeof job.job_slice_number === 'number'
+          && typeof job.job_slice_count === 'number'
+          && (
+            <Detail
+              label={i18n._(t`Job Slice`)}
+              value={`${job.job_slice_number}/${job.job_slice_count}`}
+            />
+          )
+        }
         {(credentials && credentials.length > 0) && (
           <Detail
             fullWidth
@@ -140,14 +155,16 @@ function JobDetail ({ job, i18n }) {
           />
         )}
       </DetailList>
-      <VariablesInput
-        css="margin: 20px 0"
-        id="job-variables"
-        readOnly
-        value={job.extra_vars}
-        rows={4}
-        label={i18n._(t`Variables`)}
-      />
+      {job.extra_vars && (
+        <VariablesInput
+          css="margin: 20px 0"
+          id="job-variables"
+          readOnly
+          value={job.extra_vars}
+          rows={4}
+          label={i18n._(t`Variables`)}
+        />
+      )}
       <VariablesInput
         css="margin: 20px 0"
         id="job-artifacts"
@@ -169,5 +186,8 @@ function JobDetail ({ job, i18n }) {
     </CardBody>
   );
 }
+JobDetail.propTypes = {
+  job: shape({}).isRequired,
+};
 
 export default withI18n()(withRouter(JobDetail));
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 805d4e1506..58cf43a772 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -11,6 +11,15 @@ import DataListCell from '@components/DataListCell';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { toTitleCase } from '@util/strings';
 
+const JOB_TYPE_URLS = {
+  job: 'playbook',
+  project_update: 'project',
+  system_job: 'system',
+  inventory_update: 'inventory',
+  ad_hoc_command: 'command',
+  workflow_job: 'workflow',
+};
+
 class JobListItem extends Component {
   render() {
     const { job, isSelected, onSelect } = this.props;
@@ -27,19 +36,18 @@ class JobListItem extends Component {
             onChange={onSelect}
             aria-labelledby={`check-action-${job.id}`}
           />
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key="divider">
-                <VerticalSeparator />
-                <span>
-                  <Link to={`/jobs/${job.type}/${job.id}`}>
-                    <b>{job.name}</b>
-                  </Link>
-                </span>
-              </DataListCell>,
-              <DataListCell key="type">{toTitleCase(job.type)}</DataListCell>,
-              <DataListCell key="finished">{job.finished}</DataListCell>,
-            ]}
+          <DataListItemCells dataListCells={[
+            <DataListCell key="divider">
+              <VerticalSeparator />
+              <span>
+                <Link to={`/jobs/${JOB_TYPE_URLS[job.type]}/${job.id}`}>
+                  <b>{job.name}</b>
+                </Link>
+              </span>
+            </DataListCell>,
+            <DataListCell key="type">{toTitleCase(job.type)}</DataListCell>,
+            <DataListCell key="finished">{job.finished}</DataListCell>,
+          ]}
           />
         </DataListItemRow>
       </DataListItem>

From 40f9b0dc7f3c297bc5c317ed35abf08be2e7b684 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 10 Jul 2019 16:31:05 -0700
Subject: [PATCH 05/12] add CredentialChip component

---
 awx/ui_next/src/components/Chip/Chip.test.jsx |   1 -
 .../src/components/Chip/CredentialChip.jsx    |  35 ++++++
 .../components/Chip/CredentialChip.test.jsx   |  54 +++++++++
 awx/ui_next/src/components/Chip/index.js      |   1 +
 .../CodeMirrorInput/VariablesInput.jsx        |  36 +++---
 .../src/screens/Job/JobDetail/JobDetail.jsx   | 103 ++++++------------
 .../JobTemplateDetail/JobTemplateDetail.jsx   |  14 +--
 .../JobTemplateDetail.test.jsx                |  16 +--
 8 files changed, 157 insertions(+), 103 deletions(-)
 create mode 100644 awx/ui_next/src/components/Chip/CredentialChip.jsx
 create mode 100644 awx/ui_next/src/components/Chip/CredentialChip.test.jsx

diff --git a/awx/ui_next/src/components/Chip/Chip.test.jsx b/awx/ui_next/src/components/Chip/Chip.test.jsx
index 0d4850da6d..8e38d71453 100644
--- a/awx/ui_next/src/components/Chip/Chip.test.jsx
+++ b/awx/ui_next/src/components/Chip/Chip.test.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-
 import Chip from './Chip';
 
 describe('Chip', () => {
diff --git a/awx/ui_next/src/components/Chip/CredentialChip.jsx b/awx/ui_next/src/components/Chip/CredentialChip.jsx
new file mode 100644
index 0000000000..f10022f37c
--- /dev/null
+++ b/awx/ui_next/src/components/Chip/CredentialChip.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shape, string, bool } from 'prop-types';
+import { toTitleCase } from '@util/strings';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import Chip from './Chip';
+
+function CredentialChip ({ credential, i18n, ...props }) {
+  let type;
+  if (credential.cloud) {
+    type = i18n._(t`Cloud`);
+  } else if (credential.kind === 'aws' || credential.kind === 'ssh') {
+    type = credential.kind.toUpperCase();
+  } else {
+    type = toTitleCase(credential.kind);
+  }
+
+  return (
+    <Chip {...props}>
+      <strong>{type}: </strong>
+      {credential.name}
+    </Chip>
+  )
+}
+CredentialChip.propTypes = {
+  credential: shape({
+    cloud: bool,
+    kind: string,
+    name: string.isRequired,
+  }).isRequired,
+  i18n: shape({}).isRequired,
+};
+
+export { CredentialChip as _CredentialChip };
+export default withI18n()(CredentialChip);
diff --git a/awx/ui_next/src/components/Chip/CredentialChip.test.jsx b/awx/ui_next/src/components/Chip/CredentialChip.test.jsx
new file mode 100644
index 0000000000..192208a0da
--- /dev/null
+++ b/awx/ui_next/src/components/Chip/CredentialChip.test.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import CredentialChip from './CredentialChip';
+
+describe('CredentialChip', () => {
+  test('should render SSH kind', () => {
+    const credential = {
+      kind: 'ssh',
+      name: 'foo',
+    };
+
+    const wrapper = mountWithContexts(
+      <CredentialChip credential={credential} />
+    );
+    expect(wrapper.find('CredentialChip').text()).toEqual('SSH: foo');
+  });
+
+  test('should render AWS kind', () => {
+    const credential = {
+      kind: 'aws',
+      name: 'foo',
+    };
+
+    const wrapper = mountWithContexts(
+      <CredentialChip credential={credential} />
+    );
+    expect(wrapper.find('CredentialChip').text()).toEqual('AWS: foo');
+  });
+
+  test('should render with "Cloud"', () => {
+    const credential = {
+      cloud: true,
+      kind: 'other',
+      name: 'foo',
+    };
+
+    const wrapper = mountWithContexts(
+      <CredentialChip credential={credential} />
+    );
+    expect(wrapper.find('CredentialChip').text()).toEqual('Cloud: foo');
+  });
+
+  test('should render with other kind', () => {
+    const credential = {
+      kind: 'other',
+      name: 'foo',
+    };
+
+    const wrapper = mountWithContexts(
+      <CredentialChip credential={credential} />
+    );
+    expect(wrapper.find('CredentialChip').text()).toEqual('Other: foo');
+  });
+});
diff --git a/awx/ui_next/src/components/Chip/index.js b/awx/ui_next/src/components/Chip/index.js
index 96e20db252..56324606bf 100644
--- a/awx/ui_next/src/components/Chip/index.js
+++ b/awx/ui_next/src/components/Chip/index.js
@@ -1,2 +1,3 @@
 export { default as ChipGroup } from './ChipGroup';
 export { default as Chip } from './Chip';
+export { default as CredentialChip } from './CredentialChip';
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
index efd43f643e..bcfee592a3 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
@@ -9,20 +9,27 @@ import CodeMirrorInput from './CodeMirrorInput';
 const YAML_MODE = 'yaml';
 const JSON_MODE = 'javascript';
 
+function formatJson(jsonString) {
+  return JSON.stringify(JSON.parse(jsonString), null, 2);
+}
+
 const SmallButton = styled(Button)`
   padding: 3px 8px;
   font-size: var(--pf-global--FontSize--xs);
 `;
 
-function VariablesInput (props) {
+function VariablesInput(props) {
   const { id, label, readOnly, rows, error, onError, className } = props;
-  // eslint-disable-next-line react/destructuring-assignment
-  const [value, setValue] = useState(props.value);
+  /* eslint-disable react/destructuring-assignment */
+  const defaultValue = isJson(props.value)
+    ? formatJson(props.value)
+    : props.value;
+  const [value, setValue] = useState(defaultValue);
   const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);
-  // eslint-disable-next-line react/destructuring-assignment
   const isControlled = !!props.onChange;
+  /* eslint-enable react/destructuring-assignment */
 
-  const onChange = (newValue) => {
+  const onChange = newValue => {
     if (isControlled) {
       props.onChange(newValue);
     }
@@ -33,13 +40,17 @@ function VariablesInput (props) {
     <div className={`pf-c-form__group ${className || ''}`}>
       <Split gutter="sm">
         <SplitItem>
-          <label htmlFor={id} className="pf-c-form__label">{label}</label>
+          <label htmlFor={id} className="pf-c-form__label">
+            {label}
+          </label>
         </SplitItem>
         <SplitItem>
           <ButtonGroup>
             <SmallButton
               onClick={() => {
-                if (mode === YAML_MODE) { return; }
+                if (mode === YAML_MODE) {
+                  return;
+                }
                 try {
                   onChange(jsonToYaml(value));
                   setMode(YAML_MODE);
@@ -53,7 +64,9 @@ function VariablesInput (props) {
             </SmallButton>
             <SmallButton
               onClick={() => {
-                if (mode === JSON_MODE) { return; }
+                if (mode === JSON_MODE) {
+                  return;
+                }
                 try {
                   onChange(yamlToJson(value));
                   setMode(JSON_MODE);
@@ -77,13 +90,10 @@ function VariablesInput (props) {
         hasErrors={!!error}
       />
       {error ? (
-        <div
-          className="pf-c-form__helper-text pf-m-error"
-          aria-live="polite"
-        >
+        <div className="pf-c-form__helper-text pf-m-error" aria-live="polite">
           {error}
         </div>
-      ) : null }
+      ) : null}
     </div>
   );
 }
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 904150dada..c5571d02b3 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -6,7 +6,7 @@ import { t } from '@lingui/macro';
 import { CardBody, Button } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { DetailList, Detail } from '@components/DetailList';
-import { ChipGroup, Chip } from '@components/Chip';
+import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
 import { VariablesInput } from '@components/CodeMirrorInput';
 import { toTitleCase } from '@util/strings';
 
@@ -23,7 +23,7 @@ const VERBOSITY = {
   4: '4 (Connection Debug)',
 };
 
-function JobDetail ({ job, i18n }) {
+function JobDetail({ job, i18n }) {
   const {
     job_template: jobTemplate,
     project,
@@ -37,121 +37,84 @@ function JobDetail ({ job, i18n }) {
     <CardBody>
       <DetailList>
         {/* TODO: add status icon? */}
-        <Detail
-          label={i18n._(t`Status`)}
-          value={toTitleCase(job.status)}
-        />
-        <Detail
-          label={i18n._(t`Started`)}
-          value={job.started}
-        />
-        <Detail
-          label={i18n._(t`Finished`)}
-          value={job.finished}
-        />
+        <Detail label={i18n._(t`Status`)} value={toTitleCase(job.status)} />
+        <Detail label={i18n._(t`Started`)} value={job.started} />
+        <Detail label={i18n._(t`Finished`)} value={job.finished} />
         {jobTemplate && (
           <Detail
             label={i18n._(t`Template`)}
-            value={(
+            value={
               <Link to={`/templates/job_template/${jobTemplate.id}`}>
                 {jobTemplate.name}
               </Link>
-            )}
+            }
           />
         )}
-        <Detail
-          label={i18n._(t`Job Type`)}
-          value={toTitleCase(job.job_type)}
-        />
+        <Detail label={i18n._(t`Job Type`)} value={toTitleCase(job.job_type)} />
         {inventory && (
           <Detail
             label={i18n._(t`Inventory`)}
-            value={(
-              <Link to={`/inventory/${inventory.id}`}>
-                {inventory.name}
-              </Link>
-            )}
+            value={
+              <Link to={`/inventory/${inventory.id}`}>{inventory.name}</Link>
+            }
           />
         )}
         {/* TODO: show project status icon */}
         {project && (
           <Detail
             label={i18n._(t`Project`)}
-            value={(
-              <Link to={`/projects/${project.id}`}>
-                {project.name}
-              </Link>
-            )}
+            value={<Link to={`/projects/${project.id}`}>{project.name}</Link>}
           />
         )}
-        <Detail
-          label={i18n._(t`Revision`)}
-          value={job.scm_revision}
-        />
-        <Detail
-          label={i18n._(t`Playbook`)}
-          value={null}
-        />
-        <Detail
-          label={i18n._(t`Limit`)}
-          value={job.limit}
-        />
-        <Detail
-          label={i18n._(t`Verbosity`)}
-          value={VERBOSITY[job.verbosity]}
-        />
-        <Detail
-          label={i18n._(t`Environment`)}
-          value={null}
-        />
-        <Detail
-          label={i18n._(t`Execution Node`)}
-          value={job.exucution_node}
-        />
+        <Detail label={i18n._(t`Revision`)} value={job.scm_revision} />
+        <Detail label={i18n._(t`Playbook`)} value={null} />
+        <Detail label={i18n._(t`Limit`)} value={job.limit} />
+        <Detail label={i18n._(t`Verbosity`)} value={VERBOSITY[job.verbosity]} />
+        <Detail label={i18n._(t`Environment`)} value={null} />
+        <Detail label={i18n._(t`Execution Node`)} value={job.exucution_node} />
         {instanceGroup && (
           <Detail
             label={i18n._(t`Instance Group`)}
-            value={(
+            value={
               <Link to={`/instance_groups/${instanceGroup.id}`}>
                 {instanceGroup.name}
               </Link>
-            )}
+            }
           />
         )}
-        {
-          typeof job.job_slice_number === 'number'
-          && typeof job.job_slice_count === 'number'
-          && (
+        {typeof job.job_slice_number === 'number' &&
+          typeof job.job_slice_count === 'number' && (
             <Detail
               label={i18n._(t`Job Slice`)}
               value={`${job.job_slice_number}/${job.job_slice_count}`}
             />
-          )
-        }
-        {(credentials && credentials.length > 0) && (
+          )}
+        {credentials && credentials.length > 0 && (
           <Detail
             fullWidth
             label={i18n._(t`Credentials`)}
-            value={(
+            value={
               <ChipGroup showOverflowAfter={5}>
                 {credentials.map(c => (
-                  <Chip key={c.id} isReadOnly>{c.name}</Chip>
+                  <CredentialChip key={c.id} credential={c} isReadOnly />
                 ))}
               </ChipGroup>
-            )}
+            }
           />
         )}
-        {(labels && labels.count > 0) && (
+        {labels && labels.count > 0 && (
           <Detail
             fullWidth
             label={i18n._(t`Credentials`)}
-            value={(
+            value={
               <ChipGroup showOverflowAfter={5}>
                 {labels.results.map(l => (
-                  <Chip key={l.id} isReadOnly>{l.name}</Chip>
+                  <Chip key={l.id} isReadOnly>
+                    {l.name}
+                  </Chip>
                 ))}
               </ChipGroup>
-            )}
+            }
           />
         )}
       </DetailList>
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index 119df2776e..3e2c951c64 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -15,10 +15,9 @@ import { t } from '@lingui/macro';
 import ContentError from '@components/ContentError';
 import LaunchButton from '@components/LaunchButton';
 import ContentLoading from '@components/ContentLoading';
-import { ChipGroup, Chip } from '@components/Chip';
+import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
 import { DetailList, Detail } from '@components/DetailList';
 import { JobTemplatesAPI } from '@api';
-import { toTitleCase } from '@util/strings';
 
 const ButtonGroup = styled.div`
   display: flex;
@@ -104,9 +103,6 @@ class JobTemplateDetail extends Component {
     const generateCallBackUrl = `${window.location.origin + url}callback/`;
     const isInitialized = !hasTemplateLoading && !hasContentLoading;
 
-    const credentialType = c =>
-      c === 'aws' || c === 'ssh' ? c.toUpperCase() : toTitleCase(c);
-
     const renderOptionsField =
       become_enabled || host_config_key || allow_simultaneous || use_fact_cache;
 
@@ -206,13 +202,7 @@ class JobTemplateDetail extends Component {
                   value={
                     <ChipGroup showOverflowAfter={5}>
                       {summary_fields.credentials.map(c => (
-                        <Chip key={c.id} isReadOnly>
-                          <strong className="credential">
-                            {c.kind ? credentialType(c.kind) : i18n._(t`Cloud`)}
-                            :
-                          </strong>
-                          {` ${c.name}`}
-                        </Chip>
+                        <CredentialChip key={c.id} credential={c} isReadOnly />
                       ))}
                     </ChipGroup>
                   }
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx
index 46dd3a5aef..dc945229b7 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.test.jsx
@@ -113,19 +113,21 @@ describe('<JobTemplateDetail />', () => {
     done();
   });
 
-  test('Credential type is Cloud if credential.kind is null', async done => {
+  test('should render CredentialChip', () => {
     template.summary_fields.credentials = [{ id: 1, name: 'cred', kind: null }];
     const wrapper = mountWithContexts(
       <JobTemplateDetail template={template} />
     );
-    const jobTemplateDetail = wrapper.find('JobTemplateDetail');
-    jobTemplateDetail.setState({
-      instanceGroups: mockInstanceGroups.data.results,
+    wrapper.find('JobTemplateDetail').setState({
+      instanceGroups: mockInstanceGroups,
       hasContentLoading: false,
       contentError: false,
     });
-    const cred = wrapper.find('strong.credential');
-    expect(cred.text()).toContain('Cloud:');
-    done();
+
+    const chip = wrapper.find('CredentialChip');
+    expect(chip).toHaveLength(1);
+    expect(chip.prop('credential')).toEqual(
+      template.summary_fields.credentials[0]
+    );
   });
 });

From 552164c25c6afaa4cc38f42e9d751639c35b0e46 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 11 Jul 2019 15:02:42 -0700
Subject: [PATCH 06/12] flush out more type defs; JobDetail tests

---
 .../src/components/Chip/CredentialChip.jsx    |  9 +--
 .../components/Chip/CredentialChip.test.jsx   |  4 ++
 .../src/screens/Job/JobDetail/JobDetail.jsx   |  6 +-
 .../screens/Job/JobDetail/JobDetail.test.jsx  | 52 +++++++++++++---
 awx/ui_next/src/screens/Job/constants.js      |  9 +++
 awx/ui_next/src/types.js                      | 59 ++++++++++++++++++-
 6 files changed, 120 insertions(+), 19 deletions(-)
 create mode 100644 awx/ui_next/src/screens/Job/constants.js

diff --git a/awx/ui_next/src/components/Chip/CredentialChip.jsx b/awx/ui_next/src/components/Chip/CredentialChip.jsx
index f10022f37c..3ecdefc729 100644
--- a/awx/ui_next/src/components/Chip/CredentialChip.jsx
+++ b/awx/ui_next/src/components/Chip/CredentialChip.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { shape, string, bool } from 'prop-types';
+import { shape } from 'prop-types';
 import { toTitleCase } from '@util/strings';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import Chip from './Chip';
+import { Credential } from '../../types';
 
 function CredentialChip ({ credential, i18n, ...props }) {
   let type;
@@ -23,11 +24,7 @@ function CredentialChip ({ credential, i18n, ...props }) {
   )
 }
 CredentialChip.propTypes = {
-  credential: shape({
-    cloud: bool,
-    kind: string,
-    name: string.isRequired,
-  }).isRequired,
+  credential: Credential.isRequired,
   i18n: shape({}).isRequired,
 };
 
diff --git a/awx/ui_next/src/components/Chip/CredentialChip.test.jsx b/awx/ui_next/src/components/Chip/CredentialChip.test.jsx
index 192208a0da..7bcdc3dcd6 100644
--- a/awx/ui_next/src/components/Chip/CredentialChip.test.jsx
+++ b/awx/ui_next/src/components/Chip/CredentialChip.test.jsx
@@ -5,6 +5,7 @@ import CredentialChip from './CredentialChip';
 describe('CredentialChip', () => {
   test('should render SSH kind', () => {
     const credential = {
+      id: 1,
       kind: 'ssh',
       name: 'foo',
     };
@@ -17,6 +18,7 @@ describe('CredentialChip', () => {
 
   test('should render AWS kind', () => {
     const credential = {
+      id: 1,
       kind: 'aws',
       name: 'foo',
     };
@@ -29,6 +31,7 @@ describe('CredentialChip', () => {
 
   test('should render with "Cloud"', () => {
     const credential = {
+      id: 1,
       cloud: true,
       kind: 'other',
       name: 'foo',
@@ -42,6 +45,7 @@ describe('CredentialChip', () => {
 
   test('should render with other kind', () => {
     const credential = {
+      id: 1,
       kind: 'other',
       name: 'foo',
     };
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index c5571d02b3..17eb3eeb89 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { shape } from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -9,6 +8,7 @@ import { DetailList, Detail } from '@components/DetailList';
 import { ChipGroup, Chip, CredentialChip } from '@components/Chip';
 import { VariablesInput } from '@components/CodeMirrorInput';
 import { toTitleCase } from '@util/strings';
+import { Job } from '../../../types';
 
 const ActionButtonWrapper = styled.div`
   display: flex;
@@ -105,7 +105,7 @@ function JobDetail({ job, i18n }) {
         {labels && labels.count > 0 && (
           <Detail
             fullWidth
-            label={i18n._(t`Credentials`)}
+            label={i18n._(t`Labels`)}
             value={
               <ChipGroup showOverflowAfter={5}>
                 {labels.results.map(l => (
@@ -150,7 +150,7 @@ function JobDetail({ job, i18n }) {
   );
 }
 JobDetail.propTypes = {
-  job: shape({}).isRequired,
+  job: Job.isRequired,
 };
 
 export default withI18n()(withRouter(JobDetail));
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
index e8eaef4344..161ec74d1f 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
@@ -1,22 +1,60 @@
 import React from 'react';
-
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
 import JobDetail from './JobDetail';
 
 describe('<JobDetail />', () => {
-  const mockDetails = {
-    name: 'Foo',
-  };
+  let job;
+
+  beforeEach(() => {
+    job = {
+      name: 'Foo',
+      summary_fields: {},
+    };
+  });
 
   test('initially renders succesfully', () => {
-    mountWithContexts(<JobDetail job={mockDetails} />);
+    mountWithContexts(<JobDetail job={job} />);
   });
 
   test('should display a Close button', () => {
-    const wrapper = mountWithContexts(<JobDetail job={mockDetails} />);
+    const wrapper = mountWithContexts(<JobDetail job={job} />);
 
     expect(wrapper.find('Button[aria-label="close"]').length).toBe(1);
     wrapper.unmount();
   });
+
+  test('should display details', () => {
+    job.status = 'Successful';
+    job.started = '2019-07-02T17:35:22.753817Z';
+    job.finished = '2019-07-02T17:35:34.910800Z';
+
+    const wrapper = mountWithContexts(<JobDetail job={job} />);
+    const details = wrapper.find('Detail');
+
+    function assertDetail(detail, label, value) {
+      expect(detail.prop('label')).toEqual(label);
+      expect(detail.prop('value')).toEqual(value);
+    }
+
+    assertDetail(details.at(0), 'Status', 'Successful');
+    assertDetail(details.at(1), 'Started', job.started);
+    assertDetail(details.at(2), 'Finished', job.finished);
+  });
+
+  test('should display credentials', () => {
+    job.summary_fields.credentials = [
+      {
+        id: 1,
+        name: 'Foo',
+        cloud: false,
+        kind: 'ssh',
+      },
+    ];
+    const wrapper = mountWithContexts(<JobDetail job={job} />);
+    const credentialChip = wrapper.find('CredentialChip');
+
+    expect(credentialChip.prop('credential')).toEqual(
+      job.summary_fields.credentials[0]
+    );
+  });
 });
diff --git a/awx/ui_next/src/screens/Job/constants.js b/awx/ui_next/src/screens/Job/constants.js
new file mode 100644
index 0000000000..12ebd316de
--- /dev/null
+++ b/awx/ui_next/src/screens/Job/constants.js
@@ -0,0 +1,9 @@
+/* eslint-disable-next-line import/prefer-default-export */
+export const JOB_TYPE_URLS = {
+  job: 'playbook',
+  project_update: 'project',
+  system_job: 'system',
+  inventory_update: 'inventory',
+  ad_hoc_command: 'command',
+  workflow_job: 'workflow',
+};
diff --git a/awx/ui_next/src/types.js b/awx/ui_next/src/types.js
index ada500bc0c..cedd942859 100644
--- a/awx/ui_next/src/types.js
+++ b/awx/ui_next/src/types.js
@@ -65,8 +65,61 @@ export const QSConfig = shape({
 export const JobTemplate = shape({
   name: string.isRequired,
   description: string,
-  inventory: oneOfType([number, string]).isRequired,
+  inventory: number,
   job_type: oneOf(['run', 'check']),
-  playbook: string.isRequired,
-  project: oneOfType([number, string]).isRequired,
+  playbook: string,
+  project: number,
+});
+
+export const Project = shape({
+  id: number.isRequired,
+  name: string.isRequired,
+});
+
+export const Inventory = shape({
+  id: number.isRequired,
+  name: string.isRequired,
+});
+
+export const InstanceGroup = shape({
+  id: number.isRequired,
+  name: string.isRequired,
+});
+
+export const Label = shape({
+  id: number.isRequired,
+  name: string.isRequired,
+});
+
+export const Credential = shape({
+  id: number.isRequired,
+  name: string.isRequired,
+  cloud: bool,
+  kind: string,
+});
+
+export const Job = shape({
+  status: string,
+  started: string,
+  finished: string,
+  job_type: string,
+  summary_fields: shape({
+    job_template: JobTemplate,
+    project: Project,
+    inventory: Inventory,
+    instance_group: InstanceGroup,
+    credentials: arrayOf(Credential),
+    labels: shape({
+      count: number,
+      results: arrayOf(Label),
+    }),
+  }),
+  scm_revision: string,
+  limit: oneOfType([number, string]),
+  verbosity: number,
+  execution_mode: string,
+  job_slice_number: number,
+  job_slice_count: number,
+  extra_vars: string,
+  artifacts: shape({}),
 });

From e3d67117e748d40bbd1e03c3252de31b2ba4a38a Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 11 Jul 2019 15:54:25 -0700
Subject: [PATCH 07/12] fix job detail breadcrumbs

---
 awx/ui_next/src/screens/Job/JobList/JobListItem.jsx | 11 +----------
 awx/ui_next/src/screens/Job/Jobs.jsx                | 10 +++++-----
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 58cf43a772..cf00612415 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -6,19 +6,10 @@ import {
   DataListItemCells,
   DataListCheck,
 } from '@patternfly/react-core';
-
 import DataListCell from '@components/DataListCell';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { toTitleCase } from '@util/strings';
-
-const JOB_TYPE_URLS = {
-  job: 'playbook',
-  project_update: 'project',
-  system_job: 'system',
-  inventory_update: 'inventory',
-  ad_hoc_command: 'command',
-  workflow_job: 'workflow',
-};
+import { JOB_TYPE_URLS } from '../constants';
 
 class JobListItem extends Component {
   render() {
diff --git a/awx/ui_next/src/screens/Job/Jobs.jsx b/awx/ui_next/src/screens/Job/Jobs.jsx
index a71bfeef71..b9d330b478 100644
--- a/awx/ui_next/src/screens/Job/Jobs.jsx
+++ b/awx/ui_next/src/screens/Job/Jobs.jsx
@@ -2,11 +2,10 @@ import React, { Component, Fragment } from 'react';
 import { Route, withRouter, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-
 import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
-
 import Job from './Job';
 import JobList from './JobList/JobList';
+import { JOB_TYPE_URLS } from './constants';
 
 class Jobs extends Component {
   constructor(props) {
@@ -28,11 +27,12 @@ class Jobs extends Component {
       return;
     }
 
+    const type =JOB_TYPE_URLS[job.type];
     const breadcrumbConfig = {
       '/jobs': i18n._(t`Jobs`),
-      [`/jobs/${job.id}`]: `${job.name}`,
-      [`/jobs/${job.id}/details`]: i18n._(t`Details`),
-      [`/jobs/${job.id}/output`]: i18n._(t`Output`),
+      [`/jobs/${type}/${job.id}`]: `${job.name}`,
+      [`/jobs/${type}/${job.id}/details`]: i18n._(t`Details`),
+      [`/jobs/${type}/${job.id}/output`]: i18n._(t`Output`),
     };
 
     this.setState({ breadcrumbConfig });

From 761ed6dec0185535c1ba1361e48ed3f3980dfa5c Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 11 Jul 2019 16:13:13 -0700
Subject: [PATCH 08/12] prettier

---
 awx/ui_next/src/api/models/Jobs.js            |  2 +-
 .../src/components/Chip/CredentialChip.jsx    |  4 +--
 .../src/components/DetailList/Detail.jsx      |  4 ++-
 .../src/screens/Job/JobList/JobListItem.jsx   | 25 ++++++++++---------
 awx/ui_next/src/screens/Job/Jobs.jsx          |  2 +-
 awx/ui_next/src/util/yaml.js                  |  6 +++--
 6 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/awx/ui_next/src/api/models/Jobs.js b/awx/ui_next/src/api/models/Jobs.js
index 60f08466dd..bd103c072a 100644
--- a/awx/ui_next/src/api/models/Jobs.js
+++ b/awx/ui_next/src/api/models/Jobs.js
@@ -15,7 +15,7 @@ class Jobs extends Base {
     this.baseUrl = '/api/v2/jobs/';
   }
 
-  readDetail (id, type) {
+  readDetail(id, type) {
     return this.http.get(`/api/v2${BASE_URLS[type]}${id}/`);
   }
 }
diff --git a/awx/ui_next/src/components/Chip/CredentialChip.jsx b/awx/ui_next/src/components/Chip/CredentialChip.jsx
index 3ecdefc729..1e806a0c01 100644
--- a/awx/ui_next/src/components/Chip/CredentialChip.jsx
+++ b/awx/ui_next/src/components/Chip/CredentialChip.jsx
@@ -6,7 +6,7 @@ import { t } from '@lingui/macro';
 import Chip from './Chip';
 import { Credential } from '../../types';
 
-function CredentialChip ({ credential, i18n, ...props }) {
+function CredentialChip({ credential, i18n, ...props }) {
   let type;
   if (credential.cloud) {
     type = i18n._(t`Cloud`);
@@ -21,7 +21,7 @@ function CredentialChip ({ credential, i18n, ...props }) {
       <strong>{type}: </strong>
       {credential.name}
     </Chip>
-  )
+  );
 }
 CredentialChip.propTypes = {
   credential: Credential.isRequired,
diff --git a/awx/ui_next/src/components/DetailList/Detail.jsx b/awx/ui_next/src/components/DetailList/Detail.jsx
index 761fd6aa94..ef13ac0aa6 100644
--- a/awx/ui_next/src/components/DetailList/Detail.jsx
+++ b/awx/ui_next/src/components/DetailList/Detail.jsx
@@ -26,7 +26,9 @@ const DetailValue = styled(({ fullWidth, ...props }) => (
 `;
 
 const Detail = ({ label, value, fullWidth }) => {
-  if (!value && typeof value !== 'number') { return null; }
+  if (!value && typeof value !== 'number') {
+    return null;
+  }
   return (
     <Fragment>
       <DetailName component={TextListItemVariants.dt} fullWidth={fullWidth}>
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index cf00612415..1a3ffe42eb 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -27,18 +27,19 @@ class JobListItem extends Component {
             onChange={onSelect}
             aria-labelledby={`check-action-${job.id}`}
           />
-          <DataListItemCells dataListCells={[
-            <DataListCell key="divider">
-              <VerticalSeparator />
-              <span>
-                <Link to={`/jobs/${JOB_TYPE_URLS[job.type]}/${job.id}`}>
-                  <b>{job.name}</b>
-                </Link>
-              </span>
-            </DataListCell>,
-            <DataListCell key="type">{toTitleCase(job.type)}</DataListCell>,
-            <DataListCell key="finished">{job.finished}</DataListCell>,
-          ]}
+          <DataListItemCells
+            dataListCells={[
+              <DataListCell key="divider">
+                <VerticalSeparator />
+                <span>
+                  <Link to={`/jobs/${JOB_TYPE_URLS[job.type]}/${job.id}`}>
+                    <b>{job.name}</b>
+                  </Link>
+                </span>
+              </DataListCell>,
+              <DataListCell key="type">{toTitleCase(job.type)}</DataListCell>,
+              <DataListCell key="finished">{job.finished}</DataListCell>,
+            ]}
           />
         </DataListItemRow>
       </DataListItem>
diff --git a/awx/ui_next/src/screens/Job/Jobs.jsx b/awx/ui_next/src/screens/Job/Jobs.jsx
index b9d330b478..8ddb383f61 100644
--- a/awx/ui_next/src/screens/Job/Jobs.jsx
+++ b/awx/ui_next/src/screens/Job/Jobs.jsx
@@ -27,7 +27,7 @@ class Jobs extends Component {
       return;
     }
 
-    const type =JOB_TYPE_URLS[job.type];
+    const type = JOB_TYPE_URLS[job.type];
     const breadcrumbConfig = {
       '/jobs': i18n._(t`Jobs`),
       [`/jobs/${type}/${job.id}`]: `${job.name}`,
diff --git a/awx/ui_next/src/util/yaml.js b/awx/ui_next/src/util/yaml.js
index 27b99d0b63..e4e6cd71b3 100644
--- a/awx/ui_next/src/util/yaml.js
+++ b/awx/ui_next/src/util/yaml.js
@@ -22,8 +22,10 @@ export function jsonToYaml(jsonString) {
   return yaml.safeDump(value);
 }
 
-export function isJson (jsonString) {
-  if (typeof jsonString !== 'string') { return false; }
+export function isJson(jsonString) {
+  if (typeof jsonString !== 'string') {
+    return false;
+  }
   let value;
   try {
     value = JSON.parse(jsonString);

From db4a964e6426c36a10a419cd155a4b899d599384 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Mon, 15 Jul 2019 14:41:58 -0700
Subject: [PATCH 09/12] run credential type through i18n

---
 awx/ui_next/src/components/Chip/CredentialChip.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/Chip/CredentialChip.jsx b/awx/ui_next/src/components/Chip/CredentialChip.jsx
index 1e806a0c01..4919f7b9da 100644
--- a/awx/ui_next/src/components/Chip/CredentialChip.jsx
+++ b/awx/ui_next/src/components/Chip/CredentialChip.jsx
@@ -13,7 +13,7 @@ function CredentialChip({ credential, i18n, ...props }) {
   } else if (credential.kind === 'aws' || credential.kind === 'ssh') {
     type = credential.kind.toUpperCase();
   } else {
-    type = toTitleCase(credential.kind);
+    type = i18n._(toTitleCase(credential.kind));
   }
 
   return (

From 183bd4fa805b49f864d16694cb42e0d7c30d0e6f Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Mon, 15 Jul 2019 15:20:05 -0700
Subject: [PATCH 10/12] revert i18n on credential kind (API translates it)

---
 awx/ui_next/src/components/Chip/CredentialChip.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/Chip/CredentialChip.jsx b/awx/ui_next/src/components/Chip/CredentialChip.jsx
index 4919f7b9da..1e806a0c01 100644
--- a/awx/ui_next/src/components/Chip/CredentialChip.jsx
+++ b/awx/ui_next/src/components/Chip/CredentialChip.jsx
@@ -13,7 +13,7 @@ function CredentialChip({ credential, i18n, ...props }) {
   } else if (credential.kind === 'aws' || credential.kind === 'ssh') {
     type = credential.kind.toUpperCase();
   } else {
-    type = i18n._(toTitleCase(credential.kind));
+    type = toTitleCase(credential.kind);
   }
 
   return (

From 2f9be4796a6b6a19d8c27754f444fb68b6c605d1 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Tue, 16 Jul 2019 11:59:01 -0700
Subject: [PATCH 11/12] job detail style tweaks

---
 .../CodeMirrorInput/CodeMirrorInput.jsx       | 34 +++++++++++++++++--
 .../CodeMirrorInput/VariablesInput.jsx        |  8 +++--
 .../src/components/DetailList/DetailList.jsx  |  1 +
 .../src/screens/Job/JobDetail/JobDetail.jsx   | 26 +++++++++-----
 4 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
index 06596aa8a9..6513322f66 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
+++ b/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}
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
index bcfee592a3..76476ea92b 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/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}
diff --git a/awx/ui_next/src/components/DetailList/DetailList.jsx b/awx/ui_next/src/components/DetailList/DetailList.jsx
index 593fb9eea6..11d55474b3 100644
--- a/awx/ui_next/src/components/DetailList/DetailList.jsx
+++ b/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
       ? `
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 17eb3eeb89..51e62c6342 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/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"

From 0d7500d349133f500e2728aba3040cf14107bf35 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 17 Jul 2019 16:12:00 -0700
Subject: [PATCH 12/12] use unified jobs api to redirect to canonical url from
 /jobs/:id

---
 awx/ui_next/src/screens/Job/Job.jsx           | 20 ++++++-
 .../src/screens/Job/JobList/JobListItem.jsx   |  6 ++-
 .../src/screens/Job/JobTypeRedirect.jsx       | 52 +++++++++++++++++++
 awx/ui_next/src/screens/Job/Jobs.jsx          | 23 +++++++-
 awx/ui_next/src/screens/Job/constants.js      |  2 +-
 .../OrganizationAccessItem.test.jsx.snap      | 20 +++----
 6 files changed, 107 insertions(+), 16 deletions(-)
 create mode 100644 awx/ui_next/src/screens/Job/JobTypeRedirect.jsx

diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx
index 5d21eafd30..0352a7b260 100644
--- a/awx/ui_next/src/screens/Job/Job.jsx
+++ b/awx/ui_next/src/screens/Job/Job.jsx
@@ -15,6 +15,7 @@ import RoutedTabs from '@components/RoutedTabs';
 
 import JobDetail from './JobDetail';
 import JobOutput from './JobOutput';
+import { JOB_TYPE_URL_SEGMENTS } from './constants';
 
 class Job extends Component {
   constructor(props) {
@@ -59,9 +60,13 @@ class Job extends Component {
   }
 
   render() {
-    const { history, match, i18n } = this.props;
+    const { history, match, i18n, lookup } = this.props;
 
     const { job, contentError, hasContentLoading, isInitialized } = this.state;
+    let jobType;
+    if (job) {
+      jobType = JOB_TYPE_URL_SEGMENTS[job.type];
+    }
 
     const tabsArray = [
       { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
@@ -100,6 +105,19 @@ class Job extends Component {
       );
     }
 
+    if (lookup && job) {
+      return (
+        <Switch>
+          <Redirect from="jobs/:id" to={`/jobs/${jobType}/:id/details`} />
+          <Redirect
+            from="jobs/:id/details"
+            to={`/jobs/${jobType}/:id/details`}
+          />
+          <Redirect from="jobs/:id/output" to={`/jobs/${jobType}/:id/output`} />
+        </Switch>
+      );
+    }
+
     return (
       <PageSection>
         <Card>
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 1a3ffe42eb..7cfc4dd5ac 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -9,7 +9,7 @@ import {
 import DataListCell from '@components/DataListCell';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { toTitleCase } from '@util/strings';
-import { JOB_TYPE_URLS } from '../constants';
+import { JOB_TYPE_URL_SEGMENTS } from '../constants';
 
 class JobListItem extends Component {
   render() {
@@ -32,7 +32,9 @@ class JobListItem extends Component {
               <DataListCell key="divider">
                 <VerticalSeparator />
                 <span>
-                  <Link to={`/jobs/${JOB_TYPE_URLS[job.type]}/${job.id}`}>
+                  <Link
+                    to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}
+                  >
                     <b>{job.name}</b>
                   </Link>
                 </span>
diff --git a/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx b/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx
new file mode 100644
index 0000000000..87738c6ce8
--- /dev/null
+++ b/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
+import { UnifiedJobsAPI } from '@api';
+import { JOB_TYPE_URL_SEGMENTS } from './constants';
+
+class JobTypeRedirect extends Component {
+  static defaultProps = {
+    view: 'details',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hasError: false,
+      job: null,
+    };
+    this.loadJob = this.loadJob.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadJob();
+  }
+
+  async loadJob() {
+    const { id } = this.props;
+    try {
+      const { data } = await UnifiedJobsAPI.read({ id });
+      this.setState({
+        job: data.results[0],
+      });
+    } catch (err) {
+      this.setState({ hasError: true });
+    }
+  }
+
+  render() {
+    const { path, view } = this.props;
+    const { hasError, job } = this.state;
+
+    if (hasError) {
+      return <div>Error</div>;
+    }
+    if (!job) {
+      return <div>Loading...</div>;
+    }
+    const type = JOB_TYPE_URL_SEGMENTS[job.type];
+    return <Redirect from={path} to={`/jobs/${type}/${job.id}/${view}`} />;
+  }
+}
+
+export default JobTypeRedirect;
diff --git a/awx/ui_next/src/screens/Job/Jobs.jsx b/awx/ui_next/src/screens/Job/Jobs.jsx
index 8ddb383f61..9279a9f511 100644
--- a/awx/ui_next/src/screens/Job/Jobs.jsx
+++ b/awx/ui_next/src/screens/Job/Jobs.jsx
@@ -4,8 +4,9 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
 import Job from './Job';
+import JobTypeRedirect from './JobTypeRedirect';
 import JobList from './JobList/JobList';
-import { JOB_TYPE_URLS } from './constants';
+import { JOB_TYPE_URL_SEGMENTS } from './constants';
 
 class Jobs extends Component {
   constructor(props) {
@@ -27,7 +28,7 @@ class Jobs extends Component {
       return;
     }
 
-    const type = JOB_TYPE_URLS[job.type];
+    const type = JOB_TYPE_URL_SEGMENTS[job.type];
     const breadcrumbConfig = {
       '/jobs': i18n._(t`Jobs`),
       [`/jobs/${type}/${job.id}`]: `${job.name}`,
@@ -57,6 +58,18 @@ class Jobs extends Component {
               />
             )}
           />
+          <Route
+            path={`${match.path}/:id/details`}
+            render={({ match: m }) => (
+              <JobTypeRedirect id={m.params.id} path={m.path} view="details" />
+            )}
+          />
+          <Route
+            path={`${match.path}/:id/output`}
+            render={({ match: m }) => (
+              <JobTypeRedirect id={m.params.id} path={m.path} view="output" />
+            )}
+          />
           <Route
             path={`${match.path}/:type/:id`}
             render={() => (
@@ -67,6 +80,12 @@ class Jobs extends Component {
               />
             )}
           />
+          <Route
+            path={`${match.path}/:id`}
+            render={({ match: m }) => (
+              <JobTypeRedirect id={m.params.id} path={m.path} />
+            )}
+          />
         </Switch>
       </Fragment>
     );
diff --git a/awx/ui_next/src/screens/Job/constants.js b/awx/ui_next/src/screens/Job/constants.js
index 12ebd316de..b7fa1fc83e 100644
--- a/awx/ui_next/src/screens/Job/constants.js
+++ b/awx/ui_next/src/screens/Job/constants.js
@@ -1,5 +1,5 @@
 /* eslint-disable-next-line import/prefer-default-export */
-export const JOB_TYPE_URLS = {
+export const JOB_TYPE_URL_SEGMENTS = {
   job: 'playbook',
   project_update: 'project',
   system_job: 'system',
diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap b/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap
index 5d523bfb30..c1b9903e68 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap
+++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccessItem.test.jsx.snap
@@ -377,9 +377,9 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                               "componentStyle": ComponentStyle {
                                 "componentId": "DetailList-sc-12g7m4-0",
                                 "isStatic": false,
-                                "lastClassName": "hndBXy",
+                                "lastClassName": "gmERnX",
                                 "rules": Array [
-                                  "display:grid;grid-gap:20px;",
+                                  "display:grid;grid-gap:20px;align-items:baseline;",
                                   [Function],
                                 ],
                               },
@@ -397,15 +397,15 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                           stacked={true}
                         >
                           <DetailList
-                            className="DetailList-sc-12g7m4-0 hndBXy"
+                            className="DetailList-sc-12g7m4-0 gmERnX"
                             stacked={true}
                           >
                             <TextList
-                              className="DetailList-sc-12g7m4-0 hndBXy"
+                              className="DetailList-sc-12g7m4-0 gmERnX"
                               component="dl"
                             >
                               <dl
-                                className="DetailList-sc-12g7m4-0 hndBXy"
+                                className="DetailList-sc-12g7m4-0 gmERnX"
                                 data-pf-content={true}
                               >
                                 <Detail
@@ -545,9 +545,9 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                               "componentStyle": ComponentStyle {
                                 "componentId": "DetailList-sc-12g7m4-0",
                                 "isStatic": false,
-                                "lastClassName": "hndBXy",
+                                "lastClassName": "gmERnX",
                                 "rules": Array [
-                                  "display:grid;grid-gap:20px;",
+                                  "display:grid;grid-gap:20px;align-items:baseline;",
                                   [Function],
                                 ],
                               },
@@ -565,15 +565,15 @@ exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
                           stacked={true}
                         >
                           <DetailList
-                            className="DetailList-sc-12g7m4-0 hndBXy"
+                            className="DetailList-sc-12g7m4-0 gmERnX"
                             stacked={true}
                           >
                             <TextList
-                              className="DetailList-sc-12g7m4-0 hndBXy"
+                              className="DetailList-sc-12g7m4-0 gmERnX"
                               component="dl"
                             >
                               <dl
-                                className="DetailList-sc-12g7m4-0 hndBXy"
+                                className="DetailList-sc-12g7m4-0 gmERnX"
                                 data-pf-content={true}
                               >
                                 <Detail