From 8f4d13f21cf681a1e51a2e2aeb47e802cc76f4e4 Mon Sep 17 00:00:00 2001 From: Paul Cowan Date: Fri, 24 Feb 2023 16:24:49 +0000 Subject: [PATCH] Move useTaskStream, TaskBorder, TaskLogStream and TaskSteps into scaffolder-react Signed-off-by: Paul Cowan --- .changeset/flat-kids-occur.md | 6 +++ .changeset/large-chefs-boil.md | 5 ++ plugins/scaffolder-react/api-report.md | 54 +++++++++++++++++++ plugins/scaffolder-react/package.json | 7 ++- .../TaskBorder}/TaskBorder.test.tsx | 0 .../src/components/TaskBorder}/TaskBorder.tsx | 5 ++ .../src/components/TaskBorder}/index.ts | 2 +- .../TaskLogStream}/TaskLogStream.test.tsx | 0 .../TaskLogStream}/TaskLogStream.tsx | 5 ++ .../src/components/TaskLogStream/index.ts | 16 ++++++ .../src/components}/TaskSteps/StepIcon.tsx | 0 .../components}/TaskSteps/StepTime.test.tsx | 0 .../src/components}/TaskSteps/StepTime.tsx | 0 .../components}/TaskSteps/TaskSteps.test.tsx | 0 .../src/components}/TaskSteps/TaskSteps.tsx | 11 +++- .../src/components/TaskSteps/index.ts | 16 ++++++ .../scaffolder-react/src/components/index.ts | 18 +++++++ plugins/scaffolder-react/src/index.ts | 1 + .../src/next/OngoingTask/OngoingTask.tsx | 14 ++--- yarn.lock | 5 ++ 20 files changed, 155 insertions(+), 10 deletions(-) create mode 100644 .changeset/flat-kids-occur.md create mode 100644 .changeset/large-chefs-boil.md rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components/TaskBorder}/TaskBorder.test.tsx (100%) rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components/TaskBorder}/TaskBorder.tsx (94%) rename plugins/{scaffolder/src/next/OngoingTask/TaskSteps => scaffolder-react/src/components/TaskBorder}/index.ts (93%) rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components/TaskLogStream}/TaskLogStream.test.tsx (100%) rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components/TaskLogStream}/TaskLogStream.tsx (95%) create mode 100644 plugins/scaffolder-react/src/components/TaskLogStream/index.ts rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components}/TaskSteps/StepIcon.tsx (100%) rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components}/TaskSteps/StepTime.test.tsx (100%) rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components}/TaskSteps/StepTime.tsx (100%) rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components}/TaskSteps/TaskSteps.test.tsx (100%) rename plugins/{scaffolder/src/next/OngoingTask => scaffolder-react/src/components}/TaskSteps/TaskSteps.tsx (94%) create mode 100644 plugins/scaffolder-react/src/components/TaskSteps/index.ts create mode 100644 plugins/scaffolder-react/src/components/index.ts diff --git a/.changeset/flat-kids-occur.md b/.changeset/flat-kids-occur.md new file mode 100644 index 0000000000..4e4c002928 --- /dev/null +++ b/.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`. diff --git a/.changeset/large-chefs-boil.md b/.changeset/large-chefs-boil.md new file mode 100644 index 0000000000..016ca197c8 --- /dev/null +++ b/.changeset/large-chefs-boil.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': minor +--- + +move useEventStream, TaskSteps, TaskBorder and TaskLogStream into scaffolder-react diff --git a/plugins/scaffolder-react/api-report.md b/plugins/scaffolder-react/api-report.md index 9b50eef884..384c4b80f2 100644 --- a/plugins/scaffolder-react/api-report.md +++ b/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: >( outlet: React.ReactNode, ) => TComponentDataType[]; +// @public +export const useTaskEventStream: (taskId: string) => TaskStream; + // @public export const useTemplateSecrets: () => ScaffolderUseTemplateSecrets; diff --git a/plugins/scaffolder-react/package.json b/plugins/scaffolder-react/package.json index adf4a8b31a..070a92ee53 100644 --- a/plugins/scaffolder-react/package.json +++ b/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" diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskBorder.test.tsx b/plugins/scaffolder-react/src/components/TaskBorder/TaskBorder.test.tsx similarity index 100% rename from plugins/scaffolder/src/next/OngoingTask/TaskBorder.test.tsx rename to plugins/scaffolder-react/src/components/TaskBorder/TaskBorder.test.tsx diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskBorder.tsx b/plugins/scaffolder-react/src/components/TaskBorder/TaskBorder.tsx similarity index 94% rename from plugins/scaffolder/src/next/OngoingTask/TaskBorder.tsx rename to plugins/scaffolder-react/src/components/TaskBorder/TaskBorder.tsx index fdfab17367..17eea3997a 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskBorder.tsx +++ b/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; diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/index.ts b/plugins/scaffolder-react/src/components/TaskBorder/index.ts similarity index 93% rename from plugins/scaffolder/src/next/OngoingTask/TaskSteps/index.ts rename to plugins/scaffolder-react/src/components/TaskBorder/index.ts index 28724ba512..e1559957d1 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/index.ts +++ b/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'; diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskLogStream.test.tsx b/plugins/scaffolder-react/src/components/TaskLogStream/TaskLogStream.test.tsx similarity index 100% rename from plugins/scaffolder/src/next/OngoingTask/TaskLogStream.test.tsx rename to plugins/scaffolder-react/src/components/TaskLogStream/TaskLogStream.test.tsx diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx b/plugins/scaffolder-react/src/components/TaskLogStream/TaskLogStream.tsx similarity index 95% rename from plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx rename to plugins/scaffolder-react/src/components/TaskLogStream/TaskLogStream.tsx index 00e8452b42..973627aa02 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx +++ b/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 ( diff --git a/plugins/scaffolder-react/src/components/TaskLogStream/index.ts b/plugins/scaffolder-react/src/components/TaskLogStream/index.ts new file mode 100644 index 0000000000..a6570f996b --- /dev/null +++ b/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'; diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepIcon.tsx b/plugins/scaffolder-react/src/components/TaskSteps/StepIcon.tsx similarity index 100% rename from plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepIcon.tsx rename to plugins/scaffolder-react/src/components/TaskSteps/StepIcon.tsx diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.test.tsx b/plugins/scaffolder-react/src/components/TaskSteps/StepTime.test.tsx similarity index 100% rename from plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.test.tsx rename to plugins/scaffolder-react/src/components/TaskSteps/StepTime.test.tsx diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx b/plugins/scaffolder-react/src/components/TaskSteps/StepTime.tsx similarity index 100% rename from plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx rename to plugins/scaffolder-react/src/components/TaskSteps/StepTime.tsx diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.test.tsx b/plugins/scaffolder-react/src/components/TaskSteps/TaskSteps.test.tsx similarity index 100% rename from plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.test.tsx rename to plugins/scaffolder-react/src/components/TaskSteps/TaskSteps.test.tsx diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx b/plugins/scaffolder-react/src/components/TaskSteps/TaskSteps.tsx similarity index 94% rename from plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx rename to plugins/scaffolder-react/src/components/TaskSteps/TaskSteps.tsx index 2fcbe941d1..8b43d5e17b 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx +++ b/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 (