@backstage/plugin-scaffolder-react 1.1.0 → 1.2.0-next.1

package/dist/index.esm.js

@@ -1,17 +1,7 @@
-import { attachComponentData, createApiRef, useElementFilter, useApi, featureFlagsApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef } from '@backstage/core-plugin-api';
+import { attachComponentData, createApiRef, useElementFilter, useApi } from '@backstage/core-plugin-api';
 import { createVersionedContext, createVersionedValueMap, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
-import React, { useState, useContext, useCallback, useMemo, useEffect } from 'react';
-import { makeStyles, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, Typography, Paper } from '@material-ui/core';
-import { Draft07 } from 'json-schema-library';
-import { StructuredMetadataTable, MarkdownContent, ItemCardHeader, Link, UserIcon, Content, ItemCardGrid, ContentHeader, Progress, InfoCard } from '@backstage/core-components';
-import validator from '@rjsf/validator-ajv8';
-import qs from 'qs';
-import useAsync from 'react-use/lib/useAsync';
-import { withTheme } from '@rjsf/core-v5';
-import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
-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 React, { useState, useContext, useCallback, useEffect } from 'react';
+import { useImmerReducer } from 'use-immer';
 
 const FIELD_EXTENSION_WRAPPER_KEY = "scaffolder.extensions.wrapper.v1";
 const FIELD_EXTENSION_KEY = "scaffolder.extensions.field.v1";
@@ -97,661 +87,143 @@ const useCustomLayouts = (outlet) => {
   );
 };
 
-function createScaffolderLayout(options) {
-  return {
-    expose() {
-      const LayoutDataHolder = () => null;
-      attachComponentData(LayoutDataHolder, LAYOUTS_KEY, options);
-      return LayoutDataHolder;
-    }
-  };
-}
-const ScaffolderLayouts = () => null;
-attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true);
-
-function isObject$1(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function extractUiSchema(schema, uiSchema) {
-  if (!isObject$1(schema)) {
-    return;
-  }
-  const { properties, items, anyOf, oneOf, allOf, dependencies } = schema;
-  for (const propName in schema) {
-    if (!schema.hasOwnProperty(propName)) {
-      continue;
-    }
-    if (propName.startsWith("ui:")) {
-      uiSchema[propName] = schema[propName];
-      delete schema[propName];
-    }
-  }
-  if (isObject$1(properties)) {
-    for (const propName in properties) {
-      if (!properties.hasOwnProperty(propName)) {
-        continue;
-      }
-      const schemaNode = properties[propName];
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      const innerUiSchema = {};
-      uiSchema[propName] = innerUiSchema;
-      extractUiSchema(schemaNode, innerUiSchema);
-    }
-  }
-  if (isObject$1(items)) {
-    const innerUiSchema = {};
-    uiSchema.items = innerUiSchema;
-    extractUiSchema(items, innerUiSchema);
-  }
-  if (Array.isArray(anyOf)) {
-    for (const schemaNode of anyOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (Array.isArray(oneOf)) {
-    for (const schemaNode of oneOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (Array.isArray(allOf)) {
-    for (const schemaNode of allOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (isObject$1(dependencies)) {
-    for (const depName of Object.keys(dependencies)) {
-      const schemaNode = dependencies[depName];
-      if (!isObject$1(schemaNode)) {
-        continue;
+function reducer(draft, action) {
+  var _a, _b, _c;
+  switch (action.type) {
+    case "INIT": {
+      draft.steps = action.data.spec.steps.reduce((current, next) => {
+        current[next.id] = { status: "open", id: next.id };
+        return current;
+      }, {});
+      draft.stepLogs = action.data.spec.steps.reduce((current, next) => {
+        current[next.id] = [];
+        return current;
+      }, {});
+      draft.loading = false;
+      draft.error = void 0;
+      draft.completed = false;
+      draft.task = action.data;
+      return;
+    }
+    case "LOGS": {
+      const entries = action.data;
+      for (const entry of entries) {
+        const logLine = `${entry.createdAt} ${entry.body.message}`;
+        if (!entry.body.stepId || !((_a = draft.steps) == null ? void 0 : _a[entry.body.stepId])) {
+          continue;
+        }
+        const currentStepLog = (_b = draft.stepLogs) == null ? void 0 : _b[entry.body.stepId];
+        const currentStep = (_c = draft.steps) == null ? void 0 : _c[entry.body.stepId];
+        if (entry.body.status && entry.body.status !== currentStep.status) {
+          currentStep.status = entry.body.status;
+          if (currentStep.status === "processing") {
+            currentStep.startedAt = entry.createdAt;
+          }
+          if (["cancelled", "failed", "completed"].includes(currentStep.status)) {
+            currentStep.endedAt = entry.createdAt;
+          }
+        }
+        currentStepLog == null ? void 0 : currentStepLog.push(logLine);
       }
-      extractUiSchema(schemaNode, uiSchema);
+      return;
     }
-  }
-}
-const extractSchemaFromStep = (inputStep) => {
-  const uiSchema = {};
-  const returnSchema = JSON.parse(JSON.stringify(inputStep));
-  extractUiSchema(returnSchema, uiSchema);
-  return { uiSchema, schema: returnSchema };
-};
-const createFieldValidation = () => {
-  const fieldValidation = {
-    __errors: [],
-    addError: (message) => {
-      var _a;
-      (_a = fieldValidation.__errors) == null ? void 0 : _a.push(message);
+    case "COMPLETED": {
+      draft.completed = true;
+      draft.output = action.data.body.output;
+      draft.error = action.data.body.error;
+      return;
     }
-  };
-  return fieldValidation;
-};
-
-function isFieldValidation(error) {
-  return !!error && "__errors" in error;
-}
-function hasErrors(errors) {
-  var _a;
-  if (!errors) {
-    return false;
-  }
-  for (const error of Object.values(errors)) {
-    if (isFieldValidation(error)) {
-      if (((_a = error.__errors) != null ? _a : []).length > 0) {
-        return true;
-      }
-      continue;
+    case "ERROR": {
+      draft.error = action.data;
+      draft.loading = false;
+      draft.completed = true;
+      return;
     }
-    return hasErrors(error);
+    default:
+      return;
   }
-  return false;
 }
-function isObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-const createAsyncValidators = (rootSchema, validators, context) => {
-  async function validate(formData, pathPrefix = "#", current = formData) {
-    const parsedSchema = new Draft07(rootSchema);
-    const formValidation = {};
-    const validateForm = async (validatorName, key, value) => {
-      const validator = validators[validatorName];
-      if (validator) {
-        const fieldValidation = createFieldValidation();
-        try {
-          await validator(value, fieldValidation, { ...context, formData });
-        } catch (ex) {
-          fieldValidation.addError(ex.message);
-        }
-        formValidation[key] = fieldValidation;
-      }
-    };
-    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);
+const useTaskEventStream = (taskId) => {
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const [state, dispatch] = useImmerReducer(reducer, {
+    loading: true,
+    completed: false,
+    stepLogs: {},
+    steps: {}
+  });
+  useEffect(() => {
+    let didCancel = false;
+    let subscription;
+    let logPusher;
+    scaffolderApi.getTask(taskId).then(
+      (task) => {
+        if (didCancel) {
+          return;
         }
-      } else if (definitionInSchema && definitionInSchema.items && "ui:field" in definitionInSchema.items) {
-        if ("ui:field" in definitionInSchema.items) {
-          await validateForm(definitionInSchema.items["ui:field"], key, value);
+        dispatch({ type: "INIT", data: task });
+        const observable = scaffolderApi.streamLogs({ taskId });
+        const collectedLogEvents = new Array();
+        function emitLogs() {
+          if (collectedLogEvents.length) {
+            const logs = collectedLogEvents.splice(
+              0,
+              collectedLogEvents.length
+            );
+            dispatch({ type: "LOGS", data: logs });
+          }
         }
-      } else if (isObject(value)) {
-        formValidation[key] = await validate(formData, path, value);
-      }
-    }
-    return formValidation;
-  }
-  return async (formData) => {
-    return await validate(formData);
-  };
-};
-
-const ReviewState = (props) => {
-  const reviewData = Object.fromEntries(
-    Object.entries(props.formState).map(([key, value]) => {
-      var _a;
-      for (const step of props.schemas) {
-        const parsedSchema = new Draft07(step.mergedSchema);
-        const definitionInSchema = parsedSchema.getSchema(
-          `#/${key}`,
-          props.formState
-        );
-        if (definitionInSchema) {
-          const backstageReviewOptions = (_a = definitionInSchema["ui:backstage"]) == null ? void 0 : _a.review;
-          if (backstageReviewOptions) {
-            if (backstageReviewOptions.mask) {
-              return [key, backstageReviewOptions.mask];
+        logPusher = setInterval(emitLogs, 500);
+        subscription = observable.subscribe({
+          next: (event) => {
+            switch (event.type) {
+              case "log":
+                return collectedLogEvents.push(event);
+              case "completion":
+                emitLogs();
+                dispatch({ type: "COMPLETED", data: event });
+                return void 0;
+              default:
+                throw new Error(
+                  `Unhandled event type ${event.type} in observer`
+                );
             }
-            if (backstageReviewOptions.show === false) {
-              return [];
-            }
-          }
-          if (definitionInSchema["ui:widget"] === "password") {
-            return [key, "******"];
+          },
+          error: (error) => {
+            emitLogs();
+            dispatch({ type: "ERROR", data: error });
           }
+        });
+      },
+      (error) => {
+        if (!didCancel) {
+          dispatch({ type: "ERROR", data: error });
         }
       }
-      return [key, value];
-    })
-  );
-  return /* @__PURE__ */ React.createElement(StructuredMetadataTable, { metadata: reviewData });
-};
-
-const useTemplateSchema = (manifest) => {
-  const featureFlags = useApi(featureFlagsApiRef);
-  const steps = manifest.steps.map(({ title, description, schema }) => ({
-    title,
-    description,
-    mergedSchema: schema,
-    ...extractSchemaFromStep(schema)
-  }));
-  const returningSteps = steps.filter((step) => {
-    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;
-          }
-        )
-      )
-    }
-  }));
-  return {
-    steps: returningSteps
-  };
-};
-
-const useFormDataFromQuery = (initialState) => {
-  return useState(() => {
-    if (initialState) {
-      return initialState;
-    }
-    const query = qs.parse(window.location.search, {
-      ignoreQueryPrefix: true
-    });
-    try {
-      return JSON.parse(query.formData);
-    } catch (e) {
-      return {};
-    }
-  });
-};
-
-const useTemplateParameterSchema = (templateRef) => {
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const { value, loading, error } = useAsync(
-    () => scaffolderApi.getTemplateParameterSchema(templateRef),
-    [scaffolderApi, templateRef]
-  );
-  return { manifest: value, loading, error };
-};
-
-const useTransformSchemaToProps = (step, options = {}) => {
-  var _a;
-  const { layouts = [] } = options;
-  const objectFieldTemplate = step == null ? void 0 : step.uiSchema["ui:ObjectFieldTemplate"];
-  if (typeof objectFieldTemplate !== "string") {
-    return step;
-  }
-  const Layout = (_a = layouts.find(
-    (layout) => layout.name === objectFieldTemplate
-  )) == null ? void 0 : _a.component;
-  if (!Layout) {
-    return step;
-  }
-  return {
-    ...step,
-    uiSchema: {
-      ...step.uiSchema,
-      ["ui:ObjectFieldTemplate"]: Layout
-    }
-  };
-};
-
-const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: description, linkTarget: "_blank" });
-
-var FieldOverrides = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DescriptionField: DescriptionField
-});
-
-const Form = withTheme(require("@rjsf/material-ui-v5").Theme);
-
-const useStyles$5 = makeStyles((theme) => ({
-  backButton: {
-    marginRight: theme.spacing(1)
-  },
-  footer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "right"
-  },
-  formWrapper: {
-    padding: theme.spacing(2)
-  }
-}));
-const Stepper = (stepperProps) => {
-  var _a;
-  const { layouts = [], components = {}, ...props } = stepperProps;
-  const {
-    ReviewStateComponent = ReviewState,
-    createButtonText = "Create",
-    reviewButtonText = "Review"
-  } = components;
-  const analytics = useAnalytics();
-  const { steps } = useTemplateSchema(props.manifest);
-  const apiHolder = useApiHolder();
-  const [activeStep, setActiveStep] = useState(0);
-  const [formState, setFormState] = useFormDataFromQuery(props.initialState);
-  const [errors, setErrors] = useState();
-  const styles = useStyles$5();
-  const extensions = useMemo(() => {
-    return Object.fromEntries(
-      props.extensions.map(({ name, component }) => [name, component])
-    );
-  }, [props.extensions]);
-  const validators = useMemo(() => {
-    return Object.fromEntries(
-      props.extensions.map(({ name, validation: validation2 }) => [name, validation2])
     );
-  }, [props.extensions]);
-  const validation = useMemo(() => {
-    var _a2;
-    return createAsyncValidators((_a2 = steps[activeStep]) == null ? void 0 : _a2.mergedSchema, validators, {
-      apiHolder
-    });
-  }, [steps, activeStep, validators, apiHolder]);
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-  const handleChange = useCallback(
-    (e) => setFormState((current) => ({ ...current, ...e.formData })),
-    [setFormState]
-  );
-  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });
-  const handleNext = async ({
-    formData = {}
-  }) => {
-    setErrors(void 0);
-    const returnedValidation = await validation(formData);
-    if (hasErrors(returnedValidation)) {
-      setErrors(returnedValidation);
-    } else {
-      setErrors(void 0);
-      setActiveStep((prevActiveStep) => {
-        const stepNum = prevActiveStep + 1;
-        analytics.captureEvent("click", `Next Step (${stepNum})`);
-        return stepNum;
-      });
-    }
-    setFormState((current) => ({ ...current, ...formData }));
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper$1, { activeStep, alternativeLabel: true, variant: "elevation" }, steps.map((step, index) => /* @__PURE__ */ React.createElement(Step, { key: index }, /* @__PURE__ */ React.createElement(StepLabel, null, step.title))), /* @__PURE__ */ React.createElement(Step, null, /* @__PURE__ */ React.createElement(StepLabel, null, "Review"))), /* @__PURE__ */ React.createElement("div", { className: styles.formWrapper }, activeStep < steps.length ? /* @__PURE__ */ React.createElement(
-    Form,
-    {
-      validator,
-      extraErrors: errors,
-      formData: formState,
-      formContext: { formData: formState },
-      schema: currentStep.schema,
-      uiSchema: currentStep.uiSchema,
-      onSubmit: handleNext,
-      fields: { ...FieldOverrides, ...extensions },
-      showErrorList: false,
-      onChange: handleChange,
-      ...(_a = props.FormProps) != null ? _a : {}
-    },
-    /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        onClick: handleBack,
-        className: styles.backButton,
-        disabled: activeStep < 1
-      },
-      "Back"
-    ), /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", type: "submit" }, activeStep === steps.length - 1 ? reviewButtonText : "Next"))
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ReviewStateComponent, { formState, schemas: steps }), /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      onClick: handleBack,
-      className: styles.backButton,
-      disabled: activeStep < 1
-    },
-    "Back"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "contained",
-      onClick: () => {
-        var _a2;
-        props.onCreate(formState);
-        const name = typeof formState.name === "string" ? formState.name : void 0;
-        analytics.captureEvent(
-          "create",
-          (_a2 = name != null ? name : props.templateName) != null ? _a2 : "unknown"
-        );
+    return () => {
+      didCancel = true;
+      if (subscription) {
+        subscription.unsubscribe();
       }
-    },
-    createButtonText
-  )))));
-};
-
-const useStyles$4 = makeStyles(
-  () => ({
-    header: {
-      backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage
-    },
-    subtitleWrapper: {
-      display: "flex",
-      justifyContent: "space-between"
-    }
-  })
-);
-const CardHeader = (props) => {
-  const {
-    template: {
-      metadata: { title, name },
-      spec: { type }
-    }
-  } = props;
-  const { getPageTheme } = useTheme();
-  const themeForType = getPageTheme({ themeId: type });
-  const styles = useStyles$4({
-    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 } })));
-  return /* @__PURE__ */ React.createElement(
-    ItemCardHeader,
-    {
-      title: title != null ? title : name,
-      subtitle: SubtitleComponent,
-      classes: { root: styles.header }
-    }
-  );
-};
-
-const useStyles$3 = makeStyles(() => ({
-  linkText: {
-    display: "inline-flex",
-    alignItems: "center"
-  }
-}));
-const CardLink = ({ icon: Icon, text, url }) => {
-  const styles = useStyles$3();
-  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) => ({
-  box: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    display: "-webkit-box",
-    "-webkit-line-clamp": 10,
-    "-webkit-box-orient": "vertical"
-  },
-  markdown: {
-    /** to make the styles for React Markdown not leak into the description */
-    "& :first-child": {
-      margin: 0
-    }
-  },
-  label: {
-    color: theme.palette.text.secondary,
-    textTransform: "uppercase",
-    fontWeight: "bold",
-    letterSpacing: 0.5,
-    lineHeight: 1,
-    fontSize: "0.75rem"
-  },
-  footer: {
-    display: "flex",
-    justifyContent: "space-between",
-    flex: 1,
-    alignItems: "center"
-  },
-  ownedBy: {
-    display: "flex",
-    alignItems: "center",
-    flex: 1,
-    color: theme.palette.link
-  }
-}));
-const TemplateCard = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { template } = props;
-  const styles = useStyles$2();
-  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
-  const app = useApp();
-  const iconResolver = (key) => {
-    var _a2;
-    return key ? (_a2 = app.getSystemIcon(key)) != null ? _a2 : LanguageIcon : LanguageIcon;
-  };
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { template }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Box, { className: styles.box }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
-    {
-      className: styles.markdown,
-      content: (_a = template.metadata.description) != null ? _a : "No description"
-    }
-  ))), ((_c = (_b = template.metadata.tags) == null ? void 0 : _b.length) != null ? _c : 0) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_d = template.metadata.tags) == null ? void 0 : _d.map((tag) => /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      style: { margin: 0 },
-      size: "small",
-      label: tag,
-      key: tag
-    }
-  )))))), (props.additionalLinks || ((_e = template.metadata.links) == null ? void 0 : _e.length)) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_f = props.additionalLinks) == null ? void 0 : _f.map(({ icon, text, url }) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6 }, /* @__PURE__ */ React.createElement(CardLink, { icon, text, url }))), (_g = template.metadata.links) == null ? void 0 : _g.map(({ url, icon, title }) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6 }, /* @__PURE__ */ React.createElement(
-    CardLink,
-    {
-      icon: iconResolver(icon),
-      text: title || url,
-      url
-    }
-  )))))))), /* @__PURE__ */ React.createElement(CardActions, { style: { padding: "16px" } }, /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement("div", { className: styles.ownedBy }, ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UserIcon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(
-    EntityRefLinks,
-    {
-      style: { marginLeft: "8px" },
-      entityRefs: ownedByRelations,
-      defaultKind: "Group"
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "small",
-      variant: "outlined",
-      color: "primary",
-      onClick: () => {
-        var _a2;
-        return (_a2 = props.onSelected) == null ? void 0 : _a2.call(props, template);
+      if (logPusher) {
+        clearInterval(logPusher);
       }
-    },
-    "Choose"
-  ))));
-};
-
-const TemplateGroup = (props) => {
-  const {
-    templates,
-    title,
-    components: { CardComponent } = {},
-    onSelected
-  } = props;
-  const titleComponent = typeof title === "string" ? /* @__PURE__ */ React.createElement(ContentHeader, { title }) : title;
-  if (templates.length === 0) {
-    return /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-templates/adding-templates" }, "adding templates"), "."));
-  }
-  const Card = CardComponent || TemplateCard;
-  return /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, templates.map(({ template, additionalLinks }) => /* @__PURE__ */ React.createElement(
-    Card,
-    {
-      key: stringifyEntityRef(template),
-      additionalLinks,
-      template,
-      onSelected
-    }
-  ))));
-};
-
-const useStyles$1 = makeStyles(() => ({
-  markdown: {
-    /** to make the styles for React Markdown not leak into the description */
-    "& :first-child": {
-      marginTop: 0
-    },
-    "& :last-child": {
-      marginBottom: 0
-    }
-  }
-}));
-const Workflow = (workflowProps) => {
-  var _a;
-  const { title, description, namespace, templateName, ...props } = workflowProps;
-  const styles = useStyles$1();
-  const templateRef = stringifyEntityRef({
-    kind: "Template",
-    namespace,
-    name: templateName
-  });
-  const errorApi = useApi(errorApiRef);
-  const { loading, manifest, error } = useTemplateParameterSchema(templateRef);
-  useEffect(() => {
-    if (error) {
-      errorApi.post(new Error(`Failed to load template, ${error}`));
-    }
-  }, [error, errorApi]);
-  if (error) {
-    return props.onError(error);
-  }
-  return /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(Progress, null), manifest && /* @__PURE__ */ React.createElement(
-    InfoCard,
-    {
-      title: title != null ? title : manifest.title,
-      subheader: /* @__PURE__ */ React.createElement(
-        MarkdownContent,
-        {
-          className: styles.markdown,
-          content: (_a = description != null ? description : manifest.description) != null ? _a : "No description"
-        }
-      ),
-      noPadding: true,
-      titleTypographyProps: { component: "h2" }
-    },
-    /* @__PURE__ */ React.createElement(Stepper, { manifest, ...props })
-  ));
-};
-const EmbeddableWorkflow = (props) => /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(Workflow, { ...props }));
-
-const useStyles = makeStyles({
-  root: {
-    "&:hover": {
-      textDecoration: "none"
-    }
-  }
-});
-const LinkOutputs = (props) => {
-  const { links = [] } = props.output;
-  const classes = useStyles();
-  const app = useApp();
-  const entityRoute = useRouteRef(entityRouteRef);
-  const iconResolver = (key) => {
-    var _a;
-    return (_a = app.getSystemIcon(key)) != null ? _a : WebIcon;
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
-    if (entityRef) {
-      const entityName = parseEntityRef(entityRef);
-      const target = entityRoute(entityName);
-      return { title, icon, url: target };
-    }
-    return { title, icon, url };
-  }).map(({ url, title, icon }, i) => {
-    const Icon = iconResolver(icon);
-    return /* @__PURE__ */ React.createElement(Link, { to: url, key: i, classes: { root: classes.root } }, /* @__PURE__ */ React.createElement(Button, { startIcon: /* @__PURE__ */ React.createElement(Icon, null), component: "div", color: "primary" }, title));
-  }));
-};
-
-const DefaultTemplateOutputs = (props) => {
-  var _a;
-  if (!((_a = props.output) == null ? void 0 : _a.links)) {
-    return null;
-  }
-  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 }))));
+    };
+  }, [scaffolderApi, dispatch, taskId]);
+  return state;
 };
 
-function createNextScaffolderFieldExtension(options) {
+function createScaffolderLayout(options) {
   return {
     expose() {
-      const FieldExtensionDataHolder = () => null;
-      attachComponentData(
-        FieldExtensionDataHolder,
-        FIELD_EXTENSION_KEY,
-        options
-      );
-      return FieldExtensionDataHolder;
+      const LayoutDataHolder = () => null;
+      attachComponentData(LayoutDataHolder, LAYOUTS_KEY, options);
+      return LayoutDataHolder;
     }
   };
 }
+const ScaffolderLayouts = () => null;
+attachComponentData(ScaffolderLayouts, LAYOUTS_WRAPPER_KEY, true);
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, ScaffolderFieldExtensions, ScaffolderLayouts, SecretsContextProvider, Stepper, TemplateCard, TemplateGroup, Workflow, createFieldValidation, createNextScaffolderFieldExtension, createScaffolderFieldExtension, createScaffolderLayout, extractSchemaFromStep, scaffolderApiRef, useCustomFieldExtensions, useCustomLayouts, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema, useTemplateSecrets };
+export { ScaffolderFieldExtensions, ScaffolderLayouts, SecretsContextProvider, createScaffolderFieldExtension, createScaffolderLayout, scaffolderApiRef, useCustomFieldExtensions, useCustomLayouts, useTaskEventStream, useTemplateSecrets };
 //# sourceMappingURL=index.esm.js.map