Mimic native link behaviour for SPA links (#142304)

**Fixes:** [#99077](https://github.com/elastic/kibana/issues/99077)

## Summary

It allows to open a rule in a new tab by clicking on a rule link in the Manage Rules table with a pressed modifier key. Basically it checks for the meta key, shift and ctrl which allows to open a link in a new tab in a cross platform way.

https://user-images.githubusercontent.com/3775283/193340495-68c9a8f1-7e44-4cf2-84c6-5f214c188cac.mov

### Checklist

- [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)
This commit is contained in:
Maxim Palenov 2022-10-03 17:40:50 +02:00 committed by GitHub
parent 8f8343b7c2
commit 51e01c7743
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -48,6 +48,9 @@ export const DEFAULT_NUMBER_OF_LINK = 5;
/** The default max-height of the Reputation Links popover used to show "+n More" items (e.g. `+9 More`) */
export const DEFAULT_MORE_MAX_HEIGHT = '200px';
const isModified = (event: MouseEvent) =>
event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
// Internal Links
const UserDetailsLinkComponent: React.FC<{
children?: React.ReactNode;
@ -543,6 +546,10 @@ export const useGetSecuritySolutionLinkProps = (): GetSecuritySolutionProps => {
return {
href: url,
onClick: (ev: MouseEvent) => {
if (isModified(ev)) {
return;
}
ev.preventDefault();
navigateTo({ url });
if (onClickProps) {