Translate Input Control component (#22400)

* Translate Input Control component * Remove export from variables that get wrapped by a helper * Refactoring * Update message ids * Fix unit tests
elastic · Sep 10, 2018 · 1a2e897 · 1a2e897
1 parent cd5eb59
commit 1a2e897
Show file tree

Hide file tree

Showing 29 changed files with 388 additions and 142 deletions.
diff --git a/.i18nrc.json b/.i18nrc.json
@@ -1,6 +1,7 @@
 {
   "paths": {
     "common.ui": "src/ui",
+    "inputControl":"src/core_plugins/input_control_vis",
     "kbn": "src/core_plugins/kibana",
     "statusPage": "src/core_plugins/status_page",
     "xpack.idxMgmt": "x-pack/plugins/index_management"

diff --git a/...lugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/...lugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders ControlsTab 1`] = `
 <div>
-  <ControlEditor
+  <InjectIntl(ControlEditorUi)
     controlIndex={0}
     controlParams={
       Object {
@@ -39,7 +39,7 @@ exports[`renders ControlsTab 1`] = `
       ]
     }
   />
-  <ControlEditor
+  <InjectIntl(ControlEditorUi)
     controlIndex={1}
     controlParams={
       Object {
@@ -140,7 +140,11 @@ exports[`renders ControlsTab 1`] = `
             onClick={[Function]}
             type="button"
           >
-            Add
+            <FormattedMessage
+              defaultMessage="Add"
+              id="inputControl.editor.controlsTab.addButtonLabel"
+              values={Object {}}
+            />
           </EuiButton>
         </EuiFormRow>
       </EuiFlexItem>

diff --git a/...input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap b/...input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`renders dynamic options should display disabled dynamic options with tooltip for non-string fields 1`] = `
 <div>
-  <IndexPatternSelect
+  <InjectIntl(IndexPatternSelectUi)
     controlIndex={0}
     getIndexPattern={[Function]}
     getIndexPatterns={[Function]}
     indexPatternId="mockIndexPattern"
     onChange={[Function]}
   />
-  <FieldSelect
+  <InjectIntl(FieldSelectUi)
     controlIndex={0}
     fieldName="numberField"
     filterField={[Function]}
@@ -72,14 +72,14 @@ exports[`renders dynamic options should display disabled dynamic options with to
 
 exports[`renders dynamic options should display dynamic options for string fields 1`] = `
 <div>
-  <IndexPatternSelect
+  <InjectIntl(IndexPatternSelectUi)
     controlIndex={0}
     getIndexPattern={[Function]}
     getIndexPatterns={[Function]}
     indexPatternId="mockIndexPattern"
     onChange={[Function]}
   />
-  <FieldSelect
+  <InjectIntl(FieldSelectUi)
     controlIndex={0}
     fieldName="keywordField"
     filterField={[Function]}
@@ -123,14 +123,14 @@ exports[`renders dynamic options should display dynamic options for string field
 
 exports[`renders dynamic options should display size field when dynamic options is disabled 1`] = `
 <div>
-  <IndexPatternSelect
+  <InjectIntl(IndexPatternSelectUi)
     controlIndex={0}
     getIndexPattern={[Function]}
     getIndexPatterns={[Function]}
     indexPatternId="mockIndexPattern"
     onChange={[Function]}
   />
-  <FieldSelect
+  <InjectIntl(FieldSelectUi)
     controlIndex={0}
     fieldName="keywordField"
     filterField={[Function]}
@@ -193,14 +193,14 @@ exports[`renders dynamic options should display size field when dynamic options
 
 exports[`renders should display chaining input when parents are provided 1`] = `
 <div>
-  <IndexPatternSelect
+  <InjectIntl(IndexPatternSelectUi)
     controlIndex={0}
     getIndexPattern={[Function]}
     getIndexPatterns={[Function]}
     indexPatternId="indexPattern1"
     onChange={[Function]}
   />
-  <FieldSelect
+  <InjectIntl(FieldSelectUi)
     controlIndex={0}
     fieldName="keywordField"
     filterField={[Function]}
@@ -296,14 +296,14 @@ exports[`renders should display chaining input when parents are provided 1`] = `
 
 exports[`renders should not display any options until field is selected 1`] = `
 <div>
-  <IndexPatternSelect
+  <InjectIntl(IndexPatternSelectUi)
     controlIndex={0}
     getIndexPattern={[Function]}
     getIndexPatterns={[Function]}
     indexPatternId="mockIndexPattern"
     onChange={[Function]}
   />
-  <FieldSelect
+  <InjectIntl(FieldSelectUi)
     controlIndex={0}
     fieldName=""
     filterField={[Function]}

diff --git a/...plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap b/...plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
@@ -11,7 +11,13 @@ exports[`renders OptionsTab 1`] = `
     <EuiSwitch
       checked={false}
       data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
-      label="Update Kibana filters on each change"
+      label={
+        <FormattedMessage
+          defaultMessage="Update Kibana filters on each change"
+          id="inputControl.editor.optionsTab.updateFilterLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
@@ -24,7 +30,13 @@ exports[`renders OptionsTab 1`] = `
     <EuiSwitch
       checked={false}
       data-test-subj="inputControlEditorUseTimeFilterCheckbox"
-      label="Use time filter"
+      label={
+        <FormattedMessage
+          defaultMessage="Use time filter"
+          id="inputControl.editor.optionsTab.useTimeFielterLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
@@ -36,7 +48,13 @@ exports[`renders OptionsTab 1`] = `
   >
     <EuiSwitch
       data-test-subj="inputControlEditorPinFiltersCheckbox"
-      label="Pin filters to global state"
+      label={
+        <FormattedMessage
+          defaultMessage="Pin filters to global state"
+          id="inputControl.editor.optionsTab.pinFieltersLabel"
+          values={Object {}}
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>

diff --git a/...nput_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap b/...nput_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`renders RangeControlEditor 1`] = `
 <div>
-  <IndexPatternSelect
+  <InjectIntl(IndexPatternSelectUi)
     controlIndex={0}
     getIndexPattern={[Function]}
     getIndexPatterns={[Function]}
     indexPatternId="indexPattern1"
     onChange={[Function]}
   />
-  <FieldSelect
+  <InjectIntl(FieldSelectUi)
     controlIndex={0}
     fieldName="numberField"
     filterField={[Function]}
@@ -22,7 +22,13 @@ exports[`renders RangeControlEditor 1`] = `
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="stepSize-0"
-    label="Step Size"
+    label={
+      <FormattedMessage
+        defaultMessage="Step Size"
+        id="inputControl.editor.rangeControl.stepSizeLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiFieldNumber
       compressed={false}
@@ -38,7 +44,13 @@ exports[`renders RangeControlEditor 1`] = `
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="decimalPlaces-0"
-    label="Decimal Places"
+    label={
+      <FormattedMessage
+        defaultMessage="Decimal Places"
+        id="inputControl.editor.rangeControl.decimalPlacesLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiFieldNumber
       compressed={false}

diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -23,6 +23,7 @@ import React, { Component } from 'react';
 import { RangeControlEditor } from './range_control_editor';
 import { ListControlEditor } from './list_control_editor';
 import { getTitle } from '../../editor_utils';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiAccordion,
@@ -34,7 +35,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-export class ControlEditor extends Component {
+class ControlEditorUi extends Component {
 
   changeLabel = (evt) => {
     this.props.handleLabelChange(this.props.controlIndex, evt);
@@ -101,7 +102,7 @@ export class ControlEditor extends Component {
       <EuiForm>
         <EuiFormRow
           id={labelId}
-          label="Control Label"
+          label={<FormattedMessage id="inputControl.editor.controlEditor.controlLabel" defaultMessage="Control Label"/>}
         >
           <EuiFieldText
             value={this.props.controlParams.label}
@@ -118,21 +119,30 @@ export class ControlEditor extends Component {
     return (
       <div>
         <EuiButtonIcon
-          aria-label="Move control up"
+          aria-label={this.props.intl.formatMessage({
+            id: 'inputControl.editor.controlEditor.moveControlUpAriaLabel',
+            defaultMessage: 'Move control up'
+          })}
           color="primary"
           onClick={this.moveUpControl}
           iconType="sortUp"
           data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
         />
         <EuiButtonIcon
-          aria-label="Move control down"
+          aria-label={this.props.intl.formatMessage({
+            id: 'inputControl.editor.controlEditor.moveControlDownAriaLabel',
+            defaultMessage: 'Move control down'
+          })}
           color="primary"
           onClick={this.moveDownControl}
           iconType="sortDown"
           data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
         />
         <EuiButtonIcon
-          aria-label="Remove control"
+          aria-label={this.props.intl.formatMessage({
+            id: 'inputControl.editor.controlEditor.removeControlAriaLabel',
+            defaultMessage: 'Remove control'
+          })}
           color="danger"
           onClick={this.removeControl}
           iconType="cross"
@@ -161,7 +171,7 @@ export class ControlEditor extends Component {
   }
 }
 
-ControlEditor.propTypes = {
+ControlEditorUi.propTypes = {
   controlIndex: PropTypes.number.isRequired,
   controlParams: PropTypes.object.isRequired,
   handleLabelChange: PropTypes.func.isRequired,
@@ -179,3 +189,5 @@ ControlEditor.propTypes = {
   })).isRequired,
   handleParentChange: PropTypes.func.isRequired,
 };
+
+export const ControlEditor = injectI18n(ControlEditorUi);
diff --git a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
@@ -23,6 +23,7 @@ import React, { Component } from 'react';
 import { ControlEditor } from './control_editor';
 import { addControl, moveControl, newControl, removeControl, setControl } from '../../editor_utils';
 import { getLineageMap, getParentCandidates } from '../../lineage';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiButton,
@@ -33,7 +34,7 @@ import {
   EuiSelect,
 } from '@elastic/eui';
 
-export class ControlsTab extends Component {
+class ControlsTabUi extends Component {
 
   state = {
     type: 'list'
@@ -138,6 +139,8 @@ export class ControlsTab extends Component {
   }
 
   render() {
+    const { intl } = this.props;
+
     return (
       <div>
 
@@ -151,12 +154,21 @@ export class ControlsTab extends Component {
               >
                 <EuiSelect
                   options={[
-                    { value: 'range', text: 'Range slider' },
-                    { value: 'list', text: 'Options list' },
+                    { value: 'range', text: intl.formatMessage({
+                      id: 'inputControl.editor.controlsTab.select.rangeDropDownOptionLabel',
+                      defaultMessage: 'Range slider' })
+                    },
+                    { value: 'list', text: intl.formatMessage({
+                      id: 'inputControl.editor.controlsTab.select.listDropDownOptionLabel',
+                      defaultMessage: 'Options list' })
+                    },
                   ]}
                   value={this.state.type}
                   onChange={evt => this.setState({ type: evt.target.value })}
-                  aria-label="Select control type"
+                  aria-label={intl.formatMessage({
+                    id: 'inputControl.editor.controlsTab.select.controlTypeAriaLabel',
+                    defaultMessage: 'Select control type'
+                  })}
                 />
               </EuiFormRow>
             </EuiFlexItem>
@@ -169,9 +181,12 @@ export class ControlsTab extends Component {
                   onClick={this.handleAddControl}
                   iconType="plusInCircle"
                   data-test-subj="inputControlEditorAddBtn"
-                  aria-label="Add control"
+                  aria-label={intl.formatMessage({
+                    id: 'inputControl.editor.controlsTab.select.addControlAriaLabel',
+                    defaultMessage: 'Add control'
+                  })}
                 >
-                  Add
+                  <FormattedMessage id="inputControl.editor.controlsTab.addButtonLabel" defaultMessage="Add"/>
                 </EuiButton>
               </EuiFormRow>
             </EuiFlexItem>
@@ -183,7 +198,9 @@ export class ControlsTab extends Component {
   }
 }
 
-ControlsTab.propTypes = {
+ControlsTabUi.propTypes = {
   scope: PropTypes.object.isRequired,
   stageEditorParams: PropTypes.func.isRequired
 };
+
+export const ControlsTab = injectI18n(ControlsTabUi);