github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Remove injectI18n in field editor. (#47656) (#51019)

Browse source 
* Removed injectI18n in FieldEditor.

* Removed injectI18n in Sample.

* Removed injectI18n in Color.

* Removed injectI18n in UrlTemplateFlyout.

* Removed injectI18n in LabelTemplateFlyout.

* Removed injectI18n in StaticLookup.

* Fixed snapshots.

* Merge branch 'master' into rm-injectI18n-field-editor

* Updated snapshots with default value.

* Fixed eslint error.
This commit is contained in:
Liza Katz 2019-11-19 15:30:27 +02:00 • committed by GitHub
parent d0883b3d86
commit 10deb3386b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 276 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/legacy/ui/public/field_editor/__snapshots__/field_editor.test.js.snap generated
View file

@ -150,7 +150,13 @@ exports[`FieldEditor should render create new scripted field correctly 1`] = `
/>
</eui-form-row>
<eui-form-row
error="Script is required"
error={
<FormattedMessage
defaultMessage="Script is required"
id="common.ui.fieldEditor.scriptRequiredErrorMessage"
values={Object {}}
/>
}
fullWidth={true}
isInvalid={true}
label="Script"
@ -677,7 +683,13 @@ exports[`FieldEditor should show conflict field warning 1`] = `
/>
</eui-form-row>
<eui-form-row
error="Script is required"
error={
<FormattedMessage
defaultMessage="Script is required"
id="common.ui.fieldEditor.scriptRequiredErrorMessage"
values={Object {}}
/>
}
fullWidth={true}
isInvalid={true}
label="Script"
@ -1346,7 +1358,13 @@ exports[`FieldEditor should show multiple type field warning with a table contai
/>
</eui-form-row>
<eui-form-row
error="Script is required"
error={
<FormattedMessage
defaultMessage="Script is required"
id="common.ui.fieldEditor.scriptRequiredErrorMessage"
values={Object {}}
/>
}
fullWidth={true}
isInvalid={true}
label="Script"

3
src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap generated
View file

@ -52,7 +52,8 @@ exports[`BytesFormatEditor should render normally 1`] = `
placeholder="0,0.[000]b"
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

78
src/legacy/ui/public/field_editor/components/field_format_editor/editors/color/__snapshots__/color.test.js.snap generated
View file

@ -1,27 +1,43 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ColorFormatEditorComponent should render multiple colors 1`] = `
exports[`ColorFormatEditor should render multiple colors 1`] = `
<Fragment>
<EuiBasicTable
columns={
Array [
Object {
"field": "regex",
"name": "Pattern (regular expression)",
"name": <FormattedMessage
defaultMessage="Pattern (regular expression)"
id="common.ui.fieldEditor.color.patternLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "text",
"name": "Text color",
"name": <FormattedMessage
defaultMessage="Text color"
id="common.ui.fieldEditor.color.textColorLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "background",
"name": "Background color",
"name": <FormattedMessage
defaultMessage="Background color"
id="common.ui.fieldEditor.color.backgroundLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"name": "Example",
"name": <FormattedMessage
defaultMessage="Example"
id="common.ui.fieldEditor.color.exampleLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
@ -80,28 +96,44 @@ exports[`ColorFormatEditorComponent should render multiple colors 1`] = `
</Fragment>
`;
exports[`ColorFormatEditorComponent should render other type normally (range field) 1`] = `
exports[`ColorFormatEditor should render other type normally (range field) 1`] = `
<Fragment>
<EuiBasicTable
columns={
Array [
Object {
"field": "range",
"name": "Range (min:max)",
"name": <FormattedMessage
defaultMessage="Range (min:max)"
id="common.ui.fieldEditor.color.rangeLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "text",
"name": "Text color",
"name": <FormattedMessage
defaultMessage="Text color"
id="common.ui.fieldEditor.color.textColorLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "background",
"name": "Background color",
"name": <FormattedMessage
defaultMessage="Background color"
id="common.ui.fieldEditor.color.backgroundLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"name": "Example",
"name": <FormattedMessage
defaultMessage="Example"
id="common.ui.fieldEditor.color.exampleLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
@ -153,28 +185,44 @@ exports[`ColorFormatEditorComponent should render other type normally (range fie
</Fragment>
`;
exports[`ColorFormatEditorComponent should render string type normally (regex field) 1`] = `
exports[`ColorFormatEditor should render string type normally (regex field) 1`] = `
<Fragment>
<EuiBasicTable
columns={
Array [
Object {
"field": "regex",
"name": "Pattern (regular expression)",
"name": <FormattedMessage
defaultMessage="Pattern (regular expression)"
id="common.ui.fieldEditor.color.patternLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "text",
"name": "Text color",
"name": <FormattedMessage
defaultMessage="Text color"
id="common.ui.fieldEditor.color.textColorLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "background",
"name": "Background color",
"name": <FormattedMessage
defaultMessage="Background color"
id="common.ui.fieldEditor.color.backgroundLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"name": "Example",
"name": <FormattedMessage
defaultMessage="Example"
id="common.ui.fieldEditor.color.exampleLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {

27
src/legacy/ui/public/field_editor/components/field_format_editor/editors/color/color.js
View file

@ -33,9 +33,10 @@ import {
import { DEFAULT_CONVERTER_COLOR } from '../../../../../../../../plugins/data/public';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
export class ColorFormatEditorComponent extends DefaultFormatEditor {
export class ColorFormatEditor extends DefaultFormatEditor {
constructor(props) {
super(props);
this.onChange({
@ -73,7 +74,7 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
}
render() {
const { formatParams, fieldType, intl } = this.props;
const { formatParams, fieldType } = this.props;
const items = formatParams.colors && formatParams.colors.length && formatParams.colors.map((color, index) => {
return {
@ -85,8 +86,10 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
const columns = [
fieldType === 'string' ? {
field: 'regex',
name: intl.formatMessage(
{ id: 'common.ui.fieldEditor.color.patternLabel', defaultMessage: 'Pattern (regular expression)' }),
name: <FormattedMessage
id="common.ui.fieldEditor.color.patternLabel"
defaultMessage="Pattern (regular expression)"
/>,
render: (value, item) => {
return (
<EuiFieldText
@ -101,7 +104,7 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
}
} : {
field: 'range',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.color.rangeLabel', defaultMessage: 'Range (min:max)' }),
name: <FormattedMessage id="common.ui.fieldEditor.color.rangeLabel" defaultMessage="Range (min:max)"/>,
render: (value, item) => {
return (
<EuiFieldText
@ -117,7 +120,7 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
},
{
field: 'text',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.color.textColorLabel', defaultMessage: 'Text color' }),
name: <FormattedMessage id="common.ui.fieldEditor.color.textColorLabel" defaultMessage="Text color" />,
render: (color, item) => {
return (
<EuiColorPicker
@ -133,7 +136,7 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
},
{
field: 'background',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.color.backgroundLabel', defaultMessage: 'Background color' }),
name: <FormattedMessage id="common.ui.fieldEditor.color.backgroundLabel" defaultMessage="Background color" />,
render: (color, item) => {
return (
<EuiColorPicker
@ -148,7 +151,7 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
}
},
{
name: intl.formatMessage({ id: 'common.ui.fieldEditor.color.exampleLabel', defaultMessage: 'Example' }),
name: <FormattedMessage id="common.ui.fieldEditor.color.exampleLabel" defaultMessage="Example" />,
render: (item) => {
return (
<div
@ -165,9 +168,8 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
{
actions: [
{
name: intl.formatMessage({ id: 'common.ui.fieldEditor.color.deleteAria', defaultMessage: 'Delete' }),
description: intl.formatMessage(
{ id: 'common.ui.fieldEditor.color.deleteTitle', defaultMessage: 'Delete color format' }),
name: i18n.translate('common.ui.fieldEditor.color.deleteAria', { defaultMessage: 'Delete' }),
description: i18n.translate('common.ui.fieldEditor.color.deleteTitle', { defaultMessage: 'Delete color format' }),
onClick: (item) => {
this.removeColor(item.index);
},
@ -200,5 +202,4 @@ export class ColorFormatEditorComponent extends DefaultFormatEditor {
}
}
export const ColorFormatEditor = injectI18n(ColorFormatEditorComponent);
ColorFormatEditor.formatId = 'color';

18
src/legacy/ui/public/field_editor/components/field_format_editor/editors/color/color.test.js
View file

@ -18,9 +18,9 @@
*/
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
import { ColorFormatEditor, ColorFormatEditorComponent } from './color';
import { ColorFormatEditor } from './color';
import { DEFAULT_CONVERTER_COLOR } from '../../../../../../../../plugins/data/public';
const fieldType = 'string';
@ -37,12 +37,10 @@ describe('ColorFormatEditor', () => {
it('should have a formatId', () => {
expect(ColorFormatEditor.formatId).toEqual('color');
});
});
describe('ColorFormatEditorComponent', () => {
it('should render string type normally (regex field)', async () => {
const component = shallowWithIntl(
<ColorFormatEditorComponent
const component = shallowWithI18nProvider(
<ColorFormatEditor
fieldType={fieldType}
format={format}
formatParams={formatParams}
@ -55,8 +53,8 @@ describe('ColorFormatEditorComponent', () => {
});
it('should render other type normally (range field)', async () => {
const component = shallowWithIntl(
<ColorFormatEditorComponent
const component = shallowWithI18nProvider(
<ColorFormatEditor
fieldType={'number'}
format={format}
formatParams={formatParams}
@ -69,8 +67,8 @@ describe('ColorFormatEditorComponent', () => {
});
it('should render multiple colors', async () => {
const component = shallowWithIntl(
<ColorFormatEditorComponent
const component = shallowWithI18nProvider(
<ColorFormatEditor
fieldType={fieldType}
format={format}
formatParams={{ colors: [...formatParams.colors, ...formatParams.colors] }}

3
src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap generated
View file

@ -53,7 +53,8 @@ exports[`DateFormatEditor should render normally 1`] = `
placeholder="MMMM Do YYYY, HH:mm:ss.SSS"
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

3
src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap generated
View file

@ -53,7 +53,8 @@ exports[`DateFormatEditor should render normally 1`] = `
placeholder="MMM D, YYYY @ HH:mm:ss.SSSSSSSSS"
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

6
src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap generated
View file

@ -73,7 +73,8 @@ exports[`DurationFormatEditor should render human readable output normally 1`] =
}
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {
@ -218,7 +219,8 @@ exports[`DurationFormatEditor should render non-human readable output normally 1
onChange={[Function]}
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

3
src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap generated
View file

@ -52,7 +52,8 @@ exports[`NumberFormatEditor should render normally 1`] = `
placeholder="0,0.[000]"
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

3
src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap generated
View file

@ -52,7 +52,8 @@ exports[`PercentFormatEditor should render normally 1`] = `
placeholder="0,0.[000]%"
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

28
src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap generated
View file

@ -1,18 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StaticLookupFormatEditorComponent should render multiple lookup entries and unknown key value 1`] = `
exports[`StaticLookupFormatEditor should render multiple lookup entries and unknown key value 1`] = `
<Fragment>
<EuiBasicTable
columns={
Array [
Object {
"field": "key",
"name": "Key",
"name": <FormattedMessage
defaultMessage="Key"
id="common.ui.fieldEditor.staticLookup.keyLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "value",
"name": "Value",
"name": <FormattedMessage
defaultMessage="Value"
id="common.ui.fieldEditor.staticLookup.valueLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
@ -99,19 +107,27 @@ exports[`StaticLookupFormatEditorComponent should render multiple lookup entries
</Fragment>
`;
exports[`StaticLookupFormatEditorComponent should render normally 1`] = `
exports[`StaticLookupFormatEditor should render normally 1`] = `
<Fragment>
<EuiBasicTable
columns={
Array [
Object {
"field": "key",
"name": "Key",
"name": <FormattedMessage
defaultMessage="Key"
id="common.ui.fieldEditor.staticLookup.keyLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {
"field": "value",
"name": "Value",
"name": <FormattedMessage
defaultMessage="Value"
id="common.ui.fieldEditor.staticLookup.valueLabel"
values={Object {}}
/>,
"render": [Function],
},
Object {

24
src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.js
View file

@ -31,9 +31,10 @@ import {
DefaultFormatEditor
} from '../default';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
export class StaticLookupFormatEditor extends DefaultFormatEditor {
onLookupChange = (newLookupParams, index) => {
const lookupEntries = [...this.props.formatParams.lookupEntries];
@ -65,7 +66,7 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
}
render() {
const { formatParams, intl } = this.props;
const { formatParams } = this.props;
const items = formatParams.lookupEntries && formatParams.lookupEntries.length && formatParams.lookupEntries.map((lookup, index) => {
return {
@ -78,7 +79,7 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
const columns = [
{
field: 'key',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.staticLookup.keyLabel', defaultMessage: 'Key' }),
name: <FormattedMessage id="common.ui.fieldEditor.staticLookup.keyLabel" defaultMessage="Key" />,
render: (value, item) => {
return (
<EuiFieldText
@ -94,7 +95,7 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
},
{
field: 'value',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.staticLookup.valueLabel', defaultMessage: 'Value' }),
name: <FormattedMessage id="common.ui.fieldEditor.staticLookup.valueLabel" defaultMessage="Value" />,
render: (value, item) => {
return (
<EuiFieldText
@ -111,9 +112,8 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
{
actions: [
{
name: intl.formatMessage({ id: 'common.ui.fieldEditor.staticLookup.deleteAria', defaultMessage: 'Delete' }),
description: intl.formatMessage(
{ id: 'common.ui.fieldEditor.staticLookup.deleteTitle', defaultMessage: 'Delete entry' }),
name: i18n.translate('common.ui.fieldEditor.staticLookup.deleteAria', { defaultMessage: 'Delete' }),
description: i18n.translate('common.ui.fieldEditor.staticLookup.deleteTitle', { defaultMessage: 'Delete entry' }),
onClick: (item) => {
this.removeLookup(item.index);
},
@ -148,8 +148,11 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
>
<EuiFieldText
value={formatParams.unknownKeyValue || ''}
placeholder={intl.formatMessage(
{ id: 'common.ui.fieldEditor.staticLookup.leaveBlankPlaceholder', defaultMessage: 'Leave blank to keep value as-is' })}
placeholder={i18n.translate(
'common.ui.fieldEditor.staticLookup.leaveBlankPlaceholder', {
defaultMessage: 'Leave blank to keep value as-is'
})
}
onChange={(e) => {
this.onChange({ unknownKeyValue: e.target.value });
}}
@ -161,5 +164,4 @@ export class StaticLookupFormatEditorComponent extends DefaultFormatEditor {
}
}
export const StaticLookupFormatEditor = injectI18n(StaticLookupFormatEditorComponent);
StaticLookupFormatEditor.formatId = 'static_lookup';

14
src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/static_lookup.test.js
View file

@ -18,9 +18,9 @@
*/
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
import { StaticLookupFormatEditor, StaticLookupFormatEditorComponent } from './static_lookup';
import { StaticLookupFormatEditor } from './static_lookup';
const fieldType = 'string';
const format = {
@ -37,12 +37,10 @@ describe('StaticLookupFormatEditor', () => {
it('should have a formatId', () => {
expect(StaticLookupFormatEditor.formatId).toEqual('static_lookup');
});
});
describe('StaticLookupFormatEditorComponent', () => {
it('should render normally', async () => {
const component = shallowWithIntl(
<StaticLookupFormatEditorComponent
const component = shallowWithI18nProvider(
<StaticLookupFormatEditor
fieldType={fieldType}
format={format}
formatParams={formatParams}
@ -55,8 +53,8 @@ describe('StaticLookupFormatEditorComponent', () => {
});
it('should render multiple lookup entries and unknown key value', async () => {
const component = shallowWithIntl(
<StaticLookupFormatEditorComponent
const component = shallowWithI18nProvider(
<StaticLookupFormatEditor
fieldType={fieldType}
format={format}
formatParams={{ lookupEntries: [{}, {}, {}], unknownKeyValue: 'test value' }}

3
src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap generated
View file

@ -37,7 +37,8 @@ exports[`StringFormatEditor should render normally 1`] = `
}
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

3
src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap generated
View file

@ -27,7 +27,8 @@ exports[`TruncateFormatEditor should render normally 1`] = `
onChange={[Function]}
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="text"
samples={
Array [
Object {

24
src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap generated
View file

@ -2,11 +2,11 @@
exports[`UrlFormatEditor should render label template help 1`] = `
<Fragment>
<InjectIntl(LabelTemplateFlyout)
<LabelTemplateFlyout
isVisible={true}
onClose={[Function]}
/>
<InjectIntl(UrlTemplateFlyout)
<UrlTemplateFlyout
isVisible={false}
onClose={[Function]}
/>
@ -124,7 +124,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
value=""
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="html"
samples={Array []}
/>
@ -133,11 +133,11 @@ exports[`UrlFormatEditor should render label template help 1`] = `
exports[`UrlFormatEditor should render normally 1`] = `
<Fragment>
<InjectIntl(LabelTemplateFlyout)
<LabelTemplateFlyout
isVisible={false}
onClose={[Function]}
/>
<InjectIntl(UrlTemplateFlyout)
<UrlTemplateFlyout
isVisible={false}
onClose={[Function]}
/>
@ -255,7 +255,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
value=""
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="html"
samples={Array []}
/>
@ -264,11 +264,11 @@ exports[`UrlFormatEditor should render normally 1`] = `
exports[`UrlFormatEditor should render url template help 1`] = `
<Fragment>
<InjectIntl(LabelTemplateFlyout)
<LabelTemplateFlyout
isVisible={false}
onClose={[Function]}
/>
<InjectIntl(UrlTemplateFlyout)
<UrlTemplateFlyout
isVisible={true}
onClose={[Function]}
/>
@ -386,7 +386,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
value=""
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="html"
samples={Array []}
/>
@ -395,11 +395,11 @@ exports[`UrlFormatEditor should render url template help 1`] = `
exports[`UrlFormatEditor should render width and height fields if image 1`] = `
<Fragment>
<InjectIntl(LabelTemplateFlyout)
<LabelTemplateFlyout
isVisible={false}
onClose={[Function]}
/>
<InjectIntl(UrlTemplateFlyout)
<UrlTemplateFlyout
isVisible={false}
onClose={[Function]}
/>
@ -566,7 +566,7 @@ exports[`UrlFormatEditor should render width and height fields if image 1`] = `
value=""
/>
</EuiFormRow>
<InjectIntl(FormatEditorSamplesComponent)
<FormatEditorSamples
sampleType="html"
samples={
Array [

34
src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/label_template_flyout.js
View file

@ -27,12 +27,12 @@ import {
EuiText,
} from '@elastic/eui';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
export const LabelTemplateFlyoutComponent = ({
export const LabelTemplateFlyout = ({
isVisible = false,
onClose = () => {},
intl,
}) => {
return isVisible ? (
<EuiFlyout
@ -70,37 +70,37 @@ export const LabelTemplateFlyoutComponent = ({
{
input: 1234,
urlTemplate: 'http://company.net/profiles?user_id={{value}}',
labelTemplate: intl.formatMessage(
{ id: 'common.ui.fieldEditor.labelTemplate.example.idLabel', defaultMessage: 'User #{value}' },
{ value: '{{value}}' }),
output: '<a href="http://company.net/profiles?user_id=1234">' + intl.formatMessage({ id: 'common.ui.fieldEditor.labelTemplate.example.output.idLabel', defaultMessage: 'User' }) + ' #1234</a>',
labelTemplate: i18n.translate(
'common.ui.fieldEditor.labelTemplate.example.idLabel', {
defaultMessage: 'User #{value}', values: { value: '{{value}}' }
}
),
output: '<a href="http://company.net/profiles?user_id=1234">' + i18n.translate('common.ui.fieldEditor.labelTemplate.example.output.idLabel', { defaultMessage: 'User' }) + ' #1234</a>',
},
{
input: '/assets/main.css',
urlTemplate: 'http://site.com{{rawValue}}',
labelTemplate: intl.formatMessage(
{ id: 'common.ui.fieldEditor.labelTemplate.example.pathLabel', defaultMessage: 'View Asset' }),
output: '<a href="http://site.com/assets/main.css">' + intl.formatMessage({ id: 'common.ui.fieldEditor.labelTemplate.example.output.pathLabel', defaultMessage: 'View Asset' }) + '</a>',
labelTemplate: i18n.translate('common.ui.fieldEditor.labelTemplate.example.pathLabel', { defaultMessage: 'View Asset' }),
output: '<a href="http://site.com/assets/main.css">' + i18n.translate('common.ui.fieldEditor.labelTemplate.example.output.pathLabel', { defaultMessage: 'View Asset' }) + '</a>',
},
]}
columns={[
{
field: 'input',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.labelTemplate.inputHeader', defaultMessage: 'Input' }),
name: i18n.translate('common.ui.fieldEditor.labelTemplate.inputHeader', { defaultMessage: 'Input' }),
width: '160px',
},
{
field: 'urlTemplate',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.labelTemplate.urlHeader', defaultMessage: 'URL Template' }),
name: i18n.translate('common.ui.fieldEditor.labelTemplate.urlHeader', { defaultMessage: 'URL Template' }),
},
{
field: 'labelTemplate',
name: intl.formatMessage(
{ id: 'common.ui.fieldEditor.labelTemplate.labelHeader', defaultMessage: 'Label Template' }),
name: i18n.translate('common.ui.fieldEditor.labelTemplate.labelHeader', { defaultMessage: 'Label Template' }),
},
{
field: 'output',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.labelTemplate.outputHeader', defaultMessage: 'Output' }),
name: i18n.translate('common.ui.fieldEditor.labelTemplate.outputHeader', { defaultMessage: 'Output' }),
render: (value) => {
return (
<span
@ -121,6 +121,4 @@ export const LabelTemplateFlyoutComponent = ({
) : null;
};
LabelTemplateFlyoutComponent.displayName = 'LabelTemplateFlyout';
export const LabelTemplateFlyout = injectI18n(LabelTemplateFlyoutComponent);
LabelTemplateFlyout.displayName = 'LabelTemplateFlyout';

12
src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/label_template_flyout.test.js
View file

@ -18,14 +18,14 @@
*/
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
import { LabelTemplateFlyoutComponent } from './label_template_flyout';
import { LabelTemplateFlyout } from './label_template_flyout';
describe('LabelTemplateFlyout', () => {
it('should render normally', async () => {
const component = shallowWithIntl(
<LabelTemplateFlyoutComponent
const component = shallowWithI18nProvider(
<LabelTemplateFlyout
isVisible={true}
/>
);
@ -33,8 +33,8 @@ describe('LabelTemplateFlyout', () => {
});
it('should not render if not visible', async () => {
const component = shallowWithIntl(
<LabelTemplateFlyoutComponent />
const component = shallowWithI18nProvider(
<LabelTemplateFlyout />
);
expect(component).toMatchSnapshot();
});

16
src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/url_template_flyout.js
View file

@ -27,12 +27,12 @@ import {
EuiText,
} from '@elastic/eui';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
export const UrlTemplateFlyoutComponent = ({
export const UrlTemplateFlyout = ({
isVisible = false,
onClose = () => {},
intl,
}) => {
return isVisible ? (
<EuiFlyout
@ -95,16 +95,16 @@ export const UrlTemplateFlyoutComponent = ({
columns={[
{
field: 'input',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.urlTemplate.inputHeader', defaultMessage: 'Input' }),
name: i18n.translate('common.ui.fieldEditor.urlTemplate.inputHeader', { defaultMessage: 'Input' }),
width: '160px',
},
{
field: 'template',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.urlTemplate.templateHeader', defaultMessage: 'Template' }),
name: i18n.translate('common.ui.fieldEditor.urlTemplate.templateHeader', { defaultMessage: 'Template' }),
},
{
field: 'output',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.urlTemplate.outputHeader', defaultMessage: 'Output' }),
name: i18n.translate('common.ui.fieldEditor.urlTemplate.outputHeader', { defaultMessage: 'Output' }),
},
]}
/>
@ -113,7 +113,3 @@ export const UrlTemplateFlyoutComponent = ({
</EuiFlyout>
) : null;
};
UrlTemplateFlyoutComponent.displayName = 'UrlTemplateFlyout';
export const UrlTemplateFlyout = injectI18n(UrlTemplateFlyoutComponent);

12
src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/url_template_flyout.test.js
View file

@ -18,14 +18,14 @@
*/
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
import { UrlTemplateFlyoutComponent } from './url_template_flyout';
import { UrlTemplateFlyout } from './url_template_flyout';
describe('UrlTemplateFlyout', () => {
it('should render normally', async () => {
const component = shallowWithIntl(
<UrlTemplateFlyoutComponent
const component = shallowWithI18nProvider(
<UrlTemplateFlyout
isVisible={true}
/>
);
@ -33,8 +33,8 @@ describe('UrlTemplateFlyout', () => {
});
it('should not render if not visible', async () => {
const component = shallowWithIntl(
<UrlTemplateFlyoutComponent />
const component = shallowWithI18nProvider(
<UrlTemplateFlyout />
);
expect(component).toMatchSnapshot();
});

15
src/legacy/ui/public/field_editor/components/field_format_editor/samples/samples.js
View file

@ -22,9 +22,10 @@ import PropTypes from 'prop-types';
import { EuiBasicTable, EuiFormRow } from '@elastic/eui';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
export class FormatEditorSamplesComponent extends PureComponent {
export class FormatEditorSamples extends PureComponent {
static defaultProps = {
sampleType: 'text'
};
@ -39,13 +40,12 @@ export class FormatEditorSamplesComponent extends PureComponent {
};
render() {
const { samples, intl, sampleType } = this.props;
const { samples, sampleType } = this.props;
const columns = [
{
field: 'input',
name: intl.formatMessage({
id: 'common.ui.fieldEditor.samples.inputHeader',
name: i18n.translate('common.ui.fieldEditor.samples.inputHeader', {
defaultMessage: 'Input',
}),
render: input => {
@ -54,8 +54,7 @@ export class FormatEditorSamplesComponent extends PureComponent {
},
{
field: 'output',
name: intl.formatMessage({
id: 'common.ui.fieldEditor.samples.outputHeader',
name: i18n.translate('common.ui.fieldEditor.samples.outputHeader', {
defaultMessage: 'Output',
}),
render: output => {
@ -89,5 +88,3 @@ export class FormatEditorSamplesComponent extends PureComponent {
) : null;
}
}
export const FormatEditorSamples = injectI18n(FormatEditorSamplesComponent);

12
src/legacy/ui/public/field_editor/components/field_format_editor/samples/samples.test.js
View file

@ -18,14 +18,14 @@
*/
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
import { FormatEditorSamplesComponent } from './samples';
import { FormatEditorSamples } from './samples';
describe('FormatEditorSamples', () => {
it('should render normally', async () => {
const component = shallowWithIntl(
<FormatEditorSamplesComponent
const component = shallowWithI18nProvider(
<FormatEditorSamples
samples={[
{ input: 'test', output: 'TEST' },
{ input: 123, output: 456 },
@ -38,8 +38,8 @@ describe('FormatEditorSamples', () => {
});
it('should render nothing if there are no samples', async () => {
const component = shallowWithIntl(
<FormatEditorSamplesComponent
const component = shallowWithI18nProvider(
<FormatEditorSamples
samples={[]}
/>
);

87
src/legacy/ui/public/field_editor/field_editor.js
View file

@ -78,12 +78,13 @@ import {
import { FIELD_TYPES_BY_LANG, DEFAULT_FIELD_TYPES } from './constants';
import { copyField, getDefaultFormat, executeScript, isScriptValid } from './lib';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
// This loads Ace editor's "groovy" mode, used below to highlight the script.
import 'brace/mode/groovy';
export class FieldEditorComponent extends PureComponent {
export class FieldEditor extends PureComponent {
static propTypes = {
indexPattern: PropTypes.object.isRequired,
field: PropTypes.object.isRequired,
@ -227,12 +228,11 @@ export class FieldEditorComponent extends PureComponent {
renderName() {
const { isCreating, field } = this.state;
const { intl } = this.props;
const isInvalid = !field.name || !field.name.trim();
return isCreating ? (
<EuiFormRow
label={intl.formatMessage({ id: 'common.ui.fieldEditor.nameLabel', defaultMessage: 'Name' })}
label={i18n.translate('common.ui.fieldEditor.nameLabel', { defaultMessage: 'Name' })}
helpText={this.isDuplicateName() ? (
<span>
<EuiIcon type="alert" color="warning" size="s" />&nbsp;
@ -255,15 +255,11 @@ export class FieldEditorComponent extends PureComponent {
</span>
) : null}
isInvalid={isInvalid}
error={isInvalid ? intl.formatMessage({
id: 'common.ui.fieldEditor.nameErrorMessage',
defaultMessage: 'Name is required'
}) : null}
error={isInvalid ? i18n.translate('common.ui.fieldEditor.nameErrorMessage', { defaultMessage: 'Name is required' }) : null}
>
<EuiFieldText
value={field.name || ''}
placeholder={intl.formatMessage(
{ id: 'common.ui.fieldEditor.namePlaceholder', defaultMessage: 'New scripted field' })}
placeholder={i18n.translate('common.ui.fieldEditor.namePlaceholder', { defaultMessage: 'New scripted field' })}
data-test-subj="editorFieldName"
onChange={(e) => { this.onFieldChange('name', e.target.value); }}
isInvalid={isInvalid}
@ -274,11 +270,10 @@ export class FieldEditorComponent extends PureComponent {
renderLanguage() {
const { field, scriptingLangs, isDeprecatedLang } = this.state;
const { intl } = this.props;
return field.scripted ? (
<EuiFormRow
label={intl.formatMessage({ id: 'common.ui.fieldEditor.languageLabel', defaultMessage: 'Language' })}
label={i18n.translate('common.ui.fieldEditor.languageLabel', { defaultMessage: 'Language' })}
helpText={isDeprecatedLang ? (
<span>
<EuiIcon type="alert" color="warning" size="s" />&nbsp;
@ -319,11 +314,10 @@ export class FieldEditorComponent extends PureComponent {
renderType() {
const { field, fieldTypes } = this.state;
const { intl } = this.props;
return (
<EuiFormRow
label={intl.formatMessage({ id: 'common.ui.fieldEditor.typeLabel', defaultMessage: 'Type' })}
label={i18n.translate('common.ui.fieldEditor.typeLabel', { defaultMessage: 'Type' })}
>
<EuiSelect
value={field.type}
@ -343,7 +337,6 @@ export class FieldEditorComponent extends PureComponent {
* in case there are indices with different types
*/
renderTypeConflict() {
const { intl } = this.props;
const { field = {} } = this.state;
if (!field.conflictDescriptions || typeof field.conflictDescriptions !== 'object') {
return null;
@ -351,11 +344,11 @@ export class FieldEditorComponent extends PureComponent {
const columns = [{
field: 'type',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.typeLabel', defaultMessage: 'Type' }),
name: i18n.translate('common.ui.fieldEditor.typeLabel', { defaultMessage: 'Type' }),
width: '100px',
}, {
field: 'indices',
name: intl.formatMessage({ id: 'common.ui.fieldEditor.indexNameLabel', defaultMessage: 'Index names' })
name: i18n.translate('common.ui.fieldEditor.indexNameLabel', { defaultMessage: 'Index names' })
}];
const items = Object
@ -443,15 +436,14 @@ export class FieldEditorComponent extends PureComponent {
renderPopularity() {
const { field } = this.state;
const { intl } = this.props;
return (
<EuiFormRow label={
intl.formatMessage({
id: 'common.ui.fieldEditor.popularityLabel',
defaultMessage: 'Popularity',
description: '"Popularity" refers to Kibana\'s measurement how popular a field is (i.e. how commonly it is used).',
})
i18n.translate(
'common.ui.fieldEditor.popularityLabel', {
defaultMessage: 'Popularity',
description: '"Popularity" refers to Kibana\'s measurement how popular a field is (i.e. how commonly it is used).',
})
}
>
<EuiFieldNumber
@ -472,21 +464,22 @@ export class FieldEditorComponent extends PureComponent {
renderScript() {
const { field, hasScriptError } = this.state;
const { intl } = this.props;
const isInvalid = !field.script || !field.script.trim() || hasScriptError;
const errorMsg = hasScriptError
? (
<span data-test-subj="invalidScriptError">
{intl.formatMessage({
id: 'common.ui.fieldEditor.scriptInvalidErrorMessage', defaultMessage: 'Script is invalid. View script preview for details' })}
<FormattedMessage
id="common.ui.fieldEditor.scriptInvalidErrorMessage"
defaultMessage="Script is invalid. View script preview for details"
/>
</span>)
: intl.formatMessage({ id: 'common.ui.fieldEditor.scriptRequiredErrorMessage', defaultMessage: 'Script is required' });
: <FormattedMessage id="common.ui.fieldEditor.scriptRequiredErrorMessage" defaultMessage="Script is required" />;
return field.scripted ? (
<Fragment>
<EuiFormRow
fullWidth
label={intl.formatMessage({ id: 'common.ui.fieldEditor.scriptLabel', defaultMessage: 'Script' })}
label={i18n.translate('common.ui.fieldEditor.scriptLabel', { defaultMessage: 'Script' })}
isInvalid={isInvalid}
error={isInvalid ? errorMsg : null}
>
@ -537,23 +530,23 @@ export class FieldEditorComponent extends PureComponent {
renderDeleteModal = () => {
const { field } = this.state;
const { intl } = this.props;
return this.state.showDeleteModal ? (
<EuiOverlayMask>
<EuiConfirmModal
title={intl.formatMessage(
{ id: 'common.ui.fieldEditor.deleteFieldHeader', defaultMessage: 'Delete field \'{fieldName}\'' },
{ fieldName: field.name })}
title={i18n.translate(
'common.ui.fieldEditor.deleteFieldHeader', {
defaultMessage: 'Delete field \'{fieldName}\'',
values: { fieldName: field.name }
}
)}
onCancel={this.hideDeleteModal}
onConfirm={() => {
this.hideDeleteModal();
this.deleteField();
}}
cancelButtonText={intl.formatMessage(
{ id: 'common.ui.fieldEditor.deleteField.cancelButton', defaultMessage: 'Cancel' })}
confirmButtonText={intl.formatMessage(
{ id: 'common.ui.fieldEditor.deleteField.deleteButton', defaultMessage: 'Delete' })}
cancelButtonText={i18n.translate('common.ui.fieldEditor.deleteField.cancelButton', { defaultMessage: 'Cancel' })}
confirmButtonText={i18n.translate('common.ui.fieldEditor.deleteField.deleteButton', { defaultMessage: 'Delete' })}
buttonColor="danger"
defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
>
@ -671,15 +664,17 @@ export class FieldEditorComponent extends PureComponent {
deleteField = () => {
const { redirectAway } = this.props.helpers;
const { indexPattern, intl } = this.props;
const { indexPattern } = this.props;
const { field } = this.state;
const remove = indexPattern.removeScriptedField(field);
if(remove) {
remove.then(() => {
const message = intl.formatMessage(
{ id: 'common.ui.fieldEditor.deleteField.deletedHeader', defaultMessage: 'Deleted \'{fieldName}\'' },
{ fieldName: field.name });
const message = i18n.translate(
'common.ui.fieldEditor.deleteField.deletedHeader', {
defaultMessage: 'Deleted \'{fieldName}\'',
values: { fieldName: field.name },
});
toastNotifications.addSuccess(message);
redirectAway();
});
@ -690,7 +685,7 @@ export class FieldEditorComponent extends PureComponent {
saveField = async () => {
const field = this.state.field.toActualField();
const { indexPattern, intl } = this.props;
const { indexPattern } = this.props;
const { fieldFormatId } = this.state;
if (field.scripted) {
@ -731,9 +726,11 @@ export class FieldEditorComponent extends PureComponent {
return indexPattern.save()
.then(function () {
const message = intl.formatMessage(
{ id: 'common.ui.fieldEditor.deleteField.savedHeader', defaultMessage: 'Saved \'{fieldName}\'' },
{ fieldName: field.name });
const message = i18n.translate(
'common.ui.fieldEditor.deleteField.savedHeader', {
defaultMessage: 'Saved \'{fieldName}\'',
values: { fieldName: field.name },
});
toastNotifications.addSuccess(message);
redirectAway();
});
@ -793,5 +790,3 @@ export class FieldEditorComponent extends PureComponent {
) : null;
}
}
export const FieldEditor = injectI18n(FieldEditorComponent);

25
src/legacy/ui/public/field_editor/field_editor.test.js
View file

@ -20,11 +20,11 @@
jest.mock('ui/kfetch', () => ({}));
import React from 'react';
import { shallowWithIntl } from 'test_utils/enzyme_helpers';
import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
jest.mock('brace/mode/groovy', () => ({}));
import { FieldEditorComponent } from './field_editor';
import { FieldEditor } from './field_editor';
jest.mock('@elastic/eui', () => ({
EuiBasicTable: 'eui-basic-table',
@ -136,8 +136,8 @@ describe('FieldEditor', () => {
});
it('should render create new scripted field correctly', async () => {
const component = shallowWithIntl(
<FieldEditorComponent
const component = shallowWithI18nProvider(
<FieldEditor
indexPattern={indexPattern}
field={field}
helpers={helpers}
@ -163,8 +163,8 @@ describe('FieldEditor', () => {
return fields[name];
};
const component = shallowWithIntl(
<FieldEditorComponent
const component = shallowWithI18nProvider(
<FieldEditor
indexPattern={indexPattern}
field={testField}
helpers={helpers}
@ -191,8 +191,8 @@ describe('FieldEditor', () => {
return fields[name];
};
const component = shallowWithIntl(
<FieldEditorComponent
const component = shallowWithI18nProvider(
<FieldEditor
indexPattern={indexPattern}
field={testField}
helpers={helpers}
@ -206,8 +206,8 @@ describe('FieldEditor', () => {
it('should show conflict field warning', async () => {
const testField = { ...field };
const component = shallowWithIntl(
<FieldEditorComponent
const component = shallowWithI18nProvider(
<FieldEditor
indexPattern={indexPattern}
field={testField}
helpers={helpers}
@ -229,8 +229,8 @@ describe('FieldEditor', () => {
text: ['index_name_3']
}
};
const component = shallowWithIntl(
<FieldEditorComponent
const component = shallowWithI18nProvider(
<FieldEditor
indexPattern={indexPattern}
field={testField}
helpers={helpers}
@ -242,5 +242,4 @@ describe('FieldEditor', () => {
component.update();
expect(component).toMatchSnapshot();
});
});