Sidemenu: Use <a> instead of <Link> when target is present (#38987)

public/app/core/components/sidemenu/SideMenuDropDown.tsx

@@ -5,6 +5,7 @@ import { IconName, Link } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 interface Props {
+  headerTarget?: HTMLAnchorElement['target'];
   headerText: string;
   headerUrl?: string;
   items?: NavModelItem[];
@@ -14,6 +15,7 @@ interface Props {
 }
 
 const SideMenuDropDown = ({
+  headerTarget,
   headerText,
   headerUrl,
   items = [],
@@ -22,15 +24,23 @@ const SideMenuDropDown = ({
   subtitleText,
 }: Props) => {
   const headerContent = <span className="sidemenu-item-text">{headerText}</span>;
-  const header = headerUrl ? (
+  let header = (
-    <Link href={headerUrl} onClick={onHeaderClick} className="side-menu-header-link">
-      {headerContent}
-    </Link>
-  ) : (
     <button onClick={onHeaderClick} className="side-menu-header-link">
       {headerContent}
     </button>
   );
+  if (headerUrl) {
+    header =
+      !headerTarget && headerUrl.startsWith('/') ? (
+        <Link href={headerUrl} onClick={onHeaderClick} className="side-menu-header-link">
+          {headerContent}
+        </Link>
+      ) : (
+        <a href={headerUrl} target={headerTarget} onClick={onHeaderClick} className="side-menu-header-link">
+          {headerContent}
+        </a>
+      );
+  }
 
   const menuClass = css`
     flex-direction: ${reverseDirection ? 'column-reverse' : 'column'};

public/app/core/components/sidemenu/SideMenuItem.tsx

@@ -25,27 +25,37 @@ const SideMenuItem = ({
   target,
   url,
 }: Props) => {
-  const anchor = url ? (
+  let element = (
-    <Link
-      className="sidemenu-link"
-      href={url}
-      target={target}
-      aria-label={label}
-      onClick={onClick}
-      aria-haspopup="true"
-    >
-      <span className="icon-circle sidemenu-icon">{children}</span>
-    </Link>
-  ) : (
     <button className="sidemenu-link" onClick={onClick} aria-label={label}>
       <span className="icon-circle sidemenu-icon">{children}</span>
     </button>
   );
 
+  if (url) {
+    element =
+      !target && url.startsWith('/') ? (
+        <Link
+          className="sidemenu-link"
+          href={url}
+          target={target}
+          aria-label={label}
+          onClick={onClick}
+          aria-haspopup="true"
+        >
+          <span className="icon-circle sidemenu-icon">{children}</span>
+        </Link>
+      ) : (
+        <a href={url} target={target} className="sidemenu-link" onClick={onClick} aria-label={label}>
+          <span className="icon-circle sidemenu-icon">{children}</span>
+        </a>
+      );
+  }
+
   return (
     <div className={cx('sidemenu-item', 'dropdown', { dropup: reverseMenuDirection })}>
-      {anchor}
+      {element}
       <SideMenuDropDown
+        headerTarget={target}
         headerText={label}
         headerUrl={url}
         items={menuItems}