diff --git a/.changeset/yellow-rules-vanish.md b/.changeset/yellow-rules-vanish.md new file mode 100644 index 0000000000..23fff893f6 --- /dev/null +++ b/.changeset/yellow-rules-vanish.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +Use template title for ongoing task page header diff --git a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx index d62ef6f95e..371757852f 100644 --- a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx +++ b/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], ]} > diff --git a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx index 97047d00c9..9fff6b51ad 100644 --- a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx +++ b/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(); 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 (