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 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" `); }); diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index d71d6a1e9f..24c835f638 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?: 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 42668b54c9..fe616299c3 100644 --- a/packages/core-components/src/components/Link/Link.test.tsx +++ b/packages/core-components/src/components/Link/Link.test.tsx @@ -45,6 +45,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..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,6 +103,7 @@ export type LinkProps = Omit & to: string; component?: ElementType; noTrack?: boolean; + externalLinkIcon?: boolean; }; /** @@ -161,7 +175,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 +215,7 @@ export const Link = React.forwardRef( className={classnames(classes.externalLink, props.className)} > {props.children} + {externalLinkIcon && } , Opens in a new window 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..0e0518a58f 100644 --- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx @@ -85,8 +85,11 @@ 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..f89f411488 100644 --- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx +++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx @@ -84,11 +84,12 @@ 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} 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'; 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..5b57cbd80e 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx @@ -84,7 +84,6 @@ export const RelatedEntitiesCard = ( asRenderableEntities, tableOptions = {}, } = props; - const { t } = useTranslationRef(catalogTranslationRef); const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { @@ -116,7 +115,7 @@ export const RelatedEntitiesCard = (
{emptyMessage} - + {t('relatedEntitiesCard.emptyHelpLinkTitle')}