From c8ad28f3dc5360a86f31dc635c97da497d0f17e8 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 11 Sep 2024 15:06:45 +0200 Subject: [PATCH 1/7] add external link icon to default icons Signed-off-by: Emma Indal --- packages/app-defaults/src/defaults/icons.tsx | 2 ++ .../core-compat-api/src/compatWrapper/compatWrapper.test.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app-defaults/src/defaults/icons.tsx b/packages/app-defaults/src/defaults/icons.tsx index ebda36c131..e0b93517e7 100644 --- a/packages/app-defaults/src/defaults/icons.tsx +++ b/packages/app-defaults/src/defaults/icons.tsx @@ -38,6 +38,7 @@ import MuiStorageIcon from '@material-ui/icons/Storage'; import MuiFeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList'; import Star from '@material-ui/icons/Star'; import StarBorder from '@material-ui/icons/StarBorder'; +import OpenInNew from '@material-ui/icons/OpenInNew'; export const icons = { brokenImage: MuiBrokenImageIcon as IconComponent, @@ -66,4 +67,5 @@ export const icons = { warning: MuiWarningIcon as IconComponent, star: Star as IconComponent, unstarred: StarBorder as IconComponent, + externalLink: OpenInNew as IconComponent, }; diff --git a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx index 18846e0f21..94fc8705e6 100644 --- a/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx +++ b/packages/core-compat-api/src/compatWrapper/compatWrapper.test.tsx @@ -76,7 +76,7 @@ describe('BackwardsCompatProvider', () => { expect(screen.getByTestId('ctx').textContent).toMatchInlineSnapshot(` "plugins: test, app components: NotFoundErrorPage, BootErrorPage, Progress, Router, ErrorBoundaryFallback - icons: brokenImage, catalog, scaffolder, techdocs, search, chat, dashboard, docs, email, github, group, help, kind:api, kind:component, kind:domain, kind:group, kind:location, kind:system, kind:user, kind:resource, kind:template, user, warning, star, unstarred" + icons: brokenImage, catalog, scaffolder, techdocs, search, chat, dashboard, docs, email, github, group, help, kind:api, kind:component, kind:domain, kind:group, kind:location, kind:system, kind:user, kind:resource, kind:template, user, warning, star, unstarred, externalLink" `); }); From 46e01e9d9856cd993cfe79be81194f578c2e187c Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 11 Sep 2024 15:07:56 +0200 Subject: [PATCH 2/7] Link component to accept externalLinkIcon prop Signed-off-by: Emma Indal --- .../src/components/Link/Link.test.tsx | 25 +++++++++++++++++++ .../src/components/Link/Link.tsx | 4 ++- 2 files changed, 28 insertions(+), 1 deletion(-) 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 From 5645f9ff14afb414cc2357a7de74890242064083 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 11 Sep 2024 15:10:12 +0200 Subject: [PATCH 3/7] update apis cards empty state to use external icon on link Signed-off-by: Emma Indal --- .../ApisCards/ConsumedApisCard.test.tsx | 13 ++++++++- .../components/ApisCards/ConsumedApisCard.tsx | 25 ++++++++++++++-- .../ApisCards/ProvidedApisCard.test.tsx | 14 ++++++++- .../components/ApisCards/ProvidedApisCard.tsx | 29 +++++++++++++++---- 4 files changed, 72 insertions(+), 9 deletions(-) diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx index d664ce78e8..95e279bad5 100644 --- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx +++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx @@ -62,7 +62,7 @@ describe('', () => { relations: [], }; - const { getByText } = await renderInTestApp( + const { getByText, getByRole, container } = await renderInTestApp( @@ -77,6 +77,17 @@ describe('', () => { expect(getByText(/Consumed APIs/i)).toBeInTheDocument(); expect(getByText(/does not consume any APIs/i)).toBeInTheDocument(); + + // Also render external link icon + const externalLink = getByRole('link'); + expect(externalLink).toHaveAttribute( + 'href', + 'https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional', + ); + const externalLinkIcon: HTMLElement | null = container.querySelector( + 'svg[class*="externalLink"]', + ); + expect(externalLink).toContainElement(externalLinkIcon); }); it('shows consumed APIs', async () => { diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx index f68e6dcb40..c72da45dd3 100644 --- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx @@ -33,6 +33,16 @@ 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 @@ -53,6 +63,9 @@ 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 ( @@ -85,8 +98,16 @@ export const ConsumedApisCard = (props: { APIs. - - Learn how to change this. + + } + > + Learn how to change this diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx index 3dbc4edd63..8c4f7dd26b 100644 --- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx +++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx @@ -62,7 +62,7 @@ describe('', () => { relations: [], }; - const { getByText } = await renderInTestApp( + const { getByText, getByRole, container } = await renderInTestApp( @@ -77,6 +77,18 @@ describe('', () => { expect(getByText(/Provided APIs/i)).toBeInTheDocument(); expect(getByText(/does not provide any APIs/i)).toBeInTheDocument(); + expect(getByText(/Learn how to change this/)).toBeInTheDocument(); + + // Also render external link icon + const externalLink = getByRole('link'); + expect(externalLink).toHaveAttribute( + 'href', + 'https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional', + ); + const externalLinkIcon: HTMLElement | null = container.querySelector( + 'svg[class*="externalLink"]', + ); + expect(externalLink).toContainElement(externalLinkIcon); }); it('shows consumed APIs', async () => { diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx index 48099df375..2063f23673 100644 --- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx @@ -33,6 +33,16 @@ 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 @@ -53,6 +63,9 @@ 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 ( @@ -84,11 +97,17 @@ export const ProvidedApisCard = (props: { This {entity.kind.toLocaleLowerCase('en-US')} does not provide any APIs. - - - Learn how to change this. - - + + } + > + Learn how to change this + } columns={columns} From dca4119a4e5a8b3f4282cf19962ee3e99347ad02 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 11 Sep 2024 15:10:49 +0200 Subject: [PATCH 4/7] update RelatedEntitiesCard to use external icon on link Signed-off-by: Emma Indal --- plugins/catalog/src/alpha/translation.ts | 2 +- .../RelatedEntitiesCard.tsx | 25 +++++++++++++++++-- 2 files changed, 24 insertions(+), 3 deletions(-) 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')} From 66eb59534d8ce0e983fc735a12fb84a8357e7023 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 11 Sep 2024 16:03:23 +0200 Subject: [PATCH 5/7] update api reports Signed-off-by: Emma Indal --- packages/core-components/report.api.md | 1 + plugins/catalog/report-alpha.api.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index d71d6a1e9f..4c2727ab1e 100644 --- a/packages/core-components/report.api.md +++ b/packages/core-components/report.api.md @@ -706,6 +706,7 @@ export type LinkProps = Omit & to: string; component?: ElementType; noTrack?: boolean; + externalLinkIcon?: React_2.ReactNode; }; // 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) diff --git a/plugins/catalog/report-alpha.api.md b/plugins/catalog/report-alpha.api.md index 13ee6d0314..b7fa14d003 100644 --- a/plugins/catalog/report-alpha.api.md +++ b/plugins/catalog/report-alpha.api.md @@ -113,7 +113,7 @@ export const catalogTranslationRef: TranslationRef< readonly 'hasSubdomainsCard.emptyMessage': 'No subdomain is part of this domain'; readonly 'hasSystemsCard.title': 'Has systems'; readonly 'hasSystemsCard.emptyMessage': 'No system is part of this domain'; - readonly 'relatedEntitiesCard.emptyHelpLinkTitle': 'Learn how to change this.'; + readonly 'relatedEntitiesCard.emptyHelpLinkTitle': 'Learn how to change this'; readonly 'systemDiagramCard.title': 'System Diagram'; readonly 'systemDiagramCard.description': 'Use pinch & zoo to move around the diagram.'; readonly 'systemDiagramCard.edgeLabels.dependsOn': 'depends on'; From 46b5a20b281f6ce6d8abfb949bcb06de5079063b Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 11 Sep 2024 16:08:57 +0200 Subject: [PATCH 6/7] add changesets Signed-off-by: Emma Indal --- .changeset/eleven-pugs-hear.md | 6 ++++++ .changeset/giant-kiwis-retire.md | 5 +++++ .changeset/strange-bees-attack.md | 5 +++++ 3 files changed, 16 insertions(+) create mode 100644 .changeset/eleven-pugs-hear.md create mode 100644 .changeset/giant-kiwis-retire.md create mode 100644 .changeset/strange-bees-attack.md diff --git a/.changeset/eleven-pugs-hear.md b/.changeset/eleven-pugs-hear.md new file mode 100644 index 0000000000..5d65057e0b --- /dev/null +++ b/.changeset/eleven-pugs-hear.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog': patch +--- + +Empty states updated with external link icon for learn more links diff --git a/.changeset/giant-kiwis-retire.md b/.changeset/giant-kiwis-retire.md new file mode 100644 index 0000000000..380e05042f --- /dev/null +++ b/.changeset/giant-kiwis-retire.md @@ -0,0 +1,5 @@ +--- +'@backstage/app-defaults': patch +--- + +Added `externalLink` to icon defaults diff --git a/.changeset/strange-bees-attack.md b/.changeset/strange-bees-attack.md new file mode 100644 index 0000000000..c4e95097f8 --- /dev/null +++ b/.changeset/strange-bees-attack.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +`Link` component now accepts `externalLinkIcon` prop From d68078a6601953ea3a453f831ef2f98e9d1cd635 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 19 Sep 2024 15:13:02 +0200 Subject: [PATCH 7/7] move external link icon to Link component Signed-off-by: Emma Indal --- packages/core-components/report.api.md | 2 +- .../src/components/Link/Link.test.tsx | 3 +-- .../src/components/Link/Link.tsx | 21 ++++++++++++---- .../components/ApisCards/ConsumedApisCard.tsx | 20 +--------------- .../components/ApisCards/ProvidedApisCard.tsx | 20 +--------------- .../RelatedEntitiesCard.tsx | 24 +------------------ 6 files changed, 22 insertions(+), 68 deletions(-) diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index 4c2727ab1e..24c835f638 100644 --- a/packages/core-components/report.api.md +++ b/packages/core-components/report.api.md @@ -706,7 +706,7 @@ export type LinkProps = Omit & to: string; component?: ElementType; 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) diff --git a/packages/core-components/src/components/Link/Link.test.tsx b/packages/core-components/src/components/Link/Link.test.tsx index 5f171411c1..fe616299c3 100644 --- a/packages/core-components/src/components/Link/Link.test.tsx +++ b/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('', () => { it('navigates using react-router', async () => { @@ -59,7 +58,7 @@ describe('', () => { it('renders external link icon if externalLinkIcon prop is passed', async () => { const { container } = await renderInTestApp( - }> + External Link , ); diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index 86f5ec3c50..0008a9ff2c 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/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(} />); @@ -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 ; +}; + 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 & to: string; component?: ElementType; noTrack?: boolean; - externalLinkIcon?: React.ReactNode; + externalLinkIcon?: boolean; }; /** @@ -202,7 +215,7 @@ export const Link = React.forwardRef( className={classnames(classes.externalLink, props.className)} > {props.children} - {externalLinkIcon && externalLinkIcon} + {externalLinkIcon && } , Opens in a new window diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx index c72da45dd3..0e0518a58f 100644 --- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx +++ b/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: { - } + externalLinkIcon > Learn how to change this diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx index 2063f23673..f89f411488 100644 --- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx +++ b/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: { - } + externalLinkIcon > Learn how to change this diff --git a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx index 730bb86bda..5b57cbd80e 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/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 = { @@ -61,13 +58,6 @@ 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. @@ -94,9 +84,6 @@ 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, { @@ -128,16 +115,7 @@ export const RelatedEntitiesCard = (
{emptyMessage} - - } - > + {t('relatedEntitiesCard.emptyHelpLinkTitle')}