Merge pull request #10395 from mabashian/10333-default-galaxy-cred

Preselect default galaxy cred when creating new org

SUMMARY
link #10333

ISSUE TYPE

Bugfix Pull Request

COMPONENT NAME

UI

Reviewed-by: Kersom <None>
Reviewed-by: Yago Marques <yagomarquesja@gmail.com>

awx/ui_next/src/api/Base.js

@@ -1,5 +1,4 @@
 import axios from 'axios';
-
 import { SESSION_TIMEOUT_KEY } from '../constants';
 import { encodeQueryString } from '../util/qs';
 import debounce from '../util/debounce';

awx/ui_next/src/screens/Credential/CredentialAdd/CredentialAdd.jsx

@@ -4,7 +4,6 @@ import { PageSection, Card } from '@patternfly/react-core';
 import { CardBody } from '../../../components/Card';
 import ContentError from '../../../components/ContentError';
 import ContentLoading from '../../../components/ContentLoading';
-
 import {
   CredentialInputSourcesAPI,
   CredentialTypesAPI,

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx

@@ -1,15 +1,40 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { PageSection, Card } from '@patternfly/react-core';
-
-import { OrganizationsAPI } from '../../../api';
+import useRequest from '../../../util/useRequest';
+import { CredentialsAPI, OrganizationsAPI } from '../../../api';
 import { CardBody } from '../../../components/Card';
+import ContentError from '../../../components/ContentError';
+import ContentLoading from '../../../components/ContentLoading';
 import OrganizationForm from '../shared/OrganizationForm';
 
 function OrganizationAdd() {
   const history = useHistory();
   const [formError, setFormError] = useState(null);
 
+  const {
+    isLoading,
+    error: defaultGalaxyCredentialError,
+    request: fetchDefaultGalaxyCredential,
+    result: defaultGalaxyCredential,
+  } = useRequest(
+    useCallback(async () => {
+      const {
+        data: { results },
+      } = await CredentialsAPI.read({
+        credential_type__kind: 'galaxy',
+        managed_by_tower: true,
+      });
+
+      return results[0] || null;
+    }, []),
+    null
+  );
+
+  useEffect(() => {
+    fetchDefaultGalaxyCredential();
+  }, [fetchDefaultGalaxyCredential]);
+
   const handleSubmit = async (values, groupsToAssociate) => {
     try {
       const { data: response } = await OrganizationsAPI.create({
@@ -35,6 +60,30 @@ function OrganizationAdd() {
     history.push('/organizations');
   };
 
+  if (defaultGalaxyCredentialError) {
+    return (
+      <PageSection>
+        <Card>
+          <CardBody>
+            <ContentError error={defaultGalaxyCredentialError} />
+          </CardBody>
+        </Card>
+      </PageSection>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <PageSection>
+        <Card>
+          <CardBody>
+            <ContentLoading />
+          </CardBody>
+        </Card>
+      </PageSection>
+    );
+  }
+
   return (
     <PageSection>
       <Card>
@@ -43,6 +92,7 @@ function OrganizationAdd() {
             onSubmit={handleSubmit}
             onCancel={handleCancel}
             submitError={formError}
+            defaultGalaxyCredential={defaultGalaxyCredential}
           />
         </CardBody>
       </Card>

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx

@@ -6,11 +6,28 @@ import {
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
 import OrganizationAdd from './OrganizationAdd';
-import { OrganizationsAPI } from '../../../api';
+import { CredentialsAPI, OrganizationsAPI } from '../../../api';
 
 jest.mock('../../../api');
 
 describe('<OrganizationAdd />', () => {
+  beforeEach(() => {
+    CredentialsAPI.read.mockResolvedValue({
+      data: {
+        results: [
+          {
+            id: 2,
+            type: 'credential',
+            name: 'Ansible Galaxy',
+            credential_type: 18,
+            managed_by_tower: true,
+            kind: 'galaxy_api_token',
+          },
+        ],
+      },
+    });
+  });
+
   test('onSubmit should post to api', async () => {
     const updatedOrgData = {
       name: 'new name',

awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx

@@ -117,6 +117,7 @@ function OrganizationForm({
   onCancel,
   onSubmit,
   submitError,
+  defaultGalaxyCredential,
   ...rest
 }) {
   const [contentError, setContentError] = useState(null);
@@ -181,7 +182,9 @@ function OrganizationForm({
         name: organization.name,
         description: organization.description,
         max_hosts: organization.max_hosts || '0',
-        galaxy_credentials: organization.galaxy_credentials || [],
+        galaxy_credentials:
+          organization.galaxy_credentials ||
+          (defaultGalaxyCredential ? [defaultGalaxyCredential] : []),
         default_environment:
           organization.summary_fields?.default_environment || null,
       }}
@@ -209,6 +212,7 @@ function OrganizationForm({
 }
 
 OrganizationForm.propTypes = {
+  defaultGalaxyCredential: PropTypes.shape(),
   organization: PropTypes.shape(),
   onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
@@ -216,6 +220,7 @@ OrganizationForm.propTypes = {
 };
 
 OrganizationForm.defaultProps = {
+  defaultGalaxyCredential: null,
   organization: {
     id: '',
     name: '',

awx/ui_next/src/screens/Organization/shared/OrganizationForm.test.jsx

@@ -47,6 +47,32 @@ describe('<OrganizationForm />', () => {
     jest.clearAllMocks();
   });
 
+  test('should render default galaxy credential when passed', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <OrganizationForm
+          onSubmit={jest.fn()}
+          onCancel={jest.fn()}
+          me={meConfig.me}
+          defaultGalaxyCredential={{
+            id: 2,
+            type: 'credential',
+            name: 'Ansible Galaxy',
+            credential_type: 18,
+            managed_by_tower: true,
+            kind: 'galaxy_api_token',
+          }}
+        />,
+        {
+          context: { network },
+        }
+      );
+    });
+    await waitForElement(wrapper, 'CredentialLookup', el => el.length === 1);
+    expect(wrapper.find('CredentialLookup Chip span')).toHaveLength(1);
+  });
+
   test('should request related instance groups from api', async () => {
     let wrapper;
     await act(async () => {