Merge pull request #18711 from gluckzhang/pass-entity-spec-to-graph-node

propagate entity spec to EntityNode

.changeset/chatty-foxes-buy.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Propagate entity spec to EntityNode so that spec info such as type can be used for graph node customization

plugins/catalog-graph/api-report.md

@@ -10,6 +10,7 @@ import { CompoundEntityRef } from '@backstage/catalog-model';
 import { DependencyGraphTypes } from '@backstage/core-components';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { InfoCardVariants } from '@backstage/core-components';
+import { JsonObject } from '@backstage/types';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
@@ -92,6 +93,7 @@ export type EntityNodeData = {
   kind?: string;
   title?: string;
   namespace: string;
+  spec?: JsonObject;
   focused?: boolean;
   color?: 'primary' | 'secondary' | 'default';
   onClick?: MouseEventHandler<unknown>;

plugins/catalog-graph/package.json

@@ -27,6 +27,7 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
+    "@backstage/types": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
@@ -49,7 +50,6 @@
     "@backstage/dev-utils": "workspace:^",
     "@backstage/plugin-catalog": "workspace:^",
     "@backstage/test-utils": "workspace:^",
-    "@backstage/types": "workspace:^",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",

plugins/catalog-graph/src/components/EntityRelationsGraph/types.ts

@@ -15,6 +15,7 @@
  */
 
 import { DependencyGraphTypes } from '@backstage/core-components';
+import { JsonObject } from '@backstage/types';
 import { MouseEventHandler } from 'react';
 
 /**
@@ -63,6 +64,10 @@ export type EntityNodeData = {
    * Namespace of the entity.
    */
   namespace: string;
+  /**
+   * Optional spec of the entity.
+   */
+  spec?: JsonObject;
   /**
    * Whether the entity is focused, optional, defaults to false. Focused
    * entities are highlighted in the graph.

plugins/catalog-graph/src/components/EntityRelationsGraph/useEntityRelationNodesAndEdges.ts

@@ -75,6 +75,7 @@ export function useEntityRelationNodesAndEdges({
           kind: entity.kind,
           name: entity.metadata.name,
           namespace: entity.metadata.namespace ?? DEFAULT_NAMESPACE,
+          spec: entity.spec ?? undefined,
           focused,
           color: focused ? 'secondary' : 'primary',
         };