Add iconType and disableLanguageSwitcher options to QueryStringInput (#83700)

* Add iconType and disableLanguageSwitcher options to QueryStringInput * Remove unnecessary span, add tests * Update docs * Adjust suggestions offset * Add comment Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2020-11-23 07:06:01 -08:00 · 2020-11-23 07:06:01 -08:00 · 81f4dc9bdf
parent 7d929fe903
commit 81f4dc9bdf
8 changed files with 95 additions and 14 deletions
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md
+++ b/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;
+```
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.icontype.md
+++ b/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;
+```
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.md
+++ b/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> |  |
--- a/src/plugins/data/public/public.api.md
+++ b/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;
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/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;
  }
 }

--- a/src/plugins/data/public/ui/query_string_input/query_string_input.test.tsx
+++ b/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();

--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/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>
    );
  }
--- a/src/plugins/data/public/ui/typeahead/constants.ts
+++ b/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;