@backstage/plugin-scaffolder-react 1.1.1-next.0 → 1.2.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.2.0-next.2
+
+### Patch Changes
+
+- 65454876fb2: Minor API report tweaks
+- 3c96e77b513: Make scaffolder adhere to page themes by using page `fontColor` consistently. If your theme overwrites template list or card headers, review those styles.
+- d9893263ba9: scaffolder/next: Fix for steps without properties
+- Updated dependencies
+  - @backstage/core-components@0.12.5-next.2
+  - @backstage/plugin-catalog-react@1.4.0-next.2
+  - @backstage/core-plugin-api@1.5.0-next.2
+
+## 1.2.0-next.1
+
+### Minor Changes
+
+- 8f4d13f21cf: Move `useTaskStream`, `TaskBorder`, `TaskLogStream` and `TaskSteps` into `scaffolder-react`.
+
+### Patch Changes
+
+- 44941fc97eb: scaffolder/next: Move the `uiSchema` to its own property in the validation `context` to align with component development and access of `ui:options`
+- Updated dependencies
+  - @backstage/core-components@0.12.5-next.1
+  - @backstage/errors@1.1.5-next.0
+  - @backstage/catalog-client@1.4.0-next.1
+  - @backstage/core-plugin-api@1.4.1-next.1
+  - @backstage/theme@0.2.18-next.0
+  - @backstage/plugin-catalog-react@1.4.0-next.1
+  - @backstage/catalog-model@1.2.1-next.1
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.3
+  - @backstage/plugin-scaffolder-common@1.2.6-next.1
+
 ## 1.1.1-next.0
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.1.1-next.0",
+  "version": "1.2.0-next.2",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/alpha.d.ts

@@ -5,10 +5,10 @@ import react__default, { PropsWithChildren, ReactNode } from 'react';
 import { ApiHolder, Extension, IconComponent } from '@backstage/core-plugin-api';
 import * as _rjsf_utils from '@rjsf/utils';
 import { FieldProps, UiSchema, UIOptionsType, FieldValidation } from '@rjsf/utils';
-import { CustomFieldExtensionSchema, FieldExtensionComponent, TemplateParameterSchema, LayoutOptions, ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
+import { CustomFieldExtensionSchema, FieldExtensionComponent, TemplateParameterSchema, LayoutOptions, ScaffolderTaskOutput, ScaffolderStep } from '@backstage/plugin-scaffolder-react';
 import * as _rjsf_core_v5 from '@rjsf/core-v5';
 import { FormProps as FormProps$1 } from '@rjsf/core-v5';
-import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { TemplateEntityV1beta3, TaskStep } from '@backstage/plugin-scaffolder-common';
 
 /**
  * Type for Field Extension Props for RJSF v5
@@ -16,19 +16,26 @@ import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
  * @alpha
  */
 interface NextFieldExtensionComponentProps<TFieldReturnValue, TUiOptions = {}> extends PropsWithChildren<FieldProps<TFieldReturnValue>> {
-    uiSchema?: UiSchema<TFieldReturnValue> & {
-        'ui:options'?: TUiOptions & UIOptionsType;
-    };
+    uiSchema?: NextFieldExtensionUiSchema<TFieldReturnValue, TUiOptions>;
+}
+/**
+ * Type for Field Extension UiSchema
+ *
+ * @alpha
+ */
+interface NextFieldExtensionUiSchema<TFieldReturnValue, TUiOptions> extends UiSchema<TFieldReturnValue> {
+    'ui:options'?: TUiOptions & UIOptionsType;
 }
 /**
  * Field validation type for Custom Field Extensions.
  *
  * @alpha
  */
-declare type NextCustomFieldValidator<TFieldReturnValue> = (data: TFieldReturnValue, field: FieldValidation, context: {
+declare type NextCustomFieldValidator<TFieldReturnValue, TUiOptions = unknown> = (data: TFieldReturnValue, field: FieldValidation, context: {
     apiHolder: ApiHolder;
     formData: JsonObject;
     schema: JsonObject;
+    uiSchema?: NextFieldExtensionUiSchema<TFieldReturnValue, TUiOptions>;
 }) => void | Promise<void>;
 /**
  * Type for the Custom Field Extension with the
@@ -36,10 +43,10 @@ declare type NextCustomFieldValidator<TFieldReturnValue> = (data: TFieldReturnVa
  *
  * @alpha
  */
-declare type NextFieldExtensionOptions<TFieldReturnValue = unknown, TInputProps = unknown> = {
+declare type NextFieldExtensionOptions<TFieldReturnValue = unknown, TUiOptions = unknown> = {
     name: string;
-    component: (props: NextFieldExtensionComponentProps<TFieldReturnValue, TInputProps>) => JSX.Element | null;
-    validation?: NextCustomFieldValidator<TFieldReturnValue>;
+    component: (props: NextFieldExtensionComponentProps<TFieldReturnValue, TUiOptions>) => JSX.Element | null;
+    validation?: NextCustomFieldValidator<TFieldReturnValue, TUiOptions>;
     schema?: CustomFieldExtensionSchema;
 };
 
@@ -191,6 +198,35 @@ declare const DefaultTemplateOutputs: (props: {
 /** @alpha */
 declare const Form: react.ComponentType<_rjsf_core_v5.FormProps<any, _rjsf_utils.RJSFSchema, any>>;
 
+/**
+ * Props for the TaskSteps component
+ *
+ * @alpha
+ */
+interface TaskStepsProps {
+    steps: (TaskStep & ScaffolderStep)[];
+    activeStep?: number;
+    isComplete?: boolean;
+    isError?: boolean;
+}
+/**
+ * The visual stepper of the task event stream
+ *
+ * @alpha
+ */
+declare const TaskSteps: (props: TaskStepsProps) => JSX.Element;
+
+/**
+ * The text of the event stream
+ *
+ * @alpha
+ */
+declare const TaskLogStream: (props: {
+    logs: {
+        [k: string]: string[];
+    };
+}) => JSX.Element;
+
 /**
  * Takes a step from a Backstage Template Manifest and converts it to a JSON Schema and UI Schema for rjsf
  * @alpha
@@ -220,4 +256,4 @@ declare const useTemplateParameterSchema: (templateRef: string) => {
     error: Error | undefined;
 };
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormProps, NextCustomFieldValidator, NextFieldExtensionComponentProps, NextFieldExtensionOptions, ParsedTemplateSchema, ReviewState, ReviewStateProps, Stepper, StepperProps, TemplateCard, TemplateCardProps, TemplateGroup, TemplateGroupProps, Workflow, WorkflowProps, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormProps, NextCustomFieldValidator, NextFieldExtensionComponentProps, NextFieldExtensionOptions, NextFieldExtensionUiSchema, ParsedTemplateSchema, ReviewState, ReviewStateProps, Stepper, StepperProps, TaskLogStream, TaskSteps, TaskStepsProps, TemplateCard, TemplateCardProps, TemplateGroup, TemplateGroupProps, Workflow, WorkflowProps, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };

package/dist/alpha.esm.js

@@ -1,8 +1,8 @@
 import { useApi, featureFlagsApiRef, createApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef, attachComponentData } from '@backstage/core-plugin-api';
-import { makeStyles, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, Typography, Paper } from '@material-ui/core';
+import { makeStyles, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, Typography, Paper, CircularProgress, LinearProgress, StepButton } from '@material-ui/core';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { Draft07 } from 'json-schema-library';
-import { StructuredMetadataTable, MarkdownContent, ItemCardHeader, Link, UserIcon, Content, ItemCardGrid, ContentHeader, Progress, InfoCard } from '@backstage/core-components';
+import { StructuredMetadataTable, MarkdownContent, ItemCardHeader, Link, UserIcon, Content, ItemCardGrid, ContentHeader, Progress, InfoCard, LogViewer } from '@backstage/core-components';
 import validator from '@rjsf/validator-ajv8';
 import qs from 'qs';
 import useAsync from 'react-use/lib/useAsync';
@@ -12,6 +12,16 @@ import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstag
 import { FavoriteEntity, getEntityRelations, EntityRefLinks, entityRouteRef } from '@backstage/plugin-catalog-react';
 import LanguageIcon from '@material-ui/icons/Language';
 import WebIcon from '@material-ui/icons/Web';
+import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
+import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
+import classNames from 'classnames';
+import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import useInterval from 'react-use/lib/useInterval';
+import { DateTime, Interval } from 'luxon';
+import humanizeDuration from 'humanize-duration';
+import { useMountEffect } from '@react-hookz/web';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 
 function isObject$1(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -127,9 +137,10 @@ function isObject(value) {
 
 const createAsyncValidators = (rootSchema, validators, context) => {
   async function validate(formData, pathPrefix = "#", current = formData) {
+    var _a, _b;
     const parsedSchema = new Draft07(rootSchema);
     const formValidation = {};
-    const validateForm = async (validatorName, key, value, schema) => {
+    const validateForm = async (validatorName, key, value, schema, uiSchema) => {
       const validator = validators[validatorName];
       if (validator) {
         const fieldValidation = createFieldValidation();
@@ -137,7 +148,8 @@ const createAsyncValidators = (rootSchema, validators, context) => {
           await validator(value, fieldValidation, {
             ...context,
             formData,
-            schema
+            schema,
+            uiSchema
           });
         } catch (ex) {
           fieldValidation.addError(ex.message);
@@ -148,23 +160,31 @@ const createAsyncValidators = (rootSchema, validators, context) => {
     for (const [key, value] of Object.entries(current)) {
       const path = `${pathPrefix}/${key}`;
       const definitionInSchema = parsedSchema.getSchema(path, formData);
-      if (definitionInSchema && "ui:field" in definitionInSchema) {
-        if ("ui:field" in definitionInSchema) {
-          await validateForm(
-            definitionInSchema["ui:field"],
-            key,
-            value,
-            definitionInSchema
-          );
+      const { schema, uiSchema } = extractSchemaFromStep(definitionInSchema);
+      const hasItems = definitionInSchema && definitionInSchema.items;
+      const doValidateItem = async (propValue, itemSchema, itemUiSchema) => {
+        await validateForm(
+          propValue["ui:field"],
+          key,
+          value,
+          itemSchema,
+          itemUiSchema
+        );
+      };
+      const doValidate = async (propValue) => {
+        if ("ui:field" in propValue) {
+          const { schema: itemsSchema, uiSchema: itemsUiSchema } = extractSchemaFromStep(definitionInSchema.items);
+          await doValidateItem(propValue, itemsSchema, itemsUiSchema);
         }
-      } else if (definitionInSchema && definitionInSchema.items && "ui:field" in definitionInSchema.items) {
-        if ("ui:field" in definitionInSchema.items) {
-          await validateForm(
-            definitionInSchema.items["ui:field"],
-            key,
-            value,
-            definitionInSchema.items
-          );
+      };
+      if (definitionInSchema && "ui:field" in definitionInSchema) {
+        await doValidateItem(definitionInSchema, schema, uiSchema);
+      } else if (hasItems && "ui:field" in definitionInSchema.items) {
+        await doValidate(definitionInSchema.items);
+      } else if (hasItems && definitionInSchema.items.type === "object") {
+        const properties = (_b = (_a = definitionInSchema.items) == null ? void 0 : _a.properties) != null ? _b : [];
+        for (const [, propValue] of Object.entries(properties)) {
+          await doValidate(propValue);
         }
       } else if (isObject(value)) {
         formValidation[key] = await validate(formData, path, value);
@@ -220,23 +240,26 @@ const useTemplateSchema = (manifest) => {
     var _a;
     const stepFeatureFlag = (_a = step.uiSchema["ui:backstage"]) == null ? void 0 : _a.featureFlag;
     return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
-  }).map((step) => ({
-    ...step,
-    schema: {
-      ...step.schema,
-      // Title is rendered at the top of the page, so let's ignore this from jsonschemaform
-      title: void 0,
-      properties: Object.fromEntries(
-        Object.entries(step.schema.properties).filter(
-          ([key]) => {
-            var _a, _b;
-            const stepFeatureFlag = (_b = (_a = step.uiSchema[key]) == null ? void 0 : _a["ui:backstage"]) == null ? void 0 : _b.featureFlag;
-            return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
-          }
+  }).map((step) => {
+    var _a, _b;
+    return {
+      ...step,
+      schema: {
+        ...step.schema,
+        // Title is rendered at the top of the page, so let's ignore this from jsonschemaform
+        title: void 0,
+        properties: Object.fromEntries(
+          Object.entries((_b = (_a = step.schema) == null ? void 0 : _a.properties) != null ? _b : []).filter(
+            ([key]) => {
+              var _a2, _b2;
+              const stepFeatureFlag = (_b2 = (_a2 = step.uiSchema[key]) == null ? void 0 : _a2["ui:backstage"]) == null ? void 0 : _b2.featureFlag;
+              return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
+            }
+          )
         )
-      )
-    }
-  }));
+      }
+    };
+  });
   return {
     steps: returningSteps
   };
@@ -305,7 +328,7 @@ var FieldOverrides = /*#__PURE__*/Object.freeze({
 
 const Form = withTheme(require("@rjsf/material-ui-v5").Theme);
 
-const useStyles$5 = makeStyles((theme) => ({
+const useStyles$7 = makeStyles((theme) => ({
   backButton: {
     marginRight: theme.spacing(1)
   },
@@ -332,7 +355,7 @@ const Stepper = (stepperProps) => {
   const [activeStep, setActiveStep] = useState(0);
   const [formState, setFormState] = useFormDataFromQuery(props.initialState);
   const [errors, setErrors] = useState();
-  const styles = useStyles$5();
+  const styles = useStyles$7();
   const extensions = useMemo(() => {
     return Object.fromEntries(
       props.extensions.map(({ name, component }) => [name, component])
@@ -424,17 +447,16 @@ const Stepper = (stepperProps) => {
   )))));
 };
 
-const useStyles$4 = makeStyles(
-  () => ({
-    header: {
-      backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage
-    },
-    subtitleWrapper: {
-      display: "flex",
-      justifyContent: "space-between"
-    }
-  })
-);
+const useStyles$6 = makeStyles(() => ({
+  header: {
+    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
+    color: ({ cardFontColor }) => cardFontColor
+  },
+  subtitleWrapper: {
+    display: "flex",
+    justifyContent: "space-between"
+  }
+}));
 const CardHeader = (props) => {
   const {
     template: {
@@ -444,7 +466,8 @@ const CardHeader = (props) => {
   } = props;
   const { getPageTheme } = useTheme();
   const themeForType = getPageTheme({ themeId: type });
-  const styles = useStyles$4({
+  const styles = useStyles$6({
+    cardFontColor: themeForType.fontColor,
     cardBackgroundImage: themeForType.backgroundImage
   });
   const SubtitleComponent = /* @__PURE__ */ React.createElement("div", { className: styles.subtitleWrapper }, /* @__PURE__ */ React.createElement("div", null, type), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FavoriteEntity, { entity: props.template, style: { padding: 0 } })));
@@ -458,18 +481,18 @@ const CardHeader = (props) => {
   );
 };
 
-const useStyles$3 = makeStyles(() => ({
+const useStyles$5 = makeStyles(() => ({
   linkText: {
     display: "inline-flex",
     alignItems: "center"
   }
 }));
 const CardLink = ({ icon: Icon, text, url }) => {
-  const styles = useStyles$3();
+  const styles = useStyles$5();
   return /* @__PURE__ */ React.createElement("div", { className: styles.linkText }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(Link, { style: { marginLeft: "8px" }, to: url }, text || url));
 };
 
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   box: {
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -507,7 +530,7 @@ const useStyles$2 = makeStyles((theme) => ({
 const TemplateCard = (props) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const { template } = props;
-  const styles = useStyles$2();
+  const styles = useStyles$4();
   const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
   const app = useApp();
   const iconResolver = (key) => {
@@ -581,18 +604,18 @@ const TemplateGroup = (props) => {
 };
 
 const SecretsContext = createVersionedContext("secrets-context");
-const SecretsContextProvider = ({ children }) => {
+const SecretsContextProvider = (props) => {
   const [secrets, setSecrets] = useState({});
   return /* @__PURE__ */ React.createElement(
     SecretsContext.Provider,
     {
       value: createVersionedValueMap({ 1: { secrets, setSecrets } })
     },
-    children
+    props.children
   );
 };
 
-const useStyles$1 = makeStyles(() => ({
+const useStyles$3 = makeStyles(() => ({
   markdown: {
     /** to make the styles for React Markdown not leak into the description */
     "& :first-child": {
@@ -606,7 +629,7 @@ const useStyles$1 = makeStyles(() => ({
 const Workflow = (workflowProps) => {
   var _a;
   const { title, description, namespace, templateName, ...props } = workflowProps;
-  const styles = useStyles$1();
+  const styles = useStyles$3();
   const templateRef = stringifyEntityRef({
     kind: "Template",
     namespace,
@@ -641,7 +664,7 @@ const Workflow = (workflowProps) => {
 };
 const EmbeddableWorkflow = (props) => /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(Workflow, { ...props }));
 
-const useStyles = makeStyles({
+const useStyles$2 = makeStyles({
   root: {
     "&:hover": {
       textDecoration: "none"
@@ -650,7 +673,7 @@ const useStyles = makeStyles({
 });
 const LinkOutputs = (props) => {
   const { links = [] } = props.output;
-  const classes = useStyles();
+  const classes = useStyles$2();
   const app = useApp();
   const entityRoute = useRouteRef(entityRouteRef);
   const iconResolver = (key) => {
@@ -678,6 +701,144 @@ const DefaultTemplateOutputs = (props) => {
   return /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(Box, { padding: 2, justifyContent: "center", display: "flex", gridGap: 16 }, /* @__PURE__ */ React.createElement(LinkOutputs, { output: props.output }))));
 };
 
+const useStepIconStyles = makeStyles((theme) => ({
+  root: {
+    color: theme.palette.text.disabled
+  },
+  completed: {
+    color: theme.palette.status.ok
+  },
+  error: {
+    color: theme.palette.status.error
+  }
+}));
+const StepIcon = (props) => {
+  const classes = useStepIconStyles();
+  const { active, completed, error, skipped } = props;
+  const getMiddle = () => {
+    if (active) {
+      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "20px" });
+    }
+    if (completed) {
+      return /* @__PURE__ */ React.createElement(CheckCircleOutline, null);
+    }
+    if (error) {
+      return /* @__PURE__ */ React.createElement(ErrorOutline, null);
+    }
+    if (skipped) {
+      return /* @__PURE__ */ React.createElement(RemoveCircleOutline, null);
+    }
+    return /* @__PURE__ */ React.createElement(PanoramaFishEyeIcon, null);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(classes.root, {
+        [classes.completed]: completed,
+        [classes.error]: error
+      })
+    },
+    getMiddle()
+  );
+};
+
+const StepTime = (props) => {
+  const [time, setTime] = useState("");
+  const { step } = props;
+  const calculate = useCallback(() => {
+    if (!step.startedAt) {
+      setTime("");
+      return;
+    }
+    const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
+    const startedAt = DateTime.fromISO(step.startedAt);
+    const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
+    setTime(humanizeDuration(formatted, { round: true }));
+  }, [step.endedAt, step.startedAt]);
+  useMountEffect(() => calculate());
+  useInterval(() => !step.endedAt && calculate(), 1e3);
+  return /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, time);
+};
+
+const useStyles$1 = makeStyles((theme) => ({
+  failed: {
+    backgroundColor: theme.palette.error.main
+  },
+  success: {
+    backgroundColor: theme.palette.success.main
+  }
+}));
+const TaskBorder = (props) => {
+  const styles = useStyles$1();
+  if (!props.isComplete) {
+    return /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" });
+  }
+  return /* @__PURE__ */ React.createElement(
+    LinearProgress,
+    {
+      variant: "determinate",
+      classes: { bar: props.isError ? styles.failed : styles.success },
+      value: 100
+    }
+  );
+};
+
+const TaskSteps = (props) => {
+  var _a, _b;
+  return /* @__PURE__ */ React.createElement(Paper, { style: { position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
+    TaskBorder,
+    {
+      isComplete: (_a = props.isComplete) != null ? _a : false,
+      isError: (_b = props.isError) != null ? _b : false
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { padding: 2 }, /* @__PURE__ */ React.createElement(
+    Stepper$1,
+    {
+      activeStep: props.activeStep,
+      alternativeLabel: true,
+      variant: "elevation"
+    },
+    props.steps.map((step, index) => {
+      const isCompleted = step.status === "completed";
+      const isFailed = step.status === "failed";
+      const isActive = step.status === "processing";
+      const isSkipped = step.status === "skipped";
+      const stepIconProps = {
+        completed: isCompleted,
+        error: isFailed,
+        active: isActive,
+        skipped: isSkipped
+      };
+      return /* @__PURE__ */ React.createElement(Step, { key: index }, /* @__PURE__ */ React.createElement(StepButton, null, /* @__PURE__ */ React.createElement(
+        StepLabel,
+        {
+          StepIconProps: stepIconProps,
+          StepIconComponent: StepIcon
+        },
+        /* @__PURE__ */ React.createElement(Box, null, step.name),
+        /* @__PURE__ */ React.createElement(StepTime, { step })
+      )));
+    })
+  )));
+};
+
+const useStyles = makeStyles$1({
+  root: {
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  }
+});
+const TaskLogStream = (props) => {
+  const styles = useStyles();
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(
+    LogViewer,
+    {
+      text: Object.values(props.logs).map((l) => l.join("\n")).filter(Boolean).join("\n")
+    }
+  ));
+};
+
 const FIELD_EXTENSION_KEY = "scaffolder.extensions.field.v1";
 
 function createNextScaffolderFieldExtension(options) {
@@ -694,5 +855,5 @@ function createNextScaffolderFieldExtension(options) {
   };
 }
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, Stepper, TemplateCard, TemplateGroup, Workflow, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateGroup, Workflow, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
 //# sourceMappingURL=alpha.esm.js.map