Merge pull request #33576 from backstage/maratd/replace-humanize-entity-ref

Replace deprecated humanizeEntityRef with Catalog Presentation API

plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPage.test.tsx

@@ -18,14 +18,34 @@ import { screen } from '@testing-library/react';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { TemplateFormPage } from './TemplateFormPage';
 import { rootRouteRef } from '../../../routes';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+  catalogApiRef,
+  defaultEntityPresentation,
+  entityPresentationApiRef,
+} from '@backstage/plugin-catalog-react';
 
 describe('TemplateFormPage', () => {
   const catalogApiMock = { getEntities: jest.fn().mockResolvedValue([]) };
 
+  const entityPresentationApi: typeof entityPresentationApiRef.T = {
+    forEntity(entityOrRef, context) {
+      const presentation = defaultEntityPresentation(entityOrRef, context);
+      return {
+        snapshot: presentation,
+        update$: { subscribe: () => ({ unsubscribe: () => {} }) } as any,
+        promise: Promise.resolve(presentation),
+      };
+    },
+  };
+
   it('Should render without exploding', async () => {
     await renderInTestApp(
-      <TestApiProvider apis={[[catalogApiRef, catalogApiMock]]}>
+      <TestApiProvider
+        apis={[
+          [catalogApiRef, catalogApiMock],
+          [entityPresentationApiRef, entityPresentationApi],
+        ]}
+      >
         <TemplateFormPage />
       </TestApiProvider>,
       {
@@ -41,7 +61,12 @@ describe('TemplateFormPage', () => {
 
   it('Should have an link back to the edit page', async () => {
     await renderInTestApp(
-      <TestApiProvider apis={[[catalogApiRef, catalogApiMock]]}>
+      <TestApiProvider
+        apis={[
+          [catalogApiRef, catalogApiMock],
+          [entityPresentationApiRef, entityPresentationApi],
+        ]}
+      >
         <TemplateFormPage />
       </TestApiProvider>,
       {

plugins/scaffolder/src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx

@@ -24,7 +24,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
-  humanizeEntityRef,
+  entityPresentationApiRef,
 } from '@backstage/plugin-catalog-react';
 import {
   LayoutOptions,
@@ -139,6 +139,7 @@ export const TemplateFormPreviewer = ({
   const classes = useStyles();
   const alertApi = useApi(alertApiRef);
   const catalogApi = useApi(catalogApiRef);
+  const entityPresentationApi = useApi(entityPresentationApiRef);
   const navigate = useNavigate();
   const editLink = useRouteRef(editRouteRef);
 
@@ -166,23 +167,26 @@ export const TemplateFormPreviewer = ({
             'spec.output',
           ],
         })
-        .then(({ items }) =>
-          setTemplateOptions(
-            items.map(template => ({
-              label:
-                template.metadata.title ??
-                humanizeEntityRef(template, { defaultKind: 'template' }),
+        .then(async ({ items }) => {
+          const options = await Promise.all(
+            items.map(async template => ({
+              label: (
+                await entityPresentationApi.forEntity(template, {
+                  defaultKind: 'template',
+                }).promise
+              ).primaryTitle,
               value: template,
             })),
-          ),
-        )
+          );
+          setTemplateOptions(options);
+        })
         .catch(e =>
           alertApi.post({
             message: `Error loading existing templates: ${e.message}`,
             severity: 'error',
           }),
         ),
-    [catalogApi],
+    [catalogApi, entityPresentationApi, alertApi],
   );
 
   const handleSelectChange = useCallback(