mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
* Translate ui -> query_bar * Fix id names * Update snapshots * Fix tests * Add intl to props interface * Fix test * Fix tests * Fix tests * Fix test * Fix tests
This commit is contained in:
Maryia Lapata
Nox911
parent
b82bf8272a
commit
776eacd91c
6 changed files with 233 additions and 99 deletions
|
|
@ -11,7 +11,11 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
|
|||
size="xs"
|
||||
type="button"
|
||||
>
|
||||
Options
|
||||
<FormattedMessage
|
||||
defaultMessage="Options"
|
||||
id="common.ui.queryBar.optionsButtonLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
}
|
||||
className="eui-displayBlock"
|
||||
|
|
@ -24,7 +28,11 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
|
|||
withTitle={true}
|
||||
>
|
||||
<EuiPopoverTitle>
|
||||
Syntax options
|
||||
<FormattedMessage
|
||||
defaultMessage="Syntax options"
|
||||
id="common.ui.queryBar.syntaxOptionsTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiPopoverTitle>
|
||||
<div
|
||||
style={
|
||||
|
|
@ -38,17 +46,27 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
|
|||
size="m"
|
||||
>
|
||||
<p>
|
||||
Our experimental autocomplete and simple syntax features can help you create your queries. Just start typing and you’ll see matches related to your data. See docs
|
||||
|
||||
<EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/kibana/foo/kuery-query.html"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
here
|
||||
</EuiLink>
|
||||
.
|
||||
<FormattedMessage
|
||||
defaultMessage="Our experimental autocomplete and simple syntax features can help you create your
|
||||
queries. Just start typing and you’ll see matches related to your data. See docs {docsLink}."
|
||||
id="common.ui.queryBar.syntaxOptionsDescription"
|
||||
values={
|
||||
Object {
|
||||
"docsLink": <EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/kibana/foo/kuery-query.html"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="here"
|
||||
id="common.ui.queryBar.syntaxOptionsDescription.docsLinkText"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiLink>,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer
|
||||
|
|
@ -64,7 +82,13 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
|
|||
checked={false}
|
||||
data-test-subj="languageToggle"
|
||||
id="queryEnhancementOptIn"
|
||||
label="Turn on query features"
|
||||
label={
|
||||
<FormattedMessage
|
||||
defaultMessage="Turn on query features"
|
||||
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
name="popswitch"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
|
|
@ -79,17 +103,26 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
|
|||
size="xs"
|
||||
>
|
||||
<p>
|
||||
Not ready yet? Find our lucene docs
|
||||
|
||||
<EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/elasticsearch/reference/foo/query-dsl-query-string-query.html#query-string-syntax"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
here
|
||||
</EuiLink>
|
||||
.
|
||||
<FormattedMessage
|
||||
defaultMessage="Not ready yet? Find our lucene docs {docsLink}."
|
||||
id="common.ui.queryBar.luceneDocsDescription"
|
||||
values={
|
||||
Object {
|
||||
"docsLink": <EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/elasticsearch/reference/foo/query-dsl-query-string-query.html#query-string-syntax"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="here"
|
||||
id="common.ui.queryBar.luceneDocsDescription.docsLinkText"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiLink>,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</div>
|
||||
|
|
@ -107,7 +140,11 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
|
|||
size="xs"
|
||||
type="button"
|
||||
>
|
||||
Options
|
||||
<FormattedMessage
|
||||
defaultMessage="Options"
|
||||
id="common.ui.queryBar.optionsButtonLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
}
|
||||
className="eui-displayBlock"
|
||||
|
|
@ -120,7 +157,11 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
|
|||
withTitle={true}
|
||||
>
|
||||
<EuiPopoverTitle>
|
||||
Syntax options
|
||||
<FormattedMessage
|
||||
defaultMessage="Syntax options"
|
||||
id="common.ui.queryBar.syntaxOptionsTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiPopoverTitle>
|
||||
<div
|
||||
style={
|
||||
|
|
@ -134,17 +175,27 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
|
|||
size="m"
|
||||
>
|
||||
<p>
|
||||
Our experimental autocomplete and simple syntax features can help you create your queries. Just start typing and you’ll see matches related to your data. See docs
|
||||
|
||||
<EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/kibana/foo/kuery-query.html"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
here
|
||||
</EuiLink>
|
||||
.
|
||||
<FormattedMessage
|
||||
defaultMessage="Our experimental autocomplete and simple syntax features can help you create your
|
||||
queries. Just start typing and you’ll see matches related to your data. See docs {docsLink}."
|
||||
id="common.ui.queryBar.syntaxOptionsDescription"
|
||||
values={
|
||||
Object {
|
||||
"docsLink": <EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/kibana/foo/kuery-query.html"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="here"
|
||||
id="common.ui.queryBar.syntaxOptionsDescription.docsLinkText"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiLink>,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer
|
||||
|
|
@ -160,7 +211,13 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
|
|||
checked={true}
|
||||
data-test-subj="languageToggle"
|
||||
id="queryEnhancementOptIn"
|
||||
label="Turn on query features"
|
||||
label={
|
||||
<FormattedMessage
|
||||
defaultMessage="Turn on query features"
|
||||
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
name="popswitch"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
|
|
@ -175,17 +232,26 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
|
|||
size="xs"
|
||||
>
|
||||
<p>
|
||||
Not ready yet? Find our lucene docs
|
||||
|
||||
<EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/elasticsearch/reference/foo/query-dsl-query-string-query.html#query-string-syntax"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
here
|
||||
</EuiLink>
|
||||
.
|
||||
<FormattedMessage
|
||||
defaultMessage="Not ready yet? Find our lucene docs {docsLink}."
|
||||
id="common.ui.queryBar.luceneDocsDescription"
|
||||
values={
|
||||
Object {
|
||||
"docsLink": <EuiLink
|
||||
color="primary"
|
||||
href="https://www.elastic.co/guide/en/elasticsearch/reference/foo/query-dsl-query-string-query.html#query-string-syntax"
|
||||
target="_blank"
|
||||
type="button"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="here"
|
||||
id="common.ui.queryBar.luceneDocsDescription.docsLinkText"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiLink>,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
|
|||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
placeholder="Search... (e.g. status:200 AND extension:PHP)"
|
||||
placeholder="Search… (e.g. status:200 AND extension:PHP)"
|
||||
role="textbox"
|
||||
spellCheck={false}
|
||||
type="text"
|
||||
|
|
@ -98,7 +98,11 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
|
|||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Refresh
|
||||
<FormattedMessage
|
||||
defaultMessage="Refresh"
|
||||
id="common.ui.queryBar.refreshButtonLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
@ -161,7 +165,7 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
|
|||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
placeholder="Search... (e.g. status:200 AND extension:PHP)"
|
||||
placeholder="Search… (e.g. status:200 AND extension:PHP)"
|
||||
role="textbox"
|
||||
spellCheck={false}
|
||||
type="text"
|
||||
|
|
@ -202,7 +206,11 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
|
|||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Refresh
|
||||
<FormattedMessage
|
||||
defaultMessage="Refresh"
|
||||
id="common.ui.queryBar.refreshButtonLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
@ -265,7 +273,7 @@ exports[`QueryBar Should render the given query 1`] = `
|
|||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
placeholder="Search... (e.g. status:200 AND extension:PHP)"
|
||||
placeholder="Search… (e.g. status:200 AND extension:PHP)"
|
||||
role="textbox"
|
||||
spellCheck={false}
|
||||
type="text"
|
||||
|
|
@ -306,7 +314,11 @@ exports[`QueryBar Should render the given query 1`] = `
|
|||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Refresh
|
||||
<FormattedMessage
|
||||
defaultMessage="Refresh"
|
||||
id="common.ui.queryBar.refreshButtonLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import {
|
|||
EuiSwitch,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import React, { Component } from 'react';
|
||||
import { documentationLinks } from '../../documentation_links/documentation_links';
|
||||
|
||||
|
|
@ -52,7 +53,7 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
|
|||
public render() {
|
||||
const button = (
|
||||
<EuiButtonEmpty size="xs" onClick={this.togglePopover}>
|
||||
Options
|
||||
<FormattedMessage id="common.ui.queryBar.optionsButtonLabel" defaultMessage="Options" />
|
||||
</EuiButtonEmpty>
|
||||
);
|
||||
|
||||
|
|
@ -67,18 +68,30 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
|
|||
closePopover={this.closePopover}
|
||||
withTitle
|
||||
>
|
||||
<EuiPopoverTitle>Syntax options</EuiPopoverTitle>
|
||||
<EuiPopoverTitle>
|
||||
<FormattedMessage
|
||||
id="common.ui.queryBar.syntaxOptionsTitle"
|
||||
defaultMessage="Syntax options"
|
||||
/>
|
||||
</EuiPopoverTitle>
|
||||
<div style={{ width: '350px' }}>
|
||||
<EuiText>
|
||||
<p>
|
||||
Our experimental autocomplete and simple syntax features can help you create your
|
||||
queries. Just start typing and you’ll see matches related to your data. See docs{' '}
|
||||
{
|
||||
<EuiLink href={kueryQuerySyntaxDocs} target="_blank">
|
||||
here
|
||||
</EuiLink>
|
||||
}
|
||||
.
|
||||
<FormattedMessage
|
||||
id="common.ui.queryBar.syntaxOptionsDescription"
|
||||
defaultMessage="Our experimental autocomplete and simple syntax features can help you create your
|
||||
queries. Just start typing and you’ll see matches related to your data. See docs {docsLink}."
|
||||
values={{
|
||||
docsLink: (
|
||||
<EuiLink href={kueryQuerySyntaxDocs} target="_blank">
|
||||
<FormattedMessage
|
||||
id="common.ui.queryBar.syntaxOptionsDescription.docsLinkText"
|
||||
defaultMessage="here"
|
||||
/>
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
|
||||
|
|
@ -89,7 +102,12 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
|
|||
<EuiSwitch
|
||||
id="queryEnhancementOptIn"
|
||||
name="popswitch"
|
||||
label="Turn on query features"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="common.ui.queryBar.turnOnQueryFeaturesLabel"
|
||||
defaultMessage="Turn on query features"
|
||||
/>
|
||||
}
|
||||
checked={this.props.language === 'kuery'}
|
||||
onChange={this.onSwitchChange}
|
||||
data-test-subj="languageToggle"
|
||||
|
|
@ -101,13 +119,20 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
|
|||
|
||||
<EuiText size="xs">
|
||||
<p>
|
||||
Not ready yet? Find our lucene docs{' '}
|
||||
{
|
||||
<EuiLink href={luceneQuerySyntaxDocs} target="_blank">
|
||||
here
|
||||
</EuiLink>
|
||||
}
|
||||
.
|
||||
<FormattedMessage
|
||||
id="common.ui.queryBar.luceneDocsDescription"
|
||||
defaultMessage="Not ready yet? Find our lucene docs {docsLink}."
|
||||
values={{
|
||||
docsLink: (
|
||||
<EuiLink href={luceneQuerySyntaxDocs} target="_blank">
|
||||
<FormattedMessage
|
||||
id="common.ui.queryBar.luceneDocsDescription.docsLinkText"
|
||||
defaultMessage="here"
|
||||
/>
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,10 +70,11 @@ jest.doMock('lodash', () => ({
|
|||
}));
|
||||
|
||||
import { EuiFieldText } from '@elastic/eui';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import { QueryBar } from 'ui/query_bar';
|
||||
import { QueryLanguageSwitcher } from 'ui/query_bar/components/language_switcher';
|
||||
import { QueryBarUI } from './query_bar';
|
||||
|
||||
const noop = () => {
|
||||
return;
|
||||
|
|
@ -126,13 +127,14 @@ describe('QueryBar', () => {
|
|||
});
|
||||
|
||||
it('Should render the given query', () => {
|
||||
const component = shallow(
|
||||
<QueryBar
|
||||
const component = shallowWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={kqlQuery}
|
||||
onSubmit={noop}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={createMockStorage()}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -140,13 +142,14 @@ describe('QueryBar', () => {
|
|||
});
|
||||
|
||||
it('Should pass the query language to the language switcher', () => {
|
||||
const component = shallow(
|
||||
<QueryBar
|
||||
const component = shallowWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={luceneQuery}
|
||||
onSubmit={noop}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={createMockStorage()}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -154,14 +157,15 @@ describe('QueryBar', () => {
|
|||
});
|
||||
|
||||
it('Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true', () => {
|
||||
const component = shallow(
|
||||
<QueryBar
|
||||
const component = shallowWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={kqlQuery}
|
||||
onSubmit={noop}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={createMockStorage()}
|
||||
disableAutoFocus={true}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -169,14 +173,15 @@ describe('QueryBar', () => {
|
|||
});
|
||||
|
||||
it('Should create a unique PersistedLog based on the appName and query language', () => {
|
||||
shallow(
|
||||
<QueryBar
|
||||
shallowWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={kqlQuery}
|
||||
onSubmit={noop}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={createMockStorage()}
|
||||
disableAutoFocus={true}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -187,14 +192,15 @@ describe('QueryBar', () => {
|
|||
const mockStorage = createMockStorage();
|
||||
const mockCallback = jest.fn();
|
||||
|
||||
const component = shallow(
|
||||
<QueryBar
|
||||
const component = shallowWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={kqlQuery}
|
||||
onSubmit={mockCallback}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={mockStorage}
|
||||
disableAutoFocus={true}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -209,18 +215,19 @@ describe('QueryBar', () => {
|
|||
it('Should call onSubmit with the current query when the user hits enter inside the query bar', () => {
|
||||
const mockCallback = jest.fn();
|
||||
|
||||
const component = mount(
|
||||
<QueryBar
|
||||
const component = mountWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={kqlQuery}
|
||||
onSubmit={mockCallback}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={createMockStorage()}
|
||||
disableAutoFocus={true}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
const instance = component.instance() as QueryBar;
|
||||
const instance = component.instance() as QueryBarUI;
|
||||
const input = instance.inputRef;
|
||||
const inputWrapper = component.find(EuiFieldText).find('input');
|
||||
inputWrapper.simulate('change', { target: { value: 'extension:jpg' } });
|
||||
|
|
@ -234,18 +241,19 @@ describe('QueryBar', () => {
|
|||
});
|
||||
|
||||
it('Should use PersistedLog for recent search suggestions', async () => {
|
||||
const component = mount(
|
||||
<QueryBar
|
||||
const component = mountWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={kqlQuery}
|
||||
onSubmit={noop}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={createMockStorage()}
|
||||
disableAutoFocus={true}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
const instance = component.instance() as QueryBar;
|
||||
const instance = component.instance() as QueryBarUI;
|
||||
const input = instance.inputRef;
|
||||
const inputWrapper = component.find(EuiFieldText).find('input');
|
||||
inputWrapper.simulate('change', { target: { value: 'extension:jpg' } });
|
||||
|
|
@ -259,14 +267,15 @@ describe('QueryBar', () => {
|
|||
});
|
||||
|
||||
it('Should get suggestions from the autocomplete provider for the current language', () => {
|
||||
mount(
|
||||
<QueryBar
|
||||
mountWithIntl(
|
||||
<QueryBar.WrappedComponent
|
||||
query={kqlQuery}
|
||||
onSubmit={noop}
|
||||
appName={'discover'}
|
||||
indexPatterns={[mockIndexPattern]}
|
||||
store={createMockStorage()}
|
||||
disableAutoFocus={true}
|
||||
intl={null as any}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -44,6 +44,8 @@ import {
|
|||
EuiOutsideClickDetector,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
|
||||
const KEY_CODES = {
|
||||
LEFT: 37,
|
||||
UP: 38,
|
||||
|
|
@ -71,6 +73,7 @@ interface Props {
|
|||
appName: string;
|
||||
indexPatterns: IndexPattern[];
|
||||
store: Storage;
|
||||
intl: InjectedIntl;
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
|
@ -83,7 +86,7 @@ interface State {
|
|||
currentProps?: Props;
|
||||
}
|
||||
|
||||
export class QueryBar extends Component<Props, State> {
|
||||
export class QueryBarUI extends Component<Props, State> {
|
||||
public static getDerivedStateFromProps(nextProps: Props, prevState: State) {
|
||||
if (isEqual(prevState.currentProps, nextProps)) {
|
||||
return null;
|
||||
|
|
@ -475,7 +478,10 @@ export class QueryBar extends Component<Props, State> {
|
|||
<div className="kuiLocalSearchAssistedInput">
|
||||
<EuiFieldText
|
||||
className="kuiLocalSearchAssistedInput__input"
|
||||
placeholder="Search... (e.g. status:200 AND extension:PHP)"
|
||||
placeholder={this.props.intl.formatMessage({
|
||||
id: 'common.ui.queryBar.searchInputPlaceholder',
|
||||
defaultMessage: 'Search… (e.g. status:200 AND extension:PHP)',
|
||||
})}
|
||||
value={this.state.query.query}
|
||||
onKeyDown={this.onKeyDown}
|
||||
onKeyUp={this.onKeyUp}
|
||||
|
|
@ -491,7 +497,10 @@ export class QueryBar extends Component<Props, State> {
|
|||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
icon="console"
|
||||
aria-label="Search input"
|
||||
aria-label={this.props.intl.formatMessage({
|
||||
id: 'common.ui.queryBar.searchInputAriaLabel',
|
||||
defaultMessage: 'Search input',
|
||||
})}
|
||||
type="text"
|
||||
data-test-subj="queryInput"
|
||||
aria-autocomplete="list"
|
||||
|
|
@ -524,16 +533,28 @@ export class QueryBar extends Component<Props, State> {
|
|||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Search"
|
||||
aria-label={this.props.intl.formatMessage({
|
||||
id: 'common.ui.queryBar.searchButtonAriaLabel',
|
||||
defaultMessage: 'Search',
|
||||
})}
|
||||
data-test-subj="querySubmitButton"
|
||||
color={this.isDirty() ? 'secondary' : 'primary'}
|
||||
fill
|
||||
onClick={this.onClickSubmitButton}
|
||||
>
|
||||
{this.isDirty() ? 'Update' : 'Refresh'}
|
||||
{this.isDirty() ? (
|
||||
<FormattedMessage id="common.ui.queryBar.updateButtonLabel" defaultMessage="Update" />
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id="common.ui.queryBar.refreshButtonLabel"
|
||||
defaultMessage="Refresh"
|
||||
/>
|
||||
)}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const QueryBar = injectI18n(QueryBarUI);
|
||||
|
|
|
|||
|
|
@ -22,12 +22,13 @@
|
|||
import 'ngreact';
|
||||
import { uiModules } from '../../modules';
|
||||
import { QueryBar } from '../components';
|
||||
import { injectI18nProvider } from '@kbn/i18n/react';
|
||||
|
||||
const app = uiModules.get('app/kibana', ['react']);
|
||||
|
||||
app.directive('queryBar', (reactDirective, localStorage) => {
|
||||
return reactDirective(
|
||||
QueryBar,
|
||||
injectI18nProvider(QueryBar),
|
||||
undefined,
|
||||
{},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue