[APM] Use doc link service instead of ElasticDocsLink (#109027) (#110873)

docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md

@@ -9,6 +9,10 @@
 ```typescript
 readonly links: {
         readonly settings: string;
+        readonly apm: {
+            readonly kibanaSettings: string;
+            readonly supportedServiceMaps: string;
+        };
         readonly canvas: {
             readonly guide: string;
         };

src/core/public/doc_links/doc_links_service.ts

@@ -30,6 +30,10 @@ export class DocLinksService {
       ELASTIC_WEBSITE_URL,
       links: {
         settings: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/settings.html`,
+        apm: {
+          kibanaSettings: `${KIBANA_DOCS}apm-settings-in-kibana.html`,
+          supportedServiceMaps: `${KIBANA_DOCS}service-maps.html#service-maps-supported`,
+        },
         canvas: {
           guide: `${KIBANA_DOCS}canvas.html`,
         },
@@ -453,6 +457,10 @@ export interface DocLinksStart {
   readonly ELASTIC_WEBSITE_URL: string;
   readonly links: {
     readonly settings: string;
+    readonly apm: {
+      readonly kibanaSettings: string;
+      readonly supportedServiceMaps: string;
+    };
     readonly canvas: {
       readonly guide: string;
     };

src/core/public/public.api.md

@@ -474,6 +474,10 @@ export interface DocLinksStart {
     // (undocumented)
     readonly links: {
         readonly settings: string;
+        readonly apm: {
+            readonly kibanaSettings: string;
+            readonly supportedServiceMaps: string;
+        };
         readonly canvas: {
             readonly guide: string;
         };

x-pack/plugins/apm/public/components/app/service_map/EmptyBanner.tsx

@@ -6,12 +6,12 @@
  */
 
 import React, { useContext, useEffect, useState } from 'react';
-import { EuiCallOut } from '@elastic/eui';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
-import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { CytoscapeContext } from './Cytoscape';
 import { useTheme } from '../../../hooks/use_theme';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 
 const EmptyBannerContainer = euiStyled.div`
   margin: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
@@ -28,6 +28,7 @@ export function EmptyBanner() {
   const theme = useTheme();
   const cy = useContext(CytoscapeContext);
   const [nodeCount, setNodeCount] = useState(0);
+  const { docLinks } = useApmPluginContext().core;
 
   useEffect(() => {
     const handler: cytoscape.EventHandler = (event) =>
@@ -67,14 +68,11 @@ export function EmptyBanner() {
           defaultMessage:
             "We will map out connected services and external requests if we can detect them. Please make sure you're running the latest version of the APM agent.",
         })}{' '}
-        <ElasticDocsLink
-          section="/kibana"
-          path="/service-maps.html#service-maps-supported"
-        >
+        <EuiLink href={docLinks.links.apm.supportedServiceMaps}>
           {i18n.translate('xpack.apm.serviceMap.emptyBanner.docsLink', {
             defaultMessage: 'Learn more in the docs',
           })}
-        </ElasticDocsLink>
+        </EuiLink>
       </EuiCallOut>
     </EmptyBannerContainer>
   );

x-pack/plugins/apm/public/components/app/service_map/timeout_prompt.tsx

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 
 export function TimeoutPrompt({
   isGlobalServiceMap,
@@ -44,11 +44,12 @@ export function TimeoutPrompt({
 }
 
 function ApmSettingsDocLink() {
+  const { docLinks } = useApmPluginContext().core;
   return (
-    <ElasticDocsLink section="/kibana" path="/apm-settings-in-kibana.html">
+    <EuiLink href={docLinks.links.apm.kibanaSettings}>
       {i18n.translate('xpack.apm.serviceMap.timeoutPrompt.docsLink', {
         defaultMessage: 'Learn more about APM settings in the docs',
       })}
-    </ElasticDocsLink>
+    </EuiLink>
   );
 }

x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx

@@ -61,6 +61,9 @@ const mockCore = {
   docLinks: {
     DOC_LINK_VERSION: '0',
     ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
+    links: {
+      apm: {},
+    },
   },
   http: {
     basePath: {