feat(scaffolder): use template title for header

using the entity presentation api, use the template title for scaffolder
ongoing page header.

closes #28678

Signed-off-by: Hellgren Heikki <heikki.hellgren@op.fi>

.changeset/yellow-rules-vanish.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Use template title for ongoing task page header

plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx

@@ -17,9 +17,9 @@
 import { OngoingTask } from './OngoingTask';
 import React from 'react';
 import {
+  mockApis,
   renderInTestApp,
   TestApiProvider,
-  mockApis,
 } from '@backstage/test-utils';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 import { act, fireEvent, waitFor, within } from '@testing-library/react';
@@ -30,6 +30,7 @@ import {
 import { rootRouteRef } from '../../routes';
 import { AuthorizeResult } from '@backstage/plugin-permission-common';
 import { SWRConfig } from 'swr';
+import { entityPresentationApiRef } from '@backstage/plugin-catalog-react';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -59,6 +60,8 @@ describe('OngoingTask', () => {
     getTask: jest.fn().mockImplementation(async () => {}),
   };
 
+  const mockEntityPresentationApi = {};
+
   beforeEach(async () => {
     jest.clearAllMocks();
   });
@@ -71,6 +74,7 @@ describe('OngoingTask', () => {
           apis={[
             [scaffolderApiRef, mockScaffolderApi],
             [permissionApiRef, permissionApi || mockApis.permission()],
+            [entityPresentationApiRef, mockEntityPresentationApi],
           ]}
         >
           <OngoingTask />

plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx

@@ -21,8 +21,8 @@ import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
 import {
-  ScaffolderTaskOutput,
   scaffolderApiRef,
+  ScaffolderTaskOutput,
   useTaskEventStream,
 } from '@backstage/plugin-scaffolder-react';
 import { selectedTemplateRouteRef } from '../../routes';
@@ -38,11 +38,12 @@ import { useAsync } from '@react-hookz/web';
 import { usePermission } from '@backstage/plugin-permission-react';
 import {
   taskCancelPermission,
-  taskReadPermission,
   taskCreatePermission,
+  taskReadPermission,
 } from '@backstage/plugin-scaffolder-common/alpha';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../translation';
+import { entityPresentationApiRef } from '@backstage/plugin-catalog-react';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -79,7 +80,9 @@ export const OngoingTask = (props: {
   const navigate = useNavigate();
   const analytics = useAnalytics();
   const scaffolderApi = useApi(scaffolderApiRef);
+  const entityPresentationApi = useApi(entityPresentationApiRef);
   const taskStream = useTaskEventStream(taskId!);
+  const [templateName, setTemplateName] = useState<string | undefined>();
   const classes = useStyles();
   const steps = useMemo(
     () =>
@@ -123,6 +126,15 @@ export const OngoingTask = (props: {
     }
   }, [taskStream.error, taskStream.completed]);
 
+  useEffect(() => {
+    const templateEntityRef = taskStream.task?.spec.templateInfo?.entityRef;
+    if (!templateEntityRef) {
+      return;
+    }
+    const presentation = entityPresentationApi.forEntity(templateEntityRef);
+    setTemplateName(presentation.snapshot.primaryTitle);
+  }, [entityPresentationApi, taskStream.task?.spec.templateInfo?.entityRef]);
+
   const activeStep = useMemo(() => {
     for (let i = steps.length - 1; i >= 0; i--) {
       if (steps[i].status !== 'open') {
@@ -184,9 +196,6 @@ export const OngoingTask = (props: {
 
   const Outputs = props.TemplateOutputsComponent ?? DefaultTemplateOutputs;
 
-  const templateName =
-    taskStream.task?.spec.templateInfo?.entity?.metadata.name || '';
-
   const cancelEnabled = !(taskStream.cancelled || taskStream.completed);
 
   return (