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