diff --git a/plugins/catalog/src/alpha/translation.ts b/plugins/catalog/src/alpha/translation.ts index f38a34be84..e5e6fa18e2 100644 --- a/plugins/catalog/src/alpha/translation.ts +++ b/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', diff --git a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx index a2814527cc..730bb86bda 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/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 = { @@ -58,6 +61,13 @@ export type RelatedEntitiesCardProps = { 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 = ( 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 = (
{emptyMessage} - + + } + > {t('relatedEntitiesCard.emptyHelpLinkTitle')}