From 81f4dc9bdfe348064fb5d2adb6a8af461069faa2 Mon Sep 17 00:00:00 2001 From: Jen Huang Date: Mon, 23 Nov 2020 07:06:01 -0800 Subject: [PATCH] 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> --- ...tringinputprops.disablelanguageswitcher.md | 11 ++++++ ...a-public.querystringinputprops.icontype.md | 11 ++++++ ...ugins-data-public.querystringinputprops.md | 2 ++ src/plugins/data/public/public.api.md | 4 +++ .../ui/query_string_input/_query_bar.scss | 18 ++++++++-- .../query_string_input.test.tsx | 26 +++++++++++++- .../query_string_input/query_string_input.tsx | 35 ++++++++++++++----- .../data/public/ui/typeahead/constants.ts | 2 +- 8 files changed, 95 insertions(+), 14 deletions(-) create mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md create mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.icontype.md diff --git 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 new file mode 100644 index 000000000000..c11edd95a891 --- /dev/null +++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) > [QueryStringInputProps](./kibana-plugin-plugins-data-public.querystringinputprops.md) > [disableLanguageSwitcher](./kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md) + +## QueryStringInputProps.disableLanguageSwitcher property + +Signature: + +```typescript +disableLanguageSwitcher?: boolean; +``` diff --git 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 new file mode 100644 index 000000000000..4b1c5b84557e --- /dev/null +++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.icontype.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) > [QueryStringInputProps](./kibana-plugin-plugins-data-public.querystringinputprops.md) > [iconType](./kibana-plugin-plugins-data-public.querystringinputprops.icontype.md) + +## QueryStringInputProps.iconType property + +Signature: + +```typescript +iconType?: string; +``` diff --git 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 index d503980da794..90c604d13180 100644 --- 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) | string | | | [dataTestSubj](./kibana-plugin-plugins-data-public.querystringinputprops.datatestsubj.md) | string | | | [disableAutoFocus](./kibana-plugin-plugins-data-public.querystringinputprops.disableautofocus.md) | boolean | | +| [disableLanguageSwitcher](./kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md) | boolean | | +| [iconType](./kibana-plugin-plugins-data-public.querystringinputprops.icontype.md) | string | | | [indexPatterns](./kibana-plugin-plugins-data-public.querystringinputprops.indexpatterns.md) | Array<IIndexPattern | string> | | | [isInvalid](./kibana-plugin-plugins-data-public.querystringinputprops.isinvalid.md) | boolean | | | [languageSwitcherPopoverAnchorPosition](./kibana-plugin-plugins-data-public.querystringinputprops.languageswitcherpopoveranchorposition.md) | PopoverAnchorPosition | | diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md index fc9b8d4839ea..4cb767b76bbb 100644 --- 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; // (undocumented) isInvalid?: boolean; diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss index 1ff24c61954e..3e3982dd58e5 100644 --- 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; } } diff --git 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 index 7d0ad4b3be09..c26f1898a408 100644 --- 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(); diff --git 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 index bc9e2ed6a83c..a6d22ce3eb47 100644 --- 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 { '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 ( -
+
{this.props.prepend}
{ 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 { > {this.getQueryString()} + {this.props.iconType ? ( +
+
+ ) : null}
{
- - + {this.props.disableLanguageSwitcher ? null : ( + + )}
); } diff --git a/src/plugins/data/public/ui/typeahead/constants.ts b/src/plugins/data/public/ui/typeahead/constants.ts index 0e28891a1453..8a3e5206d5d5 100644 --- 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;