Allow multi-line input for query box in Graph (#41)

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

@@ -4,4 +4,21 @@
     vertical-align: middle;
     display: inline-block;
     width: 100%;
+
+    textarea {
+        width: 100%;
+        line-height: 1;
+        font-size: 14px;
+        padding: 6px 12px;
+        background: #fff;
+        border: 1px solid #ccc;
+        border-radius: 2px 0 0 2px;
+        min-height: 25px;
+        resize: vertical;
+
+        &:focus {
+            border-color: #66afe9;
         }
+    }
+}
+

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent";
+import "../../../../externals/jquery.typeahead.min.js";
+
+describe("inputTypeahead", () => {
+  it("renders <input />", () => {
+    const props: InputTypeaheadComponentProps = {
+      choices: [
+        { caption: "item1", value: "value1" },
+        { caption: "item2", value: "value2" }
+      ],
+      placeholder: "placeholder",
+      useTextarea: false
+    };
+
+    const wrapper = shallow(<InputTypeaheadComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders <textarea />", () => {
+    const props: InputTypeaheadComponentProps = {
+      choices: [
+        { caption: "item1", value: "value1" },
+        { caption: "item2", value: "value2" }
+      ],
+      placeholder: "placeholder",
+      useTextarea: true
+    };
+
+    const wrapper = shallow(<InputTypeaheadComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -7,6 +7,7 @@
  *
  */
 import * as React from "react";
+import "./InputTypeahead.less";
 import { KeyCodes } from "../../../Common/Constants";
 
 export interface Item {
@@ -17,7 +18,7 @@ export interface Item {
 /**
  * Parameters for this component
  */
-interface InputTypeaheadComponentProps {
+export interface InputTypeaheadComponentProps {
   /**
    * List of choices available in the dropdown.
    */
@@ -66,6 +67,11 @@ interface InputTypeaheadComponentProps {
    * true: show (X) button that clears the text inside the textbox when typing
    */
   showCancelButton?: boolean;
+
+  /**
+   * true: use <textarea /> instead of <input />
+   */
+  useTextarea?: boolean;
 }
 
 interface OnClickItem {
@@ -135,6 +141,16 @@ export class InputTypeaheadComponent extends React.Component<
           <div className="typeahead__container" ref={input => (this.containerElt = input)}>
             <div className="typeahead__field">
               <span className="typeahead__query">
+                {this.props.useTextarea ? (
+                  <textarea
+                    rows={1}
+                    name="q"
+                    autoComplete="off"
+                    aria-label="Input query"
+                    ref={input => (this.inputElt = input)}
+                    defaultValue={this.props.defaultValue}
+                  />
+                ) : (
                   <input
                     name="q"
                     type="search"
@@ -143,6 +159,7 @@ export class InputTypeaheadComponent extends React.Component<
                     ref={input => (this.inputElt = input)}
                     defaultValue={this.props.defaultValue}
                   />
+                )}
               </span>
               {this.props.showSearchButton && (
                 <span className="typeahead__button">

src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inputTypeahead renders <input /> 1`] = `
+<span
+  className="input-typeahead-container"
+>
+  <div
+    className="input-typehead"
+    onKeyDown={[Function]}
+  >
+    <div
+      className="typeahead__container"
+    >
+      <div
+        className="typeahead__field"
+      >
+        <span
+          className="typeahead__query"
+        >
+          <input
+            aria-label="Input query"
+            autoComplete="off"
+            name="q"
+            type="search"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</span>
+`;
+
+exports[`inputTypeahead renders <textarea /> 1`] = `
+<span
+  className="input-typeahead-container"
+>
+  <div
+    className="input-typehead"
+    onKeyDown={[Function]}
+  >
+    <div
+      className="typeahead__container"
+    >
+      <div
+        className="typeahead__field"
+      >
+        <span
+          className="typeahead__query"
+        >
+          <textarea
+            aria-label="Input query"
+            autoComplete="off"
+            name="q"
+            rows={1}
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</span>
+`;

src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx

@@ -40,6 +40,7 @@ export class QueryContainerComponent extends React.Component<
           submitFct={(inputValue: string, selection: InputTypeaheadComponent.Item) =>
             this.onSubmit(inputValue, selection)
           }
+          useTextarea={true}
         />
         {this.renderQueryInputButton()}
       </div>

src/Main.ts

@@ -6,7 +6,6 @@ import "../less/forms.less";
 import "../less/menus.less";
 import "../less/infobox.less";
 import "../less/messagebox.less";
-import "./Explorer/Controls/InputTypeahead/InputTypeahead.less";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";