mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
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:
parent
8f8343b7c2
commit
51e01c7743
1 changed files with 7 additions and 0 deletions
|
@ -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) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue