[Dashboard navigation] Adds popout icon to links that open in new tab

[nickpeihl]

Fixes #165771

Summary

Adds an extraAction button that renders a popout icon for Dashboard or URL links that open in a new tab. This is visually similar to EuiLink with the external prop. Unfortunately, EuiListGroupItem does not support the external prop so we add the icon as an extra action button. However, EuiListGroupItem components do support truncating text and the extra action button appears regardless of the truncation.

extra-actions-with-tooltip.mp4

truncated-with-tooltips.mp4

Note, the icon will not appear on Dashboard links that open in a new tab until elastic/eui#7159 is available in Kibana. EUI has been updated!

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: dba9f34
• Interpreting CI Failures

Failed CI Steps

• Jest Tests #19
• Jest Integration Tests #1
• FTR Configs #9
• FTR Configs #9
• FTR Configs #10
• FTR Configs #10
• FTR Configs #18
• FTR Configs #18
• FTR Configs #21
• FTR Configs #61
• FTR Configs #61

Test Failures

• [job] [logs] FTR Configs #9 / Controls Range Slider Control create and edit edits title and size of an existing control and retains existing range selection
• [job] [logs] FTR Configs #9 / Controls Range Slider Control create and edit edits title and size of an existing control and retains existing range selection
• [job] [logs] FTR Configs #61 / dashboard app - group 1 Changing field formatter to Url applied on dashboard
• [job] [logs] FTR Configs #61 / dashboard app - group 1 Changing field formatter to Url applied on dashboard
• [job] [logs] FTR Configs #18 / dashboard app - group 5 embed mode non-default URL params renders as expected when scrolling
• [job] [logs] FTR Configs #18 / dashboard app - group 5 embed mode non-default URL params renders as expected when scrolling
• [job] [logs] Jest Tests #19 / Dashboard link component current dashboard is not a clickable href
• [job] [logs] FTR Configs #10 / Options list control Dashboard options list creation and editing Options List Control creation and editing experience renames an existing control and retains selection
• [job] [logs] FTR Configs #10 / Options list control Dashboard options list creation and editing Options List Control creation and editing experience renames an existing control and retains selection
• [job] [logs] FTR Configs #21 / pluggable panel actions "after all" hook in "pluggable panel actions"
• [job] [logs] Jest Integration Tests #1 / SO type registrations does not remove types from registrations without updating excludeOnUpgradeQuery

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
navigationEmbeddable	32.8KB	33.1KB	+338.0B

History

• 💔 Build #161195 failed 48cdf4c
• 💔 Build #156988 failed 63d19d5

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[Heenawter]

Looks like there's some rendering issues in horizontal layout:

I would expect the text to be vertically centered with the external icon - right now, it's almost rendering like a superscript :) And perhaps we could reduce the space between the icon and the text a bit? (both in horizontal + vertical layouts). What do you think @andreadelrio?

[andreadelrio]

Looks like there's some rendering issues in horizontal layout:

I would expect the text to be vertically centered with the external icon - right now, it's almost rendering like a superscript :) And perhaps we could reduce the space between the icon and the text a bit? (both in horizontal + vertical layouts). What do you think @andreadelrio?

Agreed. @nickpeihl take a look at how we handle the external link icon here to get an idea of that space and alignment we should be aiming for.