Add webhook fields to wf node job template detail

awx/ui_next/src/components/PromptDetail/PromptDetail.jsx

@@ -8,6 +8,7 @@ import { toTitleCase } from '@util/strings';
 
 import { Chip, ChipGroup } from '@patternfly/react-core';
 import { VariablesDetail } from '@components/CodeMirrorInput';
+import CredentialChip from '@components/CredentialChip';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 
 import PromptProjectDetail from './PromptProjectDetail';
@@ -172,7 +173,6 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) {
           />
         )}
 
-        {/* TODO: Add JT, WFJT, Inventory Source Details */}
         {details?.type === 'project' && (
           <PromptProjectDetail resource={details} />
         )}
@@ -211,14 +211,16 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) {
             {overrides?.credentials && (
               <Detail
                 fullWidth
-                label={i18n._(t`Credential`)}
+                label={i18n._(t`Credentials`)}
                 rows={4}
                 value={
                   <ChipGroup numChips={5}>
                     {overrides.credentials.map(cred => (
-                      <Chip key={cred.id} isReadOnly>
-                        {cred.name}
-                      </Chip>
+                      <CredentialChip
+                        key={cred.id}
+                        credential={cred}
+                        isReadOnly
+                      />
                     ))}
                   </ChipGroup>
                 }

awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx

@@ -24,12 +24,14 @@ function PromptJobTemplateDetail({ i18n, resource }) {
     job_type,
     limit,
     playbook,
+    related,
     scm_branch,
     skip_tags,
     summary_fields,
-    url,
     use_fact_cache,
     verbosity,
+    webhook_key,
+    webhook_service,
   } = resource;
 
   const VERBOSITY = {
@@ -114,23 +116,49 @@ function PromptJobTemplateDetail({ i18n, resource }) {
         value={diff_mode ? 'On' : 'Off'}
       />
       <Detail label={i18n._(t` Job Slicing`)} value={job_slice_count} />
-      {host_config_key && (
-        <React.Fragment>
-          <Detail label={i18n._(t`Host Config Key`)} value={host_config_key} />
-          <Detail
-            label={i18n._(t`Provisioning Callback URL`)}
-            value={`${window.location.origin + url}callback/`}
-          />
-        </React.Fragment>
+      <Detail label={i18n._(t`Host Config Key`)} value={host_config_key} />
+      {related?.callback && (
+        <Detail
+          label={i18n._(t`Provisioning Callback URL`)}
+          value={`${window.location.origin}${related.callback}`}
+        />
+      )}
+      <Detail
+        label={i18n._(t`Webhook Service`)}
+        value={toTitleCase(webhook_service)}
+      />
+      {related.webhook_receiver && (
+        <Detail
+          label={i18n._(t`Webhook URL`)}
+          value={`${window.location.origin}${related.webhook_receiver}`}
+        />
+      )}
+      <Detail label={i18n._(t`Webhook Key`)} value={webhook_key} />
+      {summary_fields?.webhook_credential && (
+        <Detail
+          fullWidth
+          label={i18n._(t`Webhook Credential`)}
+          value={
+            <CredentialChip
+              key={summary_fields.webhook_credential?.id}
+              credential={summary_fields.webhook_credential}
+              isReadOnly
+            />
+          }
+        />
       )}
       {optionsList && <Detail label={i18n._(t`Options`)} value={optionsList} />}
       {summary_fields?.credentials?.length > 0 && (
         <Detail
           fullWidth
           label={i18n._(t`Credentials`)}
-          value={summary_fields.credentials.map(chip => (
-            <CredentialChip key={chip.id} credential={chip} isReadOnly />
-          ))}
+          value={
+            <ChipGroup numChips={5}>
+              {summary_fields.credentials.map(cred => (
+                <CredentialChip key={cred.id} credential={cred} isReadOnly />
+              ))}
+            </ChipGroup>
+          }
         />
       )}
       {summary_fields?.labels?.results?.length > 0 && (

awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.test.jsx

@@ -5,6 +5,7 @@ import mockData from './data.job_template.json';
 
 const mockJT = {
   ...mockData,
+  webhook_key: 'PiM3n2',
   instance_groups: [
     {
       id: 1,
@@ -49,9 +50,24 @@ describe('PromptJobTemplateDetail', () => {
     assertDetail('Show Changes', 'Off');
     assertDetail('Job Slicing', '1');
     assertDetail('Host Config Key', 'a1b2c3');
+    assertDetail('Webhook Service', 'Github');
+    assertDetail('Webhook Key', 'PiM3n2');
+    expect(wrapper.find('StatusIcon')).toHaveLength(2);
+    expect(wrapper.find('Detail[label="Webhook URL"] dd').text()).toEqual(
+      expect.stringContaining('/api/v2/job_templates/7/github/')
+    );
     expect(
       wrapper.find('Detail[label="Provisioning Callback URL"] dd').text()
     ).toEqual(expect.stringContaining('/api/v2/job_templates/7/callback/'));
+    expect(
+      wrapper
+        .find('Detail[label="Webhook Credential"]')
+        .containsAllMatchingElements([
+          <span>
+            <strong>Github Token:</strong>GitHub Cred
+          </span>,
+        ])
+    ).toEqual(true);
     expect(
       wrapper.find('Detail[label="Credentials"]').containsAllMatchingElements([
         <span>

awx/ui_next/src/components/PromptDetail/data.job_template.json

@@ -16,6 +16,8 @@
       "schedules": "/api/v2/job_templates/7/schedules/",
       "activity_stream": "/api/v2/job_templates/7/activity_stream/",
       "launch": "/api/v2/job_templates/7/launch/",
+      "webhook_key": "/api/v2/job_templates/7/webhook_key/",
+      "webhook_receiver": "/api/v2/job_templates/7/github/",
       "notification_templates_started": "/api/v2/job_templates/7/notification_templates_started/",
       "notification_templates_success": "/api/v2/job_templates/7/notification_templates_success/",
       "notification_templates_error": "/api/v2/job_templates/7/notification_templates_error/",
@@ -24,7 +26,9 @@
       "object_roles": "/api/v2/job_templates/7/object_roles/",
       "instance_groups": "/api/v2/job_templates/7/instance_groups/",
       "slice_workflow_jobs": "/api/v2/job_templates/7/slice_workflow_jobs/",
-      "copy": "/api/v2/job_templates/7/copy/"
+      "copy": "/api/v2/job_templates/7/copy/",
+      "callback": "/api/v2/job_templates/7/callback/",
+      "webhook_credential": "/api/v2/credentials/8/"
   },
   "summary_fields": {
       "inventory": {
@@ -64,6 +68,14 @@
           "status": "successful",
           "failed": false
       },
+      "webhook_credential": {
+          "id": 8,
+          "name": "GitHub Cred",
+          "description": "",
+          "kind": "github_token",
+          "cloud": false,
+          "credential_type_id": 12
+      },
       "created_by": {
           "id": 1,
           "username": "admin",
@@ -123,6 +135,12 @@
               "status": "successful",
               "finished": "2019-10-01T14:34:35.142483Z",
               "type": "job"
+          },
+          {
+              "id": 13,
+              "status": "successful",
+              "finished": "2019-10-01T14:34:35.142483Z",
+              "type": "job"
           }
       ],
       "extra_credentials": [],
@@ -174,5 +192,7 @@
   "diff_mode": false,
   "allow_simultaneous": true,
   "custom_virtualenv": null,
-  "job_slice_count": 1
+  "job_slice_count": 1,
+  "webhook_service": "github",
+  "webhook_credential": 8
 }