From 9f9e709aa6ba295c3f4a09b9e33f1f9d7f8ae59d Mon Sep 17 00:00:00 2001 From: Shailendra Ahir Date: Tue, 22 Mar 2022 23:39:50 +0530 Subject: [PATCH 1/4] #8850 Added renderNode and renderLabel props to support custom node and custom label Signed-off-by: Shailendra Ahir --- .../EntityRelationsGraph/EntityRelationsGraph.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index c5c83a54cd..19ca5398a6 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx @@ -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?: any; + renderLabel?: any; }) => { const theme = useTheme(); const classes = useStyles(); @@ -127,8 +131,8 @@ export const EntityRelationsGraph = ({ Date: Wed, 23 Mar 2022 00:03:23 +0530 Subject: [PATCH 2/4] #8850 Added Changeset Signed-off-by: Shailendra Ahir --- .changeset/new-lions-run.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/new-lions-run.md 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 From 704d190c85a1339c54b23d57ab2cd858275f65c3 Mon Sep 17 00:00:00 2001 From: Shailendra Ahir Date: Wed, 23 Mar 2022 08:50:05 +0530 Subject: [PATCH 3/4] #8850 Added prop types and test cases Signed-off-by: Shailendra Ahir --- .../EntityRelationsGraph.test.tsx | 47 +++++++++++++++++++ .../EntityRelationsGraph.tsx | 6 +-- 2 files changed, 50 insertions(+), 3 deletions(-) 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 19ca5398a6..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 => ({ @@ -93,8 +93,8 @@ export const EntityRelationsGraph = ({ relationPairs?: RelationPairs; className?: string; zoom?: 'enabled' | 'disabled' | 'enable-on-click'; - renderNode?: any; - renderLabel?: any; + renderNode?: DependencyGraphTypes.RenderNodeFunction; + renderLabel?: DependencyGraphTypes.RenderLabelFunction; }) => { const theme = useTheme(); const classes = useStyles(); From e230f704dddaa344949afd90bb7042488158033d Mon Sep 17 00:00:00 2001 From: Shailendra Ahir Date: Thu, 24 Mar 2022 08:40:46 +0530 Subject: [PATCH 4/4] #8850 Updated api report Signed-off-by: Shailendra Ahir --- plugins/catalog-graph/api-report.md | 6 ++++++ 1 file changed, 6 insertions(+) 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