move external link icon to Link component

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

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>