Merge pull request #33386 from mvanhorn/feat/catalog-graph-presentation-api

feat(catalog-graph): use Catalog Presentation API instead of humanizeEntityRef

.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.

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx

@@ -241,7 +241,7 @@ describe('<CatalogGraphCard/>', () => {
     expect(analyticsApi.captureEvent).toHaveBeenCalledWith(
       expect.objectContaining({
         action: 'click',
-        subject: 'b:d/c',
+        subject: 'd/c',
         attributes: {
           to: '/entity/{kind}/{namespace}/{name}',
         },

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);

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<unknown>) => {
       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 = (
     <Page themeId="home">
       <Header
         title={t('catalogGraphPage.title')}
-        subtitle={rootEntityNames.map(e => humanizeEntityRef(e)).join(', ')}
+        subtitle={rootEntityNames
+          .map(e => entityPresentationSnapshot(e).primaryTitle)
+          .join(', ')}
       />
       <Content stretch className={classes.content}>
         <ContentHeader