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

Add namespace to the component links in the techdocs header

Browse Source 
Signed-off-by: Elliot Greenwood <hello@elliotgreenwood.co.uk>
This commit is contained in:
Elliot Greenwood
2021-02-23 23:42:53 +00:00
parent e6819f05ed
commit 9a03faa997
2 changed files with 97 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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
+6 -5
View File
@@ -18,8 +18,9 @@ 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 { Header, HeaderLabel, Link, useRouteRef } from '@backstage/core';
import { TechDocsMetadata } from '../../types';
import { 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,14 +52,14 @@ export const TechDocsPageHeader = ({
spec: { owner, lifecycle },
} = entityMetadataValues || { spec: {} };
const componentLink = `/catalog/${kind}/${name}`;
const componentLink = useRouteRef(entityRouteRef);
const labels = (
<>
<HeaderLabel
label="Component"
value={
<Link style={{ color: '#fff' }} to={componentLink}>
<Link style={{ color: '#fff' }} to={componentLink(entityId)}>
{name}
</Link>
}
@@ -92,7 +93,7 @@ export const TechDocsPageHeader = ({
siteDescription && siteDescription !== 'None' ? siteDescription : ''
}
type={name}
typeLink={componentLink}
typeLink={componentLink(entityId)}
>
{labels}
</Header>