[Upgrade Assistant] Use core doc links service (#89363)

x-pack/plugins/upgrade_assistant/public/application/app.tsx

@@ -16,10 +16,10 @@ export interface AppDependencies extends ContextValue {
   i18n: I18nStart;
 }
 
-export const RootComponent = ({ i18n, ...contexValue }: AppDependencies) => {
+export const RootComponent = ({ i18n, ...contextValue }: AppDependencies) => {
   return (
     <i18n.Context>
-      <AppContextProvider value={contexValue}>
+      <AppContextProvider value={contextValue}>
         <div data-test-subj="upgradeAssistantRoot">
           <EuiPageHeader>
             <EuiPageHeaderSection>

x-pack/plugins/upgrade_assistant/public/application/components/latest_minor_banner.tsx

@@ -10,40 +10,49 @@ import { EuiCallOut, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { CURRENT_MAJOR_VERSION, NEXT_MAJOR_VERSION } from '../../../common/version';
+import { useAppContext } from '../app_context';
 
-export const LatestMinorBanner: React.FunctionComponent = () => (
-  <EuiCallOut
-    title={
-      <FormattedMessage
-        id="xpack.upgradeAssistant.tabs.incompleteCallout.calloutTitle"
-        defaultMessage="Issues list might be incomplete"
-      />
-    }
-    color="warning"
-    iconType="help"
-  >
-    <p>
-      <FormattedMessage
-        id="xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.calloutDetail"
-        defaultMessage="The complete list of {breakingChangesDocButton} in Elasticsearch {nextEsVersion}
+export const LatestMinorBanner: React.FunctionComponent = () => {
+  const { docLinks } = useAppContext();
+
+  const { ELASTIC_WEBSITE_URL } = docLinks;
+  const esDocBasePath = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference`;
+
+  return (
+    <EuiCallOut
+      title={
+        <FormattedMessage
+          id="xpack.upgradeAssistant.tabs.incompleteCallout.calloutTitle"
+          defaultMessage="Issues list might be incomplete"
+        />
+      }
+      color="warning"
+      iconType="help"
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.calloutDetail"
+          defaultMessage="The complete list of {breakingChangesDocButton} in Elasticsearch {nextEsVersion}
             will be available in the final {currentEsVersion} minor release. When the list
             is complete, this warning will go away."
-        values={{
-          breakingChangesDocButton: (
-            <EuiLink
-              href="https://www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes.html"
-              target="_blank"
-            >
-              <FormattedMessage
-                id="xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.breackingChangesDocButtonLabel"
-                defaultMessage="deprecations and breaking changes"
-              />
-            </EuiLink>
-          ),
-          nextEsVersion: `${NEXT_MAJOR_VERSION}.x`,
-          currentEsVersion: `${CURRENT_MAJOR_VERSION}.x`,
-        }}
-      />
-    </p>
-  </EuiCallOut>
-);
+          values={{
+            breakingChangesDocButton: (
+              <EuiLink
+                href={`${esDocBasePath}/master/breaking-changes.html`} // Pointing to master here, as we want to direct users to breaking changes for the next major ES version
+                target="_blank"
+                external
+              >
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.tabs.incompleteCallout.calloutBody.breackingChangesDocButtonLabel"
+                  defaultMessage="deprecations and breaking changes"
+                />
+              </EuiLink>
+            ),
+            nextEsVersion: `${NEXT_MAJOR_VERSION}.x`,
+            currentEsVersion: `${CURRENT_MAJOR_VERSION}.x`,
+          }}
+        />
+      </p>
+    </EuiCallOut>
+  );
+};

x-pack/plugins/upgrade_assistant/public/application/components/tabs.test.tsx

@@ -17,6 +17,19 @@ const promisesToResolve = () => new Promise((resolve) => setTimeout(resolve, 0))
 
 const mockHttp = httpServiceMock.createSetupContract();
 
+jest.mock('../app_context', () => {
+  return {
+    useAppContext: () => {
+      return {
+        docLinks: {
+          DOC_LINK_VERSION: 'current',
+          ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
+        },
+      };
+    },
+  };
+});
+
 describe('UpgradeAssistantTabs', () => {
   test('renders loading state', async () => {
     mockHttp.get.mockReturnValue(

x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/__snapshots__/checkup_tab.test.tsx.snap

@@ -40,7 +40,8 @@ exports[`CheckupTab render with deprecations 1`] = `
         values={
           Object {
             "snapshotRestoreDocsButton": <EuiLink
-              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html"
+              external={true}
+              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/snapshot-restore.html"
               target="_blank"
             >
               <FormattedMessage
@@ -321,7 +322,8 @@ exports[`CheckupTab render with error 1`] = `
         values={
           Object {
             "snapshotRestoreDocsButton": <EuiLink
-              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html"
+              external={true}
+              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/snapshot-restore.html"
               target="_blank"
             >
               <FormattedMessage
@@ -386,7 +388,8 @@ exports[`CheckupTab render without deprecations 1`] = `
         values={
           Object {
             "snapshotRestoreDocsButton": <EuiLink
-              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html"
+              external={true}
+              href="https://www.elastic.co/guide/en/elasticsearch/reference/current/snapshot-restore.html"
               target="_blank"
             >
               <FormattedMessage

x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/checkup_tab.test.tsx

@@ -20,6 +20,19 @@ const defaultProps = {
   setSelectedTabIndex: jest.fn(),
 };
 
+jest.mock('../../../app_context', () => {
+  return {
+    useAppContext: () => {
+      return {
+        docLinks: {
+          DOC_LINK_VERSION: 'current',
+          ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
+        },
+      };
+    },
+  };
+});
+
 /**
  * Mostly a dumb container with copy, test the three main states.
  */

x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/checkup_tab.tsx

@@ -5,7 +5,7 @@
  */
 
 import { find } from 'lodash';
-import React, { Fragment } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 
 import {
   EuiCallOut,
@@ -20,211 +20,65 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { NEXT_MAJOR_VERSION } from '../../../../../common/version';
 import { LoadingErrorBanner } from '../../error_banner';
+import { useAppContext } from '../../../app_context';
 import {
   GroupByOption,
   LevelFilterOption,
   LoadingState,
-  UpgradeAssistantTabComponent,
   UpgradeAssistantTabProps,
 } from '../../types';
 import { CheckupControls } from './controls';
 import { GroupedDeprecations } from './deprecations/grouped';
 
-interface CheckupTabProps extends UpgradeAssistantTabProps {
+export interface CheckupTabProps extends UpgradeAssistantTabProps {
   checkupLabel: string;
   showBackupWarning?: boolean;
 }
 
-interface CheckupTabState {
-  currentFilter: LevelFilterOption;
-  search: string;
-  currentGroupBy: GroupByOption;
-}
-
 /**
  * Displays a list of deprecations that filterable and groupable. Can be used for cluster,
  * nodes, or indices checkups.
  */
-export class CheckupTab extends UpgradeAssistantTabComponent<CheckupTabProps, CheckupTabState> {
-  constructor(props: CheckupTabProps) {
-    super(props);
+export const CheckupTab: FunctionComponent<CheckupTabProps> = ({
+  alertBanner,
+  checkupLabel,
+  deprecations,
+  loadingError,
+  loadingState,
+  refreshCheckupData,
+  setSelectedTabIndex,
+  showBackupWarning = false,
+}) => {
+  const [currentFilter, setCurrentFilter] = useState<LevelFilterOption>(LevelFilterOption.all);
+  const [search, setSearch] = useState<string>('');
+  const [currentGroupBy, setCurrentGroupBy] = useState<GroupByOption>(GroupByOption.message);
 
-    this.state = {
-      // initialize to all filters
-      currentFilter: LevelFilterOption.all,
-      search: '',
-      currentGroupBy: GroupByOption.message,
-    };
-  }
+  const { docLinks } = useAppContext();
 
-  public render() {
-    const {
-      alertBanner,
-      checkupLabel,
-      deprecations,
-      loadingError,
-      loadingState,
-      refreshCheckupData,
-      setSelectedTabIndex,
-      showBackupWarning = false,
-    } = this.props;
-    const { currentFilter, currentGroupBy } = this.state;
+  const { DOC_LINK_VERSION, ELASTIC_WEBSITE_URL } = docLinks;
+  const esDocBasePath = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}`;
 
-    return (
-      <Fragment>
-        <EuiSpacer />
-        <EuiText grow={false}>
-          <p>
-            <FormattedMessage
-              id="xpack.upgradeAssistant.checkupTab.tabDetail"
-              defaultMessage="These {strongCheckupLabel} issues need your attention. Resolve them before upgrading to Elasticsearch {nextEsVersion}."
-              values={{
-                strongCheckupLabel: <strong>{checkupLabel}</strong>,
-                nextEsVersion: `${NEXT_MAJOR_VERSION}.x`,
-              }}
-            />
-          </p>
-        </EuiText>
-
-        <EuiSpacer />
-
-        {alertBanner && (
-          <Fragment>
-            {alertBanner}
-            <EuiSpacer />
-          </Fragment>
-        )}
-
-        {showBackupWarning && (
-          <Fragment>
-            <EuiCallOut
-              title={
-                <FormattedMessage
-                  id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutTitle"
-                  defaultMessage="Back up your indices now"
-                />
-              }
-              color="warning"
-              iconType="help"
-            >
-              <p>
-                <FormattedMessage
-                  id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.calloutDetail"
-                  defaultMessage="Back up your data using the {snapshotRestoreDocsButton}."
-                  values={{
-                    snapshotRestoreDocsButton: (
-                      <EuiLink
-                        href="https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-snapshots.html"
-                        target="_blank"
-                      >
-                        <FormattedMessage
-                          id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.snapshotRestoreDocsButtonLabel"
-                          defaultMessage="snapshot and restore APIs"
-                        />
-                      </EuiLink>
-                    ),
-                  }}
-                />
-              </p>
-            </EuiCallOut>
-            <EuiSpacer />
-          </Fragment>
-        )}
-
-        <EuiPageContent>
-          <EuiPageContentBody>
-            {loadingState === LoadingState.Error ? (
-              <LoadingErrorBanner loadingError={loadingError} />
-            ) : deprecations && deprecations.length > 0 ? (
-              <Fragment>
-                <CheckupControls
-                  allDeprecations={deprecations}
-                  loadingState={loadingState}
-                  loadData={refreshCheckupData}
-                  currentFilter={currentFilter}
-                  onFilterChange={this.changeFilter}
-                  onSearchChange={this.changeSearch}
-                  availableGroupByOptions={this.availableGroupByOptions()}
-                  currentGroupBy={currentGroupBy}
-                  onGroupByChange={this.changeGroupBy}
-                />
-                <EuiSpacer />
-                {this.renderCheckupData()}
-              </Fragment>
-            ) : (
-              <EuiEmptyPrompt
-                iconType="faceHappy"
-                title={
-                  <h2>
-                    <FormattedMessage
-                      id="xpack.upgradeAssistant.checkupTab.noIssues.noIssuesTitle"
-                      defaultMessage="All clear!"
-                    />
-                  </h2>
-                }
-                body={
-                  <Fragment>
-                    <p data-test-subj="upgradeAssistantIssueSummary">
-                      <FormattedMessage
-                        id="xpack.upgradeAssistant.checkupTab.noIssues.noIssuesLabel"
-                        defaultMessage="You have no {strongCheckupLabel} issues."
-                        values={{
-                          strongCheckupLabel: <strong>{checkupLabel}</strong>,
-                        }}
-                      />
-                    </p>
-                    <p>
-                      <FormattedMessage
-                        id="xpack.upgradeAssistant.checkupTab.noIssues.nextStepsDetail"
-                        defaultMessage="Check the {overviewTabButton} for next steps."
-                        values={{
-                          overviewTabButton: (
-                            <EuiLink onClick={() => setSelectedTabIndex(0)}>
-                              <FormattedMessage
-                                id="xpack.upgradeAssistant.checkupTab.noIssues.nextStepsDetail.overviewTabButtonLabel"
-                                defaultMessage="Overview tab"
-                              />
-                            </EuiLink>
-                          ),
-                        }}
-                      />
-                    </p>
-                  </Fragment>
-                }
-              />
-            )}
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </Fragment>
-    );
-  }
-
-  private changeFilter = (filter: LevelFilterOption) => {
-    this.setState({ currentFilter: filter });
+  const changeFilter = (filter: LevelFilterOption) => {
+    setCurrentFilter(filter);
   };
 
-  private changeSearch = (search: string) => {
-    this.setState({ search });
+  const changeSearch = (newSearch: string) => {
+    setSearch(newSearch);
   };
 
-  private changeGroupBy = (groupBy: GroupByOption) => {
-    this.setState({ currentGroupBy: groupBy });
+  const changeGroupBy = (groupBy: GroupByOption) => {
+    setCurrentGroupBy(groupBy);
   };
 
-  private availableGroupByOptions() {
-    const { deprecations } = this.props;
-
+  const availableGroupByOptions = () => {
     if (!deprecations) {
       return [];
     }
 
     return Object.keys(GroupByOption).filter((opt) => find(deprecations, opt)) as GroupByOption[];
-  }
-
-  private renderCheckupData() {
-    const { deprecations } = this.props;
-    const { currentFilter, currentGroupBy, search } = this.state;
+  };
 
+  const renderCheckupData = () => {
     return (
       <GroupedDeprecations
         currentGroupBy={currentGroupBy}
@@ -233,5 +87,134 @@ export class CheckupTab extends UpgradeAssistantTabComponent<CheckupTabProps, Ch
         allDeprecations={deprecations}
       />
     );
-  }
-}
+  };
+
+  return (
+    <>
+      <EuiSpacer />
+      <EuiText grow={false}>
+        <p>
+          <FormattedMessage
+            id="xpack.upgradeAssistant.checkupTab.tabDetail"
+            defaultMessage="These {strongCheckupLabel} issues need your attention. Resolve them before upgrading to Elasticsearch {nextEsVersion}."
+            values={{
+              strongCheckupLabel: <strong>{checkupLabel}</strong>,
+              nextEsVersion: `${NEXT_MAJOR_VERSION}.x`,
+            }}
+          />
+        </p>
+      </EuiText>
+
+      <EuiSpacer />
+
+      {alertBanner && (
+        <>
+          {alertBanner}
+          <EuiSpacer />
+        </>
+      )}
+
+      {showBackupWarning && (
+        <>
+          <EuiCallOut
+            title={
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutTitle"
+                defaultMessage="Back up your indices now"
+              />
+            }
+            color="warning"
+            iconType="help"
+          >
+            <p>
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.calloutDetail"
+                defaultMessage="Back up your data using the {snapshotRestoreDocsButton}."
+                values={{
+                  snapshotRestoreDocsButton: (
+                    <EuiLink
+                      href={`${esDocBasePath}/snapshot-restore.html`}
+                      target="_blank"
+                      external
+                    >
+                      <FormattedMessage
+                        id="xpack.upgradeAssistant.checkupTab.backUpCallout.calloutBody.snapshotRestoreDocsButtonLabel"
+                        defaultMessage="snapshot and restore APIs"
+                      />
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </p>
+          </EuiCallOut>
+          <EuiSpacer />
+        </>
+      )}
+
+      <EuiPageContent>
+        <EuiPageContentBody>
+          {loadingState === LoadingState.Error ? (
+            <LoadingErrorBanner loadingError={loadingError} />
+          ) : deprecations && deprecations.length > 0 ? (
+            <>
+              <CheckupControls
+                allDeprecations={deprecations}
+                loadingState={loadingState}
+                loadData={refreshCheckupData}
+                currentFilter={currentFilter}
+                onFilterChange={changeFilter}
+                onSearchChange={changeSearch}
+                availableGroupByOptions={availableGroupByOptions()}
+                currentGroupBy={currentGroupBy}
+                onGroupByChange={changeGroupBy}
+              />
+              <EuiSpacer />
+              {renderCheckupData()}
+            </>
+          ) : (
+            <EuiEmptyPrompt
+              iconType="faceHappy"
+              title={
+                <h2>
+                  <FormattedMessage
+                    id="xpack.upgradeAssistant.checkupTab.noIssues.noIssuesTitle"
+                    defaultMessage="All clear!"
+                  />
+                </h2>
+              }
+              body={
+                <>
+                  <p data-test-subj="upgradeAssistantIssueSummary">
+                    <FormattedMessage
+                      id="xpack.upgradeAssistant.checkupTab.noIssues.noIssuesLabel"
+                      defaultMessage="You have no {strongCheckupLabel} issues."
+                      values={{
+                        strongCheckupLabel: <strong>{checkupLabel}</strong>,
+                      }}
+                    />
+                  </p>
+                  <p>
+                    <FormattedMessage
+                      id="xpack.upgradeAssistant.checkupTab.noIssues.nextStepsDetail"
+                      defaultMessage="Check the {overviewTabButton} for next steps."
+                      values={{
+                        overviewTabButton: (
+                          <EuiLink onClick={() => setSelectedTabIndex(0)}>
+                            <FormattedMessage
+                              id="xpack.upgradeAssistant.checkupTab.noIssues.nextStepsDetail.overviewTabButtonLabel"
+                              defaultMessage="Overview tab"
+                            />
+                          </EuiLink>
+                        ),
+                      }}
+                    />
+                  </p>
+                </>
+              }
+            />
+          )}
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </>
+  );
+};

x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/deprecations/reindex/flyout/warning_step.test.tsx

@@ -11,6 +11,19 @@ import React from 'react';
 import { ReindexWarning } from '../../../../../../../../common/types';
 import { idForWarning, WarningsFlyoutStep } from './warnings_step';
 
+jest.mock('../../../../../../app_context', () => {
+  return {
+    useAppContext: () => {
+      return {
+        docLinks: {
+          DOC_LINK_VERSION: 'current',
+          ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
+        },
+      };
+    },
+  };
+});
+
 describe('WarningsFlyoutStep', () => {
   const defaultProps = {
     advanceNextStep: jest.fn(),

x-pack/plugins/upgrade_assistant/public/application/components/tabs/checkup/deprecations/reindex/flyout/warnings_step.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React, { useState } from 'react';
 
 import {
   EuiButton,
@@ -21,6 +21,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { useAppContext } from '../../../../../../app_context';
 import { ReindexWarning } from '../../../../../../../../common/types';
 
 interface CheckedIds {
@@ -37,7 +38,7 @@ const WarningCheckbox: React.FunctionComponent<{
   documentationUrl: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }> = ({ checkedIds, warning, label, onChange, description, documentationUrl }) => (
-  <Fragment>
+  <>
     <EuiText>
       <EuiCheckbox
         id={idForWarning(warning)}
@@ -48,7 +49,7 @@ const WarningCheckbox: React.FunctionComponent<{
       <p className="upgWarningsStep__warningDescription">
         {description}
         <br />
-        <EuiLink href={documentationUrl} target="_blank">
+        <EuiLink href={documentationUrl} target="_blank" external>
           <FormattedMessage
             id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.documentationLinkLabel"
             defaultMessage="Documentation"
@@ -58,7 +59,7 @@ const WarningCheckbox: React.FunctionComponent<{
     </EuiText>
 
     <EuiSpacer />
-  </Fragment>
+  </>
 );
 
 interface WarningsConfirmationFlyoutProps {
@@ -68,175 +69,169 @@ interface WarningsConfirmationFlyoutProps {
   advanceNextStep: () => void;
 }
 
-interface WarningsConfirmationFlyoutState {
-  checkedIds: CheckedIds;
-}
-
 /**
  * Displays warning text about destructive changes required to reindex this index. The user
  * must acknowledge each change before being allowed to proceed.
  */
-export class WarningsFlyoutStep extends React.Component<
-  WarningsConfirmationFlyoutProps,
-  WarningsConfirmationFlyoutState
-> {
-  constructor(props: WarningsConfirmationFlyoutProps) {
-    super(props);
+export const WarningsFlyoutStep: React.FunctionComponent<WarningsConfirmationFlyoutProps> = ({
+  warnings,
+  renderGlobalCallouts,
+  closeFlyout,
+  advanceNextStep,
+}) => {
+  const [checkedIds, setCheckedIds] = useState<CheckedIds>(
+    warnings.reduce((initialCheckedIds, warning) => {
+      initialCheckedIds[idForWarning(warning)] = false;
+      return initialCheckedIds;
+    }, {} as { [id: string]: boolean })
+  );
 
-    this.state = {
-      checkedIds: props.warnings.reduce((checkedIds, warning) => {
-        checkedIds[idForWarning(warning)] = false;
-        return checkedIds;
-      }, {} as { [id: string]: boolean }),
-    };
-  }
+  // Do not allow to proceed until all checkboxes are checked.
+  const blockAdvance = Object.values(checkedIds).filter((v) => v).length < warnings.length;
 
-  public render() {
-    const { warnings, closeFlyout, advanceNextStep, renderGlobalCallouts } = this.props;
-    const { checkedIds } = this.state;
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const optionId = e.target.id;
 
-    // Do not allow to proceed until all checkboxes are checked.
-    const blockAdvance = Object.values(checkedIds).filter((v) => v).length < warnings.length;
+    setCheckedIds((prev) => ({
+      ...prev,
+      ...{
+        [optionId]: !checkedIds[optionId],
+      },
+    }));
+  };
 
-    return (
-      <Fragment>
-        <EuiFlyoutBody>
-          {renderGlobalCallouts()}
-          <EuiCallOut
-            title={
+  const { docLinks } = useAppContext();
+  const { ELASTIC_WEBSITE_URL } = docLinks;
+  const esDocBasePath = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference`;
+  const observabilityDocBasePath = `${ELASTIC_WEBSITE_URL}guide/en/observability`;
+
+  // TODO: Revisit warnings returned for 8.0 upgrade; many of these are likely obselete now
+  return (
+    <>
+      <EuiFlyoutBody>
+        {renderGlobalCallouts()}
+        <EuiCallOut
+          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>
+            <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) && (
+          <WarningCheckbox
+            checkedIds={checkedIds}
+            onChange={onChange}
+            warning={ReindexWarning.allField}
+            label={
               <FormattedMessage
-                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutTitle"
-                defaultMessage="This index requires destructive changes that can't be undone"
+                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.allFieldWarningTitle"
+                defaultMessage="{allField} will be removed"
+                values={{
+                  allField: <EuiCode>_all</EuiCode>,
+                }}
               />
             }
-            color="danger"
-            iconType="alert"
-          >
-            <p>
+            description={
               <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) && (
-            <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
+                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>,
-                  }}
-                />
-              }
-              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"
-            />
-          )}
+                values={{
+                  allField: <EuiCode>_all</EuiCode>,
+                }}
+              />
+            }
+            documentationUrl={`${esDocBasePath}/6.0/breaking_60_mappings_changes.html#_the_literal__all_literal_meta_field_is_now_disabled_by_default`}
+          />
+        )}
 
-          {warnings.includes(ReindexWarning.apmReindex) && (
-            <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"
-                />
-              }
-              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.
+        {warnings.includes(ReindexWarning.apmReindex) && (
+          <WarningCheckbox
+            checkedIds={checkedIds}
+            onChange={onChange}
+            warning={ReindexWarning.apmReindex}
+            label={
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.apmReindexWarningTitle"
+                defaultMessage="This index will be converted to ECS format"
+              />
+            }
+            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"
-            />
-          )}
+              />
+            }
+            documentationUrl={`${observabilityDocBasePath}/master/whats-new.html`}
+          />
+        )}
 
-          {warnings.includes(ReindexWarning.booleanFields) && (
-            <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}
+        {warnings.includes(ReindexWarning.booleanFields) && (
+          <WarningCheckbox
+            checkedIds={checkedIds}
+            onChange={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>&quot;yes&quot;</EuiCode>,
-                    on: <EuiCode>&quot;on&quot;</EuiCode>,
-                    one: <EuiCode>1</EuiCode>,
-                  }}
-                />
-              }
-              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">
-                <FormattedMessage
-                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.cancelButtonLabel"
-                  defaultMessage="Cancel"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton fill color="danger" onClick={advanceNextStep} disabled={blockAdvance}>
-                <FormattedMessage
-                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel"
-                  defaultMessage="Continue with reindex"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlyoutFooter>
-      </Fragment>
-    );
-  }
-
-  private onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const optionId = e.target.id;
-    const nextCheckedIds = {
-      ...this.state.checkedIds,
-      ...{
-        [optionId]: !this.state.checkedIds[optionId],
-      },
-    };
-
-    this.setState({ checkedIds: nextCheckedIds });
-  };
-}
+                values={{
+                  true: <EuiCode>true</EuiCode>,
+                  false: <EuiCode>false</EuiCode>,
+                  yes: <EuiCode>&quot;yes&quot;</EuiCode>,
+                  on: <EuiCode>&quot;on&quot;</EuiCode>,
+                  one: <EuiCode>1</EuiCode>,
+                }}
+              />
+            }
+            documentationUrl={`${esDocBasePath}/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">
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.cancelButtonLabel"
+                defaultMessage="Cancel"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton fill color="danger" onClick={advanceNextStep} disabled={blockAdvance}>
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel"
+                defaultMessage="Continue with reindex"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </>
+  );
+};

x-pack/plugins/upgrade_assistant/public/application/components/tabs/overview/steps.tsx

@@ -54,7 +54,7 @@ const WAIT_FOR_RELEASE_STEP = {
 
 // Swap in this step for the one above it on the last minor release.
 // @ts-ignore
-const START_UPGRADE_STEP = (isCloudEnabled: boolean) => ({
+const START_UPGRADE_STEP = (isCloudEnabled: boolean, esDocBasePath: string) => ({
   title: i18n.translate('xpack.upgradeAssistant.overviewTab.steps.startUpgradeStep.stepTitle', {
     defaultMessage: 'Start your upgrade',
   }),
@@ -73,10 +73,7 @@ const START_UPGRADE_STEP = (isCloudEnabled: boolean) => ({
               defaultMessage="Follow {instructionButton} to start your upgrade."
               values={{
                 instructionButton: (
-                  <EuiLink
-                    href="https://www.elastic.co/guide/en/elasticsearch/reference/current/setup-upgrade.html"
-                    target="_blank"
-                  >
+                  <EuiLink href={`${esDocBasePath}/setup-upgrade.html`} target="_blank" external>
                     <FormattedMessage
                       id="xpack.upgradeAssistant.overviewTab.steps.startUpgradeStepOnPrem.stepDetail.instructionButtonLabel"
                       defaultMessage="these instructions"
@@ -104,7 +101,10 @@ export const StepsUI: FunctionComponent<UpgradeAssistantTabProps & ReactIntl.Inj
   }, {} as { [checkupType: string]: number });
 
   // Uncomment when START_UPGRADE_STEP is in use!
-  const { http /* , isCloudEnabled */ } = useAppContext();
+  const { docLinks, http /* , isCloudEnabled */ } = useAppContext();
+
+  const { DOC_LINK_VERSION, ELASTIC_WEBSITE_URL } = docLinks;
+  const esDocBasePath = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}`;
 
   return (
     <EuiSteps
@@ -237,8 +237,9 @@ export const StepsUI: FunctionComponent<UpgradeAssistantTabProps & ReactIntl.Inj
                     values={{
                       deprecationLogsDocButton: (
                         <EuiLink
-                          href="https://www.elastic.co/guide/en/elasticsearch/reference/current/logging.html#deprecation-logging"
+                          href={`${esDocBasePath}/logging.html#deprecation-logging`}
                           target="_blank"
+                          external
                         >
                           <FormattedMessage
                             id="xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.deprecationLogs.deprecationLogsDocButtonLabel"
@@ -270,7 +271,7 @@ export const StepsUI: FunctionComponent<UpgradeAssistantTabProps & ReactIntl.Inj
 
         // Swap in START_UPGRADE_STEP on the last minor release.
         WAIT_FOR_RELEASE_STEP,
-        // START_UPGRADE_STEP(isCloudEnabled),
+        // START_UPGRADE_STEP(isCloudEnabled, esDocBasePath),
       ]}
     />
   );