Add organization as part of creating/editing an execution environments

Add organization as part of creating/editing an execution environments If one is a `system admin` the Organization is an optional field. Not providing an Organization makes the execution environment globally available. If one is a `org admin` the Organization is a required field. See: https://github.com/ansible/awx/issues/7887
2026-01-11 10:00:01 -03:30 · 2020-10-02 17:27:12 -04:00 · 2020-10-02 17:27:12 -04:00 · 9786dc08d3
commit 9786dc08d3
parent ecaa66c13b
7 changed files with 118 additions and 30 deletions
--- a/awx/ui_next/src/components/Lookup/OrganizationLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/OrganizationLookup.jsx
@ -30,6 +30,7 @@ function OrganizationLookup({
  history,
  autoPopulate,
  isDisabled,
+  helperText,
 }) {
  const autoPopulateLookup = useAutoPopulateLookup(onChange);

@ -79,6 +80,7 @@ function OrganizationLookup({
      isRequired={required}
      validated={isValid ? 'default' : 'error'}
      label={i18n._(t`Organization`)}
+      helperText={helperText}
    >
      <Lookup
        isDisabled={isDisabled}
--- a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentAdd/ExecutionEnvironmentAdd.jsx
+++ b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentAdd/ExecutionEnvironmentAdd.jsx
@ -2,9 +2,10 @@ import React, { useState } from 'react';
 import { Card, PageSection } from '@patternfly/react-core';
 import { useHistory } from 'react-router-dom';

-import ExecutionEnvironmentForm from '../shared/ExecutionEnvironmentForm';
-import { CardBody } from '../../../components/Card';
 import { ExecutionEnvironmentsAPI } from '../../../api';
+import { Config } from '../../../contexts/Config';
+import { CardBody } from '../../../components/Card';
+import ExecutionEnvironmentForm from '../shared/ExecutionEnvironmentForm';

 function ExecutionEnvironmentAdd() {
  const history = useHistory();
@ -14,7 +15,8 @@ function ExecutionEnvironmentAdd() {
    try {
      const { data: response } = await ExecutionEnvironmentsAPI.create({
        ...values,
-        credential: values?.credential?.id,
+        credential: values.credential?.id,
+        organization: values.organization?.id,
      });
      history.push(`/execution_environments/${response.id}/details`);
    } catch (error) {
@ -29,11 +31,16 @@ function ExecutionEnvironmentAdd() {
    <PageSection>
      <Card>
        <CardBody>
-          <ExecutionEnvironmentForm
-            onSubmit={handleSubmit}
-            submitError={submitError}
-            onCancel={handleCancel}
-          />
+          <Config>
+            {({ me }) => (
+              <ExecutionEnvironmentForm
+                onSubmit={handleSubmit}
+                submitError={submitError}
+                onCancel={handleCancel}
+                me={me || {}}
+              />
+            )}
+          </Config>
        </CardBody>
      </Card>
    </PageSection>
--- a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentAdd/ExecutionEnvironmentAdd.test.jsx
+++ b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentAdd/ExecutionEnvironmentAdd.test.jsx
@ -8,6 +8,11 @@ import ExecutionEnvironmentAdd from './ExecutionEnvironmentAdd';

 jest.mock('../../../api');

+const mockMe = {
+  is_superuser: true,
+  is_system_auditor: false,
+};
+
 const executionEnvironmentData = {
  credential: 4,
  description: 'A simple EE',
@ -29,7 +34,7 @@ describe('<ExecutionEnvironmentAdd/>', () => {
      initialEntries: ['/execution_environments'],
    });
    await act(async () => {
-      wrapper = mountWithContexts(<ExecutionEnvironmentAdd />, {
+      wrapper = mountWithContexts(<ExecutionEnvironmentAdd me={mockMe} />, {
        context: { router: { history } },
      });
    });
--- a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentEdit/ExecutionEnvironmentEdit.jsx
+++ b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentEdit/ExecutionEnvironmentEdit.jsx
@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { CardBody } from '../../../components/Card';
 import { ExecutionEnvironmentsAPI } from '../../../api';
 import ExecutionEnvironmentForm from '../shared/ExecutionEnvironmentForm';
+import { Config } from '../../../contexts/Config';

 function ExecutionEnvironmentEdit({ executionEnvironment }) {
  const history = useHistory();
@ -15,6 +16,7 @@ function ExecutionEnvironmentEdit({ executionEnvironment }) {
      await ExecutionEnvironmentsAPI.update(executionEnvironment.id, {
        ...values,
        credential: values.credential ? values.credential.id : null,
+        organization: values.organization ? values.organization.id : null,
      });
      history.push(detailsUrl);
    } catch (error) {
@ -27,12 +29,17 @@ function ExecutionEnvironmentEdit({ executionEnvironment }) {
  };
  return (
    <CardBody>
-      <ExecutionEnvironmentForm
-        executionEnvironment={executionEnvironment}
-        onSubmit={handleSubmit}
-        submitError={submitError}
-        onCancel={handleCancel}
-      />
+      <Config>
+        {({ me }) => (
+          <ExecutionEnvironmentForm
+            executionEnvironment={executionEnvironment}
+            onSubmit={handleSubmit}
+            submitError={submitError}
+            onCancel={handleCancel}
+            me={me || {}}
+          />
+        )}
+      </Config>
    </CardBody>
  );
 }
--- a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentEdit/ExecutionEnvironmentEdit.test.jsx
+++ b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentEdit/ExecutionEnvironmentEdit.test.jsx
@ -9,6 +9,11 @@ import ExecutionEnvironmentEdit from './ExecutionEnvironmentEdit';

 jest.mock('../../../api');

+const mockMe = {
+  is_superuser: true,
+  is_system_auditor: false,
+};
+
 const executionEnvironmentData = {
  id: 42,
  credential: { id: 4 },
@ -31,6 +36,7 @@ describe('<ExecutionEnvironmentEdit/>', () => {
      wrapper = mountWithContexts(
        <ExecutionEnvironmentEdit
          executionEnvironment={executionEnvironmentData}
+          me={mockMe}
        />,
        {
          context: { router: { history } },
@ -53,6 +59,7 @@ describe('<ExecutionEnvironmentEdit/>', () => {
      expect(ExecutionEnvironmentsAPI.update).toHaveBeenCalledWith(42, {
        ...updateExecutionEnvironmentData,
        credential: null,
+        organization: null,
      });
    });

--- a/awx/ui_next/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.jsx
+++ b/awx/ui_next/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.jsx
@ -1,18 +1,42 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { func, shape } from 'prop-types';
-import { Formik, useField } from 'formik';
+import { Formik, useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-
 import { Form } from '@patternfly/react-core';
-import FormField, { FormSubmitError } from '../../../components/FormField';
-import FormActionGroup from '../../../components/FormActionGroup';
-import CredentialLookup from '../../../components/Lookup/CredentialLookup';
-import { url } from '../../../util/validators';
-import { FormColumnLayout } from '../../../components/FormLayout';

-function ExecutionEnvironmentFormFields({ i18n }) {
-  const [credentialField, , credentialHelpers] = useField('credential');
+import CredentialLookup from '../../../components/Lookup/CredentialLookup';
+import FormActionGroup from '../../../components/FormActionGroup';
+import FormField, { FormSubmitError } from '../../../components/FormField';
+import { FormColumnLayout } from '../../../components/FormLayout';
+import { OrganizationLookup } from '../../../components/Lookup';
+import { required, url } from '../../../util/validators';
+
+function ExecutionEnvironmentFormFields({ i18n, me, executionEnvironment }) {
+  const [credentialField] = useField('credential');
+  const [organizationField, organizationMeta, organizationHelpers] = useField({
+    name: 'organization',
+    validate:
+      !me?.is_superuser &&
+      required(i18n._(t`Select a value for this field`), i18n),
+  });
+
+  const { setFieldValue } = useFormikContext();
+
+  const onCredentialChange = useCallback(
+    value => {
+      setFieldValue('credential', value);
+    },
+    [setFieldValue]
+  );
+
+  const onOrganizationChange = useCallback(
+    value => {
+      setFieldValue('organization', value);
+    },
+    [setFieldValue]
+  );
+
  return (
    <>
      <FormField
@ -32,9 +56,26 @@ function ExecutionEnvironmentFormFields({ i18n }) {
        name="description"
        type="text"
      />
+      <OrganizationLookup
+        helperTextInvalid={organizationMeta.error}
+        isValid={!organizationMeta.touched || !organizationMeta.error}
+        onBlur={() => organizationHelpers.setTouched()}
+        onChange={onOrganizationChange}
+        value={organizationField.value}
+        required={!me.is_superuser}
+        helperText={
+          me?.is_superuser
+            ? i18n._(
+                t`Leave this field blank to make the execution environment globally available.`
+              )
+            : null
+        }
+        autoPopulate={!me?.is_superuser ? !executionEnvironment?.id : null}
+      />
+
      <CredentialLookup
        label={i18n._(t`Registry credential`)}
-        onChange={value => credentialHelpers.setValue(value)}
+        onChange={onCredentialChange}
        value={credentialField.value}
      />
    </>
@ -46,19 +87,21 @@ function ExecutionEnvironmentForm({
  onSubmit,
  onCancel,
  submitError,
+  me,
  ...rest
 }) {
  const initialValues = {
    image: executionEnvironment.image || '',
    description: executionEnvironment.description || '',
-    credential: executionEnvironment?.summary_fields?.credential || null,
+    credential: executionEnvironment.summary_fields?.credential || null,
+    organization: executionEnvironment.summary_fields?.organization || null,
  };
  return (
    <Formik initialValues={initialValues} onSubmit={values => onSubmit(values)}>
      {formik => (
        <Form autoComplete="off" onSubmit={formik.handleSubmit}>
          <FormColumnLayout>
-            <ExecutionEnvironmentFormFields {...rest} />
+            <ExecutionEnvironmentFormFields me={me} {...rest} />
            {submitError && <FormSubmitError error={submitError} />}
            <FormActionGroup
              onCancel={onCancel}
--- a/awx/ui_next/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.test.jsx
+++ b/awx/ui_next/src/screens/ExecutionEnvironment/shared/ExecutionEnvironmentForm.test.jsx
@ -6,6 +6,11 @@ import ExecutionEnvironmentForm from './ExecutionEnvironmentForm';

 jest.mock('../../../api');

+const mockMe = {
+  is_superuser: true,
+  is_super_auditor: false,
+};
+
 const executionEnvironment = {
  id: 16,
  type: 'execution_environment',
@ -47,6 +52,7 @@ describe('<ExecutionEnvironmentForm/>', () => {
          onCancel={onCancel}
          onSubmit={onSubmit}
          executionEnvironment={executionEnvironment}
+          me={mockMe}
        />
      );
    });
@ -75,8 +81,8 @@ describe('<ExecutionEnvironmentForm/>', () => {
    expect(onSubmit).toHaveBeenCalledTimes(1);
  });

-  test('should update form values', () => {
-    act(() => {
+  test('should update form values', async () => {
+    await act(async () => {
      wrapper.find('input#execution-environment-image').simulate('change', {
        target: {
          value: 'https://registry.com/image/container2',
@ -93,8 +99,19 @@ describe('<ExecutionEnvironmentForm/>', () => {
        id: 99,
        name: 'credential',
      });
+
+      wrapper.find('OrganizationLookup').invoke('onBlur')();
+      wrapper.find('OrganizationLookup').invoke('onChange')({
+        id: 3,
+        name: 'organization',
+      });
    });
+
    wrapper.update();
+    expect(wrapper.find('OrganizationLookup').prop('value')).toEqual({
+      id: 3,
+      name: 'organization',
+    });
    expect(
      wrapper.find('input#execution-environment-image').prop('value')
    ).toEqual('https://registry.com/image/container2');