Merge pull request #9639 from nixocio/ui_issue_9628

Filter credential type by Container Registry for EE

Filter credential type by Container Registry for EE form.
See: #9628

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentAdd/ExecutionEnvironmentAdd.test.jsx

@@ -6,7 +6,7 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import { ExecutionEnvironmentsAPI } from '../../../api';
+import { ExecutionEnvironmentsAPI, CredentialTypesAPI } from '../../../api';
 import ExecutionEnvironmentAdd from './ExecutionEnvironmentAdd';
 
 jest.mock('../../../api');
@@ -22,6 +22,17 @@ const executionEnvironmentData = {
   description: 'A simple EE',
   image: 'https://registry.com/image/container',
   pull: 'one',
+  summary_fields: {
+    credential: {
+      id: 4,
+      name: 'Container Registry',
+      description: '',
+      kind: 'registry',
+      cloud: false,
+      kubernetes: false,
+      credential_type_id: 17,
+    },
+  },
 };
 
 const mockOptions = {
@@ -40,18 +51,32 @@ const mockOptions = {
   },
 };
 
-ExecutionEnvironmentsAPI.readOptions.mockResolvedValue(mockOptions);
-ExecutionEnvironmentsAPI.create.mockResolvedValue({
+const containerRegistryCredentialResolve = {
   data: {
-    id: 42,
+    results: [
+      {
+        id: 4,
+        name: 'Container Registry',
+        kind: 'registry',
+      },
+    ],
   },
-});
+};
 
 describe('<ExecutionEnvironmentAdd/>', () => {
   let wrapper;
   let history;
 
   beforeEach(async () => {
+    ExecutionEnvironmentsAPI.readOptions.mockResolvedValue(mockOptions);
+    ExecutionEnvironmentsAPI.create.mockResolvedValue({
+      data: {
+        id: 42,
+      },
+    });
+    CredentialTypesAPI.read.mockResolvedValue(
+      containerRegistryCredentialResolve
+    );
     history = createMemoryHistory({
       initialEntries: ['/execution_environments'],
     });

awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentEdit/ExecutionEnvironmentEdit.test.jsx

@@ -3,7 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import { ExecutionEnvironmentsAPI } from '../../../api';
+import { ExecutionEnvironmentsAPI, CredentialTypesAPI } from '../../../api';
 
 import ExecutionEnvironmentEdit from './ExecutionEnvironmentEdit';
 
@@ -44,13 +44,27 @@ const mockOptions = {
   },
 };
 
-ExecutionEnvironmentsAPI.readOptions.mockResolvedValue(mockOptions);
+const containerRegistryCredentialResolve = {
+  data: {
+    results: [
+      {
+        id: 4,
+        name: 'Container Registry',
+        kind: 'registry',
+      },
+    ],
+  },
+};
 
 describe('<ExecutionEnvironmentEdit/>', () => {
   let wrapper;
   let history;
 
   beforeAll(async () => {
+    ExecutionEnvironmentsAPI.readOptions.mockResolvedValue(mockOptions);
+    CredentialTypesAPI.read.mockResolvedValue(
+      containerRegistryCredentialResolve
+    );
     history = createMemoryHistory();
     await act(async () => {
       wrapper = mountWithContexts(

awx/ui_next/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.jsx

@@ -23,7 +23,9 @@ function ExecutionEnvironmentFormFields({
   options,
   executionEnvironment,
 }) {
-  const [credentialField] = useField('credential');
+  const [credentialField, credentialMeta, credentialHelpers] = useField(
+    'credential'
+  );
   const [organizationField, organizationMeta, organizationHelpers] = useField({
     name: 'organization',
     validate:
@@ -124,8 +126,15 @@ function ExecutionEnvironmentFormFields({
 
       <CredentialLookup
         label={i18n._(t`Registry credential`)}
+        credentialTypeKind="registry"
+        helperTextInvalid={credentialMeta.error}
+        isValid={!credentialMeta.touched || !credentialMeta.error}
+        onBlur={() => credentialHelpers.setTouched()}
         onChange={onCredentialChange}
         value={credentialField.value}
+        tooltip={i18n._(
+          t`Credential to authenticate with a protected container registry.`
+        )}
       />
     </>
   );

awx/ui_next/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.test.jsx

@@ -4,7 +4,7 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import { ExecutionEnvironmentsAPI } from '../../../api';
+import { ExecutionEnvironmentsAPI, CredentialTypesAPI } from '../../../api';
 
 import ExecutionEnvironmentForm from './ExecutionEnvironmentForm';
 
@@ -33,6 +33,11 @@ const executionEnvironment = {
     credential: {
       id: 4,
       name: 'Container Registry',
+      description: '',
+      kind: 'registry',
+      cloud: false,
+      kubernetes: false,
+      credential_type_id: 17,
     },
   },
   created: '2020-09-17T16:06:57.346128Z',
@@ -60,6 +65,18 @@ const mockOptions = {
   },
 };
 
+const containerRegistryCredentialResolve = {
+  data: {
+    results: [
+      {
+        id: 4,
+        name: 'Container Registry',
+        kind: 'registry',
+      },
+    ],
+  },
+};
+
 describe('<ExecutionEnvironmentForm/>', () => {
   let wrapper;
   let onCancel;
@@ -69,6 +86,9 @@ describe('<ExecutionEnvironmentForm/>', () => {
     onCancel = jest.fn();
     onSubmit = jest.fn();
     ExecutionEnvironmentsAPI.readOptions.mockResolvedValue(mockOptions);
+    CredentialTypesAPI.read.mockResolvedValue(
+      containerRegistryCredentialResolve
+    );
     await act(async () => {
       wrapper = mountWithContexts(
         <ExecutionEnvironmentForm