Merge pull request #16126 from sennyeya/graph-icons

Expose all props available to underlying `EntityRelationsGraph` on the `CatalogGraphCard`.

.changeset/slow-sloths-do.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Expose additional props on the `CatalogGraphCard` to allow for custom node & label rendering or kind/relation filtering.

plugins/catalog-graph/api-report.md

@@ -65,19 +65,13 @@ export enum Direction {
 }
 
 // @public
-export const EntityCatalogGraphCard: (props: {
-  variant?: InfoCardVariants | undefined;
-  relationPairs?: RelationPairs | undefined;
-  maxDepth?: number | undefined;
-  unidirectional?: boolean | undefined;
-  mergeRelations?: boolean | undefined;
-  kinds?: string[] | undefined;
-  relations?: string[] | undefined;
-  direction?: Direction | undefined;
-  height?: number | undefined;
-  title?: string | undefined;
-  zoom?: 'disabled' | 'enabled' | 'enable-on-click' | undefined;
-}) => JSX.Element;
+export const EntityCatalogGraphCard: (
+  props: Partial<EntityRelationsGraphProps> & {
+    variant?: InfoCardVariants | undefined;
+    height?: number | undefined;
+    title?: string | undefined;
+  },
+) => JSX.Element;
 
 // @public
 export type EntityEdge = DependencyGraphTypes.DependencyEdge<EntityEdgeData>;
@@ -103,26 +97,27 @@ export type EntityNodeData = {
 };
 
 // @public
-export const EntityRelationsGraph: (props: {
+export const EntityRelationsGraph: (
+  props: EntityRelationsGraphProps,
+) => JSX.Element;
+
+// @public (undocumented)
+export type EntityRelationsGraphProps = {
   rootEntityNames: CompoundEntityRef | CompoundEntityRef[];
-  maxDepth?: number | undefined;
-  unidirectional?: boolean | undefined;
-  mergeRelations?: boolean | undefined;
-  kinds?: string[] | undefined;
-  relations?: string[] | undefined;
-  direction?: Direction | undefined;
-  onNodeClick?:
-    | ((value: EntityNode, event: MouseEvent_2<unknown>) => void)
-    | undefined;
-  relationPairs?: RelationPairs | undefined;
-  className?: string | undefined;
-  zoom?: 'disabled' | 'enabled' | 'enable-on-click' | undefined;
-  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode> | undefined;
-  renderLabel?:
-    | DependencyGraphTypes.RenderLabelFunction<EntityEdge>
-    | undefined;
-  curve?: 'curveStepBefore' | 'curveMonotoneX' | undefined;
-}) => JSX.Element;
+  maxDepth?: number;
+  unidirectional?: boolean;
+  mergeRelations?: boolean;
+  kinds?: string[];
+  relations?: string[];
+  direction?: Direction;
+  onNodeClick?: (value: EntityNode, event: MouseEvent_2<unknown>) => void;
+  relationPairs?: RelationPairs;
+  className?: string;
+  zoom?: 'enabled' | 'disabled' | 'enable-on-click';
+  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
+  renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
+  curve?: 'curveStepBefore' | 'curveMonotoneX';
+};
 
 // @public
 export type RelationPairs = [string, string][];

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

@@ -36,8 +36,8 @@ import {
   Direction,
   EntityNode,
   EntityRelationsGraph,
-  RelationPairs,
 } from '../EntityRelationsGraph';
+import { EntityRelationsGraphProps } from '../EntityRelationsGraph/EntityRelationsGraph';
 
 const useStyles = makeStyles<Theme, { height: number | undefined }>(
   {
@@ -55,29 +55,26 @@ const useStyles = makeStyles<Theme, { height: number | undefined }>(
   { name: 'PluginCatalogGraphCatalogGraphCard' },
 );
 
-export const CatalogGraphCard = (props: {
-  variant?: InfoCardVariants;
-  relationPairs?: RelationPairs;
-  maxDepth?: number;
-  unidirectional?: boolean;
-  mergeRelations?: boolean;
-  kinds?: string[];
-  relations?: string[];
-  direction?: Direction;
-  height?: number;
-  title?: string;
-  zoom?: 'enabled' | 'disabled' | 'enable-on-click';
-}) => {
+export const CatalogGraphCard = (
+  props: Partial<EntityRelationsGraphProps> & {
+    variant?: InfoCardVariants;
+    height?: number;
+    title?: string;
+  },
+) => {
   const {
     variant = 'gridItem',
     relationPairs = ALL_RELATION_PAIRS,
     maxDepth = 1,
     unidirectional = true,
     mergeRelations = true,
+    direction = Direction.LEFT_RIGHT,
     kinds,
     relations,
-    direction = Direction.LEFT_RIGHT,
     height,
+    className,
+    rootEntityNames,
+    onNodeClick,
     title = 'Relations',
     zoom = 'enable-on-click',
   } = props;
@@ -90,7 +87,7 @@ export const CatalogGraphCard = (props: {
   const classes = useStyles({ height });
   const analytics = useAnalytics();
 
-  const onNodeClick = useCallback(
+  const defaultOnNodeClick = useCallback(
     (node: EntityNode, _: MouseEvent<unknown>) => {
       const nodeEntityName = parseEntityRef(node.id);
       const path = catalogEntityRoute({
@@ -133,15 +130,14 @@ export const CatalogGraphCard = (props: {
       }}
     >
       <EntityRelationsGraph
-        rootEntityNames={entityName}
+        {...props}
+        rootEntityNames={rootEntityNames || entityName}
+        onNodeClick={onNodeClick || defaultOnNodeClick}
+        className={className || classes.graph}
         maxDepth={maxDepth}
         unidirectional={unidirectional}
         mergeRelations={mergeRelations}
-        kinds={kinds}
-        relations={relations}
         direction={direction}
-        onNodeClick={onNodeClick}
-        className={classes.graph}
         relationPairs={relationPairs}
         zoom={zoom}
       />

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

@@ -67,11 +67,9 @@ const useStyles = makeStyles(
 );
 
 /**
- * Core building block for custom entity relations diagrams.
- *
  * @public
  */
-export const EntityRelationsGraph = (props: {
+export type EntityRelationsGraphProps = {
   rootEntityNames: CompoundEntityRef | CompoundEntityRef[];
   maxDepth?: number;
   unidirectional?: boolean;
@@ -86,7 +84,14 @@ export const EntityRelationsGraph = (props: {
   renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
   curve?: 'curveStepBefore' | 'curveMonotoneX';
-}) => {
+};
+
+/**
+ * Core building block for custom entity relations diagrams.
+ *
+ * @public
+ */
+export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {
   const {
     rootEntityNames,
     maxDepth = 2,

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 export { EntityRelationsGraph } from './EntityRelationsGraph';
+export type { EntityRelationsGraphProps } from './EntityRelationsGraph';
 export { ALL_RELATION_PAIRS } from './relations';
 export type { RelationPairs } from './relations';
 export { Direction } from './types';