diff --git a/packages/core-components/src/components/Link/Link.test.tsx b/packages/core-components/src/components/Link/Link.test.tsx index 42668b54c9..5f171411c1 100644 --- a/packages/core-components/src/components/Link/Link.test.tsx +++ b/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('', () => { it('navigates using react-router', async () => { @@ -45,6 +46,30 @@ describe('', () => { }); }); + it('does not render external link icon if externalLinkIcon prop is not passed', async () => { + const { container } = await renderInTestApp( + External 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( + }> + External 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(); diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index 478e589212..86f5ec3c50 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/packages/core-components/src/components/Link/Link.tsx @@ -90,6 +90,7 @@ export type LinkProps = Omit & to: string; component?: ElementType; 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( - ({ onClick, noTrack, ...props }, ref) => { + ({ onClick, noTrack, externalLinkIcon, ...props }, ref) => { const classes = useStyles(); const analytics = useAnalytics(); @@ -201,6 +202,7 @@ export const Link = React.forwardRef( className={classnames(classes.externalLink, props.className)} > {props.children} + {externalLinkIcon && externalLinkIcon} , Opens in a new window