Merge pull request #9575 from jonathan-ash/sidebar-submenu-external-links

Added the ability for SidebarSubmenuItem to use external links via "to" property

.changeset/unlucky-queens-brush.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added ability for SidebarSubmenuItem to handle external links correctly via the "to" prop

packages/core-components/src/layout/Sidebar/Bar.test.tsx

@@ -46,6 +46,11 @@ async function renderScalableSidebar() {
         <SidebarItem icon={MenuBookIcon} onClick={() => {}} text="Catalog">
           <SidebarSubmenu title="Catalog">
             <SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
+            <SidebarSubmenuItem
+              title="External Link"
+              to="https://backstage.io/"
+              icon={BuildRoundedIcon}
+            />
             <SidebarSubmenuItem
               title="Misc"
               to="/6"
@@ -59,6 +64,10 @@ async function renderScalableSidebar() {
                   title: 'dropdown item 2',
                   to: '/dropdownitemlink2',
                 },
+                {
+                  title: 'dropdown item 3',
+                  to: 'https://backstage.io/',
+                },
               ]}
             />
           </SidebarSubmenu>
@@ -112,5 +121,22 @@ describe('Sidebar', () => {
         '/dropdownitemlink',
       );
     });
+
+    it('Submenu item renders an external link when `to` value is provided', async () => {
+      userEvent.hover(screen.getByTestId('item-with-submenu'));
+      expect(screen.getByText('External Link').closest('a')).toHaveAttribute(
+        'href',
+        'https://backstage.io/',
+      );
+    });
+
+    it('Dropdown item in submenu renders an external link when `to` value is provided', async () => {
+      userEvent.hover(screen.getByTestId('item-with-submenu'));
+      userEvent.click(screen.getByText('Misc'));
+      expect(screen.getByText('dropdown item 3').closest('a')).toHaveAttribute(
+        'href',
+        'https://backstage.io/',
+      );
+    });
   });
 });

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -14,15 +14,10 @@
  * limitations under the License.
  */
 import React, { useContext, useState } from 'react';
-import {
-  NavLink,
-  resolvePath,
-  useLocation,
-  useResolvedPath,
-} from 'react-router-dom';
+import { resolvePath, useLocation, useResolvedPath } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
+import { Link } from '../../components/Link';
 import { IconComponent } from '@backstage/core-plugin-api';
 import classnames from 'classnames';
 import { BackstageTheme } from '@backstage/theme';
@@ -163,7 +158,6 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
           <div className={classes.dropdown}>
             {dropdownItems.map((object, key) => (
               <Link
-                component={NavLink}
                 to={object.to}
                 underline="none"
                 className={classes.dropdownItem}
@@ -185,7 +179,6 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
   return (
     <div className={classes.itemContainer}>
       <Link
-        component={NavLink}
         to={to}
         underline="none"
         className={classnames(