From 81bccc1c7ffe0b84b991255708120c4c2309f2b9 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 23 Nov 2020 11:41:07 -0500
Subject: [PATCH 1/2] Display machine credential in job details when present

---
 .../src/screens/Job/JobDetail/JobDetail.jsx   | 16 ++++
 .../screens/Job/JobDetail/JobDetail.test.jsx  | 79 ++++++++++++-------
 2 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 96c0794d35..7ad239658c 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -80,6 +80,7 @@ const getLaunchedByDetails = ({ summary_fields = {}, related = {} }) => {
 
 function JobDetail({ job, i18n }) {
   const {
+    credential,
     credentials,
     instance_group: instanceGroup,
     inventory,
@@ -237,6 +238,21 @@ function JobDetail({ job, i18n }) {
               value={`${job.job_slice_number}/${job.job_slice_count}`}
             />
           )}
+        {credential && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Machine Credential`)}
+            value={
+              <ChipGroup numChips={5} totalChips={1}>
+                <CredentialChip
+                  key={credential.id}
+                  credential={credential}
+                  isReadOnly
+                />
+              </ChipGroup>
+            }
+          />
+        )}
         {credentials && credentials.length > 0 && (
           <Detail
             fullWidth
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 729d043686..4324e30924 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
@@ -10,17 +10,9 @@ jest.mock('../../../api');
 
 describe('<JobDetail />', () => {
   let wrapper;
-  beforeEach(() => {
-    wrapper = mountWithContexts(<JobDetail job={mockJobData} />);
-  });
   afterEach(() => {
     wrapper.unmount();
   });
-  test('initially renders succesfully', () => {
-    wrapper = mountWithContexts(<JobDetail job={mockJobData} />);
-
-    expect(wrapper.length).toBe(1);
-  });
 
   test('should display details', () => {
     function assertDetail(label, value) {
@@ -28,6 +20,26 @@ describe('<JobDetail />', () => {
       expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
     }
 
+    wrapper = mountWithContexts(
+      <JobDetail
+        job={{
+          ...mockJobData,
+          summary_fields: {
+            ...mockJobData.summary_fields,
+            credential: {
+              id: 2,
+              name: 'Machine cred',
+              description: '',
+              kind: 'ssh',
+              cloud: false,
+              kubernetes: false,
+              credential_type_id: 1,
+            },
+          },
+        }}
+      />
+    );
+
     // StatusIcon adds visibly hidden accessibility text " successful "
     assertDetail('Status', ' successful Successful');
     assertDetail('Started', '8/8/2019, 7:24:18 PM');
@@ -51,29 +63,30 @@ describe('<JobDetail />', () => {
     );
     assertDetail('Job Slice', '0/1');
     assertDetail('Credentials', 'SSH: Demo Credential');
-  });
-
-  test('should display credentials', () => {
-    const credentialChip = wrapper.find('CredentialChip');
+    assertDetail('Machine Credential', 'SSH: Machine cred');
 
+    const credentialChip = wrapper.find(
+      `Detail[label="Credentials"] CredentialChip`
+    );
     expect(credentialChip.prop('credential')).toEqual(
       mockJobData.summary_fields.credentials[0]
     );
-  });
 
-  test('should display successful job status icon', () => {
     const statusDetail = wrapper.find('Detail[label="Status"]');
     expect(statusDetail.find('StatusIcon SuccessfulTop')).toHaveLength(1);
     expect(statusDetail.find('StatusIcon SuccessfulBottom')).toHaveLength(1);
-  });
 
-  test('should display successful project status icon', () => {
-    const statusDetail = wrapper.find('Detail[label="Project"]');
-    expect(statusDetail.find('StatusIcon SuccessfulTop')).toHaveLength(1);
-    expect(statusDetail.find('StatusIcon SuccessfulBottom')).toHaveLength(1);
+    const projectStatusDetail = wrapper.find('Detail[label="Project"]');
+    expect(projectStatusDetail.find('StatusIcon SuccessfulTop')).toHaveLength(
+      1
+    );
+    expect(
+      projectStatusDetail.find('StatusIcon SuccessfulBottom')
+    ).toHaveLength(1);
   });
 
   test('should properly delete job', async () => {
+    wrapper = mountWithContexts(<JobDetail job={mockJobData} />);
     wrapper.find('button[aria-label="Delete"]').simulate('click');
     await sleep(1);
     wrapper.update();
@@ -96,6 +109,7 @@ describe('<JobDetail />', () => {
         },
       })
     );
+    wrapper = mountWithContexts(<JobDetail job={mockJobData} />);
     wrapper.find('button[aria-label="Delete"]').simulate('click');
     const modal = wrapper.find('Modal');
     expect(modal.length).toBe(1);
@@ -109,19 +123,24 @@ describe('<JobDetail />', () => {
   });
 
   test('DELETED is shown for required Job resources that have been deleted', () => {
-    const newMockJobData = { ...mockJobData };
-    newMockJobData.summary_fields.inventory = null;
-    newMockJobData.summary_fields.project = null;
-    const newWrapper = mountWithContexts(
-      <JobDetail job={newMockJobData} />
-    ).find('JobDetail');
+    wrapper = mountWithContexts(
+      <JobDetail
+        job={{
+          ...mockJobData,
+          summary_fields: {
+            ...mockJobData.summary_fields,
+            inventory: null,
+            project: null,
+          },
+        }}
+      />
+    );
+    const detail = wrapper.find('JobDetail');
     async function assertMissingDetail(label) {
-      expect(newWrapper.length).toBe(1);
+      expect(detail.length).toBe(1);
       await sleep(0);
-      expect(newWrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
-      expect(newWrapper.find(`Detail[label="${label}"] dd`).text()).toBe(
-        'DELETED'
-      );
+      expect(detail.find(`Detail[label="${label}"] dt`).text()).toBe(label);
+      expect(detail.find(`Detail[label="${label}"] dd`).text()).toBe('DELETED');
     }
     assertMissingDetail('Project');
     assertMissingDetail('Inventory');

From f81f6cf1142991be8861c89c411cfc9880caf3a0 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 23 Nov 2020 11:45:59 -0500
Subject: [PATCH 2/2] Remove fullWidth prop from machine credential detail
 field as it's not needed

---
 awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 7ad239658c..4c1dedacee 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -240,7 +240,6 @@ function JobDetail({ job, i18n }) {
           )}
         {credential && (
           <Detail
-            fullWidth
             label={i18n._(t`Machine Credential`)}
             value={
               <ChipGroup numChips={5} totalChips={1}>