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',
},