Merge pull request #16528 from dagda1/move-ongoing-task-into-scaffolder-react

Move useTaskStream, TaskBorder, TaskLogStream and TaskSteps 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,11 +67,15 @@
     "@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",
     "zen-observable": "^0.10.0",
     "zod": "~3.18.0",
     "zod-to-json-schema": "~3.18.0"
@@ -89,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

@@ -23,15 +23,24 @@ import {
   Box,
 } from '@material-ui/core';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
-import { Step } from '../../../components/hooks/useEventStream';
+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/hooks/index.ts

@@ -16,3 +16,8 @@
 
 export { useCustomFieldExtensions } from './useCustomFieldExtensions';
 export { useCustomLayouts } from './useCustomLayouts';
+export {
+  useTaskEventStream,
+  type TaskStream,
+  type Step,
+} from './useEventStream';

plugins/scaffolder-react/src/hooks/useEventStream.ts

@@ -25,6 +25,11 @@ import {
 import { useApi } from '@backstage/core-plugin-api';
 import { Subscription } from '@backstage/types';
 
+/**
+ * The status of the step being processed
+ *
+ * @public
+ */
 export type Step = {
   id: string;
   status: ScaffolderTaskStatus;
@@ -32,6 +37,11 @@ export type Step = {
   startedAt?: string;
 };
 
+/**
+ * A task event from the event stream
+ *
+ * @public
+ */
 export type TaskStream = {
   loading: boolean;
   error?: Error;
@@ -132,6 +142,11 @@ function reducer(draft: TaskStream, action: ReducerAction) {
   }
 }
 
+/**
+ * A hook to stream the logs of a task being processed
+ *
+ * @public
+ */
 export const useTaskEventStream = (taskId: string): TaskStream => {
   const scaffolderApi = useApi(scaffolderApiRef);
   const [state, dispatch] = useImmerReducer(reducer, {

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/package.json

@@ -82,7 +82,6 @@
     "luxon": "^3.0.0",
     "qs": "^6.9.4",
     "react-use": "^17.2.4",
-    "use-immer": "^0.8.0",
     "yaml": "^2.0.0",
     "zen-observable": "^0.10.0",
     "zod": "~3.18.0",

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

@@ -50,8 +50,8 @@ import useInterval from 'react-use/lib/useInterval';
 import {
   ScaffolderTaskStatus,
   ScaffolderTaskOutput,
+  useTaskEventStream,
 } from '@backstage/plugin-scaffolder-react';
-import { useTaskEventStream } from '../hooks/useEventStream';
 import { TaskErrors } from './TaskErrors';
 import { TaskPageLinks } from './TaskPageLinks';
 import {

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

@@ -15,17 +15,19 @@
  */
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { Page, Header, Content, ErrorPanel } from '@backstage/core-components';
-import { useTaskEventStream } from '../../components/hooks/useEventStream';
 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 } from '@backstage/plugin-scaffolder-react';
 import { DefaultTemplateOutputs } from '@backstage/plugin-scaffolder-react/alpha';
 
 const useStyles = makeStyles({