Move useTaskStream, TaskBorder, TaskLogStream and TaskSteps into scaffolder-react

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>

.changeset/flat-kids-occur.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder-react': minor
+'@backstage/plugin-scaffolder': minor
+---
+
+Move `useTaskStream`, `TaskBorder`, `TaskLogStream` and `TaskSteps` into `scaffolder-react`.

.changeset/large-chefs-boil.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': minor
+---
+
+move useEventStream, TaskSteps, TaskBorder and TaskLogStream into scaffolder-react

plugins/scaffolder-react/api-report.md

@@ -17,6 +17,10 @@ import { JsonValue } from '@backstage/types';
 import { Observable } from '@backstage/types';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
+import { ScaffolderTask as ScaffolderTask_2 } from '@backstage/plugin-scaffolder-react';
+import { ScaffolderTaskOutput as ScaffolderTaskOutput_2 } from '@backstage/plugin-scaffolder-react';
+import { ScaffolderTaskStatus as ScaffolderTaskStatus_2 } from '@backstage/plugin-scaffolder-react';
+import { Step as Step_2 } from '@backstage/plugin-scaffolder-react';
 import { TaskSpec } from '@backstage/plugin-scaffolder-common';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
 
@@ -277,6 +281,53 @@ export const SecretsContextProvider: ({
   children,
 }: PropsWithChildren<{}>) => JSX.Element;
 
+// @public
+export type Step = {
+  id: string;
+  status: ScaffolderTaskStatus_2;
+  endedAt?: string;
+  startedAt?: string;
+};
+
+// @public (undocumented)
+export interface StepperProps {
+  // (undocumented)
+  activeStep?: number;
+  // (undocumented)
+  steps: (TaskStep & Step_2)[];
+}
+
+// @public
+export const TaskBorder: (props: {
+  isComplete: boolean;
+  isError: boolean;
+}) => JSX.Element;
+
+// @public
+export const TaskLogStream: (props: {
+  logs: {
+    [k: string]: string[];
+  };
+}) => JSX.Element;
+
+// @public
+export const TaskSteps: (props: StepperProps) => JSX.Element;
+
+// @public
+export type TaskStream = {
+  loading: boolean;
+  error?: Error;
+  stepLogs: {
+    [stepId in string]: string[];
+  };
+  completed: boolean;
+  task?: ScaffolderTask_2;
+  steps: {
+    [stepId in string]: Step;
+  };
+  output?: ScaffolderTaskOutput_2;
+};
+
 // @public
 export type TemplateParameterSchema = {
   title: string;
@@ -300,6 +351,9 @@ export const useCustomLayouts: <TComponentDataType = LayoutOptions<any>>(
   outlet: React.ReactNode,
 ) => TComponentDataType[];
 
+// @public
+export const useTaskEventStream: (taskId: string) => TaskStream;
+
 // @public
 export const useTemplateSecrets: () => ScaffolderUseTemplateSecrets;
 

plugins/scaffolder-react/package.json

@@ -58,6 +58,7 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
+    "@react-hookz/web": "^20.0.0",
     "@rjsf/core": "^3.2.1",
     "@rjsf/core-v5": "npm:@rjsf/core@5.1.0",
     "@rjsf/material-ui": "^3.2.1",
@@ -66,10 +67,12 @@
     "@rjsf/validator-ajv8": "5.1.0",
     "@types/json-schema": "^7.0.9",
     "classnames": "^2.2.6",
+    "humanize-duration": "^3.25.1",
     "immer": "^9.0.1",
     "json-schema": "^0.4.0",
     "json-schema-library": "^7.3.9",
     "lodash": "^4.17.21",
+    "luxon": "^3.0.0",
     "qs": "^6.9.4",
     "react-use": "^17.2.4",
     "use-immer": "^0.8.0",
@@ -91,7 +94,9 @@
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
     "@testing-library/react-hooks": "^8.0.0",
-    "@testing-library/user-event": "^14.0.0"
+    "@testing-library/user-event": "^14.0.0",
+    "@types/humanize-duration": "^3.18.1",
+    "@types/luxon": "^3.0.0"
   },
   "files": [
     "dist"

plugins/scaffolder-react/src/components/TaskBorder/TaskBorder.tsx

@@ -26,6 +26,11 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
   },
 }));
 
+/**
+ * The visual progress of the task event stream
+ *
+ * @public
+ */
 export const TaskBorder = (props: {
   isComplete: boolean;
   isError: boolean;

plugins/scaffolder-react/src/components/TaskBorder/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { TaskSteps } from './TaskSteps';
+export { TaskBorder } from './TaskBorder';

plugins/scaffolder-react/src/components/TaskLogStream/TaskLogStream.tsx

@@ -25,6 +25,11 @@ const useStyles = makeStyles({
   },
 });
 
+/**
+ * The text of the event stream
+ *
+ * @public
+ */
 export const TaskLogStream = (props: { logs: { [k: string]: string[] } }) => {
   const styles = useStyles();
   return (

plugins/scaffolder-react/src/components/TaskLogStream/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { TaskLogStream } from './TaskLogStream';

plugins/scaffolder-react/src/components/TaskSteps/TaskSteps.tsx

@@ -27,11 +27,20 @@ import { type Step } from '@backstage/plugin-scaffolder-react';
 import { StepIcon } from './StepIcon';
 import { StepTime } from './StepTime';
 
-interface StepperProps {
+/**
+ *
+ * @public
+ */
+export interface StepperProps {
   steps: (TaskStep & Step)[];
   activeStep?: number;
 }
 
+/**
+ * The visual stepper of the task event stream
+ *
+ * @public
+ */
 export const TaskSteps = (props: StepperProps) => {
   return (
     <MuiStepper

plugins/scaffolder-react/src/components/TaskSteps/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { TaskSteps, type StepperProps } from './TaskSteps';

plugins/scaffolder-react/src/components/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { TaskSteps, type StepperProps } from './TaskSteps';
+export { TaskBorder } from './TaskBorder';
+export { TaskLogStream } from './TaskLogStream';

plugins/scaffolder-react/src/index.ts

@@ -20,3 +20,4 @@ export * from './secrets';
 export * from './api';
 export * from './hooks';
 export * from './layouts';
+export * from './components';

plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx

@@ -17,17 +17,17 @@ import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { Page, Header, Content, ErrorPanel } from '@backstage/core-components';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Box, makeStyles, Paper } from '@material-ui/core';
-import { TaskSteps } from './TaskSteps';
-import { TaskBorder } from './TaskBorder';
-import { TaskLogStream } from './TaskLogStream';
+import {
+  TaskSteps,
+  TaskBorder,
+  TaskLogStream,
+  ScaffolderTaskOutput,
+  useTaskEventStream,
+} from '@backstage/plugin-scaffolder-react';
 import { nextSelectedTemplateRouteRef } from '../routes';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import qs from 'qs';
 import { ContextMenu } from './ContextMenu';
-import {
-  ScaffolderTaskOutput,
-  useTaskEventStream,
-} from '@backstage/plugin-scaffolder-react';
 import { DefaultTemplateOutputs } from '@backstage/plugin-scaffolder-react/alpha';
 
 const useStyles = makeStyles({

yarn.lock

@@ -7765,6 +7765,7 @@ __metadata:
     "@material-ui/core": ^4.12.2
     "@material-ui/icons": ^4.9.1
     "@material-ui/lab": 4.0.0-alpha.57
+    "@react-hookz/web": ^20.0.0
     "@rjsf/core": ^3.2.1
     "@rjsf/core-v5": "npm:@rjsf/core@5.1.0"
     "@rjsf/material-ui": ^3.2.1
@@ -7775,12 +7776,16 @@ __metadata:
     "@testing-library/react": ^12.1.3
     "@testing-library/react-hooks": ^8.0.0
     "@testing-library/user-event": ^14.0.0
+    "@types/humanize-duration": ^3.18.1
     "@types/json-schema": ^7.0.9
+    "@types/luxon": ^3.0.0
     classnames: ^2.2.6
+    humanize-duration: ^3.25.1
     immer: ^9.0.1
     json-schema: ^0.4.0
     json-schema-library: ^7.3.9
     lodash: ^4.17.21
+    luxon: ^3.0.0
     qs: ^6.9.4
     react-use: ^17.2.4
     use-immer: ^0.8.0