create InstanceGroupsLookup for org add/edit forms

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 }) => (
+          <FormGroup
+            label={(
+              <Fragment>
+                {i18n._(t`Instance Groups`)}
+                {' '}
+                <Tooltip
+                  position="right"
+                  content={i18n._(t`Select the Instance Groups for this Organization to run on.`)}
+                >
+                  <QuestionCircleIcon />
+                </Tooltip>
+              </Fragment>
+            )}
+            fieldId="add-org-form-instance-groups"
+          >
+            <Lookup
+              lookupHeader={i18n._(t`Instance Groups`)}
+              name="instanceGroups"
+              value={value}
+              onLookupSave={onChange}
+              getItems={this.getInstanceGroups}
+              columns={INSTANCE_GROUPS_LOOKUP_COLUMNS}
+              sortedColumnKey="name"
+            />
+          </FormGroup>
+        )}
+      </I18n>
+    );
+  }
+}
+
+InstanceGroupsLookup.propTypes = {
+  api: PropTypes.shape({
+    getInstanceGroups: PropTypes.func,
+  }).isRequired,
+  value: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InstanceGroupsLookup;

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 (
       <CardBody>
         <I18n>
@@ -249,20 +237,11 @@ class OrganizationEdit extends Component {
                   )}
                 </ConfigContext.Consumer>
               </div>
-              <FormGroup
-                fieldId="edit-org-form-instance-groups"
-                label={i18n._(t`Instance Groups`)}
-              >
-                <Lookup
-                  columns={instanceGroupsLookupColumns}
-                  getItems={this.getInstanceGroups}
-                  lookupHeader={i18n._(t`Instance Groups`)}
-                  name="instanceGroups"
-                  onLookupSave={this.onLookupSave}
-                  sortedColumnKey="name"
-                  value={instanceGroups.value}
-                />
-              </FormGroup>
+              <InstanceGroupsLookup
+                api={api}
+                value={instanceGroups.value}
+                onChange={this.onLookupSave}
+              />
               <FormActionGroup
                 onCancel={this.onCancel}
                 onSubmit={this.onSubmit}

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import { I18n, i18nMark } from '@lingui/react';
+import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   PageSection,
@@ -18,15 +18,14 @@ import {
 import { QuestionCircleIcon, TimesIcon } from '@patternfly/react-icons';
 
 import { ConfigContext } from '../../../context';
-import Lookup from '../../../components/Lookup';
 import AnsibleSelect from '../../../components/AnsibleSelect';
 import FormActionGroup from '../../../components/FormActionGroup';
+import InstanceGroupsLookup from '../components/InstanceGroupsLookup';
 
 class OrganizationAdd extends React.Component {
   constructor (props) {
     super(props);
 
-    this.getInstanceGroups = this.getInstanceGroups.bind(this);
     this.onFieldChange = this.onFieldChange.bind(this);
     this.onLookupSave = this.onLookupSave.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
@@ -88,13 +87,8 @@ class OrganizationAdd extends React.Component {
     history.push(`/organizations/${id}`);
   }
 
-  async getInstanceGroups (params) {
-    const { api } = this.props;
-    const data = await api.getInstanceGroups(params);
-    return data;
-  }
-
   render () {
+    const { api } = this.props;
     const {
       name,
       description,
@@ -104,11 +98,6 @@ class OrganizationAdd extends React.Component {
       error
     } = this.state;
     const enabled = name.length > 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 (
       <PageSection>
@@ -153,31 +142,11 @@ class OrganizationAdd extends React.Component {
                         onChange={this.onFieldChange}
                       />
                     </FormGroup>
-                    <FormGroup
-                      label={(
-                        <Fragment>
-                          {i18n._(t`Instance Groups`)}
-                          {' '}
-                          <Tooltip
-                            position="right"
-                            content={i18n._(t`Select the Instance Groups for this Organization to run on.`)}
-                          >
-                            <QuestionCircleIcon />
-                          </Tooltip>
-                        </Fragment>
-                      )}
-                      fieldId="add-org-form-instance-groups"
-                    >
-                      <Lookup
-                        lookupHeader={i18n._(t`Instance Groups`)}
-                        name="instanceGroups"
-                        value={instanceGroups}
-                        onLookupSave={this.onLookupSave}
-                        getItems={this.getInstanceGroups}
-                        columns={instanceGroupsLookupColumns}
-                        sortedColumnKey="name"
-                      />
-                    </FormGroup>
+                    <InstanceGroupsLookup
+                      api={api}
+                      value={instanceGroups}
+                      onChange={this.onLookupSave}
+                    />
                     <ConfigContext.Consumer>
                       {({ custom_virtualenvs }) => (
                         custom_virtualenvs && custom_virtualenvs.length > 1 && (