[APM] Uses doc link service instead of ElasticDocsLink for linking metadata (#110992) (#111282)

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

@@ -12,6 +12,7 @@ readonly links: {
         readonly apm: {
             readonly kibanaSettings: string;
             readonly supportedServiceMaps: string;
+            readonly metaData: string;
         };
         readonly canvas: {
             readonly guide: string;

src/core/public/doc_links/doc_links_service.ts

@@ -24,6 +24,7 @@ export class DocLinksService {
     const KIBANA_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/`;
     const FLEET_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/fleet/${DOC_LINK_VERSION}/`;
     const PLUGIN_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/plugins/${DOC_LINK_VERSION}/`;
+    const APM_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/apm/`;
 
     return deepFreeze({
       DOC_LINK_VERSION,
@@ -33,6 +34,7 @@ export class DocLinksService {
         apm: {
           kibanaSettings: `${KIBANA_DOCS}apm-settings-in-kibana.html`,
           supportedServiceMaps: `${KIBANA_DOCS}service-maps.html#service-maps-supported`,
+          metaData: `${APM_DOCS}get-started/${DOC_LINK_VERSION}/metadata.html`,
         },
         canvas: {
           guide: `${KIBANA_DOCS}canvas.html`,
@@ -460,6 +462,7 @@ export interface DocLinksStart {
     readonly apm: {
       readonly kibanaSettings: string;
       readonly supportedServiceMaps: string;
+      readonly metaData: string;
     };
     readonly canvas: {
       readonly guide: string;

src/core/public/public.api.md

@@ -477,6 +477,7 @@ export interface DocLinksStart {
         readonly apm: {
             readonly kibanaSettings: string;
             readonly supportedServiceMaps: string;
+            readonly metaData: string;
         };
         readonly canvas: {
             readonly guide: string;

x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx

@@ -10,6 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiLink,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -19,11 +20,11 @@ import { isEmpty } from 'lodash';
 import React, { useCallback } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { HeightRetainer } from '../HeightRetainer';
 import { fromQuery, toQuery } from '../Links/url_helpers';
 import { filterSectionsByTerm, SectionsWithRows } from './helper';
 import { Section } from './Section';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 
 interface Props {
   sections: SectionsWithRows;
@@ -34,6 +35,7 @@ export function MetadataTable({ sections }: Props) {
   const location = useLocation();
   const { urlParams } = useUrlParams();
   const { searchTerm = '' } = urlParams;
+  const { docLinks } = useApmPluginContext().core;
 
   const filteredSections = filterSectionsByTerm(sections, searchTerm);
 
@@ -55,11 +57,11 @@ export function MetadataTable({ sections }: Props) {
     <React.Fragment>
       <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
         <EuiFlexItem grow={false}>
-          <ElasticDocsLink section="/apm/get-started" path="/metadata.html">
+          <EuiLink href={docLinks.links.apm.metaData}>
             <EuiText size="s">
               <EuiIcon type="help" /> How to add labels and other data
             </EuiText>
-          </ElasticDocsLink>
+          </EuiLink>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFieldSearch