Skip to content
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

Jump to bottom

Translate Input Control component #22400

Merged
merged 9 commits into from
Sep 10, 2018
Merged

Translate Input Control component #22400

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c751868
Translate Input Control component
maryia-lapata Aug 24, 2018
7673f9d
Remove export from variables that get wrapped by a helper
maryia-lapata Aug 29, 2018
e56cc0a
Merge branch 'master' into feature/translations/input_control
maryia-lapata Aug 29, 2018
e7b6290
Merge branch 'master' into feature/translations/input_control
maryia-lapata Aug 30, 2018
1895c33
Refactoring
maryia-lapata Aug 30, 2018
60d0812
Update message ids
maryia-lapata Aug 30, 2018
983db3b
Merge branch 'master' into feature/translations/input_control
maryia-lapata Aug 30, 2018
f3611c7
Fix unit tests
maryia-lapata Aug 30, 2018
571d78c
Merge branch 'master' into feature/translations/input_control
maryia-lapata Sep 10, 2018
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
3 changes: 2 additions & 1 deletion .i18nrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"kbn": "src/core_plugins/kibana",
"common.server": "src/server",
"common.ui": "src/ui",
"xpack.idxMgmt": "xpack/plugins/index_management"
"xpack.idxMgmt": "xpack/plugins/index_management",
"inputControl":"src/core_plugins/input_control_vis"
},
"exclude": [
"src/ui/ui_render/bootstrap/app_bootstrap.js",
Expand Down
10 changes: 7 additions & 3 deletions ...lugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`renders ControlsTab 1`] = `
<div>
<ControlEditor
<InjectIntl(ControlEditorUi)
controlIndex={0}
controlParams={
Object {
Expand Down Expand Up @@ -39,7 +39,7 @@ exports[`renders ControlsTab 1`] = `
]
}
/>
<ControlEditor
<InjectIntl(ControlEditorUi)
controlIndex={1}
controlParams={
Object {
Expand Down Expand Up @@ -140,7 +140,11 @@ exports[`renders ControlsTab 1`] = `
onClick={[Function]}
type="button"
>
Add
<FormattedMessage
defaultMessage="Add"
id="inputControl.editor.addButtonLabel"
values={Object {}}
/>
</EuiButton>
</EuiFormRow>
</EuiFlexItem>
Expand Down
20 changes: 10 additions & 10 deletions ...input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down
24 changes: 21 additions & 3 deletions ...plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 16 additions & 4 deletions ...nput_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
15 changes: 9 additions & 6 deletions src/core_plugins/input_control_vis/public/components/editor/control_editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -101,7 +102,7 @@ export class ControlEditor extends Component {
<EuiForm>
<EuiFormRow
id={labelId}
label="Control Label"
label={<FormattedMessage id="inputControl.editor.controlLabel" defaultMessage="Control Label"/>}
>
<EuiFieldText
value={this.props.controlParams.label}
Expand All @@ -118,21 +119,21 @@ export class ControlEditor extends Component {
return (
<div>
<EuiButtonIcon
aria-label="Move control up"
aria-label={this.props.intl.formatMessage({ id: 'inputControl.editor.moveControlUpAria', defaultMessage: 'Move control up' })}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moveControlUpAria => moveControlUpAriaLabel

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.moveControlDownAria', defaultMessage: 'Move control down' })}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moveControlDownAria => moveControlDownAriaLabel

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.removeControlAria', defaultMessage: 'Remove control' })}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removeControlAria => removeControlAriaLabel

color="danger"
onClick={this.removeControl}
iconType="cross"
Expand Down Expand Up @@ -161,7 +162,7 @@ export class ControlEditor extends Component {
}
}

ControlEditor.propTypes = {
ControlEditorUi.propTypes = {
controlIndex: PropTypes.number.isRequired,
controlParams: PropTypes.object.isRequired,
handleLabelChange: PropTypes.func.isRequired,
Expand All @@ -179,3 +180,5 @@ ControlEditor.propTypes = {
})).isRequired,
handleParentChange: PropTypes.func.isRequired,
};

export const ControlEditor = injectI18n(ControlEditorUi);
35 changes: 28 additions & 7 deletions src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -33,7 +34,7 @@ import {
EuiSelect,
} from '@elastic/eui';

export class ControlsTab extends Component {
class ControlsTabUi extends Component {

state = {
type: 'list'
Expand Down Expand Up @@ -138,6 +139,24 @@ export class ControlsTab extends Component {
}

render() {
const { intl } = this.props;
const rangeSliderOption = intl.formatMessage({
id: 'inputControl.editor.select.rangeDropDown',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rangeDropDown => rangeDropDownOptionLabel.

defaultMessage: 'Range slider'
});
const optionsListOption = intl.formatMessage({
id: 'inputControl.editor.select.listDropDown',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

listDropDown => listDropDownOptionLabel

defaultMessage: 'Options list'
});
const selectAriaLabel = intl.formatMessage({
id: 'inputControl.editor.select.controlTypeAria',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

controlTypeAria => controlTypeAriaLabel

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add one more namespace for all ids in this file. inputControl.editor.select.controlTypeAria => inputControl.editor.controlsTab.select.controlTypeAriaLabel

defaultMessage: 'Select control type'
});
const addControlAriaLabel = intl.formatMessage({
id: 'inputControl.editor.select.addControlAria',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

addControlAria => addControlAriaLabel

defaultMessage: 'Add control'
});

return (
<div>

Expand All @@ -151,12 +170,12 @@ export class ControlsTab extends Component {
>
<EuiSelect
options={[
{ value: 'range', text: 'Range slider' },
{ value: 'list', text: 'Options list' },
{ value: 'range', text: rangeSliderOption },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it is okay to use intl here instead of creating additional variables. I would use variables if translation string is used in multiple times in different places.

{ value: 'list', text: optionsListOption },
]}
value={this.state.type}
onChange={evt => this.setState({ type: evt.target.value })}
aria-label="Select control type"
aria-label={selectAriaLabel}
/>
</EuiFormRow>
</EuiFlexItem>
Expand All @@ -169,9 +188,9 @@ export class ControlsTab extends Component {
onClick={this.handleAddControl}
iconType="plusInCircle"
data-test-subj="inputControlEditorAddBtn"
aria-label="Add control"
aria-label={addControlAriaLabel}
>
Add
<FormattedMessage id="inputControl.editor.addButtonLabel" defaultMessage="Add"/>
</EuiButton>
</EuiFormRow>
</EuiFlexItem>
Expand All @@ -183,7 +202,9 @@ export class ControlsTab extends Component {
}
}

ControlsTab.propTypes = {
ControlsTabUi.propTypes = {
scope: PropTypes.object.isRequired,
stageEditorParams: PropTypes.func.isRequired
};

export const ControlsTab = injectI18n(ControlsTabUi);
Loading