diff --git a/.changeset/new-lions-run.md b/.changeset/new-lions-run.md new file mode 100644 index 0000000000..8e830b33fa --- /dev/null +++ b/.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 diff --git a/plugins/catalog-graph/api-report.md b/plugins/catalog-graph/api-report.md index 82db1dac3b..d9d8019fd4 100644 --- a/plugins/catalog-graph/api-report.md +++ b/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 | undefined; + renderLabel?: + | DependencyGraphTypes.RenderLabelFunction + | undefined; }) => JSX.Element; // @public diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx index 2bf303bb92..5d9e9b18a6 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx +++ b/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('', () => { let Wrapper: FunctionComponent; let catalog: jest.Mocked; + const CUSTOM_TEST_ID = 'custom-test-id'; beforeAll(() => { Object.defineProperty(window.SVGElement.prototype, 'getBBox', { @@ -378,4 +380,49 @@ describe('', () => { userEvent.click(await findByText('k:d/a1')); expect(onNodeClick).toBeCalledTimes(1); }); + + test('render custom node', async () => { + const renderNode = (props: DependencyGraphTypes.RenderNodeProps) => ( + + {props.node.id} + + + ); + + const { findAllByTestId, container } = await renderInTestApp( + + + , + ); + + 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) => ( + + {`Test-Label${props.edge.label}`} + + + ); + + const { findAllByTestId, findAllByText, container } = await renderInTestApp( + + + , + ); + 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(); + }); }); diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index c5c83a54cd..bf3fbf8f3a 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/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; + renderLabel?: DependencyGraphTypes.RenderLabelFunction; }) => { const theme = useTheme(); const classes = useStyles(); @@ -127,8 +131,8 @@ export const EntityRelationsGraph = ({