Merge pull request #10373 from shailahir/feature/8850-add-graph-props

#8850 Added renderNode and renderLabel props to support custom node a…

.changeset/new-lions-run.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Added renderNode and renderLabel property to EntityRelationsGraph to support customization using CustomNode and CustomLabel components

plugins/catalog-graph/api-report.md

@@ -128,6 +128,8 @@ export const EntityRelationsGraph: ({
   relationPairs,
   className,
   zoom,
+  renderNode,
+  renderLabel,
 }: {
   rootEntityNames: CompoundEntityRef | CompoundEntityRef[];
   maxDepth?: number | undefined;
@@ -142,6 +144,10 @@ export const EntityRelationsGraph: ({
   relationPairs?: RelationPairs | undefined;
   className?: string | undefined;
   zoom?: 'disabled' | 'enabled' | 'enable-on-click' | undefined;
+  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode> | undefined;
+  renderLabel?:
+    | DependencyGraphTypes.RenderLabelFunction<EntityEdge>
+    | undefined;
 }) => JSX.Element;
 
 // @public

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

@@ -21,6 +21,7 @@ import {
   RELATION_OWNER_OF,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
+import { DependencyGraphTypes } from '@backstage/core-components';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import userEvent from '@testing-library/user-event';
@@ -30,6 +31,7 @@ import { EntityRelationsGraph } from './EntityRelationsGraph';
 describe('<EntityRelationsGraph/>', () => {
   let Wrapper: FunctionComponent;
   let catalog: jest.Mocked<CatalogApi>;
+  const CUSTOM_TEST_ID = 'custom-test-id';
 
   beforeAll(() => {
     Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
@@ -378,4 +380,49 @@ describe('<EntityRelationsGraph/>', () => {
     userEvent.click(await findByText('k:d/a1'));
     expect(onNodeClick).toBeCalledTimes(1);
   });
+
+  test('render custom node', async () => {
+    const renderNode = (props: DependencyGraphTypes.RenderNodeProps) => (
+      <g>
+        <text>{props.node.id}</text>
+        <circle data-testid={CUSTOM_TEST_ID} r={100} />
+      </g>
+    );
+
+    const { findAllByTestId, container } = await renderInTestApp(
+      <Wrapper>
+        <EntityRelationsGraph
+          rootEntityNames={{ kind: 'b', namespace: 'd', name: 'c' }}
+          renderNode={renderNode}
+        />
+      </Wrapper>,
+    );
+
+    const node = await findAllByTestId(CUSTOM_TEST_ID);
+    expect(node[0]).toBeInTheDocument();
+    expect(container.querySelector('circle')).toBeInTheDocument();
+  });
+
+  test('render custom label', async () => {
+    const renderLabel = (props: DependencyGraphTypes.RenderLabelProps) => (
+      <g>
+        <text>{`Test-Label${props.edge.label}`}</text>
+        <circle data-testid={CUSTOM_TEST_ID} r={100} />
+      </g>
+    );
+
+    const { findAllByTestId, findAllByText, container } = await renderInTestApp(
+      <Wrapper>
+        <EntityRelationsGraph
+          rootEntityNames={{ kind: 'b', namespace: 'd', name: 'c' }}
+          renderLabel={renderLabel}
+        />
+      </Wrapper>,
+    );
+    const node = await findAllByTestId(CUSTOM_TEST_ID);
+    expect(node[0]).toBeInTheDocument();
+    expect(container.querySelector('circle')).toBeInTheDocument();
+    const labels = await findAllByText('Test-Labelvisible');
+    expect(labels[0]).toBeInTheDocument();
+  });
 });

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

@@ -28,7 +28,7 @@ import React, { MouseEvent, useEffect, useMemo } from 'react';
 import { CustomLabel } from './CustomLabel';
 import { CustomNode } from './CustomNode';
 import { ALL_RELATION_PAIRS, RelationPairs } from './relations';
-import { Direction, EntityNode } from './types';
+import { Direction, EntityEdge, EntityNode } from './types';
 import { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';
 
 const useStyles = makeStyles(theme => ({
@@ -79,6 +79,8 @@ export const EntityRelationsGraph = ({
   relationPairs = ALL_RELATION_PAIRS,
   className,
   zoom = 'enabled',
+  renderNode,
+  renderLabel,
 }: {
   rootEntityNames: CompoundEntityRef | CompoundEntityRef[];
   maxDepth?: number;
@@ -91,6 +93,8 @@ export const EntityRelationsGraph = ({
   relationPairs?: RelationPairs;
   className?: string;
   zoom?: 'enabled' | 'disabled' | 'enable-on-click';
+  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
+  renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
 }) => {
   const theme = useTheme();
   const classes = useStyles();
@@ -127,8 +131,8 @@ export const EntityRelationsGraph = ({
         <DependencyGraph
           nodes={nodes}
           edges={edges}
-          renderNode={CustomNode}
-          renderLabel={CustomLabel}
+          renderNode={renderNode || CustomNode}
+          renderLabel={renderLabel || CustomLabel}
           direction={direction}
           className={classes.graph}
           paddingX={theme.spacing(4)}