paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

Merge pull request #4675 from egnwd/techdocs/header-links

Browse Source
This commit is contained in:
Himanshu Mishra
2021-03-08 13:21:43 +00:00
committed by GitHub
parent cd07d485c2 83883a2ea3
commit d661bece6a
3 changed files with 125 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/techdocs-curvy-geckos-rhyme.md
+6
View File
@@ -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
plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx
+91 -48
View File
@@ -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('<TechDocsPageHeader />', () => {
it('should render a techdocs page header', async () => {
await act(async () => {
const rendered = render(
wrapInTestApp(
<TechDocsPageHeader
entityId={{
kind: 'test',
name: 'test-name',
namespace: 'test-namespace',
}}
metadataRequest={{
entity: {
loading: false,
value: {
locationMetadata: {
type: 'github',
target: 'https://example.com/',
},
spec: {
owner: 'test',
},
const rendered = await renderInTestApp(
<TechDocsPageHeader
entityId={{
kind: 'test',
name: 'test-name',
namespace: 'test-namespace',
}}
metadataRequest={{
entity: {
loading: false,
value: {
locationMetadata: {
type: 'github',
target: 'https://example.com/',
},
spec: {
owner: 'test',
},
},
techdocs: {
loading: false,
value: {
site_name: 'test-site-name',
site_description: 'test-site-desc',
},
},
techdocs: {
loading: false,
value: {
site_name: 'test-site-name',
site_description: 'test-site-desc',
},
}}
/>,
),
},
}}
/>,
{
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('<TechDocsPageHeader />', () => {
it('should render a techdocs page header even if metadata is missing', async () => {
await act(async () => {
const rendered = render(
wrapInTestApp(
<TechDocsPageHeader
entityId={{
kind: 'test',
name: 'test-name',
namespace: 'test-namespace',
}}
metadataRequest={{
entity: {
loading: false,
},
techdocs: {
loading: false,
},
}}
/>,
),
const rendered = await renderInTestApp(
<TechDocsPageHeader
entityId={{
kind: 'test',
name: 'test-name',
namespace: 'test-namespace',
}}
metadataRequest={{
entity: {
loading: false,
},
techdocs: {
loading: false,
},
}}
/>,
{
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(
<TechDocsPageHeader
entityId={{
kind: 'test',
name: 'test-name',
namespace: 'test-namespace',
}}
metadataRequest={{
entity: {
loading: false,
},
techdocs: {
loading: false,
value: {
site_name: 'test-site-name',
site_description: 'test-site-desc',
},
},
}}
/>,
{
mountedRoutes: {
'/catalog/:namespace/:kind/:name/*': entityRouteRef,
},
},
);
expect(rendered.container.innerHTML).toContain(
'/catalog/test-namespace/test/test-name',
);
});
});
});
plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx
+28 -7
View File
@@ -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 = (
<>
<HeaderLabel
label="Component"
value={
<Link style={{ color: '#fff' }} to={componentLink}>
<Link style={{ color: '#fff' }} to={componentLink(entityId)}>
{name}
</Link>
}
/>
{owner ? <HeaderLabel label="Site Owner" value={owner} /> : null}
{owner ? (
<HeaderLabel
label="Owner"
value={
ownerEntity ? (
<EntityRefLink
style={{ color: '#fff' }}
entityRef={ownerEntity}
defaultKind="group"
/>
) : (
owner
)
}
/>
) : null}
{lifecycle ? <HeaderLabel label="Lifecycle" value={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}
</Header>