Link component to accept externalLinkIcon prop

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

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

@@ -25,6 +25,7 @@ import { analyticsApiRef, configApiRef } from '@backstage/core-plugin-api';
 import { isExternalUri, Link, useResolvedPath } from './Link';
 import { Route, Routes } from 'react-router-dom';
 import { ConfigReader } from '@backstage/config';
+import OpenInNew from '@material-ui/icons/OpenInNew';
 
 describe('<Link />', () => {
   it('navigates using react-router', async () => {
@@ -45,6 +46,30 @@ describe('<Link />', () => {
     });
   });
 
+  it('does not render external link icon if externalLinkIcon prop is not passed', async () => {
+    const { container } = await renderInTestApp(
+      <Link to="http://something.external">External Link</Link>,
+    );
+    const externalLink = screen.getByRole('link', {
+      name: 'External Link , Opens in a new window',
+    });
+    const externalLinkIcon = container.querySelector('svg');
+    expect(externalLink).not.toContainElement(externalLinkIcon);
+  });
+
+  it('renders external link icon if externalLinkIcon prop is passed', async () => {
+    const { container } = await renderInTestApp(
+      <Link to="http://something.external" externalLinkIcon={<OpenInNew />}>
+        External Link
+      </Link>,
+    );
+    const externalLink = screen.getByRole('link', {
+      name: 'External Link , Opens in a new window',
+    });
+    const externalLinkIcon = container.querySelector('svg');
+    expect(externalLink).toContainElement(externalLinkIcon);
+  });
+
   it('captures click using analytics api', async () => {
     const linkText = 'Navigate!';
     const analyticsApi = new MockAnalyticsApi();

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

@@ -90,6 +90,7 @@ export type LinkProps = Omit<MaterialLinkProps, 'to'> &
     to: string;
     component?: ElementType<any>;
     noTrack?: boolean;
+    externalLinkIcon?: React.ReactNode;
   };
 
 /**
@@ -161,7 +162,7 @@ const getNodeText = (node: React.ReactNode): string => {
  * - Captures Link clicks as analytics events.
  */
 export const Link = React.forwardRef<any, LinkProps>(
-  ({ onClick, noTrack, ...props }, ref) => {
+  ({ onClick, noTrack, externalLinkIcon, ...props }, ref) => {
     const classes = useStyles();
     const analytics = useAnalytics();
 
@@ -201,6 +202,7 @@ export const Link = React.forwardRef<any, LinkProps>(
         className={classnames(classes.externalLink, props.className)}
       >
         {props.children}
+        {externalLinkIcon && externalLinkIcon}
         <Typography component="span" className={classes.visuallyHidden}>
           , Opens in a new window
         </Typography>