From 908e583c69a0837ada0b01ae77171e1cc4606430 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 4 Jun 2020 17:29:07 -0400
Subject: [PATCH 01/10] Display prompt on launch passwords properly

---
 .../Credential/CredentialDetail/CredentialDetail.jsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index 2e8809955f..b297c679ef 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -75,7 +75,7 @@ function CredentialDetail({ i18n, credential }) {
 
   const { error, dismissError } = useDismissableError(deleteError);
 
-  const renderDetail = ({ id, label, type }) => {
+  const renderDetail = ({ id, label, type, ask_at_runtime }) => {
     let detail;
 
     if (type === 'boolean') {
@@ -96,6 +96,10 @@ function CredentialDetail({ i18n, credential }) {
           isEncrypted={isEncrypted}
         />
       );
+    } else if (ask_at_runtime && inputs[id] === 'ASK') {
+      detail = (
+        <Detail key={id} label={label} value={i18n._(t`Prompt on launch`)} />
+      );
     } else {
       detail = <Detail key={id} label={label} value={inputs[id]} />;
     }

From e7cd9bbb9805f17d94934422541382f338394dd4 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 8 Jun 2020 11:00:35 -0400
Subject: [PATCH 02/10] Display fields that have plugins configured.

---
 .../CredentialDetail/CredentialDetail.jsx     | 134 +++-
 .../CredentialDetail.test.jsx                 |  44 ++
 .../Credential/shared/data.credentials.json   | 746 +++++++++---------
 3 files changed, 528 insertions(+), 396 deletions(-)

diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index b297c679ef..f66389f3a1 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import { shape } from 'prop-types';
-
+import styled from 'styled-components';
 import { Button, List, ListItem } from '@patternfly/react-core';
 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
@@ -11,15 +11,26 @@ import ContentError from '../../../components/ContentError';
 import ContentLoading from '../../../components/ContentLoading';
 import DeleteButton from '../../../components/DeleteButton';
 import {
-  DetailList,
   Detail,
+  DetailList,
   UserDateDetail,
 } from '../../../components/DetailList';
+import ChipGroup from '../../../components/ChipGroup';
+import CodeMirrorInput from '../../../components/CodeMirrorInput';
+import CredentialChip from '../../../components/CredentialChip';
 import ErrorDetail from '../../../components/ErrorDetail';
 import { CredentialsAPI, CredentialTypesAPI } from '../../../api';
 import { Credential } from '../../../types';
 import useRequest, { useDismissableError } from '../../../util/useRequest';
 
+const PluginInputMetadata = styled(CodeMirrorInput)`
+  grid-column: 1 / -1;
+`;
+
+const PluginFieldText = styled.p`
+  margin-top: 10px;
+`;
+
 function CredentialDetail({ i18n, credential }) {
   const {
     id: credentialId,
@@ -38,6 +49,7 @@ function CredentialDetail({ i18n, credential }) {
   } = credential;
 
   const [fields, setFields] = useState([]);
+  const [inputSources, setInputSources] = useState({});
   const [managedByTower, setManagedByTower] = useState([]);
   const [contentError, setContentError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(true);
@@ -48,19 +60,33 @@ function CredentialDetail({ i18n, credential }) {
       setContentError(null);
       setHasContentLoading(true);
       try {
-        const {
-          data: { inputs: credentialTypeInputs, managed_by_tower },
-        } = await CredentialTypesAPI.readDetail(credential_type.id);
+        const [
+          {
+            data: { inputs: credentialTypeInputs, managed_by_tower },
+          },
+          {
+            data: { results: loadedInputSources },
+          },
+        ] = await Promise.all([
+          CredentialTypesAPI.readDetail(credential_type.id),
+          CredentialsAPI.readInputSources(credentialId, { page_size: 200 }),
+        ]);
 
         setFields(credentialTypeInputs.fields || []);
         setManagedByTower(managed_by_tower);
+        setInputSources(
+          loadedInputSources.reduce((inputSourcesMap, inputSource) => {
+            inputSourcesMap[inputSource.input_field_name] = inputSource;
+            return inputSourcesMap;
+          }, {})
+        );
       } catch (error) {
         setContentError(error);
       } finally {
         setHasContentLoading(false);
       }
     })();
-  }, [credential_type]);
+  }, [credential_type, credentialId]);
 
   const {
     request: deleteCredential,
@@ -76,35 +102,77 @@ function CredentialDetail({ i18n, credential }) {
   const { error, dismissError } = useDismissableError(deleteError);
 
   const renderDetail = ({ id, label, type, ask_at_runtime }) => {
-    let detail;
+    if (inputSources[id]) {
+      return (
+        <Fragment key={id}>
+          <Detail
+            id={`credential-${id}-detail`}
+            fullWidth
+            label={<span>{label} *</span>}
+            value={
+              <ChipGroup numChips={1} totalChips={1}>
+                <CredentialChip
+                  credential={inputSources[id].summary_fields.source_credential}
+                  isReadOnly
+                />
+              </ChipGroup>
+            }
+          />
+          <PluginInputMetadata
+            id={`credential-${id}-metadata`}
+            mode="javascript"
+            readOnly
+            value={JSON.stringify(inputSources[id].metadata, null, 2)}
+            onChange={() => {}}
+            rows={5}
+            hasErrors={false}
+          />
+        </Fragment>
+      );
+    }
 
     if (type === 'boolean') {
-      detail = (
+      return (
         <Detail
+          id={`credential-${id}-detail`}
           key={id}
           label={i18n._(t`Options`)}
           value={<List>{inputs[id] && <ListItem>{label}</ListItem>}</List>}
         />
       );
-    } else if (inputs[id] === '$encrypted$') {
-      const isEncrypted = true;
-      detail = (
+    }
+
+    if (inputs[id] === '$encrypted$') {
+      return (
         <Detail
+          id={`credential-${id}-detail`}
           key={id}
           label={label}
           value={i18n._(t`Encrypted`)}
-          isEncrypted={isEncrypted}
+          isEncrypted
         />
       );
-    } else if (ask_at_runtime && inputs[id] === 'ASK') {
-      detail = (
-        <Detail key={id} label={label} value={i18n._(t`Prompt on launch`)} />
-      );
-    } else {
-      detail = <Detail key={id} label={label} value={inputs[id]} />;
     }
 
-    return detail;
+    if (ask_at_runtime && inputs[id] === 'ASK') {
+      return (
+        <Detail
+          id={`credential-${id}-detail`}
+          key={id}
+          label={label}
+          value={i18n._(t`Prompt on launch`)}
+        />
+      );
+    }
+
+    return (
+      <Detail
+        id={`credential-${id}-detail`}
+        key={id}
+        label={label}
+        value={inputs[id]}
+      />
+    );
   };
 
   if (hasContentLoading) {
@@ -118,10 +186,19 @@ function CredentialDetail({ i18n, credential }) {
   return (
     <CardBody>
       <DetailList>
-        <Detail label={i18n._(t`Name`)} value={name} />
-        <Detail label={i18n._(t`Description`)} value={description} />
+        <Detail
+          id="credential-name-detail"
+          label={i18n._(t`Name`)}
+          value={name}
+        />
+        <Detail
+          id="credential-description-detail"
+          label={i18n._(t`Description`)}
+          value={description}
+        />
         {organization && (
           <Detail
+            id="credential-organization-detail"
             label={i18n._(t`Organization`)}
             value={
               <Link to={`/organizations/${organization.id}/details`}>
@@ -131,6 +208,7 @@ function CredentialDetail({ i18n, credential }) {
           />
         )}
         <Detail
+          id="credential-credential_type-detail"
           label={i18n._(t`Credential Type`)}
           value={
             managedByTower ? (
@@ -146,16 +224,26 @@ function CredentialDetail({ i18n, credential }) {
         {fields.map(field => renderDetail(field))}
 
         <UserDateDetail
+          id="credential-created-detail"
           label={i18n._(t`Created`)}
           date={created}
           user={created_by}
         />
         <UserDateDetail
+          id="credential-last_modified-detail"
           label={i18n._(t`Last Modified`)}
           date={modified}
           user={modified_by}
         />
       </DetailList>
+      {Object.keys(inputSources).length > 0 && (
+        <PluginFieldText>
+          <Trans>
+            * This field will be retrieved from an external secret management
+            system using the specified credential.
+          </Trans>
+        </PluginFieldText>
+      )}
       <CardActionsRow>
         {user_capabilities.edit && (
           <Button component={Link} to={`/credentials/${credentialId}/edit`}>
diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
index cfb00e331e..7d99339f2b 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
@@ -12,10 +12,37 @@ jest.mock('../../../api');
 
 const mockCredential = mockCredentials.results[0];
 
+const mockInputSource = {
+  id: 33,
+  type: 'credential_input_source',
+  url: '/api/v2/credential_input_sources/33/',
+  summary_fields: {
+    source_credential: {
+      id: 424,
+      name: 'External Credential',
+      description: '',
+      kind: 'conjur',
+      cloud: false,
+      credential_type_id: 20,
+    },
+  },
+  input_field_name: 'ssh_key_unlock',
+  metadata: {
+    secret_path: '/foo/bar/baz',
+    secret_version: '17',
+  },
+};
+
 CredentialTypesAPI.readDetail.mockResolvedValue({
   data: mockCredentialType,
 });
 
+CredentialsAPI.readInputSources.mockResolvedValue({
+  data: {
+    results: [mockInputSource],
+  },
+});
+
 function expectDetailToMatch(wrapper, label, value) {
   const detail = wrapper.find(`Detail[label="${label}"]`);
   expect(detail).toHaveLength(1);
@@ -52,6 +79,18 @@ describe('<CredentialDetail />', () => {
       mockCredential.summary_fields.credential_type.name
     );
     expectDetailToMatch(wrapper, 'Username', mockCredential.inputs.username);
+    expectDetailToMatch(wrapper, 'Password', 'Encrypted');
+    expectDetailToMatch(wrapper, 'SSH Private Key', 'Encrypted');
+    expectDetailToMatch(wrapper, 'Signed SSH Certificate', 'Encrypted');
+    const sshKeyUnlockDetail = wrapper.find(
+      'Detail#credential-ssh_key_unlock-detail'
+    );
+    expect(sshKeyUnlockDetail.length).toBe(1);
+    expect(sshKeyUnlockDetail.find('CredentialChip').length).toBe(1);
+    expect(
+      wrapper.find('CodeMirrorInput#credential-ssh_key_unlock-metadata').props()
+        .value
+    ).toBe(JSON.stringify(mockInputSource.metadata, null, 2));
     expectDetailToMatch(
       wrapper,
       'Privilege Escalation Method',
@@ -62,6 +101,11 @@ describe('<CredentialDetail />', () => {
       'Privilege Escalation Username',
       mockCredential.inputs.become_username
     );
+    expectDetailToMatch(
+      wrapper,
+      'Privilege Escalation Password',
+      'Prompt on launch'
+    );
     expect(wrapper.find(`Detail[label="Options"] ListItem`).text()).toEqual(
       'Authorize'
     );
diff --git a/awx/ui_next/src/screens/Credential/shared/data.credentials.json b/awx/ui_next/src/screens/Credential/shared/data.credentials.json
index 45f82c3f8c..d2ff130af9 100644
--- a/awx/ui_next/src/screens/Credential/shared/data.credentials.json
+++ b/awx/ui_next/src/screens/Credential/shared/data.credentials.json
@@ -3,394 +3,394 @@
   "next": "/api/v2/credentials/",
   "previous": null,
   "results": [
-      {
+    {
+      "id": 1,
+      "type": "credential",
+      "url": "/api/v2/credentials/1/",
+      "related": {
+        "created_by": "/api/v2/users/1/",
+        "modified_by": "/api/v2/users/1/",
+        "activity_stream": "/api/v2/credentials/1/activity_stream/",
+        "access_list": "/api/v2/credentials/1/access_list/",
+        "object_roles": "/api/v2/credentials/1/object_roles/",
+        "owner_users": "/api/v2/credentials/1/owner_users/",
+        "owner_teams": "/api/v2/credentials/1/owner_teams/",
+        "copy": "/api/v2/credentials/1/copy/",
+        "input_sources": "/api/v2/credentials/1/input_sources/",
+        "credential_type": "/api/v2/credential_types/23/",
+        "user": "/api/v2/users/7/"
+      },
+      "summary_fields": {
+        "organization": {
           "id": 1,
-          "type": "credential",
-          "url": "/api/v2/credentials/1/",
-          "related": {
-              "created_by": "/api/v2/users/1/",
-              "modified_by": "/api/v2/users/1/",
-              "activity_stream": "/api/v2/credentials/1/activity_stream/",
-              "access_list": "/api/v2/credentials/1/access_list/",
-              "object_roles": "/api/v2/credentials/1/object_roles/",
-              "owner_users": "/api/v2/credentials/1/owner_users/",
-              "owner_teams": "/api/v2/credentials/1/owner_teams/",
-              "copy": "/api/v2/credentials/1/copy/",
-              "input_sources": "/api/v2/credentials/1/input_sources/",
-              "credential_type": "/api/v2/credential_types/23/",
-              "user": "/api/v2/users/7/"
-          },
-          "summary_fields": {
-              "organization": {
-                "id": 1,
-                "name": "Org",
-                "description": ""
-              },
-              "credential_type": {
-                "id": 1,
-                "name": "Machine",
-                "description": ""
-              },
-              "created_by": {
-                  "id": 1,
-                  "username": "admin",
-                  "first_name": "",
-                  "last_name": ""
-              },
-              "modified_by": {
-                  "id": 1,
-                  "username": "admin",
-                  "first_name": "",
-                  "last_name": ""
-              },
-              "object_roles": {
-                  "admin_role": {
-                      "description": "Can manage all aspects of the credential",
-                      "name": "Admin",
-                      "id": 284
-                  },
-                  "use_role": {
-                      "description": "Can use the credential in a job template",
-                      "name": "Use",
-                      "id": 285
-                  },
-                  "read_role": {
-                      "description": "May view settings for the credential",
-                      "name": "Read",
-                      "id": 286
-                  }
-              },
-              "user_capabilities": {
-                  "edit": true,
-                  "delete": true,
-                  "copy": true,
-                  "use": true
-              }
-          },
-          "created": "2019-12-17T16:12:25.258897Z",
-          "modified": "2019-12-17T16:12:25.258920Z",
-          "name": "Foo",
-          "description": "Foo Description",
-          "organization": 1,
-          "credential_type": 1,
-          "inputs": {
-            "password": "$encrypted$",
-            "username": "foo",
-            "ssh_key_data": "$encrypted$",
-            "become_method": "sudo",
-            "become_password": "$encrypted$",
-            "become_username": "bar",
-            "ssh_public_key_data": "$encrypted$",
-            "authorize": true
+          "name": "Org",
+          "description": ""
         },
-          "kind": null,
-          "cloud": true,
-          "kubernetes": false
+        "credential_type": {
+          "id": 1,
+          "name": "Machine",
+          "description": ""
+        },
+        "created_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "modified_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "object_roles": {
+          "admin_role": {
+            "description": "Can manage all aspects of the credential",
+            "name": "Admin",
+            "id": 284
+          },
+          "use_role": {
+            "description": "Can use the credential in a job template",
+            "name": "Use",
+            "id": 285
+          },
+          "read_role": {
+            "description": "May view settings for the credential",
+            "name": "Read",
+            "id": 286
+          }
+        },
+        "user_capabilities": {
+          "edit": true,
+          "delete": true,
+          "copy": true,
+          "use": true
+        }
       },
-      {
+      "created": "2019-12-17T16:12:25.258897Z",
+      "modified": "2019-12-17T16:12:25.258920Z",
+      "name": "Foo",
+      "description": "Foo Description",
+      "organization": 1,
+      "credential_type": 1,
+      "inputs": {
+        "password": "$encrypted$",
+        "username": "foo",
+        "ssh_key_data": "$encrypted$",
+        "become_method": "sudo",
+        "become_password": "ASK",
+        "become_username": "bar",
+        "ssh_public_key_data": "$encrypted$",
+        "authorize": true
+      },
+      "kind": null,
+      "cloud": true,
+      "kubernetes": false
+    },
+    {
+      "id": 2,
+      "type": "credential",
+      "url": "/api/v2/credentials/2/",
+      "related": {
+        "created_by": "/api/v2/users/8/",
+        "modified_by": "/api/v2/users/12/",
+        "activity_stream": "/api/v2/credentials/2/activity_stream/",
+        "access_list": "/api/v2/credentials/2/access_list/",
+        "object_roles": "/api/v2/credentials/2/object_roles/",
+        "owner_users": "/api/v2/credentials/2/owner_users/",
+        "owner_teams": "/api/v2/credentials/2/owner_teams/",
+        "copy": "/api/v2/credentials/2/copy/",
+        "input_sources": "/api/v2/credentials/2/input_sources/",
+        "credential_type": "/api/v2/credential_types/1/",
+        "user": "/api/v2/users/7/"
+      },
+      "summary_fields": {
+        "credential_type": {
+          "id": 1,
+          "name": "Machine",
+          "description": ""
+        },
+        "created_by": {
+          "id": 8,
+          "username": "user-2",
+          "first_name": "",
+          "last_name": ""
+        },
+        "modified_by": {
+          "id": 12,
+          "username": "user-6",
+          "first_name": "",
+          "last_name": ""
+        },
+        "object_roles": {
+          "admin_role": {
+            "description": "Can manage all aspects of the credential",
+            "name": "Admin",
+            "id": 81
+          },
+          "use_role": {
+            "description": "Can use the credential in a job template",
+            "name": "Use",
+            "id": 82
+          },
+          "read_role": {
+            "description": "May view settings for the credential",
+            "name": "Read",
+            "id": 83
+          }
+        },
+        "user_capabilities": {
+          "edit": false,
+          "delete": false,
+          "copy": false,
+          "use": false
+        },
+        "owners": [
+          {
+            "id": 7,
+            "type": "user",
+            "name": "user-1",
+            "description": " ",
+            "url": "/api/v2/users/7/"
+          }
+        ]
+      },
+      "created": "2019-12-16T21:04:40.896097Z",
+      "modified": "2019-12-16T21:04:40.896121Z",
+      "name": "Bar",
+      "description": "",
+      "organization": null,
+      "credential_type": 1,
+      "inputs": {},
+      "kind": "ssh",
+      "cloud": false,
+      "kubernetes": false
+    },
+    {
+      "id": 3,
+      "type": "credential",
+      "url": "/api/v2/credentials/3/",
+      "related": {
+        "created_by": "/api/v2/users/9/",
+        "modified_by": "/api/v2/users/13/",
+        "activity_stream": "/api/v2/credentials/3/activity_stream/",
+        "access_list": "/api/v2/credentials/3/access_list/",
+        "object_roles": "/api/v2/credentials/3/object_roles/",
+        "owner_users": "/api/v2/credentials/3/owner_users/",
+        "owner_teams": "/api/v2/credentials/3/owner_teams/",
+        "copy": "/api/v2/credentials/3/copy/",
+        "input_sources": "/api/v2/credentials/3/input_sources/",
+        "credential_type": "/api/v2/credential_types/1/",
+        "user": "/api/v2/users/8/"
+      },
+      "summary_fields": {
+        "credential_type": {
+          "id": 1,
+          "name": "Machine",
+          "description": ""
+        },
+        "created_by": {
+          "id": 9,
+          "username": "user-3",
+          "first_name": "",
+          "last_name": ""
+        },
+        "modified_by": {
+          "id": 13,
+          "username": "user-7",
+          "first_name": "",
+          "last_name": ""
+        },
+        "object_roles": {
+          "admin_role": {
+            "description": "Can manage all aspects of the credential",
+            "name": "Admin",
+            "id": 84
+          },
+          "use_role": {
+            "description": "Can use the credential in a job template",
+            "name": "Use",
+            "id": 85
+          },
+          "read_role": {
+            "description": "May view settings for the credential",
+            "name": "Read",
+            "id": 86
+          }
+        },
+        "user_capabilities": {
+          "edit": true,
+          "delete": true,
+          "copy": true,
+          "use": true
+        },
+        "owners": [
+          {
+            "id": 8,
+            "type": "user",
+            "name": "user-2",
+            "description": " ",
+            "url": "/api/v2/users/8/"
+          }
+        ]
+      },
+      "created": "2019-12-16T21:04:40.955954Z",
+      "modified": "2019-12-16T21:04:40.955976Z",
+      "name": "Baz",
+      "description": "",
+      "organization": null,
+      "credential_type": 1,
+      "inputs": {},
+      "kind": "ssh",
+      "cloud": false,
+      "kubernetes": false
+    },
+    {
+      "id": 4,
+      "type": "credential",
+      "url": "/api/v2/credentials/4/",
+      "related": {
+        "created_by": "/api/v2/users/1/",
+        "modified_by": "/api/v2/users/1/",
+        "activity_stream": "/api/v2/credentials/4/activity_stream/",
+        "access_list": "/api/v2/credentials/4/access_list/",
+        "object_roles": "/api/v2/credentials/4/object_roles/",
+        "owner_users": "/api/v2/credentials/4/owner_users/",
+        "owner_teams": "/api/v2/credentials/4/owner_teams/",
+        "copy": "/api/v2/credentials/4/copy/",
+        "input_sources": "/api/v2/credentials/4/input_sources/",
+        "credential_type": "/api/v2/credential_types/25/",
+        "user": "/api/v2/users/1/"
+      },
+      "summary_fields": {
+        "credential_type": {
           "id": 2,
-          "type": "credential",
-          "url": "/api/v2/credentials/2/",
-          "related": {
-              "created_by": "/api/v2/users/8/",
-              "modified_by": "/api/v2/users/12/",
-              "activity_stream": "/api/v2/credentials/2/activity_stream/",
-              "access_list": "/api/v2/credentials/2/access_list/",
-              "object_roles": "/api/v2/credentials/2/object_roles/",
-              "owner_users": "/api/v2/credentials/2/owner_users/",
-              "owner_teams": "/api/v2/credentials/2/owner_teams/",
-              "copy": "/api/v2/credentials/2/copy/",
-              "input_sources": "/api/v2/credentials/2/input_sources/",
-              "credential_type": "/api/v2/credential_types/1/",
-              "user": "/api/v2/users/7/"
-          },
-          "summary_fields": {
-              "credential_type": {
-                "id": 1,
-                "name": "Machine",
-                "description": ""
-              },
-              "created_by": {
-                  "id": 8,
-                  "username": "user-2",
-                  "first_name": "",
-                  "last_name": ""
-              },
-              "modified_by": {
-                  "id": 12,
-                  "username": "user-6",
-                  "first_name": "",
-                  "last_name": ""
-              },
-              "object_roles": {
-                  "admin_role": {
-                      "description": "Can manage all aspects of the credential",
-                      "name": "Admin",
-                      "id": 81
-                  },
-                  "use_role": {
-                      "description": "Can use the credential in a job template",
-                      "name": "Use",
-                      "id": 82
-                  },
-                  "read_role": {
-                      "description": "May view settings for the credential",
-                      "name": "Read",
-                      "id": 83
-                  }
-              },
-              "user_capabilities": {
-                  "edit": false,
-                  "delete": false,
-                  "copy": false,
-                  "use": false
-              },
-              "owners": [
-                  {
-                      "id": 7,
-                      "type": "user",
-                      "name": "user-1",
-                      "description": " ",
-                      "url": "/api/v2/users/7/"
-                  }
-              ]
-          },
-          "created": "2019-12-16T21:04:40.896097Z",
-          "modified": "2019-12-16T21:04:40.896121Z",
-          "name": "Bar",
-          "description": "",
-          "organization": null,
-          "credential_type": 1,
-          "inputs": {},
-          "kind": "ssh",
-          "cloud": false,
-          "kubernetes": false
-      },
-      {
-          "id": 3,
-          "type": "credential",
-          "url": "/api/v2/credentials/3/",
-          "related": {
-              "created_by": "/api/v2/users/9/",
-              "modified_by": "/api/v2/users/13/",
-              "activity_stream": "/api/v2/credentials/3/activity_stream/",
-              "access_list": "/api/v2/credentials/3/access_list/",
-              "object_roles": "/api/v2/credentials/3/object_roles/",
-              "owner_users": "/api/v2/credentials/3/owner_users/",
-              "owner_teams": "/api/v2/credentials/3/owner_teams/",
-              "copy": "/api/v2/credentials/3/copy/",
-              "input_sources": "/api/v2/credentials/3/input_sources/",
-              "credential_type": "/api/v2/credential_types/1/",
-              "user": "/api/v2/users/8/"
-          },
-          "summary_fields": {
-              "credential_type": {
-                "id": 1,
-                "name": "Machine",
-                "description": ""
-              },
-              "created_by": {
-                  "id": 9,
-                  "username": "user-3",
-                  "first_name": "",
-                  "last_name": ""
-              },
-              "modified_by": {
-                  "id": 13,
-                  "username": "user-7",
-                  "first_name": "",
-                  "last_name": ""
-              },
-              "object_roles": {
-                  "admin_role": {
-                      "description": "Can manage all aspects of the credential",
-                      "name": "Admin",
-                      "id": 84
-                  },
-                  "use_role": {
-                      "description": "Can use the credential in a job template",
-                      "name": "Use",
-                      "id": 85
-                  },
-                  "read_role": {
-                      "description": "May view settings for the credential",
-                      "name": "Read",
-                      "id": 86
-                  }
-              },
-              "user_capabilities": {
-                  "edit": true,
-                  "delete": true,
-                  "copy": true,
-                  "use": true
-              },
-              "owners": [
-                  {
-                      "id": 8,
-                      "type": "user",
-                      "name": "user-2",
-                      "description": " ",
-                      "url": "/api/v2/users/8/"
-                  }
-              ]
-          },
-          "created": "2019-12-16T21:04:40.955954Z",
-          "modified": "2019-12-16T21:04:40.955976Z",
-          "name": "Baz",
-          "description": "",
-          "organization": null,
-          "credential_type": 1,
-          "inputs": {},
-          "kind": "ssh",
-          "cloud": false,
-          "kubernetes": false
-      },
-      {
-        "id": 4,
-        "type": "credential",
-        "url": "/api/v2/credentials/4/",
-        "related": {
-            "created_by": "/api/v2/users/1/",
-            "modified_by": "/api/v2/users/1/",
-            "activity_stream": "/api/v2/credentials/4/activity_stream/",
-            "access_list": "/api/v2/credentials/4/access_list/",
-            "object_roles": "/api/v2/credentials/4/object_roles/",
-            "owner_users": "/api/v2/credentials/4/owner_users/",
-            "owner_teams": "/api/v2/credentials/4/owner_teams/",
-            "copy": "/api/v2/credentials/4/copy/",
-            "input_sources": "/api/v2/credentials/4/input_sources/",
-            "credential_type": "/api/v2/credential_types/25/",
-            "user": "/api/v2/users/1/"
+          "name": "Vault",
+          "description": ""
         },
-        "summary_fields": {
-            "credential_type": {
-              "id": 2,
-              "name": "Vault",
-              "description": ""
-            },
-            "created_by": {
-                "id": 1,
-                "username": "admin",
-                "first_name": "",
-                "last_name": ""
-            },
-            "modified_by": {
-                "id": 1,
-                "username": "admin",
-                "first_name": "",
-                "last_name": ""
-            },
-            "object_roles": {
-                "admin_role": {
-                    "description": "Can manage all aspects of the credential",
-                    "name": "Admin",
-                    "id": 318
-                },
-                "use_role": {
-                    "description": "Can use the credential in a job template",
-                    "name": "Use",
-                    "id": 319
-                },
-                "read_role": {
-                    "description": "May view settings for the credential",
-                    "name": "Read",
-                    "id": 320
-                }
-            },
-            "user_capabilities": {
-                "edit": true,
-                "delete": true,
-                "copy": true,
-                "use": true
-            },
-            "owners": [
-                {
-                    "id": 1,
-                    "type": "user",
-                    "name": "admin",
-                    "description": " ",
-                    "url": "/api/v2/users/1/"
-                }
-            ]
+        "created_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
         },
-        "created": "2019-12-18T16:31:09.772005Z",
-        "modified": "2019-12-18T16:31:09.832666Z",
-        "name": "FooBar",
-        "description": "",
-        "organization": null,
-        "credential_type": 2,
-        "inputs": {},
-        "kind": null,
-        "cloud": true,
-        "kubernetes": false
+        "modified_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "object_roles": {
+          "admin_role": {
+            "description": "Can manage all aspects of the credential",
+            "name": "Admin",
+            "id": 318
+          },
+          "use_role": {
+            "description": "Can use the credential in a job template",
+            "name": "Use",
+            "id": 319
+          },
+          "read_role": {
+            "description": "May view settings for the credential",
+            "name": "Read",
+            "id": 320
+          }
+        },
+        "user_capabilities": {
+          "edit": true,
+          "delete": true,
+          "copy": true,
+          "use": true
+        },
+        "owners": [
+          {
+            "id": 1,
+            "type": "user",
+            "name": "admin",
+            "description": " ",
+            "url": "/api/v2/users/1/"
+          }
+        ]
+      },
+      "created": "2019-12-18T16:31:09.772005Z",
+      "modified": "2019-12-18T16:31:09.832666Z",
+      "name": "FooBar",
+      "description": "",
+      "organization": null,
+      "credential_type": 2,
+      "inputs": {},
+      "kind": null,
+      "cloud": true,
+      "kubernetes": false
     },
     {
       "id": 5,
       "type": "credential",
       "url": "/api/v2/credentials/5/",
       "related": {
-          "created_by": "/api/v2/users/1/",
-          "modified_by": "/api/v2/users/1/",
-          "activity_stream": "/api/v2/credentials/5/activity_stream/",
-          "access_list": "/api/v2/credentials/5/access_list/",
-          "object_roles": "/api/v2/credentials/5/object_roles/",
-          "owner_users": "/api/v2/credentials/5/owner_users/",
-          "owner_teams": "/api/v2/credentials/5/owner_teams/",
-          "copy": "/api/v2/credentials/5/copy/",
-          "input_sources": "/api/v2/credentials/5/input_sources/",
-          "credential_type": "/api/v2/credential_types/25/",
-          "user": "/api/v2/users/1/"
+        "created_by": "/api/v2/users/1/",
+        "modified_by": "/api/v2/users/1/",
+        "activity_stream": "/api/v2/credentials/5/activity_stream/",
+        "access_list": "/api/v2/credentials/5/access_list/",
+        "object_roles": "/api/v2/credentials/5/object_roles/",
+        "owner_users": "/api/v2/credentials/5/owner_users/",
+        "owner_teams": "/api/v2/credentials/5/owner_teams/",
+        "copy": "/api/v2/credentials/5/copy/",
+        "input_sources": "/api/v2/credentials/5/input_sources/",
+        "credential_type": "/api/v2/credential_types/25/",
+        "user": "/api/v2/users/1/"
       },
       "summary_fields": {
-          "credential_type": {
-            "id": 3,
-            "name": "Source Control",
-            "description": ""
+        "credential_type": {
+          "id": 3,
+          "name": "Source Control",
+          "description": ""
+        },
+        "created_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "modified_by": {
+          "id": 1,
+          "username": "admin",
+          "first_name": "",
+          "last_name": ""
+        },
+        "object_roles": {
+          "admin_role": {
+            "description": "Can manage all aspects of the credential",
+            "name": "Admin",
+            "id": 290
           },
-          "created_by": {
-              "id": 1,
-              "username": "admin",
-              "first_name": "",
-              "last_name": ""
+          "use_role": {
+            "description": "Can use the credential in a job template",
+            "name": "Use",
+            "id": 291
           },
-          "modified_by": {
-              "id": 1,
-              "username": "admin",
-              "first_name": "",
-              "last_name": ""
-          },
-          "object_roles": {
-              "admin_role": {
-                  "description": "Can manage all aspects of the credential",
-                  "name": "Admin",
-                  "id": 290
-              },
-              "use_role": {
-                  "description": "Can use the credential in a job template",
-                  "name": "Use",
-                  "id": 291
-              },
-              "read_role": {
-                  "description": "May view settings for the credential",
-                  "name": "Read",
-                  "id": 292
-              }
-          },
-          "user_capabilities": {
-              "edit": true,
-              "delete": true,
-              "copy": true,
-              "use": true
-          },
-          "owners": [
-              {
-                  "id": 1,
-                  "type": "user",
-                  "name": "admin",
-                  "description": " ",
-                  "url": "/api/v2/users/1/"
-              }
-          ]
+          "read_role": {
+            "description": "May view settings for the credential",
+            "name": "Read",
+            "id": 292
+          }
+        },
+        "user_capabilities": {
+          "edit": true,
+          "delete": true,
+          "copy": true,
+          "use": true
+        },
+        "owners": [
+          {
+            "id": 1,
+            "type": "user",
+            "name": "admin",
+            "description": " ",
+            "url": "/api/v2/users/1/"
+          }
+        ]
       },
       "created": "2019-12-17T16:12:44.923123Z",
       "modified": "2019-12-17T16:12:44.923151Z",
@@ -404,4 +404,4 @@
       "kubernetes": false
     }
   ]
-}
\ No newline at end of file
+}

From a1d1a1078b693731e4f3820865f45534522f828a Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Tue, 9 Jun 2020 18:06:30 -0400
Subject: [PATCH 03/10] Adds logic to recursively fetch input sources in the
 model method.  This way we don't have to duplicate this logic every place
 that calls the method.

---
 awx/ui_next/src/api/models/Credentials.js     | 29 ++++++++++++++++---
 .../CredentialDetail/CredentialDetail.jsx     |  6 ++--
 .../CredentialDetail.test.jsx                 |  6 +---
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/awx/ui_next/src/api/models/Credentials.js b/awx/ui_next/src/api/models/Credentials.js
index 13ee1f8a9c..4ccf8d25c3 100644
--- a/awx/ui_next/src/api/models/Credentials.js
+++ b/awx/ui_next/src/api/models/Credentials.js
@@ -20,10 +20,31 @@ class Credentials extends Base {
     return this.http.options(`${this.baseUrl}${id}/access_list/`);
   }
 
-  readInputSources(id, params) {
-    return this.http.get(`${this.baseUrl}${id}/input_sources/`, {
-      params,
-    });
+  readInputSources(id) {
+    const fetchInputSources = async (pageNo = 1, inputSources = []) => {
+      try {
+        const { data } = await this.http.get(
+          `${this.baseUrl}${id}/input_sources/`,
+          {
+            params: {
+              page: pageNo,
+              page_size: 200,
+            },
+          }
+        );
+        if (data.next) {
+          return fetchInputSources(
+            pageNo + 1,
+            inputSources.concat(data.results)
+          );
+        }
+        return Promise.resolve(inputSources.concat(data.results));
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    };
+
+    return fetchInputSources();
   }
 
   test(id, data) {
diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index f66389f3a1..671b20aa9f 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -64,12 +64,10 @@ function CredentialDetail({ i18n, credential }) {
           {
             data: { inputs: credentialTypeInputs, managed_by_tower },
           },
-          {
-            data: { results: loadedInputSources },
-          },
+          loadedInputSources,
         ] = await Promise.all([
           CredentialTypesAPI.readDetail(credential_type.id),
-          CredentialsAPI.readInputSources(credentialId, { page_size: 200 }),
+          CredentialsAPI.readInputSources(credentialId),
         ]);
 
         setFields(credentialTypeInputs.fields || []);
diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
index 7d99339f2b..af401cfbb5 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
@@ -37,11 +37,7 @@ CredentialTypesAPI.readDetail.mockResolvedValue({
   data: mockCredentialType,
 });
 
-CredentialsAPI.readInputSources.mockResolvedValue({
-  data: {
-    results: [mockInputSource],
-  },
-});
+CredentialsAPI.readInputSources.mockResolvedValue([mockInputSource]);
 
 function expectDetailToMatch(wrapper, label, value) {
   const detail = wrapper.find(`Detail[label="${label}"]`);

From a71a9057a2b04ebbb6d13025c9159b9b8a90e9ed Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 10 Jun 2020 14:20:42 -0400
Subject: [PATCH 04/10] Wraps GET requests in useRequest in order to handle
 unmounting more gracefully if the requests are still pending.

---
 .../CredentialDetail/CredentialDetail.jsx     | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index 671b20aa9f..5008649611 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import React, { Fragment, useEffect, useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t, Trans } from '@lingui/macro';
@@ -47,44 +47,42 @@ function CredentialDetail({ i18n, credential }) {
       user_capabilities,
     },
   } = credential;
-
-  const [fields, setFields] = useState([]);
-  const [inputSources, setInputSources] = useState({});
-  const [managedByTower, setManagedByTower] = useState([]);
-  const [contentError, setContentError] = useState(null);
-  const [hasContentLoading, setHasContentLoading] = useState(true);
   const history = useHistory();
 
-  useEffect(() => {
-    (async () => {
-      setContentError(null);
-      setHasContentLoading(true);
-      try {
-        const [
-          {
-            data: { inputs: credentialTypeInputs, managed_by_tower },
-          },
-          loadedInputSources,
-        ] = await Promise.all([
-          CredentialTypesAPI.readDetail(credential_type.id),
-          CredentialsAPI.readInputSources(credentialId),
-        ]);
-
-        setFields(credentialTypeInputs.fields || []);
-        setManagedByTower(managed_by_tower);
-        setInputSources(
-          loadedInputSources.reduce((inputSourcesMap, inputSource) => {
+  const {
+    result: { fields, managedByTower, inputSources },
+    request: fetchDetails,
+    isLoading: hasContentLoading,
+    error: contentError,
+  } = useRequest(
+    useCallback(async () => {
+      const [
+        {
+          data: { inputs: credentialTypeInputs, managed_by_tower },
+        },
+        loadedInputSources,
+      ] = await Promise.all([
+        CredentialTypesAPI.readDetail(credential_type.id),
+        CredentialsAPI.readInputSources(credentialId),
+      ]);
+      return {
+        fields: credentialTypeInputs.fields || [],
+        managedByTower: managed_by_tower,
+        inputSources: loadedInputSources.reduce(
+          (inputSourcesMap, inputSource) => {
             inputSourcesMap[inputSource.input_field_name] = inputSource;
             return inputSourcesMap;
-          }, {})
-        );
-      } catch (error) {
-        setContentError(error);
-      } finally {
-        setHasContentLoading(false);
-      }
-    })();
-  }, [credential_type, credentialId]);
+          },
+          {}
+        ),
+      };
+    }, [credentialId, credential_type]),
+    {
+      fields: [],
+      managedByTower: true,
+      inputSources: {},
+    }
+  );
 
   const {
     request: deleteCredential,
@@ -173,6 +171,10 @@ function CredentialDetail({ i18n, credential }) {
     );
   };
 
+  useEffect(() => {
+    fetchDetails();
+  }, [fetchDetails]);
+
   if (hasContentLoading) {
     return <ContentLoading />;
   }

From 81822dfd1c39710dae80f7d41d2b4576d766de17 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 10 Jun 2020 14:28:32 -0400
Subject: [PATCH 05/10] Adds an upper limit on recursive calls set statically
 in the method at 5.

---
 awx/ui_next/src/api/models/Credentials.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/api/models/Credentials.js b/awx/ui_next/src/api/models/Credentials.js
index 4ccf8d25c3..1f369e7a77 100644
--- a/awx/ui_next/src/api/models/Credentials.js
+++ b/awx/ui_next/src/api/models/Credentials.js
@@ -21,8 +21,11 @@ class Credentials extends Base {
   }
 
   readInputSources(id) {
+    const maxRequests = 5;
+    let requestCounter = 0;
     const fetchInputSources = async (pageNo = 1, inputSources = []) => {
       try {
+        requestCounter++;
         const { data } = await this.http.get(
           `${this.baseUrl}${id}/input_sources/`,
           {
@@ -32,7 +35,7 @@ class Credentials extends Base {
             },
           }
         );
-        if (data.next) {
+        if (data.next && requestCounter <= maxRequests) {
           return fetchInputSources(
             pageNo + 1,
             inputSources.concat(data.results)

From c3c7e120c888f85bfacb7072bbaf1bee24cb1449 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Fri, 19 Jun 2020 09:47:32 -0400
Subject: [PATCH 06/10] Removes use of Trans tag in favor of t/i18n

---
 .../Credential/CredentialDetail/CredentialDetail.jsx       | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index 5008649611..a8274e2904 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
-import { t, Trans } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import { shape } from 'prop-types';
 import styled from 'styled-components';
 import { Button, List, ListItem } from '@patternfly/react-core';
@@ -238,10 +238,7 @@ function CredentialDetail({ i18n, credential }) {
       </DetailList>
       {Object.keys(inputSources).length > 0 && (
         <PluginFieldText>
-          <Trans>
-            * This field will be retrieved from an external secret management
-            system using the specified credential.
-          </Trans>
+          {i18n._(t`* This field will be retrieved from an external secret management system using the specified credential.`)}
         </PluginFieldText>
       )}
       <CardActionsRow>

From e6a1ad01271b1952a21068f88dca7546431bf531 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 22 Jul 2020 08:50:46 -0400
Subject: [PATCH 07/10] Ran prettier

---
 .../screens/Credential/CredentialDetail/CredentialDetail.jsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index a8274e2904..b7d14fec9c 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -238,7 +238,9 @@ function CredentialDetail({ i18n, credential }) {
       </DetailList>
       {Object.keys(inputSources).length > 0 && (
         <PluginFieldText>
-          {i18n._(t`* This field will be retrieved from an external secret management system using the specified credential.`)}
+          {i18n._(
+            t`* This field will be retrieved from an external secret management system using the specified credential.`
+          )}
         </PluginFieldText>
       )}
       <CardActionsRow>

From 6df173ce1db086ab2f5ece48bfe5e7379c54cae0 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 22 Jul 2020 13:43:41 -0400
Subject: [PATCH 08/10] Update return structure of readInputSources to match
 what the edit component is expecting.  This also required me to make
 corresponding updates to the detail component so that it matched.

---
 awx/ui_next/src/api/models/Credentials.js                   | 6 +++++-
 .../Credential/CredentialDetail/CredentialDetail.jsx        | 4 +++-
 .../Credential/CredentialDetail/CredentialDetail.test.jsx   | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/awx/ui_next/src/api/models/Credentials.js b/awx/ui_next/src/api/models/Credentials.js
index 1f369e7a77..340a8b47ee 100644
--- a/awx/ui_next/src/api/models/Credentials.js
+++ b/awx/ui_next/src/api/models/Credentials.js
@@ -41,7 +41,11 @@ class Credentials extends Base {
             inputSources.concat(data.results)
           );
         }
-        return Promise.resolve(inputSources.concat(data.results));
+        return Promise.resolve({
+          data: {
+            results: inputSources.concat(data.results),
+          },
+        });
       } catch (error) {
         return Promise.reject(error);
       }
diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
index b7d14fec9c..5f8066b904 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
@@ -60,7 +60,9 @@ function CredentialDetail({ i18n, credential }) {
         {
           data: { inputs: credentialTypeInputs, managed_by_tower },
         },
-        loadedInputSources,
+        {
+          data: { results: loadedInputSources },
+        },
       ] = await Promise.all([
         CredentialTypesAPI.readDetail(credential_type.id),
         CredentialsAPI.readInputSources(credentialId),
diff --git a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
index af401cfbb5..7d99339f2b 100644
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
@@ -37,7 +37,11 @@ CredentialTypesAPI.readDetail.mockResolvedValue({
   data: mockCredentialType,
 });
 
-CredentialsAPI.readInputSources.mockResolvedValue([mockInputSource]);
+CredentialsAPI.readInputSources.mockResolvedValue({
+  data: {
+    results: [mockInputSource],
+  },
+});
 
 function expectDetailToMatch(wrapper, label, value) {
   const detail = wrapper.find(`Detail[label="${label}"]`);

From 34e85dea8b7dfcbb4f8ef12d655b9bd75adb882d Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 22 Jul 2020 13:47:19 -0400
Subject: [PATCH 09/10] Check for existence of data.next before checking it

---
 awx/ui_next/src/api/models/Credentials.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui_next/src/api/models/Credentials.js b/awx/ui_next/src/api/models/Credentials.js
index 340a8b47ee..1560357bd1 100644
--- a/awx/ui_next/src/api/models/Credentials.js
+++ b/awx/ui_next/src/api/models/Credentials.js
@@ -35,7 +35,7 @@ class Credentials extends Base {
             },
           }
         );
-        if (data.next && requestCounter <= maxRequests) {
+        if (data?.next && requestCounter <= maxRequests) {
           return fetchInputSources(
             pageNo + 1,
             inputSources.concat(data.results)

From d27c482e5e5c228088368eed687424711234ebc6 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 22 Jul 2020 13:50:13 -0400
Subject: [PATCH 10/10] Pass actual error to ContentError so it can be
 displayed

---
 .../src/screens/Credential/CredentialEdit/CredentialEdit.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx b/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx
index 965746109c..0cb78ed75e 100644
--- a/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.jsx
@@ -151,7 +151,7 @@ function CredentialEdit({ credential, me }) {
   };
 
   if (error) {
-    return <ContentError />;
+    return <ContentError error={error} />;
   }
 
   if (isLoading) {