Implement basic lookup modal component.

src/components/Lookup/Lookup.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import { SearchIcon } from '@patternfly/react-icons';
+import {
+  Modal,
+  List,
+  ListItem,
+  Checkbox,
+  Button,
+  ActionGroup,
+  Toolbar,
+  ToolbarGroup,
+} from '@patternfly/react-core';
+
+class Lookup extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isModalOpen: false,
+    }
+    this.handleModalToggle = this.handleModalToggle.bind(this);
+    this.onLookup = this.onLookup.bind(this);
+    this.onChecked = this.onChecked.bind(this);
+    this.wrapTags = this.wrapTags.bind(this);
+  }
+
+  handleModalToggle() {
+    this.setState((prevState, _) => ({
+      isModalOpen: !prevState.isModalOpen,
+    }));
+  };
+
+  onLookup() {
+    this.handleModalToggle();
+  }
+
+  onChecked(_, 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>
+      )
+    })
+  }
+
+  render() {
+    const { isModalOpen } = this.state;
+    const { data } = this.props;
+    return (
+      <div className="pf-c-input-group awx-lookup">
+        <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
+          title={`Select ${this.props.lookup_header}`}
+          isOpen={isModalOpen}
+          onClose={this.handleModalToggle}
+        >
+          <List>
+            {data.map(i =>
+              <ListItem key={i.id}>
+                <Checkbox
+                  label={i.name}
+                  isChecked={i.isChecked}
+                  onChange={this.onChecked}
+                  aria-label="result checkbox"
+                  id={`${i.id}`}
+                />
+              </ListItem>)}
+          </List>
+          <ActionGroup className="at-align-right">
+            <Toolbar>
+              <ToolbarGroup>
+                <Button className="at-C-SubmitButton" variant="primary" onClick={this.handleModalToggle} >Select</Button>
+              </ToolbarGroup>
+              <ToolbarGroup>
+                <Button className="at-C-CancelButton" variant="secondary" onClick={this.handleModalToggle}>Cancel</Button>
+              </ToolbarGroup>
+            </Toolbar>
+          </ActionGroup>
+        </Modal>
+      </div>
+    )
+  }
+}
+export default Lookup;

src/components/Lookup/index.js

@@ -0,0 +1,3 @@
+import Lookup from './Lookup';
+
+export default Lookup;