From 04fc3cf33d1e1cf2603fd5f50eeec8a7aa06dd96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alberto=20Bl=C3=A1zquez?=
 <albertoblaz@users.noreply.github.com>
Date: Fri, 8 Nov 2024 18:33:55 +0100
Subject: [PATCH] Open links in new tabs from pages in Fleet integrations
 (#199468)

## Summary

Closes https://github.com/elastic/security-team/issues/10987.

Fleet integrations render pages whose source content is written in
Markdown format. Links in markdown were being converted into regular
`<a>` tags rather than in `<EuiLink>` components that include styling
for external links and open in new tabs.

Also, the "API Reference" page rendered a "Learn more" link using a
`<EuiLink>` component with external styling but missed
`target="_blank"`, so it wasn't acting as an external link and didn't
open in a new tab either.


### Bug origin

This bug has dragged for the last 3 years since `react-markdown`
upgraded to `v6.0` and introduced a [breaking
change](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15)
in custom renderers



### Screenshots

<details><summary>Overview page</summary>
<img width="1406" alt="Screenshot 2024-11-08 at 13 35 43"
src="https://github.com/user-attachments/assets/b11262f1-0b1e-45e5-baa9-d69727643b08">
</details>

<details><summary>API Reference page</summary>
<img width="2021" alt="Screenshot 2024-11-08 at 13 35 07"
src="https://github.com/user-attachments/assets/7e073df2-0451-4e9d-b80c-878cfcdd6c58">
</details>


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../sections/epm/screens/detail/documentation/index.tsx         | 2 +-
 .../sections/epm/screens/detail/overview/markdown_renderers.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx
index a418c38cd8f33..c4fc2863868a3 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/documentation/index.tsx
@@ -79,7 +79,7 @@ export const DocumentationPage: React.FunctionComponent<Props> = ({ packageInfo,
             defaultMessage="This documents all the inputs, streams, and variables available to use this integration programmatically via the Fleet Kibana API. {learnMore}"
             values={{
               learnMore: (
-                <EuiLink href={docLinks.links.fleet.api} external={true}>
+                <EuiLink href={docLinks.links.fleet.api} external={true} target="_blank">
                   <FormattedMessage
                     id="xpack.fleet.epm.packageDetails.apiReference.learnMoreLink"
                     defaultMessage="Learn more"
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/markdown_renderers.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/markdown_renderers.tsx
index 067d35414c00b..d45e4d811e986 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/markdown_renderers.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/markdown_renderers.tsx
@@ -79,7 +79,7 @@ export const markdownRenderers = (
     },
     h5: ({ children }) => <h6>{children}</h6>,
     h6: ({ children }) => <h6>{children}</h6>,
-    link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
+    a: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
       <EuiLink
         href={href}
         target="_blank"