[i18n] Translate Query_bar

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<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.linkText"
+                        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.linkText"
+                        defaultMessage="here"
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
             </p>
           </EuiText>
         </div>

src/ui/public/query_bar/components/query_bar.test.tsx

@@ -70,8 +70,8 @@ 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';
 
@@ -126,8 +126,8 @@ describe('QueryBar', () => {
   });
 
   it('Should render the given query', () => {
-    const component = shallow(
-      <QueryBar
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
         query={kqlQuery}
         onSubmit={noop}
         appName={'discover'}
@@ -140,8 +140,8 @@ 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'}
@@ -154,8 +154,8 @@ 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'}
@@ -169,8 +169,8 @@ 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'}
@@ -187,8 +187,8 @@ describe('QueryBar', () => {
     const mockStorage = createMockStorage();
     const mockCallback = jest.fn();
 
-    const component = shallow(
-      <QueryBar
+    const component = shallowWithIntl(
+      <QueryBar.WrappedComponent
         query={kqlQuery}
         onSubmit={mockCallback}
         appName={'discover'}
@@ -209,8 +209,8 @@ 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'}
@@ -234,8 +234,8 @@ 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'}
@@ -259,8 +259,8 @@ 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'}

src/ui/public/query_bar/components/query_bar.tsx

@@ -44,6 +44,8 @@ import {
   EuiOutsideClickDetector,
 } from '@elastic/eui';
 
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+
 const KEY_CODES = {
   LEFT: 37,
   UP: 38,
@@ -83,7 +85,7 @@ interface State {
   currentProps?: Props;
 }
 
-export class QueryBar extends Component<Props, State> {
+class QueryBarUI extends Component<Props, State> {
   public static getDerivedStateFromProps(nextProps: Props, prevState: State) {
     if (isEqual(prevState.currentProps, nextProps)) {
       return null;
@@ -471,7 +473,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}
@@ -487,7 +492,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"
@@ -520,16 +528,25 @@ 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.updateLabel" defaultMessage="Update" />
+            ) : (
+              <FormattedMessage id="common.ui.queryBar.refreshLabel" defaultMessage="Refresh" />
+            )}
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
   }
 }
+
+export const QueryBar = injectI18n(QueryBarUI);

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,
     {},
     {