From 8fd1a36d7d36cf143b9ee6a4a9066c9323d0c0b1 Mon Sep 17 00:00:00 2001 From: sainthkh Date: Tue, 8 Oct 2019 12:29:35 +0900 Subject: [PATCH] Remove injectI18n in management. (#45876) * Remove injectI18n in management --- .../components/header/__jest__/header.test.js | 20 +- .../components/header/header.js | 61 ++- .../step_index_pattern.test.js.snap | 2 +- .../__jest__/step_index_pattern.test.js | 35 +- .../components/header/__jest__/header.test.js | 12 +- .../components/header/header.js | 34 +- .../step_index_pattern/step_index_pattern.js | 92 ++--- .../__jest__/step_time_field.test.js | 66 ++-- .../__jest__/advanced_options.test.js | 12 +- .../advanced_options/advanced_options.js | 79 ++-- .../time_field/__jest__/time_field.test.js | 20 +- .../components/time_field/time_field.js | 55 ++- .../step_time_field/step_time_field.js | 107 +++--- .../components/table/__jest__/table.test.js | 36 +- .../components/table/table.js | 180 +++++---- .../__jest__/scripted_field_table.test.js | 14 +- .../components/table/__jest__/table.test.js | 29 +- .../components/table/table.js | 171 +++++---- .../source_filters_table.test.js.snap | 14 +- .../add_filter/__jest__/add_filter.test.js | 16 +- .../components/add_filter/add_filter.js | 35 +- .../components/header/header.js | 11 +- .../components/table/__jest__/table.test.js | 82 ++-- .../components/table/table.js | 72 ++-- .../__snapshots__/objects_table.test.js.snap | 6 +- .../__jest__/objects_table.test.js | 144 +++---- .../components/flyout/__jest__/flyout.test.js | 81 ++-- .../objects_table/components/flyout/flyout.js | 358 +++++++++--------- .../__jest__/relationships.test.js | 51 +-- .../components/relationships/relationships.js | 136 ++++--- .../components/table/__jest__/table.test.js | 80 ++-- .../objects_table/components/table/table.js | 149 ++++---- .../components/objects_table/objects_table.js | 161 ++++---- .../advanced_settings.test.js.snap | 6 +- .../settings/components/field/field.js | 217 +++++------ .../settings/components/field/field.test.js | 146 +++---- .../sections/settings/components/form/form.js | 23 +- .../settings/components/form/form.test.js | 30 +- .../page_footer/page_footer.test.js | 4 +- .../page_subtitle/page_subtitle.test.js | 4 +- .../components/page_title/page_title.test.js | 4 +- .../settings/components/search/search.js | 46 +-- .../settings/components/search/search.test.js | 31 +- .../__snapshots__/telemetry_form.test.js.snap | 2 +- 44 files changed, 1382 insertions(+), 1552 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/__jest__/header.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/__jest__/header.test.js index a6766eb865605..c7cb3d4631b94 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/__jest__/header.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/__jest__/header.test.js @@ -19,34 +19,28 @@ import React from 'react'; import { Header } from '../header'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; describe('Header', () => { it('should render normally', () => { - const component = shallowWithIntl( - {}} - /> + const component = shallowWithI18nProvider( +
{}} /> ); expect(component).toMatchSnapshot(); }); it('should render without including system indices', () => { - const component = shallowWithIntl( - {}} - /> + const component = shallowWithI18nProvider( +
{}} /> ); expect(component).toMatchSnapshot(); }); it('should render a different name, prompt, and beta tag if provided', () => { - const component = shallowWithIntl( - {}} prompt={
Test prompt
} diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/header.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/header.js index 40a5fa23a23ad..3352996368669 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/header.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/header/header.js @@ -30,16 +30,16 @@ import { EuiSwitch, } from '@elastic/eui'; -import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; -const HeaderUi = ({ +export const Header = ({ prompt, indexPatternName, showSystemIndices, isIncludingSystemIndices, onChangeIncludingSystemIndices, isBeta, - intl }) => (
@@ -48,20 +48,19 @@ const HeaderUi = ({ id="kbn.management.createIndexPatternHeader" defaultMessage="Create {indexPatternName}" values={{ - indexPatternName + indexPatternName, }} /> - { isBeta ? ( + {isBeta ? ( {' '} - ) : null } + ) : null} @@ -77,32 +76,28 @@ const HeaderUi = ({

- { - showSystemIndices ? ( - - + } - id="checkboxShowSystemIndices" - checked={isIncludingSystemIndices} - onChange={onChangeIncludingSystemIndices} - /> - - ) : null - } + /> + } + id="checkboxShowSystemIndices" + checked={isIncludingSystemIndices} + onChange={onChangeIncludingSystemIndices} + /> + + ) : null} - { - prompt ? ( - - - {prompt} - - ) : null - } - + {prompt ? ( + + + {prompt} + + ) : null} +
); - -export const Header = injectI18n(HeaderUi); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/__snapshots__/step_index_pattern.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/__snapshots__/step_index_pattern.test.js.snap index c83d0939dd231..b68ba4720b935 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/__snapshots__/step_index_pattern.test.js.snap +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/__snapshots__/step_index_pattern.test.js.snap @@ -2,7 +2,7 @@ exports[`StepIndexPattern renders errors when input is invalid 1`] = ` Object { - "component": , |" data-test-subj="createIndexPatternStep1Header" errors={ diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/step_index_pattern.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/step_index_pattern.test.js index 6c7deefcc0a45..1797fc203ccd8 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/step_index_pattern.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/__jest__/step_index_pattern.test.js @@ -18,18 +18,19 @@ */ import React from 'react'; -import { StepIndexPatternComponent } from '../step_index_pattern'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { StepIndexPattern } from '../step_index_pattern'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; import { Header } from '../components/header'; jest.mock('../../../lib/ensure_minimum_time', () => ({ - ensureMinimumTime: async (promises) => Array.isArray(promises) ? await Promise.all(promises) : await promises + ensureMinimumTime: async promises => + Array.isArray(promises) ? await Promise.all(promises) : await promises, })); const mockIndexPatternCreationType = { getIndexPatternType: () => 'default', getIndexPatternName: () => 'name', checkIndicesForErrors: () => false, - getShowSystemIndices: () => false + getShowSystemIndices: () => false, }; // If we don't mock this, Jest fails with the error `TypeError: Cannot redefine property: prototype // at Function.defineProperties`. @@ -41,33 +42,29 @@ jest.mock('ui/chrome', () => ({ getUiSettingsClient: () => ({ get: () => '', }), - addBasePath: () => { }, + addBasePath: () => {}, })); jest.mock('../../../lib/get_indices', () => ({ getIndices: (service, indexPatternCreationType, query) => { if (query.startsWith('e')) { - return [ - { name: 'es' }, - ]; + return [{ name: 'es' }]; } - return [ - { name: 'kibana' }, - ]; + return [{ name: 'kibana' }]; }, })); const allIndices = [{ name: 'kibana' }, { name: 'es' }]; const esService = {}; const savedObjectsClient = { - find: () => ({ savedObjects: [] }) + find: () => ({ savedObjects: [] }), }; -const goToNextStep = () => { }; +const goToNextStep = () => {}; const createComponent = props => { - return shallowWithIntl( - { // Ensure the state changes are reflected await component.update(); - expect(component.find('[data-test-subj="createIndexPatternStep1IndicesList"]')).toMatchSnapshot(); + expect( + component.find('[data-test-subj="createIndexPatternStep1IndicesList"]') + ).toMatchSnapshot(); }); it('renders errors when input is invalid', async () => { @@ -121,7 +120,9 @@ describe('StepIndexPattern', () => { // Ensure the state changes are reflected component.update(); - expect(component.find('[data-test-subj="createIndexPatternStep1IndicesList"]')).toMatchSnapshot(); + expect( + component.find('[data-test-subj="createIndexPatternStep1IndicesList"]') + ).toMatchSnapshot(); }); it('appends a wildcard automatically to queries', async () => { diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/header.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/header.test.js index 975b627c9a7d1..534c46ab73ded 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/header.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/header.test.js @@ -18,13 +18,13 @@ */ import React from 'react'; -import { HeaderComponent } from '../header'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { Header } from '../header'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; describe('Header', () => { it('should render normally', () => { - const component = shallowWithIntl( - { }); it('should mark the input as invalid', () => { - const component = shallowWithIntl( - (
@@ -52,17 +52,17 @@ export const HeaderComponent = ({ /> - + - + } + label={ + + } isInvalid={isInputInvalid} error={errors} helpText={ @@ -86,10 +86,12 @@ export const HeaderComponent = ({ >
); - -export const Header = injectI18n(HeaderComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.js index 60b5cb2dd8dae..617262c13b034 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.js @@ -26,25 +26,22 @@ import { containsIllegalCharacters, getMatchedIndices, canAppendWildcard, - ensureMinimumTime + ensureMinimumTime, } from '../../lib'; import { LoadingIndices } from './components/loading_indices'; import { StatusMessage } from './components/status_message'; import { IndicesList } from './components/indices_list'; import { Header } from './components/header'; -import { - EuiPanel, - EuiSpacer, - EuiCallOut, -} from '@elastic/eui'; +import { EuiPanel, EuiSpacer, EuiCallOut } from '@elastic/eui'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import chrome from 'ui/chrome'; const uiSettings = chrome.getUiSettingsClient(); -export class StepIndexPatternComponent extends Component { +export class StepIndexPattern extends Component { static propTypes = { allIndices: PropTypes.array.isRequired, isIncludingSystemIndices: PropTypes.bool.isRequired, @@ -53,11 +50,11 @@ export class StepIndexPatternComponent extends Component { indexPatternCreationType: PropTypes.object.isRequired, goToNextStep: PropTypes.func.isRequired, initialQuery: PropTypes.string, - } + }; static defaultProps = { initialQuery: uiSettings.get('indexPattern:placeholder'), - } + }; constructor(props) { super(props); @@ -90,13 +87,15 @@ export class StepIndexPatternComponent extends Component { const { savedObjects } = await this.props.savedObjectsClient.find({ type: 'index-pattern', fields: ['title'], - perPage: 10000 + perPage: 10000, }); - const existingIndexPatterns = savedObjects.map(obj => obj && obj.attributes ? obj.attributes.title : ''); + const existingIndexPatterns = savedObjects.map(obj => + obj && obj.attributes ? obj.attributes.title : '' + ); this.setState({ existingIndexPatterns }); - } + }; - fetchIndices = async (query) => { + fetchIndices = async query => { const { esService, indexPatternCreationType } = this.props; const { existingIndexPatterns } = this.state; @@ -108,7 +107,9 @@ export class StepIndexPatternComponent extends Component { this.setState({ isLoadingIndices: true, indexPatternExists: false }); if (query.endsWith('*')) { - const exactMatchedIndices = await ensureMinimumTime(getIndices(esService, indexPatternCreationType, query, MAX_SEARCH_SIZE)); + const exactMatchedIndices = await ensureMinimumTime( + getIndices(esService, indexPatternCreationType, query, MAX_SEARCH_SIZE) + ); // If the search changed, discard this state if (query !== this.lastQuery) { return; @@ -117,10 +118,7 @@ export class StepIndexPatternComponent extends Component { return; } - const [ - partialMatchedIndices, - exactMatchedIndices, - ] = await ensureMinimumTime([ + const [partialMatchedIndices, exactMatchedIndices] = await ensureMinimumTime([ getIndices(esService, indexPatternCreationType, `${query}*`, MAX_SEARCH_SIZE), getIndices(esService, indexPatternCreationType, query, MAX_SEARCH_SIZE), ]); @@ -133,9 +131,9 @@ export class StepIndexPatternComponent extends Component { this.setState({ partialMatchedIndices, exactMatchedIndices, - isLoadingIndices: false + isLoadingIndices: false, }); - } + }; onQueryChanged = e => { const { appendedWildcard } = this.state; @@ -156,7 +154,7 @@ export class StepIndexPatternComponent extends Component { this.lastQuery = query; this.setState({ query, showingIndexPatternQueryErrors: !!query.length }); this.fetchIndices(query); - } + }; renderLoadingState() { const { isLoadingIndices } = this.state; @@ -165,9 +163,7 @@ export class StepIndexPatternComponent extends Component { return null; } - return ( - - ); + return ; } renderStatusMessage(matchedIndices) { @@ -195,9 +191,7 @@ export class StepIndexPatternComponent extends Component { return null; } - const indicesToList = query.length - ? visibleIndices - : allIndices; + const indicesToList = query.length ? visibleIndices : allIndices; return ( } + title={ + + } iconType="help" color="warning" /> @@ -229,24 +225,32 @@ export class StepIndexPatternComponent extends Component { } renderHeader({ exactMatchedIndices: indices }) { - const { goToNextStep, indexPatternCreationType, intl } = this.props; - const { query, showingIndexPatternQueryErrors, indexPatternExists, indexPatternName } = this.state; + const { goToNextStep, indexPatternCreationType } = this.props; + const { + query, + showingIndexPatternQueryErrors, + indexPatternExists, + indexPatternName, + } = this.state; let containsErrors = false; const errors = []; - const characterList = this.ILLEGAL_CHARACTERS.slice(0, this.ILLEGAL_CHARACTERS.length - 1).join(', '); + const characterList = this.ILLEGAL_CHARACTERS.slice(0, this.ILLEGAL_CHARACTERS.length - 1).join( + ', ' + ); const checkIndices = indexPatternCreationType.checkIndicesForErrors(indices); if (!query || !query.length || query === '.' || query === '..') { // This is an error scenario but do not report an error containsErrors = true; } else if (containsIllegalCharacters(query, ILLEGAL_CHARACTERS)) { - const errorMessage = intl.formatMessage( + const errorMessage = i18n.translate( + 'kbn.management.createIndexPattern.step.invalidCharactersErrorMessage', { - id: 'kbn.management.createIndexPattern.step.invalidCharactersErrorMessage', - defaultMessage: 'A {indexPatternName} cannot contain spaces or the characters: {characterList}' - }, - { characterList, indexPatternName } + defaultMessage: + 'A {indexPatternName} cannot contain spaces or the characters: {characterList}', + values: { characterList, indexPatternName }, + } ); errors.push(errorMessage); @@ -288,15 +292,13 @@ export class StepIndexPatternComponent extends Component { return ( {this.renderHeader(matchedIndices)} - + {this.renderLoadingState(matchedIndices)} {this.renderIndexPatternExists()} {this.renderStatusMessage(matchedIndices)} - + {this.renderList(matchedIndices)} ); } } - -export const StepIndexPattern = injectI18n(StepIndexPatternComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/__jest__/step_time_field.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/__jest__/step_time_field.test.js index ab6eef146c1b1..5677d2293a725 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/__jest__/step_time_field.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/__jest__/step_time_field.test.js @@ -18,9 +18,9 @@ */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; -import { StepTimeFieldComponent } from '../step_time_field'; +import { StepTimeField } from '../step_time_field'; jest.mock('../components/header', () => ({ Header: 'Header' })); jest.mock('../components/time_field', () => ({ TimeField: 'TimeField' })); @@ -30,27 +30,27 @@ jest.mock('../../../lib/extract_time_fields', () => ({ extractTimeFields: fields => fields, })); jest.mock('ui/chrome', () => ({ - addBasePath: () => { }, + addBasePath: () => {}, })); const mockIndexPatternCreationType = { getIndexPatternType: () => 'default', getIndexPatternName: () => 'name', - getFetchForWildcardOptions: () => {} + getFetchForWildcardOptions: () => {}, }; const noop = () => {}; const indexPatternsService = { make: async () => ({ fieldsFetcher: { - fetch: noop - } - }) + fetch: noop, + }, + }), }; describe('StepTimeField', () => { it('should render normally', () => { - const component = shallowWithIntl( - { }); it('should render timeFields', () => { - const component = shallowWithIntl( - { timeFields: [ { display: '@timestamp', fieldName: '@timestamp' }, { display: 'name', fieldName: 'name' }, - ] + ], }); expect(component).toMatchSnapshot(); }); it('should render a selected timeField', () => { - const component = shallowWithIntl( - { }); it('should ensure disabled time field options work properly', () => { - const component = shallowWithIntl( - { }); it('should disable the action button if an invalid time field is selected', () => { - const component = shallowWithIntl( - { }); it('should enable the action button if the user decides to not select a time field', () => { - const component = shallowWithIntl( - { }); it('should render advanced options', () => { - const component = shallowWithIntl( - { }); it('should render advanced options with an index pattern id', () => { - const component = shallowWithIntl( - { }); it('should render a loading state when creating the index pattern', () => { - const component = shallowWithIntl( - { }); it('should render any error message', () => { - const component = shallowWithIntl( - { }); it('should render "Custom index pattern ID already exists" when error is "Conflict"', () => { - const component = shallowWithIntl( - { const createIndexPattern = async () => { throw new Error('foobar'); }; - const component = shallowWithIntl( - { component.update(); expect(component.instance().state).toMatchObject({ - error: 'foobar' + error: 'foobar', }); }); }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/__jest__/advanced_options.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/__jest__/advanced_options.test.js index 11c79092f5c25..6dde1a597fc2d 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/__jest__/advanced_options.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/__jest__/advanced_options.test.js @@ -18,13 +18,13 @@ */ import React from 'react'; -import { AdvancedOptionsComponent } from '../advanced_options'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { AdvancedOptions } from '../advanced_options'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; describe('AdvancedOptions', () => { it('should render normally', () => { - const component = shallowWithIntl( - {}} @@ -36,8 +36,8 @@ describe('AdvancedOptions', () => { }); it('should hide if not showing', () => { - const component = shallowWithIntl( - {}} diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/advanced_options.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/advanced_options.js index 3126dcf5430f6..9082df6affa09 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/advanced_options.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/advanced_options/advanced_options.js @@ -19,73 +19,66 @@ import React from 'react'; -import { - EuiForm, - EuiFormRow, - EuiFieldText, - EuiButtonEmpty, - EuiSpacer, -} from '@elastic/eui'; +import { EuiForm, EuiFormRow, EuiFieldText, EuiButtonEmpty, EuiSpacer } from '@elastic/eui'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; -export const AdvancedOptionsComponent = ({ +export const AdvancedOptions = ({ isVisible, indexPatternId, toggleAdvancedOptions, onChangeIndexPatternId, - intl, }) => (
- { isVisible - ? ( - - ) - : ( - - ) - } - + {isVisible ? ( + + ) : ( + + )} - - { isVisible ? + + {isVisible ? ( } - helpText={ + } + helpText={ + } + /> + } > - : null - } + ) : null}
); - -export const AdvancedOptions = injectI18n(AdvancedOptionsComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/time_field.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/time_field.test.js index bda1198b194fd..8994ffd79b6e4 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/time_field.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/time_field.test.js @@ -18,13 +18,13 @@ */ import React from 'react'; -import { TimeFieldComponent } from '../time_field'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { TimeField } from '../time_field'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; describe('TimeField', () => { it('should render normally', () => { - const component = shallowWithIntl( - {}} timeFieldOptions={[{ text: '@timestamp', value: '@timestamp' }]} @@ -38,8 +38,8 @@ describe('TimeField', () => { }); it('should render something if hiding time field', () => { - const component = shallowWithIntl( - {}} timeFieldOptions={[{ text: '@timestamp', value: '@timestamp' }]} @@ -53,8 +53,8 @@ describe('TimeField', () => { }); it('should render a selected time field', () => { - const component = shallowWithIntl( - {}} timeFieldOptions={[{ text: '@timestamp', value: '@timestamp' }]} @@ -68,8 +68,8 @@ describe('TimeField', () => { }); it('should render a loading state', () => { - const component = shallowWithIntl( - {}} timeFieldOptions={[{ text: '@timestamp', value: '@timestamp' }]} diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/time_field.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/time_field.js index 77a541d1ff7af..595552568b461 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/time_field.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/time_field.js @@ -32,19 +32,19 @@ import { EuiLoadingSpinner, } from '@elastic/eui'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; -export const TimeFieldComponent = ({ +export const TimeField = ({ isVisible, fetchTimeFields, timeFieldOptions, isLoading, selectedTimeField, onTimeFieldChanged, - intl, }) => ( - { isVisible ? + {isVisible ? ( @@ -57,21 +57,16 @@ export const TimeFieldComponent = ({ - { isLoading ? ( - - ) - : ( - - - - ) - } + {isLoading ? ( + + ) : ( + + + + )} } @@ -92,18 +87,20 @@ export const TimeFieldComponent = ({ } > - { isLoading ? ( + {isLoading ? ( @@ -119,7 +116,7 @@ export const TimeFieldComponent = ({ /> )} - : + ) : (

- } + )} ); - -export const TimeField = injectI18n(TimeFieldComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/step_time_field.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/step_time_field.js index 37591d484d201..5cb93a36cdd18 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/step_time_field.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/step_time_field.js @@ -36,24 +36,21 @@ import { EuiLoadingSpinner, } from '@elastic/eui'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { FormattedMessage } from '@kbn/i18n/react'; -export class StepTimeFieldComponent extends Component { +export class StepTimeField extends Component { static propTypes = { indexPattern: PropTypes.string.isRequired, indexPatternsService: PropTypes.object.isRequired, goToPreviousStep: PropTypes.func.isRequired, createIndexPattern: PropTypes.func.isRequired, indexPatternCreationType: PropTypes.object.isRequired, - } + }; constructor(props) { super(props); - const { - getIndexPatternType, - getIndexPatternName, - } = props.indexPatternCreationType; + const { getIndexPatternType, getIndexPatternName } = props.indexPatternCreationType; this.state = { error: '', @@ -94,9 +91,9 @@ export class StepTimeFieldComponent extends Component { const timeFields = extractTimeFields(fields); this.setState({ timeFields, isFetchingTimeFields: false }); - } + }; - onTimeFieldChanged = (e) => { + onTimeFieldChanged = e => { const value = e.target.value; // Find the time field based on the selected value @@ -109,17 +106,17 @@ export class StepTimeFieldComponent extends Component { selectedTimeField: timeField ? timeField.fieldName : undefined, timeFieldSet: validSelection, }); - } + }; - onChangeIndexPatternId = (e) => { + onChangeIndexPatternId = e => { this.setState({ indexPatternId: e.target.value }); - } + }; toggleAdvancedOptions = () => { this.setState(state => ({ - isAdvancedOptionsVisible: !state.isAdvancedOptionsVisible + isAdvancedOptionsVisible: !state.isAdvancedOptionsVisible, })); - } + }; createIndexPattern = async () => { const { createIndexPattern } = this.props; @@ -134,18 +131,18 @@ export class StepTimeFieldComponent extends Component { isCreating: false, }); } - } + }; formatErrorMessage(message) { // `createIndexPattern` throws "Conflict" when index pattern ID already exists. - return message === 'Conflict' - ? ( - - ) - : message; + return message === 'Conflict' ? ( + + ) : ( + message + ); } render() { @@ -165,7 +162,7 @@ export class StepTimeFieldComponent extends Component { - + @@ -180,53 +177,43 @@ export class StepTimeFieldComponent extends Component { ); } - const { - indexPattern, - goToPreviousStep, - } = this.props; + const { indexPattern, goToPreviousStep } = this.props; - const timeFieldOptions = timeFields ? - [ + const timeFieldOptions = timeFields + ? [ { text: '', value: '' }, ...timeFields.map(timeField => ({ text: timeField.display, value: timeField.fieldName, disabled: timeFields.isDisabled, - })) + })), ] : []; const showTimeField = !timeFields || timeFields.length > 1; const submittable = !showTimeField || timeFieldSet; - const error = this.state.error - ? ( - <> - - )} - color="danger" - iconType="cross" - > -

- {this.formatErrorMessage(this.state.error)} -

- - - - ) - : null; + const error = this.state.error ? ( + <> + + } + color="danger" + iconType="cross" + > +

{this.formatErrorMessage(this.state.error)}

+ + + + ) : null; return ( -
- +
+ - + - + {error} { it('should render normally', async () => { - const component = shallowWithIntl( - {}} @@ -47,8 +47,8 @@ describe('Table', () => { }); it('should render normal field name', async () => { - const component = shallowWithIntl( - {}} @@ -60,8 +60,8 @@ describe('Table', () => { }); it('should render timestamp field name', async () => { - const component = shallowWithIntl( - {}} @@ -73,8 +73,8 @@ describe('Table', () => { }); it('should render the boolean template (true)', async () => { - const component = shallowWithIntl( - {}} @@ -86,8 +86,8 @@ describe('Table', () => { }); it('should render the boolean template (false)', async () => { - const component = shallowWithIntl( - {}} @@ -99,8 +99,8 @@ describe('Table', () => { }); it('should render normal type', async () => { - const component = shallowWithIntl( - {}} @@ -112,8 +112,8 @@ describe('Table', () => { }); it('should render conflicting type', async () => { - const component = shallowWithIntl( - {}} @@ -127,8 +127,8 @@ describe('Table', () => { it('should allow edits', () => { const editField = jest.fn(); - const component = shallowWithIntl( - : ; + return value ? : ; } renderFieldName(name, field) { const { indexPattern } = this.props; - const { intl } = this.props; - const infoLabel = intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.additionalInfoAriaLabel', - defaultMessage: 'Additional field information' - }); - const timeLabel = intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.primaryTimeAriaLabel', - defaultMessage: 'Primary time field' - }); - const timeContent = intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.primaryTimeTooltip', - defaultMessage: 'This field represents the time that events occurred.' - }); + const infoLabel = i18n.translate( + 'kbn.management.editIndexPattern.fields.table.additionalInfoAriaLabel', + { defaultMessage: 'Additional field information' } + ); + const timeLabel = i18n.translate( + 'kbn.management.editIndexPattern.fields.table.primaryTimeAriaLabel', + { defaultMessage: 'Primary time field' } + ); + const timeContent = i18n.translate( + 'kbn.management.editIndexPattern.fields.table.primaryTimeTooltip', + { defaultMessage: 'This field represents the time that events occurred.' } + ); return ( @@ -66,19 +61,16 @@ export class TableComponent extends PureComponent { type="questionInCircle" color="primary" aria-label={infoLabel} - content={field.info.map((info, i) =>
{info}
)} + content={field.info.map((info, i) => ( +
{info}
+ ))} /> ) : null} {indexPattern.timeFieldName === name ? (   - + ) : null} @@ -86,15 +78,16 @@ export class TableComponent extends PureComponent { } renderFieldType(type, isConflict) { - const { intl } = this.props; - const label = intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.multiTypeAria', - defaultMessage: 'Multiple type field' - }); - const content = intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.multiTypeTooltip', - defaultMessage: 'The type of this field changes across indices. It is unavailable for many analysis functions.' + const label = i18n.translate('kbn.management.editIndexPattern.fields.table.multiTypeAria', { + defaultMessage: 'Multiple type field', }); + const content = i18n.translate( + 'kbn.management.editIndexPattern.fields.table.multiTypeTooltip', + { + defaultMessage: + 'The type of this field changes across indices. It is unavailable for many analysis functions.', + } + ); return ( @@ -102,30 +95,29 @@ export class TableComponent extends PureComponent { {isConflict ? (   - + - ) : ''} + ) : ( + '' + )} ); } render() { - const { items, editField, intl } = this.props; + const { items, editField } = this.props; const pagination = { initialPageSize: 10, - pageSizeOptions: [5, 10, 25, 50] + pageSizeOptions: [5, 10, 25, 50], }; const columns = [ { field: 'displayName', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.fields.table.nameHeader', defaultMessage: 'Name' }), + name: i18n.translate('kbn.management.editIndexPattern.fields.table.nameHeader', { + defaultMessage: 'Name', + }), dataType: 'string', sortable: true, render: (value, field) => { @@ -136,79 +128,103 @@ export class TableComponent extends PureComponent { }, { field: 'type', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.fields.table.typeHeader', defaultMessage: 'Type' }), + name: i18n.translate('kbn.management.editIndexPattern.fields.table.typeHeader', { + defaultMessage: 'Type', + }), dataType: 'string', sortable: true, - render: (value) => { + render: value => { return this.renderFieldType(value, value === 'conflict'); }, 'data-test-subj': 'indexedFieldType', }, { field: 'format', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.fields.table.formatHeader', defaultMessage: 'Format' }), + name: i18n.translate('kbn.management.editIndexPattern.fields.table.formatHeader', { + defaultMessage: 'Format', + }), dataType: 'string', sortable: true, }, { field: 'searchable', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.fields.table.searchableHeader', defaultMessage: 'Searchable' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.searchableDescription', - defaultMessage: 'These fields can be used in the filter bar' }), + name: i18n.translate('kbn.management.editIndexPattern.fields.table.searchableHeader', { + defaultMessage: 'Searchable', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.fields.table.searchableDescription', + { defaultMessage: 'These fields can be used in the filter bar' } + ), dataType: 'boolean', sortable: true, - render: (value) => this.renderBooleanTemplate(value, intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.isSearchableAria', defaultMessage: 'Is searchable' })), + render: value => + this.renderBooleanTemplate( + value, + i18n.translate('kbn.management.editIndexPattern.fields.table.isSearchableAria', { + defaultMessage: 'Is searchable', + }) + ), }, { field: 'aggregatable', - name: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.aggregatableLabel', defaultMessage: 'Aggregatable' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.aggregatableDescription', - defaultMessage: 'These fields can be used in visualization aggregations' }), + name: i18n.translate('kbn.management.editIndexPattern.fields.table.aggregatableLabel', { + defaultMessage: 'Aggregatable', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.fields.table.aggregatableDescription', + { defaultMessage: 'These fields can be used in visualization aggregations' } + ), dataType: 'boolean', sortable: true, - render: (value) => this.renderBooleanTemplate(value, intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.isAggregatableAria', defaultMessage: 'Is aggregatable' })), + render: value => + this.renderBooleanTemplate( + value, + i18n.translate('kbn.management.editIndexPattern.fields.table.isAggregatableAria', { + defaultMessage: 'Is aggregatable', + }) + ), }, { field: 'excluded', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.fields.table.excludedLabel', defaultMessage: 'Excluded' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.excludedDescription', - defaultMessage: 'Fields that are excluded from _source when it is fetched' }), + name: i18n.translate('kbn.management.editIndexPattern.fields.table.excludedLabel', { + defaultMessage: 'Excluded', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.fields.table.excludedDescription', + { defaultMessage: 'Fields that are excluded from _source when it is fetched' } + ), dataType: 'boolean', sortable: true, - render: (value) => this.renderBooleanTemplate(value, intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.isExcludedAria', defaultMessage: 'Is excluded' })), + render: value => + this.renderBooleanTemplate( + value, + i18n.translate('kbn.management.editIndexPattern.fields.table.isExcludedAria', { + defaultMessage: 'Is excluded', + }) + ), }, { name: '', actions: [ { - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.fields.table.editLabel', defaultMessage: 'Edit' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.fields.table.editDescription', defaultMessage: 'Edit' }), + name: i18n.translate('kbn.management.editIndexPattern.fields.table.editLabel', { + defaultMessage: 'Edit', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.fields.table.editDescription', + { defaultMessage: 'Edit' } + ), icon: 'pencil', onClick: editField, type: 'icon', }, ], width: '40px', - } + }, ]; return ( - + ); } } - -export const Table = injectI18n(TableComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js index e0da7e287d082..df9c61b32da94 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/__jest__/scripted_field_table.test.js @@ -18,7 +18,7 @@ */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; import { ScriptedFieldsTable } from '../scripted_fields_table'; @@ -70,7 +70,7 @@ const indexPattern = { describe('ScriptedFieldsTable', () => { it('should render normally', async () => { - const component = shallowWithIntl( + const component = shallowWithI18nProvider( { }); it('should filter based on the query bar', async () => { - const component = shallowWithIntl( + const component = shallowWithI18nProvider( { }); it('should filter based on the lang filter', async () => { - const component = shallowWithIntl( + const component = shallowWithI18nProvider( ([ @@ -130,7 +130,7 @@ describe('ScriptedFieldsTable', () => { }); it('should hide the table if there are no scripted fields', async () => { - const component = shallowWithIntl( + const component = shallowWithI18nProvider( ([]) @@ -148,7 +148,7 @@ describe('ScriptedFieldsTable', () => { }); it('should show a delete modal', async () => { - const component = shallowWithIntl( + const component = shallowWithI18nProvider( { it('should delete a field', async () => { const removeScriptedField = jest.fn(); - const component = shallowWithIntl( + const component = shallowWithI18nProvider( { it('should render normally', async () => { - const component = shallowWithIntl( - {}} @@ -51,8 +51,8 @@ describe('Table', () => { }); it('should render the format', async () => { - const component = shallowWithIntl( - {}} @@ -68,8 +68,8 @@ describe('Table', () => { it('should allow edits', () => { const editField = jest.fn(); - const component = shallowWithIntl( - { it('should allow deletes', () => { const deleteField = jest.fn(); - const component = shallowWithIntl( - {}} @@ -100,5 +100,4 @@ describe('Table', () => { component.prop('columns')[4].actions[1].onClick(); expect(deleteField).toBeCalled(); }); - }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/table/table.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/table/table.js index d786d64a67a5f..5e05dd95827c7 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/table/table.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/table/table.js @@ -20,89 +20,113 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { - EuiInMemoryTable, -} from '@elastic/eui'; +import { EuiInMemoryTable } from '@elastic/eui'; -import { injectI18n } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; -export class TableComponent extends PureComponent { +export class Table extends PureComponent { static propTypes = { indexPattern: PropTypes.object.isRequired, items: PropTypes.array.isRequired, editField: PropTypes.func.isRequired, deleteField: PropTypes.func.isRequired, - } + }; - renderFormatCell = (value) => { + renderFormatCell = value => { const { indexPattern } = this.props; - const title = indexPattern.fieldFormatMap[value] && indexPattern.fieldFormatMap[value].type - ? indexPattern.fieldFormatMap[value].type.title - : ''; + const title = + indexPattern.fieldFormatMap[value] && indexPattern.fieldFormatMap[value].type + ? indexPattern.fieldFormatMap[value].type.title + : ''; - return ( - {title} - ); - } + return {title}; + }; render() { - const { - items, - editField, - deleteField, - intl, - } = this.props; + const { items, editField, deleteField } = this.props; - const columns = [{ - field: 'displayName', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.scripted.table.nameHeader', defaultMessage: 'Name' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.scripted.table.nameDescription', defaultMessage: 'Name of the field' }), - dataType: 'string', - sortable: true, - width: '38%', - }, { - field: 'lang', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.scripted.table.langHeader', defaultMessage: 'Lang' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.scripted.table.langDescription', - defaultMessage: 'Language used for the field' }), - dataType: 'string', - sortable: true, - 'data-test-subj': 'scriptedFieldLang', - }, { - field: 'script', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.scripted.table.scriptHeader', defaultMessage: 'Script' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.scripted.table.scriptDescription', defaultMessage: 'Script for the field' }), - dataType: 'string', - sortable: true, - }, { - field: 'name', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.scripted.table.formatHeader', defaultMessage: 'Format' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.scripted.table.formatDescription', defaultMessage: 'Format used for the field' }), - render: this.renderFormatCell, - sortable: false, - }, { - name: '', - actions: [{ - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.scripted.table.editHeader', defaultMessage: 'Edit' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.scripted.table.editDescription', defaultMessage: 'Edit this field' }), - icon: 'pencil', - onClick: editField, - }, { - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.scripted.table.deleteHeader', defaultMessage: 'Delete' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.scripted.table.deleteDescription', defaultMessage: 'Delete this field' }), - icon: 'trash', - color: 'danger', - onClick: deleteField, - }], - width: '40px', - }]; + const columns = [ + { + field: 'displayName', + name: i18n.translate('kbn.management.editIndexPattern.scripted.table.nameHeader', { + defaultMessage: 'Name', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.scripted.table.nameDescription', + { defaultMessage: 'Name of the field' } + ), + dataType: 'string', + sortable: true, + width: '38%', + }, + { + field: 'lang', + name: i18n.translate('kbn.management.editIndexPattern.scripted.table.langHeader', { + defaultMessage: 'Lang', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.scripted.table.langDescription', + { defaultMessage: 'Language used for the field' } + ), + dataType: 'string', + sortable: true, + 'data-test-subj': 'scriptedFieldLang', + }, + { + field: 'script', + name: i18n.translate('kbn.management.editIndexPattern.scripted.table.scriptHeader', { + defaultMessage: 'Script', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.scripted.table.scriptDescription', + { defaultMessage: 'Script for the field' } + ), + dataType: 'string', + sortable: true, + }, + { + field: 'name', + name: i18n.translate('kbn.management.editIndexPattern.scripted.table.formatHeader', { + defaultMessage: 'Format', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.scripted.table.formatDescription', + { defaultMessage: 'Format used for the field' } + ), + render: this.renderFormatCell, + sortable: false, + }, + { + name: '', + actions: [ + { + name: i18n.translate('kbn.management.editIndexPattern.scripted.table.editHeader', { + defaultMessage: 'Edit', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.scripted.table.editDescription', + { defaultMessage: 'Edit this field' } + ), + icon: 'pencil', + onClick: editField, + }, + { + name: i18n.translate('kbn.management.editIndexPattern.scripted.table.deleteHeader', { + defaultMessage: 'Delete', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.scripted.table.deleteDescription', + { defaultMessage: 'Delete this field' } + ), + icon: 'trash', + color: 'danger', + onClick: deleteField, + }, + ], + width: '40px', + }, + ]; const pagination = { initialPageSize: 10, @@ -110,14 +134,7 @@ export class TableComponent extends PureComponent { }; return ( - + ); } } - -export const Table = injectI18n(TableComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/__jest__/__snapshots__/source_filters_table.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/__jest__/__snapshots__/source_filters_table.test.js.snap index 03fe9f058013f..52fccb8607a83 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/__jest__/__snapshots__/source_filters_table.test.js.snap +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/__jest__/__snapshots__/source_filters_table.test.js.snap @@ -3,7 +3,7 @@ exports[`SourceFiltersTable should add a filter 1`] = `
-
-
-
-
-
-
- { it('should render normally', async () => { - const component = shallowWithIntl( - {}}/> - ); + const component = shallowWithI18nProvider( {}} />); expect(component).toMatchSnapshot(); }); it('should allow adding a filter', async () => { const onAddFilter = jest.fn(); - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Set a value in the input field component.setState({ filter: 'tim*' }); @@ -48,9 +44,7 @@ describe('AddFilter', () => { }); it('should ignore strings with just spaces', async () => { - const component = shallowWithIntl( - {}}/> - ); + const component = shallowWithI18nProvider( {}} />); // Set a value in the input field component.find('EuiFieldText').simulate('keypress', ' '); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/add_filter/add_filter.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/add_filter/add_filter.js index 47084161a484a..473526f9d43ad 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/add_filter/add_filter.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/add_filter/add_filter.js @@ -20,19 +20,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiFieldText, - EuiButton, -} from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButton } from '@elastic/eui'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; -export class AddFilterComponent extends Component { +export class AddFilter extends Component { static propTypes = { onAddFilter: PropTypes.func.isRequired, - } + }; constructor(props) { super(props); @@ -44,14 +40,13 @@ export class AddFilterComponent extends Component { onAddFilter = () => { this.props.onAddFilter(this.state.filter); this.setState({ filter: '' }); - } + }; render() { const { filter } = this.state; - const { intl } = this.props; - const placeholder = intl.formatMessage({ - id: 'kbn.management.editIndexPattern.sourcePlaceholder', - defaultMessage: 'source filter, accepts wildcards (e.g., `user*` to filter fields starting with \'user\')' + const placeholder = i18n.translate('kbn.management.editIndexPattern.sourcePlaceholder', { + defaultMessage: + 'source filter, accepts wildcards (e.g., `user*` to filter fields starting with \'user\')', }); return ( @@ -65,16 +60,14 @@ export class AddFilterComponent extends Component { /> - - + + ); } } - -export const AddFilter = injectI18n(AddFilterComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/header/header.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/header/header.js index d3572416e8d26..8822ca6236250 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/header/header.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/header/header.js @@ -19,11 +19,7 @@ import React from 'react'; -import { - EuiTitle, - EuiText, - EuiSpacer, -} from '@elastic/eui'; +import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -31,7 +27,10 @@ export const Header = () => (

- +

diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/__jest__/table.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/__jest__/table.test.js index 7ce61668751b9..7fba1fcfe4876 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/__jest__/table.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/__jest__/table.test.js @@ -19,9 +19,9 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; -import { TableComponent } from '../table'; +import { Table } from '../table'; import { keyCodes } from '@elastic/eui'; const indexPattern = {}; @@ -29,8 +29,8 @@ const items = [{ value: 'tim*' }]; describe('Table', () => { it('should render normally', async () => { - const component = shallowWithIntl( - {}} @@ -44,8 +44,8 @@ describe('Table', () => { }); it('should render filter matches', async () => { - const component = shallowWithIntl( - [{ name: 'time' }, { name: 'value' }], }} @@ -57,9 +57,7 @@ describe('Table', () => { /> ); - const matchesTableCell = shallow( - component.prop('columns')[1].render('tim', { clientId: 1 }) - ); + const matchesTableCell = shallow(component.prop('columns')[1].render('tim', { clientId: 1 })); expect(matchesTableCell).toMatchSnapshot(); }); @@ -69,8 +67,8 @@ describe('Table', () => { let component; beforeEach(() => { - component = shallowWithIntl( - {}} @@ -85,9 +83,7 @@ describe('Table', () => { // Start the editing process const editingComponent = shallow( // Wrap in a div because: https://github.com/airbnb/enzyme/issues/1213 -
- {component.prop('columns')[2].render({ clientId, value: 'tim*' })} -
+
{component.prop('columns')[2].render({ clientId, value: 'tim*' })}
); editingComponent .find('EuiButtonIcon') @@ -107,9 +103,7 @@ describe('Table', () => { // Start the editing process const editingComponent = shallow( // Fixes: Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {component.prop('columns')[2].render({ clientId, value: 'tim*' })} -
+
{component.prop('columns')[2].render({ clientId, value: 'tim*' })}
); editingComponent .find('EuiButtonIcon') @@ -122,16 +116,14 @@ describe('Table', () => { // Verify save button const saveTableCell = shallow( // Fixes Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {component.prop('columns')[2].render({ clientId, value: 'tim*' })} -
+
{component.prop('columns')[2].render({ clientId, value: 'tim*' })}
); expect(saveTableCell).toMatchSnapshot(); }); it('should update the matches dynamically as input value is changed', () => { - const localComponent = shallowWithIntl( - [{ name: 'time' }, { name: 'value' }], }} @@ -148,11 +140,7 @@ describe('Table', () => { // Start the editing process const editingComponent = shallow( // Fixes: Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {localComponent - .prop('columns')[2] - .render({ clientId, value: 'tim*' })} -
+
{localComponent.prop('columns')[2].render({ clientId, value: 'tim*' })}
); editingComponent .find('EuiButtonIcon') @@ -168,9 +156,7 @@ describe('Table', () => { // Verify updated matches const matchesTableCell = shallow( // Fixes Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {localComponent.prop('columns')[1].render('tim*', { clientId })} -
+
{localComponent.prop('columns')[1].render('tim*', { clientId })}
); expect(matchesTableCell).toMatchSnapshot(); }); @@ -185,9 +171,7 @@ describe('Table', () => { // Click the save button const editingComponent = shallow( // Fixes Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {component.prop('columns')[2].render({ clientId, value: 'tim*' })} -
+
{component.prop('columns')[2].render({ clientId, value: 'tim*' })}
); editingComponent .find('EuiButtonIcon') @@ -208,8 +192,8 @@ describe('Table', () => { it('should allow deletes', () => { const deleteFilter = jest.fn(); - const component = shallowWithIntl( - { // Click the delete button const deleteCellComponent = shallow( // Fixes Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {component.prop('columns')[2].render({ clientId: 1, value: 'tim*' })} -
+
{component.prop('columns')[2].render({ clientId: 1, value: 'tim*' })}
); deleteCellComponent .find('EuiButtonIcon') @@ -237,8 +219,8 @@ describe('Table', () => { const saveFilter = jest.fn(); const clientId = 1; - const component = shallowWithIntl( - {}} @@ -251,9 +233,7 @@ describe('Table', () => { // Start the editing process const editingComponent = shallow( // Fixes Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {component.prop('columns')[2].render({ clientId, value: 'tim*' })} -
+
{component.prop('columns')[2].render({ clientId, value: 'tim*' })}
); editingComponent .find('EuiButtonIcon') @@ -269,9 +249,7 @@ describe('Table', () => { ); // Press the enter key - filterNameTableCell - .find('EuiFieldText') - .simulate('keydown', { keyCode: keyCodes.ENTER }); + filterNameTableCell.find('EuiFieldText').simulate('keydown', { keyCode: keyCodes.ENTER }); expect(saveFilter).toBeCalled(); // It should reset @@ -282,8 +260,8 @@ describe('Table', () => { const saveFilter = jest.fn(); const clientId = 1; - const component = shallowWithIntl( - {}} @@ -296,9 +274,7 @@ describe('Table', () => { // Start the editing process const editingComponent = shallow( // Fixes Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`. -
- {component.prop('columns')[2].render({ clientId, value: 'tim*' })} -
+
{component.prop('columns')[2].render({ clientId, value: 'tim*' })}
); editingComponent .find('EuiButtonIcon') @@ -314,9 +290,7 @@ describe('Table', () => { ); // Press the enter key - filterNameTableCell - .find('EuiFieldText') - .simulate('keydown', { keyCode: keyCodes.ESCAPE }); + filterNameTableCell.find('EuiFieldText').simulate('keydown', { keyCode: keyCodes.ESCAPE }); expect(saveFilter).not.toBeCalled(); // It should reset diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/table.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/table.js index 768e9d330e0ac..f16663e1cd41a 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/table.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/table/table.js @@ -28,9 +28,10 @@ import { RIGHT_ALIGNMENT, } from '@elastic/eui'; -import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; -export class TableComponent extends Component { +export class Table extends Component { static propTypes = { indexPattern: PropTypes.object.isRequired, items: PropTypes.array.isRequired, @@ -51,8 +52,7 @@ export class TableComponent extends Component { startEditingFilter = (id, value) => this.setState({ editingFilterId: id, editingFilterValue: value }); stopEditingFilter = () => this.setState({ editingFilterId: null }); - onEditingFilterChange = e => - this.setState({ editingFilterValue: e.target.value }); + onEditingFilterChange = e => this.setState({ editingFilterValue: e.target.value }); onEditFieldKeyDown = ({ keyCode }) => { if (keyCodes.ENTER === keyCode) { @@ -68,20 +68,18 @@ export class TableComponent extends Component { }; getColumns() { - const { - deleteFilter, - fieldWildcardMatcher, - indexPattern, - saveFilter, - intl, - } = this.props; + const { deleteFilter, fieldWildcardMatcher, indexPattern, saveFilter } = this.props; return [ { field: 'value', - name: intl.formatMessage({ id: 'kbn.management.editIndexPattern.source.table.filterHeader', defaultMessage: 'Filter' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.source.table.filterDescription', defaultMessage: 'Filter name' }), + name: i18n.translate('kbn.management.editIndexPattern.source.table.filterHeader', { + defaultMessage: 'Filter', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.source.table.filterDescription', + { defaultMessage: 'Filter name' } + ), dataType: 'string', sortable: true, render: (value, filter) => { @@ -101,18 +99,18 @@ export class TableComponent extends Component { }, { field: 'value', - name: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.source.table.matchesHeader', defaultMessage: 'Matches' }), - description: intl.formatMessage({ - id: 'kbn.management.editIndexPattern.source.table.matchesDescription', - defaultMessage: 'Language used for the field' }), + name: i18n.translate('kbn.management.editIndexPattern.source.table.matchesHeader', { + defaultMessage: 'Matches', + }), + description: i18n.translate( + 'kbn.management.editIndexPattern.source.table.matchesDescription', + { defaultMessage: 'Language used for the field' } + ), dataType: 'string', sortable: true, render: (value, filter) => { const realtimeValue = - this.state.editingFilterId === filter.clientId - ? this.state.editingFilterValue - : value; + this.state.editingFilterId === filter.clientId ? this.state.editingFilterValue : value; const matcher = fieldWildcardMatcher([realtimeValue]); const matches = indexPattern .getNonScriptedFields() @@ -151,8 +149,10 @@ export class TableComponent extends Component { this.stopEditingFilter(); }} iconType="checkInCircleFilled" - aria-label={intl.formatMessage({ - id: 'kbn.management.editIndexPattern.source.table.saveAria', defaultMessage: 'Save' })} + aria-label={i18n.translate( + 'kbn.management.editIndexPattern.source.table.saveAria', + { defaultMessage: 'Save' } + )} /> ); @@ -174,17 +176,19 @@ export class TableComponent extends Component { color="danger" onClick={() => deleteFilter(filter)} iconType="trash" - aria-label={intl.formatMessage({ - id: 'kbn.management.editIndexPattern.source.table.deleteAria', defaultMessage: 'Delete' })} + aria-label={i18n.translate( + 'kbn.management.editIndexPattern.source.table.deleteAria', + { defaultMessage: 'Delete' } + )} /> - this.startEditingFilter(filter.clientId, filter.value) - } + onClick={() => this.startEditingFilter(filter.clientId, filter.value)} iconType="pencil" - aria-label={intl.formatMessage({ - id: 'kbn.management.editIndexPattern.source.table.editAria', defaultMessage: 'Edit' })} + aria-label={i18n.translate( + 'kbn.management.editIndexPattern.source.table.editAria', + { defaultMessage: 'Edit' } + )} /> ); @@ -212,5 +216,3 @@ export class TableComponent extends Component { ); } } - -export const Table = injectI18n(TableComponent); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap index 4f54203a2c661..fc58ea51688ed 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap +++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap @@ -200,7 +200,7 @@ exports[`ObjectsTable export should allow the user to choose when exporting all `; exports[`ObjectsTable import should show the flyout 1`] = ` - - ({ getSavedObjectCounts: jest.fn().mockImplementation(() => { return { 'index-pattern': 0, - 'visualization': 0, - 'dashboard': 0, - 'search': 0, + visualization: 0, + dashboard: 0, + search: 0, }; - }) + }), })); jest.mock('@elastic/filesaver', () => ({ @@ -75,34 +75,34 @@ const allSavedObjects = [ id: '1', type: 'index-pattern', attributes: { - title: `MyIndexPattern*` - } + title: `MyIndexPattern*`, + }, }, { id: '2', type: 'search', attributes: { - title: `MySearch` - } + title: `MySearch`, + }, }, { id: '3', type: 'dashboard', attributes: { - title: `MyDashboard` - } + title: `MyDashboard`, + }, }, { id: '4', type: 'visualization', attributes: { - title: `MyViz` - } + title: `MyViz`, + }, }, ]; const $http = () => {}; -$http.post = jest.fn().mockImplementation(() => ([])); +$http.post = jest.fn().mockImplementation(() => []); const defaultProps = { goInspectObject: () => {}, confirmModalPromise: jest.fn(), @@ -123,7 +123,7 @@ const defaultProps = { read: true, edit: false, delete: false, - } + }, }, canDelete: true, }; @@ -210,11 +210,8 @@ describe('ObjectsTable', () => { }); it('should render normally', async () => { - const component = shallowWithIntl( - + const component = shallowWithI18nProvider( + ); // Ensure all promises resolve @@ -229,11 +226,8 @@ describe('ObjectsTable', () => { findObjects.mockImplementation(() => { throw new Error('Simulated find error'); }); - const component = shallowWithIntl( - + const component = shallowWithI18nProvider( + ); // Ensure all promises resolve @@ -248,7 +242,7 @@ describe('ObjectsTable', () => { it('should export selected objects', async () => { const mockSelectedSavedObjects = [ { id: '1', type: 'index-pattern' }, - { id: '3', type: 'dashboard' } + { id: '3', type: 'dashboard' }, ]; const mockSavedObjects = mockSelectedSavedObjects.map(obj => ({ @@ -261,16 +255,13 @@ describe('ObjectsTable', () => { ...defaultProps.savedObjectsClient, bulkGet: jest.fn().mockImplementation(() => ({ savedObjects: mockSavedObjects, - })) + })), }; const { fetchExportObjects } = require('../../../lib/fetch_export_objects'); - const component = shallowWithIntl( - + const component = shallowWithI18nProvider( + ); // Ensure all promises resolve @@ -284,15 +275,13 @@ describe('ObjectsTable', () => { await component.instance().onExport(true); expect(fetchExportObjects).toHaveBeenCalledWith(mockSelectedSavedObjects, true); - expect(addSuccessMock).toHaveBeenCalledWith({ title: 'Your file is downloading in the background' }); + expect(addSuccessMock).toHaveBeenCalledWith({ + title: 'Your file is downloading in the background', + }); }); it('should allow the user to choose when exporting all', async () => { - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -308,11 +297,7 @@ describe('ObjectsTable', () => { it('should export all', async () => { const { fetchExportByTypeAndSearch } = require('../../../lib/fetch_export_by_type_and_search'); const { saveAs } = require('@elastic/filesaver'); - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -333,8 +318,8 @@ describe('ObjectsTable', () => { it('should export all, accounting for the current search criteria', async () => { const { fetchExportByTypeAndSearch } = require('../../../lib/fetch_export_by_type_and_search'); const { saveAs } = require('@elastic/filesaver'); - const component = shallowWithIntl( - ); @@ -356,17 +341,15 @@ describe('ObjectsTable', () => { expect(fetchExportByTypeAndSearch).toHaveBeenCalledWith(POSSIBLE_TYPES, 'test*', true); expect(saveAs).toHaveBeenCalledWith(blob, 'export.ndjson'); - expect(addSuccessMock).toHaveBeenCalledWith({ title: 'Your file is downloading in the background' }); + expect(addSuccessMock).toHaveBeenCalledWith({ + title: 'Your file is downloading in the background', + }); }); }); describe('import', () => { it('should show the flyout', async () => { - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -380,11 +363,7 @@ describe('ObjectsTable', () => { }); it('should hide the flyout', async () => { - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -402,11 +381,7 @@ describe('ObjectsTable', () => { it('should fetch relationships', async () => { const { getRelationships } = require('../../../lib/get_relationships'); - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -415,15 +390,17 @@ describe('ObjectsTable', () => { await component.instance().getRelationships('search', '1'); const savedObjectTypes = ['index-pattern', 'visualization', 'dashboard', 'search']; - expect(getRelationships).toHaveBeenCalledWith('search', '1', savedObjectTypes, defaultProps.$http, defaultProps.basePath); + expect(getRelationships).toHaveBeenCalledWith( + 'search', + '1', + savedObjectTypes, + defaultProps.$http, + defaultProps.basePath + ); }); it('should show the flyout', async () => { - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -462,11 +439,7 @@ describe('ObjectsTable', () => { }); it('should hide the flyout', async () => { - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -485,15 +458,11 @@ describe('ObjectsTable', () => { describe('delete', () => { it('should show a confirm modal', async () => { - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); const mockSelectedSavedObjects = [ { id: '1', type: 'index-pattern', title: 'Title 1' }, - { id: '3', type: 'dashboard', title: 'Title 2' } + { id: '3', type: 'dashboard', title: 'Title 2' }, ]; // Ensure all promises resolve @@ -512,7 +481,7 @@ describe('ObjectsTable', () => { it('should delete selected objects', async () => { const mockSelectedSavedObjects = [ { id: '1', type: 'index-pattern' }, - { id: '3', type: 'dashboard' } + { id: '3', type: 'dashboard' }, ]; const mockSavedObjects = mockSelectedSavedObjects.map(obj => ({ @@ -529,11 +498,8 @@ describe('ObjectsTable', () => { delete: jest.fn(), }; - const component = shallowWithIntl( - + const component = shallowWithI18nProvider( + ); // Ensure all promises resolve @@ -548,8 +514,14 @@ describe('ObjectsTable', () => { expect(defaultProps.indexPatterns.clearCache).toHaveBeenCalled(); expect(mockSavedObjectsClient.bulkGet).toHaveBeenCalledWith(mockSelectedSavedObjects); - expect(mockSavedObjectsClient.delete).toHaveBeenCalledWith(mockSavedObjects[0].type, mockSavedObjects[0].id); - expect(mockSavedObjectsClient.delete).toHaveBeenCalledWith(mockSavedObjects[1].type, mockSavedObjects[1].id); + expect(mockSavedObjectsClient.delete).toHaveBeenCalledWith( + mockSavedObjects[0].type, + mockSavedObjects[0].id + ); + expect(mockSavedObjectsClient.delete).toHaveBeenCalledWith( + mockSavedObjects[1].type, + mockSavedObjects[1].id + ); expect(component.state('selectedSavedObjects').length).toBe(0); }); }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/flyout.test.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/flyout.test.js index 2e80dcd753bc2..e465149b301dc 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/flyout.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/flyout.test.js @@ -18,7 +18,7 @@ */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; import { Flyout } from '../flyout'; @@ -73,7 +73,7 @@ const legacyMockFile = { describe('Flyout', () => { it('should render import step', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -84,7 +84,7 @@ describe('Flyout', () => { }); it('should toggle the overwrite all control', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -97,7 +97,7 @@ describe('Flyout', () => { }); it('should allow picking a file', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -110,7 +110,7 @@ describe('Flyout', () => { }); it('should allow removing a file', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await Promise.resolve(); @@ -126,7 +126,7 @@ describe('Flyout', () => { it('should handle invalid files', async () => { const { importLegacyFile } = require('../../../../../lib/import_legacy_file'); - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -171,7 +171,7 @@ describe('Flyout', () => { type: 'index-pattern', }, ], - } + }, }, ], })); @@ -183,7 +183,7 @@ describe('Flyout', () => { }); it('should figure out unmatchedReferences', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -218,7 +218,7 @@ describe('Flyout', () => { }); it('should allow conflict resolution', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -233,9 +233,7 @@ describe('Flyout', () => { expect(component).toMatchSnapshot(); // Ensure we can change the resolution - component - .instance() - .onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); + component.instance().onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); expect(component.state('unmatchedReferences')[0].newIndexPatternId).toBe('2'); // Let's resolve now @@ -248,7 +246,7 @@ describe('Flyout', () => { }); it('should handle errors', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -277,9 +275,7 @@ describe('Flyout', () => { await component.instance().import(); component.update(); // Set a resolution - component - .instance() - .onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); + component.instance().onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); await component .find('EuiButton[data-test-subj="importSavedObjectsConfirmBtn"]') .simulate('click'); @@ -306,7 +302,7 @@ describe('Flyout', () => { const { resolveImportErrors } = require('../../../../../lib/resolve_import_errors'); it('should display unsupported type errors properly', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await Promise.resolve(); @@ -323,7 +319,7 @@ describe('Flyout', () => { title: 'My Title', error: { type: 'unsupported_type', - } + }, }, ], })); @@ -405,12 +401,18 @@ describe('Flyout', () => { }, obj: { searchSource: { - getOwnField: (field) => { - if(field === 'index') { return 'MyIndexPattern*';} - if(field === 'filter') { return [{ meta: { index: 'filterIndex' } }];} + getOwnField: field => { + if (field === 'index') { + return 'MyIndexPattern*'; + } + if (field === 'filter') { + return [{ meta: { index: 'filterIndex' } }]; + } }, }, - _serialize: () => { return { references: [{ id: 'MyIndexPattern*' }, { id: 'filterIndex' }] };}, + _serialize: () => { + return { references: [{ id: 'MyIndexPattern*' }, { id: 'filterIndex' }] }; + }, }, }, ]; @@ -430,7 +432,7 @@ describe('Flyout', () => { }); it('should figure out unmatchedReferences', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -443,11 +445,11 @@ describe('Flyout', () => { expect(importLegacyFile).toHaveBeenCalledWith(legacyMockFile); // Remove the last element from data since it should be filtered out expect(resolveSavedObjects).toHaveBeenCalledWith( - mockData.slice(0, 2).map((doc) => ({ ...doc, _migrationVersion: {} })), + mockData.slice(0, 2).map(doc => ({ ...doc, _migrationVersion: {} })), true, defaultProps.services, defaultProps.indexPatterns, - defaultProps.confirmModalPromise, + defaultProps.confirmModalPromise ); expect(component.state()).toMatchObject({ @@ -468,23 +470,24 @@ describe('Flyout', () => { type: 'index-pattern', }, ], - }, { - 'existingIndexPatternId': 'filterIndex', - 'list': [ + }, + { + existingIndexPatternId: 'filterIndex', + list: [ { - 'id': 'filterIndex', - 'title': 'MyIndexPattern*', - 'type': 'index-pattern', + id: 'filterIndex', + title: 'MyIndexPattern*', + type: 'index-pattern', }, ], - 'newIndexPatternId': undefined, - } + newIndexPatternId: undefined, + }, ], }); }); it('should allow conflict resolution', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -499,9 +502,7 @@ describe('Flyout', () => { expect(component).toMatchSnapshot(); // Ensure we can change the resolution - component - .instance() - .onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); + component.instance().onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); expect(component.state('unmatchedReferences')[0].newIndexPatternId).toBe('2'); // Let's resolve now @@ -528,7 +529,7 @@ describe('Flyout', () => { }); it('should handle errors', async () => { - const component = shallowWithIntl(); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); @@ -545,9 +546,7 @@ describe('Flyout', () => { await component.instance().legacyImport(); component.update(); // Set a resolution - component - .instance() - .onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); + component.instance().onIndexChanged('MyIndexPattern*', { target: { value: '2' } }); await component .find('EuiButton[data-test-subj="importSavedObjectsConfirmBtn"]') .simulate('click'); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/flyout.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/flyout.js index 625a32485de0f..8394c84d2da9c 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/flyout.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/flyout.js @@ -45,6 +45,9 @@ import { EuiOverlayMask, EUI_MODAL_CONFIRM_BUTTON, } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; + import { importFile, importLegacyFile, @@ -60,9 +63,8 @@ import { saveObjects, } from '../../../../lib/resolve_saved_objects'; import { POSSIBLE_TYPES } from '../../objects_table'; -import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -class FlyoutUI extends Component { +export class Flyout extends Component { static propTypes = { close: PropTypes.func.isRequired, done: PropTypes.func.isRequired, @@ -97,10 +99,7 @@ class FlyoutUI extends Component { } fetchIndexPatterns = async () => { - const indexPatterns = await this.props.indexPatterns.getFields([ - 'id', - 'title', - ]); + const indexPatterns = await this.props.indexPatterns.getFields(['id', 'title']); this.setState({ indexPatterns }); }; @@ -127,7 +126,6 @@ class FlyoutUI extends Component { * Does the initial import of a file, resolveImportErrors then handles errors and retries */ import = async () => { - const { intl } = this.props; const { file, isOverwriteAllChecked } = this.state; this.setState({ status: 'loading', error: undefined }); @@ -138,8 +136,7 @@ class FlyoutUI extends Component { } catch (e) { this.setState({ status: 'error', - error: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.importFileErrorMessage', + error: i18n.translate('kbn.management.objects.objectsTable.flyout.importFileErrorMessage', { defaultMessage: 'The file could not be processed.', }), }); @@ -153,7 +150,7 @@ class FlyoutUI extends Component { this.resolveImportErrors(); } }); - } + }; /** * Get Conflict Resolutions @@ -163,10 +160,10 @@ class FlyoutUI extends Component { * @param {array} objects List of objects to request the user if they wish to overwrite it * @return {Promise} An object with the key being "type:id" and value the resolution chosen by the user */ - getConflictResolutions = async (objects) => { + getConflictResolutions = async objects => { const resolutions = {}; for (const { type, id, title } of objects) { - const overwrite = await new Promise((resolve) => { + const overwrite = await new Promise(resolve => { this.setState({ conflictingRecord: { id, @@ -180,7 +177,7 @@ class FlyoutUI extends Component { this.setState({ conflictingRecord: undefined }); } return resolutions; - } + }; /** * Resolve Import Errors @@ -188,8 +185,6 @@ class FlyoutUI extends Component { * Function goes through the failedImports and tries to resolve the issues. */ resolveImportErrors = async () => { - const { intl } = this.props; - this.setState({ error: undefined, status: 'loading', @@ -205,16 +200,16 @@ class FlyoutUI extends Component { } catch (e) { this.setState({ status: 'error', - error: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.resolveImportErrorsFileErrorMessage', - defaultMessage: 'The file could not be processed.', - }), + error: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.resolveImportErrorsFileErrorMessage', + { defaultMessage: 'The file could not be processed.' } + ), }); } - } + }; legacyImport = async () => { - const { services, indexPatterns, intl, confirmModalPromise } = this.props; + const { services, indexPatterns, confirmModalPromise } = this.props; const { file, isOverwriteAllChecked } = this.state; this.setState({ status: 'loading', error: undefined }); @@ -228,10 +223,10 @@ class FlyoutUI extends Component { } catch (e) { this.setState({ status: 'error', - error: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.importLegacyFileErrorMessage', - defaultMessage: 'The file could not be processed.', - }), + error: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.importLegacyFileErrorMessage', + { defaultMessage: 'The file could not be processed.' } + ), }); return; } @@ -239,25 +234,25 @@ class FlyoutUI extends Component { if (!Array.isArray(contents)) { this.setState({ status: 'error', - error: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.invalidFormatOfImportedFileErrorMessage', - defaultMessage: 'Saved objects file format is invalid and cannot be imported.', - }), + error: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.invalidFormatOfImportedFileErrorMessage', + { defaultMessage: 'Saved objects file format is invalid and cannot be imported.' } + ), }); return; } - contents = contents.filter(content => - POSSIBLE_TYPES.includes(content._type) - ).map(doc => ({ - ...doc, - // The server assumes that documents with no migrationVersion are up to date. - // That assumption enables Kibana and other API consumers to not have to build - // up migrationVersion prior to creating new objects. But it means that imports - // need to set migrationVersion to something other than undefined, so that imported - // docs are not seen as automatically up-to-date. - _migrationVersion: doc._migrationVersion || {}, - })); + contents = contents + .filter(content => POSSIBLE_TYPES.includes(content._type)) + .map(doc => ({ + ...doc, + // The server assumes that documents with no migrationVersion are up to date. + // That assumption enables Kibana and other API consumers to not have to build + // up migrationVersion prior to creating new objects. But it means that imports + // need to set migrationVersion to something other than undefined, so that imported + // docs are not seen as automatically up-to-date. + _migrationVersion: doc._migrationVersion || {}, + })); const { conflictedIndexPatterns, @@ -277,7 +272,8 @@ class FlyoutUI extends Component { conflictedIndexPatterns .map(({ doc, obj }) => { return { doc, obj: obj._serialize() }; - }).forEach(({ doc, obj }) => + }) + .forEach(({ doc, obj }) => obj.references.forEach(ref => { byId[ref.id] = byId[ref.id] != null ? byId[ref.id].concat({ doc, obj }) : [{ doc, obj }]; }) @@ -334,10 +330,10 @@ class FlyoutUI extends Component { isOverwriteAllChecked, conflictedSavedObjectsLinkedToSavedSearches, conflictedSearchDocs, - failedImports + failedImports, } = this.state; - const { services, indexPatterns, intl } = this.props; + const { services, indexPatterns } = this.props; this.setState({ error: undefined, @@ -353,10 +349,10 @@ class FlyoutUI extends Component { // Do not Promise.all these calls as the order matters this.setState({ - loadingMessage: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.resolvingConflictsLoadingMessage', - defaultMessage: 'Resolving conflicts…', - }), + loadingMessage: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.resolvingConflictsLoadingMessage', + { defaultMessage: 'Resolving conflicts…' } + ), }); if (resolutions.length) { importCount += await resolveIndexPatternConflicts( @@ -366,20 +362,20 @@ class FlyoutUI extends Component { ); } this.setState({ - loadingMessage: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.savingConflictsLoadingMessage', - defaultMessage: 'Saving conflicts…', - }), + loadingMessage: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.savingConflictsLoadingMessage', + { defaultMessage: 'Saving conflicts…' } + ), }); importCount += await saveObjects( conflictedSavedObjectsLinkedToSavedSearches, isOverwriteAllChecked ); this.setState({ - loadingMessage: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.savedSearchAreLinkedProperlyLoadingMessage', - defaultMessage: 'Ensure saved searches are linked properly…', - }), + loadingMessage: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.savedSearchAreLinkedProperlyLoadingMessage', + { defaultMessage: 'Ensure saved searches are linked properly…' } + ), }); importCount += await resolveSavedSearches( conflictedSearchDocs, @@ -388,10 +384,10 @@ class FlyoutUI extends Component { isOverwriteAllChecked ); this.setState({ - loadingMessage: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.retryingFailedObjectsLoadingMessage', - defaultMessage: 'Retrying failed objects…', - }), + loadingMessage: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.confirmLegacyImport.retryingFailedObjectsLoadingMessage', + { defaultMessage: 'Retrying failed objects…' } + ), }); importCount += await saveObjects( failedImports.map(({ obj }) => obj), @@ -435,7 +431,6 @@ class FlyoutUI extends Component { renderUnmatchedReferences() { const { unmatchedReferences } = this.state; - const { intl } = this.props; if (!unmatchedReferences) { return null; @@ -444,54 +439,56 @@ class FlyoutUI extends Component { const columns = [ { field: 'existingIndexPatternId', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnIdName', - defaultMessage: 'ID', - }), - description: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnIdDescription', - defaultMessage: 'ID of the index pattern', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnIdName', + { defaultMessage: 'ID' } + ), + description: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnIdDescription', + { defaultMessage: 'ID of the index pattern' } + ), sortable: true, }, { field: 'list', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnCountName', - defaultMessage: 'Count', - }), - description: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnCountDescription', - defaultMessage: 'How many affected objects', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnCountName', + { defaultMessage: 'Count' } + ), + description: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnCountDescription', + { defaultMessage: 'How many affected objects' } + ), render: list => { return {list.length}; }, }, { field: 'list', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnSampleOfAffectedObjectsName', - defaultMessage: 'Sample of affected objects', - }), - description: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnSampleOfAffectedObjectsDescription', - defaultMessage: 'Sample of affected objects', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnSampleOfAffectedObjectsName', + { defaultMessage: 'Sample of affected objects' } + ), + description: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnSampleOfAffectedObjectsDescription', + { defaultMessage: 'Sample of affected objects' } + ), render: list => { return (
    - {take(list, 3).map((obj, key) =>
  • {obj.title}
    • )} + {take(list, 3).map((obj, key) => ( +
  • {obj.title}
    • + ))}
); }, }, { field: 'existingIndexPatternId', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnNewIndexPatternName', - defaultMessage: 'New index pattern', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.flyout.renderConflicts.columnNewIndexPatternName', + { defaultMessage: 'New index pattern' } + ), render: id => { const options = this.state.indexPatterns.map(indexPattern => ({ text: indexPattern.title, @@ -520,11 +517,7 @@ class FlyoutUI extends Component { }; return ( - + ); } @@ -538,9 +531,12 @@ class FlyoutUI extends Component { return ( - )} + title={ + + } color="danger" >

{error}

@@ -551,7 +547,6 @@ class FlyoutUI extends Component { } renderBody() { - const { intl } = this.props; const { status, loadingMessage, @@ -576,12 +571,18 @@ class FlyoutUI extends Component { } // Kept backwards compatible logic - if (failedImports.length && (!this.hasUnmatchedReferences || (isLegacyFile === false && status === 'success'))) { + if ( + failedImports.length && + (!this.hasUnmatchedReferences || (isLegacyFile === false && status === 'success')) + ) { return ( - )} + title={ + + } color="warning" iconType="help" > @@ -589,40 +590,45 @@ class FlyoutUI extends Component {

- {failedImports.map(({ error, obj }) => { - if (error.type === 'missing_references') { - return error.references.map((reference) => { - return intl.formatMessage( - { - id: 'kbn.management.objects.objectsTable.flyout.importFailedMissingReference', - defaultMessage: '{type} [id={id}] could not locate {refType} [id={refId}]', - }, + {failedImports + .map(({ error, obj }) => { + if (error.type === 'missing_references') { + return error.references.map(reference => { + return i18n.translate( + 'kbn.management.objects.objectsTable.flyout.importFailedMissingReference', + { + defaultMessage: '{type} [id={id}] could not locate {refType} [id={refId}]', + values: { + id: obj.id, + type: obj.type, + refId: reference.id, + refType: reference.type, + }, + } + ); + }); + } else if (error.type === 'unsupported_type') { + return i18n.translate( + 'kbn.management.objects.objectsTable.flyout.importFailedUnsupportedType', { - id: obj.id, - type: obj.type, - refId: reference.id, - refType: reference.type, + defaultMessage: '{type} [id={id}] unsupported type', + values: { + id: obj.id, + type: obj.type, + }, } ); - }); - } else if (error.type === 'unsupported_type') { - return intl.formatMessage( - { - id: 'kbn.management.objects.objectsTable.flyout.importFailedUnsupportedType', - defaultMessage: '{type} [id={id}] unsupported type', - }, - { - id: obj.id, - type: obj.type, - }, - ); - } - return getField(error, 'body.message', error.message || ''); - }).join(' ')} + } + return getField(error, 'body.message', error.message || ''); + }) + .join(' ')}

); @@ -633,12 +639,12 @@ class FlyoutUI extends Component { return ( - )} + } color="primary" /> ); @@ -647,12 +653,12 @@ class FlyoutUI extends Component { return ( - )} + } color="success" iconType="check" > @@ -674,32 +680,32 @@ class FlyoutUI extends Component { return ( - )} + } > - )} + } onChange={this.setImportFile} /> - )} + } data-test-subj="importSavedObjectsOverwriteToggle" checked={isOverwriteAllChecked} onChange={this.changeOverwriteAll} @@ -717,12 +723,7 @@ class FlyoutUI extends Component { if (status === 'success') { confirmButton = ( - + - )} + } color="warning" iconType="help" > @@ -811,12 +809,12 @@ class FlyoutUI extends Component { if (this.hasUnmatchedReferences) { indexPatternConflictsWarning = ( - )} + } color="warning" iconType="help" > @@ -824,7 +822,7 @@ class FlyoutUI extends Component { - ) + ), }} />

- ); + + ); } if (!legacyFileWarning && !indexPatternConflictsWarning) { @@ -847,18 +846,18 @@ class FlyoutUI extends Component { return ( - {legacyFileWarning && + {legacyFileWarning && ( {legacyFileWarning} - } - {indexPatternConflictsWarning && + )} + {indexPatternConflictsWarning && ( {indexPatternConflictsWarning} - } + )} ); } @@ -872,31 +871,27 @@ class FlyoutUI extends Component { } render() { - const { close, intl } = this.props; + const { close } = this.props; let confirmOverwriteModal; if (this.state.conflictingRecord) { confirmOverwriteModal = (

- ); + + ); } return ( @@ -941,5 +939,3 @@ class FlyoutUI extends Component { ); } } - -export const Flyout = injectI18n(FlyoutUI); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/relationships.test.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/relationships.test.js index 3670028726f10..479726e8785d8 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/relationships.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/relationships.test.js @@ -18,12 +18,12 @@ */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; jest.mock('ui/kfetch', () => ({ kfetch: jest.fn() })); jest.mock('ui/chrome', () => ({ - addBasePath: () => '' + addBasePath: () => '', })); jest.mock('../../../../../lib/fetch_export_by_type_and_search', () => ({ @@ -37,11 +37,10 @@ jest.mock('../../../../../lib/fetch_export_objects', () => ({ import { Relationships } from '../relationships'; describe('Relationships', () => { - it('should render index patterns normally', async () => { const props = { goInspectObject: () => {}, - getRelationships: jest.fn().mockImplementation(() => ([ + getRelationships: jest.fn().mockImplementation(() => [ { type: 'search', id: '1', @@ -70,7 +69,7 @@ describe('Relationships', () => { title: 'My Visualization Title', }, }, - ])), + ]), savedObject: { id: '1', type: 'index-pattern', @@ -87,11 +86,7 @@ describe('Relationships', () => { close: jest.fn(), }; - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Make sure we are showing loading expect(component.find('EuiLoadingKibana').length).toBe(1); @@ -108,7 +103,7 @@ describe('Relationships', () => { it('should render searches normally', async () => { const props = { goInspectObject: () => {}, - getRelationships: jest.fn().mockImplementation(() => ([ + getRelationships: jest.fn().mockImplementation(() => [ { type: 'index-pattern', id: '1', @@ -137,7 +132,7 @@ describe('Relationships', () => { title: 'My Visualization Title', }, }, - ])), + ]), savedObject: { id: '1', type: 'search', @@ -154,11 +149,7 @@ describe('Relationships', () => { close: jest.fn(), }; - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Make sure we are showing loading expect(component.find('EuiLoadingKibana').length).toBe(1); @@ -175,7 +166,7 @@ describe('Relationships', () => { it('should render visualizations normally', async () => { const props = { goInspectObject: () => {}, - getRelationships: jest.fn().mockImplementation(() => ([ + getRelationships: jest.fn().mockImplementation(() => [ { type: 'dashboard', id: '1', @@ -204,7 +195,7 @@ describe('Relationships', () => { title: 'My Dashboard 2', }, }, - ])), + ]), savedObject: { id: '1', type: 'visualization', @@ -221,11 +212,7 @@ describe('Relationships', () => { close: jest.fn(), }; - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Make sure we are showing loading expect(component.find('EuiLoadingKibana').length).toBe(1); @@ -242,7 +229,7 @@ describe('Relationships', () => { it('should render dashboards normally', async () => { const props = { goInspectObject: () => {}, - getRelationships: jest.fn().mockImplementation(() => ([ + getRelationships: jest.fn().mockImplementation(() => [ { type: 'visualization', id: '1', @@ -271,7 +258,7 @@ describe('Relationships', () => { title: 'My Visualization Title 2', }, }, - ])), + ]), savedObject: { id: '1', type: 'dashboard', @@ -288,11 +275,7 @@ describe('Relationships', () => { close: jest.fn(), }; - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Make sure we are showing loading expect(component.find('EuiLoadingKibana').length).toBe(1); @@ -328,11 +311,7 @@ describe('Relationships', () => { close: jest.fn(), }; - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); // Ensure all promises resolve await new Promise(resolve => process.nextTick(resolve)); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js index 3e7afe4a4d690..278f7de38b19d 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js @@ -35,10 +35,11 @@ import { EuiSpacer, } from '@elastic/eui'; import chrome from 'ui/chrome'; -import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import { getDefaultTitle, getSavedObjectLabel } from '../../../../lib'; -class RelationshipsUI extends Component { +export class Relationships extends Component { static propTypes = { getRelationships: PropTypes.func.isRequired, savedObject: PropTypes.object.isRequired, @@ -89,9 +90,12 @@ class RelationshipsUI extends Component { return ( - )} + title={ + + } color="danger" > {error} @@ -100,7 +104,7 @@ class RelationshipsUI extends Component { } renderRelationships() { - const { intl, goInspectObject, savedObject } = this.props; + const { goInspectObject, savedObject } = this.props; const { relationships, isLoading, error } = this.state; if (error) { @@ -114,24 +118,19 @@ class RelationshipsUI extends Component { const columns = [ { field: 'type', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.columnTypeName', + name: i18n.translate('kbn.management.objects.objectsTable.relationships.columnTypeName', { defaultMessage: 'Type', }), width: '50px', align: 'center', - description: - intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.columnTypeDescription', - defaultMessage: 'Type of the saved object', - }), + description: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.columnTypeDescription', + { defaultMessage: 'Type of the saved object' } + ), sortable: false, render: (type, object) => { return ( - + { const { path } = object.meta.inAppUrl || {}; const canGoInApp = this.props.canGoInApp(object); if (!canGoInApp) { - return ( - {title || getDefaultTitle(object)} - ); + return {title || getDefaultTitle(object)}; } return ( {title || getDefaultTitle(object)} @@ -200,21 +195,20 @@ class RelationshipsUI extends Component { }, }, { - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.columnActionsName', - defaultMessage: 'Actions', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.columnActionsName', + { defaultMessage: 'Actions' } + ), actions: [ { - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.columnActions.inspectActionName', - defaultMessage: 'Inspect', - }), - description: - intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.columnActions.inspectActionDescription', - defaultMessage: 'Inspect this saved object', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.columnActions.inspectActionName', + { defaultMessage: 'Inspect' } + ), + description: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.columnActions.inspectActionDescription', + { defaultMessage: 'Inspect this saved object' } + ), type: 'icon', icon: 'inspect', onClick: object => goInspectObject(object), @@ -240,37 +234,37 @@ class RelationshipsUI extends Component { { type: 'field_value_selection', field: 'relationship', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.search.filters.relationship.name', - defaultMessage: 'Direct relationship', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.search.filters.relationship.name', + { defaultMessage: 'Direct relationship' } + ), multiSelect: 'or', options: [ { value: 'parent', name: 'parent', - view: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.search.filters.relationship.parentAsValue.view', - defaultMessage: 'Parent', - }), + view: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.search.filters.relationship.parentAsValue.view', + { defaultMessage: 'Parent' } + ), }, { value: 'child', name: 'child', - view: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.search.filters.relationship.childAsValue.view', - defaultMessage: 'Child', - }), + view: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.search.filters.relationship.childAsValue.view', + { defaultMessage: 'Child' } + ), }, ], }, { type: 'field_value_selection', field: 'type', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.search.filters.type.name', - defaultMessage: 'Type', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.relationships.search.filters.type.name', + { defaultMessage: 'Type' } + ), multiSelect: 'or', options: [...filterTypesMap.values()], }, @@ -281,14 +275,18 @@ class RelationshipsUI extends Component {

- {intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.relationships.relationshipsTitle', - defaultMessage: 'Here are the saved objects related to {title}. ' + - 'Deleting this {type} affects its parent objects, but not its children.', - }, { - type: savedObject.type, - title: savedObject.meta.title || getDefaultTitle(savedObject) - })} + {i18n.translate( + 'kbn.management.objects.objectsTable.relationships.relationshipsTitle', + { + defaultMessage: + 'Here are the saved objects related to {title}. ' + + 'Deleting this {type} affects its parent objects, but not its children.', + values: { + type: savedObject.type, + title: savedObject.meta.title || getDefaultTitle(savedObject), + }, + } + )}

@@ -328,5 +326,3 @@ class RelationshipsUI extends Component { ); } } - -export const Relationships = injectI18n(RelationshipsUI); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/table.test.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/table.test.js index e36c340751dc6..d3f5fb1945254 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/table.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/table.test.js @@ -18,32 +18,34 @@ */ import React from 'react'; -import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers'; import { findTestSubject } from '@elastic/eui/lib/test'; import { keyCodes } from '@elastic/eui/lib/services'; jest.mock('ui/kfetch', () => ({ kfetch: jest.fn() })); jest.mock('ui/chrome', () => ({ - addBasePath: () => '' + addBasePath: () => '', })); import { Table } from '../table'; const defaultProps = { - selectedSavedObjects: [{ - id: '1', - type: 'index-pattern', - meta: { - title: `MyIndexPattern*`, - icon: 'indexPatternApp', - editUrl: '#/management/kibana/index_patterns/1', - inAppUrl: { - path: '/management/kibana/index_patterns/1', - uiCapabilitiesPath: 'management.kibana.index_patterns', + selectedSavedObjects: [ + { + id: '1', + type: 'index-pattern', + meta: { + title: `MyIndexPattern*`, + icon: 'indexPatternApp', + editUrl: '#/management/kibana/index_patterns/1', + inAppUrl: { + path: '/management/kibana/index_patterns/1', + uiCapabilitiesPath: 'management.kibana.index_patterns', + }, }, }, - }], + ], selectionConfig: { onSelectionChange: () => {}, }, @@ -54,35 +56,33 @@ const defaultProps = { canGoInApp: () => {}, pageIndex: 1, pageSize: 2, - items: [{ - id: '1', - type: 'index-pattern', - meta: { - title: `MyIndexPattern*`, - icon: 'indexPatternApp', - editUrl: '#/management/kibana/index_patterns/1', - inAppUrl: { - path: '/management/kibana/index_patterns/1', - uiCapabilitiesPath: 'management.kibana.index_patterns', + items: [ + { + id: '1', + type: 'index-pattern', + meta: { + title: `MyIndexPattern*`, + icon: 'indexPatternApp', + editUrl: '#/management/kibana/index_patterns/1', + inAppUrl: { + path: '/management/kibana/index_patterns/1', + uiCapabilitiesPath: 'management.kibana.index_patterns', + }, }, }, - }], + ], itemId: 'id', totalItemCount: 3, onQueryChange: () => {}, onTableChange: () => {}, isSearching: false, onShowRelationships: () => {}, - canDelete: true + canDelete: true, }; describe('Table', () => { it('should render normally', () => { - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(); expect(component).toMatchSnapshot(); }); @@ -91,14 +91,10 @@ describe('Table', () => { const onQueryChangeMock = jest.fn(); const customizedProps = { ...defaultProps, - onQueryChange: onQueryChangeMock + onQueryChange: onQueryChangeMock, }; - const component = mountWithIntl( - - ); + const component = mountWithI18nProvider(
); const searchBar = findTestSubject(component, 'savedObjectSearchBar'); // Send invalid query @@ -115,13 +111,13 @@ describe('Table', () => { }); it(`prevents saved objects from being deleted`, () => { - const selectedSavedObjects = [{ type: 'visualization' }, { type: 'search' }, { type: 'index-pattern' }]; + const selectedSavedObjects = [ + { type: 'visualization' }, + { type: 'search' }, + { type: 'index-pattern' }, + ]; const customizedProps = { ...defaultProps, selectedSavedObjects, canDelete: false }; - const component = shallowWithIntl( - - ); + const component = shallowWithI18nProvider(
); expect(component).toMatchSnapshot(); }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/table.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/table.js index 672cb23baf5a2..43cf8c2a23286 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/table.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/table.js @@ -34,13 +34,13 @@ import { EuiPopover, EuiSwitch, EuiFormRow, - EuiText + EuiText, } from '@elastic/eui'; import { getDefaultTitle, getSavedObjectLabel } from '../../../../lib'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; +import { FormattedMessage } from '@kbn/i18n/react'; -class TableUI extends PureComponent { +export class Table extends PureComponent { static propTypes = { selectedSavedObjects: PropTypes.array.isRequired, selectionConfig: PropTypes.shape({ @@ -59,7 +59,7 @@ class TableUI extends PureComponent { items: PropTypes.array.isRequired, itemId: PropTypes.oneOfType([ PropTypes.string, // the name of the item id property - PropTypes.func // (item) => string + PropTypes.func, // (item) => string ]), totalItemCount: PropTypes.number.isRequired, onQueryChange: PropTypes.func.isRequired, @@ -75,7 +75,7 @@ class TableUI extends PureComponent { isExportPopoverOpen: false, isIncludeReferencesDeepChecked: true, activeAction: null, - } + }; constructor(props) { super(props); @@ -96,30 +96,30 @@ class TableUI extends PureComponent { parseErrorMessage: null, }); this.props.onQueryChange({ query }); - } + }; closeExportPopover = () => { this.setState({ isExportPopoverOpen: false }); - } + }; toggleExportPopoverVisibility = () => { this.setState(state => ({ - isExportPopoverOpen: !state.isExportPopoverOpen + isExportPopoverOpen: !state.isExportPopoverOpen, })); - } + }; toggleIsIncludeReferencesDeepChecked = () => { this.setState(state => ({ isIncludeReferencesDeepChecked: !state.isIncludeReferencesDeepChecked, })); - } + }; onExportClick = () => { const { onExport } = this.props; const { isIncludeReferencesDeepChecked } = this.state; onExport(isIncludeReferencesDeepChecked); this.setState({ isExportPopoverOpen: false }); - } + }; render() { const { @@ -136,7 +136,6 @@ class TableUI extends PureComponent { onTableChange, goInspectObject, onShowRelationships, - intl, } = this.props; const pagination = { @@ -150,7 +149,9 @@ class TableUI extends PureComponent { { type: 'field_value_selection', field: 'type', - name: intl.formatMessage({ id: 'kbn.management.objects.objectsTable.table.typeFilterName', defaultMessage: 'Type' }), + name: i18n.translate('kbn.management.objects.objectsTable.table.typeFilterName', { + defaultMessage: 'Type', + }), multiSelect: 'or', options: filterOptions, }, @@ -167,20 +168,19 @@ class TableUI extends PureComponent { const columns = [ { field: 'type', - name: intl.formatMessage({ id: 'kbn.management.objects.objectsTable.table.columnTypeName', defaultMessage: 'Type' }), + name: i18n.translate('kbn.management.objects.objectsTable.table.columnTypeName', { + defaultMessage: 'Type', + }), width: '50px', align: 'center', - description: - intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.table.columnTypeDescription', defaultMessage: 'Type of the saved object' - }), + description: i18n.translate( + 'kbn.management.objects.objectsTable.table.columnTypeDescription', + { defaultMessage: 'Type of the saved object' } + ), sortable: false, render: (type, object) => { return ( - + { const { path } = object.meta.inAppUrl || {}; const canGoInApp = this.props.canGoInApp(object); if (!canGoInApp) { - return ( - {title || getDefaultTitle(object)} - ); + return {title || getDefaultTitle(object)}; } return ( {title || getDefaultTitle(object)} @@ -213,34 +213,36 @@ class TableUI extends PureComponent { }, }, { - name: intl.formatMessage({ id: 'kbn.management.objects.objectsTable.table.columnActionsName', defaultMessage: 'Actions' }), + name: i18n.translate('kbn.management.objects.objectsTable.table.columnActionsName', { + defaultMessage: 'Actions', + }), actions: [ { - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.table.columnActions.inspectActionName', - defaultMessage: 'Inspect' - }), - description: - intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.table.columnActions.inspectActionDescription', - defaultMessage: 'Inspect this saved object' - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.table.columnActions.inspectActionName', + { defaultMessage: 'Inspect' } + ), + description: i18n.translate( + 'kbn.management.objects.objectsTable.table.columnActions.inspectActionDescription', + { defaultMessage: 'Inspect this saved object' } + ), type: 'icon', icon: 'inspect', onClick: object => goInspectObject(object), available: object => !!object.meta.editUrl, }, { - name: - intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.table.columnActions.viewRelationshipsActionName', - defaultMessage: 'Relationships' - }), - description: - intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.table.columnActions.viewRelationshipsActionDescription', - defaultMessage: 'View the relationships this saved object has to other saved objects' - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.table.columnActions.viewRelationshipsActionName', + { defaultMessage: 'Relationships' } + ), + description: i18n.translate( + 'kbn.management.objects.objectsTable.table.columnActions.viewRelationshipsActionDescription', + { + defaultMessage: + 'View the relationships this saved object has to other saved objects', + } + ), type: 'icon', icon: 'kqlSelector', onClick: object => onShowRelationships(object), @@ -248,9 +250,9 @@ class TableUI extends PureComponent { ...this.extraActions.map(action => { return { ...action.euiAction, - onClick: (object) => { + onClick: object => { this.setState({ - activeAction: action + activeAction: action, }); action.registerOnFinishCallback(() => { @@ -260,23 +262,21 @@ class TableUI extends PureComponent { }); action.euiAction.onClick(object); - } + }, }; - }) + }), ], }, ]; let queryParseError; if (!this.state.isSearchTextValid) { - const parseErrorMsg = intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.searchBar.unableToParseQueryErrorMessage', - defaultMessage: 'Unable to parse query', - }); + const parseErrorMsg = i18n.translate( + 'kbn.management.objects.objectsTable.searchBar.unableToParseQueryErrorMessage', + { defaultMessage: 'Unable to parse query' } + ); queryParseError = ( - - {`${parseErrorMsg}. ${this.state.parseErrorMessage}`} - + {`${parseErrorMsg}. ${this.state.parseErrorMessage}`} ); } @@ -309,17 +309,13 @@ class TableUI extends PureComponent { iconType="trash" color="danger" onClick={onDelete} - isDisabled={ - selectedSavedObjects.length === 0 || - !this.props.canDelete - } + isDisabled={selectedSavedObjects.length === 0 || !this.props.canDelete} title={ this.props.canDelete ? undefined - : i18n.translate( - 'kbn.management.objects.objectsTable.table.deleteButtonTitle', - { defaultMessage: 'Unable to delete saved objects' } - ) + : i18n.translate('kbn.management.objects.objectsTable.table.deleteButtonTitle', { + defaultMessage: 'Unable to delete saved objects', + }) } data-test-subj="savedObjectsManagementDelete" > @@ -335,32 +331,27 @@ class TableUI extends PureComponent { closePopover={this.closeExportPopover} > - )} + } > - )} + } checked={this.state.isIncludeReferencesDeepChecked} onChange={this.toggleIsIncludeReferencesDeepChecked} /> - + { - this.setState({ - isSearching: true, - }, this.debouncedFetch); - } + this.setState( + { + isSearching: true, + }, + this.debouncedFetch + ); + }; debouncedFetch = debounce(async () => { - const { intl } = this.props; const { activeQuery: query, page, perPage } = this.state; const { queryText, visibleTypes } = parseQuery(query); // "searchFields" is missing from the "findOptions" but gets injected via the API. @@ -181,9 +185,7 @@ class ObjectsTableUI extends Component { perPage, page: page + 1, fields: ['id'], - type: this.savedObjectTypes.filter( - type => !visibleTypes || visibleTypes.includes(type) - ), + type: this.savedObjectTypes.filter(type => !visibleTypes || visibleTypes.includes(type)), }; if (findOptions.type.length > 1) { findOptions.sortField = 'type'; @@ -199,10 +201,10 @@ class ObjectsTableUI extends Component { }); } toastNotifications.addDanger({ - title: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.unableFindSavedObjectsNotificationMessage', - defaultMessage: 'Unable find saved objects' - }), + title: i18n.translate( + 'kbn.management.objects.objectsTable.unableFindSavedObjectsNotificationMessage', + { defaultMessage: 'Unable find saved objects' } + ), text: `${error}`, }); return; @@ -253,14 +255,17 @@ class ObjectsTableUI extends Component { onTableChange = async table => { const { index: page, size: perPage } = table.page || {}; - this.setState({ - page, - perPage, - selectedSavedObjects: [], - }, this.fetchSavedObjects); + this.setState( + { + page, + perPage, + selectedSavedObjects: [], + }, + this.fetchSavedObjects + ); }; - onShowRelationships = (object) => { + onShowRelationships = object => { this.setState({ isShowingRelationships: true, relationshipObject: object, @@ -274,8 +279,7 @@ class ObjectsTableUI extends Component { }); }; - onExport = async (includeReferencesDeep) => { - const { intl } = this.props; + onExport = async includeReferencesDeep => { const { selectedSavedObjects } = this.state; const objectsToExport = selectedSavedObjects.map(obj => ({ id: obj.id, type: obj.type })); @@ -284,8 +288,7 @@ class ObjectsTableUI extends Component { blob = await fetchExportObjects(objectsToExport, includeReferencesDeep); } catch (e) { toastNotifications.addDanger({ - title: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.export.dangerNotification', + title: i18n.translate('kbn.management.objects.objectsTable.export.dangerNotification', { defaultMessage: 'Unable to generate export', }), }); @@ -294,15 +297,13 @@ class ObjectsTableUI extends Component { saveAs(blob, 'export.ndjson'); toastNotifications.addSuccess({ - title: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.export.successNotification', + title: i18n.translate('kbn.management.objects.objectsTable.export.successNotification', { defaultMessage: 'Your file is downloading in the background', }), }); }; onExportAll = async () => { - const { intl } = this.props; const { exportAllSelectedOptions, isIncludeReferencesDeepChecked, activeQuery } = this.state; const { queryText } = parseQuery(activeQuery); const exportTypes = Object.entries(exportAllSelectedOptions).reduce( @@ -320,8 +321,7 @@ class ObjectsTableUI extends Component { blob = await fetchExportByTypeAndSearch(exportTypes, queryText ? `${queryText}*` : undefined, isIncludeReferencesDeepChecked); } catch (e) { toastNotifications.addDanger({ - title: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.exportAll.dangerNotification', + title: i18n.translate('kbn.management.objects.objectsTable.exportAll.dangerNotification', { defaultMessage: 'Unable to generate export', }), }); @@ -330,8 +330,7 @@ class ObjectsTableUI extends Component { saveAs(blob, 'export.ndjson'); toastNotifications.addSuccess({ - title: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.exportAll.successNotification', + title: i18n.translate('kbn.management.objects.objectsTable.exportAll.successNotification', { defaultMessage: 'Your file is downloading in the background', }), }); @@ -366,9 +365,7 @@ class ObjectsTableUI extends Component { this.setState({ isDeleting: true }); - const indexPatterns = selectedSavedObjects.filter( - object => object.type === 'index-pattern' - ); + const indexPatterns = selectedSavedObjects.filter(object => object.type === 'index-pattern'); if (indexPatterns.length) { await this.props.indexPatterns.clearCache(); } @@ -441,12 +438,7 @@ class ObjectsTableUI extends Component { } renderDeleteConfirmModal() { - const { - isShowingDeleteConfirmModal, - isDeleting, - selectedSavedObjects, - } = this.state; - const { intl } = this.props; + const { isShowingDeleteConfirmModal, isDeleting, selectedSavedObjects } = this.state; if (!isShowingDeleteConfirmModal) { return null; @@ -456,9 +448,7 @@ class ObjectsTableUI extends Component { if (isDeleting) { // Block the user from interacting with the table while its contents are being deleted. - modal = ( - - ); + modal = ; } else { const onCancel = () => { this.setState({ isShowingDeleteConfirmModal: false }); @@ -479,22 +469,24 @@ class ObjectsTableUI extends Component { onCancel={onCancel} onConfirm={onConfirm} buttonColor="danger" - cancelButtonText={( + cancelButtonText={ - )} + } confirmButtonText={ - isDeleting - ? () - : ( + ) : ( + ) + /> + ) } defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON} > @@ -509,31 +501,30 @@ class ObjectsTableUI extends Component { columns={[ { field: 'type', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName', defaultMessage: 'Type' - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.deleteSavedObjectsConfirmModal.typeColumnName', + { defaultMessage: 'Type' } + ), width: '50px', render: (type, object) => ( - + ), }, { field: 'id', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.deleteSavedObjectsConfirmModal.idColumnName', defaultMessage: 'Id' - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.deleteSavedObjectsConfirmModal.idColumnName', + { defaultMessage: 'Id' } + ), }, { field: 'meta.title', - name: intl.formatMessage({ - id: 'kbn.management.objects.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName', - defaultMessage: 'Title', - }), + name: i18n.translate( + 'kbn.management.objects.objectsTable.deleteSavedObjectsConfirmModal.titleColumnName', + { defaultMessage: 'Title' } + ), }, ]} pagination={true} @@ -543,22 +534,18 @@ class ObjectsTableUI extends Component { ); } - return ( - - {modal} - - ); + return {modal}; } changeIncludeReferencesDeep = () => { this.setState(state => ({ isIncludeReferencesDeepChecked: !state.isIncludeReferencesDeepChecked, })); - } + }; closeExportAllModal = () => { this.setState({ isShowingExportAllOptionsModal: false }); - } + }; renderExportAllOptionsModal() { const { @@ -575,26 +562,26 @@ class ObjectsTableUI extends Component { return ( - + } + label={ + + } labelType="legend" > - )} + } checked={isIncludeReferencesDeepChecked} onChange={this.changeIncludeReferencesDeep} /> @@ -678,17 +665,13 @@ class ObjectsTableUI extends Component { })); return ( - + {this.renderFlyout()} {this.renderRelationships()} {this.renderDeleteConfirmModal()} {this.renderExportAllOptionsModal()}
- this.setState({ isShowingExportAllOptionsModal: true }) - } + onExportAll={() => this.setState({ isShowingExportAllOptionsModal: true })} onImport={this.showImportFlyout} onRefresh={this.refreshData} filteredCount={filteredItemCount} @@ -717,5 +700,3 @@ class ObjectsTableUI extends Component { ); } } - -export const ObjectsTable = injectI18n(ObjectsTableUI); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap index 8c1db0c33e0b0..10d165d0d69c4 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap @@ -317,7 +317,7 @@ exports[`AdvancedSettings should render normally 1`] = ` } } /> - - - { + onCodeEditorChange = value => { const { type } = this.props.setting; const { isJsonArray } = this.state; @@ -150,7 +149,8 @@ class FieldUI extends PureComponent { ); + /> + ); } break; default: @@ -162,9 +162,9 @@ class FieldUI extends PureComponent { isInvalid, unsavedValue: newUnsavedValue, }); - } + }; - onFieldChange = (e) => { + onFieldChange = e => { const value = e.target.value; const { type, validation } = this.props.setting; const { unsavedValue } = this.state; @@ -197,7 +197,7 @@ class FieldUI extends PureComponent { isInvalid, error }); - } + }; onFieldKeyDown = ({ keyCode }) => { if (keyCode === keyCodes.ENTER) { @@ -206,15 +206,15 @@ class FieldUI extends PureComponent { if (keyCode === keyCodes.ESCAPE) { this.cancelEdit(); } - } + }; onFieldEscape = ({ keyCode }) => { if (keyCode === keyCodes.ESCAPE) { this.cancelEdit(); } - } + }; - onImageChange = async (files) => { + onImageChange = async files => { if (!files.length) { this.clearError(); this.setState({ @@ -231,25 +231,25 @@ class FieldUI extends PureComponent { this.setState({ isInvalid, error: isInvalid - ? this.props.intl.formattedMessage({ - id: 'kbn.management.settings.field.imageTooLargeErrorMessage', - defaultMessage: 'Image is too large, maximum size is {maxSizeDescription}' - }, { - maxSizeDescription: maxSize.description - }) : null, + ? i18n.translate('kbn.management.settings.field.imageTooLargeErrorMessage', { + defaultMessage: 'Image is too large, maximum size is {maxSizeDescription}', + values: { + maxSizeDescription: maxSize.description, + }, + }) + : null, changeImage: true, unsavedValue: base64Image, }); } catch (err) { toastNotifications.addDanger( - this.props.intl.formatMessage({ - id: 'kbn.management.settings.field.imageChangeErrorMessage', - defaultMessage: 'Image could not be saved' + i18n.translate('kbn.management.settings.field.imageChangeErrorMessage', { + defaultMessage: 'Image could not be saved', }) ); this.cancelChangeImage(); } - } + }; getImageAsBase64(file) { if (!file instanceof File) { @@ -263,7 +263,7 @@ class FieldUI extends PureComponent { reader.onload = () => { resolve(reader.result); }; - reader.onerror = (err) => { + reader.onerror = err => { reject(err); }; }); @@ -273,7 +273,7 @@ class FieldUI extends PureComponent { this.setState({ changeImage: true, }); - } + }; cancelChangeImage = () => { const { savedValue } = this.state; @@ -287,7 +287,7 @@ class FieldUI extends PureComponent { changeImage: false, unsavedValue: savedValue, }); - } + }; cancelEdit = () => { const { savedValue } = this.state; @@ -295,26 +295,26 @@ class FieldUI extends PureComponent { this.setState({ unsavedValue: savedValue, }); - } + }; showPageReloadToast = () => { if (this.props.setting.requiresPageReload) { toastNotifications.add({ - title: this.props.intl.formatMessage({ - id: 'kbn.management.settings.field.requiresPageReloadToastDescription', + title: i18n.translate('kbn.management.settings.field.requiresPageReloadToastDescription', { defaultMessage: 'Please reload the page for the "{settingName}" setting to take effect.', - }, { - settingName: this.props.setting.displayName || this.props.setting.name, + values: { + settingName: this.props.setting.displayName || this.props.setting.name, + }, }), text: ( <> window.location.reload()}> - {this.props.intl.formatMessage({ - id: 'kbn.management.settings.field.requiresPageReloadToastButtonLabel', - defaultMessage: 'Reload page' - })} + {i18n.translate( + 'kbn.management.settings.field.requiresPageReloadToastButtonLabel', + { defaultMessage: 'Reload page' } + )} @@ -323,7 +323,7 @@ class FieldUI extends PureComponent { color: 'success', }); } - } + }; saveEdit = async () => { const { name, defVal, type } = this.props.setting; @@ -363,15 +363,14 @@ class FieldUI extends PureComponent { } } catch (e) { toastNotifications.addDanger( - this.props.intl.formatMessage({ - id: 'kbn.management.settings.field.saveFieldErrorMessage', - defaultMessage: 'Unable to save {name}' - }, - { name }) + i18n.translate('kbn.management.settings.field.saveFieldErrorMessage', { + defaultMessage: 'Unable to save {name}', + values: { name }, + }) ); } this.setLoading(false); - } + }; resetField = async () => { const { name } = this.props.setting; @@ -383,15 +382,14 @@ class FieldUI extends PureComponent { this.clearError(); } catch (e) { toastNotifications.addDanger( - this.props.intl.formatMessage({ - id: 'kbn.management.settings.field.resetFieldErrorMessage', - defaultMessage: 'Unable to reset {name}' - }, - { name }) + i18n.translate('kbn.management.settings.field.resetFieldErrorMessage', { + defaultMessage: 'Unable to reset {name}', + values: { name }, + }) ); } this.setLoading(false); - } + }; renderField(setting) { const { enableSaving } = this.props; @@ -402,17 +400,16 @@ class FieldUI extends PureComponent { case 'boolean': return ( - ) : ( - - )} + label={ + !!unsavedValue ? ( + + ) : ( + + ) + } checked={!!unsavedValue} onChange={this.onFieldChange} disabled={loading || isOverridden || !enableSaving} @@ -441,7 +438,7 @@ class FieldUI extends PureComponent { tabSize: 2, }} editorProps={{ - $blockScrolling: Infinity + $blockScrolling: Infinity, }} showGutter={false} /> @@ -449,21 +446,16 @@ class FieldUI extends PureComponent { ); case 'image': if (!isDefaultValue(setting) && !changeImage) { - return ( - - ); + return ; } else { return ( { this.changeImageForm = input; }} + ref={input => { + this.changeImageForm = input; + }} onKeyDown={this.onFieldEscape} data-test-subj={`advancedSetting-editField-${name}`} /> @@ -474,10 +466,10 @@ class FieldUI extends PureComponent { { + options={options.map(option => { return { text: optionLabels.hasOwnProperty(option) ? optionLabels[option] : option, - value: option + value: option, }; })} onChange={this.onFieldChange} @@ -550,20 +542,23 @@ class FieldUI extends PureComponent { return (

{setting.displayName || setting.name} - {setting.isCustom ? + {setting.isCustom ? ( )} + content={ + + } /> - : ''} + ) : ( + '' + )}

); } @@ -616,7 +611,7 @@ class FieldUI extends PureComponent { > {this.getDisplayedDefaultValue(type, defVal)} - ) + ), }} /> @@ -626,7 +621,9 @@ class FieldUI extends PureComponent { id="kbn.management.settings.field.defaultValueText" defaultMessage="Default: {value}" values={{ - value: ({this.getDisplayedDefaultValue(type, defVal, optionLabels)}), + value: ( + {this.getDisplayedDefaultValue(type, defVal, optionLabels)} + ), }} /> @@ -644,12 +641,11 @@ class FieldUI extends PureComponent { return ( changeImage ? this.cancelChangeImage() : this.cancelEdit()} + aria-label={i18n.translate( + 'kbn.management.settings.field.cancelEditingButtonAriaLabel', + { + defaultMessage: 'Cancel editing {ariaName}', + values: { + ariaName, + }, + } + )} + onClick={() => (changeImage ? this.cancelChangeImage() : this.cancelEdit())} disabled={isDisabled} data-test-subj={`advancedSetting-cancelEditField-${name}`} > @@ -774,12 +769,8 @@ class FieldUI extends PureComponent { - - {this.renderActions(setting)} - + {this.renderActions(setting)} ); } } - -export const Field = injectI18n(FieldUI); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js index 0a2886d0d0287..f95332680437b 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.test.js @@ -18,7 +18,9 @@ */ import React from 'react'; -import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers'; +import { I18nProvider } from '@kbn/i18n/react'; +import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers'; +import { mount } from 'enzyme'; import { findTestSubject } from '@elastic/eui/lib/test'; import { Field } from './field'; @@ -183,8 +185,8 @@ describe('Field', () => { describe(`for ${type} setting`, () => { it('should render default value if there is no user value set', async () => { - const component = shallowWithIntl( - { }); it('should render as read only with help text if overridden', async () => { - const component = shallowWithIntl( - { }); it('should render as read only if saving is disabled', async () => { - const component = shallowWithIntl( - { }); it('should render user value if there is user value is set', async () => { - const component = shallowWithIntl( - { }); it('should render custom setting icon if it is custom', async () => { - const component = shallowWithIntl( - { if(type === 'select') { it('should use options for rendering values', () => { - const component = mountWithIntl( - { }); it('should use optionLabels for rendering labels', () => { - const component = mountWithIntl( - { }); } - if(type === 'image') { - describe(`for changing ${type} setting`, () => { - const component = mountWithIntl( - { + const Wrapper = (props) => ( + + - ); + + ); + const wrapper = mount(); + const component = wrapper.find(I18nProvider).find(Field); + + return { + wrapper, + component, + }; + }; + if(type === 'image') { + describe(`for changing ${type} setting`, () => { + const { wrapper, component } = setup(); const userValue = userValues[type]; component.instance().getImageAsBase64 = (file) => Promise.resolve(file); it('should be able to change value from no value and cancel', async () => { await component.instance().onImageChange([userValue]); - component.update(); - findTestSubject(component, `advancedSetting-cancelEditField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-cancelEditField-${setting.name}`).simulate('click'); expect(component.instance().state.unsavedValue === component.instance().state.savedValue).toBe(true); }); it('should be able to change value and save', async () => { await component.instance().onImageChange([userValue]); - component.update(); - findTestSubject(component, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); expect(save).toBeCalled(); component.setState({ savedValue: userValue }); - await component.setProps({ setting: { + await wrapper.setProps({ setting: { ...component.instance().props.setting, value: userValue, } }); await component.instance().cancelChangeImage(); - component.update(); + wrapper.update(); }); it('should be able to change value from existing value and save', async () => { - findTestSubject(component, `advancedSetting-changeImage-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-changeImage-${setting.name}`).simulate('click'); const newUserValue = `${userValue}=`; await component.instance().onImageChange([newUserValue]); - component.update(); - findTestSubject(component, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); + const updated2 = wrapper.update(); + findTestSubject(updated2, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); expect(save).toBeCalled(); component.setState({ savedValue: newUserValue }); - await component.setProps({ setting: { + await wrapper.setProps({ setting: { ...component.instance().props.setting, value: newUserValue, } }); - component.update(); + wrapper.update(); }); it('should be able to reset to default value', async () => { - findTestSubject(component, `advancedSetting-resetField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-resetField-${setting.name}`).simulate('click'); expect(clear).toBeCalled(); }); }); } else if(type === 'markdown' || type === 'json') { describe(`for changing ${type} setting`, () => { - const component = mountWithIntl( - - ); - + const { wrapper, component } = setup(); const userValue = userValues[type]; const fieldUserValue = userValue; it('should be able to change value and cancel', async () => { component.instance().onCodeEditorChange(fieldUserValue); - component.update(); - findTestSubject(component, `advancedSetting-cancelEditField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-cancelEditField-${setting.name}`).simulate('click'); expect(component.instance().state.unsavedValue === component.instance().state.savedValue).toBe(true); }); it('should be able to change value and save', async () => { component.instance().onCodeEditorChange(fieldUserValue); - component.update(); - findTestSubject(component, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); expect(save).toBeCalled(); component.setState({ savedValue: fieldUserValue }); - await component.setProps({ setting: { + await wrapper.setProps({ setting: { ...component.instance().props.setting, value: userValue, } }); - component.update(); + wrapper.update(); }); if(type === 'json') { it('should be able to clear value and have empty object populate', async () => { component.instance().onCodeEditorChange(''); - component.update(); + wrapper.update(); expect(component.instance().state.unsavedValue).toEqual('{}'); }); } it('should be able to reset to default value', async () => { - findTestSubject(component, `advancedSetting-resetField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-resetField-${setting.name}`).simulate('click'); expect(clear).toBeCalled(); }); }); } else { describe(`for changing ${type} setting`, () => { - const component = mountWithIntl( - - ); - + const { wrapper, component } = setup(); const userValue = userValues[type]; const fieldUserValue = type === 'array' ? userValue.join(', ') : userValue; @@ -416,34 +418,35 @@ describe('Field', () => { const invalidUserValue = invalidUserValues[type]; it('should display an error when validation fails', async () => { component.instance().onFieldChange({ target: { value: invalidUserValue } }); - component.update(); - const errorMessage = component.find('.euiFormErrorText').text(); + const updated = wrapper.update(); + const errorMessage = updated.find('.euiFormErrorText').text(); expect(errorMessage).toEqual(setting.validation.message); }); } it('should be able to change value and cancel', async () => { component.instance().onFieldChange({ target: { value: fieldUserValue } }); - component.update(); - findTestSubject(component, `advancedSetting-cancelEditField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-cancelEditField-${setting.name}`).simulate('click'); expect(component.instance().state.unsavedValue === component.instance().state.savedValue).toBe(true); }); it('should be able to change value and save', async () => { component.instance().onFieldChange({ target: { value: fieldUserValue } }); - component.update(); - findTestSubject(component, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); expect(save).toBeCalled(); component.setState({ savedValue: fieldUserValue }); - await component.setProps({ setting: { + await wrapper.setProps({ setting: { ...component.instance().props.setting, value: userValue, } }); - component.update(); + wrapper.update(); }); it('should be able to reset to default value', async () => { - findTestSubject(component, `advancedSetting-resetField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-resetField-${setting.name}`).simulate('click'); expect(clear).toBeCalled(); }); }); @@ -455,16 +458,17 @@ describe('Field', () => { ...settings.string, requiresPageReload: true, }; - const wrapper = mountWithIntl( - ); wrapper.instance().onFieldChange({ target: { value: 'a new value' } }); - wrapper.update(); - findTestSubject(wrapper, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); + const updated = wrapper.update(); + findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate('click'); expect(save).toHaveBeenCalled(); await save(); expect(toastNotifications.add).toHaveBeenCalledWith( diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.js index 21818a7932b0e..4e606c02da020 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.js @@ -29,13 +29,12 @@ import { EuiSpacer, EuiText, } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import { getCategoryName } from '../../lib'; import { Field } from '../field'; -import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; - -class FormUI extends PureComponent { +export class Form extends PureComponent { static propTypes = { settings: PropTypes.object.isRequired, categories: PropTypes.array.isRequired, @@ -45,7 +44,7 @@ class FormUI extends PureComponent { clear: PropTypes.func.isRequired, showNoResultsMessage: PropTypes.bool.isRequired, enableSaving: PropTypes.bool.isRequired, - } + }; renderClearQueryLink(totalSettings, currentSettings) { const { clearQuery } = this.props; @@ -58,7 +57,7 @@ class FormUI extends PureComponent { id="kbn.management.settings.form.searchResultText" defaultMessage="Search terms are hiding {settingsCount} settings {clearSearch}" values={{ - settingsCount: (totalSettings - currentSettings), + settingsCount: totalSettings - currentSettings, clearSearch: ( @@ -147,16 +146,12 @@ class FormUI extends PureComponent { return ( - { - currentCategories.length ? currentCategories.map((category) => { - return ( - this.renderCategory(category, settings[category], categoryCounts[category]) // fix this - ); - }) : this.maybeRenderNoSettings(clearQuery) - } + {currentCategories.length + ? currentCategories.map(category => { + return this.renderCategory(category, settings[category], categoryCounts[category]); // fix this + }) + : this.maybeRenderNoSettings(clearQuery)} ); } } - -export const Form = injectI18n(FormUI); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.test.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.test.js index 6a5a9ea54bf07..7befed814e5d0 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.test.js @@ -18,18 +18,18 @@ */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; import { Form } from './form'; jest.mock('../field', () => ({ Field: () => { return 'field'; - } + }, })); const settings = { - 'dashboard': [ + dashboard: [ { name: 'dashboard:test:setting', ariaName: 'dashboard test setting', @@ -37,7 +37,7 @@ const settings = { category: ['dashboard'], }, ], - 'general': [ + general: [ { name: 'general:test:date', ariaName: 'general test date', @@ -69,14 +69,14 @@ const categoryCounts = { dashboard: 1, 'x-pack': 10, }; -const save = () => { }; -const clear = () => { }; -const clearQuery = () => { }; +const save = () => {}; +const clear = () => {}; +const clearQuery = () => {}; describe('Form', () => { it('should render normally', async () => { - const component = shallowWithIntl( - { }); it('should render read-only when saving is disabled', async () => { - const component = shallowWithIntl( - { }); it('should render no settings message when there are no settings', async () => { - const component = shallowWithIntl( - { }); it('should not render no settings message when instructed not to', async () => { - const component = shallowWithIntl( - { it('should render normally', () => { - expect(shallowWithIntl()).toMatchSnapshot(); + expect(shallowWithI18nProvider()).toMatchSnapshot(); }); }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/page_subtitle.test.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/page_subtitle.test.js index 999d6a2143f4c..0703706a50101 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/page_subtitle.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_subtitle/page_subtitle.test.js @@ -17,12 +17,12 @@ * under the License. */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; import { PageSubtitle } from './page_subtitle'; describe('PageSubtitle', () => { it('should render normally', () => { - expect(shallowWithIntl()).toMatchSnapshot(); + expect(shallowWithI18nProvider()).toMatchSnapshot(); }); }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_title/page_title.test.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_title/page_title.test.js index 261f892c22f45..54244909a668a 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_title/page_title.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/page_title/page_title.test.js @@ -17,12 +17,12 @@ * under the License. */ import React from 'react'; -import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers'; import { PageTitle } from './page_title'; describe('PageTitle', () => { it('should render normally', () => { - expect(shallowWithIntl()).toMatchSnapshot(); + expect(shallowWithI18nProvider()).toMatchSnapshot(); }); }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.js index 2006839877d5b..02315e73cc11b 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.js @@ -19,17 +19,13 @@ import React, { Fragment, PureComponent } from 'react'; import PropTypes from 'prop-types'; -import { injectI18n } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; -import { - EuiSearchBar, - EuiFormErrorText, -} from '@elastic/eui'; +import { EuiSearchBar, EuiFormErrorText } from '@elastic/eui'; import { getCategoryName } from '../../lib'; -class SearchUI extends PureComponent { - +export class Search extends PureComponent { static propTypes = { categories: PropTypes.array.isRequired, query: PropTypes.object.isRequired, @@ -50,7 +46,7 @@ class SearchUI extends PureComponent { state = { isSearchTextValid: true, parseErrorMessage: null, - } + }; onChange = ({ query, error }) => { if (error) { @@ -66,59 +62,47 @@ class SearchUI extends PureComponent { parseErrorMessage: null, }); this.props.onQueryChange({ query }); - } + }; render() { - const { query, intl } = this.props; + const { query } = this.props; const box = { incremental: true, 'data-test-subj': 'settingsSearchBar', - 'aria-label': intl.formatMessage({ - id: 'kbn.management.settings.searchBarAriaLabel', + 'aria-label': i18n.translate('kbn.management.settings.searchBarAriaLabel', { defaultMessage: 'Search advanced settings', }), // hack until EuiSearchBar is fixed - }; const filters = [ { type: 'field_value_selection', field: 'category', - name: intl.formatMessage({ - id: 'kbn.management.settings.categorySearchLabel', + name: i18n.translate('kbn.management.settings.categorySearchLabel', { defaultMessage: 'Category', }), multiSelect: 'or', options: this.categories, - } + }, ]; let queryParseError; if (!this.state.isSearchTextValid) { - const parseErrorMsg = intl.formatMessage({ - id: 'kbn.management.settings.searchBar.unableToParseQueryErrorMessage', - defaultMessage: 'Unable to parse query', - }); + const parseErrorMsg = i18n.translate( + 'kbn.management.settings.searchBar.unableToParseQueryErrorMessage', + { defaultMessage: 'Unable to parse query' } + ); queryParseError = ( - - {`${parseErrorMsg}. ${this.state.parseErrorMessage}`} - + {`${parseErrorMsg}. ${this.state.parseErrorMessage}`} ); } return ( - + {queryParseError} ); } } - -export const Search = injectI18n(SearchUI); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.test.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.test.js index 40532605d807a..3cd2de6ddccaa 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/search/search.test.js @@ -18,10 +18,9 @@ */ import React from 'react'; -import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers'; +import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers'; import { findTestSubject } from '@elastic/eui/lib/test'; - import { Query } from '@elastic/eui'; import { Search } from './search'; @@ -31,12 +30,8 @@ const categories = ['general', 'dashboard', 'hiddenCategory', 'x-pack']; describe('Search', () => { it('should render normally', async () => { const onQueryChange = () => {}; - const component = shallowWithIntl( - + const component = shallowWithI18nProvider( + ); expect(component).toMatchSnapshot(); @@ -46,25 +41,19 @@ describe('Search', () => { //This test is brittle as it knows about implementation details // (EuiFieldSearch uses onKeyup instead of onChange to handle input) const onQueryChange = jest.fn(); - const component = mountWithIntl( - + const component = mountWithI18nProvider( + ); - findTestSubject(component, 'settingsSearchBar').simulate('keyup', { target: { value: 'new filter' } }); + findTestSubject(component, 'settingsSearchBar').simulate('keyup', { + target: { value: 'new filter' }, + }); expect(onQueryChange).toHaveBeenCalledTimes(1); }); it('should handle query parse error', async () => { const onQueryChangeMock = jest.fn(); - const component = mountWithIntl( - + const component = mountWithI18nProvider( + ); const searchBar = findTestSubject(component, 'settingsSearchBar'); diff --git a/x-pack/legacy/plugins/telemetry/public/components/__snapshots__/telemetry_form.test.js.snap b/x-pack/legacy/plugins/telemetry/public/components/__snapshots__/telemetry_form.test.js.snap index 06becfdda57d0..5bc88f425118b 100644 --- a/x-pack/legacy/plugins/telemetry/public/components/__snapshots__/telemetry_form.test.js.snap +++ b/x-pack/legacy/plugins/telemetry/public/components/__snapshots__/telemetry_form.test.js.snap @@ -26,7 +26,7 @@ exports[`TelemetryForm renders as expected 1`] = ` -