mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Fixes special clicks and 3rd party icon sizes in nav (#69767)
This commit is contained in:
parent
589d6ffd22
commit
1d60c35a3f
2 changed files with 22 additions and 22 deletions
|
@ -38,7 +38,7 @@ import { AppCategory } from '../../../../types';
|
|||
import { InternalApplicationStart } from '../../../application/types';
|
||||
import { HttpStart } from '../../../http';
|
||||
import { OnIsLockedUpdate } from './';
|
||||
import { createEuiListItem, createRecentNavLink } from './nav_link';
|
||||
import { createEuiListItem, createRecentNavLink, isModifiedOrPrevented } from './nav_link';
|
||||
|
||||
function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
|
||||
const allCategories = {} as Record<string, AppCategory | undefined>;
|
||||
|
@ -184,17 +184,13 @@ export function CollapsibleNav({
|
|||
label: 'Home',
|
||||
iconType: 'home',
|
||||
href: homeHref,
|
||||
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
closeNav();
|
||||
if (
|
||||
event.isDefaultPrevented() ||
|
||||
event.altKey ||
|
||||
event.metaKey ||
|
||||
event.ctrlKey
|
||||
) {
|
||||
onClick: (event) => {
|
||||
if (isModifiedOrPrevented(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
closeNav();
|
||||
navigateToApp('home');
|
||||
},
|
||||
},
|
||||
|
@ -230,7 +226,13 @@ export function CollapsibleNav({
|
|||
return {
|
||||
...hydratedLink,
|
||||
'data-test-subj': 'collapsibleNavAppLink--recent',
|
||||
onClick: closeNav,
|
||||
onClick: (event) => {
|
||||
if (isModifiedOrPrevented(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeNav();
|
||||
},
|
||||
};
|
||||
})}
|
||||
maxWidth="none"
|
||||
|
|
|
@ -17,20 +17,15 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { EuiImage } from '@elastic/eui';
|
||||
import { EuiIcon } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem, CoreStart } from '../../..';
|
||||
import { HttpStart } from '../../../http';
|
||||
import { relativeToAbsolute } from '../../nav_links/to_nav_link';
|
||||
|
||||
function isModifiedEvent(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
||||
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
|
||||
}
|
||||
|
||||
function LinkIcon({ url }: { url: string }) {
|
||||
return <EuiImage size="s" alt="" aria-hidden={true} url={url} />;
|
||||
}
|
||||
export const isModifiedOrPrevented = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
|
||||
event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || event.defaultPrevented;
|
||||
|
||||
interface Props {
|
||||
link: ChromeNavLink;
|
||||
|
@ -69,14 +64,16 @@ export function createEuiListItem({
|
|||
href,
|
||||
/* Use href and onClick to support "open in new tab" and SPA navigation in the same link */
|
||||
onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
||||
onClick();
|
||||
if (!isModifiedOrPrevented(event)) {
|
||||
onClick();
|
||||
}
|
||||
|
||||
if (
|
||||
!externalLink && // ignore external links
|
||||
!legacyMode && // ignore when in legacy mode
|
||||
!legacy && // ignore links to legacy apps
|
||||
!event.defaultPrevented && // onClick prevented default
|
||||
event.button === 0 && // ignore everything but left clicks
|
||||
!isModifiedEvent(event) // ignore clicks with modifier keys
|
||||
!isModifiedOrPrevented(event)
|
||||
) {
|
||||
event.preventDefault();
|
||||
navigateToApp(id);
|
||||
|
@ -88,7 +85,8 @@ export function createEuiListItem({
|
|||
'data-test-subj': dataTestSubj,
|
||||
...(basePath && {
|
||||
iconType: euiIconType,
|
||||
icon: !euiIconType && icon ? <LinkIcon url={basePath.prepend(`/${icon}`)} /> : undefined,
|
||||
icon:
|
||||
!euiIconType && icon ? <EuiIcon type={basePath.prepend(`/${icon}`)} size="m" /> : undefined,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue