conflict in explorer layout

embark-ui/src/components/Console.js

@@ -4,7 +4,7 @@ import Convert from 'ansi-to-html';
 
 import { Col, Row, Card, CardBody, CardFooter, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import classnames from 'classnames';
-import {AsyncTypeahead} from 'react-bootstrap-typeahead'
+import {AsyncTypeahead} from 'react-bootstrap-typeahead';
 import ReactJson from 'react-json-view';
 
 import Logs from "./Logs";
@@ -23,7 +23,7 @@ class Console extends Component {
     event.preventDefault();
     this.props.postCommand(this.state.value);
     this.setState({value: ''});
-    this.typeahead.getInstance().clear()
+    this.typeahead.getInstance().clear();
   }
 
   handleChange(value, cb) {
@@ -54,7 +54,7 @@ class Console extends Component {
         ))}
 
       </Nav>
-    )
+    );
   }
 
   isJsonObject(item) {
@@ -119,7 +119,7 @@ class Console extends Component {
             </CardBody>
             {this.props.isEmbark() && <CardFooter>
               <AsyncTypeahead
-								autoFocus={true}
+                autoFocus={true}
                 emptyLabel={false}
                 labelKey="value"
                 multiple={false}
@@ -128,7 +128,7 @@ class Console extends Component {
                 onInputChange={(text) => this.handleChange(text)}
                 onChange={(text) => {
                   if (text && text[0]) {
-                    this.handleChange(text[0].value)
+                    this.handleChange(text[0].value);
                   }
                 }}
                 ref={(typeahead) => this.typeahead = typeahead}
@@ -136,12 +136,12 @@ class Console extends Component {
                 onKeyDown={(e) => {
                   if (e.keyCode === 13) {
                     this.handleChange(e.target.value, () => {
-                      this.handleSubmit(e)
-                    })
+                      this.handleSubmit(e);
+                    });
                   }
                 }}
                 onSearch={(value) => {
-									this.props.postCommandSuggestions(value)
+                  this.props.postCommandSuggestions(value);
                 }}
                 filterBy={['value', 'description']}
                 maxHeight="200px"

embark-ui/src/components/ExplorerLayout.js

@@ -14,6 +14,7 @@ import BlocksContainer from '../containers/BlocksContainer';
 import BlockContainer from '../containers/BlockContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
+import SearchBar from '../components/SearchBar';
 
 const groupItems = [
   {to: "/embark/explorer/overview", icon: "signal", value: "Overview"},

embark-ui/src/components/SearchBar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Form, FormGroup, Input, Button, Row, Col} from 'reactstrap';
+import FontAwesome from 'react-fontawesome';
+
+import './search.css';
+
+class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      searchValue: ''
+    };
+  }
+
+  onChange(e) {
+    this.setState({
+      searchValue: e.target.value
+    });
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col>
+          <Form inline className="search-bar float-right">
+            <FormGroup>
+              <Input type="text" name="search-bar" placeholder="Search" onChange={(e) => this.onChange(e)}
+                     value={this.state.searchValue}/>
+              <Button color="secondary" onClick={() => this.props.searchSubmit(this.state.searchValue)}>
+                <FontAwesome name="search"/>
+              </Button>
+            </FormGroup>
+          </Form>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+SearchBar.propTypes = {
+  searchSubmit: PropTypes.func.isRequired
+};
+
+export default SearchBar;

embark-ui/src/components/search.css

@@ -0,0 +1,14 @@
+.search-bar {
+  margin-top: 10px;
+}
+
+.search-bar input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 0;
+}
+
+.search-bar button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}