update RelatedEntitiesCard to use external icon on link

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

plugins/catalog/src/alpha/translation.ts

@@ -152,7 +152,7 @@ export const catalogTranslationRef = createTranslationRef({
       emptyMessage: 'No system is part of this domain',
     },
     relatedEntitiesCard: {
-      emptyHelpLinkTitle: 'Learn how to change this.',
+      emptyHelpLinkTitle: 'Learn how to change this',
     },
     systemDiagramCard: {
       title: 'System Diagram',

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

@@ -44,6 +44,9 @@ 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> = {
@@ -58,6 +61,13 @@ 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.
@@ -84,7 +94,9 @@ 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, {
@@ -116,7 +128,16 @@ export const RelatedEntitiesCard = <T extends Entity>(
         <div style={{ textAlign: 'center' }}>
           <Typography variant="body1">{emptyMessage}</Typography>
           <Typography variant="body2">
-            <Link to={emptyHelpLink}>
+            <Link
+              className={classes.externalLink}
+              to={emptyHelpLink}
+              externalLinkIcon={
+                <ExternalLinkIcon
+                  fontSize="small"
+                  className={classes.externalLink}
+                />
+              }
+            >
               {t('relatedEntitiesCard.emptyHelpLinkTitle')}
             </Link>
           </Typography>