Merge pull request #9275 from RoadieHQ/allow-configurable-holding-text

allow providing holding text for scaffolder loading

.changeset/smart-boxes-double.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+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

@@ -255,13 +255,15 @@ export const ScaffolderFieldExtensions: React_2.ComponentType;
 // @public (undocumented)
 export const ScaffolderPage: ({
   TemplateCardComponent,
+  TaskPageComponent,
   groups,
 }: {
   TemplateCardComponent?:
     | ComponentType<{
         template: TemplateEntityV1beta2;
       }>
     | undefined;
+  TaskPageComponent?: ComponentType<{}> | undefined;
   groups?:
     | {
         title?: string | undefined;
@@ -285,6 +287,14 @@ const scaffolderPlugin: BackstagePlugin<
 export { scaffolderPlugin as plugin };
 export { scaffolderPlugin };
 
+// @public
+export const TaskPage: ({ loadingText }: TaskPageProps) => JSX.Element;
+
+// @public
+export type TaskPageProps = {
+  loadingText?: string;
+};
+
 // 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

@@ -35,15 +35,21 @@ type RouterProps = {
   TemplateCardComponent?:
     | ComponentType<{ template: TemplateEntityV1beta2 }>
     | undefined;
+  TaskPageComponent?: ComponentType<{}>;
   groups?: Array<{
     title?: string;
     titleComponent?: React.ReactNode;
     filter: (entity: Entity) => boolean;
   }>;
 };
 
-export const Router = ({ TemplateCardComponent, groups }: RouterProps) => {
+export const Router = ({
+  TemplateCardComponent,
+  TaskPageComponent,
+  groups,
+}: RouterProps) => {
   const outlet = useOutlet();
+  const TaskPageElement = TaskPageComponent || TaskPage;
 
   const customFieldExtensions = useElementFilter(outlet, elements =>
     elements
@@ -84,7 +90,7 @@ export const Router = ({ TemplateCardComponent, groups }: RouterProps) => {
           </SecretsContextProvider>
         }
       />
-      <Route path="/tasks/:taskId" element={<TaskPage />} />
+      <Route path="/tasks/:taskId" element={<TaskPageElement />} />
       <Route path="/actions" element={<ActionsPage />} />
     </Routes>
   );

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

@@ -218,7 +218,23 @@ export const TaskStatusStepper = memo(
 const hasLinks = ({ entityRef, remoteUrl, links = [] }: TaskOutput): boolean =>
   !!(entityRef || remoteUrl || links.length > 0);
 
-export const TaskPage = () => {
+/**
+ * TaskPageProps for constructing a TaskPage
+ * @param loadingText - Optional loading text shown before a task begins executing.
+ *
+ * @public
+ */
+export type TaskPageProps = {
+  loadingText?: string;
+};
+
+/**
+ * TaskPage for showing the status of the taskId provided as a param
+ * @param loadingText - Optional loading text shown before a task begins executing.
+ *
+ * @public
+ */
+export const TaskPage = ({ loadingText }: TaskPageProps) => {
   const classes = useStyles();
   const navigate = useNavigate();
   const rootLink = useRouteRef(rootRouteRef);
@@ -256,15 +272,15 @@ export const TaskPage = () => {
 
   const logAsString = useMemo(() => {
     if (!currentStepId) {
-      return 'Loading...';
+      return loadingText ? loadingText : 'Loading...';
     }
     const log = taskStream.stepLogs[currentStepId];
 
     if (!log?.length) {
       return 'Waiting for logs...';
     }
     return log.join('\n');
-  }, [taskStream.stepLogs, currentStepId]);
+  }, [taskStream.stepLogs, currentStepId, loadingText]);
 
   const taskNotFound =
     taskStream.completed === true &&

plugins/scaffolder/src/components/TaskPage/index.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export { TaskPage } from './TaskPage';
+export type { TaskPageProps } from './TaskPage';

plugins/scaffolder/src/index.ts

@@ -57,3 +57,5 @@ export { TemplateList } from './components/TemplateList';
 export type { TemplateListProps } from './components/TemplateList';
 export { TemplateTypePicker } from './components/TemplateTypePicker';
 export * from './components/secrets';
+export { TaskPage } from './components/TaskPage';
+export type { TaskPageProps } from './components/TaskPage';