Use a Link for the edit button on the AboutCard instead of doing window.open(...)

Signed-off-by: Dominik Henneke <dominik.henneke@sda-se.com>

.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(...)`

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('<AboutCard />', () => {
   it('renders info', async () => {
@@ -166,15 +165,12 @@ describe('<AboutCard />', () => {
       </ApiProvider>,
     );
 
-    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 () => {

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={
           <IconButton
+            component={Link}
             aria-label="Edit"
             disabled={!entityMetadataEditUrl}
             title="Edit Metadata"
-            onClick={() => {
-              window.open(entityMetadataEditUrl ?? '#', '_blank');
-            }}
+            to={entityMetadataEditUrl ?? '#'}
+            target="_blank"
           >
             <EditIcon />
           </IconButton>