paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 32 Packages Projects Releases Wiki Activity

feat: add the entire entity to EntityNodeData

Browse Source 
Signed-off-by: Ben Keil <benkeil.pub@pm.me>
This commit is contained in:
Ben Keil
2023-11-03 22:01:05 +01:00
parent 03b9c28159
commit a604623324
12 changed files with 176 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/long-sheep-exercise.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog-graph': minor
---
Add the entire `Entity` to `EntityNodeData`
plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ import {
EntityNode,
EntityRelationsGraph,
} from '../EntityRelationsGraph';
import { EntityRelationsGraphProps } from '../EntityRelationsGraph/EntityRelationsGraph';
import { EntityRelationsGraphProps } from '../EntityRelationsGraph';
const useStyles = makeStyles<Theme, { height: number | undefined }>(
{
@@ -97,7 +97,7 @@ export const CatalogGraphCard = (
});
analytics.captureEvent(
'click',
node.title ?? humanizeEntityRef(nodeEntityName),
node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),
{ attributes: { to: path } },
);
navigate(path);
plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.test.tsx
+1 -38
View File
@@ -34,44 +34,7 @@ jest.mock('react-router-dom', () => ({
useNavigate: () => navigate,
}));
/*
The tests in this file have been disabled for the following error:
TypeError: Cannot read properties of null (reading 'document')
at document (../../../node_modules/d3-drag/src/nodrag.js:5:19)
at SVGSVGElement.mousedowned (../../../node_modules/d3-zoom/src/zoom.js:279:16)
at SVGSVGElement.call (../../../node_modules/d3-selection/src/selection/on.js:3:14)
at SVGSVGElement.callTheUserObjectsOperation (../../../node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
at invokeEventListeners (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
at SVGElementImpl._dispatch (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
at SVGElementImpl.dispatchEvent (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
at SVGElement.dispatchEvent (../../../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at ../../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:43
at cb (../../../node_modules/@testing-library/react/dist/pure.js:66:16)
at batchedUpdates$1 (../../../node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (../../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.eventWrapper (../../../node_modules/@testing-library/react/dist/pure.js:65:26)
at Object.wrapEvent (../../../node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:29:24)
at Object.dispatchEvent (../../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:22)
at Object.dispatchUIEvent (../../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:24:26)
at Mouse.down (../../../node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:83:34)
at PointerHost.press (../../../node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:39:24)
at pointerAction (../../../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:59:43)
at Object.pointer (../../../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:35:15)
at ../../../node_modules/@testing-library/react/dist/pure.js:59:16
This has started happening after upgrading to the later version of @testing-library/user-event, and the d3-drag library
where it happens seems to be unmaintained. Skipping for now.
https://github.com/d3/d3-drag/issues/79#issuecomment-1631409544
https://github.com/d3/d3-drag/issues/89
*/
// eslint-disable-next-line jest/no-disabled-tests
describe.skip('<CatalogGraphPage/>', () => {
describe('<CatalogGraphPage/>', () => {
let wrapper: JSX.Element;
const entityC = {
apiVersion: 'a',
plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.test.tsx → plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.test.tsx
+3 -3
View File
@@ -20,13 +20,13 @@ import {
} from '@backstage/catalog-model';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { CustomLabel } from './CustomLabel';
import { DefaultRenderLabel } from './DefaultRenderLabel';
describe('<CustomLabel />', () => {
test('renders label', () => {
render(
<svg xmlns="http://www.w3.org/2000/svg">
<CustomLabel
<DefaultRenderLabel
edge={{
label: 'visible',
relations: [RELATION_PARENT_OF],
@@ -43,7 +43,7 @@ describe('<CustomLabel />', () => {
test('renders label with multiple relations', () => {
render(
<svg xmlns="http://www.w3.org/2000/svg">
<CustomLabel
<DefaultRenderLabel
edge={{
label: 'visible',
relations: [RELATION_PARENT_OF, RELATION_CHILD_OF],
plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx → plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderLabel.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const useStyles = makeStyles(
{ name: 'PluginCatalogGraphCustomLabel' },
);
export function CustomLabel({
export function DefaultRenderLabel({
edge: { relations },
}: DependencyGraphTypes.RenderLabelProps<EntityEdgeData>) {
const classes = useStyles();
plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.test.tsx → plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.test.tsx
+43 -23
View File
@@ -17,20 +17,25 @@
import { renderInTestApp } from '@backstage/test-utils';
import { screen } from '@testing-library/react';
import React from 'react';
import { CustomNode } from './CustomNode';
import { DefaultRenderNode } from './DefaultRenderNode';
import userEvent from '@testing-library/user-event';
describe('<CustomNode />', () => {
test('renders node', async () => {
await renderInTestApp(
<svg xmlns="http://www.w3.org/2000/svg">
<CustomNode
<DefaultRenderNode
node={{
focused: false,
kind: 'kind',
name: 'name',
namespace: 'namespace',
id: 'kind:namespace/name',
entity: {
kind: 'kind',
apiVersion: 'v1',
metadata: {
name: 'name',
namespace: 'namespace',
},
},
focused: false,
color: 'primary',
}}
/>
@@ -43,13 +48,18 @@ describe('<CustomNode />', () => {
test('renders node, skips default namespace', async () => {
await renderInTestApp(
<svg xmlns="http://www.w3.org/2000/svg">
<CustomNode
<DefaultRenderNode
node={{
focused: false,
kind: 'kind',
name: 'name',
namespace: 'default',
id: 'kind:default/name',
entity: {
kind: 'kind',
apiVersion: 'v1',
metadata: {
name: 'name',
namespace: 'default',
},
},
focused: false,
}}
/>
</svg>,
@@ -62,14 +72,19 @@ describe('<CustomNode />', () => {
const onClick = jest.fn();
await renderInTestApp(
<svg xmlns="http://www.w3.org/2000/svg">
<CustomNode
<DefaultRenderNode
node={{
focused: false,
kind: 'kind',
name: 'name',
namespace: 'namespace',
onClick,
id: 'kind:namespace/name',
entity: {
kind: 'kind',
apiVersion: 'v1',
metadata: {
name: 'name',
namespace: 'namespace',
},
},
focused: false,
onClick,
}}
/>
</svg>,
@@ -83,14 +98,19 @@ describe('<CustomNode />', () => {
test('renders title if entity has one', async () => {
await renderInTestApp(
<svg xmlns="http://www.w3.org/2000/svg">
<CustomNode
<DefaultRenderNode
node={{
focused: false,
kind: 'kind',
name: 'name',
namespace: 'namespace',
title: 'Custom Title',
id: 'kind:namespace/name',
entity: {
kind: 'kind',
apiVersion: 'v1',
metadata: {
name: 'name',
namespace: 'namespace',
title: 'Custom Title',
},
},
focused: false,
}}
/>
</svg>,
plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx → plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx
+8 -11
View File
@@ -20,6 +20,7 @@ import classNames from 'classnames';
import React, { useLayoutEffect, useRef, useState } from 'react';
import { EntityKindIcon } from './EntityKindIcon';
import { EntityNodeData } from './types';
import { DEFAULT_NAMESPACE } from '@backstage/catalog-model';
const useStyles = makeStyles(
theme => ({
@@ -56,17 +57,8 @@ const useStyles = makeStyles(
{ name: 'PluginCatalogGraphCustomNode' },
);
export function CustomNode({
node: {
id,
kind,
namespace,
name,
color = 'default',
focused,
title,
onClick,
},
export function DefaultRenderNode({
node: { id, entity, color = 'default', focused, onClick },
}: DependencyGraphTypes.RenderNodeProps<EntityNodeData>) {
const classes = useStyles();
const [width, setWidth] = useState(0);
@@ -88,6 +80,11 @@ export function CustomNode({
}
}, [width, height]);
const {
kind,
metadata: { name, namespace = DEFAULT_NAMESPACE, title },
} = entity;
const padding = 10;
const iconSize = height;
const paddedIconWidth = kind ? iconSize + padding : 0;
plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx
+1 -38
View File
@@ -29,44 +29,7 @@ import userEvent from '@testing-library/user-event';
import React, { FunctionComponent } from 'react';
import { EntityRelationsGraph } from './EntityRelationsGraph';
/*
The tests in this file have been disabled for the following error:
TypeError: Cannot read properties of null (reading 'document')
at document (../../../node_modules/d3-drag/src/nodrag.js:5:19)
at SVGSVGElement.mousedowned (../../../node_modules/d3-zoom/src/zoom.js:279:16)
at SVGSVGElement.call (../../../node_modules/d3-selection/src/selection/on.js:3:14)
at SVGSVGElement.callTheUserObjectsOperation (../../../node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
at invokeEventListeners (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
at SVGElementImpl._dispatch (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
at SVGElementImpl.dispatchEvent (../../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
at SVGElement.dispatchEvent (../../../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at ../../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:43
at cb (../../../node_modules/@testing-library/react/dist/pure.js:66:16)
at batchedUpdates$1 (../../../node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (../../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.eventWrapper (../../../node_modules/@testing-library/react/dist/pure.js:65:26)
at Object.wrapEvent (../../../node_modules/@testing-library/user-event/dist/cjs/event/wrapEvent.js:29:24)
at Object.dispatchEvent (../../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:47:22)
at Object.dispatchUIEvent (../../../node_modules/@testing-library/user-event/dist/cjs/event/dispatchEvent.js:24:26)
at Mouse.down (../../../node_modules/@testing-library/user-event/dist/cjs/system/pointer/mouse.js:83:34)
at PointerHost.press (../../../node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:39:24)
at pointerAction (../../../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:59:43)
at Object.pointer (../../../node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:35:15)
at ../../../node_modules/@testing-library/react/dist/pure.js:59:16
This has started happening after upgrading to the later version of @testing-library/user-event, and the d3-drag library
where it happens seems to be unmaintained. Skipping for now.
https://github.com/d3/d3-drag/issues/79#issuecomment-1631409544
https://github.com/d3/d3-drag/issues/89
*/
// eslint-disable-next-line jest/no-disabled-tests
describe.skip('<EntityRelationsGraph/>', () => {
describe('<EntityRelationsGraph/>', () => {
let Wrapper: FunctionComponent<React.PropsWithChildren<{}>>;
const entities: { [ref: string]: Entity } = {
'b:d/c': {
plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
+5 -5
View File
@@ -26,8 +26,8 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api';
import { CircularProgress, makeStyles, useTheme } from '@material-ui/core';
import classNames from 'classnames';
import React, { MouseEvent, useEffect, useMemo } from 'react';
import { CustomLabel } from './CustomLabel';
import { CustomNode } from './CustomNode';
import { DefaultRenderLabel } from './DefaultRenderLabel';
import { DefaultRenderNode } from './DefaultRenderNode';
import { ALL_RELATION_PAIRS, RelationPairs } from './relations';
import { Direction, EntityEdge, EntityNode } from './types';
import { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';
@@ -51,7 +51,7 @@ const useStyles = makeStyles(
width: '100%',
flex: 1,
// Right now there is no good way to style edges between nodes, we have to
// fallback to these hacks:
// fall back to these hacks:
'& path[marker-end]': {
transition: 'filter 0.1s ease-in-out',
},
@@ -144,8 +144,8 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {
<DependencyGraph
nodes={nodes}
edges={edges}
renderNode={renderNode || CustomNode}
renderLabel={renderLabel || CustomLabel}
renderNode={renderNode || DefaultRenderNode}
renderLabel={renderLabel || DefaultRenderLabel}
direction={direction}
className={classes.graph}
paddingX={theme.spacing(4)}
plugins/catalog-graph/src/components/EntityRelationsGraph/types.ts
+3 -19
View File
@@ -15,8 +15,8 @@
*/
import { DependencyGraphTypes } from '@backstage/core-components';
import { JsonObject } from '@backstage/types';
import { MouseEventHandler } from 'react';
import { Entity } from '@backstage/catalog-model/';
/**
* Additional Data for entities.
@@ -49,25 +49,9 @@ export type EntityEdge = DependencyGraphTypes.DependencyEdge<EntityEdgeData>;
*/
export type EntityNodeData = {
/**
* Name of the entity.
* The Entity
*/
name: string;
/**
* Optional kind of the entity.
*/
kind?: string;
/**
* Optional title of the entity.
*/
title?: string;
/**
* Namespace of the entity.
*/
namespace: string;
/**
* Optional spec of the entity.
*/
spec?: JsonObject;
entity: Entity;
/**
* Whether the entity is focused, optional, defaults to false. Focused
* entities are highlighted in the graph.
plugins/catalog-graph/src/components/EntityRelationsGraph/useEntityRelationNodesAndEdges.test.ts
+103 -156
View File
@@ -32,83 +32,83 @@ const useEntityRelationGraph = useEntityRelationGraphMocked as jest.Mock<
ReturnType<typeof useEntityRelationGraphMocked>
>;
const entities: { [ref: string]: Entity } = {
'b:d/c': {
apiVersion: 'a',
kind: 'b',
metadata: {
name: 'c',
namespace: 'd',
},
relations: [
{
targetRef: 'k:d/a1',
type: RELATION_OWNER_OF,
},
{
targetRef: 'b:d/c1',
type: RELATION_HAS_PART,
},
],
},
'k:d/a1': {
apiVersion: 'a',
kind: 'k',
metadata: {
name: 'a1',
namespace: 'd',
},
relations: [
{
targetRef: 'b:d/c',
type: RELATION_OWNED_BY,
},
{
targetRef: 'b:d/c1',
type: RELATION_OWNED_BY,
},
],
},
'b:d/c1': {
apiVersion: 'a',
kind: 'b',
metadata: {
name: 'c1',
namespace: 'd',
},
relations: [
{
targetRef: 'b:d/c',
type: RELATION_PART_OF,
},
{
targetRef: 'k:d/a1',
type: RELATION_OWNER_OF,
},
{
targetRef: 'b:d/c2',
type: RELATION_HAS_PART,
},
],
},
'b:d/c2': {
apiVersion: 'a',
kind: 'b',
metadata: {
name: 'c2',
namespace: 'd',
},
relations: [
{
targetRef: 'b:d/c1',
type: RELATION_PART_OF,
},
],
},
};
describe('useEntityRelationNodesAndEdges', () => {
beforeEach(() => {
const entities: { [ref: string]: Entity } = {
'b:d/c': {
apiVersion: 'a',
kind: 'b',
metadata: {
name: 'c',
namespace: 'd',
},
relations: [
{
targetRef: 'k:d/a1',
type: RELATION_OWNER_OF,
},
{
targetRef: 'b:d/c1',
type: RELATION_HAS_PART,
},
],
},
'k:d/a1': {
apiVersion: 'a',
kind: 'k',
metadata: {
name: 'a1',
namespace: 'd',
},
relations: [
{
targetRef: 'b:d/c',
type: RELATION_OWNED_BY,
},
{
targetRef: 'b:d/c1',
type: RELATION_OWNED_BY,
},
],
},
'b:d/c1': {
apiVersion: 'a',
kind: 'b',
metadata: {
name: 'c1',
namespace: 'd',
},
relations: [
{
targetRef: 'b:d/c',
type: RELATION_PART_OF,
},
{
targetRef: 'k:d/a1',
type: RELATION_OWNER_OF,
},
{
targetRef: 'b:d/c2',
type: RELATION_HAS_PART,
},
],
},
'b:d/c2': {
apiVersion: 'a',
kind: 'b',
metadata: {
name: 'c2',
namespace: 'd',
},
relations: [
{
targetRef: 'b:d/c1',
type: RELATION_PART_OF,
},
],
},
};
useEntityRelationGraph.mockImplementation(({ filter: { kinds } }) => ({
loading: false,
entities: keyBy(
@@ -184,33 +184,25 @@ describe('useEntityRelationNodesAndEdges', () => {
color: 'secondary',
focused: true,
id: 'b:d/c',
kind: 'b',
name: 'c',
namespace: 'd',
entity: entities['b:d/c'],
},
{
color: 'primary',
focused: false,
id: 'k:d/a1',
kind: 'k',
name: 'a1',
namespace: 'd',
entity: entities['k:d/a1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c1',
kind: 'b',
name: 'c1',
namespace: 'd',
entity: entities['b:d/c1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c2',
kind: 'b',
name: 'c2',
namespace: 'd',
entity: entities['b:d/c2'],
},
]);
expect(edges).toEqual([
@@ -257,33 +249,25 @@ describe('useEntityRelationNodesAndEdges', () => {
color: 'secondary',
focused: true,
id: 'b:d/c',
kind: 'b',
name: 'c',
namespace: 'd',
entity: entities['b:d/c'],
},
{
color: 'primary',
focused: false,
id: 'k:d/a1',
kind: 'k',
name: 'a1',
namespace: 'd',
entity: entities['k:d/a1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c1',
kind: 'b',
name: 'c1',
namespace: 'd',
entity: entities['b:d/c1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c2',
kind: 'b',
name: 'c2',
namespace: 'd',
entity: entities['b:d/c2'],
},
]);
expect(edges).toEqual([
@@ -330,33 +314,25 @@ describe('useEntityRelationNodesAndEdges', () => {
color: 'secondary',
focused: true,
id: 'b:d/c',
kind: 'b',
name: 'c',
namespace: 'd',
entity: entities['b:d/c'],
},
{
color: 'primary',
focused: false,
id: 'k:d/a1',
kind: 'k',
name: 'a1',
namespace: 'd',
entity: entities['k:d/a1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c1',
kind: 'b',
name: 'c1',
namespace: 'd',
entity: entities['b:d/c1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c2',
kind: 'b',
name: 'c2',
namespace: 'd',
entity: entities['b:d/c2'],
},
]);
expect(edges).toEqual([
@@ -433,33 +409,25 @@ describe('useEntityRelationNodesAndEdges', () => {
color: 'secondary',
focused: true,
id: 'b:d/c',
kind: 'b',
name: 'c',
namespace: 'd',
entity: entities['b:d/c'],
},
{
color: 'primary',
focused: false,
id: 'k:d/a1',
kind: 'k',
name: 'a1',
namespace: 'd',
entity: entities['k:d/a1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c1',
kind: 'b',
name: 'c1',
namespace: 'd',
entity: entities['b:d/c1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c2',
kind: 'b',
name: 'c2',
namespace: 'd',
entity: entities['b:d/c2'],
},
]);
expect(edges).toEqual([
@@ -534,33 +502,25 @@ describe('useEntityRelationNodesAndEdges', () => {
color: 'secondary',
focused: true,
id: 'b:d/c',
kind: 'b',
name: 'c',
namespace: 'd',
entity: entities['b:d/c'],
},
{
color: 'primary',
focused: false,
id: 'k:d/a1',
kind: 'k',
name: 'a1',
namespace: 'd',
entity: entities['k:d/a1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c1',
kind: 'b',
name: 'c1',
namespace: 'd',
entity: entities['b:d/c1'],
},
{
color: 'secondary',
focused: true,
id: 'b:d/c2',
kind: 'b',
name: 'c2',
namespace: 'd',
entity: entities['b:d/c2'],
},
]);
expect(edges).toEqual([
@@ -606,33 +566,25 @@ describe('useEntityRelationNodesAndEdges', () => {
color: 'secondary',
focused: true,
id: 'b:d/c',
kind: 'b',
name: 'c',
namespace: 'd',
entity: entities['b:d/c'],
},
{
color: 'primary',
focused: false,
id: 'k:d/a1',
kind: 'k',
name: 'a1',
namespace: 'd',
entity: entities['k:d/a1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c1',
kind: 'b',
name: 'c1',
namespace: 'd',
entity: entities['b:d/c1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c2',
kind: 'b',
name: 'c2',
namespace: 'd',
entity: entities['b:d/c2'],
},
]);
expect(edges).toEqual([
@@ -658,6 +610,7 @@ describe('useEntityRelationNodesAndEdges', () => {
});
const { nodes, edges, loading, error } = result.current;
// nodes?.sort((a, b) => a.id.localeCompare(b.id));
expect(loading).toBe(false);
expect(error).toBeUndefined();
@@ -666,25 +619,19 @@ describe('useEntityRelationNodesAndEdges', () => {
color: 'secondary',
focused: true,
id: 'b:d/c',
kind: 'b',
name: 'c',
namespace: 'd',
entity: entities['b:d/c'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c1',
kind: 'b',
name: 'c1',
namespace: 'd',
entity: entities['b:d/c1'],
},
{
color: 'primary',
focused: false,
id: 'b:d/c2',
kind: 'b',
name: 'c2',
namespace: 'd',
entity: entities['b:d/c2'],
},
]);
expect(edges).toEqual([
plugins/catalog-graph/src/components/EntityRelationsGraph/useEntityRelationNodesAndEdges.ts
+1 -6
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DEFAULT_NAMESPACE } from '@backstage/catalog-model';
import { MouseEvent, useState } from 'react';
import useDebounce from 'react-use/lib/useDebounce';
import { RelationPairs, ALL_RELATION_PAIRS } from './relations';
@@ -71,11 +70,7 @@ export function useEntityRelationNodesAndEdges({
const focused = rootEntityRefs.includes(entityRef);
const node: EntityNode = {
id: entityRef,
title: entity.metadata?.title ?? undefined,
kind: entity.kind,
name: entity.metadata.name,
namespace: entity.metadata.namespace ?? DEFAULT_NAMESPACE,
spec: entity.spec ?? undefined,
entity,
focused,
color: focused ? 'secondary' : 'primary',
};