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

@@ -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) {

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 || []);

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}"]`);