[i18n] Translate Visual Builder(part_3)

.i18nrc.json

@@ -17,6 +17,7 @@
     "timelion": "src/core_plugins/timelion",
     "tsvb": "src/core_plugins/metrics",
     "tagCloud": "src/core_plugins/tagcloud",
+    "tsvb": "src/core_plugins/metrics",
     "xpack.graph": "x-pack/plugins/graph",
     "xpack.grokDebugger": "x-pack/plugins/grokdebugger",
     "xpack.idxMgmt": "x-pack/plugins/index_management",

src/core_plugins/metrics/public/components/add_delete_buttons.js

@@ -20,6 +20,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { EuiToolTip, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 function AddDeleteButtons(props) {
   const { testSubj } = props;
@@ -86,9 +87,9 @@ function AddDeleteButtons(props) {
 
 AddDeleteButtons.defaultProps = {
   testSubj: 'Add',
-  addTooltip: 'Add',
-  deleteTooltip: 'Delete',
-  cloneTooltip: 'Clone'
+  addTooltip: i18n.translate('tsvb.addDeleteButtons.addButtonDefaultTooltip', { defaultMessage: 'Add' }),
+  deleteTooltip: i18n.translate('tsvb.addDeleteButtons.deleteButtonDefaultTooltip', { defaultMessage: 'Delete' }),
+  cloneTooltip: i18n.translate('tsvb.addDeleteButtons.cloneButtonDefaultTooltip', { defaultMessage: 'Clone' })
 };
 
 AddDeleteButtons.propTypes = {

src/core_plugins/metrics/public/components/add_delete_buttons.test.js

@@ -19,14 +19,14 @@
 
 import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import sinon from 'sinon';
 import AddDeleteButtons from './add_delete_buttons';
 
 describe('AddDeleteButtons', () => {
   it('calls onAdd={handleAdd}', () => {
     const handleAdd = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onAdd={handleAdd} />
     );
     wrapper.find('EuiButtonIcon').at(0).simulate('click');
@@ -35,7 +35,7 @@ describe('AddDeleteButtons', () => {
 
   it('calls onDelete={handleDelete}', () => {
     const handleDelete = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onDelete={handleDelete} />
     );
     wrapper.find('EuiButtonIcon').at(1).simulate('click');
@@ -44,37 +44,37 @@ describe('AddDeleteButtons', () => {
 
   it('calls onClone={handleClone}', () => {
     const handleClone = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onClone={handleClone} />
     );
     wrapper.find('EuiButtonIcon').at(0).simulate('click');
     expect(handleClone.calledOnce).to.equal(true);
   });
 
   it('disableDelete={true}', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons disableDelete={true} />
     );
     expect(wrapper.find({ text: 'Delete' })).to.have.length(0);
   });
 
   it('disableAdd={true}', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons disableAdd={true} />
     );
     expect(wrapper.find({ text: 'Add' })).to.have.length(0);
   });
 
   it('should not display clone by default', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons />
     );
     expect(wrapper.find({ text: 'Clone' })).to.have.length(0);
   });
 
   it('should not display clone when disableAdd={true}', () => {
     const fn = sinon.spy();
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <AddDeleteButtons onClone={fn} disableAdd={true} />
     );
     expect(wrapper.find({ text: 'Clone' })).to.have.length(0);

src/core_plugins/metrics/public/components/annotations_editor.js

@@ -41,6 +41,7 @@ import {
   EuiCode,
   EuiText,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function newAnnotation() {
   return {
@@ -99,7 +100,10 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('indexPattern')}
-                  label="Index pattern (required)"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.indexPatternLabel"
+                    defaultMessage="Index pattern (required)"
+                  />)}
                   fullWidth
                 >
                   <EuiFieldText
@@ -110,7 +114,14 @@ class AnnotationsEditor extends Component {
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiFormRow id={htmlId('timeField')} label="Time field (required)" fullWidth>
+                <EuiFormRow
+                  id={htmlId('timeField')}
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.timeFieldLabel"
+                    defaultMessage="Time field (required)"
+                  />)}
+                  fullWidth
+                >
                   <FieldSelect
                     restrict="date"
                     value={model.time_field}
@@ -129,7 +140,10 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('queryString')}
-                  label="Query string"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.queryStringLabel"
+                    defaultMessage="Query string"
+                  />)}
                   fullWidth
                 >
                   <EuiFieldText
@@ -140,7 +154,12 @@ class AnnotationsEditor extends Component {
                 </EuiFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel>Ignore global filters?</EuiFormLabel>
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="tsvb.annotationsEditor.ignoreGlobalFiltersLabel"
+                    defaultMessage="Ignore global filters?"
+                  />
+                </EuiFormLabel>
                 <EuiSpacer size="s" />
                 <YesNo
                   value={model.ignore_global_filters}
@@ -149,7 +168,12 @@ class AnnotationsEditor extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel>Ignore panel filters?</EuiFormLabel>
+                <EuiFormLabel>
+                  <FormattedMessage
+                    id="tsvb.annotationsEditor.ignorePanelFiltersLabel"
+                    defaultMessage="Ignore panel filters?"
+                  />
+                </EuiFormLabel>
                 <EuiSpacer size="s" />
                 <YesNo
                   value={model.ignore_panel_filters}
@@ -163,7 +187,13 @@ class AnnotationsEditor extends Component {
 
             <EuiFlexGroup responsive={false} wrap={true} gutterSize="m">
               <EuiFlexItem>
-                <EuiFormRow id={htmlId('icon')} label="Icon (required)">
+                <EuiFormRow
+                  id={htmlId('icon')}
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.iconLabel"
+                    defaultMessage="Icon (required)"
+                  />)}
+                >
                   <IconSelect
                     value={model.icon}
                     onChange={this.handleChange(model, 'icon')}
@@ -173,7 +203,10 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('fields')}
-                  label="Fields (required - comma separated paths)"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.fieldsLabel"
+                    defaultMessage="Fields (required - comma separated paths)"
+                  />)}
                   fullWidth
                 >
                   <EuiFieldText
@@ -186,9 +219,18 @@ class AnnotationsEditor extends Component {
               <EuiFlexItem>
                 <EuiFormRow
                   id={htmlId('rowTemplate')}
-                  label="Row template (required)"
+                  label={(<FormattedMessage
+                    id="tsvb.annotationsEditor.rowTemplateLabel"
+                    defaultMessage="Row template (required)"
+                  />)}
                   helpText={
-                    <span>eg. <EuiCode>{'{{field}}'}</EuiCode></span>
+                    <span>
+                      <FormattedMessage
+                        id="tsvb.annotationsEditor.rowTemplateHelpText"
+                        defaultMessage="eg.{rowTemplateExample}"
+                        values={{ rowTemplateExample: (<EuiCode>{'{{field}}'}</EuiCode>) }}
+                      />
+                    </span>
                   }
                   fullWidth
                 >
@@ -222,16 +264,31 @@ class AnnotationsEditor extends Component {
         .bind(null, this.props, newAnnotation);
       content = (
         <EuiText textAlign="center">
-          <p>Click the button below to create an annotation data source.</p>
-          <EuiButton fill onClick={handleAdd}>Add data source</EuiButton>
+          <p>
+            <FormattedMessage
+              id="tsvb.annotationsEditor.howToCreateAnnotationDataSourceDescription"
+              defaultMessage="Click the button below to create an annotation data source."
+            />
+          </p>
+          <EuiButton fill onClick={handleAdd}>
+            <FormattedMessage
+              id="tsvb.annotationsEditor.addDataSourceButtonLabel"
+              defaultMessage="Add data source"
+            />
+          </EuiButton>
         </EuiText>
       );
     } else {
       const annotations = model.annotations.map(this.renderRow);
       content = (
         <div>
           <EuiTitle size="s">
-            <span>Data sources</span>
+            <span>
+              <FormattedMessage
+                id="tsvb.annotationsEditor.dataSourcesLabel"
+                defaultMessage="Data sources"
+              />
+            </span>
           </EuiTitle>
           <EuiSpacer size="m" />
 

src/core_plugins/metrics/public/components/color_picker.js

@@ -24,6 +24,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { EuiIconTip, } from '@elastic/eui';
 import Picker from './custom_color_picker';
+import { injectI18n } from '@kbn/i18n/react';
 
 class ColorPicker extends Component {
 
@@ -65,15 +66,22 @@ class ColorPicker extends Component {
     if (!this.props.value) {
       return (
         <button
-          aria-label="Color picker, not accessible"
+          aria-label={this.props.intl.formatMessage({
+            id: 'tsvb.colorPicker.notAccessibleAriaLabel',
+            defaultMessage: 'Color picker, not accessible'
+          })}
           className="tvbColorPicker__swatch-empty"
           onClick={this.handleClick}
         />
       );
     }
     return (
       <button
-        aria-label={`Color picker ({this.props.value}), not accessible`}
+        aria-label={this.props.intl.formatMessage({
+          id: 'tsvb.colorPicker.notAccessibleWithValueAriaLabel',
+          defaultMessage: 'Color picker ({value}), not accessible' }, {
+          value: this.props.value
+        })}
         style={{ backgroundColor: this.props.value }}
         className="tvbColorPicker__swatch"
         onClick={this.handleClick}
@@ -88,7 +96,15 @@ class ColorPicker extends Component {
     if (!this.props.disableTrash) {
       clear = (
         <div className="tvbColorPicker__clear" onClick={this.handleClear}>
-          <EuiIconTip size="s" type="cross" color="danger" content="Clear" />
+          <EuiIconTip
+            size="s"
+            type="cross"
+            color="danger"
+            content={this.props.intl.formatMessage({
+              id: 'tsvb.colorPicker.clearIconLabel',
+              defaultMessage: 'Clear'
+            })}
+          />
         </div>
       );
     }
@@ -124,4 +140,4 @@ ColorPicker.propTypes = {
   onChange: PropTypes.func
 };
 
-export default ColorPicker;
+export default injectI18n(ColorPicker);