Merge pull request #7431 from szubster/dependency-graph-type-safety

Documentation and better type safety of DependencyGraph

plugins/catalog-graph/api-report.md

@@ -93,13 +93,23 @@ export const EntityCatalogGraphCard: ({
 }) => JSX.Element;
 
 // @public
-export type EntityEdge = DependencyGraphTypes.DependencyEdge<{
+export type EntityEdge = DependencyGraphTypes.DependencyEdge<EntityEdgeData>;
+
+// Warning: (ae-missing-release-tag) "EntityEdgeData" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export type EntityEdgeData = {
   relations: string[];
   label: 'visible';
-}>;
+};
 
 // @public
-export type EntityNode = DependencyGraphTypes.DependencyNode<{
+export type EntityNode = DependencyGraphTypes.DependencyNode<EntityNodeData>;
+
+// Warning: (ae-missing-release-tag) "EntityNodeData" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export type EntityNodeData = {
   name: string;
   kind?: string;
   title?: string;
@@ -107,7 +117,7 @@ export type EntityNode = DependencyGraphTypes.DependencyNode<{
   focused?: boolean;
   color?: 'primary' | 'secondary' | 'default';
   onClick?: MouseEventHandler<unknown>;
-}>;
+};
 
 // @public
 export const EntityRelationsGraph: ({

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

@@ -31,12 +31,6 @@ describe('<CustomLabel />', () => {
             relations: [RELATION_PARENT_OF],
             from: 'from-id',
             to: 'to-id',
-            id: 'id',
-            x: 111,
-            y: 222,
-            width: 100,
-            height: 25,
-            points: [],
           }}
         />
       </svg>,
@@ -54,12 +48,6 @@ describe('<CustomLabel />', () => {
             relations: [RELATION_PARENT_OF, RELATION_CHILD_OF],
             from: 'from-id',
             to: 'to-id',
-            id: 'id',
-            x: 111,
-            y: 222,
-            width: 100,
-            height: 25,
-            points: [],
           }}
         />
       </svg>,

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

@@ -17,7 +17,7 @@ import { DependencyGraphTypes } from '@backstage/core-components';
 import { BackstageTheme } from '@backstage/theme';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import React from 'react';
-import { GraphEdge } from './types';
+import { EntityEdgeData } from './types';
 import classNames from 'classnames';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
 
 export function CustomLabel({
   edge: { relations },
-}: DependencyGraphTypes.RenderLabelProps<GraphEdge>) {
+}: DependencyGraphTypes.RenderLabelProps<EntityEdgeData>) {
   const classes = useStyles();
   return (
     <text className={classes.text} textAnchor="middle">

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

@@ -36,10 +36,6 @@ describe('<CustomNode />', () => {
             name: 'name',
             namespace: 'namespace',
             id: 'kind:namespace/name',
-            x: 111,
-            y: 222,
-            width: 100,
-            height: 25,
             color: 'primary',
           }}
         />
@@ -59,10 +55,6 @@ describe('<CustomNode />', () => {
             name: 'name',
             namespace: 'default',
             id: 'kind:default/name',
-            x: 111,
-            y: 222,
-            width: 100,
-            height: 25,
           }}
         />
       </svg>,
@@ -83,10 +75,6 @@ describe('<CustomNode />', () => {
             namespace: 'namespace',
             onClick,
             id: 'kind:namespace/name',
-            x: 111,
-            y: 222,
-            width: 100,
-            height: 25,
           }}
         />
       </svg>,
@@ -108,10 +96,6 @@ describe('<CustomNode />', () => {
             namespace: 'namespace',
             title: 'Custom Title',
             id: 'kind:namespace/name',
-            x: 111,
-            y: 222,
-            width: 100,
-            height: 25,
           }}
         />
       </svg>,

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

@@ -20,7 +20,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { EntityKindIcon } from './EntityKindIcon';
-import { GraphNode } from './types';
+import { EntityNodeData } from './types';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   node: {
@@ -65,7 +65,7 @@ export function CustomNode({
     title,
     onClick,
   },
-}: DependencyGraphTypes.RenderNodeProps<GraphNode>) {
+}: DependencyGraphTypes.RenderNodeProps<EntityNodeData>) {
   const classes = useStyles();
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);

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

@@ -17,4 +17,9 @@ export { EntityRelationsGraph } from './EntityRelationsGraph';
 export { ALL_RELATION_PAIRS } from './relations';
 export type { RelationPairs } from './relations';
 export { Direction } from './types';
-export type { EntityEdge, EntityNode } from './types';
+export type {
+  EntityEdgeData,
+  EntityEdge,
+  EntityNodeData,
+  EntityNode,
+} from './types';

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

@@ -17,11 +17,9 @@ import { DependencyGraphTypes } from '@backstage/core-components';
 import { MouseEventHandler } from 'react';
 
 /**
- * Edge between two entities.
- *
- * @public
+ * Additional Data for entities
  */
-export type EntityEdge = DependencyGraphTypes.DependencyEdge<{
+export type EntityEdgeData = {
   /**
    * Up to two relations that are connecting an entity.
    */
@@ -31,14 +29,19 @@ export type EntityEdge = DependencyGraphTypes.DependencyEdge<{
    */
   // Not used, but has to be non empty to draw a label at all!
   label: 'visible';
-}>;
+};
 
 /**
- * Node representing an entity.
+ * Edge between two entities.
  *
  * @public
  */
-export type EntityNode = DependencyGraphTypes.DependencyNode<{
+export type EntityEdge = DependencyGraphTypes.DependencyEdge<EntityEdgeData>;
+
+/**
+ * Additional data for Entity Node
+ */
+export type EntityNodeData = {
   /**
    * Name of the entity.
    */
@@ -68,11 +71,14 @@ export type EntityNode = DependencyGraphTypes.DependencyNode<{
    * Optional click handler.
    */
   onClick?: MouseEventHandler<unknown>;
-}>;
+};
 
-export type GraphEdge = DependencyGraphTypes.GraphEdge<EntityEdge>;
-
-export type GraphNode = DependencyGraphTypes.GraphNode<EntityNode>;
+/**
+ * Node representing an entity.
+ *
+ * @public
+ */
+export type EntityNode = DependencyGraphTypes.DependencyNode<EntityNodeData>;
 
 /**
  * Render direction of the graph.