Merge pull request #13306 from vidyanambiar/aap-7507

Fixes 'Not Found' error on looking up credentials

awx/ui/src/components/LaunchPrompt/steps/CredentialsStep.js

@@ -153,6 +153,10 @@ function CredentialsStep({
             }))}
             value={selectedType && selectedType.id}
             onChange={(e, id) => {
+              // Reset query params when the category of credentials is changed
+              history.replace({
+                search: '',
+              });
               setSelectedType(types.find((o) => o.id === parseInt(id, 10)));
             }}
           />

awx/ui/src/components/LaunchPrompt/steps/CredentialsStep.test.js

@@ -3,6 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { Formik } from 'formik';
 import { CredentialsAPI, CredentialTypesAPI } from 'api';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
 import CredentialsStep from './CredentialsStep';
 
 jest.mock('../../../api/models/CredentialTypes');
@@ -164,6 +165,41 @@ describe('CredentialsStep', () => {
     });
   });
 
+  test('should reset query params (credential.page) when selected credential type is changed', async () => {
+    let wrapper;
+    const history = createMemoryHistory({
+      initialEntries: ['?credential.page=2'],
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Formik>
+          <CredentialsStep allowCredentialsWithPasswords />
+        </Formik>,
+        {
+          context: { router: { history } },
+        }
+      );
+    });
+    wrapper.update();
+
+    expect(CredentialsAPI.read).toHaveBeenCalledWith({
+      credential_type: 1,
+      order_by: 'name',
+      page: 2,
+      page_size: 5,
+    });
+
+    await act(async () => {
+      wrapper.find('AnsibleSelect').invoke('onChange')({}, 3);
+    });
+    expect(CredentialsAPI.read).toHaveBeenCalledWith({
+      credential_type: 3,
+      order_by: 'name',
+      page: 1,
+      page_size: 5,
+    });
+  });
+
   test("error should be shown when a credential that prompts for passwords is selected on a step that doesn't allow it", async () => {
     let wrapper;
     await act(async () => {

awx/ui/src/components/Lookup/MultiCredentialsLookup.js

@@ -173,6 +173,10 @@ function MultiCredentialsLookup({
                 }))}
                 value={selectedType && selectedType.id}
                 onChange={(e, id) => {
+                  // Reset query params when the category of credentials is changed
+                  history.replace({
+                    search: '',
+                  });
                   setSelectedType(
                     credentialTypes.find((o) => o.id === parseInt(id, 10))
                   );

awx/ui/src/components/Lookup/MultiCredentialsLookup.test.js

@@ -6,6 +6,7 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
 import MultiCredentialsLookup from './MultiCredentialsLookup';
 
 jest.mock('../../api');
@@ -228,6 +229,53 @@ describe('<Formik><MultiCredentialsLookup /></Formik>', () => {
     ]);
   });
 
+  test('should reset query params (credentials.page) when selected credential type is changed', async () => {
+    const history = createMemoryHistory({
+      initialEntries: ['?credentials.page=2'],
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Formik>
+          <MultiCredentialsLookup
+            value={credentials}
+            tooltip="This is credentials look up"
+            onChange={() => {}}
+            onError={() => {}}
+          />
+        </Formik>,
+        {
+          context: { router: { history } },
+        }
+      );
+    });
+    const searchButton = await waitForElement(
+      wrapper,
+      'Button[aria-label="Search"]'
+    );
+    await act(async () => {
+      searchButton.invoke('onClick')();
+    });
+    expect(CredentialsAPI.read).toHaveBeenCalledWith({
+      credential_type: 400,
+      order_by: 'name',
+      page: 2,
+      page_size: 5,
+    });
+
+    const select = await waitForElement(wrapper, 'AnsibleSelect');
+    await act(async () => {
+      select.invoke('onChange')({}, 500);
+    });
+    wrapper.update();
+
+    expect(CredentialsAPI.read).toHaveBeenCalledWith({
+      credential_type: 500,
+      order_by: 'name',
+      page: 1,
+      page_size: 5,
+    });
+  });
+
   test('should only add 1 credential per credential type except vault(see below)', async () => {
     const onChange = jest.fn();
     await act(async () => {