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" >