diff --git a/src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap b/src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
index ff992e29731d9..1db5ee6d9da05 100644
--- a/src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
+++ b/src/ui/public/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
@@ -11,7 +11,11 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
size="xs"
type="button"
>
- Options
+
}
className="eui-displayBlock"
@@ -24,7 +28,11 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
withTitle={true}
>
- Syntax options
+
- 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
-
-
- here
-
- .
+
+
+ ,
+ }
+ }
+ />
+ }
name="popswitch"
onChange={[Function]}
/>
@@ -79,17 +103,26 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
size="xs"
>
- Not ready yet? Find our lucene docs
-
-
- here
-
- .
+
+
+ ,
+ }
+ }
+ />
@@ -107,7 +140,11 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
size="xs"
type="button"
>
- Options
+
}
className="eui-displayBlock"
@@ -120,7 +157,11 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
withTitle={true}
>
- Syntax options
+
- 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
-
-
- here
-
- .
+
+
+ ,
+ }
+ }
+ />
+ }
name="popswitch"
onChange={[Function]}
/>
@@ -175,17 +232,26 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
size="xs"
>
- Not ready yet? Find our lucene docs
-
-
- here
-
- .
+
+
+ ,
+ }
+ }
+ />
diff --git a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap
index 0f34256e0faea..006c99730be0f 100644
--- a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap
+++ b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap
@@ -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
+
@@ -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
+
@@ -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
+
diff --git a/src/ui/public/query_bar/components/language_switcher.tsx b/src/ui/public/query_bar/components/language_switcher.tsx
index 75319c53b3e43..9cbde475743d1 100644
--- a/src/ui/public/query_bar/components/language_switcher.tsx
+++ b/src/ui/public/query_bar/components/language_switcher.tsx
@@ -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 {
public render() {
const button = (
- Options
+
);
@@ -67,18 +68,30 @@ export class QueryLanguageSwitcher extends Component {
closePopover={this.closePopover}
withTitle
>
- Syntax options
+
+
+
- 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{' '}
- {
-
- here
-
- }
- .
+
+
+
+ ),
+ }}
+ />
@@ -89,7 +102,12 @@ export class QueryLanguageSwitcher extends Component
{
+ }
checked={this.props.language === 'kuery'}
onChange={this.onSwitchChange}
data-test-subj="languageToggle"
@@ -101,13 +119,20 @@ export class QueryLanguageSwitcher extends Component {
- Not ready yet? Find our lucene docs{' '}
- {
-
- here
-
- }
- .
+
+
+
+ ),
+ }}
+ />
diff --git a/src/ui/public/query_bar/components/query_bar.test.tsx b/src/ui/public/query_bar/components/query_bar.test.tsx
index 7309cc13a1b23..363464a5ca96e 100644
--- a/src/ui/public/query_bar/components/query_bar.test.tsx
+++ b/src/ui/public/query_bar/components/query_bar.test.tsx
@@ -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(
-
);
@@ -140,13 +142,14 @@ describe('QueryBar', () => {
});
it('Should pass the query language to the language switcher', () => {
- const component = shallow(
-
);
@@ -154,14 +157,15 @@ describe('QueryBar', () => {
});
it('Should disable autoFocus on EuiFieldText when disableAutoFocus prop is true', () => {
- const component = shallow(
-
);
@@ -169,14 +173,15 @@ describe('QueryBar', () => {
});
it('Should create a unique PersistedLog based on the appName and query language', () => {
- shallow(
-
);
@@ -187,14 +192,15 @@ describe('QueryBar', () => {
const mockStorage = createMockStorage();
const mockCallback = jest.fn();
- const component = shallow(
-
);
@@ -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(
-
);
- 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(
-
);
- 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(
-
);
diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx
index c7ce900302a5d..f8015f4d81cac 100644
--- a/src/ui/public/query_bar/components/query_bar.tsx
+++ b/src/ui/public/query_bar/components/query_bar.tsx
@@ -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 {
+export class QueryBarUI extends Component {
public static getDerivedStateFromProps(nextProps: Props, prevState: State) {
if (isEqual(prevState.currentProps, nextProps)) {
return null;
@@ -475,7 +478,10 @@ export class QueryBar extends Component {
{
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 {
- {this.isDirty() ? 'Update' : 'Refresh'}
+ {this.isDirty() ? (
+
+ ) : (
+
+ )}
);
}
}
+
+export const QueryBar = injectI18n(QueryBarUI);
diff --git a/src/ui/public/query_bar/directive/index.js b/src/ui/public/query_bar/directive/index.js
index ed00cfd272a35..347f3aeb12c09 100644
--- a/src/ui/public/query_bar/directive/index.js
+++ b/src/ui/public/query_bar/directive/index.js
@@ -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,
{},
{