From d68078a6601953ea3a453f831ef2f98e9d1cd635 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 19 Sep 2024 15:13:02 +0200 Subject: [PATCH] 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')}