Hook up 'x' remove button; rename ListItem component.

src/app.scss

@@ -135,7 +135,7 @@
     cursor: pointer;
   }
 }
-.awx-pill {
+.awx-c-tag--pill {
   color: white;
   background-color: rgb(0, 123, 186);
   border-radius: 3px;
@@ -151,17 +151,27 @@
   flex-direction: row;
   justify-content: flex-end;
 }
-
+//
+// list styles
+//
 .awx-c-list {
   border-top: 1px solid #d7d7d7;
   border-bottom: 1px solid #d7d7d7;
 }
-
+//
+// pf modal overrides
+//
 .awx-c-modal {
   width: 550px;
   margin: 0;
 }
 
+.awx-c-icon--remove {
+  padding-left: 10px;
+  &:hover {
+    cursor: pointer;
+  }
+}
 .pf-c-modal-box__footer {
   --pf-c-modal-box__footer--PaddingTop: 0;
   --pf-c-modal-box__footer--PaddingBottom: 0;

src/components/ListItem/CheckboxListItem.jsx

@@ -26,9 +26,9 @@ export default ({
         </I18n>
       </div>
       <div className="pf-c-data-list__cell">
-        <span id="check-action-item1">
+        <label htmlFor={`selectd-${itemId}`} id="check-action-item1">
           <b>{name}</b>
-        </span>
+        </label>
       </div>
     </li>
   );

src/components/ListItem/index.js

@@ -1,3 +1,3 @@
-import ListItem from './ListItem';
+import CheckboxListItem from './CheckboxListItem';
 
-export default ListItem;
+export default CheckboxListItem;

src/components/Lookup/Lookup.jsx

@@ -9,7 +9,7 @@ import {
   ToolbarGroup,
 } from '@patternfly/react-core';
 
-import ListItem from '../ListItem'
+import CheckboxListItem from '../CheckboxListItem'
 
 class Lookup extends React.Component {
   constructor(props) {
@@ -21,6 +21,7 @@ class Lookup extends React.Component {
     this.onLookup = this.onLookup.bind(this);
     this.onChecked = this.onChecked.bind(this);
     this.wrapTags = this.wrapTags.bind(this);
+    this.onRemove = this.onRemove.bind(this);
   }
 
   handleModalToggle() {
@@ -37,10 +38,13 @@ class Lookup extends React.Component {
     this.props.lookupChange(evt.target.value);
   };
 
+  onRemove(evt) {
+    this.props.lookupChange(evt.target.id);
+  }
   wrapTags(tags) {
     return tags.filter(tag => tag.isChecked).map((tag, index) => {
       return (
-        <span className="awx-pill" key={index}>{tag.name}</span>
+        <span className="awx-c-tag--pill" key={index}>{tag.name}<span className="awx-c-icon--remove" id={tag.id} onClick={this.onRemove}>x</span></span>
       )
     })
   }
@@ -53,7 +57,6 @@ 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}
@@ -61,7 +64,7 @@ class Lookup extends React.Component {
         >
           <ul className="pf-c-data-list awx-c-list">
             {data.map(i =>
-              <ListItem
+              <CheckboxListItem
                 key={i.id}
                 itemId={i.id}
                 name={i.name}

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -30,7 +30,6 @@ class OrganizationAdd extends React.Component {
     this.onSelectChange = this.onSelectChange.bind(this);
     this.onLookupChange = this.onLookupChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
-    this.resetForm = this.resetForm.bind(this);
     this.onCancel = this.onCancel.bind(this);
   }
 
@@ -75,7 +74,6 @@ class OrganizationAdd extends React.Component {
     const data = Object.assign({}, { ...this.state });
     try {
       const { data: response } = await api.createOrganization(data);
-      console.log(response);
       const url = response.related.instance_groups;
       const selected = this.state.results.filter(group => group.isChecked);
       try {
@@ -153,7 +151,6 @@ class OrganizationAdd extends React.Component {
                       onChange={this.handleChange}
                     />
                   </FormGroup>
-                  {/* LOOKUP MODAL PLACEHOLDER */}
                   <FormGroup label="Instance Groups" fieldId="simple-form-instance-groups">
                     <Lookup
                       lookup_header="Instance Groups"