refactor lookup components

awx/ui_next/src/components/Lookup/index.js

@@ -1 +1,3 @@
 export { default } from './Lookup';
+export { default as InstanceGroupsLookup } from './InstanceGroupsLookup';
+export { default as InventoriesLookup } from './InventoriesLookup';

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

@@ -15,10 +15,9 @@ import FormRow from '@components/FormRow';
 import FormField from '@components/FormField';
 import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
 import AnsibleSelect from '@components/AnsibleSelect';
+import { InstanceGroupsLookup } from '@components/Lookup/';
 import { required, minMaxValue } from '@util/validators';
 
-import InstanceGroupsLookup from './InstanceGroupsLookup';
-
 class OrganizationForm extends Component {
   constructor(props) {
     super(props);

awx/ui_next/src/screens/Organization/shared/index.js

@@ -1,2 +1,2 @@
-export { default as InstanceGroupsLookup } from './InstanceGroupsLookup';
+/* eslint-disable-next-line import/prefer-default-export */
 export { default as OrganizationForm } from './OrganizationForm';

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -17,18 +17,13 @@ import CollapsibleSection from '@components/CollapsibleSection';
 import { required } from '@util/validators';
 import styled from 'styled-components';
 import { JobTemplate } from '@types';
-import InventoriesLookup from './InventoriesLookup';
+import { InventoriesLookup, InstanceGroupsLookup } from '@components/Lookup';
 import ProjectLookup from './ProjectLookup';
-import { LabelsAPI, ProjectsAPI } from '@api';
+import { JobTemplatesAPI, LabelsAPI, ProjectsAPI } from '@api';
 
 const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
   margin-left: 10px;
 `;
-const QSConfig = {
-  page: 1,
-  page_size: 200,
-  order_by: 'name',
-};
 
 class JobTemplateForm extends Component {
   static propTypes = {
@@ -64,6 +59,7 @@ class JobTemplateForm extends Component {
       project: props.template.summary_fields.project,
       inventory: props.template.summary_fields.inventory,
       relatedProjectPlaybooks: props.relatedProjectPlaybooks,
+      relatedInstanceGroups: [],
     };
     this.handleNewLabel = this.handleNewLabel.bind(this);
     this.loadLabels = this.loadLabels.bind(this);
@@ -74,21 +70,29 @@ class JobTemplateForm extends Component {
     );
   }
 
-  async componentDidMount() {
+  componentDidMount() {
     const { validateField } = this.props;
-    await this.loadLabels(QSConfig);
     validateField('project');
+    this.setState({ contentError: null, hasContentLoading: true });
+    Promise.all([this.loadLabels(), this.loadRelatedInstanceGroups()]).then(
+      () => {
+        this.setState({ hasContentLoading: false });
+      }
+    );
   }
 
-  async loadLabels(QueryConfig) {
+  async loadLabels() {
     // This function assumes that the user has no more than 400
     // labels. For the vast majority of users this will be more thans
     // enough. This can be updated to allow more than 400 labels if we
     // decide it is necessary.
-    this.setState({ contentError: null, hasContentLoading: true });
     let loadedLabels;
     try {
-      const { data } = await LabelsAPI.read(QueryConfig);
+      const { data } = await LabelsAPI.read({
+        page: 1,
+        page_size: 200,
+        order_by: 'name',
+      });
       loadedLabels = [...data.results];
       if (data.next && data.next.includes('page=2')) {
         const {
@@ -103,8 +107,19 @@ class JobTemplateForm extends Component {
       this.setState({ loadedLabels });
     } catch (err) {
       this.setState({ contentError: err });
-    } finally {
+    }
-      this.setState({ hasContentLoading: false });
+  }
+
+  async loadRelatedInstanceGroups() {
+    const { template } = this.props;
+    if (!template.id) {
+      return;
+    }
+    try {
+      const { data } = await JobTemplatesAPI.readInstanceGroups(template.id);
+      console.log(data.results);
+    } catch (err) {
+      this.setState({ contentError: err });
     }
   }
 
@@ -519,6 +534,13 @@ class JobTemplateForm extends Component {
                   )}
                 />
               </FormRow>
+              {/* <InstanceGroupsLookup
+                value={instanceGroups}
+                onChange={this.handleInstanceGroupsChange}
+                tooltip={i18n._(
+                  t`Select the Instance Groups for this Organization to run on.`
+                )}
+              /> */}
         </CollapsibleSection>
         <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
       </Form>
@@ -541,7 +563,7 @@ const FormikApp = withFormik({
       verbosity,
       job_slicing,
       timeout,
-      diff_mode
+      diff_mode,
       summary_fields = { labels: { results: [] } },
     } = { ...template };