From fbe553f6eedc9da1aa58a44f5b236c20ded688bc Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 15 Oct 2021 15:56:06 -0700
Subject: [PATCH] Extract common DeprecationFlyoutLearnMoreLink component and
 change wording to 'Learn more'. (#115117)

---
 .../default_deprecation_flyout.test.ts        |  5 +++-
 .../index_settings_deprecation_flyout.test.ts | 11 ++++++---
 .../ml_snapshots_deprecation_flyout.test.ts   |  9 ++++---
 .../deprecation_types/default/flyout.tsx      | 13 ++--------
 .../index_settings/flyout.tsx                 | 13 ++--------
 .../deprecation_types/ml_snapshots/flyout.tsx | 14 +++--------
 .../deprecation_details_flyout.tsx            | 14 ++---------
 .../deprecation_flyout_learn_more_link.tsx    | 24 +++++++++++++++++++
 .../application/components/shared/index.ts    |  1 +
 9 files changed, 52 insertions(+), 52 deletions(-)
 create mode 100644 x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_flyout_learn_more_link.tsx

diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/default_deprecation_flyout.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/default_deprecation_flyout.test.ts
index 1975d0abaf11d..fdd8a1c993937 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/default_deprecation_flyout.test.ts
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/default_deprecation_flyout.test.ts
@@ -35,7 +35,7 @@ describe('Default deprecation flyout', () => {
     testBed.component.update();
   });
 
-  it('renders a flyout with deprecation details', async () => {
+  test('renders a flyout with deprecation details', async () => {
     const multiFieldsDeprecation = esDeprecationsMockResponse.deprecations[2];
     const { actions, find, exists } = testBed;
 
@@ -45,6 +45,9 @@ describe('Default deprecation flyout', () => {
     expect(find('defaultDeprecationDetails.flyoutTitle').text()).toContain(
       multiFieldsDeprecation.message
     );
+    expect(find('defaultDeprecationDetails.documentationLink').props().href).toBe(
+      multiFieldsDeprecation.url
+    );
     expect(find('defaultDeprecationDetails.flyoutDescription').text()).toContain(
       multiFieldsDeprecation.index
     );
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts
index 145cea24dde8b..f62d24081ed56 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts
@@ -33,16 +33,21 @@ describe('Index settings deprecation flyout', () => {
       testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
     });
 
-    const { find, exists, actions, component } = testBed;
-
+    const { actions, component } = testBed;
     component.update();
-
     await actions.table.clickDeprecationRowAt('indexSetting', 0);
+  });
+
+  test('renders a flyout with deprecation details', async () => {
+    const { find, exists } = testBed;
 
     expect(exists('indexSettingsDetails')).toBe(true);
     expect(find('indexSettingsDetails.flyoutTitle').text()).toContain(
       indexSettingDeprecation.message
     );
+    expect(find('indexSettingsDetails.documentationLink').props().href).toBe(
+      indexSettingDeprecation.url
+    );
     expect(exists('removeSettingsPrompt')).toBe(true);
   });
 
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts
index 6bcb3fa95985c..b24cd5a69a28e 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts
@@ -35,16 +35,19 @@ describe('Machine learning deprecation flyout', () => {
       testBed = await setupElasticsearchPage({ isReadOnlyMode: false });
     });
 
-    const { find, exists, actions, component } = testBed;
-
+    const { actions, component } = testBed;
     component.update();
-
     await actions.table.clickDeprecationRowAt('mlSnapshot', 0);
+  });
+
+  test('renders a flyout with deprecation details', async () => {
+    const { find, exists } = testBed;
 
     expect(exists('mlSnapshotDetails')).toBe(true);
     expect(find('mlSnapshotDetails.flyoutTitle').text()).toContain(
       'Upgrade or delete model snapshot'
     );
+    expect(find('mlSnapshotDetails.documentationLink').props().href).toBe(mlDeprecation.url);
   });
 
   describe('upgrade snapshots', () => {
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx
index c436d585db9ae..6ec05b0c4fc99 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx
@@ -17,12 +17,11 @@ import {
   EuiTitle,
   EuiText,
   EuiTextColor,
-  EuiLink,
   EuiSpacer,
 } from '@elastic/eui';
 
 import { EnrichedDeprecationInfo } from '../../../../../../common/types';
-import { DeprecationBadge } from '../../../shared';
+import { DeprecationFlyoutLearnMoreLink, DeprecationBadge } from '../../../shared';
 
 export interface DefaultDeprecationFlyoutProps {
   deprecation: EnrichedDeprecationInfo;
@@ -40,12 +39,6 @@ const i18nTexts = {
         },
       }
     ),
-  learnMoreLinkLabel: i18n.translate(
-    'xpack.upgradeAssistant.esDeprecations.deprecationDetailsFlyout.learnMoreLinkLabel',
-    {
-      defaultMessage: 'Learn more about this deprecation',
-    }
-  ),
   closeButtonLabel: i18n.translate(
     'xpack.upgradeAssistant.esDeprecations.deprecationDetailsFlyout.closeButtonLabel',
     {
@@ -80,9 +73,7 @@ export const DefaultDeprecationFlyout = ({
         <EuiText>
           <p className="eui-textBreakWord">{details}</p>
           <p>
-            <EuiLink target="_blank" href={url}>
-              {i18nTexts.learnMoreLinkLabel}
-            </EuiLink>
+            <DeprecationFlyoutLearnMoreLink documentationUrl={url} />
           </p>
         </EuiText>
       </EuiFlyoutBody>
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx
index 3c19268a293f0..d0aac8ee922f7 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx
@@ -19,7 +19,6 @@ import {
   EuiTitle,
   EuiText,
   EuiTextColor,
-  EuiLink,
   EuiSpacer,
   EuiCallOut,
 } from '@elastic/eui';
@@ -30,7 +29,7 @@ import {
   ResponseError,
 } from '../../../../../../common/types';
 import type { Status } from '../../../types';
-import { DeprecationBadge } from '../../../shared';
+import { DeprecationFlyoutLearnMoreLink, DeprecationBadge } from '../../../shared';
 
 export interface RemoveIndexSettingsFlyoutProps {
   deprecation: EnrichedDeprecationInfo;
@@ -53,12 +52,6 @@ const i18nTexts = {
         },
       }
     ),
-  learnMoreLinkLabel: i18n.translate(
-    'xpack.upgradeAssistant.esDeprecations.removeSettingsFlyout.learnMoreLinkLabel',
-    {
-      defaultMessage: 'Learn more about this deprecation',
-    }
-  ),
   removeButtonLabel: i18n.translate(
     'xpack.upgradeAssistant.esDeprecations.removeSettingsFlyout.removeButtonLabel',
     {
@@ -146,9 +139,7 @@ export const RemoveIndexSettingsFlyout = ({
         <EuiText>
           <p>{details}</p>
           <p>
-            <EuiLink target="_blank" href={url}>
-              {i18nTexts.learnMoreLinkLabel}
-            </EuiLink>
+            <DeprecationFlyoutLearnMoreLink documentationUrl={url} />
           </p>
         </EuiText>
 
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx
index 4e3d77ba72ae8..c4145bf3d4146 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx
@@ -25,9 +25,9 @@ import {
 } from '@elastic/eui';
 
 import { EnrichedDeprecationInfo } from '../../../../../../common/types';
-import { DeprecationBadge } from '../../../shared';
-import { MlSnapshotContext } from './context';
 import { useAppContext } from '../../../../app_context';
+import { DeprecationFlyoutLearnMoreLink, DeprecationBadge } from '../../../shared';
+import { MlSnapshotContext } from './context';
 import { SnapshotState } from './use_snapshot_state';
 
 export interface FixSnapshotsFlyoutProps extends MlSnapshotContext {
@@ -93,12 +93,6 @@ const i18nTexts = {
       defaultMessage: 'Error upgrading snapshot',
     }
   ),
-  learnMoreLinkLabel: i18n.translate(
-    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.learnMoreLinkLabel',
-    {
-      defaultMessage: 'Learn more about this deprecation',
-    }
-  ),
   upgradeModeEnabledErrorTitle: i18n.translate(
     'xpack.upgradeAssistant.esDeprecations.mlSnapshots.upgradeModeEnabledErrorTitle',
     {
@@ -229,9 +223,7 @@ export const FixSnapshotsFlyout = ({
         <EuiText>
           <p>{deprecation.details}</p>
           <p>
-            <EuiLink target="_blank" href={deprecation.url}>
-              {i18nTexts.learnMoreLinkLabel}
-            </EuiLink>
+            <DeprecationFlyoutLearnMoreLink documentationUrl={deprecation.url} />
           </p>
         </EuiText>
       </EuiFlyoutBody>
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx
index 577354b35fa4e..5d10350caad9e 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx
@@ -20,12 +20,11 @@ import {
   EuiTitle,
   EuiText,
   EuiCallOut,
-  EuiLink,
   EuiSpacer,
 } from '@elastic/eui';
 
+import { DeprecationFlyoutLearnMoreLink, DeprecationBadge } from '../shared';
 import type { DeprecationResolutionState, KibanaDeprecationDetails } from './kibana_deprecations';
-import { DeprecationBadge } from '../shared';
 
 import './_deprecation_details_flyout.scss';
 
@@ -37,12 +36,6 @@ export interface DeprecationDetailsFlyoutProps {
 }
 
 const i18nTexts = {
-  learnMoreLinkLabel: i18n.translate(
-    'xpack.upgradeAssistant.kibanaDeprecations.flyout.learnMoreLinkLabel',
-    {
-      defaultMessage: 'Learn more about this deprecation',
-    }
-  ),
   closeButtonLabel: i18n.translate(
     'xpack.upgradeAssistant.kibanaDeprecations.flyout.closeButtonLabel',
     {
@@ -162,12 +155,9 @@ export const DeprecationDetailsFlyout = ({
 
         <EuiText>
           <p className="eui-textBreakWord">{message}</p>
-
           {documentationUrl && (
             <p>
-              <EuiLink target="_blank" data-test-subj="documentationLink" href={documentationUrl}>
-                {i18nTexts.learnMoreLinkLabel}
-              </EuiLink>
+              <DeprecationFlyoutLearnMoreLink documentationUrl={documentationUrl} />
             </p>
           )}
         </EuiText>
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_flyout_learn_more_link.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_flyout_learn_more_link.tsx
new file mode 100644
index 0000000000000..da8c83597f7e2
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_flyout_learn_more_link.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiLink } from '@elastic/eui';
+
+interface Props {
+  documentationUrl?: string;
+}
+
+export const DeprecationFlyoutLearnMoreLink = ({ documentationUrl }: Props) => {
+  return (
+    <EuiLink target="_blank" data-test-subj="documentationLink" href={documentationUrl}>
+      {i18n.translate('xpack.upgradeAssistant.deprecationFlyout.learnMoreLinkLabel', {
+        defaultMessage: 'Learn more',
+      })}
+    </EuiLink>
+  );
+};
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts b/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts
index 0efc91035001a..34496e1e8eb55 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts
@@ -9,4 +9,5 @@ export { NoDeprecationsPrompt } from './no_deprecations';
 export { DeprecationCount } from './deprecation_count';
 export { DeprecationBadge } from './deprecation_badge';
 export { DeprecationsPageLoadingError } from './deprecations_page_loading_error';
+export { DeprecationFlyoutLearnMoreLink } from './deprecation_flyout_learn_more_link';
 export { LevelInfoTip } from './level_info_tip';