Updates AboutCard to match new IconLinkVertical contract

packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx

@@ -20,12 +20,13 @@ import LinkIcon from '@material-ui/icons/Link';
 import { Link as RouterLink } from '../Link';
 
 export type IconLinkVerticalProps = {
-  icon?: React.ReactNode;
-  href?: string;
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-  disabled?: boolean;
-  label: string;
   color?: 'primary' | 'secondary';
+  disabled?: boolean;
+  href?: string;
+  icon?: React.ReactNode;
+  label: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  title?: string;
 };
 
 const useIconStyles = makeStyles(theme => ({
@@ -53,18 +54,20 @@ const useIconStyles = makeStyles(theme => ({
 }));
 
 export function IconLinkVertical({
-  icon = <LinkIcon />,
-  href = '#',
-  disabled = false,
   color = 'primary',
+  disabled = false,
+  href = '#',
+  icon = <LinkIcon />,
   label,
   onClick,
+  title,
 }: IconLinkVerticalProps) {
   const classes = useIconStyles();
 
   if (disabled) {
     return (
       <Link
+        title={title}
         className={classnames(classes.link, classes.disabled)}
         underline="none"
       >
@@ -76,6 +79,7 @@ export function IconLinkVertical({
 
   return (
     <Link
+      title={title}
       className={classnames(classes.link, classes[color])}
       to={href}
       component={RouterLink}

plugins/catalog/src/components/AboutCard/AboutCard.test.tsx

@@ -19,12 +19,12 @@ import {
   SOURCE_LOCATION_ANNOTATION,
   EDIT_URL_ANNOTATION,
 } from '@backstage/catalog-model';
-import { render } from '@testing-library/react';
+import { render, act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { AboutCard } from './AboutCard';
 
 describe('<AboutCard /> GitHub', () => {
-  it('renders info and "view source" link', () => {
+  it('renders info and "view source" link', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -41,7 +41,7 @@ describe('<AboutCard /> GitHub', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(
+    const { getByText, getByTitle } = render(
       <EntityProvider entity={entity}>
         <AboutCard />
       </EntityProvider>,
@@ -51,15 +51,21 @@ describe('<AboutCard /> GitHub', () => {
       'href',
       'https://github.com/backstage/backstage/blob/master/software.yaml',
     );
-    expect(getByText('View Source').closest('a')).toHaveAttribute(
-      'edithref',
-      'https://github.com/backstage/backstage/edit/master/software.yaml',
+
+    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',
     );
   });
 });
 
 describe('<AboutCard /> GitLab', () => {
-  it('renders info and "view source" link', () => {
+  it('renders info and "view source" link', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -76,25 +82,32 @@ describe('<AboutCard /> GitLab', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(
+    const { getByText, getByTitle } = render(
       <EntityProvider entity={entity}>
         <AboutCard />
       </EntityProvider>,
     );
+
     expect(getByText('service')).toBeInTheDocument();
     expect(getByText('View Source').closest('a')).toHaveAttribute(
       'href',
       'https://gitlab.com/backstage/backstage/-/blob/master/software.yaml',
     );
-    expect(getByText('View Source').closest('a')).toHaveAttribute(
-      'edithref',
-      'https://gitlab.com/backstage/backstage/-/edit/master/software.yaml',
+
+    const editButton = getByTitle('Edit Metadata');
+    window.open = jest.fn();
+    await act(async () => {
+      fireEvent.click(editButton);
+    });
+    expect(window.open).toHaveBeenCalledWith(
+      `https://gitlab.com/backstage/backstage/-/edit/master/software.yaml`,
+      '_blank',
     );
   });
 });
 
 describe('<AboutCard /> BitBucket', () => {
-  it('renders info and "view source" link', () => {
+  it('renders info and "view source" link', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -111,7 +124,7 @@ describe('<AboutCard /> BitBucket', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(
+    const { getByText, getByTitle } = render(
       <EntityProvider entity={entity}>
         <AboutCard />
       </EntityProvider>,
@@ -121,15 +134,21 @@ describe('<AboutCard /> BitBucket', () => {
       'href',
       'https://bitbucket.org/backstage/backstage/src/master/software.yaml',
     );
-    expect(getByText('View Source').closest('a')).toHaveAttribute(
-      'edithref',
-      'https://bitbucket.org/backstage/backstage/src/master/software.yaml?mode=edit&spa=0&at=master',
+
+    const editButton = getByTitle('Edit Metadata');
+    window.open = jest.fn();
+    await act(async () => {
+      fireEvent.click(editButton);
+    });
+    expect(window.open).toHaveBeenCalledWith(
+      `https://bitbucket.org/backstage/backstage/src/master/software.yaml?mode=edit&spa=0&at=master`,
+      '_blank',
     );
   });
 });
 
 describe('<AboutCard /> custom links', () => {
-  it('renders info and "view source" link', () => {
+  it('renders info and "view source" link', async () => {
     const entity = {
       apiVersion: 'v1',
       kind: 'Component',
@@ -149,7 +168,7 @@ describe('<AboutCard /> custom links', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(
+    const { getByText, getByTitle } = render(
       <EntityProvider entity={entity}>
         <AboutCard />
       </EntityProvider>,
@@ -159,9 +178,12 @@ describe('<AboutCard /> custom links', () => {
       'href',
       'https://another.place/backstage.git',
     );
-    expect(getByText('View Source').closest('a')).toHaveAttribute(
-      'edithref',
-      'https://another.place',
-    );
+
+    const editButton = getByTitle('Edit Metadata');
+    window.open = jest.fn();
+    await act(async () => {
+      fireEvent.click(editButton);
+    });
+    expect(window.open).toHaveBeenCalledWith(`https://another.place`, '_blank');
   });
 });

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -21,7 +21,7 @@ import {
   SOURCE_LOCATION_ANNOTATION,
   RELATION_PROVIDES_API,
 } from '@backstage/catalog-model';
-import { HeaderIconLinkRow } from '@backstage/core';
+import { HeaderIconLinkRow, IconLinkVerticalProps } from '@backstage/core';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   Card,
@@ -105,11 +105,12 @@ export function AboutCard({ variant }: AboutCardProps) {
   const codeLink = getCodeLinkInfo(entity);
   // TODO: Also support RELATION_CONSUMES_API here
   const hasApis = entity.relations?.some(r => r.type === RELATION_PROVIDES_API);
-  const viewInSource = {
+  const viewInSource: IconLinkVerticalProps = {
     label: 'View Source',
-    ...codeLink,
+    href: codeLink.href,
+    icon: codeLink.icon,
   };
-  const viewInTechDocs = {
+  const viewInTechDocs: IconLinkVerticalProps = {
     label: 'View TechDocs',
     disabled: !entity.metadata.annotations?.['backstage.io/techdocs-ref'],
     icon: <DocsIcon />,
@@ -117,7 +118,7 @@ export function AboutCard({ variant }: AboutCardProps) {
       entity.kind
     }/${entity.metadata.name}`,
   };
-  const viewApi = {
+  const viewApi: IconLinkVerticalProps = {
     title: hasApis ? '' : 'No APIs available',
     label: 'View API',
     disabled: !hasApis,