Surface an error when the webhook credential type lookup returns nothing

awx/ui/src/screens/Template/shared/WebhookSubForm.js

@@ -4,6 +4,7 @@ import { useParams, useLocation } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 
 import {
+  Alert,
   FormGroup,
   TextInput,
   InputGroup,
@@ -55,8 +56,6 @@ function WebhookSubForm({ templateType }) {
         results = await CredentialTypesAPI.read({
           namespace: `${webhookServiceField.value}_token`,
         });
-        // TODO: Consider how to handle the situation where the results returns
-        // and empty array, or any of the other values is undefined or null (data, results, id)
       }
       return results?.data?.results[0]?.id;
     }, [webhookServiceField.value])
@@ -122,7 +121,7 @@ function WebhookSubForm({ templateType }) {
   ];
 
   if (error || webhookKeyError) {
-    return <ContentError error={error} />;
+    return <ContentError error={error || webhookKeyError} />;
   }
   if (isLoading) {
     return <ContentLoading />;
@@ -213,6 +212,14 @@ function WebhookSubForm({ templateType }) {
           fieldName="webhook_credential"
         />
       )}
+      {!credTypeId && !isLoading && webhookServiceField.value && (
+        <Alert
+          variant="warning"
+          isInline
+          ouiaId="webhook-credential-type-missing"
+          title={t`Unable to look up the credential type for this webhook service, so the webhook credential field is unavailable.`}
+        />
+      )}
     </FormColumnLayout>
   );
 }

awx/ui/src/screens/Template/shared/WebhookSubForm.test.js

@@ -4,7 +4,7 @@ import { Route } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 
 import { Formik } from 'formik';
-import { CredentialsAPI } from 'api';
+import { CredentialsAPI, CredentialTypesAPI } from 'api';
 import {
   mountWithContexts,
   waitForElement,
@@ -159,4 +159,75 @@ describe('<WebhookSubForm />', () => {
       newWrapper.find('TextInputBase[aria-label="Webhook URL"]').prop('value')
     ).toContain(webhook_url);
   });
+
+  test('should render credential lookup when the credential type resolves', async () => {
+    CredentialTypesAPI.read.mockResolvedValue({
+      data: { results: [{ id: 9, name: 'GitHub Personal Access Token' }] },
+    });
+    CredentialsAPI.read.mockResolvedValue({
+      data: { results: [{ id: 12, name: 'Github credential' }], count: 1 },
+    });
+    CredentialsAPI.readOptions.mockResolvedValue({
+      data: {
+        actions: { GET: {}, POST: {} },
+        related_search_fields: [],
+      },
+    });
+    let newWrapper;
+    await act(async () => {
+      newWrapper = mountWithContexts(
+        <Route path="templates/:templateType/:id/edit">
+          <Formik initialValues={initialValues}>
+            <WebhookSubForm templateType="job_template" />
+          </Formik>
+        </Route>,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: { pathname: 'templates/job_template/51/edit' },
+                match: { params: { id: 51, templateType: 'job_template' } },
+              },
+            },
+          },
+        }
+      );
+    });
+    await waitForElement(newWrapper, 'ContentLoading', (el) => el.length === 0);
+    expect(newWrapper.find('CredentialLookup')).toHaveLength(1);
+    expect(
+      newWrapper.find('Alert[ouiaId="webhook-credential-type-missing"]')
+    ).toHaveLength(0);
+  });
+
+  test('should warn instead of failing silently when no credential type is found', async () => {
+    CredentialTypesAPI.read.mockResolvedValue({ data: { results: [] } });
+    let newWrapper;
+    await act(async () => {
+      newWrapper = mountWithContexts(
+        <Route path="templates/:templateType/:id/edit">
+          <Formik initialValues={initialValues}>
+            <WebhookSubForm templateType="job_template" />
+          </Formik>
+        </Route>,
+        {
+          context: {
+            router: {
+              history,
+              route: {
+                location: { pathname: 'templates/job_template/51/edit' },
+                match: { params: { id: 51, templateType: 'job_template' } },
+              },
+            },
+          },
+        }
+      );
+    });
+    await waitForElement(newWrapper, 'ContentLoading', (el) => el.length === 0);
+    expect(newWrapper.find('CredentialLookup')).toHaveLength(0);
+    expect(
+      newWrapper.find('Alert[ouiaId="webhook-credential-type-missing"]')
+    ).toHaveLength(1);
+  });
 });