Skip to content

Commit

Permalink
Open links in new tabs from pages in Fleet integrations (elastic#199468)
Browse files Browse the repository at this point in the history
## Summary

Closes elastic/security-team#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 <[email protected]>
(cherry picked from commit 763410c)
  • Loading branch information
albertoblaz committed Nov 8, 2024
1 parent 04db1b1 commit 51a4aed
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 51a4aed

Please sign in to comment.