From ca9229805e5f429e657787377dc3868024efd144 Mon Sep 17 00:00:00 2001 From: Paul Cowan Date: Fri, 24 Feb 2023 12:48:39 +0000 Subject: [PATCH 1/3] move useEventStream into scaffolder-react Signed-off-by: Paul Cowan --- plugins/scaffolder-react/package.json | 2 ++ plugins/scaffolder-react/src/hooks/index.ts | 5 +++++ .../src}/hooks/useEventStream.ts | 15 +++++++++++++++ plugins/scaffolder/package.json | 1 - .../src/components/TaskPage/TaskPage.tsx | 2 +- .../src/next/OngoingTask/OngoingTask.tsx | 6 ++++-- .../src/next/OngoingTask/TaskSteps/TaskSteps.tsx | 2 +- yarn.lock | 3 ++- 8 files changed, 30 insertions(+), 6 deletions(-) rename plugins/{scaffolder/src/components => scaffolder-react/src}/hooks/useEventStream.ts (96%) diff --git a/plugins/scaffolder-react/package.json b/plugins/scaffolder-react/package.json index 2d3e10ed9f..adf4a8b31a 100644 --- a/plugins/scaffolder-react/package.json +++ b/plugins/scaffolder-react/package.json @@ -66,11 +66,13 @@ "@rjsf/validator-ajv8": "5.1.0", "@types/json-schema": "^7.0.9", "classnames": "^2.2.6", + "immer": "^9.0.1", "json-schema": "^0.4.0", "json-schema-library": "^7.3.9", "lodash": "^4.17.21", "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" diff --git a/plugins/scaffolder-react/src/hooks/index.ts b/plugins/scaffolder-react/src/hooks/index.ts index af64a9eebc..124950e83d 100644 --- a/plugins/scaffolder-react/src/hooks/index.ts +++ b/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'; diff --git a/plugins/scaffolder/src/components/hooks/useEventStream.ts b/plugins/scaffolder-react/src/hooks/useEventStream.ts similarity index 96% rename from plugins/scaffolder/src/components/hooks/useEventStream.ts rename to plugins/scaffolder-react/src/hooks/useEventStream.ts index be0ff922a4..101063d258 100644 --- a/plugins/scaffolder/src/components/hooks/useEventStream.ts +++ b/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, { diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json index b3d33298cb..8a0c1f8e26 100644 --- a/plugins/scaffolder/package.json +++ b/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", diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx index 393bd495bf..a45f0cf413 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx +++ b/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 { diff --git a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx index d0aaf4b838..0832d5a3ac 100644 --- a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx @@ -15,7 +15,6 @@ */ 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'; @@ -25,7 +24,10 @@ 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 { + ScaffolderTaskOutput, + useTaskEventStream, +} from '@backstage/plugin-scaffolder-react'; import { DefaultTemplateOutputs } from '@backstage/plugin-scaffolder-react/alpha'; const useStyles = makeStyles({ diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx index 7cf5ed71bf..2fcbe941d1 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx @@ -23,7 +23,7 @@ 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'; diff --git a/yarn.lock b/yarn.lock index 6973779ac5..a39f14efe0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7777,11 +7777,13 @@ __metadata: "@testing-library/user-event": ^14.0.0 "@types/json-schema": ^7.0.9 classnames: ^2.2.6 + immer: ^9.0.1 json-schema: ^0.4.0 json-schema-library: ^7.3.9 lodash: ^4.17.21 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 @@ -7848,7 +7850,6 @@ __metadata: msw: ^1.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 From 8f4d13f21cf681a1e51a2e2aeb47e802cc76f4e4 Mon Sep 17 00:00:00 2001 From: Paul Cowan Date: Fri, 24 Feb 2023 16:24:49 +0000 Subject: [PATCH 2/3] 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 ( Date: Fri, 24 Feb 2023 16:26:52 +0000 Subject: [PATCH 3/3] remove bogus changeset Signed-off-by: Paul Cowan --- .changeset/large-chefs-boil.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/large-chefs-boil.md diff --git a/.changeset/large-chefs-boil.md b/.changeset/large-chefs-boil.md deleted file mode 100644 index 016ca197c8..0000000000 --- a/.changeset/large-chefs-boil.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-scaffolder-react': minor ---- - -move useEventStream, TaskSteps, TaskBorder and TaskLogStream into scaffolder-react