move external link icon to Link component

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

packages/core-components/report.api.md

@@ -706,7 +706,7 @@ export type LinkProps = Omit<LinkProps_2, 'to'> &
     to: string;
     component?: ElementType<any>;
     noTrack?: boolean;
-    externalLinkIcon?: React_2.ReactNode;
+    externalLinkIcon?: boolean;
   };
 
 // Warning: (ae-missing-release-tag) "LoginRequestListItemClassKey" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)

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

@@ -25,7 +25,6 @@ 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 () => {
@@ -59,7 +58,7 @@ describe('<Link />', () => {
 
   it('renders external link icon if externalLinkIcon prop is passed', async () => {
     const { container } = await renderInTestApp(
-      <Link to="http://something.external" externalLinkIcon={<OpenInNew />}>
+      <Link to="http://something.external" externalLinkIcon>
         External Link
       </Link>,
     );

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

@@ -29,6 +29,8 @@ import {
   LinkProps as RouterLinkProps,
   Route,
 } from 'react-router-dom';
+import OpenInNew from '@material-ui/icons/OpenInNew';
+import { useApp } from '@backstage/core-plugin-api';
 
 export function isReactRouterBeta(): boolean {
   const [obj] = createRoutesFromChildren(<Route index element={<div />} />);
@@ -39,7 +41,7 @@ export function isReactRouterBeta(): boolean {
 export type LinkClassKey = 'visuallyHidden' | 'externalLink';
 
 const useStyles = makeStyles(
-  {
+  theme => ({
     visuallyHidden: {
       clip: 'rect(0 0 0 0)',
       clipPath: 'inset(50%)',
@@ -53,10 +55,21 @@ const useStyles = makeStyles(
     externalLink: {
       position: 'relative',
     },
-  },
+    externalLinkIcon: {
+      verticalAlign: 'bottom',
+      marginLeft: theme.spacing(0.5),
+    },
+  }),
   { name: 'Link' },
 );
 
+const ExternalLinkIcon = () => {
+  const app = useApp();
+  const Icon = app.getSystemIcon('externalLink') || OpenInNew;
+  const classes = useStyles();
+  return <Icon className={classes.externalLinkIcon} />;
+};
+
 export const isExternalUri = (uri: string) => /^([a-z+.-]+):/.test(uri);
 
 // See https://github.com/facebook/react/blob/f0cf832e1d0c8544c36aa8b310960885a11a847c/packages/react-dom-bindings/src/shared/sanitizeURL.js
@@ -90,7 +103,7 @@ export type LinkProps = Omit<MaterialLinkProps, 'to'> &
     to: string;
     component?: ElementType<any>;
     noTrack?: boolean;
-    externalLinkIcon?: React.ReactNode;
+    externalLinkIcon?: boolean;
   };
 
 /**
@@ -202,7 +215,7 @@ export const Link = React.forwardRef<any, LinkProps>(
         className={classnames(classes.externalLink, props.className)}
       >
         {props.children}
-        {externalLinkIcon && externalLinkIcon}
+        {externalLinkIcon && <ExternalLinkIcon />}
         <Typography component="span" className={classes.visuallyHidden}>
           , Opens in a new window
         </Typography>

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx

@@ -33,16 +33,6 @@ import {
   TableOptions,
   WarningPanel,
 } from '@backstage/core-components';
-import OpenInNew from '@material-ui/icons/OpenInNew';
-import { useApp } from '@backstage/core-plugin-api';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  externalLink: {
-    verticalAlign: 'bottom',
-    marginLeft: theme.spacing(0.5),
-  },
-}));
 
 /**
  * @public
@@ -63,9 +53,6 @@ export const ConsumedApisCard = (props: {
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_CONSUMES_API,
   });
-  const app = useApp();
-  const ExternalLinkIcon = app.getSystemIcon('externalLink') || OpenInNew;
-  const classes = useStyles();
 
   if (loading) {
     return (
@@ -100,12 +87,7 @@ export const ConsumedApisCard = (props: {
           <Typography variant="body2">
             <Link
               to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional"
-              externalLinkIcon={
-                <ExternalLinkIcon
-                  fontSize="small"
-                  className={classes.externalLink}
-                />
-              }
+              externalLinkIcon
             >
               Learn how to change this
             </Link>

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx

@@ -33,16 +33,6 @@ import {
   TableOptions,
   WarningPanel,
 } from '@backstage/core-components';
-import { useApp } from '@backstage/core-plugin-api';
-import OpenInNew from '@material-ui/icons/OpenInNew';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  externalLink: {
-    verticalAlign: 'bottom',
-    marginLeft: theme.spacing(0.5),
-  },
-}));
 
 /**
  * @public
@@ -63,9 +53,6 @@ export const ProvidedApisCard = (props: {
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_PROVIDES_API,
   });
-  const app = useApp();
-  const ExternalLinkIcon = app.getSystemIcon('externalLink') || OpenInNew;
-  const classes = useStyles();
 
   if (loading) {
     return (
@@ -99,12 +86,7 @@ export const ProvidedApisCard = (props: {
           </Typography>
           <Link
             to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional"
-            externalLinkIcon={
-              <ExternalLinkIcon
-                fontSize="small"
-                className={classes.externalLink}
-              />
-            }
+            externalLinkIcon
           >
             Learn how to change this
           </Link>

plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx

@@ -44,9 +44,6 @@ import {
 } from './presets';
 import { catalogTranslationRef } from '../../alpha/translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { useApp } from '@backstage/core-plugin-api';
-import OpenInNew from '@material-ui/icons/OpenInNew';
-import { makeStyles, Theme } from '@material-ui/core/styles';
 
 /** @public */
 export type RelatedEntitiesCardProps<T extends Entity> = {
@@ -61,13 +58,6 @@ export type RelatedEntitiesCardProps<T extends Entity> = {
   tableOptions?: TableOptions;
 };
 
-const useStyles = makeStyles((theme: Theme) => ({
-  externalLink: {
-    verticalAlign: 'bottom',
-    marginLeft: theme.spacing(0.5),
-  },
-}));
-
 /**
  * A low level card component that can be used as a building block for more
  * specific cards.
@@ -94,9 +84,6 @@ export const RelatedEntitiesCard = <T extends Entity>(
     asRenderableEntities,
     tableOptions = {},
   } = props;
-  const classes = useStyles();
-  const app = useApp();
-  const ExternalLinkIcon = app.getSystemIcon('externalLink') || OpenInNew;
   const { t } = useTranslationRef(catalogTranslationRef);
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
@@ -128,16 +115,7 @@ export const RelatedEntitiesCard = <T extends Entity>(
         <div style={{ textAlign: 'center' }}>
           <Typography variant="body1">{emptyMessage}</Typography>
           <Typography variant="body2">
-            <Link
-              className={classes.externalLink}
-              to={emptyHelpLink}
-              externalLinkIcon={
-                <ExternalLinkIcon
-                  fontSize="small"
-                  className={classes.externalLink}
-                />
-              }
-            >
+            <Link to={emptyHelpLink} externalLinkIcon>
               {t('relatedEntitiesCard.emptyHelpLinkTitle')}
             </Link>
           </Typography>