feat: add internal routing to BottomLink (#3258)

* feat(core): Link component detect whether it's an external link or not

* fix: make BottomLink using backstage/core Link component

.changeset/dry-pillows-carry.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core': patch
+---
+
+- The BottomLink is now able to handle with internal routes.
+- @backstage/core Link component detect whether it's an external link or not, and render accordingly

packages/core/src/components/Link/Link.tsx

@@ -25,6 +25,13 @@ type Props = ComponentProps<typeof MaterialLink> &
  * Thin wrapper on top of material-ui's Link component
  * Makes the Link to utilise react-router
  */
-export const Link = React.forwardRef<any, Props>((props, ref) => (
-  <MaterialLink ref={ref} component={RouterLink} {...props} />
-));
+export const Link = React.forwardRef<any, Props>((props, ref) => {
+  const to = String(props.to);
+  return /^https?:\/\//.test(to) ? (
+    // External links
+    <MaterialLink ref={ref} href={to} {...props} />
+  ) : (
+    // Interact with React Router for internal links
+    <MaterialLink ref={ref} component={RouterLink} {...props} />
+  );
+});

packages/core/src/layout/BottomLink/BottomLink.test.tsx

@@ -22,7 +22,6 @@ const minProps = {
   title: 'A deepLink title',
   link: '/mocked',
 };
-
 describe('<BottomLink />', () => {
   it('renders without exploding', async () => {
     const rendered = await renderInTestApp(<BottomLink {...minProps} />);

packages/core/src/layout/BottomLink/BottomLink.tsx

@@ -16,7 +16,6 @@
 
 import React, { FC } from 'react';
 import {
-  Link,
   ListItem,
   ListItemIcon,
   Divider,
@@ -26,6 +25,7 @@ import {
 import ArrowIcon from '@material-ui/icons/ArrowForward';
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
+import { Link } from '../../components/Link';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
@@ -53,7 +53,7 @@ export const BottomLink: FC<BottomLinkProps> = ({ link, title, onClick }) => {
   return (
     <div>
       <Divider />
-      <Link href={link} onClick={onClick} underline="none">
+      <Link to={link} onClick={onClick} underline="none">
         <ListItem className={classes.root}>
           <ListItemText>
             <Box className={classes.boxTitle} fontWeight="fontWeightBold" m={1}>