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/alpha.test.tsx b/plugins/catalog-graph/src/alpha.test.tsx index e0241ec7b0..873ebaa476 100644 --- a/plugins/catalog-graph/src/alpha.test.tsx +++ b/plugins/catalog-graph/src/alpha.test.tsx @@ -21,10 +21,21 @@ import { createTestEntityPage, catalogApiMock, } from '@backstage/plugin-catalog-react/testUtils'; +import { + defaultEntityPresentation, + entityPresentationApiRef, +} from '@backstage/plugin-catalog-react'; import catalogGraphPlugin from './alpha'; import { catalogGraphRouteRef } from './routes'; import { catalogGraphApiRef, DefaultCatalogGraphApi } from './api'; +const mockEntityPresentationApi = { + forEntity(entityOrRef: Parameters[0]) { + const snapshot = defaultEntityPresentation(entityOrRef); + return { snapshot, promise: Promise.resolve(snapshot) }; + }, +}; + const CatalogGraphEntityCard = catalogGraphPlugin.getExtension( 'entity-card:catalog-graph/relations', ); @@ -59,6 +70,7 @@ describe('catalog-graph alpha plugin', () => { apis: [ catalogApiMock({ entities: [entity] }), [catalogGraphApiRef, new DefaultCatalogGraphApi()], + [entityPresentationApiRef, mockEntityPresentationApi], ], }); @@ -96,6 +108,7 @@ describe('catalog-graph alpha plugin', () => { apis: [ catalogApiMock({ entities: [entity] }), [catalogGraphApiRef, new DefaultCatalogGraphApi()], + [entityPresentationApiRef, mockEntityPresentationApi], ], }); @@ -132,6 +145,7 @@ describe('catalog-graph alpha plugin', () => { apis: [ catalogApiMock({ entities: [entity] }), [catalogGraphApiRef, new DefaultCatalogGraphApi()], + [entityPresentationApiRef, mockEntityPresentationApi], ], }); diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx index 3ae8310280..e65d40b955 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx @@ -20,6 +20,7 @@ import { analyticsApiRef } from '@backstage/core-plugin-api'; import { catalogApiRef, EntityProvider, + entityPresentationApiRef, entityRouteRef, } from '@backstage/plugin-catalog-react'; import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils'; @@ -36,6 +37,14 @@ import { CatalogGraphCard } from './CatalogGraphCard'; import Button from '@material-ui/core/Button'; import { translationApiRef } from '@backstage/core-plugin-api/alpha'; import { catalogGraphApiRef, DefaultCatalogGraphApi } from '../../api'; +import { defaultEntityPresentation } from '@backstage/plugin-catalog-react'; + +const mockEntityPresentationApi = { + forEntity(entityOrRef: Parameters[0]) { + const snapshot = defaultEntityPresentation(entityOrRef); + return { snapshot, promise: Promise.resolve(snapshot) }; + }, +}; describe('', () => { let entity: Entity; @@ -58,6 +67,7 @@ describe('', () => { [catalogApiRef, catalog], [translationApiRef, mockApis.translation()], [catalogGraphApiRef, new DefaultCatalogGraphApi()], + [entityPresentationApiRef, mockEntityPresentationApi], ); wrapper = ( @@ -241,7 +251,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..6032f0a3d2 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -19,10 +19,10 @@ import { parseEntityRef, stringifyEntityRef, } from '@backstage/catalog-model'; -import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api'; +import { useAnalytics, useRouteRef, useApi } from '@backstage/core-plugin-api'; import { EntityInfoCard, - humanizeEntityRef, + entityPresentationApiRef, useEntity, entityRouteRef, } from '@backstage/plugin-catalog-react'; @@ -89,6 +89,7 @@ export const CatalogGraphCard = ( const navigate = useNavigate(); const classes = useStyles({ height }); const analytics = useAnalytics(); + const entityPresentationApi = useApi(entityPresentationApiRef); const defaultOnNodeClick = useCallback( (node: EntityNode, _: MouseEvent) => { @@ -100,12 +101,12 @@ export const CatalogGraphCard = ( }); analytics.captureEvent( 'click', - node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName), + entityPresentationApi.forEntity(node.entity).snapshot.primaryTitle, { attributes: { to: path } }, ); navigate(path); }, - [catalogEntityRoute, navigate, analytics], + [catalogEntityRoute, navigate, analytics, entityPresentationApi], ); const catalogGraphParams = qs.stringify( diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx index 93bdc94860..1df2ec1961 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { parseEntityRef } from '@backstage/catalog-model'; +import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model'; import { Content, ContentHeader, @@ -22,10 +22,10 @@ import { Page, SupportButton, } from '@backstage/core-components'; -import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api'; +import { useAnalytics, useRouteRef, useApi } from '@backstage/core-plugin-api'; import { + entityPresentationApiRef, entityRouteRef, - humanizeEntityRef, } from '@backstage/plugin-catalog-react'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; @@ -157,9 +157,12 @@ export const CatalogGraphPage = ( toggleShowFilters, } = useCatalogGraphPage({ initialState }); const analytics = useAnalytics(); + const entityPresentationApi = useApi(entityPresentationApiRef); const onNodeClick = useCallback( (node: EntityNode, event: MouseEvent) => { const nodeEntityName = parseEntityRef(node.id); + const nodeTitle = entityPresentationApi.forEntity(node.entity).snapshot + .primaryTitle; if (event.shiftKey) { const path = catalogEntityRoute({ @@ -168,28 +171,35 @@ 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]); } }, - [catalogEntityRoute, navigate, setRootEntityNames, analytics], + [ + catalogEntityRoute, + navigate, + setRootEntityNames, + analytics, + entityPresentationApi, + ], ); return (
humanizeEntityRef(e)).join(', ')} + subtitle={rootEntityNames + .map( + e => + entityPresentationApi.forEntity(stringifyEntityRef(e)).snapshot + .primaryTitle, + ) + .join(', ')} />