diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.test.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.test.tsx index 5ea170eae2..cd51488242 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.test.tsx +++ b/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.test.tsx @@ -17,6 +17,7 @@ import React from 'react'; import { TaskPageLinks } from './TaskPageLinks'; import { renderInTestApp } from '@backstage/test-utils'; +import { entityRouteRef } from '@backstage/plugin-catalog-react'; describe('TaskPageLinks', () => { beforeEach(() => {}); @@ -29,6 +30,11 @@ describe('TaskPageLinks', () => { const output = { entityRef: 'Component:default/my-app' }; const { findByText } = await renderInTestApp( , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, ); const element = await findByText('Open in catalog'); @@ -44,6 +50,11 @@ describe('TaskPageLinks', () => { const output = { remoteUrl: 'https://remote.url' }; const { findByText } = await renderInTestApp( , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, ); const element = await findByText('Repo'); @@ -61,6 +72,11 @@ describe('TaskPageLinks', () => { }; const { findByText } = await renderInTestApp( , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name/*': entityRouteRef, + }, + }, ); let element = await findByText('Cool link 1'); diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx index 4eed65e5bb..c0b55193c2 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx +++ b/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx @@ -16,12 +16,11 @@ import React from 'react'; import { parseEntityName } from '@backstage/catalog-model'; -import { IconComponent, IconKey, useApp } from '@backstage/core'; +import { IconComponent, IconKey, useApp, useRouteRef } from '@backstage/core'; import { IconLink } from './IconLink'; -import { entityRoute } from '@backstage/plugin-catalog-react'; +import { entityRouteRef } from '@backstage/plugin-catalog-react'; import { Box } from '@material-ui/core'; import LanguageIcon from '@material-ui/icons/Language'; -import { generatePath } from 'react-router'; import { TaskOutput } from '../../types'; type TaskPageLinksProps = { @@ -32,6 +31,7 @@ export const TaskPageLinks = ({ output }: TaskPageLinksProps) => { const { entityRef, remoteUrl } = output; let { links = [] } = output; const app = useApp(); + const entityRoute = useRouteRef(entityRouteRef); const iconResolver = (key: IconKey | undefined): IconComponent => key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon; @@ -41,12 +41,11 @@ export const TaskPageLinks = ({ output }: TaskPageLinksProps) => { } if (entityRef) { + const entityName = parseEntityName(entityRef); + const target = entityRoute(entityName); links = [ { - url: generatePath( - `/catalog/${entityRoute.path}`, - parseEntityName(entityRef), - ), + url: target, title: 'Open in catalog', icon: 'catalog', },