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
+    // 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 });
     }
   }
 
@@ -424,101 +439,108 @@ class JobTemplateForm extends Component {
           </FormGroup>
         </FormRow>
         <CollapsibleSection label="Advanced">
-          <FormRow>
-            <FormField
-              id="template-forks"
-              name="forks"
-              type="number"
-              label={i18n._(t`Forks`)}
-              tooltip={
-                <span>
-                  {i18n._(t`The number of parallel or simultaneous
-              processes to use while executing the playbook. An empty value,
-              or a value less than 1 will use the Ansible default which is
-              usually 5. The default number of forks can be overwritten
-              with a change to`)}{' '}
-                  <code>ansible.cfg</code>.{' '}
-                  {i18n._(t`Refer to the Ansible documentation for details
-                  about the configuration file.`)}
-                </span>
-              }
-            />
-            <FormField
-              id="template-limit"
-              name="limit"
-              type="text"
-              label={i18n._(t`Limit`)}
-              tooltip={i18n._(t`Provide a host pattern to further constrain
-              the list of hosts that will be managed or affected by the
-              playbook. Multiple patterns are allowed. Refer to Ansible
-              documentation for more information and examples on patterns.`)}
-            />
-            <Field
-              name="verbosity"
-              render={({ field }) => (
-                <FormGroup
-                  fieldId="template-verbosity"
-                  label={i18n._(t`Verbosity`)}
-                >
-                  <Tooltip
-                    position="right"
-                    content={i18n._(t`Control the level of output ansible will
-                    produce as the playbook executes.`)}
-                  >
-                    <QuestionCircleIcon />
-                  </Tooltip>
-                  <AnsibleSelect data={verbosityOptions} {...field} />
-                </FormGroup>
-              )}
-            />
-            <FormField
-              id="template-job-slicing"
-              name="job_slice_count"
-              type="number"
-              label={i18n._(t`Job Slicing`)}
-              tooltip={i18n._(t`Divide the work done by this job template
-                into the specified number of job slices, each running the
-                same tasks against a portion of the inventory.`)}
-            />
-            <FormField
-              id="template-timeout"
-              name="timeout"
-              type="number"
-              label={i18n._(t`Timeout`)}
-              tooltip={i18n._(t`The amount of time (in seconds) to run
-                before the task is canceled. Defaults to 0 for no job
-                timeout.`)}
-            />
-            <Field
-              name="diff_mode"
-              render={({ field, form }) => (
-                <FormGroup
-                  fieldId="template-show-changes"
-                  label={i18n._(t`Show Changes`)}
-                >
-                  <Tooltip
-                    position="right"
-                    content={i18n._(t`If enabled, show the changes made by
-                      Ansible tasks, where supported. This is equivalent
-                      to Ansible&#x2019s --diff mode.`)}
-                  >
-                    <QuestionCircleIcon />
-                  </Tooltip>
-                  <div>
-                    <Switch
-                      id="template-show-changes"
-                      label={i18n._(t`On`)}
-                      labelOff={i18n._(t`Off`)}
-                      isChecked={field.value}
-                      onChange={checked =>
-                        form.setFieldValue(field.name, checked)
-                      }
-                    />
-                  </div>
-                </FormGroup>
-              )}
-            />
-          </FormRow>
+              <FormRow>
+                <FormField
+                  id="template-forks"
+                  name="forks"
+                  type="number"
+                  label={i18n._(t`Forks`)}
+                  tooltip={
+                    <span>
+                      {i18n._(t`The number of parallel or simultaneous
+                  processes to use while executing the playbook. An empty value,
+                  or a value less than 1 will use the Ansible default which is
+                  usually 5. The default number of forks can be overwritten
+                  with a change to`)}{' '}
+                      <code>ansible.cfg</code>.{' '}
+                      {i18n._(t`Refer to the Ansible documentation for details
+                      about the configuration file.`)}
+                    </span>
+                  }
+                />
+                <FormField
+                  id="template-limit"
+                  name="limit"
+                  type="text"
+                  label={i18n._(t`Limit`)}
+                  tooltip={i18n._(t`Provide a host pattern to further constrain
+                  the list of hosts that will be managed or affected by the
+                  playbook. Multiple patterns are allowed. Refer to Ansible
+                  documentation for more information and examples on patterns.`)}
+                />
+                <Field
+                  name="verbosity"
+                  render={({ field }) => (
+                    <FormGroup
+                      fieldId="template-verbosity"
+                      label={i18n._(t`Verbosity`)}
+                    >
+                      <Tooltip
+                        position="right"
+                        content={i18n._(t`Control the level of output ansible will
+                        produce as the playbook executes.`)}
+                      >
+                        <QuestionCircleIcon />
+                      </Tooltip>
+                      <AnsibleSelect data={verbosityOptions} {...field} />
+                    </FormGroup>
+                  )}
+                />
+                <FormField
+                  id="template-job-slicing"
+                  name="job_slice_count"
+                  type="number"
+                  label={i18n._(t`Job Slicing`)}
+                  tooltip={i18n._(t`Divide the work done by this job template
+                    into the specified number of job slices, each running the
+                    same tasks against a portion of the inventory.`)}
+                />
+                <FormField
+                  id="template-timeout"
+                  name="timeout"
+                  type="number"
+                  label={i18n._(t`Timeout`)}
+                  tooltip={i18n._(t`The amount of time (in seconds) to run
+                    before the task is canceled. Defaults to 0 for no job
+                    timeout.`)}
+                />
+                <Field
+                  name="diff_mode"
+                  render={({ field, form }) => (
+                    <FormGroup
+                      fieldId="template-show-changes"
+                      label={i18n._(t`Show Changes`)}
+                    >
+                      <Tooltip
+                        position="right"
+                        content={i18n._(t`If enabled, show the changes made by
+                          Ansible tasks, where supported. This is equivalent
+                          to Ansible&#x2019s --diff mode.`)}
+                      >
+                        <QuestionCircleIcon />
+                      </Tooltip>
+                      <div>
+                        <Switch
+                          id="template-show-changes"
+                          label={i18n._(t`On`)}
+                          labelOff={i18n._(t`Off`)}
+                          isChecked={field.value}
+                          onChange={checked =>
+                            form.setFieldValue(field.name, checked)
+                          }
+                        />
+                      </div>
+                    </FormGroup>
+                  )}
+                />
+              </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 };