use navigateToUrl to navigate to recent nav links (#77446)

src/core/public/chrome/ui/header/collapsible_nav.test.tsx

@@ -67,6 +67,7 @@ function mockProps() {
     onIsLockedUpdate: () => {},
     closeNav: () => {},
     navigateToApp: () => Promise.resolve(),
+    navigateToUrl: () => Promise.resolve(),
     customNavLink$: new BehaviorSubject(undefined),
   };
 }

src/core/public/chrome/ui/header/collapsible_nav.tsx

@@ -87,6 +87,7 @@ interface Props {
   onIsLockedUpdate: OnIsLockedUpdate;
   closeNav: () => void;
   navigateToApp: InternalApplicationStart['navigateToApp'];
+  navigateToUrl: InternalApplicationStart['navigateToUrl'];
   customNavLink$: Rx.Observable<ChromeNavLink | undefined>;
 }
 
@@ -100,6 +101,7 @@ export function CollapsibleNav({
   onIsLockedUpdate,
   closeNav,
   navigateToApp,
+  navigateToUrl,
   ...observables
 }: Props) {
   const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
@@ -217,17 +219,21 @@ export function CollapsibleNav({
             listItems={recentlyAccessed.map((link) => {
               // TODO #64541
               // Can remove icon from recent links completely
-              const { iconType, ...hydratedLink } = createRecentNavLink(link, navLinks, basePath);
+              const { iconType, onClick, ...hydratedLink } = createRecentNavLink(
+                link,
+                navLinks,
+                basePath,
+                navigateToUrl
+              );
 
               return {
                 ...hydratedLink,
                 'data-test-subj': 'collapsibleNavAppLink--recent',
                 onClick: (event) => {
-                  if (isModifiedOrPrevented(event)) {
-                    return;
+                  if (!isModifiedOrPrevented(event)) {
+                    closeNav();
+                    onClick(event);
                   }
-
-                  closeNav();
                 },
               };
             })}

src/core/public/chrome/ui/header/header.tsx

@@ -184,6 +184,7 @@ export function Header({
           homeHref={homeHref}
           basePath={basePath}
           navigateToApp={application.navigateToApp}
+          navigateToUrl={application.navigateToUrl}
           onIsLockedUpdate={onIsLockedUpdate}
           closeNav={() => {
             setIsNavOpen(false);

src/core/public/chrome/ui/header/nav_link.tsx

@@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem, CoreStart } from '../../..';
 import { HttpStart } from '../../../http';
+import { InternalApplicationStart } from '../../../application/types';
 import { relativeToAbsolute } from '../../nav_links/to_nav_link';
 
 export const isModifiedOrPrevented = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
@@ -87,6 +88,7 @@ export interface RecentNavLink {
   title: string;
   'aria-label': string;
   iconType?: string;
+  onClick: React.MouseEventHandler;
 }
 
 /**
@@ -102,8 +104,9 @@ export interface RecentNavLink {
 export function createRecentNavLink(
   recentLink: ChromeRecentlyAccessedHistoryItem,
   navLinks: ChromeNavLink[],
-  basePath: HttpStart['basePath']
-) {
+  basePath: HttpStart['basePath'],
+  navigateToUrl: InternalApplicationStart['navigateToUrl']
+): RecentNavLink {
   const { link, label } = recentLink;
   const href = relativeToAbsolute(basePath.prepend(link));
   const navLink = navLinks.find((nl) => href.startsWith(nl.baseUrl));
@@ -125,5 +128,12 @@ export function createRecentNavLink(
     title: titleAndAriaLabel,
     'aria-label': titleAndAriaLabel,
     iconType: navLink?.euiIconType,
+    /* Use href and onClick to support "open in new tab" and SPA navigation in the same link */
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+      if (event.button === 0 && !isModifiedOrPrevented(event)) {
+        event.preventDefault();
+        navigateToUrl(href);
+      }
+    },
   };
 }