From 43f60ef7dde1566a924cd9a89838c8d2f8c6980f Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 23 Jun 2020 15:04:02 -0400 Subject: [PATCH 1/3] Correctly size legacy nav 3rd party icons --- src/core/public/chrome/ui/header/nav_link.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/core/public/chrome/ui/header/nav_link.tsx b/src/core/public/chrome/ui/header/nav_link.tsx index 969b6728e0263..109086819cdc0 100644 --- a/src/core/public/chrome/ui/header/nav_link.tsx +++ b/src/core/public/chrome/ui/header/nav_link.tsx @@ -17,7 +17,7 @@ * 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 '../../..'; @@ -28,10 +28,6 @@ function isModifiedEvent(event: React.MouseEvent) return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); } -function LinkIcon({ url }: { url: string }) { - return ; -} - interface Props { link: ChromeNavLink; legacyMode: boolean; @@ -85,7 +81,8 @@ export function createEuiListItem({ 'data-test-subj': dataTestSubj, ...(basePath && { iconType: euiIconType, - icon: !euiIconType && icon ? : undefined, + icon: + !euiIconType && icon ? : undefined, }), }; } From ddedb8ec358ec4f2791f1f84606af81e8e6aa550 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 23 Jun 2020 19:30:58 -0400 Subject: [PATCH 2/3] keep nav open when modifier clicks --- .../chrome/ui/header/collapsible_nav.tsx | 22 ++++++++++--------- src/core/public/chrome/ui/header/nav_link.tsx | 13 ++++++----- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx index 9494e22920de8..56c5126ed1031 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx @@ -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, isModifiedEvent } from './nav_link'; function getAllCategories(allCategorizedLinks: Record) { const allCategories = {} as Record; @@ -150,17 +150,13 @@ export function CollapsibleNav({ label: 'Home', iconType: 'home', href: homeHref, - onClick: (event: React.MouseEvent) => { - closeNav(); - if ( - event.isDefaultPrevented() || - event.altKey || - event.metaKey || - event.ctrlKey - ) { + onClick: (event) => { + if (isModifiedEvent(event)) { return; } + event.preventDefault(); + closeNav(); navigateToApp('home'); }, }, @@ -196,7 +192,13 @@ export function CollapsibleNav({ return { ...hydratedLink, 'data-test-subj': 'collapsibleNavAppLink--recent', - onClick: closeNav, + onClick: (event) => { + if (isModifiedEvent(event)) { + return; + } + + closeNav(); + }, }; })} maxWidth="none" diff --git a/src/core/public/chrome/ui/header/nav_link.tsx b/src/core/public/chrome/ui/header/nav_link.tsx index 109086819cdc0..ccc74a3fb1d68 100644 --- a/src/core/public/chrome/ui/header/nav_link.tsx +++ b/src/core/public/chrome/ui/header/nav_link.tsx @@ -24,9 +24,8 @@ import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem, CoreStart } from '../ import { HttpStart } from '../../../http'; import { relativeToAbsolute } from '../../nav_links/to_nav_link'; -function isModifiedEvent(event: React.MouseEvent) { - return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); -} +export const isModifiedEvent = (event: React.MouseEvent) => + event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || event.defaultPrevented; interface Props { link: ChromeNavLink; @@ -63,13 +62,15 @@ 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) { - onClick(); + if (!isModifiedEvent(event)) { + onClick(); + } + if ( !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 + !isModifiedEvent(event) ) { event.preventDefault(); navigateToApp(id); From 8d2e0f700588e0d2c9f6d932ec4f5908013cecc0 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 24 Jun 2020 11:03:04 -0400 Subject: [PATCH 3/3] rename isModified to isModifiedOrPrevented --- src/core/public/chrome/ui/header/collapsible_nav.tsx | 6 +++--- src/core/public/chrome/ui/header/nav_link.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx index 56c5126ed1031..3800e30c90cd6 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx @@ -38,7 +38,7 @@ import { AppCategory } from '../../../../types'; import { InternalApplicationStart } from '../../../application/types'; import { HttpStart } from '../../../http'; import { OnIsLockedUpdate } from './'; -import { createEuiListItem, createRecentNavLink, isModifiedEvent } from './nav_link'; +import { createEuiListItem, createRecentNavLink, isModifiedOrPrevented } from './nav_link'; function getAllCategories(allCategorizedLinks: Record) { const allCategories = {} as Record; @@ -151,7 +151,7 @@ export function CollapsibleNav({ iconType: 'home', href: homeHref, onClick: (event) => { - if (isModifiedEvent(event)) { + if (isModifiedOrPrevented(event)) { return; } @@ -193,7 +193,7 @@ export function CollapsibleNav({ ...hydratedLink, 'data-test-subj': 'collapsibleNavAppLink--recent', onClick: (event) => { - if (isModifiedEvent(event)) { + if (isModifiedOrPrevented(event)) { return; } diff --git a/src/core/public/chrome/ui/header/nav_link.tsx b/src/core/public/chrome/ui/header/nav_link.tsx index ccc74a3fb1d68..9d662a059438f 100644 --- a/src/core/public/chrome/ui/header/nav_link.tsx +++ b/src/core/public/chrome/ui/header/nav_link.tsx @@ -24,7 +24,7 @@ import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem, CoreStart } from '../ import { HttpStart } from '../../../http'; import { relativeToAbsolute } from '../../nav_links/to_nav_link'; -export const isModifiedEvent = (event: React.MouseEvent) => +export const isModifiedOrPrevented = (event: React.MouseEvent) => event.metaKey || event.altKey || event.ctrlKey || event.shiftKey || event.defaultPrevented; interface Props { @@ -62,7 +62,7 @@ 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) { - if (!isModifiedEvent(event)) { + if (!isModifiedOrPrevented(event)) { onClick(); } @@ -70,7 +70,7 @@ export function createEuiListItem({ !legacyMode && // ignore when in legacy mode !legacy && // ignore links to legacy apps event.button === 0 && // ignore everything but left clicks - !isModifiedEvent(event) + !isModifiedOrPrevented(event) ) { event.preventDefault(); navigateToApp(id);