diff --git a/.changeset/thick-trees-pay.md b/.changeset/thick-trees-pay.md
new file mode 100644
index 0000000000..6ee7b514ca
--- /dev/null
+++ b/.changeset/thick-trees-pay.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Use a `Link` for the edit button on the `AboutCard` instead of doing `window.open(...)`
diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
index 539cce7da3..d79fa8e3ae 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
@@ -15,21 +15,20 @@
*/
import { RELATION_OWNED_BY } from '@backstage/catalog-model';
+import {
+ ApiProvider,
+ ApiRegistry,
+ ConfigReader,
+} from '@backstage/core-app-api';
import {
ScmIntegrationsApi,
scmIntegrationsApiRef,
} from '@backstage/integration-react';
import { EntityProvider } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
-import { act, fireEvent } from '@testing-library/react';
import React from 'react';
-import { AboutCard } from './AboutCard';
-import {
- ApiProvider,
- ApiRegistry,
- ConfigReader,
-} from '@backstage/core-app-api';
import { viewTechDocRouteRef } from '../../routes';
+import { AboutCard } from './AboutCard';
describe('', () => {
it('renders info', async () => {
@@ -166,15 +165,12 @@ describe('', () => {
,
);
- const editButton = getByTitle('Edit Metadata');
- window.open = jest.fn();
- await act(async () => {
- fireEvent.click(editButton);
- });
- expect(window.open).toHaveBeenCalledWith(
- `https://github.com/backstage/backstage/edit/master/software.yaml`,
- '_blank',
+ const editLink = getByTitle('Edit Metadata').closest('a');
+ expect(editLink).toHaveAttribute(
+ 'href',
+ 'https://github.com/backstage/backstage/edit/master/software.yaml',
);
+ expect(editLink).toHaveAttribute('target', '_blank');
});
it('renders without "view source" link', async () => {
diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx
index 113ebe47bd..c554581713 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx
@@ -20,6 +20,13 @@ import {
RELATION_CONSUMES_API,
RELATION_PROVIDES_API,
} from '@backstage/catalog-model';
+import {
+ HeaderIconLinkRow,
+ IconLinkVerticalProps,
+ InfoCardVariants,
+ Link,
+} from '@backstage/core-components';
+import { useApi, useRouteRef } from '@backstage/core-plugin-api';
import {
ScmIntegrationIcon,
scmIntegrationsApiRef,
@@ -42,15 +49,8 @@ import DocsIcon from '@material-ui/icons/Description';
import EditIcon from '@material-ui/icons/Edit';
import ExtensionIcon from '@material-ui/icons/Extension';
import React from 'react';
-import { AboutContent } from './AboutContent';
-
-import {
- HeaderIconLinkRow,
- IconLinkVerticalProps,
- InfoCardVariants,
-} from '@backstage/core-components';
-import { useApi, useRouteRef } from '@backstage/core-plugin-api';
import { viewTechDocRouteRef } from '../../routes';
+import { AboutContent } from './AboutContent';
const useStyles = makeStyles({
gridItemCard: {
@@ -148,12 +148,12 @@ export function AboutCard({ variant }: AboutCardProps) {
title="About"
action={
{
- window.open(entityMetadataEditUrl ?? '#', '_blank');
- }}
+ to={entityMetadataEditUrl ?? '#'}
+ target="_blank"
>