diff --git a/.changeset/techdocs-curvy-geckos-rhyme.md b/.changeset/techdocs-curvy-geckos-rhyme.md new file mode 100644 index 0000000000..a0a53fc127 --- /dev/null +++ b/.changeset/techdocs-curvy-geckos-rhyme.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +- Adds a link to the owner entity +- Corrects the link to the component which includes the namespace diff --git a/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx b/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx index a2369dcfc1..8128366392 100644 --- a/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx @@ -15,44 +15,49 @@ */ import React from 'react'; import { TechDocsPageHeader } from './TechDocsPageHeader'; -import { render, act } from '@testing-library/react'; -import { wrapInTestApp } from '@backstage/test-utils'; +import { act } from '@testing-library/react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { entityRouteRef } from '@backstage/plugin-catalog-react'; describe('', () => { it('should render a techdocs page header', async () => { await act(async () => { - const rendered = render( - wrapInTestApp( - , - ), + }, + }} + />, + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, ); + expect(rendered.container.innerHTML).toContain('header'); expect(rendered.getAllByText('test-site-name')).toHaveLength(2); expect(rendered.getByText('test-site-desc')).toBeDefined(); @@ -61,27 +66,65 @@ describe('', () => { it('should render a techdocs page header even if metadata is missing', async () => { await act(async () => { - const rendered = render( - wrapInTestApp( - , - ), + const rendered = await renderInTestApp( + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, ); expect(rendered.container.innerHTML).toContain('header'); }); }); + + it('should render a link back to the component page', async () => { + await act(async () => { + const rendered = await renderInTestApp( + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, + ); + + expect(rendered.container.innerHTML).toContain( + '/catalog/test-namespace/test/test-name', + ); + }); + }); }); diff --git a/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx b/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx index c994b52422..bfab2f8515 100644 --- a/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx @@ -17,9 +17,10 @@ import React from 'react'; import { AsyncState } from 'react-use/lib/useAsync'; import CodeIcon from '@material-ui/icons/Code'; -import { EntityName } from '@backstage/catalog-model'; -import { Header, HeaderLabel, Link } from '@backstage/core'; +import { EntityName, parseEntityName } from '@backstage/catalog-model'; +import { Header, HeaderLabel, Link, useRouteRef } from '@backstage/core'; import { TechDocsMetadata } from '../../types'; +import { EntityRefLink, entityRouteRef } from '@backstage/plugin-catalog-react'; type TechDocsPageHeaderProps = { entityId: EntityName; @@ -41,7 +42,7 @@ export const TechDocsPageHeader = ({ const { value: techdocsMetadataValues } = techdocsMetadata; const { value: entityMetadataValues } = entityMetadata; - const { kind, name } = entityId; + const { name } = entityId; const { site_name: siteName, site_description: siteDescription } = techdocsMetadataValues || {}; @@ -51,19 +52,39 @@ export const TechDocsPageHeader = ({ spec: { owner, lifecycle }, } = entityMetadataValues || { spec: {} }; - const componentLink = `/catalog/${kind}/${name}`; + const componentLink = useRouteRef(entityRouteRef); + + let ownerEntity; + if (owner) { + ownerEntity = parseEntityName(owner, { defaultKind: 'group' }); + } const labels = ( <> + {name} } /> - {owner ? : null} + {owner ? ( + + ) : ( + owner + ) + } + /> + ) : null} {lifecycle ? : null} {locationMetadata && locationMetadata.type !== 'dir' && @@ -92,7 +113,7 @@ export const TechDocsPageHeader = ({ siteDescription && siteDescription !== 'None' ? siteDescription : '' } type={name} - typeLink={componentLink} + typeLink={componentLink(entityId)} > {labels}