Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open links in new tabs from pages in Fleet integrations #199468

Merged
merged 3 commits into from
Nov 8, 2024

Conversation

albertoblaz
Copy link
Contributor

@albertoblaz albertoblaz commented Nov 8, 2024

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 in custom renderers

Screenshots

Overview page Screenshot 2024-11-08 at 13 35 43
API Reference page Screenshot 2024-11-08 at 13 35 07

Checklist

Delete any items that are not applicable to this PR.

@albertoblaz albertoblaz requested a review from a team as a code owner November 8, 2024 12:42
@botelastic botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Nov 8, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

@albertoblaz albertoblaz self-assigned this Nov 8, 2024
@albertoblaz albertoblaz added Team:Cloud Security Cloud Security team related csp: quick win cloud-security label: tagging issues which are relatively small in effort and lowered in priority and removed Team:Fleet Team label for Observability Data Collection Fleet team labels Nov 8, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security)

@botelastic botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Nov 8, 2024
Copy link
Member

@nchaulet nchaulet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

@maxcold maxcold added the v9.0.0 label Nov 8, 2024
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
fleet 1.7MB 1.7MB +13.0B

cc @albertoblaz

@albertoblaz albertoblaz changed the title Open links from CSPM Overview & API Reference pages in new tabs Open links in new tabs from pages in Fleet integrations Nov 8, 2024
@albertoblaz albertoblaz added backport:prev-major Backport to (8.x, 8.17, 8.16) the previous major branch and other branches in development backport:version Backport to applied version labels release_note:skip Skip the PR/issue when compiling release notes v8.16.0 v8.17.0 backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) and removed backport:prev-major Backport to (8.x, 8.17, 8.16) the previous major branch and other branches in development labels Nov 8, 2024
@maxcold maxcold self-requested a review November 8, 2024 17:33
Copy link
Contributor

@maxcold maxcold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome first contribution!

@albertoblaz albertoblaz merged commit 763410c into elastic:main Nov 8, 2024
40 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.16, 8.x

https://github.com/elastic/kibana/actions/runs/11746804075

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 8, 2024
## 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)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 8, 2024
## 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)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.16
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

Copy link
Contributor

@opauloh opauloh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

kibanamachine added a commit that referenced this pull request Nov 8, 2024
…) (#199525)

# Backport

This will backport the following commits from `main` to `8.16`:
- [Open links in new tabs from pages in Fleet integrations
(#199468)](#199468)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alberto
Blázquez","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-08T17:33:55Z","message":"Open
links in new tabs from pages in Fleet integrations (#199468)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/security-team/issues/10987.\r\n\r\nFleet
integrations render pages whose source content is written in\r\nMarkdown
format. Links in markdown were being converted into regular\r\n`<a>`
tags rather than in `<EuiLink>` components that include styling\r\nfor
external links and open in new tabs.\r\n\r\nAlso, the \"API Reference\"
page rendered a \"Learn more\" link using a\r\n`<EuiLink>` component
with external styling but missed\r\n`target=\"_blank\"`, so it wasn't
acting as an external link and didn't\r\nopen in a new tab
either.\r\n\r\n\r\n### Bug origin\r\n\r\nThis bug has dragged for the
last 3 years since `react-markdown`\r\nupgraded to `v6.0` and introduced
a
[breaking\r\nchange](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15)\r\nin
custom renderers\r\n\r\n\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Overview page</summary>\r\n<img
width=\"1406\" alt=\"Screenshot 2024-11-08 at 13 35
43\"\r\nsrc=\"https://github.com/user-attachments/assets/b11262f1-0b1e-45e5-baa9-d69727643b08\">\r\n</details>
\r\n\r\n<details><summary>API Reference page</summary>\r\n<img
width=\"2021\" alt=\"Screenshot 2024-11-08 at 13 35
07\"\r\nsrc=\"https://github.com/user-attachments/assets/7e073df2-0451-4e9d-b80c-878cfcdd6c58\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable
by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"763410c8ab0fed547571431c27a0d5d2f5fd4a7b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","v9.0.0","Team:Cloud
Security","backport:prev-minor","csp: quick
win","v8.16.0","backport:version","v8.17.0"],"title":"Open links in new
tabs from pages in Fleet
integrations","number":199468,"url":"https://github.com/elastic/kibana/pull/199468","mergeCommit":{"message":"Open
links in new tabs from pages in Fleet integrations (#199468)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/security-team/issues/10987.\r\n\r\nFleet
integrations render pages whose source content is written in\r\nMarkdown
format. Links in markdown were being converted into regular\r\n`<a>`
tags rather than in `<EuiLink>` components that include styling\r\nfor
external links and open in new tabs.\r\n\r\nAlso, the \"API Reference\"
page rendered a \"Learn more\" link using a\r\n`<EuiLink>` component
with external styling but missed\r\n`target=\"_blank\"`, so it wasn't
acting as an external link and didn't\r\nopen in a new tab
either.\r\n\r\n\r\n### Bug origin\r\n\r\nThis bug has dragged for the
last 3 years since `react-markdown`\r\nupgraded to `v6.0` and introduced
a
[breaking\r\nchange](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15)\r\nin
custom renderers\r\n\r\n\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Overview page</summary>\r\n<img
width=\"1406\" alt=\"Screenshot 2024-11-08 at 13 35
43\"\r\nsrc=\"https://github.com/user-attachments/assets/b11262f1-0b1e-45e5-baa9-d69727643b08\">\r\n</details>
\r\n\r\n<details><summary>API Reference page</summary>\r\n<img
width=\"2021\" alt=\"Screenshot 2024-11-08 at 13 35
07\"\r\nsrc=\"https://github.com/user-attachments/assets/7e073df2-0451-4e9d-b80c-878cfcdd6c58\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable
by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"763410c8ab0fed547571431c27a0d5d2f5fd4a7b"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199468","number":199468,"mergeCommit":{"message":"Open
links in new tabs from pages in Fleet integrations (#199468)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/security-team/issues/10987.\r\n\r\nFleet
integrations render pages whose source content is written in\r\nMarkdown
format. Links in markdown were being converted into regular\r\n`<a>`
tags rather than in `<EuiLink>` components that include styling\r\nfor
external links and open in new tabs.\r\n\r\nAlso, the \"API Reference\"
page rendered a \"Learn more\" link using a\r\n`<EuiLink>` component
with external styling but missed\r\n`target=\"_blank\"`, so it wasn't
acting as an external link and didn't\r\nopen in a new tab
either.\r\n\r\n\r\n### Bug origin\r\n\r\nThis bug has dragged for the
last 3 years since `react-markdown`\r\nupgraded to `v6.0` and introduced
a
[breaking\r\nchange](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15)\r\nin
custom renderers\r\n\r\n\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Overview page</summary>\r\n<img
width=\"1406\" alt=\"Screenshot 2024-11-08 at 13 35
43\"\r\nsrc=\"https://github.com/user-attachments/assets/b11262f1-0b1e-45e5-baa9-d69727643b08\">\r\n</details>
\r\n\r\n<details><summary>API Reference page</summary>\r\n<img
width=\"2021\" alt=\"Screenshot 2024-11-08 at 13 35
07\"\r\nsrc=\"https://github.com/user-attachments/assets/7e073df2-0451-4e9d-b80c-878cfcdd6c58\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable
by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"763410c8ab0fed547571431c27a0d5d2f5fd4a7b"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Alberto Blázquez <[email protected]>
kibanamachine added a commit that referenced this pull request Nov 8, 2024
… (#199526)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Open links in new tabs from pages in Fleet integrations
(#199468)](#199468)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alberto
Blázquez","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-08T17:33:55Z","message":"Open
links in new tabs from pages in Fleet integrations (#199468)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/security-team/issues/10987.\r\n\r\nFleet
integrations render pages whose source content is written in\r\nMarkdown
format. Links in markdown were being converted into regular\r\n`<a>`
tags rather than in `<EuiLink>` components that include styling\r\nfor
external links and open in new tabs.\r\n\r\nAlso, the \"API Reference\"
page rendered a \"Learn more\" link using a\r\n`<EuiLink>` component
with external styling but missed\r\n`target=\"_blank\"`, so it wasn't
acting as an external link and didn't\r\nopen in a new tab
either.\r\n\r\n\r\n### Bug origin\r\n\r\nThis bug has dragged for the
last 3 years since `react-markdown`\r\nupgraded to `v6.0` and introduced
a
[breaking\r\nchange](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15)\r\nin
custom renderers\r\n\r\n\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Overview page</summary>\r\n<img
width=\"1406\" alt=\"Screenshot 2024-11-08 at 13 35
43\"\r\nsrc=\"https://github.com/user-attachments/assets/b11262f1-0b1e-45e5-baa9-d69727643b08\">\r\n</details>
\r\n\r\n<details><summary>API Reference page</summary>\r\n<img
width=\"2021\" alt=\"Screenshot 2024-11-08 at 13 35
07\"\r\nsrc=\"https://github.com/user-attachments/assets/7e073df2-0451-4e9d-b80c-878cfcdd6c58\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable
by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"763410c8ab0fed547571431c27a0d5d2f5fd4a7b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","v9.0.0","Team:Cloud
Security","backport:prev-minor","csp: quick
win","v8.16.0","backport:version","v8.17.0"],"title":"Open links in new
tabs from pages in Fleet
integrations","number":199468,"url":"https://github.com/elastic/kibana/pull/199468","mergeCommit":{"message":"Open
links in new tabs from pages in Fleet integrations (#199468)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/security-team/issues/10987.\r\n\r\nFleet
integrations render pages whose source content is written in\r\nMarkdown
format. Links in markdown were being converted into regular\r\n`<a>`
tags rather than in `<EuiLink>` components that include styling\r\nfor
external links and open in new tabs.\r\n\r\nAlso, the \"API Reference\"
page rendered a \"Learn more\" link using a\r\n`<EuiLink>` component
with external styling but missed\r\n`target=\"_blank\"`, so it wasn't
acting as an external link and didn't\r\nopen in a new tab
either.\r\n\r\n\r\n### Bug origin\r\n\r\nThis bug has dragged for the
last 3 years since `react-markdown`\r\nupgraded to `v6.0` and introduced
a
[breaking\r\nchange](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15)\r\nin
custom renderers\r\n\r\n\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Overview page</summary>\r\n<img
width=\"1406\" alt=\"Screenshot 2024-11-08 at 13 35
43\"\r\nsrc=\"https://github.com/user-attachments/assets/b11262f1-0b1e-45e5-baa9-d69727643b08\">\r\n</details>
\r\n\r\n<details><summary>API Reference page</summary>\r\n<img
width=\"2021\" alt=\"Screenshot 2024-11-08 at 13 35
07\"\r\nsrc=\"https://github.com/user-attachments/assets/7e073df2-0451-4e9d-b80c-878cfcdd6c58\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable
by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"763410c8ab0fed547571431c27a0d5d2f5fd4a7b"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199468","number":199468,"mergeCommit":{"message":"Open
links in new tabs from pages in Fleet integrations (#199468)\n\n##
Summary\r\n\r\nCloses
https://github.com/elastic/security-team/issues/10987.\r\n\r\nFleet
integrations render pages whose source content is written in\r\nMarkdown
format. Links in markdown were being converted into regular\r\n`<a>`
tags rather than in `<EuiLink>` components that include styling\r\nfor
external links and open in new tabs.\r\n\r\nAlso, the \"API Reference\"
page rendered a \"Learn more\" link using a\r\n`<EuiLink>` component
with external styling but missed\r\n`target=\"_blank\"`, so it wasn't
acting as an external link and didn't\r\nopen in a new tab
either.\r\n\r\n\r\n### Bug origin\r\n\r\nThis bug has dragged for the
last 3 years since `react-markdown`\r\nupgraded to `v6.0` and introduced
a
[breaking\r\nchange](https://github.com/remarkjs/react-markdown/blob/main/changelog.md#600---2021-04-15)\r\nin
custom renderers\r\n\r\n\r\n\r\n###
Screenshots\r\n\r\n<details><summary>Overview page</summary>\r\n<img
width=\"1406\" alt=\"Screenshot 2024-11-08 at 13 35
43\"\r\nsrc=\"https://github.com/user-attachments/assets/b11262f1-0b1e-45e5-baa9-d69727643b08\">\r\n</details>
\r\n\r\n<details><summary>API Reference page</summary>\r\n<img
width=\"2021\" alt=\"Screenshot 2024-11-08 at 13 35
07\"\r\nsrc=\"https://github.com/user-attachments/assets/7e073df2-0451-4e9d-b80c-878cfcdd6c58\">\r\n</details>
\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] Any UI touched in this PR is usable
by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<[email protected]>","sha":"763410c8ab0fed547571431c27a0d5d2f5fd4a7b"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Alberto Blázquez <[email protected]>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Nov 11, 2024
## 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]>
@mistic mistic added v8.16.1 and removed v8.16.0 labels Nov 12, 2024
@mistic
Copy link
Member

mistic commented Nov 12, 2024

This PR didn't make it on time to the latest 8.16.0 BC. Updating the labels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) backport:version Backport to applied version labels csp: quick win cloud-security label: tagging issues which are relatively small in effort and lowered in priority release_note:skip Skip the PR/issue when compiling release notes Team:Cloud Security Cloud Security team related Team:Fleet Team label for Observability Data Collection Fleet team v8.16.1 v8.17.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants