Skip to content

[6.x] [i18n] Translate Visual Builder(part_3) (#25923) #26174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Nox911 merged 1 commit into from
Nov 26, 2018
Merged

[6.x] [i18n] Translate Visual Builder(part_3) (#25923) #26174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .i18nrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 4 additions & 3 deletions src/core_plugins/metrics/public/components/add_delete_buttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 = {
Expand Down
16 changes: 8 additions & 8 deletions src/core_plugins/metrics/public/components/add_delete_buttons.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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);
Expand Down
81 changes: 69 additions & 12 deletions src/core_plugins/metrics/public/components/annotations_editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
EuiCode,
EuiText,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

function newAnnotation() {
return {
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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')}
Expand All @@ -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
Expand All @@ -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
>
Expand Down Expand Up @@ -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" />

Expand Down
24 changes: 20 additions & 4 deletions src/core_plugins/metrics/public/components/color_picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -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}
Expand All @@ -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>
);
}
Expand Down Expand Up @@ -124,4 +140,4 @@ ColorPicker.propTypes = {
onChange: PropTypes.func
};

export default ColorPicker;
export default injectI18n(ColorPicker);
Loading