Extract common DeprecationFlyoutLearnMoreLink component and change wording to 'Learn more'.

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
     );

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);
   });
 

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', () => {

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>

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>
 

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>

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>

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>
+  );
+};

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';