Allow providing a TaskPageComponent

Signed-off-by: Brian Fletcher <brian@roadie.io>

.changeset/smart-boxes-double.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-scaffolder': patch
 ---
 
-The ScaffolderPage can be passed an optional `loadingHoldingText` string. It will replace the Loading text in the scaffolder task page.
+The ScaffolderPage can be passed an optional `TaskPageComponent` with a `loadingText` string. It will replace the Loading text in the scaffolder task page.

plugins/scaffolder/api-report.md

@@ -21,8 +21,10 @@ import { FieldValidation } from '@rjsf/core';
 import { IconButton } from '@material-ui/core';
 import { JsonObject } from '@backstage/types';
 import { JSONSchema } from '@backstage/catalog-model';
+import { JSXElementConstructor } from 'react';
 import { Observable } from '@backstage/types';
 import { default as React_2 } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { ScmIntegrationRegistry } from '@backstage/integration';
@@ -245,15 +247,17 @@ export const ScaffolderFieldExtensions: React_2.ComponentType;
 // @public (undocumented)
 export const ScaffolderPage: ({
   TemplateCardComponent,
+  TaskPageComponent,
   groups,
-  loadingHoldingText,
 }: {
-  loadingHoldingText?: string | undefined;
   TemplateCardComponent?:
     | ComponentType<{
         template: TemplateEntityV1beta2;
       }>
     | undefined;
+  TaskPageComponent?:
+    | ReactElement<any, string | JSXElementConstructor<any>>
+    | undefined;
   groups?:
     | {
         title?: string | undefined;
@@ -277,6 +281,12 @@ const scaffolderPlugin: BackstagePlugin<
 export { scaffolderPlugin as plugin };
 export { scaffolderPlugin };
 
+// Warning: (ae-forgotten-export) The symbol "TaskPageProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-missing-release-tag) "TaskPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const TaskPage: ({ loadingText }: TaskPageProps) => JSX.Element;
+
 // Warning: (ae-missing-release-tag) "TemplateList" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

plugins/scaffolder/src/components/Router.tsx

@@ -31,10 +31,10 @@ import {
 import { useElementFilter } from '@backstage/core-plugin-api';
 
 type RouterProps = {
-  loadingHoldingText?: string;
   TemplateCardComponent?:
     | ComponentType<{ template: TemplateEntityV1beta2 }>
     | undefined;
+  TaskPageComponent?: React.ReactElement | undefined;
   groups?: Array<{
     title?: string;
     titleComponent?: React.ReactNode;
@@ -44,10 +44,11 @@ type RouterProps = {
 
 export const Router = ({
   TemplateCardComponent,
+  TaskPageComponent,
   groups,
-  loadingHoldingText,
 }: RouterProps) => {
   const outlet = useOutlet();
+  const TaskPageElement = TaskPageComponent || <TaskPage />;
 
   const customFieldExtensions = useElementFilter(outlet, elements =>
     elements
@@ -84,10 +85,7 @@ export const Router = ({
         path="/templates/:templateName"
         element={<TemplatePage customFieldExtensions={fieldExtensions} />}
       />
-      <Route
-        path="/tasks/:taskId"
-        element={<TaskPage loadingHoldingText={loadingHoldingText} />}
-      />
+      <Route path="/tasks/:taskId" element={TaskPageElement} />
       <Route path="/actions" element={<ActionsPage />} />
     </Routes>
   );

plugins/scaffolder/src/components/TaskPage/TaskPage.tsx

@@ -219,10 +219,10 @@ const hasLinks = ({ entityRef, remoteUrl, links = [] }: TaskOutput): boolean =>
   !!(entityRef || remoteUrl || links.length > 0);
 
 type TaskPageProps = {
-  loadingHoldingText?: string;
+  loadingText?: string;
 };
 
-export const TaskPage = ({ loadingHoldingText }: TaskPageProps) => {
+export const TaskPage = ({ loadingText }: TaskPageProps) => {
   const classes = useStyles();
   const navigate = useNavigate();
   const rootLink = useRouteRef(rootRouteRef);
@@ -260,7 +260,7 @@ export const TaskPage = ({ loadingHoldingText }: TaskPageProps) => {
 
   const logAsString = useMemo(() => {
     if (!currentStepId) {
-      return loadingHoldingText ? loadingHoldingText : 'Loading...';
+      return loadingText ? loadingText : 'Loading...';
     }
     const log = taskStream.stepLogs[currentStepId];
 
@@ -268,7 +268,7 @@ export const TaskPage = ({ loadingHoldingText }: TaskPageProps) => {
       return 'Waiting for logs...';
     }
     return log.join('\n');
-  }, [taskStream.stepLogs, currentStepId, loadingHoldingText]);
+  }, [taskStream.stepLogs, currentStepId, loadingText]);
 
   const taskNotFound =
     taskStream.completed === true &&

plugins/scaffolder/src/index.ts

@@ -56,3 +56,4 @@ export { FavouriteTemplate } from './components/FavouriteTemplate';
 export { TemplateList } from './components/TemplateList';
 export type { TemplateListProps } from './components/TemplateList';
 export { TemplateTypePicker } from './components/TemplateTypePicker';
+export { TaskPage } from './components/TaskPage';