diff --git a/.changeset/catalog-graph-use-presentation-api.md b/.changeset/catalog-graph-use-presentation-api.md new file mode 100644 index 0000000000..b0d73629b4 --- /dev/null +++ b/.changeset/catalog-graph-use-presentation-api.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-graph': patch +--- + +Replaced `humanizeEntityRef` with the Catalog Presentation API in `CatalogGraphCard` and `CatalogGraphPage` components for consistent entity display. diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx index 3ae8310280..706fafa177 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx @@ -241,7 +241,7 @@ describe('', () => { expect(analyticsApi.captureEvent).toHaveBeenCalledWith( expect.objectContaining({ action: 'click', - subject: 'b:d/c', + subject: 'd/c', attributes: { to: '/entity/{kind}/{namespace}/{name}', }, diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 10ba73e2b6..0510adb53a 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -22,7 +22,7 @@ import { import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api'; import { EntityInfoCard, - humanizeEntityRef, + entityPresentationSnapshot, useEntity, entityRouteRef, } from '@backstage/plugin-catalog-react'; @@ -100,7 +100,7 @@ export const CatalogGraphCard = ( }); analytics.captureEvent( 'click', - node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName), + entityPresentationSnapshot(node.entity).primaryTitle, { attributes: { to: path } }, ); navigate(path); diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx index 93bdc94860..16b54e2717 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx @@ -24,8 +24,8 @@ import { } from '@backstage/core-components'; import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api'; import { + entityPresentationSnapshot, entityRouteRef, - humanizeEntityRef, } from '@backstage/plugin-catalog-react'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; @@ -160,6 +160,7 @@ export const CatalogGraphPage = ( const onNodeClick = useCallback( (node: EntityNode, event: MouseEvent) => { const nodeEntityName = parseEntityRef(node.id); + const nodeTitle = entityPresentationSnapshot(node.entity).primaryTitle; if (event.shiftKey) { const path = catalogEntityRoute({ @@ -168,17 +169,12 @@ export const CatalogGraphPage = ( name: nodeEntityName.name, }); - analytics.captureEvent( - 'click', - node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName), - { attributes: { to: path } }, - ); + analytics.captureEvent('click', nodeTitle, { + attributes: { to: path }, + }); navigate(path); } else { - analytics.captureEvent( - 'click', - node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName), - ); + analytics.captureEvent('click', nodeTitle); setRootEntityNames([nodeEntityName]); } }, @@ -189,7 +185,9 @@ export const CatalogGraphPage = (
humanizeEntityRef(e)).join(', ')} + subtitle={rootEntityNames + .map(e => entityPresentationSnapshot(e).primaryTitle) + .join(', ')} />