diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
index 3ae7f51260..0727033c21 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
@@ -3,7 +3,6 @@ import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import { I18nProvider } from '@lingui/react';
import { ConfigContext } from '../../../../../src/context';
-import APIClient from '../../../../../src/api';
import OrganizationEdit from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit';
describe('', () => {
diff --git a/src/pages/Organizations/components/InstanceGroupsLookup.jsx b/src/pages/Organizations/components/InstanceGroupsLookup.jsx
new file mode 100644
index 0000000000..3edcd13cd1
--- /dev/null
+++ b/src/pages/Organizations/components/InstanceGroupsLookup.jsx
@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { I18n, i18nMark } from '@lingui/react';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { t } from '@lingui/macro';
+
+import Lookup from '../../../components/Lookup';
+
+const INSTANCE_GROUPS_LOOKUP_COLUMNS = [
+ { name: i18nMark('Name'), key: 'name', isSortable: true },
+ { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true },
+ { name: i18nMark('Created'), key: 'created', isSortable: false, isNumeric: true }
+];
+
+class InstanceGroupsLookup extends React.Component {
+ constructor (props) {
+ super(props);
+
+ this.getInstanceGroups = this.getInstanceGroups.bind(this);
+ }
+
+ async getInstanceGroups (params) {
+ const { api } = this.props;
+ const data = await api.getInstanceGroups(params);
+ return data;
+ }
+
+ render () {
+ const { value, onChange } = this.props;
+
+ return (
+
+ {({ i18n }) => (
+
+ {i18n._(t`Instance Groups`)}
+ {' '}
+
+
+
+
+ )}
+ fieldId="add-org-form-instance-groups"
+ >
+
+
+ )}
+
+ );
+ }
+}
+
+InstanceGroupsLookup.propTypes = {
+ api: PropTypes.shape({
+ getInstanceGroups: PropTypes.func,
+ }).isRequired,
+ value: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onChange: PropTypes.func.isRequired,
+};
+
+export default InstanceGroupsLookup;
diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
index 0560b588c5..70d620c075 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
@@ -11,15 +11,14 @@ import {
} from '@patternfly/react-core';
import { ConfigContext } from '../../../../context';
-import Lookup from '../../../../components/Lookup';
import FormActionGroup from '../../../../components/FormActionGroup';
import AnsibleSelect from '../../../../components/AnsibleSelect';
+import InstanceGroupsLookup from '../../components/InstanceGroupsLookup';
class OrganizationEdit extends Component {
constructor (props) {
super(props);
- this.getInstanceGroups = this.getInstanceGroups.bind(this);
this.getRelatedInstanceGroups = this.getRelatedInstanceGroups.bind(this);
this.checkValidity = this.checkValidity.bind(this);
this.onFieldChange = this.onFieldChange.bind(this);
@@ -130,12 +129,6 @@ class OrganizationEdit extends Component {
history.push(`/organizations/${id}`);
}
- async getInstanceGroups (params) {
- const { api } = this.props;
- const data = await api.getInstanceGroups(params);
- return data;
- }
-
async getRelatedInstanceGroups () {
const {
api,
@@ -179,6 +172,7 @@ class OrganizationEdit extends Component {
}
render () {
+ const { api } = this.props;
const {
form: {
name,
@@ -190,12 +184,6 @@ class OrganizationEdit extends Component {
error
} = this.state;
- const instanceGroupsLookupColumns = [
- { name: i18nMark('Name'), key: 'name', isSortable: true },
- { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true },
- { name: i18nMark('Created'), key: 'created', isSortable: false, isNumeric: true }
- ];
-
return (
@@ -249,20 +237,11 @@ class OrganizationEdit extends Component {
)}
-
-
-
+
0; // TODO: add better form validation
- const instanceGroupsLookupColumns = [
- { name: i18nMark('Name'), key: 'name', isSortable: true },
- { name: i18nMark('Modified'), key: 'modified', isSortable: false, isNumeric: true },
- { name: i18nMark('Created'), key: 'created', isSortable: false, isNumeric: true }
- ];
return (
@@ -153,31 +142,11 @@ class OrganizationAdd extends React.Component {
onChange={this.onFieldChange}
/>
-
- {i18n._(t`Instance Groups`)}
- {' '}
-
-
-
-
- )}
- fieldId="add-org-form-instance-groups"
- >
-
-
+
{({ custom_virtualenvs }) => (
custom_virtualenvs && custom_virtualenvs.length > 1 && (