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

package/dist/alpha.esm.js

@@ -0,0 +1,851 @@
+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, 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, LogViewer } from '@backstage/core-components';
+import validator from '@rjsf/validator-ajv8';
+import qs from 'qs';
+import useAsync from 'react-use/lib/useAsync';
+import { getOrCreateGlobalSingleton, createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
+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 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);
+}
+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;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+}
+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);
+    }
+  };
+  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;
+    }
+    if (hasErrors(error)) {
+      return true;
+    }
+  }
+  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, schema, uiSchema) => {
+      const validator = validators[validatorName];
+      if (validator) {
+        const fieldValidation = createFieldValidation();
+        try {
+          await validator(value, fieldValidation, {
+            ...context,
+            formData,
+            schema,
+            uiSchema
+          });
+        } 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);
+      const { schema, uiSchema } = extractSchemaFromStep(definitionInSchema);
+      if (definitionInSchema && "ui:field" in definitionInSchema) {
+        if ("ui:field" in definitionInSchema) {
+          await validateForm(
+            definitionInSchema["ui:field"],
+            key,
+            value,
+            schema,
+            uiSchema
+          );
+        }
+      } else if (definitionInSchema && definitionInSchema.items && "ui:field" in definitionInSchema.items) {
+        if ("ui:field" in definitionInSchema.items) {
+          const { schema: itemsSchema, uiSchema: itemsUiSchema } = extractSchemaFromStep(definitionInSchema.items);
+          await validateForm(
+            definitionInSchema.items["ui:field"],
+            key,
+            value,
+            itemsSchema,
+            itemsUiSchema
+          );
+        }
+      } 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];
+            }
+            if (backstageReviewOptions.show === false) {
+              return [];
+            }
+          }
+          if (definitionInSchema["ui:widget"] === "password") {
+            return [key, "******"];
+          }
+        }
+      }
+      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 scaffolderApiRef = getOrCreateGlobalSingleton(
+  "scaffolder:scaffolder-api-ref",
+  () => createApiRef({
+    id: "plugin.scaffolder.service"
+  })
+);
+
+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$7 = 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$7();
+  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"
+        );
+      }
+    },
+    createButtonText
+  )))));
+};
+
+const useStyles$6 = 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$6({
+    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$5 = makeStyles(() => ({
+  linkText: {
+    display: "inline-flex",
+    alignItems: "center"
+  }
+}));
+const CardLink = ({ icon: Icon, text, url }) => {
+  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$4 = 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$4();
+  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", flex: 1, alignItems: "flex-end" } }, /* @__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);
+      }
+    },
+    "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 SecretsContext = createVersionedContext("secrets-context");
+const SecretsContextProvider = ({ children }) => {
+  const [secrets, setSecrets] = useState({});
+  return /* @__PURE__ */ React.createElement(
+    SecretsContext.Provider,
+    {
+      value: createVersionedValueMap({ 1: { secrets, setSecrets } })
+    },
+    children
+  );
+};
+
+const useStyles$3 = 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$3();
+  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$2 = makeStyles({
+  root: {
+    "&:hover": {
+      textDecoration: "none"
+    }
+  }
+});
+const LinkOutputs = (props) => {
+  const { links = [] } = props.output;
+  const classes = useStyles$2();
+  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 }))));
+};
+
+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) {
+  return {
+    expose() {
+      const FieldExtensionDataHolder = () => null;
+      attachComponentData(
+        FieldExtensionDataHolder,
+        FIELD_EXTENSION_KEY,
+        options
+      );
+      return FieldExtensionDataHolder;
+    }
+  };
+}
+
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateGroup, Workflow, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+//# sourceMappingURL=alpha.esm.js.map