From 8657e0f05c1a8fa0e94153f8e6a0c948eb745db6 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Wed, 1 Feb 2023 17:31:08 -0500 Subject: [PATCH 1/8] Expose all props available to underlying EntityRelationsGraph. Signed-off-by: Aramis Sennyey --- .../CatalogGraphCard/CatalogGraphCard.tsx | 27 +++++++------------ .../EntityRelationsGraph.tsx | 16 ++++++----- 2 files changed, 18 insertions(+), 25 deletions(-) diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index b9a15eb569..0266693696 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,27 +55,19 @@ 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: Omit & { + variant?: InfoCardVariants; + height?: number; + title?: string; + }, +) => { const { variant = 'gridItem', relationPairs = ALL_RELATION_PAIRS, maxDepth = 1, unidirectional = true, mergeRelations = true, - kinds, - relations, direction = Direction.LEFT_RIGHT, height, title = 'Relations', @@ -133,12 +125,11 @@ export const CatalogGraphCard = (props: { }} > ; renderLabel?: DependencyGraphTypes.RenderLabelFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; -}) => { +} + +/** + * Core building block for custom entity relations diagrams. + * + * @public + */ +export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { const { rootEntityNames, maxDepth = 2, From 4365ae46e4dcb43c0688491d9ec3dbe55d1bfbb7 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Wed, 1 Feb 2023 17:37:50 -0500 Subject: [PATCH 2/8] Remove items that are overriden in passed props. Signed-off-by: Aramis Sennyey --- .../src/components/CatalogGraphCard/CatalogGraphCard.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 0266693696..e646cc7cfa 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -56,7 +56,10 @@ const useStyles = makeStyles( ); export const CatalogGraphCard = ( - props: Omit & { + props: Omit< + EntityRelationsGraphProps, + 'rootEntityNames' | 'onNodeClick' | 'className' + > & { variant?: InfoCardVariants; height?: number; title?: string; From 18277101362b9f51bd7a7598d44436fa07ed7e46 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Wed, 1 Feb 2023 17:41:45 -0500 Subject: [PATCH 3/8] Add changeset. Signed-off-by: Aramis Sennyey --- .changeset/slow-sloths-do.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slow-sloths-do.md diff --git a/.changeset/slow-sloths-do.md b/.changeset/slow-sloths-do.md new file mode 100644 index 0000000000..7d9cc263de --- /dev/null +++ b/.changeset/slow-sloths-do.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-graph': minor +--- + +Expose additional props on the CatalogGraphCard to allow for custom node & label rendering or kind/relation filtering. From a6dba7dde1f9e6619fd071a021119888815907d1 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Thu, 2 Feb 2023 15:28:25 -0500 Subject: [PATCH 4/8] Add back destructured kinds and relations. Signed-off-by: Aramis Sennyey --- .../src/components/CatalogGraphCard/CatalogGraphCard.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index e646cc7cfa..03b346e5ec 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -72,6 +72,8 @@ export const CatalogGraphCard = ( unidirectional = true, mergeRelations = true, direction = Direction.LEFT_RIGHT, + kinds, + relations, height, title = 'Relations', zoom = 'enable-on-click', From 21c31d742a4da3860f9f7f6b450ea77ddb9fe2e1 Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Fri, 3 Feb 2023 10:18:19 -0500 Subject: [PATCH 5/8] Prefer type and expose in public API. Signed-off-by: Aramis Sennyey --- plugins/catalog-graph/api-report.md | 62 +++++++++---------- .../CatalogGraphCard/CatalogGraphCard.tsx | 4 +- .../EntityRelationsGraph.tsx | 7 ++- .../components/EntityRelationsGraph/index.ts | 1 + 4 files changed, 38 insertions(+), 36 deletions(-) diff --git a/plugins/catalog-graph/api-report.md b/plugins/catalog-graph/api-report.md index 95f497fe95..0f4b4170ad 100644 --- a/plugins/catalog-graph/api-report.md +++ b/plugins/catalog-graph/api-report.md @@ -65,19 +65,16 @@ 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: Omit< + EntityRelationsGraphProps, + 'className' | 'onNodeClick' | 'rootEntityNames' + > & { + variant?: InfoCardVariants | undefined; + height?: number | undefined; + title?: string | undefined; + }, +) => JSX.Element; // @public export type EntityEdge = DependencyGraphTypes.DependencyEdge; @@ -103,26 +100,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 03b346e5ec..a97be534f8 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -132,12 +132,12 @@ export const CatalogGraphCard = ( diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index a9fc9960ff..2451f4913a 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx @@ -66,7 +66,10 @@ const useStyles = makeStyles( { name: 'PluginCatalogGraphEntityRelationsGraph' }, ); -export interface EntityRelationsGraphProps { +/** + * @public + */ +export type EntityRelationsGraphProps = { rootEntityNames: CompoundEntityRef | CompoundEntityRef[]; maxDepth?: number; unidirectional?: boolean; @@ -81,7 +84,7 @@ export interface EntityRelationsGraphProps { renderNode?: DependencyGraphTypes.RenderNodeFunction; renderLabel?: DependencyGraphTypes.RenderLabelFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; -} +}; /** * Core building block for custom entity relations diagrams. 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'; From 8fbc10c1f87de83b0f82f9a81ab303aa713e713a Mon Sep 17 00:00:00 2001 From: Aramis Sennyey Date: Mon, 6 Feb 2023 10:54:42 -0500 Subject: [PATCH 6/8] Make all original props optional. Signed-off-by: Aramis Sennyey --- .../CatalogGraphCard/CatalogGraphCard.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index a97be534f8..8f6d02d1f1 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -56,10 +56,7 @@ const useStyles = makeStyles( ); export const CatalogGraphCard = ( - props: Omit< - EntityRelationsGraphProps, - 'rootEntityNames' | 'onNodeClick' | 'className' - > & { + props: Partial & { variant?: InfoCardVariants; height?: number; title?: string; @@ -75,6 +72,9 @@ export const CatalogGraphCard = ( kinds, relations, height, + className, + rootEntityNames, + onNodeClick, title = 'Relations', zoom = 'enable-on-click', } = props; @@ -87,7 +87,7 @@ export const CatalogGraphCard = ( const classes = useStyles({ height }); const analytics = useAnalytics(); - const onNodeClick = useCallback( + const defaultOnNodeClick = useCallback( (node: EntityNode, _: MouseEvent) => { const nodeEntityName = parseEntityRef(node.id); const path = catalogEntityRoute({ @@ -131,9 +131,9 @@ export const CatalogGraphCard = ( > Date: Wed, 8 Feb 2023 11:16:20 -0500 Subject: [PATCH 7/8] Update API report. Signed-off-by: Aramis Sennyey --- plugins/catalog-graph/api-report.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/plugins/catalog-graph/api-report.md b/plugins/catalog-graph/api-report.md index 0f4b4170ad..f7444c5f1b 100644 --- a/plugins/catalog-graph/api-report.md +++ b/plugins/catalog-graph/api-report.md @@ -66,10 +66,7 @@ export enum Direction { // @public export const EntityCatalogGraphCard: ( - props: Omit< - EntityRelationsGraphProps, - 'className' | 'onNodeClick' | 'rootEntityNames' - > & { + props: Partial & { variant?: InfoCardVariants | undefined; height?: number | undefined; title?: string | undefined; From 0c03164e21be4f1a3e8d0aab9c9d78fe7867a281 Mon Sep 17 00:00:00 2001 From: Ben Lambert Date: Thu, 9 Feb 2023 11:22:01 +0100 Subject: [PATCH 8/8] Update slow-sloths-do.md Signed-off-by: Ben Lambert --- .changeset/slow-sloths-do.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/slow-sloths-do.md b/.changeset/slow-sloths-do.md index 7d9cc263de..2d86d477bf 100644 --- a/.changeset/slow-sloths-do.md +++ b/.changeset/slow-sloths-do.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-catalog-graph': minor +'@backstage/plugin-catalog-graph': patch --- -Expose additional props on the CatalogGraphCard to allow for custom node & label rendering or kind/relation filtering. +Expose additional props on the `CatalogGraphCard` to allow for custom node & label rendering or kind/relation filtering.