Hook up add instance group functionality.

src/api.js

@@ -4,6 +4,7 @@ const API_LOGOUT = `${API_ROOT}logout/`;
 const API_V2 = `${API_ROOT}v2/`;
 const API_CONFIG = `${API_V2}config/`;
 const API_ORGANIZATIONS = `${API_V2}organizations/`;
+const API_INSTANCE_GROUPS = `${API_V2}instance_groups/`;
 
 const LOGIN_CONTENT_TYPE = 'application/x-www-form-urlencoded';
 
@@ -68,6 +69,20 @@ class APIClient {
 
     return this.http.get(endpoint);
   }
+
+  getInstanceGroups (){
+    return this.http.get(API_INSTANCE_GROUPS);
+  }
+
+  createInstanceGroups (url, selected) {
+    if (selected.length > 0) {
+      selected.forEach(select => {
+        this.http.post(url, { id: select.id });
+      });
+    }
+    return false;
+  }
+
 }
 
 export default APIClient;

src/app.scss

@@ -127,9 +127,6 @@
   }
 }
 
-.pf-c-modal-box {
-  width: 70%;
-}
 .awx-lookup {
   min-height: 36px;
 }

src/components/Lookup/Lookup.jsx

@@ -35,7 +35,7 @@ class Lookup extends React.Component {
   }
 
   onChecked(_, evt) {
-    this.props.lookupChange(evt.target.id);
+    this.props.lookupChange(evt.target.value);
   };
 
   wrapTags(tags) {
@@ -54,7 +54,7 @@ class Lookup extends React.Component {
         <span className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.onLookup}><SearchIcon /></span>
         <div className="pf-c-form-control">{this.wrapTags(this.props.data)}</div>
         <Modal
-          isLarge
+          className="awx-c-modal"
           title={`Select ${this.props.lookup_header}`}
           isOpen={isModalOpen}
           onClose={this.handleModalToggle}
@@ -64,10 +64,11 @@ class Lookup extends React.Component {
               <ListItem key={i.id}>
                 <Checkbox
                   label={i.name}
-                  isChecked={i.isChecked}
+                  checked={i.isChecked}
                   onChange={this.onChecked}
                   aria-label="result checkbox"
-                  id={`${i.id}`}
+                  id={`checked-${i.id}`}
+                  value={i.id}
                 />
               </ListItem>)}
           </List>

src/pages/Organizations/views/Organization.add.jsx

@@ -19,11 +19,9 @@ import {
 } from '@patternfly/react-core';
 
 import { ConfigContext } from '../../../context';
-import api from '../../../api';
 import Lookup from '../../../components/Lookup';
 import AnsibleSelect from '../../../components/AnsibleSelect'
 const { light } = PageSectionVariants;
-
 class OrganizationAdd extends React.Component {
   constructor(props) {
     super(props);
@@ -58,10 +56,14 @@ class OrganizationAdd extends React.Component {
 
   resetForm() {
     this.setState({
-      ...this.state,
       name: '',
-      description: ''
+      description: '',
+    });
+    let reset = [];
+    this.state.results.map((result) => {
+      reset.push({ id: result.id, name: result.name, isChecked: false });
     })
+    this.setState({ results: reset });
   }
 
   handleChange(_, evt) {
@@ -71,7 +73,10 @@ class OrganizationAdd extends React.Component {
   async onSubmit() {
     const { api } = this.props;
     const data = Object.assign({}, { ...this.state });
-    await api.createOrganization(data);
+    const { data: response } = await api.createOrganization(data);
+    const url = response.related.instance_groups;
+    const selected = this.state.results.filter(group => group.isChecked);
+    await api.createInstanceGroups(url, selected);
     this.resetForm();
   }