From e8f69ba9367c4c700df0990460753f71aa32b667 Mon Sep 17 00:00:00 2001
From: Jesko Steinberg <61695677+jeskosda@users.noreply.github.com>
Date: Fri, 6 Nov 2020 20:17:17 +0100
Subject: [PATCH] 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                     |  6 ++++++
 packages/core/src/components/Link/Link.tsx          | 13 ++++++++++---
 .../core/src/layout/BottomLink/BottomLink.test.tsx  |  1 -
 packages/core/src/layout/BottomLink/BottomLink.tsx  |  4 ++--
 4 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/dry-pillows-carry.md

diff --git a/.changeset/dry-pillows-carry.md b/.changeset/dry-pillows-carry.md
new file mode 100644
index 0000000000..5352e26d2d
--- /dev/null
+++ b/.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
diff --git a/packages/core/src/components/Link/Link.tsx b/packages/core/src/components/Link/Link.tsx
index 8e7e3f179e..59a9604fa7 100644
--- a/packages/core/src/components/Link/Link.tsx
+++ b/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} />
+  );
+});
diff --git a/packages/core/src/layout/BottomLink/BottomLink.test.tsx b/packages/core/src/layout/BottomLink/BottomLink.test.tsx
index 92ae2ecb3b..8bea00e35d 100644
--- a/packages/core/src/layout/BottomLink/BottomLink.test.tsx
+++ b/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} />);
diff --git a/packages/core/src/layout/BottomLink/BottomLink.tsx b/packages/core/src/layout/BottomLink/BottomLink.tsx
index b3f7b4aa11..e768ffd9e4 100644
--- a/packages/core/src/layout/BottomLink/BottomLink.tsx
+++ b/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}>