add instance groups to JT form

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

@@ -68,6 +68,9 @@ class JobTemplateForm extends Component {
     this.loadRelatedProjectPlaybooks = this.loadRelatedProjectPlaybooks.bind(
       this
     );
+    this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(
+      this
+    );
   }
 
   componentDidMount() {
@@ -116,6 +119,7 @@ class JobTemplateForm extends Component {
       return;
     }
     try {
+      console.log('loading...');
       const { data } = await JobTemplatesAPI.readInstanceGroups(template.id);
       console.log(data.results);
     } catch (err) {
@@ -217,6 +221,10 @@ class JobTemplateForm extends Component {
     };
   }
 
+  handleInstanceGroupsChange(relatedInstanceGroups) {
+    this.setState({ relatedInstanceGroups });
+  }
+
   render() {
     const {
       loadedLabels,
@@ -225,6 +233,9 @@ class JobTemplateForm extends Component {
       inventory,
       project,
       relatedProjectPlaybooks = [],
+      newLabels,
+      removedLabels,
+      relatedInstanceGroups,
     } = this.state;
     const {
       handleCancel,
@@ -522,8 +533,7 @@ class JobTemplateForm extends Component {
                   <div>
                     <Switch
                       id="template-show-changes"
-                          label={i18n._(t`On`)}
+                      label={field.value ? i18n._(t`On`) : i18n._(t`Off`)}
-                          labelOff={i18n._(t`Off`)}
                       isChecked={field.value}
                       onChange={checked =>
                         form.setFieldValue(field.name, checked)
@@ -534,13 +544,13 @@ class JobTemplateForm extends Component {
               )}
             />
           </FormRow>
-              {/* <InstanceGroupsLookup
+          <InstanceGroupsLookup
-                value={instanceGroups}
+            value={relatedInstanceGroups}
             onChange={this.handleInstanceGroupsChange}
             tooltip={i18n._(
               t`Select the Instance Groups for this Organization to run on.`
             )}
-              /> */}
+          />
         </CollapsibleSection>
         <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
       </Form>

awx/ui_next/src/util/omitProps.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 
+/*
+ * Prevents styled-components from passing down an unsupported
+ * props to children, resulting in console warnings.
+ * https://github.com/styled-components/styled-components/issues/439
+ */
 export default function omitProps(Component, ...omit) {
   return function Omit(props) {
     const clean = { ...props };

awx/ui_next/src/util/omitProps.test.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import omitProps from './omitProps';
+
+describe('omitProps', () => {
+  test('should render child component', () => {
+    const Omit = omitProps('div');
+    const wrapper = mount(<Omit foo="one" bar="two" />);
+
+    const div = wrapper.find('div');
+    expect(div).toHaveLength(1);
+    expect(div.prop('foo')).toEqual('one');
+    expect(div.prop('bar')).toEqual('two');
+  });
+
+  test('should not pass omitted props to child component', () => {
+    const Omit = omitProps('div', 'foo', 'bar');
+    const wrapper = mount(<Omit foo="one" bar="two" />);
+
+    const div = wrapper.find('div');
+    expect(div).toHaveLength(1);
+    expect(div.prop('foo')).toEqual(undefined);
+    expect(div.prop('bar')).toEqual(undefined);
+  });
+
+  test('should support mix of omitted and non-omitted props', () => {
+    const Omit = omitProps('div', 'foo');
+    const wrapper = mount(<Omit foo="one" bar="two" />);
+
+    const div = wrapper.find('div');
+    expect(div).toHaveLength(1);
+    expect(div.prop('foo')).toEqual(undefined);
+    expect(div.prop('bar')).toEqual('two');
+  });
+})