Merge remote-tracking branch 'upstream/master'

Author: mistic

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [QueryStringInputProps](./kibana-plugin-plugins-data-public.querystringinputprops.md) &gt; [disableLanguageSwitcher](./kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md)
+
+## QueryStringInputProps.disableLanguageSwitcher property
+
+<b>Signature:</b>
+
+```typescript
+disableLanguageSwitcher?: boolean;
+```

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.icontype.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [QueryStringInputProps](./kibana-plugin-plugins-data-public.querystringinputprops.md) &gt; [iconType](./kibana-plugin-plugins-data-public.querystringinputprops.icontype.md)
+
+## QueryStringInputProps.iconType property
+
+<b>Signature:</b>
+
+```typescript
+iconType?: string;
+```

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.md

@@ -18,6 +18,8 @@ export interface QueryStringInputProps
 |  [className](./kibana-plugin-plugins-data-public.querystringinputprops.classname.md) | <code>string</code> |  |
 |  [dataTestSubj](./kibana-plugin-plugins-data-public.querystringinputprops.datatestsubj.md) | <code>string</code> |  |
 |  [disableAutoFocus](./kibana-plugin-plugins-data-public.querystringinputprops.disableautofocus.md) | <code>boolean</code> |  |
+|  [disableLanguageSwitcher](./kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md) | <code>boolean</code> |  |
+|  [iconType](./kibana-plugin-plugins-data-public.querystringinputprops.icontype.md) | <code>string</code> |  |
 |  [indexPatterns](./kibana-plugin-plugins-data-public.querystringinputprops.indexpatterns.md) | <code>Array&lt;IIndexPattern &#124; string&gt;</code> |  |
 |  [isInvalid](./kibana-plugin-plugins-data-public.querystringinputprops.isinvalid.md) | <code>boolean</code> |  |
 |  [languageSwitcherPopoverAnchorPosition](./kibana-plugin-plugins-data-public.querystringinputprops.languageswitcherpopoveranchorposition.md) | <code>PopoverAnchorPosition</code> |  |

src/plugins/data/public/public.api.md

@@ -1798,6 +1798,10 @@ export interface QueryStringInputProps {
     // (undocumented)
     disableAutoFocus?: boolean;
     // (undocumented)
+    disableLanguageSwitcher?: boolean;
+    // (undocumented)
+    iconType?: string;
+    // (undocumented)
     indexPatterns: Array<IIndexPattern | string>;
     // (undocumented)
     isInvalid?: boolean;

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -19,11 +19,12 @@
   z-index: $euiZContentMenu;
   resize: none !important; // When in the group, it will autosize
   height: $euiFormControlHeight;
-  // Unlike most inputs within layout control groups, the text area still needs a border.
-  // These adjusts help it sit above the control groups shadow to line up correctly.
+  // Unlike most inputs within layout control groups, the text area still needs a border
+  // for multi-line content. These adjusts help it sit above the control groups
+  // shadow to line up correctly.
   padding: $euiSizeS;
   padding-top: $euiSizeS + 3px;
-  transform: translateY(-1px) translateX(-1px);
+  box-shadow: 0 0 0 1px $euiFormBorderColor;
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;
@@ -40,6 +41,17 @@
     overflow-x: auto;
     overflow-y: auto;
     white-space: normal;
+    box-shadow: 0 0 0 1px $euiFormBorderColor;
+  }
+
+  @include euiFormControlWithIcon($isIconOptional: true);
+  ~ .euiFormControlLayoutIcons {
+    // By default form control layout icon is vertically centered, but our textarea
+    // can expand to be multi-line, so we position it with padding that matches
+    // the parent textarea padding
+    z-index: $euiZContentMenu + 1;
+    top: $euiSizeS + 3px;
+    bottom: unset;
   }
 }
 

src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx

@@ -29,7 +29,7 @@ import { mount } from 'enzyme';
 import { waitFor } from '@testing-library/dom';
 import { render } from '@testing-library/react';
 
-import { EuiTextArea } from '@elastic/eui';
+import { EuiTextArea, EuiIcon } from '@elastic/eui';
 
 import { QueryLanguageSwitcher } from './language_switcher';
 import { QueryStringInput } from './';
@@ -172,6 +172,30 @@ describe('QueryStringInput', () => {
     expect(mockCallback).toHaveBeenCalledWith({ query: '', language: 'lucene' });
   });
 
+  it('Should not show the language switcher when disabled', () => {
+    const component = mount(
+      wrapQueryStringInputInContext({
+        query: luceneQuery,
+        onSubmit: noop,
+        indexPatterns: [stubIndexPatternWithFields],
+        disableLanguageSwitcher: true,
+      })
+    );
+    expect(component.find(QueryLanguageSwitcher).exists()).toBeFalsy();
+  });
+
+  it('Should show an icon when an iconType is specified', () => {
+    const component = mount(
+      wrapQueryStringInputInContext({
+        query: luceneQuery,
+        onSubmit: noop,
+        indexPatterns: [stubIndexPatternWithFields],
+        iconType: 'search',
+      })
+    );
+    expect(component.find(EuiIcon).exists()).toBeTruthy();
+  });
+
   it('Should call onSubmit when the user hits enter inside the query bar', () => {
     const mockCallback = jest.fn();
 

src/plugins/data/public/ui/query_string_input/query_string_input.tsx

@@ -31,6 +31,7 @@ import {
   EuiLink,
   htmlIdGenerator,
   EuiPortal,
+  EuiIcon,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -55,6 +56,7 @@ export interface QueryStringInputProps {
   persistedLog?: PersistedLog;
   bubbleSubmitEvent?: boolean;
   placeholder?: string;
+  disableLanguageSwitcher?: boolean;
   languageSwitcherPopoverAnchorPosition?: PopoverAnchorPosition;
   onBlur?: () => void;
   onChange?: (query: Query) => void;
@@ -64,6 +66,7 @@ export interface QueryStringInputProps {
   size?: SuggestionsListSize;
   className?: string;
   isInvalid?: boolean;
+  iconType?: string;
 }
 
 interface Props extends QueryStringInputProps {
@@ -608,13 +611,17 @@ export default class QueryStringInputUI extends Component<Props, State> {
       'aria-owns': 'kbnTypeahead__items',
     };
     const ariaCombobox = { ...isSuggestionsVisible, role: 'combobox' };
-    const className = classNames(
+    const containerClassName = classNames(
       'euiFormControlLayout euiFormControlLayout--group kbnQueryBar__wrap',
       this.props.className
     );
+    const inputClassName = classNames(
+      'kbnQueryBar__textarea',
+      this.props.iconType ? 'kbnQueryBar__textarea--withIcon' : null
+    );
 
     return (
-      <div className={className}>
+      <div className={containerClassName}>
         {this.props.prepend}
         <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
           <div
@@ -647,7 +654,7 @@ export default class QueryStringInputUI extends Component<Props, State> {
                 onClick={this.onClickInput}
                 onBlur={this.onInputBlur}
                 onFocus={this.handleOnFocus}
-                className="kbnQueryBar__textarea"
+                className={inputClassName}
                 fullWidth
                 rows={1}
                 id={this.textareaId}
@@ -678,6 +685,15 @@ export default class QueryStringInputUI extends Component<Props, State> {
               >
                 {this.getQueryString()}
               </EuiTextArea>
+              {this.props.iconType ? (
+                <div className="euiFormControlLayoutIcons">
+                  <EuiIcon
+                    className="euiFormControlLayoutCustomIcon__icon"
+                    aria-hidden="true"
+                    type="search"
+                  />
+                </div>
+              ) : null}
             </div>
             <EuiPortal>
               <SuggestionsComponent
@@ -693,12 +709,13 @@ export default class QueryStringInputUI extends Component<Props, State> {
             </EuiPortal>
           </div>
         </EuiOutsideClickDetector>
-
-        <QueryLanguageSwitcher
-          language={this.props.query.language}
-          anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
-          onSelectLanguage={this.onSelectLanguage}
-        />
+        {this.props.disableLanguageSwitcher ? null : (
+          <QueryLanguageSwitcher
+            language={this.props.query.language}
+            anchorPosition={this.props.languageSwitcherPopoverAnchorPosition}
+            onSelectLanguage={this.onSelectLanguage}
+          />
+        )}
       </div>
     );
   }

src/plugins/data/public/ui/typeahead/constants.ts

@@ -33,4 +33,4 @@ export const SUGGESTIONS_LIST_REQUIRED_BOTTOM_SPACE = 250;
  * A distance in px to display suggestions list right under the query input without a gap
  * @public
  */
-export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 1;
+export const SUGGESTIONS_LIST_REQUIRED_TOP_OFFSET = 0;