diff --git a/.changeset/slow-sloths-do.md b/.changeset/slow-sloths-do.md new file mode 100644 index 0000000000..2d86d477bf --- /dev/null +++ b/.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. diff --git a/plugins/catalog-graph/api-report.md b/plugins/catalog-graph/api-report.md index 95f497fe95..f7444c5f1b 100644 --- a/plugins/catalog-graph/api-report.md +++ b/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 & { + variant?: InfoCardVariants | undefined; + height?: number | undefined; + title?: string | undefined; + }, +) => JSX.Element; // @public export type EntityEdge = DependencyGraphTypes.DependencyEdge; @@ -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) => void) - | undefined; - relationPairs?: RelationPairs | undefined; - className?: string | undefined; - zoom?: 'disabled' | 'enabled' | 'enable-on-click' | undefined; - renderNode?: DependencyGraphTypes.RenderNodeFunction | undefined; - renderLabel?: - | DependencyGraphTypes.RenderLabelFunction - | 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) => void; + relationPairs?: RelationPairs; + className?: string; + zoom?: 'enabled' | 'disabled' | 'enable-on-click'; + renderNode?: DependencyGraphTypes.RenderNodeFunction; + renderLabel?: DependencyGraphTypes.RenderLabelFunction; + curve?: 'curveStepBefore' | 'curveMonotoneX'; +}; // @public export type RelationPairs = [string, string][]; diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 9a46d89da6..ae4ad850a4 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/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( { @@ -55,29 +55,26 @@ const useStyles = makeStyles( { 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 & { + 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) => { const nodeEntityName = parseEntityRef(node.id); const path = catalogEntityRoute({ @@ -133,15 +130,14 @@ export const CatalogGraphCard = (props: { }} > diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index 67aa230ce2..2451f4913a 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/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; renderLabel?: DependencyGraphTypes.RenderLabelFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; -}) => { +}; + +/** + * Core building block for custom entity relations diagrams. + * + * @public + */ +export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { const { rootEntityNames, maxDepth = 2, diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/index.ts b/plugins/catalog-graph/src/components/EntityRelationsGraph/index.ts index b86c8f05ae..06227babe3 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/index.ts +++ b/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';