diff --git a/x-pack/legacy/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx b/x-pack/legacy/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx index bbc3cde41794c..53d426eba0449 100644 --- a/x-pack/legacy/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx +++ b/x-pack/legacy/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx @@ -19,7 +19,8 @@ import { EuiDroppable, EuiIcon, } from '@elastic/eui'; -import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import React, { useCallback } from 'react'; import { DragHandleProps, DropResult } from '../../../../../common/eui_draggable'; @@ -167,29 +168,35 @@ const FieldLogColumnConfigurationPanel: React.FunctionComponent<{ remove, }, dragHandleProps, -}) => ( - - - -
- -
-
- - - - - {field} - - - - -
-
-); +}) => { + const fieldLogColumnTitle = i18n.translate( + 'xpack.infra.sourceConfiguration.fieldLogColumnTitle', + { + defaultMessage: 'Field', + } + ); + return ( + + + +
+ +
+
+ {fieldLogColumnTitle} + + {field} + + + + +
+
+ ); +}; const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{ fieldName: React.ReactNode; @@ -213,23 +220,26 @@ const ExplainedLogColumnConfigurationPanel: React.FunctionComponent<{ - + ); -const RemoveLogColumnButton = injectI18n<{ +const RemoveLogColumnButton: React.FunctionComponent<{ onClick?: () => void; -}>(({ intl, onClick }) => { - const removeColumnLabel = intl.formatMessage({ - id: 'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel', - defaultMessage: 'Remove this column', - }); + columnDescription: string; +}> = ({ onClick, columnDescription }) => { + const removeColumnLabel = i18n.translate( + 'xpack.infra.sourceConfiguration.removeLogColumnButtonLabel', + { + defaultMessage: 'Remove {columnDescription} column', + values: { columnDescription }, + } + ); return ( ); -}); +}; const LogColumnConfigurationEmptyPrompt: React.FunctionComponent = () => (