From 7b8f6ba837ae76735c5eecd817f9e61afaea4391 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 12 Jun 2019 05:41:30 -0700
Subject: [PATCH] Convert ILM from using intl.formatMessage to i18n.translate.
 (#38747)

---
 .../sections/components/learn_more_link.js    |  8 +--
 .../components/cold_phase/cold_phase.js       | 20 +++---
 .../components/hot_phase/hot_phase.js         | 45 +++++-------
 .../edit_policy/components/min_age_input.js   | 69 ++++++++-----------
 .../node_allocation/node_allocation.js        | 19 ++---
 .../node_attrs_details/node_attrs_details.js  | 25 +++----
 .../components/policy_json_flyout.js          | 19 +++--
 .../components/warm_phase/warm_phase.js       | 37 +++++-----
 .../sections/edit_policy/edit_policy.js       | 34 ++++-----
 .../add_policy_to_template_confirm_modal.js   | 66 +++++++++++-------
 .../components/policy_table/confirm_delete.js | 29 ++++----
 .../components/policy_table/policy_table.js   | 64 ++++++++---------
 12 files changed, 204 insertions(+), 231 deletions(-)

diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/components/learn_more_link.js b/x-pack/plugins/index_lifecycle_management/public/sections/components/learn_more_link.js
index 420ca972c222..c7ca71a78d5d 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/components/learn_more_link.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/components/learn_more_link.js
@@ -7,11 +7,11 @@
 import React from 'react';
 import { EuiLink } from '@elastic/eui';
 import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
+
 const esBase = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/`;
 
-
-export class LearnMoreLinkUi extends React.PureComponent {
+export class LearnMoreLink extends React.PureComponent {
   render() {
     const { href, docPath, text } = this.props;
     let url;
@@ -31,7 +31,5 @@ export class LearnMoreLinkUi extends React.PureComponent {
         {content}
       </EuiLink>
     );
-
   }
 }
-export const LearnMoreLink = injectI18n(LearnMoreLinkUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
index c95ef1ee75d4..493da3e19b9f 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
@@ -6,7 +6,8 @@
 
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiFlexGroup,
@@ -17,19 +18,20 @@ import {
   EuiSwitch,
   EuiTextColor,
 } from '@elastic/eui';
+
 import {
   PHASE_COLD,
   PHASE_ENABLED,
   PHASE_REPLICA_COUNT,
   PHASE_FREEZE_ENABLED
 } from '../../../../constants';
+import { LearnMoreLink, ActiveBadge, PhaseErrorMessage, OptionalLabel } from '../../../components';
 import { ErrableFormRow } from '../../form_errors';
 import { MinAgeInput } from '../min_age_input';
-import { LearnMoreLink, ActiveBadge, PhaseErrorMessage, OptionalLabel } from '../../../components';
 import { NodeAllocation } from '../node_allocation';
 import { SetPriorityInput } from '../set_priority_input';
 
-class ColdPhaseUi extends PureComponent {
+export class ColdPhase extends PureComponent {
   static propTypes = {
     setPhaseData: PropTypes.func.isRequired,
     showNodeDetailsFlyout: PropTypes.func.isRequired,
@@ -44,13 +46,13 @@ class ColdPhaseUi extends PureComponent {
       phaseData,
       errors,
       isShowingErrors,
-      intl,
       hotPhaseRolloverEnabled
     } = this.props;
-    const freezeLabel = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.coldPhase.freezeIndexLabel',
-      defaultMessage: 'Freeze index',
+
+    const freezeLabel = i18n.translate('xpack.indexLifecycleMgmt.coldPhase.freezeIndexLabel', {
+      defaultMessage: 'Freeze index'
     });
+
     return (
       <div id="coldPhaseContent" aria-live="polite" role="region">
         <EuiDescribedFormGroup
@@ -135,8 +137,7 @@ class ColdPhaseUi extends PureComponent {
                       isShowingErrors={isShowingErrors}
                       errors={errors}
                       helpText={
-                        intl.formatMessage({
-                          id: 'xpack.indexLifecycleMgmt.coldPhase.replicaCountHelpText',
+                        i18n.translate('xpack.indexLifecycleMgmt.coldPhase.replicaCountHelpText', {
                           defaultMessage: 'By default, the number of replicas remains the same.'
                         })
                       }
@@ -204,4 +205,3 @@ class ColdPhaseUi extends PureComponent {
     );
   }
 }
-export const ColdPhase = injectI18n(ColdPhaseUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
index be1023e9042a..69370ab2d0a3 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
@@ -5,8 +5,9 @@
  */
 
 import React, { Fragment, PureComponent } from 'react';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiFlexGroup,
@@ -18,7 +19,7 @@ import {
   EuiFormRow,
   EuiDescribedFormGroup,
 } from '@elastic/eui';
-import { LearnMoreLink, ActiveBadge, PhaseErrorMessage } from '../../../components';
+
 import {
   PHASE_HOT,
   PHASE_ROLLOVER_MAX_AGE,
@@ -28,14 +29,13 @@ import {
   PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS,
   PHASE_ROLLOVER_ENABLED,
 } from '../../../../constants';
+import { LearnMoreLink, ActiveBadge, PhaseErrorMessage } from '../../../components';
+import { ErrableFormRow } from '../../form_errors';
 import { SetPriorityInput } from '../set_priority_input';
 
-import { ErrableFormRow } from '../../form_errors';
-
-class HotPhaseUi extends PureComponent {
+export class HotPhase extends PureComponent {
   static propTypes = {
     setPhaseData: PropTypes.func.isRequired,
-
     isShowingErrors: PropTypes.bool.isRequired,
     errors: PropTypes.object.isRequired,
   };
@@ -46,9 +46,9 @@ class HotPhaseUi extends PureComponent {
       phaseData,
       isShowingErrors,
       errors,
-      intl,
       setWarmPhaseOnRollover
     } = this.props;
+
     return (
       <Fragment>
         <EuiDescribedFormGroup
@@ -111,8 +111,7 @@ class HotPhaseUi extends PureComponent {
                 setPhaseData(PHASE_ROLLOVER_ENABLED, checked);
                 setWarmPhaseOnRollover(checked);
               }}
-              label={intl.formatMessage({
-                id: 'xpack.indexLifecycleMgmt.hotPhase.enableRolloverLabel',
+              label={i18n.translate('xpack.indexLifecycleMgmt.hotPhase.enableRolloverLabel', {
                 defaultMessage: 'Enable rollover'
               })}
             />
@@ -124,8 +123,7 @@ class HotPhaseUi extends PureComponent {
                 <EuiFlexItem style={{ maxWidth: 188 }}>
                   <ErrableFormRow
                     id={`${PHASE_HOT}-${PHASE_ROLLOVER_MAX_SIZE_STORED}`}
-                    label={intl.formatMessage({
-                      id: 'xpack.indexLifecycleMgmt.hotPhase.maximumIndexSizeLabel',
+                    label={i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumIndexSizeLabel', {
                       defaultMessage: 'Maximum index size'
                     })}
                     errorKey={PHASE_ROLLOVER_MAX_SIZE_STORED}
@@ -154,8 +152,7 @@ class HotPhaseUi extends PureComponent {
                     errors={errors}
                   >
                     <EuiSelect
-                      aria-label={intl.formatMessage({
-                        id: 'xpack.indexLifecycleMgmt.hotPhase.maximumIndexSizeUnitsAriaLabel',
+                      aria-label={i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumIndexSizeUnitsAriaLabel', {
                         defaultMessage: 'Maximum index size units'
                       })}
                       value={phaseData[PHASE_ROLLOVER_MAX_SIZE_STORED_UNITS]}
@@ -166,12 +163,10 @@ class HotPhaseUi extends PureComponent {
                         );
                       }}
                       options={[
-                        { value: 'gb', text: intl.formatMessage({
-                          id: 'xpack.indexLifecycleMgmt.hotPhase.gigabytesLabel',
+                        { value: 'gb', text: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.gigabytesLabel', {
                           defaultMessage: 'gigabytes'
                         }) },
-                        { value: 'mb', text: intl.formatMessage({
-                          id: 'xpack.indexLifecycleMgmt.hotPhase.megabytesLabel',
+                        { value: 'mb', text: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.megabytesLabel', {
                           defaultMessage: 'megabytes'
                         }) }
                       ]}
@@ -184,8 +179,7 @@ class HotPhaseUi extends PureComponent {
                 <EuiFlexItem style={{ maxWidth: 188 }}>
                   <ErrableFormRow
                     id={`${PHASE_HOT}-${PHASE_ROLLOVER_MAX_DOCUMENTS}`}
-                    label={intl.formatMessage({
-                      id: 'xpack.indexLifecycleMgmt.hotPhase.maximumDocumentsLabel',
+                    label={i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumDocumentsLabel', {
                       defaultMessage: 'Maximum documents'
                     })}
                     errorKey={PHASE_ROLLOVER_MAX_DOCUMENTS}
@@ -211,8 +205,7 @@ class HotPhaseUi extends PureComponent {
                 <EuiFlexItem style={{ maxWidth: 188 }}>
                   <ErrableFormRow
                     id={`${PHASE_HOT}-${PHASE_ROLLOVER_MAX_AGE}`}
-                    label={intl.formatMessage({
-                      id: 'xpack.indexLifecycleMgmt.hotPhase.maximumAgeLabel',
+                    label={i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumAgeLabel', {
                       defaultMessage: 'Maximum age'
                     })}
                     errorKey={`${PHASE_ROLLOVER_MAX_AGE}`}
@@ -238,8 +231,7 @@ class HotPhaseUi extends PureComponent {
                     errors={errors}
                   >
                     <EuiSelect
-                      aria-label={intl.formatMessage({
-                        id: 'xpack.indexLifecycleMgmt.hotPhase.maximumAgeUnitsAriaLabel',
+                      aria-label={i18n.translate('xpack.indexLifecycleMgmt.hotPhase.maximumAgeUnitsAriaLabel', {
                         defaultMessage: 'Maximum age units'
                       })}
                       value={phaseData[PHASE_ROLLOVER_MAX_AGE_UNITS]}
@@ -250,12 +242,10 @@ class HotPhaseUi extends PureComponent {
                         );
                       }}
                       options={[
-                        { value: 'd', text: intl.formatMessage({
-                          id: 'xpack.indexLifecycleMgmt.hotPhase.daysLabel',
+                        { value: 'd', text: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.daysLabel', {
                           defaultMessage: 'days'
                         }) },
-                        { value: 'h', text: intl.formatMessage({
-                          id: 'xpack.indexLifecycleMgmt.hotPhase.hoursLabel',
+                        { value: 'h', text: i18n.translate('xpack.indexLifecycleMgmt.hotPhase.hoursLabel', {
                           defaultMessage: 'hours'
                         }) },
                       ]}
@@ -277,4 +267,3 @@ class HotPhaseUi extends PureComponent {
     );
   }
 }
-export const HotPhase = injectI18n(HotPhaseUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/min_age_input.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/min_age_input.js
index d52bc147138a..e08aac8b0c71 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/min_age_input.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/min_age_input.js
@@ -4,7 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { LearnMoreLink } from '../../components';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+
 import {
   EuiFieldNumber,
   EuiFlexGroup,
@@ -12,36 +14,35 @@ import {
   EuiFormRow,
   EuiSelect,
 } from '@elastic/eui';
+
 import {
   PHASE_ROLLOVER_MINIMUM_AGE,
   PHASE_ROLLOVER_MINIMUM_AGE_UNITS,
 } from '../../../constants';
+import { LearnMoreLink } from '../../components';
 import { ErrableFormRow } from '../form_errors';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-const MinAgeInputUi = props => {
-  const { rolloverEnabled, errors, phaseData, phase, setPhaseData, isShowingErrors, intl } = props;
+
+export const MinAgeInput = props => {
+  const { rolloverEnabled, errors, phaseData, phase, setPhaseData, isShowingErrors } = props;
+
   const fromMessage = rolloverEnabled
-    ? intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.editPolicy.fromRolloverMessage',
-      defaultMessage: 'from rollover',
+    ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.fromRolloverMessage', {
+      defaultMessage: 'from rollover'
     })
-    : intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.editPolicy.fromIndexCreationMessage',
-      defaultMessage: 'from index creation',
+    : i18n.translate('xpack.indexLifecycleMgmt.editPolicy.fromIndexCreationMessage', {
+      defaultMessage: 'from index creation'
     });
+
   return (
     <EuiFlexGroup>
       <EuiFlexItem style={{ maxWidth: 188 }}>
         <ErrableFormRow
           id={`${phase}-${PHASE_ROLLOVER_MINIMUM_AGE}`}
           label={
-            intl.formatMessage(
-              {
-                id: 'xpack.indexLifecycleMgmt.editPolicy.minimimAgeLabel',
-                defaultMessage: 'Timing for {phase} phase',
-              },
-              { phase }
-            )
+            i18n.translate('xpack.indexLifecycleMgmt.editPolicy.minimimAgeLabel', {
+              defaultMessage: 'Timing for {phase} phase',
+              values: { phase }
+            })
           }
           errorKey={PHASE_ROLLOVER_MINIMUM_AGE}
           isShowingErrors={isShowingErrors}
@@ -71,39 +72,30 @@ const MinAgeInputUi = props => {
       <EuiFlexItem style={{ maxWidth: 220 }}>
         <EuiFormRow hasEmptyLabelSpace >
           <EuiSelect
-            aria-label={intl.formatMessage(
-              {
-                id: 'xpack.indexLifecycleMgmt.editPolicy.minimimAgeUnitsAriaLabel',
-                defaultMessage: '{phaseUpper} phase after units',
-              },
-              { phaseUpper: `${phase.charAt(0).toUpperCase()}${phase.slice(1)}` }
-            )}
+            aria-label={i18n.translate('xpack.indexLifecycleMgmt.editPolicy.minimimAgeUnitsAriaLabel', {
+              defaultMessage: '{phaseUpper} phase after units',
+              values: { phaseUpper: `${phase.charAt(0).toUpperCase()}${phase.slice(1)}` }
+            })}
             value={phaseData[PHASE_ROLLOVER_MINIMUM_AGE_UNITS]}
             onChange={e => setPhaseData(PHASE_ROLLOVER_MINIMUM_AGE_UNITS, e.target.value)}
             options={[
               {
                 value: 'd',
-                text: intl.formatMessage(
-                  {
-                    id: 'xpack.indexLifecycleMgmt.editPolicy.daysLabel',
-                    defaultMessage: 'days {fromMessage}',
-                  },
-                  {
+                text: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.daysLabel', {
+                  defaultMessage: 'days {fromMessage}',
+                  values: {
                     fromMessage,
                   }
-                ),
+                }),
               },
               {
                 value: 'h',
-                text: intl.formatMessage(
-                  {
-                    id: 'xpack.indexLifecycleMgmt.editPolicy.hoursLabel',
-                    defaultMessage: 'hours {fromMessage}',
-                  },
-                  {
+                text: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.hoursLabel', {
+                  defaultMessage: 'hours {fromMessage}',
+                  values: {
                     fromMessage,
                   }
-                ),
+                }),
               },
             ]}
           />
@@ -112,4 +104,3 @@ const MinAgeInputUi = props => {
     </EuiFlexGroup>
   );
 };
-export const MinAgeInput = injectI18n(MinAgeInputUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_allocation/node_allocation.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_allocation/node_allocation.js
index 0a0f3bf9d35a..778386e26a56 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_allocation/node_allocation.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_allocation/node_allocation.js
@@ -5,11 +5,14 @@
  */
 
 import React, { Component, Fragment } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { EuiSelect, EuiButtonEmpty, EuiCallOut, EuiSpacer, EuiLoadingSpinner } from '@elastic/eui';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+
 import { PHASE_NODE_ATTRS } from '../../../../constants';
-import { ErrableFormRow } from '../../form_errors';
 import { LearnMoreLink } from '../../../components/learn_more_link';
+import { ErrableFormRow } from '../../form_errors';
+
 const learnMoreLinks = (
   <Fragment>
     <EuiSpacer size="s" />
@@ -25,15 +28,16 @@ const learnMoreLinks = (
     />
   </Fragment>
 );
-class NodeAllocationUi extends Component {
+
+export class NodeAllocation extends Component {
   componentDidMount() {
     this.props.fetchNodes();
   }
+
   render() {
     const {
       phase,
       setPhaseData,
-      intl,
       isShowingErrors,
       phaseData,
       showNodeDetailsFlyout,
@@ -72,13 +76,13 @@ class NodeAllocationUi extends Component {
         </Fragment>
       );
     }
+
     return (
       <Fragment>
         <ErrableFormRow
           id={`${phase}-${PHASE_NODE_ATTRS}`}
-          label={intl.formatMessage({
-            id: 'xpack.indexLifecycleMgmt.editPolicy.nodeAllocationLabel',
-            defaultMessage: 'Select a node attribute to control shard allocation',
+          label={i18n.translate('xpack.indexLifecycleMgmt.editPolicy.nodeAllocationLabel', {
+            defaultMessage: 'Select a node attribute to control shard allocation'
           })}
           errorKey={PHASE_NODE_ATTRS}
           isShowingErrors={isShowingErrors}
@@ -113,4 +117,3 @@ class NodeAllocationUi extends Component {
     );
   }
 }
-export const NodeAllocation = injectI18n(NodeAllocationUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_attrs_details/node_attrs_details.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_attrs_details/node_attrs_details.js
index 66329e448af6..81272c748f60 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_attrs_details/node_attrs_details.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_attrs_details/node_attrs_details.js
@@ -6,6 +6,8 @@
 
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiFlyoutBody,
@@ -15,10 +17,8 @@ import {
   EuiSpacer,
   EuiPortal,
 } from '@elastic/eui';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-
-export class NodeAttrsDetailsUi extends PureComponent {
+export class NodeAttrsDetails extends PureComponent {
   static propTypes = {
     fetchNodeDetails: PropTypes.func.isRequired,
     close: PropTypes.func.isRequired,
@@ -32,7 +32,7 @@ export class NodeAttrsDetailsUi extends PureComponent {
   }
 
   render() {
-    const { selectedNodeAttrs, details, close, intl } = this.props;
+    const { selectedNodeAttrs, details, close } = this.props;
 
     return (
       <EuiPortal>
@@ -51,17 +51,14 @@ export class NodeAttrsDetailsUi extends PureComponent {
             <EuiInMemoryTable
               items={details}
               columns={[
-                { field: 'nodeId', name: intl.formatMessage({
-                  id: 'xpack.indexLifecycleMgmt.nodeAttrDetails.idField',
-                  defaultMessage: 'ID',
+                { field: 'nodeId', name: i18n.translate('xpack.indexLifecycleMgmt.nodeAttrDetails.idField', {
+                  defaultMessage: 'ID'
                 }) },
-                { field: 'stats.name', name: intl.formatMessage({
-                  id: 'xpack.indexLifecycleMgmt.nodeAttrDetails.nameField',
-                  defaultMessage: 'Name',
+                { field: 'stats.name', name: i18n.translate('xpack.indexLifecycleMgmt.nodeAttrDetails.nameField', {
+                  defaultMessage: 'Name'
                 }) },
-                { field: 'stats.host', name: intl.formatMessage({
-                  id: 'xpack.indexLifecycleMgmt.nodeAttrDetails.hostField',
-                  defaultMessage: 'Host',
+                { field: 'stats.host', name: i18n.translate('xpack.indexLifecycleMgmt.nodeAttrDetails.hostField', {
+                  defaultMessage: 'Host'
                 }) },
               ]}
               pagination={true}
@@ -73,5 +70,3 @@ export class NodeAttrsDetailsUi extends PureComponent {
     );
   }
 }
-export const NodeAttrsDetails = injectI18n(NodeAttrsDetailsUi);
-
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/policy_json_flyout.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/policy_json_flyout.js
index 6e553dfd36ef..fbc00604ea3a 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/policy_json_flyout.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/policy_json_flyout.js
@@ -5,6 +5,8 @@
  */
 
 import React, { PureComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import PropTypes from 'prop-types';
 import { toastNotifications } from 'ui/notify';
 import copy from 'copy-to-clipboard';
@@ -19,10 +21,8 @@ import {
   EuiPortal,
   EuiTitle,
 } from '@elastic/eui';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-
-export class PolicyJsonFlyoutUi extends PureComponent {
+export class PolicyJsonFlyout extends PureComponent {
   static propTypes = {
     close: PropTypes.func.isRequired,
     lifecycle: PropTypes.object.isRequired,
@@ -35,12 +35,13 @@ export class PolicyJsonFlyoutUi extends PureComponent {
     }, null, 4);
   }
   copyToClipboard(lifecycle) {
-    const { intl } = this.props;
     copy(this.getEsJson(lifecycle));
-    toastNotifications.add(intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.editPolicy.policyJsonFlyout.copiedToClipboardMessage',
-      defaultMessage: 'JSON copied to clipboard',
-    }));
+    toastNotifications.add(i18n.translate(
+      'xpack.indexLifecycleMgmt.editPolicy.policyJsonFlyout.copiedToClipboardMessage',
+      {
+        defaultMessage: 'JSON copied to clipboard'
+      }
+    ));
   }
   render() {
     const { lifecycle, close, policyName } = this.props;
@@ -81,5 +82,3 @@ export class PolicyJsonFlyoutUi extends PureComponent {
     );
   }
 }
-export const PolicyJsonFlyout = injectI18n(PolicyJsonFlyoutUi);
-
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
index 54794f8f4e09..a71db0c07113 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
@@ -5,7 +5,8 @@
  */
 
 import React, { Fragment, PureComponent } from 'react';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import PropTypes from 'prop-types';
 import {
   EuiTextColor,
@@ -17,6 +18,7 @@ import {
   EuiSwitch,
   EuiDescribedFormGroup,
 } from '@elastic/eui';
+
 import {
   PHASE_WARM,
   PHASE_ENABLED,
@@ -32,7 +34,8 @@ import { NodeAllocation } from '../node_allocation';
 import { ErrableFormRow } from '../../form_errors';
 import { LearnMoreLink, ActiveBadge, PhaseErrorMessage, OptionalLabel } from '../../../components';
 import { MinAgeInput } from '../min_age_input';
-class WarmPhaseUi extends PureComponent {
+
+export class WarmPhase extends PureComponent {
   static propTypes = {
     setPhaseData: PropTypes.func.isRequired,
     showNodeDetailsFlyout: PropTypes.func.isRequired,
@@ -49,22 +52,18 @@ class WarmPhaseUi extends PureComponent {
       errors,
       isShowingErrors,
       hotPhaseRolloverEnabled,
-      intl,
     } = this.props;
 
-    const shrinkLabel = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.warmPhase.shrinkIndexLabel',
-      defaultMessage: 'Shrink index',
+    const shrinkLabel = i18n.translate('xpack.indexLifecycleMgmt.warmPhase.shrinkIndexLabel', {
+      defaultMessage: 'Shrink index'
     });
 
-    const moveToWarmPhaseOnRolloverLabel = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.warmPhase.moveToWarmPhaseOnRolloverLabel',
-      defaultMessage: 'Move to warm phase on rollover',
+    const moveToWarmPhaseOnRolloverLabel = i18n.translate('xpack.indexLifecycleMgmt.warmPhase.moveToWarmPhaseOnRolloverLabel', {
+      defaultMessage: 'Move to warm phase on rollover'
     });
 
-    const forcemergeLabel = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.warmPhase.forceMergeDataLabel',
-      defaultMessage: 'Force merge data',
+    const forcemergeLabel = i18n.translate('xpack.indexLifecycleMgmt.warmPhase.forceMergeDataLabel', {
+      defaultMessage: 'Force merge data'
     });
 
     return (
@@ -169,8 +168,7 @@ class WarmPhaseUi extends PureComponent {
                       isShowingErrors={isShowingErrors}
                       errors={errors}
                       helpText={
-                        intl.formatMessage({
-                          id: 'xpack.indexLifecycleMgmt.warmPhase.replicaCountHelpText',
+                        i18n.translate('xpack.indexLifecycleMgmt.warmPhase.replicaCountHelpText', {
                           defaultMessage: 'By default, the number of replicas remains the same.'
                         })
                       }
@@ -235,9 +233,8 @@ class WarmPhaseUi extends PureComponent {
                         <EuiFlexItem grow={false}>
                           <ErrableFormRow
                             id={`${PHASE_WARM}-${PHASE_PRIMARY_SHARD_COUNT}`}
-                            label={intl.formatMessage({
-                              id: 'xpack.indexLifecycleMgmt.warmPhase.numberOfPrimaryShardsLabel',
-                              defaultMessage: 'Number of primary shards',
+                            label={i18n.translate('xpack.indexLifecycleMgmt.warmPhase.numberOfPrimaryShardsLabel', {
+                              defaultMessage: 'Number of primary shards'
                             })}
                             errorKey={PHASE_PRIMARY_SHARD_COUNT}
                             isShowingErrors={isShowingErrors}
@@ -297,9 +294,8 @@ class WarmPhaseUi extends PureComponent {
                 {phaseData[PHASE_FORCE_MERGE_ENABLED] ? (
                   <ErrableFormRow
                     id={`${PHASE_WARM}-${PHASE_FORCE_MERGE_SEGMENTS}`}
-                    label={intl.formatMessage({
-                      id: 'xpack.indexLifecycleMgmt.warmPhase.numberOfSegmentsLabel',
-                      defaultMessage: 'Number of segments',
+                    label={i18n.translate('xpack.indexLifecycleMgmt.warmPhase.numberOfSegmentsLabel', {
+                      defaultMessage: 'Number of segments'
                     })}
                     errorKey={PHASE_FORCE_MERGE_SEGMENTS}
                     isShowingErrors={isShowingErrors}
@@ -330,4 +326,3 @@ class WarmPhaseUi extends PureComponent {
     );
   }
 }
-export const WarmPhase = injectI18n(WarmPhaseUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
index 627b40e10def..3daf354bfca0 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
@@ -7,7 +7,8 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { toastNotifications } from 'ui/notify';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiPage,
@@ -46,7 +47,7 @@ import { WarmPhase } from './components/warm_phase';
 import { DeletePhase } from './components/delete_phase';
 import { ColdPhase } from './components/cold_phase';
 
-class EditPolicyUi extends Component {
+export class EditPolicy extends Component {
   static propTypes = {
     selectedPolicy: PropTypes.object.isRequired,
     errors: PropTypes.object.isRequired,
@@ -105,14 +106,12 @@ class EditPolicyUi extends Component {
   };
 
   submit = async () => {
-    const { intl } = this.props;
     this.setState({ isShowingErrors: true });
     const { saveLifecyclePolicy, lifecycle, saveAsNewPolicy, firstError } = this.props;
     if (firstError) {
       toastNotifications.addDanger(
-        intl.formatMessage({
-          id: 'xpack.indexLifecycleMgmt.editPolicy.formErrorsMessage',
-          defaultMessage: 'Please fix the  errors on this page.',
+        i18n.translate('xpack.indexLifecycleMgmt.editPolicy.formErrorsMessage', {
+          defaultMessage: 'Please fix the  errors on this page.'
         })
       );
       const errorRowId = `${firstError.replace('.', '-')}-row`;
@@ -136,7 +135,6 @@ class EditPolicyUi extends Component {
   };
   render() {
     const {
-      intl,
       selectedPolicy,
       errors,
       setSaveAsNewPolicy,
@@ -160,17 +158,13 @@ class EditPolicyUi extends Component {
             <EuiTitle>
               <h4>
                 {isNewPolicy
-                  ? intl.formatMessage({
-                    id: 'xpack.indexLifecycleMgmt.editPolicy.createPolicyMessage',
-                    defaultMessage: 'Create an index lifecycle policy',
+                  ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.createPolicyMessage', {
+                    defaultMessage: 'Create an index lifecycle policy'
                   })
-                  : intl.formatMessage(
-                    {
-                      id: 'xpack.indexLifecycleMgmt.editPolicy.editPolicyMessage',
-                      defaultMessage: 'Edit index lifecycle policy {originalPolicyName}',
-                    },
-                    { originalPolicyName }
-                  )}
+                  : i18n.translate('xpack.indexLifecycleMgmt.editPolicy.editPolicyMessage', {
+                    defaultMessage: 'Edit index lifecycle policy {originalPolicyName}',
+                    values: { originalPolicyName }
+                  })}
               </h4>
             </EuiTitle>
             <div className="euiAnimateContentLoad">
@@ -255,9 +249,8 @@ class EditPolicyUi extends Component {
                   >
                     <ErrableFormRow
                       id={STRUCTURE_POLICY_NAME}
-                      label={intl.formatMessage({
-                        id: 'xpack.indexLifecycleMgmt.editPolicy.policyNameLabel',
-                        defaultMessage: 'Policy name',
+                      label={i18n.translate('xpack.indexLifecycleMgmt.editPolicy.policyNameLabel', {
+                        defaultMessage: 'Policy name'
                       })}
                       errorKey={STRUCTURE_POLICY_NAME}
                       isShowingErrors={isShowingErrors}
@@ -368,4 +361,3 @@ class EditPolicyUi extends Component {
     );
   }
 }
-export const EditPolicy = injectI18n(EditPolicyUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js b/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js
index b4c2c6f29ae3..3dcb4ab9b654 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/add_policy_to_template_confirm_modal.js
@@ -7,8 +7,7 @@
 import React, { Component, Fragment } from 'react';
 import { get, find } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
-import { LearnMoreLink } from '../../../components/learn_more_link';
+import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiCallOut,
   EuiSelect,
@@ -21,9 +20,12 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { toastNotifications } from 'ui/notify';
+
 import { addLifecyclePolicyToTemplate, loadIndexTemplates } from '../../../../services/api';
 import { showApiError } from '../../../../services/api_errors';
-export class AddPolicyToTemplateConfirmModalUi extends Component {
+import { LearnMoreLink } from '../../../components/learn_more_link';
+
+export class AddPolicyToTemplateConfirmModal extends Component {
   state = {
     templates: []
   }
@@ -32,7 +34,7 @@ export class AddPolicyToTemplateConfirmModalUi extends Component {
     this.setState({ templates });
   }
   addPolicyToTemplate = async () => {
-    const { intl, policy, callback, onCancel } = this.props;
+    const { policy, callback, onCancel } = this.props;
     const { templateName, aliasName } = this.state;
     const policyName = policy.name;
     if (!templateName) {
@@ -47,17 +49,23 @@ export class AddPolicyToTemplateConfirmModalUi extends Component {
         templateName,
         aliasName
       });
-      const message = intl.formatMessage({
-        id: 'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.successMessage',
-        defaultMessage: 'Added policy {policyName} to index template {templateName}',
-      }, { policyName, templateName });
+      const message = i18n.translate(
+        'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.successMessage',
+        {
+          defaultMessage: 'Added policy {policyName} to index template {templateName}',
+          values: { policyName, templateName }
+        }
+      );
       toastNotifications.addSuccess(message);
       onCancel();
     } catch (e) {
-      const title = intl.formatMessage({
-        id: 'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.errorMessage',
-        defaultMessage: 'Error adding policy "{policyName}" to index template {templateName}',
-      }, { policyName, templateName });
+      const title = i18n.translate(
+        'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.errorMessage',
+        {
+          defaultMessage: 'Error adding policy "{policyName}" to index template {templateName}',
+          values: { policyName, templateName }
+        }
+      );
       showApiError(e, title);
     }
     if (callback) {
@@ -168,25 +176,32 @@ export class AddPolicyToTemplateConfirmModalUi extends Component {
     );
   };
   render() {
-    const { intl, policy, onCancel } = this.props;
-    const title = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.title',
-      defaultMessage: 'Add policy "{name}" to index template',
-    }, { name: policy.name });
+    const { policy, onCancel } = this.props;
+    const title = i18n.translate(
+      'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.title',
+      {
+        defaultMessage: 'Add policy "{name}" to index template',
+        values: { name: policy.name }
+      }
+    );
     return (
       <EuiOverlayMask>
         <EuiConfirmModal
           title={title}
           onCancel={onCancel}
           onConfirm={this.addPolicyToTemplate}
-          cancelButtonText={intl.formatMessage({
-            id: 'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton',
-            defaultMessage: 'Cancel',
-          })}
-          confirmButtonText={intl.formatMessage({
-            id: 'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.confirmButton',
-            defaultMessage: 'Add policy',
-          })}
+          cancelButtonText={i18n.translate(
+            'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.cancelButton',
+            {
+              defaultMessage: 'Cancel'
+            }
+          )}
+          confirmButtonText={i18n.translate(
+            'xpack.indexLifecycleMgmt.policyTable.addLifecyclePolicyToTemplateConfirmModal.confirmButton',
+            {
+              defaultMessage: 'Add policy'
+            }
+          )}
           onClose={onCancel}
         >
           <EuiText>
@@ -213,4 +228,3 @@ export class AddPolicyToTemplateConfirmModalUi extends Component {
     );
   }
 }
-export const AddPolicyToTemplateConfirmModal = injectI18n(AddPolicyToTemplateConfirmModalUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/confirm_delete.js b/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/confirm_delete.js
index cdaf60d1f829..595ef13e7e69 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/confirm_delete.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/confirm_delete.js
@@ -5,28 +5,30 @@
  */
 
 import React, { Component } from 'react';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
 import { toastNotifications } from 'ui/notify';
 import { deletePolicy } from '../../../../services/api';
 import { showApiError } from '../../../../services/api_errors';
-export class ConfirmDeleteUi extends Component {
+
+export class ConfirmDelete extends Component {
   deletePolicy = async () => {
-    const { intl, policyToDelete, callback } = this.props;
+    const { policyToDelete, callback } = this.props;
     const policyName = policyToDelete.name;
 
     try {
       await deletePolicy(policyName);
-      const message = intl.formatMessage({
-        id: 'xpack.indexLifecycleMgmt.confirmDelete.successMessage',
+      const message = i18n.translate('xpack.indexLifecycleMgmt.confirmDelete.successMessage', {
         defaultMessage: 'Deleted policy {policyName}',
-      }, { policyName });
+        values: { policyName }
+      });
       toastNotifications.addSuccess(message);
     } catch (e) {
-      const title = intl.formatMessage({
-        id: 'xpack.indexLifecycleMgmt.confirmDelete.errorMessage',
+      const title = i18n.translate('xpack.indexLifecycleMgmt.confirmDelete.errorMessage', {
         defaultMessage: 'Error deleting policy {policyName}',
-      }, { policyName });
+        values: { policyName }
+      });
       showApiError(e, title);
     }
     if (callback) {
@@ -34,11 +36,11 @@ export class ConfirmDeleteUi extends Component {
     }
   };
   render() {
-    const { intl, policyToDelete, onCancel } = this.props;
-    const title = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.confirmDelete.title',
+    const { policyToDelete, onCancel } = this.props;
+    const title = i18n.translate('xpack.indexLifecycleMgmt.confirmDelete.title', {
       defaultMessage: 'Delete policy "{name}"',
-    }, { name: policyToDelete.name });
+      values: { name: policyToDelete.name }
+    });
     return (
       <EuiOverlayMask>
         <EuiConfirmModal
@@ -71,4 +73,3 @@ export class ConfirmDeleteUi extends Component {
     );
   }
 }
-export const ConfirmDelete = injectI18n(ConfirmDeleteUi);
diff --git a/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/policy_table.js b/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/policy_table.js
index cd9a96e24d64..db176c5c6944 100644
--- a/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/policy_table.js
+++ b/x-pack/plugins/index_lifecycle_management/public/sections/policy_table/components/policy_table/policy_table.js
@@ -7,7 +7,7 @@
 import React, { Component, Fragment } from 'react';
 import moment from 'moment-timezone';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiButton,
@@ -70,7 +70,7 @@ const COLUMNS = {
   },
 };
 
-export class PolicyTableUi extends Component {
+export class PolicyTable extends Component {
   constructor(props) {
     super(props);
 
@@ -218,26 +218,24 @@ export class PolicyTableUi extends Component {
     }
   }
   buildActionPanelTree(policy) {
-    const { intl } = this.props;
     const hasLinkedIndices = Boolean(policy.linkedIndices && policy.linkedIndices.length);
 
-    const viewIndicesLabel = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.policyTable.viewIndicesButtonText',
-      defaultMessage: 'View indices linked to policy',
+    const viewIndicesLabel = i18n.translate('xpack.indexLifecycleMgmt.policyTable.viewIndicesButtonText', {
+      defaultMessage: 'View indices linked to policy'
     });
-    const addPolicyToTemplateLabel = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.policyTable.addPolicyToTemplateButtonText',
-      defaultMessage: 'Add policy to index template',
+    const addPolicyToTemplateLabel = i18n.translate('xpack.indexLifecycleMgmt.policyTable.addPolicyToTemplateButtonText', {
+      defaultMessage: 'Add policy to index template'
     });
-    const deletePolicyLabel = intl.formatMessage({
-      id: 'xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonText',
-      defaultMessage: 'Delete policy',
+    const deletePolicyLabel = i18n.translate('xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonText', {
+      defaultMessage: 'Delete policy'
     });
     const deletePolicyTooltip = hasLinkedIndices
-      ? intl.formatMessage({
-        id: 'xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonDisabledTooltip',
-        defaultMessage: 'You cannot delete a policy that is being used by an index',
-      })
+      ? i18n.translate(
+        'xpack.indexLifecycleMgmt.policyTable.deletePolicyButtonDisabledTooltip',
+        {
+          defaultMessage: 'You cannot delete a policy that is being used by an index'
+        }
+      )
       : null;
     const items = [];
     if (hasLinkedIndices) {
@@ -271,9 +269,8 @@ export class PolicyTableUi extends Component {
     });
     const panelTree = {
       id: 0,
-      title: intl.formatMessage({
-        id: 'xpack.indexLifecycleMgmt.policyTable.policyActionsMenu.panelTitle',
-        defaultMessage: 'Policy options',
+      title: i18n.translate('xpack.indexLifecycleMgmt.policyTable.policyActionsMenu.panelTitle', {
+        defaultMessage: 'Policy options'
       }),
       items,
     };
@@ -298,7 +295,6 @@ export class PolicyTableUi extends Component {
     this.setState({ policyPopover: policy.name });
   };
   buildRowCells(policy) {
-    const { intl } = this.props;
     const { name } = policy;
     const cells = Object.entries(COLUMNS).map(([fieldName, { width }]) => {
       const value = policy[fieldName];
@@ -320,9 +316,8 @@ export class PolicyTableUi extends Component {
         onClick={() => this.togglePolicyPopover(policy)}
         color="primary"
       >
-        {intl.formatMessage({
-          id: 'xpack.indexLifecycleMgmt.policyTable.actionsButtonText',
-          defaultMessage: 'Actions',
+        {i18n.translate('xpack.indexLifecycleMgmt.policyTable.actionsButtonText', {
+          defaultMessage: 'Actions'
         })}
       </EuiButtonEmpty>
     );
@@ -382,7 +377,6 @@ export class PolicyTableUi extends Component {
       totalNumberOfPolicies,
       policyFilterChanged,
       filter,
-      intl,
       policyListLoaded,
     } = this.props;
     const { selectedPoliciesMap } = this.state;
@@ -428,14 +422,18 @@ export class PolicyTableUi extends Component {
                   policyFilterChanged(event.target.value);
                 }}
                 data-test-subj="policyTableFilterInput"
-                placeholder={intl.formatMessage({
-                  id: 'xpack.indexLifecycleMgmt.policyTable.systempoliciesSearchInputPlaceholder',
-                  defaultMessage: 'Search',
-                })}
-                aria-label={intl.formatMessage({
-                  id: 'xpack.indexLifecycleMgmt.policyTable.systempoliciesSearchInputAriaLabel',
-                  defaultMessage: 'Search policies',
-                })}
+                placeholder={i18n.translate(
+                  'xpack.indexLifecycleMgmt.policyTable.systempoliciesSearchInputPlaceholder',
+                  {
+                    defaultMessage: 'Search'
+                  }
+                )}
+                aria-label={i18n.translate(
+                  'xpack.indexLifecycleMgmt.policyTable.systempoliciesSearchInputAriaLabel',
+                  {
+                    defaultMessage: 'Search policies'
+                  }
+                )}
               />
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -491,5 +489,3 @@ export class PolicyTableUi extends Component {
     );
   }
 }
-
-export const PolicyTable = injectI18n(PolicyTableUi);