Show job and skip tags on job detail view

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

@@ -281,6 +281,42 @@ function JobDetail({ job, i18n }) {
             }
           />
         )}
+        {job.job_tags && job.job_tags.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Job Tags`)}
+            value={
+              <ChipGroup
+                numChips={5}
+                totalChips={job.job_tags.split(',').length}
+              >
+                {job.job_tags.split(',').map(jobTag => (
+                  <Chip key={jobTag} isReadOnly>
+                    {jobTag}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
+        {job.skip_tags && job.skip_tags.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Skip Tags`)}
+            value={
+              <ChipGroup
+                numChips={5}
+                totalChips={job.skip_tags.split(',').length}
+              >
+                {job.skip_tags.split(',').map(skipTag => (
+                  <Chip key={skipTag} isReadOnly>
+                    {skipTag}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
         <UserDateDetail
           label={i18n._(t`Created`)}
           date={job.created}

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

@@ -77,6 +77,18 @@ describe('<JobDetail />', () => {
       mockJobData.summary_fields.credentials[0]
     );
 
+    expect(
+      wrapper
+        .find('Detail[label="Job Tags"]')
+        .containsAnyMatchingElements([<span>a</span>, <span>b</span>])
+    ).toEqual(true);
+
+    expect(
+      wrapper
+        .find('Detail[label="Skip Tags"]')
+        .containsAnyMatchingElements([<span>c</span>, <span>d</span>])
+    ).toEqual(true);
+
     const statusDetail = wrapper.find('Detail[label="Status"]');
     expect(statusDetail.find('StatusIcon SuccessfulTop')).toHaveLength(1);
     expect(statusDetail.find('StatusIcon SuccessfulBottom')).toHaveLength(1);

awx/ui_next/src/screens/Job/shared/data.job.json

@@ -101,9 +101,9 @@
   "limit": "",
   "verbosity": 0,
   "extra_vars": "{\"num_messages\": 94}",
-  "job_tags": "",
+  "job_tags": "a,b",
   "force_handlers": false,
-  "skip_tags": "",
+  "skip_tags": "c,d",
   "start_at_task": "",
   "timeout": 0,
   "use_fact_cache": false,