Convert ILM from using intl.formatMessage to i18n.translate. (#38747)

2019-06-12 05:41:30 -07:00 · 2019-06-12 05:41:30 -07:00 · 7b8f6ba837
parent cde4fb6ed5
commit 7b8f6ba837
12 changed files with 204 additions and 231 deletions
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
-
--- 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);
-
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);