Merge pull request #26921 from Vity01/graphcard-action-property

Graphcard action property

.changeset/tricky-shoes-lie.md

@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Added InfoCard `action` attribute for CatalogGraphCard
+
+```tsx
+const action = <Button title="Action Button" onClick={handleClickEvent()} />
+<CatalogGraphCard action={action} />
+```

plugins/catalog-graph/report.api.md

@@ -16,6 +16,7 @@ import { JSX as JSX_2 } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 
 // @public
@@ -80,6 +81,7 @@ export const EntityCatalogGraphCard: (
     variant?: InfoCardVariants | undefined;
     height?: number | undefined;
     title?: string | undefined;
+    action?: ReactNode;
   },
 ) => JSX_2.Element;
 

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx

@@ -33,6 +33,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { catalogGraphRouteRef } from '../../routes';
 import { CatalogGraphCard } from './CatalogGraphCard';
+import Button from '@material-ui/core/Button';
 
 describe('<CatalogGraphCard/>', () => {
   let entity: Entity;
@@ -127,6 +128,33 @@ describe('<CatalogGraphCard/>', () => {
     expect(await screen.findByText('Custom Title')).toBeInTheDocument();
   });
 
+  test('renders with action attribute', async () => {
+    catalog.getEntitiesByRefs.mockImplementation(async _ => ({
+      items: [
+        {
+          ...entity,
+          relations: [],
+        },
+      ],
+    }));
+
+    await renderInTestApp(
+      <ApiProvider apis={apis}>
+        <EntityProvider entity={entity}>
+          <CatalogGraphCard action={<Button title="Action Button" />} />
+        </EntityProvider>
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/entity/{kind}/{namespace}/{name}': entityRouteRef,
+          '/catalog-graph': catalogGraphRouteRef,
+        },
+      },
+    );
+
+    expect(await screen.findByTitle('Action Button')).toBeInTheDocument();
+  });
+
   test('renders link to standalone viewer', async () => {
     catalog.getEntitiesByRefs.mockImplementation(async _ => ({
       items: [

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx

@@ -28,7 +28,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import qs from 'qs';
-import React, { MouseEvent, useCallback } from 'react';
+import React, { MouseEvent, ReactNode, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { catalogGraphRouteRef } from '../../routes';
 import {
@@ -63,6 +63,7 @@ export const CatalogGraphCard = (
     variant?: InfoCardVariants;
     height?: number;
     title?: string;
+    action?: ReactNode;
   },
 ) => {
   const {
@@ -77,6 +78,7 @@ export const CatalogGraphCard = (
     entityFilter,
     height,
     className,
+    action,
     rootEntityNames,
     onNodeClick,
     title = 'Relations',
@@ -126,6 +128,7 @@ export const CatalogGraphCard = (
   return (
     <InfoCard
       title={title}
+      action={action}
       cardClassName={classes.card}
       variant={variant}
       noPadding