switch to type ahead input box

embark-ui/package-lock.json

@@ -8905,6 +8905,25 @@
         "object-assign": "^4.1.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz",
+      "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -9113,6 +9132,23 @@
         "pure-color": "^1.2.0"
       }
     },
+    "react-bootstrap-typeahead": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-3.2.4.tgz",
+      "integrity": "sha512-wFXIKbOHY4Q1AtnhSQIAnUvSDxmcFdDc5wIX/yd7YJug2jL5TvKspJ3XfX/FaWEWyn1pgHukRuFGnbYnL8rtUQ==",
+      "requires": {
+        "classnames": "^2.2.0",
+        "escape-string-regexp": "^1.0.5",
+        "invariant": "^2.2.1",
+        "lodash": "^4.17.2",
+        "prop-types": "^15.5.8",
+        "prop-types-extra": "^1.0.1",
+        "react-onclickoutside": "^6.1.1",
+        "react-overlays": "^0.8.1",
+        "react-popper": "^1.0.0",
+        "warning": "^4.0.1"
+      }
+    },
     "react-copy-to-clipboard": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
@@ -9163,6 +9199,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-is": {
+      "version": "16.5.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz",
+      "integrity": "sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ=="
+    },
     "react-json-tree": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.11.0.tgz",
@@ -9183,6 +9224,34 @@
       "resolved": "https://registry.npmjs.org/react-onclickout/-/react-onclickout-2.0.8.tgz",
       "integrity": "sha1-0XixP7h6SBNWdhtFSqYN9wabLaQ="
     },
+    "react-onclickoutside": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz",
+      "integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg=="
+    },
+    "react-overlays": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",
+      "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "dom-helpers": "^3.2.1",
+        "prop-types": "^15.5.10",
+        "prop-types-extra": "^1.0.1",
+        "react-transition-group": "^2.2.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-perfect-scrollbar": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.2.2.tgz",

embark-ui/package.json

@@ -47,6 +47,7 @@
     "qs": "^6.5.2",
     "raf": "3.4.0",
     "react": "^16.4.2",
+    "react-bootstrap-typeahead": "^3.2.4",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.4.1",

embark-ui/src/components/Console.js

@@ -1,8 +1,10 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import Convert from 'ansi-to-html';
+
 import { Form, Col, Row, Card, CardBody, Input, CardFooter, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import classnames from 'classnames';
+import {AsyncTypeahead} from 'react-bootstrap-typeahead'
 
 import Logs from "./Logs";
 import "./Console.css";
@@ -13,18 +15,18 @@ const convert = new Convert();
 class Console extends Component {
   constructor(props) {
     super(props);
-    this.state = {value: '', activeTab: EMBARK_PROCESS_NAME};
+    this.state = {value: '', isLoading: true, options: [], activeTab: EMBARK_PROCESS_NAME};
   }
 
   handleSubmit(event) {
     event.preventDefault();
     this.props.postCommand(this.state.value);
     this.setState({value: ''});
+    this.typeahead.getInstance().clear()
   }
 
-  handleChange(event) {
+  handleChange(value) {
-    event.preventDefault();
+    this.setState({value: value});
-    this.setState({value: event.target.value});
   }
 
   toggle(tab) {
@@ -81,18 +83,39 @@ class Console extends Component {
       <Row>
         <Col>
           <Card>
-            <CardBody className="console-container">
+            <Card.Body className="console-container">
               {this.renderNav()}
               {this.renderTabs()}
-            </CardBody>
+            </Card.Body>
-            {this.props.isEmbark() && <CardFooter>
+            {this.props.isEmbark() && <Card.Footer>
-              <Form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
+              <AsyncTypeahead
-                <Input value={value}
+                search={value}
-                            onChange={(event) => this.handleChange(event)}
+								autoFocus={true}
-                            name="command"
+                emptyLabel={false}
-                            placeholder="Type a command (e.g help)"/>
+                labelKey="name"
-              </Form>
+                multiple={false}
-            </CardFooter>}
+                emptyLabel={false}
+                maxResults={10}
+                isLoading={this.state.isLoading}
+                defaultInputValue={value}
+                onInputChange={(text) => this.handleChange(text)}
+                ref={(typeahead) => this.typeahead = typeahead}
+                searchText={false}
+                onKeyDown={(e) => {
+                  if (e.keyCode === 13) {
+                    this.handleSubmit(e)
+                  }
+                }}
+                onSearch={(value) => {
+                  console.dir(value);
+									this.setState({ isLoading: false, options: ['hello', 'dude', 'dude1'] })
+                }}
+                maxHeight="200px"
+                placeholder="Type a command (e.g help)"
+                options={this.state.options}
+                placeholder="Choose a state..."
+              />
+            </Card.Footer>}
           </Card>
         </Col>
       </Row>