From 951ab5bb5301fb56edad3352310c8a00a8ff40e8 Mon Sep 17 00:00:00 2001
From: Josh Dover <me@joshdover.com>
Date: Tue, 19 Feb 2019 09:56:10 -0600
Subject: [PATCH] [upgrade] Localize reindexing flyout in Upgrade Assistant
 (#30432)

---
 .../checkup/deprecations/reindex/button.tsx   |  43 +++-
 .../checklist_step.test.tsx.snap              |  40 +++-
 .../__snapshots__/warning_step.test.tsx.snap  | 223 +++++++++---------
 .../reindex/flyout/checklist_step.tsx         |  77 +++++-
 .../deprecations/reindex/flyout/container.tsx |   9 +-
 .../reindex/flyout/progress.test.tsx          |  60 ++++-
 .../deprecations/reindex/flyout/progress.tsx  |  89 ++++++-
 .../reindex/flyout/step_progress.tsx          |   5 +-
 .../reindex/flyout/warning_step.test.tsx      |   7 +-
 .../reindex/flyout/warnings_step.tsx          | 209 +++++++++-------
 .../public/components/tabs/overview/index.tsx |   4 +-
 11 files changed, 515 insertions(+), 251 deletions(-)

diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/button.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/button.tsx
index c1117b64c008b..6addd3dae642a 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/button.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/button.tsx
@@ -9,6 +9,7 @@ import React, { Fragment, ReactNode } from 'react';
 import { Subscription } from 'rxjs';
 
 import { EuiButton, EuiLoadingSpinner } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { kfetch } from 'ui/kfetch';
 import { ReindexStatus, UIReindexOption } from '../../../../../../common/types';
 import { LoadingState } from '../../../../types';
@@ -63,11 +64,21 @@ export class ReindexButton extends React.Component<ReindexButtonProps, ReindexBu
     const { flyoutVisible, reindexState } = this.state;
 
     const buttonProps: any = { size: 's', onClick: this.showFlyout };
-    let buttonContent: ReactNode = 'Reindex';
+    let buttonContent: ReactNode = (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.reindexLabel"
+        defaultMessage="Reindex"
+      />
+    );
 
     if (reindexState.loadingState === LoadingState.Loading) {
       buttonProps.disabled = true;
-      buttonContent = 'Loading…';
+      buttonContent = (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.loadingLabel"
+          defaultMessage="Loading…"
+        />
+      );
     } else {
       switch (reindexState.status) {
         case ReindexStatus.inProgress:
@@ -81,24 +92,44 @@ export class ReindexButton extends React.Component<ReindexButtonProps, ReindexBu
           buttonProps.color = 'secondary';
           buttonProps.iconSide = 'left';
           buttonProps.iconType = 'check';
-          buttonContent = 'Done';
+          buttonContent = (
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.doneLabel"
+              defaultMessage="Done"
+            />
+          );
           break;
         case ReindexStatus.failed:
           buttonProps.color = 'danger';
           buttonProps.iconSide = 'left';
           buttonProps.iconType = 'cross';
-          buttonContent = 'Failed';
+          buttonContent = (
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.failedLabel"
+              defaultMessage="Failed"
+            />
+          );
           break;
         case ReindexStatus.paused:
           buttonProps.color = 'warning';
           buttonProps.iconSide = 'left';
           buttonProps.iconType = 'pause';
-          buttonContent = 'Paused';
+          buttonContent = (
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.pausedLabel"
+              defaultMessage="Paused"
+            />
+          );
         case ReindexStatus.cancelled:
           buttonProps.color = 'danger';
           buttonProps.iconSide = 'left';
           buttonProps.iconType = 'cross';
-          buttonContent = 'Cancelled';
+          buttonContent = (
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.reindexButton.cancelledLabel"
+              defaultMessage="Cancelled"
+            />
+          );
           break;
       }
     }
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
index b1372cc9d985c..6f87d85dead85 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
@@ -7,13 +7,29 @@ exports[`ChecklistFlyout renders 1`] = `
       color="warning"
       iconType="alert"
       size="m"
-      title="Index is unable to ingest, update, or delete documents while reindexing"
+      title={
+        <FormattedMessage
+          defaultMessage="Index is unable to ingest, update, or delete documents while reindexing"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle"
+          values={Object {}}
+        />
+      }
     >
       <p>
-        If you can’t stop document updates or need to reindex into a new cluster, consider using a different upgrade strategy.
+        <FormattedMessage
+          defaultMessage="If you can’t stop document updates or need to reindex into a new cluster,
+                consider using a different upgrade strategy."
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail"
+          values={Object {}}
+        />
       </p>
       <p>
-        Reindexing will continue in the background, but if Kibana shuts down or restarts you will need to return to this page to resume reindexing.
+        <FormattedMessage
+          defaultMessage="Reindexing will continue in the background, but if Kibana shuts down or restarts you will
+                need to return to this page to resume reindexing."
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail"
+          values={Object {}}
+        />
       </p>
     </EuiCallOut>
     <EuiSpacer
@@ -24,7 +40,11 @@ exports[`ChecklistFlyout renders 1`] = `
       textTransform="none"
     >
       <h3>
-        Reindexing process
+        <FormattedMessage
+          defaultMessage="Reindexing process"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklistTitle"
+          values={Object {}}
+        />
       </h3>
     </EuiTitle>
     <Component
@@ -66,7 +86,11 @@ exports[`ChecklistFlyout renders 1`] = `
           onClick={[MockFunction]}
           type="button"
         >
-          Close
+          <FormattedMessage
+            defaultMessage="Close"
+            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.closeButtonLabel"
+            values={Object {}}
+          />
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem
@@ -82,7 +106,11 @@ exports[`ChecklistFlyout renders 1`] = `
           onClick={[MockFunction]}
           type="button"
         >
-          Run reindex
+          <FormattedMessage
+            defaultMessage="Run reindex"
+            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel"
+            values={Object {}}
+          />
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
index c1e7e58813425..c0e020e0f1e4f 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
@@ -7,129 +7,114 @@ exports[`WarningsFlyoutStep renders 1`] = `
       color="danger"
       iconType="alert"
       size="m"
-      title="This index requires destructive changes that can't be undone"
+      title={
+        <FormattedMessage
+          defaultMessage="This index requires destructive changes that can't be undone"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutTitle"
+          values={Object {}}
+        />
+      }
     >
       <p>
-        Back up your index, then proceed with the reindex by accepting each breaking change.
+        <FormattedMessage
+          defaultMessage="Back up your index, then proceed with the reindex by accepting each breaking change."
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutDetail"
+          values={Object {}}
+        />
       </p>
     </EuiCallOut>
     <EuiSpacer
       size="l"
     />
-    <EuiText
-      grow={true}
-      size="m"
-    >
-      <EuiCheckbox
-        checked={false}
-        compressed={false}
-        disabled={false}
-        id="reindexWarning-0"
-        indeterminate={false}
-        label={
-          <strong>
-            <EuiCode>
-              _all
-            </EuiCode>
-             field will be removed
-          </strong>
+    <WarningCheckbox
+      checkedIds={
+        Object {
+          "reindexWarning-0": false,
+          "reindexWarning-1": false,
         }
-        onChange={[Function]}
-      />
-      <p
-        className="upgWarningsStep__warningDescription"
-      >
-        The 
-        <EuiCode>
-          _all
-        </EuiCode>
-         meta field is no longer supported in 7.0. Reindexing removes the 
-        <EuiCode>
-          _all
-        </EuiCode>
-         field in the new index. Ensure that no application code or scripts reply on this field.
-        <br />
-        <EuiLink
-          color="primary"
-          href="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_the_literal__all_literal_meta_field_is_now_disabled_by_default"
-          target="_blank"
-          type="button"
-        >
-          Documentation
-        </EuiLink>
-      </p>
-    </EuiText>
-    <EuiSpacer
-      size="l"
+      }
+      description={
+        <FormattedMessage
+          defaultMessage="The {allField} meta field is no longer supported in 7.0. Reindexing removes
+                      the {allField} field in the new index. Ensure that no application code or scripts reply on
+                      this field."
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.allFieldWarningDetail"
+          values={
+            Object {
+              "allField": <EuiCode>
+                _all
+              </EuiCode>,
+            }
+          }
+        />
+      }
+      documentationUrl="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_the_literal__all_literal_meta_field_is_now_disabled_by_default"
+      label={
+        <FormattedMessage
+          defaultMessage="{allField} will be removed"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.allFieldWarningTitle"
+          values={
+            Object {
+              "allField": <EuiCode>
+                _all
+              </EuiCode>,
+            }
+          }
+        />
+      }
+      onChange={[Function]}
+      warning={0}
     />
-    <EuiText
-      grow={true}
-      size="m"
-    >
-      <EuiCheckbox
-        checked={false}
-        compressed={false}
-        disabled={false}
-        id="reindexWarning-1"
-        indeterminate={false}
-        label={
-          <strong>
-            Boolean data in 
-            <EuiCode>
-              _source
-            </EuiCode>
-             might change
-          </strong>
+    <WarningCheckbox
+      checkedIds={
+        Object {
+          "reindexWarning-0": false,
+          "reindexWarning-1": false,
         }
-        onChange={[Function]}
-      />
-      <p
-        className="upgWarningsStep__warningDescription"
-      >
-        If a documents contain a boolean field that is neither 
-        <EuiCode>
-          true
-        </EuiCode>
-         or
-         
-        <EuiCode>
-          false
-        </EuiCode>
-         (for example, 
-        <EuiCode>
-          "yes"
-        </EuiCode>
-        ,
-         
-        <EuiCode>
-          "on"
-        </EuiCode>
-        , 
-        <EuiCode>
-          1
-        </EuiCode>
-        ), reindexing converts these fields to 
-        <EuiCode>
-          true
-        </EuiCode>
-         or 
-        <EuiCode>
-          false
-        </EuiCode>
-        . Ensure that no application code or scripts rely on boolean fields in the deprecated format.
-        <br />
-        <EuiLink
-          color="primary"
-          href="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields"
-          target="_blank"
-          type="button"
-        >
-          Documentation
-        </EuiLink>
-      </p>
-    </EuiText>
-    <EuiSpacer
-      size="l"
+      }
+      description={
+        <FormattedMessage
+          defaultMessage="If a document contain a boolean field that is neither {true} or {false}
+                   (for example, {yes}, {on}, {one}), reindexing converts these fields to {true} or {false}.
+                   Ensure that no application code or scripts rely on boolean fields in the deprecated format."
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.booleanFieldsWarningDetail"
+          values={
+            Object {
+              "false": <EuiCode>
+                false
+              </EuiCode>,
+              "on": <EuiCode>
+                "on"
+              </EuiCode>,
+              "one": <EuiCode>
+                1
+              </EuiCode>,
+              "true": <EuiCode>
+                true
+              </EuiCode>,
+              "yes": <EuiCode>
+                "yes"
+              </EuiCode>,
+            }
+          }
+        />
+      }
+      documentationUrl="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_field"
+      label={
+        <FormattedMessage
+          defaultMessage="Boolean data in {_source} might change"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.booleanFieldsWarningTitle"
+          values={
+            Object {
+              "_source": <EuiCode>
+                _source
+              </EuiCode>,
+            }
+          }
+        />
+      }
+      onChange={[Function]}
+      warning={1}
     />
   </EuiFlyoutBody>
   <EuiFlyoutFooter>
@@ -154,7 +139,11 @@ exports[`WarningsFlyoutStep renders 1`] = `
           onClick={[MockFunction]}
           type="button"
         >
-          Cancel
+          <FormattedMessage
+            defaultMessage="Cancel"
+            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.cancelButtonLabel"
+            values={Object {}}
+          />
         </EuiButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem
@@ -169,7 +158,11 @@ exports[`WarningsFlyoutStep renders 1`] = `
           onClick={[MockFunction]}
           type="button"
         >
-          Continue with reindex
+          <FormattedMessage
+            defaultMessage="Continue with reindex"
+            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel"
+            values={Object {}}
+          />
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/checklist_step.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/checklist_step.tsx
index 7d4ce595f03a7..3cd3a32a0dfb2 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/checklist_step.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/checklist_step.tsx
@@ -17,6 +17,8 @@ import {
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
 import { ReindexStatus } from '../../../../../../../common/types';
 import { LoadingState } from '../../../../../types';
 import { ReindexState } from '../polling_service';
@@ -25,15 +27,40 @@ import { ReindexProgress } from './progress';
 const buttonLabel = (status?: ReindexStatus) => {
   switch (status) {
     case ReindexStatus.failed:
-      return 'Try again';
+      return (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.tryAgainLabel"
+          defaultMessage="Try again"
+        />
+      );
     case ReindexStatus.inProgress:
-      return 'Reindexing…';
+      return (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.reindexingLabel"
+          defaultMessage="Reindexing…"
+        />
+      );
     case ReindexStatus.completed:
-      return 'Done!';
+      return (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.doneLabel"
+          defaultMessage="Done!"
+        />
+      );
     case ReindexStatus.paused:
-      return 'Resume';
+      return (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel"
+          defaultMessage="Resume"
+        />
+      );
     default:
-      return 'Run reindex';
+      return (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel"
+          defaultMessage="Run reindex"
+        />
+      );
   }
 };
 
@@ -53,24 +80,40 @@ export const ChecklistFlyoutStep: React.StatelessComponent<{
     <Fragment>
       <EuiFlyoutBody>
         <EuiCallOut
-          title="Index is unable to ingest, update, or delete documents while reindexing"
+          title={
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle"
+              defaultMessage="Index is unable to ingest, update, or delete documents while reindexing"
+            />
+          }
           color="warning"
           iconType="alert"
         >
           <p>
-            If you can’t stop document updates or need to reindex into a new cluster, consider using
-            a different upgrade strategy.
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail"
+              defaultMessage="If you can’t stop document updates or need to reindex into a new cluster,
+                consider using a different upgrade strategy."
+            />
           </p>
           <p>
-            Reindexing will continue in the background, but if Kibana shuts down or restarts you
-            will need to return to this page to resume reindexing.
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail"
+              defaultMessage="Reindexing will continue in the background, but if Kibana shuts down or restarts you will
+                need to return to this page to resume reindexing."
+            />
           </p>
         </EuiCallOut>
         {!hasRequiredPrivileges && (
           <Fragment>
             <EuiSpacer />
             <EuiCallOut
-              title="You do not have sufficient privileges to reindex this index"
+              title={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.insufficientPrivilegeCallout.calloutTitle"
+                  defaultMessage="You do not have sufficient privileges to reindex this index"
+                />
+              }
               color="danger"
               iconType="alert"
             />
@@ -78,7 +121,12 @@ export const ChecklistFlyoutStep: React.StatelessComponent<{
         )}
         <EuiSpacer />
         <EuiTitle size="xs">
-          <h3>Reindexing process</h3>
+          <h3>
+            <FormattedMessage
+              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklistTitle"
+              defaultMessage="Reindexing process"
+            />
+          </h3>
         </EuiTitle>
         <ReindexProgress reindexState={reindexState} cancelReindex={cancelReindex} />
       </EuiFlyoutBody>
@@ -86,7 +134,10 @@ export const ChecklistFlyoutStep: React.StatelessComponent<{
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
-              Close
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.closeButtonLabel"
+                defaultMessage="Close"
+              />
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/container.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/container.tsx
index 97c3eb778d458..fa619140bcd16 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/container.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/container.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 
 import { EuiFlyout, EuiFlyoutHeader, EuiPortal, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ReindexState } from '../polling_service';
 import { ChecklistFlyoutStep } from './checklist_step';
@@ -80,7 +81,13 @@ export class ReindexFlyout extends React.Component<ReindexFlyoutProps, ReindexFl
         <EuiFlyout onClose={closeFlyout} aria-labelledby="Reindex" ownFocus size="m" maxWidth>
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="s">
-              <h2>Reindex {indexName}</h2>
+              <h2>
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.flyoutHeader"
+                  defaultMessage="Reindex {indexName}"
+                  values={{ indexName }}
+                />
+              </h2>
             </EuiTitle>
           </EuiFlyoutHeader>
           {flyoutContents}
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.test.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.test.tsx
index a51e6e42da4a0..a279ffa098123 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.test.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.test.tsx
@@ -33,19 +33,35 @@ describe('ReindexProgress', () => {
     Array [
       Object {
         "status": "incomplete",
-        "title": "Setting old index to read-only",
+        "title": <FormattedMessage
+          defaultMessage="Setting old index to read-only"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Creating new index",
+        "title": <FormattedMessage
+          defaultMessage="Creating new index"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Reindexing documents",
+        "title": <FormattedMessage
+          defaultMessage="Reindexing documents"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Swapping original index with alias",
+        "title": <FormattedMessage
+          defaultMessage="Swapping original index with alias"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
+          values={Object {}}
+        />,
       },
     ]
   }
@@ -116,27 +132,51 @@ describe('ReindexProgress', () => {
     Array [
       Object {
         "status": "inProgress",
-        "title": "Pausing Machine Learning jobs",
+        "title": <FormattedMessage
+          defaultMessage="Pausing Machine Learning jobs"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.pauseMlStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Setting old index to read-only",
+        "title": <FormattedMessage
+          defaultMessage="Setting old index to read-only"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Creating new index",
+        "title": <FormattedMessage
+          defaultMessage="Creating new index"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Reindexing documents",
+        "title": <FormattedMessage
+          defaultMessage="Reindexing documents"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Swapping original index with alias",
+        "title": <FormattedMessage
+          defaultMessage="Swapping original index with alias"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
+          values={Object {}}
+        />,
       },
       Object {
         "status": "incomplete",
-        "title": "Resuming Machine Learning jobs",
+        "title": <FormattedMessage
+          defaultMessage="Resuming Machine Learning jobs"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.resumeMlStepTitle"
+          values={Object {}}
+        />,
       },
     ]
   }
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.tsx
index c5b43bf04d8ca..0510752b04e9a 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/progress.tsx
@@ -14,6 +14,7 @@ import {
   EuiProgress,
   EuiText,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { IndexGroup, ReindexStatus, ReindexStep } from '../../../../../../../common/types';
 import { LoadingState } from '../../../../../types';
@@ -50,19 +51,40 @@ const ReindexProgressBar: React.StatelessComponent<{
     <EuiProgress size="s" />
   );
 
-  let cancelText: string;
+  let cancelText: React.ReactNode;
   switch (cancelLoadingState) {
     case LoadingState.Loading:
-      cancelText = 'Cancelling…';
+      cancelText = (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelButton.cancellingLabel"
+          defaultMessage="Cancelling…"
+        />
+      );
       break;
     case LoadingState.Success:
-      cancelText = 'Cancelled';
+      cancelText = (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelButton.cancelledLabel"
+          defaultMessage="Cancelled"
+        />
+      );
       break;
     case LoadingState.Error:
       cancelText = 'Could not cancel';
+      cancelText = (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelButton.errorLabel"
+          defaultMessage="Could not cancel"
+        />
+      );
       break;
     default:
-      cancelText = 'Cancel';
+      cancelText = (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelButton.cancelLabel"
+          defaultMessage="Cancel"
+        />
+      );
   }
 
   return (
@@ -130,7 +152,15 @@ export const ReindexProgress: React.StatelessComponent<{
 
   // The reindexing step is special because it combines the starting and complete statuses into a single UI
   // with a progress bar.
-  const reindexingDocsStep = { title: 'Reindexing documents' } as StepProgressStep;
+  const reindexingDocsStep = {
+    title: (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
+        defaultMessage="Reindexing documents"
+      />
+    ),
+  } as StepProgressStep;
+
   if (
     status === ReindexStatus.failed &&
     (lastCompletedStep === ReindexStep.newIndexCreated ||
@@ -165,16 +195,31 @@ export const ReindexProgress: React.StatelessComponent<{
 
   const steps = [
     {
-      title: 'Setting old index to read-only',
+      title: (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
+          defaultMessage="Setting old index to read-only"
+        />
+      ),
       ...stepDetails(ReindexStep.readonly),
     },
     {
-      title: 'Creating new index',
+      title: (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
+          defaultMessage="Creating new index"
+        />
+      ),
       ...stepDetails(ReindexStep.newIndexCreated),
     },
     reindexingDocsStep,
     {
-      title: 'Swapping original index with alias',
+      title: (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
+          defaultMessage="Swapping original index with alias"
+        />
+      ),
       ...stepDetails(ReindexStep.aliasCreated),
     },
   ];
@@ -182,20 +227,40 @@ export const ReindexProgress: React.StatelessComponent<{
   // If this index is part of an index group, add the approriate group services steps.
   if (indexGroup === IndexGroup.ml) {
     steps.unshift({
-      title: 'Pausing Machine Learning jobs',
+      title: (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.pauseMlStepTitle"
+          defaultMessage="Pausing Machine Learning jobs"
+        />
+      ),
       ...stepDetails(ReindexStep.indexGroupServicesStopped),
     });
     steps.push({
-      title: 'Resuming Machine Learning jobs',
+      title: (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.resumeMlStepTitle"
+          defaultMessage="Resuming Machine Learning jobs"
+        />
+      ),
       ...stepDetails(ReindexStep.indexGroupServicesStarted),
     });
   } else if (indexGroup === IndexGroup.watcher) {
     steps.unshift({
-      title: 'Stopping Watcher',
+      title: (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.stopWatcherStepTitle"
+          defaultMessage="Stopping Watcher"
+        />
+      ),
       ...stepDetails(ReindexStep.indexGroupServicesStopped),
     });
     steps.push({
-      title: 'Resuming Watcher',
+      title: (
+        <FormattedMessage
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.resumeWatcherStepTitle"
+          defaultMessage="Resuming Watcher"
+        />
+      ),
       ...stepDetails(ReindexStep.indexGroupServicesStarted),
     });
   }
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/step_progress.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/step_progress.tsx
index 5e44b5f58e351..78537b16cc9c6 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/step_progress.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/step_progress.tsx
@@ -71,7 +71,7 @@ const Step: React.StatelessComponent<StepProgressStep & { idx: number }> = ({
 };
 
 export interface StepProgressStep {
-  title: string;
+  title: React.ReactNode;
   status: STATUS;
   children?: ReactNode;
 }
@@ -84,8 +84,9 @@ export const StepProgress: React.StatelessComponent<{
 }> = ({ steps }) => {
   return (
     <div className="upgStepProgress__container">
+      {/* Use the index as the key only works here because these values do not change order after mounting. */}
       {steps.map((step, idx) => (
-        <Step key={step.title} {...step} idx={idx} />
+        <Step key={idx} {...step} idx={idx} />
       ))}
     </div>
   );
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warning_step.test.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warning_step.test.tsx
index 230878a2fd31b..0ba13fc630c6e 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warning_step.test.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warning_step.test.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { I18nProvider } from '@kbn/i18n/react';
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
@@ -22,7 +23,11 @@ describe('WarningsFlyoutStep', () => {
   });
 
   it('does not allow proceeding until all are checked', () => {
-    const wrapper = mount(<WarningsFlyoutStep {...defaultProps} />);
+    const wrapper = mount(
+      <I18nProvider>
+        <WarningsFlyoutStep {...defaultProps} />
+      </I18nProvider>
+    );
     const button = wrapper.find('EuiButton');
 
     button.simulate('click');
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warnings_step.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warnings_step.tsx
index d14248b90064b..d4602b99c94b2 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warnings_step.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/checkup/deprecations/reindex/flyout/warnings_step.tsx
@@ -20,10 +20,47 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { ReindexWarning } from '../../../../../../../common/types';
 
+interface CheckedIds {
+  [id: string]: boolean;
+}
+
 export const idForWarning = (warning: ReindexWarning) => `reindexWarning-${warning}`;
 
+const WarningCheckbox: React.StatelessComponent<{
+  checkedIds: CheckedIds;
+  warning: ReindexWarning;
+  label: React.ReactNode;
+  description: React.ReactNode;
+  documentationUrl: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}> = ({ checkedIds, warning, label, onChange, description, documentationUrl }) => (
+  <Fragment>
+    <EuiText>
+      <EuiCheckbox
+        id={idForWarning(warning)}
+        label={<strong>{label}</strong>}
+        checked={checkedIds[idForWarning(warning)]}
+        onChange={onChange}
+      />
+      <p className="upgWarningsStep__warningDescription">
+        {description}
+        <br />
+        <EuiLink href={documentationUrl} target="_blank">
+          <FormattedMessage
+            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.documentationLinkLabel"
+            defaultMessage="Documentation"
+          />
+        </EuiLink>
+      </p>
+    </EuiText>
+
+    <EuiSpacer />
+  </Fragment>
+);
+
 interface WarningsConfirmationFlyoutProps {
   closeFlyout: () => void;
   warnings: ReindexWarning[];
@@ -31,7 +68,7 @@ interface WarningsConfirmationFlyoutProps {
 }
 
 interface WarningsConfirmationFlyoutState {
-  checkedIds: { [id: string]: boolean };
+  checkedIds: CheckedIds;
 }
 
 /**
@@ -67,117 +104,123 @@ export class WarningsFlyoutStep extends React.Component<
       <Fragment>
         <EuiFlyoutBody>
           <EuiCallOut
-            title="This index requires destructive changes that can't be undone"
+            title={
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutTitle"
+                defaultMessage="This index requires destructive changes that can't be undone"
+              />
+            }
             color="danger"
             iconType="alert"
           >
             <p>
-              Back up your index, then proceed with the reindex by accepting each breaking change.
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutDetail"
+                defaultMessage="Back up your index, then proceed with the reindex by accepting each breaking change."
+              />
             </p>
           </EuiCallOut>
 
           <EuiSpacer />
 
           {warnings.includes(ReindexWarning.allField) && (
-            <Fragment>
-              <EuiText>
-                <EuiCheckbox
-                  id={idForWarning(ReindexWarning.allField)}
-                  label={
-                    <strong>
-                      <EuiCode>_all</EuiCode> field will be removed
-                    </strong>
-                  }
-                  checked={checkedIds[idForWarning(ReindexWarning.allField)]}
-                  onChange={this.onChange}
+            <WarningCheckbox
+              checkedIds={checkedIds}
+              onChange={this.onChange}
+              warning={ReindexWarning.allField}
+              label={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.allFieldWarningTitle"
+                  defaultMessage="{allField} will be removed"
+                  values={{
+                    allField: <EuiCode>_all</EuiCode>,
+                  }}
+                />
+              }
+              description={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.allFieldWarningDetail"
+                  defaultMessage="The {allField} meta field is no longer supported in 7.0. Reindexing removes
+                      the {allField} field in the new index. Ensure that no application code or scripts reply on
+                      this field."
+                  values={{
+                    allField: <EuiCode>_all</EuiCode>,
+                  }}
                 />
-                <p className="upgWarningsStep__warningDescription">
-                  The <EuiCode>_all</EuiCode> meta field is no longer supported in 7.0. Reindexing
-                  removes the <EuiCode>_all</EuiCode> field in the new index. Ensure that no
-                  application code or scripts reply on this field.
-                  <br />
-                  <EuiLink
-                    href="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_the_literal__all_literal_meta_field_is_now_disabled_by_default"
-                    target="_blank"
-                  >
-                    Documentation
-                  </EuiLink>
-                </p>
-              </EuiText>
-
-              <EuiSpacer />
-            </Fragment>
+              }
+              documentationUrl="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_the_literal__all_literal_meta_field_is_now_disabled_by_default"
+            />
           )}
 
           {warnings.includes(ReindexWarning.apmReindex) && (
-            <Fragment>
-              <EuiText>
-                <EuiCheckbox
-                  id={idForWarning(ReindexWarning.apmReindex)}
-                  label={<strong>This index will be converted to ECS format</strong>}
-                  checked={checkedIds[idForWarning(ReindexWarning.apmReindex)]}
-                  onChange={this.onChange}
+            <WarningCheckbox
+              checkedIds={checkedIds}
+              onChange={this.onChange}
+              warning={ReindexWarning.apmReindex}
+              label={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.apmReindexWarningTitle"
+                  defaultMessage="This index will be converted to ECS format"
                 />
-                <p className="upgWarningsStep__warningDescription">
-                  Starting in version 7.0.0, APM data will be represented in the Elastic Common
-                  Schema. Historical APM data will not visible until it's reindexed.
-                  <br />
-                  <EuiLink
-                    href="https://www.elastic.co/guide/en/apm/get-started/master/apm-release-notes.html"
-                    target="_blank"
-                  >
-                    Documentation
-                  </EuiLink>
-                </p>
-              </EuiText>
-
-              <EuiSpacer />
-            </Fragment>
+              }
+              description={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.apmReindexWarningDetail"
+                  defaultMessage="Starting in version 7.0.0, APM data will be represented in the Elastic Common Schema.
+                      Historical APM data will not visible until it's reindexed."
+                />
+              }
+              documentationUrl="https://www.elastic.co/guide/en/apm/get-started/master/apm-release-notes.html"
+            />
           )}
 
           {warnings.includes(ReindexWarning.booleanFields) && (
-            <Fragment>
-              <EuiText>
-                <EuiCheckbox
-                  id={idForWarning(ReindexWarning.booleanFields)}
-                  label={
-                    <strong>
-                      Boolean data in <EuiCode>_source</EuiCode> might change
-                    </strong>
-                  }
-                  checked={checkedIds[idForWarning(ReindexWarning.booleanFields)]}
-                  onChange={this.onChange}
+            <WarningCheckbox
+              checkedIds={checkedIds}
+              onChange={this.onChange}
+              warning={ReindexWarning.booleanFields}
+              label={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.booleanFieldsWarningTitle"
+                  defaultMessage="Boolean data in {_source} might change"
+                  values={{ _source: <EuiCode>_source</EuiCode> }}
+                />
+              }
+              description={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.booleanFieldsWarningDetail"
+                  defaultMessage="If a document contain a boolean field that is neither {true} or {false}
+                   (for example, {yes}, {on}, {one}), reindexing converts these fields to {true} or {false}.
+                   Ensure that no application code or scripts rely on boolean fields in the deprecated format."
+                  values={{
+                    true: <EuiCode>true</EuiCode>,
+                    false: <EuiCode>false</EuiCode>,
+                    yes: <EuiCode>"yes"</EuiCode>,
+                    on: <EuiCode>"on"</EuiCode>,
+                    one: <EuiCode>1</EuiCode>,
+                  }}
                 />
-                <p className="upgWarningsStep__warningDescription">
-                  If a documents contain a boolean field that is neither <EuiCode>true</EuiCode> or{' '}
-                  <EuiCode>false</EuiCode> (for example, <EuiCode>"yes"</EuiCode>,{' '}
-                  <EuiCode>"on"</EuiCode>, <EuiCode>1</EuiCode>), reindexing converts these fields
-                  to <EuiCode>true</EuiCode> or <EuiCode>false</EuiCode>. Ensure that no application
-                  code or scripts rely on boolean fields in the deprecated format.
-                  <br />
-                  <EuiLink
-                    href="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields"
-                    target="_blank"
-                  >
-                    Documentation
-                  </EuiLink>
-                </p>
-              </EuiText>
-
-              <EuiSpacer />
-            </Fragment>
+              }
+              documentationUrl="https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_field"
+            />
           )}
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
-                Cancel
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.cancelButtonLabel"
+                  defaultMessage="Cancel"
+                />
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiButton fill color="danger" onClick={advanceNextStep} disabled={blockAdvance}>
-                Continue with reindex
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel"
+                  defaultMessage="Continue with reindex"
+                />
               </EuiButton>
             </EuiFlexItem>
           </EuiFlexGroup>
diff --git a/x-pack/plugins/upgrade_assistant/public/components/tabs/overview/index.tsx b/x-pack/plugins/upgrade_assistant/public/components/tabs/overview/index.tsx
index 6d7ffc98e7939..834f5f4afe5f6 100644
--- a/x-pack/plugins/upgrade_assistant/public/components/tabs/overview/index.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/components/tabs/overview/index.tsx
@@ -32,8 +32,8 @@ export const OverviewTab: StatelessComponent<UpgradeAssistantTabProps> = props =
       <p>
         <FormattedMessage
           id="xpack.upgradeAssistant.overviewTab.tabDetail"
-          defaultMessage="This assistant checks your cluster and indices and identifies the changes
-             you need to make before upgrading to Elasticsearch {nextEsVersion}."
+          defaultMessage="This assistant helps you prepare your cluster and indices for Elasticsearch
+           {nextEsVersion} For other issues that need your attention, see the Elasticsearch logs."
           values={{
             nextEsVersion: `${NEXT_MAJOR_VERSION}.x`,
           }}