Merge pull request #8655 from mabashian/8606-adhoc-detail-cred

Display machine credential in job details when present

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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,20 @@ function JobDetail({ job, i18n }) {
               value={`${job.job_slice_number}/${job.job_slice_count}`}
             />
           )}
+        {credential && (
+          <Detail
+            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

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');
-  });
+    assertDetail('Machine Credential', 'SSH: Machine cred');
-
-  test('should display credentials', () => {
-    const credentialChip = wrapper.find('CredentialChip');
 
+    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 projectStatusDetail = wrapper.find('Detail[label="Project"]');
-    const statusDetail = wrapper.find('Detail[label="Project"]');
+    expect(projectStatusDetail.find('StatusIcon SuccessfulTop')).toHaveLength(
-    expect(statusDetail.find('StatusIcon SuccessfulTop')).toHaveLength(1);
+      1
-    expect(statusDetail.find('StatusIcon SuccessfulBottom')).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 };
+    wrapper = mountWithContexts(
-    newMockJobData.summary_fields.inventory = null;
+      <JobDetail
-    newMockJobData.summary_fields.project = null;
+        job={{
-    const newWrapper = mountWithContexts(
+          ...mockJobData,
-      <JobDetail job={newMockJobData} />
+          summary_fields: {
-    ).find('JobDetail');
+            ...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(detail.find(`Detail[label="${label}"] dt`).text()).toBe(label);
-      expect(newWrapper.find(`Detail[label="${label}"] dd`).text()).toBe(
+      expect(detail.find(`Detail[label="${label}"] dd`).text()).toBe('DELETED');
-        'DELETED'
-      );
     }
     assertMissingDetail('Project');
     assertMissingDetail('Inventory');