[8.2] Fix broken/missing APM app links and use docLinks service (#128326) (#131656)

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Giorgos Bamparopoulos <georgios.bamparopoulos@elastic.co>

packages/kbn-doc-links/src/get_doc_links.ts

@@ -47,6 +47,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
       metaData: `${APM_DOCS}guide/${DOC_LINK_VERSION}/data-model-metadata.html`,
       overview: `${APM_DOCS}guide/${DOC_LINK_VERSION}/apm-overview.html`,
       tailSamplingPolicies: `${APM_DOCS}guide/${DOC_LINK_VERSION}/configure-tail-based-sampling.html`,
+      elasticAgent: `${APM_DOCS}guide/${DOC_LINK_VERSION}/upgrade-to-apm-integration.html`,
     },
     canvas: {
       guide: `${KIBANA_DOCS}canvas.html`,

packages/kbn-doc-links/src/types.ts

@@ -33,6 +33,7 @@ export interface DocLinks {
     readonly metaData: string;
     readonly overview: string;
     readonly tailSamplingPolicies: string;
+    readonly elasticAgent: string;
   };
   readonly canvas: {
     readonly guide: string;

x-pack/plugins/apm/public/components/app/settings/custom_link/empty_prompt.tsx

@@ -5,16 +5,19 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { CreateCustomLinkButton } from './create_custom_link_button';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 
 export function EmptyPrompt({
   onCreateCustomLinkClick,
 }: {
   onCreateCustomLinkClick: () => void;
 }) {
+  const { docLinks } = useApmPluginContext().core;
   return (
     <EuiEmptyPrompt
       data-test-subj="customLinksEmptyPrompt"
@@ -29,12 +32,25 @@ export function EmptyPrompt({
       }
       body={
         <>
-          <p>
-            {i18n.translate('xpack.apm.settings.customLink.emptyPromptText', {
-              defaultMessage:
-                "Let's change that! You can add custom links to the Actions context menu by the transaction details for each service. Create a helpful link to your company's support portal or open a new bug report. Learn more about it in our docs.",
-            })}
-          </p>
+          <EuiText color="subdued">
+            <FormattedMessage
+              id="xpack.apm.settings.customLink.emptyPromptText"
+              defaultMessage="Let's change that! You can add custom links to the Actions menu by the transaction details for each service. Create a helpful link to your company's support portal or open a bug report. Need more ideas? Check out {customLinkDocLinkText}."
+              values={{
+                customLinkDocLinkText: (
+                  <EuiLink
+                    target="_blank"
+                    href={docLinks.links.apm.customLinks}
+                  >
+                    {i18n.translate(
+                      'xpack.apm.settings.customLink.emptyPromptText.customLinkDocLinkText',
+                      { defaultMessage: 'docs' }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
         </>
       }
       actions={<CreateCustomLinkButton onClick={onCreateCustomLinkClick} />}

x-pack/plugins/apm/public/components/app/settings/custom_link/index.test.tsx

@@ -23,6 +23,7 @@ import {
   expectTextsNotInDocument,
 } from '../../../../utils/test_helpers';
 import * as saveCustomLink from './create_edit_custom_link_flyout/save_custom_link';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 
 const data = {
   customLinks: [
@@ -73,9 +74,11 @@ describe('CustomLink', () => {
     it('shows when no link is available', () => {
       const component = render(
         <MockApmPluginContextWrapper>
-          <LicenseContext.Provider value={goldLicense}>
-            <CustomLinkOverview />
-          </LicenseContext.Provider>
+          <IntlProvider locale="en">
+            <LicenseContext.Provider value={goldLicense}>
+              <CustomLinkOverview />
+            </LicenseContext.Provider>
+          </IntlProvider>
         </MockApmPluginContextWrapper>
       );
       expectTextsInDocument(component, ['No links found.']);
@@ -360,9 +363,11 @@ describe('CustomLink', () => {
       });
       const component = render(
         <LicenseContext.Provider value={license}>
-          <MockApmPluginContextWrapper>
-            <CustomLinkOverview />
-          </MockApmPluginContextWrapper>
+          <IntlProvider locale="en">
+            <MockApmPluginContextWrapper>
+              <CustomLinkOverview />
+            </MockApmPluginContextWrapper>
+          </IntlProvider>
         </LicenseContext.Provider>
       );
       expectTextsNotInDocument(component, ['Start free 30-day trial']);
@@ -375,9 +380,11 @@ describe('CustomLink', () => {
 
       const { getByTestId } = render(
         <LicenseContext.Provider value={goldLicense}>
-          <MockApmPluginContextWrapper value={mockContext}>
-            <CustomLinkOverview />
-          </MockApmPluginContextWrapper>
+          <IntlProvider locale="en">
+            <MockApmPluginContextWrapper value={mockContext}>
+              <CustomLinkOverview />
+            </MockApmPluginContextWrapper>
+          </IntlProvider>
         </LicenseContext.Provider>
       );
       const createButton = getByTestId('createButton') as HTMLButtonElement;
@@ -389,9 +396,11 @@ describe('CustomLink', () => {
 
       const { queryAllByText } = render(
         <LicenseContext.Provider value={goldLicense}>
-          <MockApmPluginContextWrapper value={mockContext}>
-            <CustomLinkOverview />
-          </MockApmPluginContextWrapper>
+          <IntlProvider locale="en">
+            <MockApmPluginContextWrapper value={mockContext}>
+              <CustomLinkOverview />
+            </MockApmPluginContextWrapper>
+          </IntlProvider>
         </LicenseContext.Provider>
       );
 

x-pack/plugins/apm/public/components/app/settings/schema/schema_overview.tsx

@@ -11,6 +11,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiLink,
   EuiLoadingSpinner,
   EuiSpacer,
   EuiText,
@@ -21,11 +22,11 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import semverLt from 'semver/functions/lt';
 import { PackagePolicy } from '../../../../../../fleet/common/types';
-import { ElasticDocsLink } from '../../../shared/links/elastic_docs_link';
 import rocketLaunchGraphic from './blog_rocket_720x420.png';
 import { MigrationInProgressPanel } from './migration_in_progress_panel';
 import { UpgradeAvailableCard } from './migrated/upgrade_available_card';
 import { SuccessfulMigrationCard } from './migrated/successful_migration_card';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 
 interface Props {
   onSwitch: () => void;
@@ -184,6 +185,7 @@ export function SchemaOverview({
 }
 
 export function SchemaOverviewHeading() {
+  const { docLinks } = useApmPluginContext().core;
   return (
     <>
       <EuiText color="subdued">
@@ -208,16 +210,12 @@ export function SchemaOverviewHeading() {
               </strong>
             ),
             elasticAgentDocLink: (
-              <ElasticDocsLink
-                section="/apm/server"
-                path="/apm-integration-data-streams.html"
-                target="_blank"
-              >
+              <EuiLink target="_blank" href={docLinks.links.apm.elasticAgent}>
                 {i18n.translate(
                   'xpack.apm.settings.schema.descriptionText.elasticAgentDocLinkText',
                   { defaultMessage: 'Elastic Agent' }
                 )}
-              </ElasticDocsLink>
+              </EuiLink>
             ),
           }}
         />

x-pack/plugins/translations/translations/fr-FR.json

@@ -8000,7 +8000,6 @@
     "xpack.apm.settings.customLink.delete": "Supprimer",
     "xpack.apm.settings.customLink.delete.failed": "Impossible de supprimer le lien personnalisé",
     "xpack.apm.settings.customLink.delete.successed": "Lien personnalisé supprimé.",
-    "xpack.apm.settings.customLink.emptyPromptText": "Nous allons y remédier ! Vous pouvez ajouter des liens personnalisés au menu contextuel Actions à partir des détails de transaction de chaque service. Créez un lien utile vers le portail d'assistance de votre société, ou ouvrez un nouveau rapport de bug. Pour en savoir plus, consultez notre documentation.",
     "xpack.apm.settings.customLink.emptyPromptTitle": "Aucun lien trouvé.",
     "xpack.apm.settings.customLink.flyout.action.title": "Lien",
     "xpack.apm.settings.customLink.flyout.close": "Fermer",

x-pack/plugins/translations/translations/ja-JP.json

@@ -8098,7 +8098,6 @@
     "xpack.apm.settings.customLink.delete": "削除",
     "xpack.apm.settings.customLink.delete.failed": "カスタムリンクを削除できませんでした",
     "xpack.apm.settings.customLink.delete.successed": "カスタムリンクを削除しました。",
-    "xpack.apm.settings.customLink.emptyPromptText": "変更しましょう。サービスごとのトランザクションの詳細でアクションコンテキストメニューにカスタムリンクを追加できます。自社のサポートポータルへの役立つリンクを作成するか、新しい不具合レポートを発行します。詳細はドキュメントをご覧ください。",
     "xpack.apm.settings.customLink.emptyPromptTitle": "リンクが見つかりません。",
     "xpack.apm.settings.customLink.flyout.action.title": "リンク",
     "xpack.apm.settings.customLink.flyout.close": "閉じる",

x-pack/plugins/translations/translations/zh-CN.json

@@ -8117,7 +8117,6 @@
     "xpack.apm.settings.customLink.delete": "删除",
     "xpack.apm.settings.customLink.delete.failed": "无法删除定制链接",
     "xpack.apm.settings.customLink.delete.successed": "已删除定制链接。",
-    "xpack.apm.settings.customLink.emptyPromptText": "让我们改动一下！可以通过每个服务的事务详情将定制链接添加到“操作”上下文菜单。创建指向公司支持门户或用于提交新错误报告的有用链接。在我们的文档中详细了解。",
     "xpack.apm.settings.customLink.emptyPromptTitle": "未找到链接。",
     "xpack.apm.settings.customLink.flyout.action.title": "链接",
     "xpack.apm.settings.customLink.flyout.close": "关闭",