Add prop to render help trigger in SearchForm (Graylog2#4734)

`SearchForm` is almost always used with some special query syntax that
that users may not know, or may not always remember. That means that
almost always there is a help button associated to the `SearchForm`. So
far the help button was rendered outside the `SearchForm` component,
usually too far away from the text input as to still remain some
context.

This commit let us render a help button inside the text input, helping
users to associate that help with the text that they are supposed to
write in that input.

graylog2-web-interface/src/components/common/SearchForm.css

@@ -0,0 +1,7 @@
+:local(.helpFeedback).form-control-feedback {
+    pointer-events: auto;
+}
+
+:local(.helpFeedback) .btn {
+    max-width: 34px;
+}

graylog2-web-interface/src/components/common/SearchForm.jsx

@@ -4,6 +4,8 @@ import Promise from 'bluebird';
 import { Button } from 'react-bootstrap';
 import { Spinner } from 'components/common';
 
+import style from './SearchForm.css';
+
 /**
  * Component that renders a customizable search form. The component
  * supports a loading state, adding children next to the form, and
@@ -54,6 +56,18 @@ class SearchForm extends React.Component {
      * the callback function in the `onSearch` method is called.
      */
     useLoadingState: PropTypes.bool,
+    /**
+     * Specifies a component that should be render inside the search input
+     * field, and is meant to act as a trigger to display help about the query.
+     * You may want to enlarge `queryWidth` to give the user more room to write the
+     * query if you use this prop.
+     *
+     * **Note:** Due to size constraints rendering this component inside the input,
+     * this component should contain very little text and should be very light. For
+     * instance, a `Button` component with `bsStyle="link"` and a font-awesome icon
+     * inside would work just fine.
+     */
+    queryHelpComponent: PropTypes.element,
     /** Elements to display on the right of the search form. */
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.element),
@@ -76,6 +90,7 @@ class SearchForm extends React.Component {
     resetButtonLabel: 'Reset',
     useLoadingState: false,
     loadingLabel: 'Loading...',
+    queryHelpComponent: null,
     children: null,
   };
 
@@ -139,7 +154,7 @@ class SearchForm extends React.Component {
     return (
       <div className={this.props.wrapperClass} style={{ marginTop: this.props.topMargin }}>
         <form className="form-inline" onSubmit={this._onSearch}>
-          <div className="form-group" >
+          <div className="form-group has-feedback">
             {this.props.label && <label htmlFor="common-search-form-query-input" className="control-label">{this.props.label}</label>}
             <input id="common-search-form-query-input"
                    onChange={this.handleQueryChange}
@@ -150,7 +165,10 @@ class SearchForm extends React.Component {
                    className="query form-control"
                    autoComplete="off"
                    spellCheck="false" />
+            {this.props.queryHelpComponent &&
+              <span className={`form-control-feedback ${style.helpFeedback}`}>{this.props.queryHelpComponent}</span>}
           </div>
+
           <div className="form-group" style={{ marginLeft: this.props.buttonLeftMargin }}>
             <Button bsStyle={this.props.searchBsStyle}
                     type="submit"

graylog2-web-interface/src/components/common/SearchForm.md

@@ -40,7 +40,7 @@ const SearchFormExample = createReactClass({
 <SearchFormExample />
 ```
 
-Search form with controlled query string:
+Search form with controlled query string and help:
 
 ```js
 const createReactClass = require('create-react-class');
@@ -79,6 +79,8 @@ const SearchFormExample = createReactClass({
                     query={this.state.queryTemplate}
                     searchBsStyle="info"
                     label="Search"
+                    queryWidth={300}
+                    queryHelpComponent={<Button onClick={() => alert('help!')} bsStyle="link"><i className="fa fa-question-circle" /></Button>}
                     useLoadingState />
       </div>
     );