@backstage/plugin-scaffolder 1.8.0-next.1 → 1.9.0-next.0

package/dist/esm/{Router-ace3f7b5.esm.js → Router-c72ed8e0.esm.js}

@@ -1,11 +1,11 @@
-import React, { useState, useContext, useCallback, createContext, useEffect, useRef, useMemo, Children, Component, Fragment } from 'react';
+import React, { useState, useContext, useCallback, createContext, useEffect, useRef, useMemo, Component, Children, Fragment } from 'react';
 import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router';
 import { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1 } from '@backstage/core-components';
 import { useApp, useRouteRef, useApi, useRouteRefParams, useAnalytics, errorApiRef, featureFlagsApiRef, useApiHolder, AnalyticsContext, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
 import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef, EntityRefLink } from '@backstage/plugin-catalog-react';
-import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, L as LAYOUTS_WRAPPER_KEY, j as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, k as SecretsContextProvider, m as TaskPage } from './index-68c01d69.esm.js';
+import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, L as LAYOUTS_WRAPPER_KEY, j as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, k as SecretsContextProvider, m as TaskPage } from './index-ed1a1fba.esm.js';
 import { RELATION_OWNED_BY, parseEntityRef, stringifyEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Paper, Button as Button$1, Stepper, Step, StepLabel, StepContent, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, FormControl, InputLabel, Select, MenuItem as MenuItem$1, CardHeader, Divider as Divider$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import LanguageIcon from '@material-ui/icons/Language';
 import WarningIcon from '@material-ui/icons/Warning';
@@ -27,15 +27,21 @@ import useAsync from 'react-use/lib/useAsync';
 import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
 import cloneDeep from 'lodash/cloneDeep';
+import { e as extractSchemaFromStep, D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './schema-b28a29ab.esm.js';
 import classNames from 'classnames';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import CloseIcon from '@material-ui/icons/Close';
+import CodeMirror from '@uiw/react-codemirror';
+import yaml from 'yaml';
+import useDebounce from 'react-use/lib/useDebounce';
+import { useAsync as useAsync$1, useRerender, usePrevious, useKeyboardEvent } from '@react-hookz/web';
 import Card$1 from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent$1 from '@material-ui/core/CardContent';
 import Tooltip$1 from '@material-ui/core/Tooltip';
 import Typography$1 from '@material-ui/core/Typography';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import { useAsync as useAsync$1, useRerender, usePrevious, useKeyboardEvent } from '@react-hookz/web';
-import yaml from 'yaml';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
@@ -47,30 +53,26 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Cancel from '@material-ui/icons/Cancel';
 import Check from '@material-ui/icons/Check';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { StreamLanguage } from '@codemirror/language';
-import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
 import Box$1 from '@material-ui/core/Box';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
-import CodeMirror from '@uiw/react-codemirror';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
-import CloseIcon from '@material-ui/icons/Close';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
-import useDebounce from 'react-use/lib/useDebounce';
 import { showPanel } from '@codemirror/view';
 import SettingsIcon from '@material-ui/icons/Settings';
 import AllIcon from '@material-ui/icons/FontDownload';
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
-import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-08d14dbd.esm.js';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
 import '@material-ui/lab/Autocomplete';
+import 'zod';
+import 'zod-to-json-schema';
 import 'react-use/lib/useEffectOnce';
 import '@material-ui/lab';
 import '@material-ui/core/FormHelperText';
@@ -87,7 +89,7 @@ import '@material-ui/icons/FiberManualRecord';
 import 'react-use/lib/useInterval';
 import 'use-immer';
 
-const useStyles$e = makeStyles((theme) => ({
+const useStyles$f = makeStyles((theme) => ({
   cardHeader: {
     position: "relative"
   },
@@ -179,7 +181,7 @@ const TemplateCard = ({ template, deprecated }) => {
   );
   const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type }) ? templateProps.type : "other";
   const theme = backstageTheme.getPageTheme({ themeId });
-  const classes = useStyles$e({ backgroundImage: theme.backgroundImage });
+  const classes = useStyles$f({ backgroundImage: theme.backgroundImage });
   const { name, namespace } = parseEntityRef(stringifyEntityRef(template));
   const href = templateRoute({ templateName: name, namespace });
   const viewTechDoc = useRouteRef(viewTechDocRouteRef);
@@ -300,13 +302,13 @@ const TemplateList = ({
   })))));
 };
 
-const useStyles$d = makeStyles$1({
+const useStyles$e = makeStyles$1({
   button: {
     color: "white"
   }
 });
 function ScaffolderPageContextMenu(props) {
-  const classes = useStyles$d();
+  const classes = useStyles$e();
   const [anchorEl, setAnchorEl] = useState();
   const editLink = useRouteRef(editRouteRef);
   const actionsLink = useRouteRef(actionsRouteRef);
@@ -517,23 +519,7 @@ var fieldOverrides = /*#__PURE__*/Object.freeze({
   DescriptionField: DescriptionField
 });
 
-const Form = withTheme(Theme);
-function getUiSchemasFromSteps(steps) {
-  const uiSchemas = [];
-  steps.forEach((step) => {
-    const schemaProps = step.schema.properties;
-    for (const key in schemaProps) {
-      if (schemaProps.hasOwnProperty(key)) {
-        const uiSchema = schemaProps[key];
-        uiSchema.name = key;
-        uiSchemas.push(uiSchema);
-      }
-    }
-  });
-  return uiSchemas;
-}
-function getReviewData(formData, steps) {
-  const uiSchemas = getUiSchemasFromSteps(steps);
+function getReviewData(formData, uiSchemas) {
   const reviewData = {};
   for (const key in formData) {
     if (formData.hasOwnProperty(key)) {
@@ -563,6 +549,60 @@ function getReviewData(formData, steps) {
   }
   return reviewData;
 }
+function getUiSchemasFromSteps(steps) {
+  const uiSchemas = [];
+  steps.forEach((step) => {
+    const schemaProps = step.schema.properties;
+    for (const key in schemaProps) {
+      if (schemaProps.hasOwnProperty(key)) {
+        const uiSchema = schemaProps[key];
+        uiSchema.name = key;
+        uiSchemas.push(uiSchema);
+      }
+    }
+  });
+  return uiSchemas;
+}
+const ReviewStep = (props) => {
+  const {
+    disableButtons,
+    formData,
+    handleBack,
+    handleCreate,
+    handleReset,
+    steps
+  } = props;
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Paper, {
+    square: true,
+    elevation: 0
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "h6"
+  }, "Review and create"), /* @__PURE__ */ React.createElement(StructuredMetadataTable, {
+    dense: true,
+    metadata: getReviewData(formData, getUiSchemasFromSteps(steps))
+  }), /* @__PURE__ */ React.createElement(Box, {
+    mb: 4
+  }), /* @__PURE__ */ React.createElement(Button$1, {
+    onClick: handleBack,
+    disabled: disableButtons
+  }, "Back"), /* @__PURE__ */ React.createElement(Button$1, {
+    onClick: handleReset,
+    disabled: disableButtons
+  }, "Reset"), /* @__PURE__ */ React.createElement(Button$1, {
+    variant: "contained",
+    color: "primary",
+    onClick: handleCreate,
+    disabled: disableButtons
+  }, "Create")));
+};
+
+const Form$1 = withTheme(Theme);
+function getSchemasFromSteps(steps) {
+  return steps.map(({ schema }) => ({
+    mergedSchema: schema,
+    ...extractSchemaFromStep(schema)
+  }));
+}
 const MultistepJsonForm = (props) => {
   const {
     formData,
@@ -571,8 +611,8 @@ const MultistepJsonForm = (props) => {
     onFinish,
     fields,
     widgets,
-    finishButtonLabel,
-    layouts
+    layouts,
+    ReviewStepComponent
   } = props;
   const { templateName } = useRouteRefParams(selectedTemplateRouteRef);
   const analytics = useAnalytics();
@@ -634,6 +674,7 @@ const MultistepJsonForm = (props) => {
       setDisableButtons(false);
     }
   };
+  const ReviewStepElement = ReviewStepComponent != null ? ReviewStepComponent : ReviewStep;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper, {
     activeStep,
     orientation: "vertical"
@@ -649,7 +690,7 @@ const MultistepJsonForm = (props) => {
       component: "h3"
     }, title)), /* @__PURE__ */ React.createElement(StepContent, {
       key: title
-    }, /* @__PURE__ */ React.createElement(Form, {
+    }, /* @__PURE__ */ React.createElement(Form$1, {
       showErrorList: false,
       fields: { ...fieldOverrides, ...fields },
       widgets,
@@ -671,28 +712,14 @@ const MultistepJsonForm = (props) => {
       color: "primary",
       type: "submit"
     }, "Next step"))));
-  })), activeStep === steps.length && /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Paper, {
-    square: true,
-    elevation: 0
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "h6"
-  }, "Review and create"), /* @__PURE__ */ React.createElement(StructuredMetadataTable, {
-    dense: true,
-    metadata: getReviewData(formData, steps)
-  }), /* @__PURE__ */ React.createElement(Box, {
-    mb: 4
-  }), /* @__PURE__ */ React.createElement(Button$1, {
-    onClick: handleBack,
-    disabled: disableButtons
-  }, "Back"), /* @__PURE__ */ React.createElement(Button$1, {
-    onClick: handleReset,
-    disabled: disableButtons
-  }, "Reset"), /* @__PURE__ */ React.createElement(Button$1, {
-    variant: "contained",
-    color: "primary",
-    onClick: handleCreate,
-    disabled: !onFinish || disableButtons
-  }, finishButtonLabel != null ? finishButtonLabel : "Create"))));
+  })), activeStep === steps.length && /* @__PURE__ */ React.createElement(ReviewStepElement, {
+    disableButtons,
+    handleBack,
+    handleCreate,
+    handleReset,
+    formData,
+    steps: getSchemasFromSteps(steps)
+  }));
 };
 
 function isObject(obj) {
@@ -751,8 +778,10 @@ const useTemplateParameterSchema = (templateRef) => {
   return { schema: value, loading, error };
 };
 const TemplatePage = ({
+  ReviewStepComponent,
   customFieldExtensions = [],
-  layouts = []
+  layouts = [],
+  headerOptions
 }) => {
   const apiHolder = useApiHolder();
   const secretsContext = useContext(SecretsContext);
@@ -826,7 +855,8 @@ const TemplatePage = ({
   }, /* @__PURE__ */ React.createElement(Header, {
     pageTitleOverride: "Create a New Component",
     title: "Create a New Component",
-    subtitle: "Create new software components using standard templates"
+    subtitle: "Create new software components using standard templates",
+    ...headerOptions
   }), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, {
     "data-testid": "loading-progress"
   }), schema && /* @__PURE__ */ React.createElement(InfoCard, {
@@ -834,6 +864,7 @@ const TemplatePage = ({
     noPadding: true,
     titleTypographyProps: { component: "h2" }
   }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
+    ReviewStepComponent,
     formData: formState,
     fields: customFieldComponents,
     onChange: handleChange,
@@ -853,7 +884,7 @@ const TemplatePage = ({
   })))));
 };
 
-const useStyles$c = makeStyles((theme) => ({
+const useStyles$d = makeStyles((theme) => ({
   code: {
     fontFamily: "Menlo, monospace",
     padding: theme.spacing(1),
@@ -876,7 +907,7 @@ const useStyles$c = makeStyles((theme) => ({
 }));
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
-  const classes = useStyles$c();
+  const classes = useStyles$d();
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
@@ -1015,79 +1046,6 @@ class WebFileSystemAccess {
   }
 }
 
-const useStyles$b = makeStyles$1((theme) => ({
-  introText: {
-    textAlign: "center",
-    marginTop: theme.spacing(2)
-  },
-  card: {
-    position: "relative",
-    maxWidth: 340,
-    marginTop: theme.spacing(4),
-    margin: theme.spacing(0, 2)
-  },
-  infoIcon: {
-    position: "absolute",
-    top: theme.spacing(1),
-    right: theme.spacing(1)
-  }
-}));
-function TemplateEditorIntro(props) {
-  const classes = useStyles$b();
-  const supportsLoad = WebFileSystemAccess.isSupported();
-  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card$1, {
-    className: classes.card,
-    elevation: 4
-  }, /* @__PURE__ */ React.createElement(CardActionArea, {
-    disabled: !supportsLoad,
-    onClick: () => {
-      var _a;
-      return (_a = props.onSelect) == null ? void 0 : _a.call(props, "local");
-    }
-  }, /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(Typography$1, {
-    variant: "h5",
-    gutterBottom: true,
-    color: supportsLoad ? void 0 : "textSecondary",
-    style: { display: "flex", flexFlow: "row nowrap" }
-  }, "Load Template Directory"), /* @__PURE__ */ React.createElement(Typography$1, {
-    variant: "body1",
-    color: supportsLoad ? void 0 : "textSecondary"
-  }, "Load a local template directory, allowing you to both edit and try executing your own template."))), !supportsLoad && /* @__PURE__ */ React.createElement("div", {
-    className: classes.infoIcon
-  }, /* @__PURE__ */ React.createElement(Tooltip$1, {
-    placement: "top",
-    title: "Only supported in some Chromium-based browsers"
-  }, /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null))));
-  const cardFormEditor = /* @__PURE__ */ React.createElement(Card$1, {
-    className: classes.card,
-    elevation: 4
-  }, /* @__PURE__ */ React.createElement(CardActionArea, {
-    onClick: () => {
-      var _a;
-      return (_a = props.onSelect) == null ? void 0 : _a.call(props, "form");
-    }
-  }, /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(Typography$1, {
-    variant: "h5",
-    gutterBottom: true
-  }, "Edit Template Form"), /* @__PURE__ */ React.createElement(Typography$1, {
-    variant: "body1"
-  }, "Preview and edit a template form, either using a sample template or by loading a template from the catalog."))));
-  return /* @__PURE__ */ React.createElement("div", {
-    style: props.style
-  }, /* @__PURE__ */ React.createElement(Typography$1, {
-    variant: "h6",
-    className: classes.introText
-  }, "Get started by choosing one of the options below"), /* @__PURE__ */ React.createElement("div", {
-    style: {
-      display: "flex",
-      flexFlow: "row wrap",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      alignContent: "flex-start"
-    }
-  }, supportsLoad && cardLoadLocal, cardFormEditor, !supportsLoad && cardLoadLocal));
-}
-
 var __accessCheck = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -1371,86 +1329,474 @@ function useDryRun() {
   return value;
 }
 
-const useStyles$a = makeStyles$1((theme) => ({
-  root: {
-    overflowY: "auto",
-    background: theme.palette.background.default
-  },
-  iconSuccess: {
-    minWidth: 0,
-    marginRight: theme.spacing(1),
-    color: theme.palette.status.ok
+const useStyles$c = makeStyles$1({
+  containerWrapper: {
+    position: "relative",
+    width: "100%",
+    height: "100%"
   },
-  iconFailure: {
-    minWidth: 0,
-    marginRight: theme.spacing(1),
-    color: theme.palette.status.error
-  }
-}));
-function DryRunResultsList() {
-  const classes = useStyles$a();
-  const dryRun = useDryRun();
-  return /* @__PURE__ */ React.createElement(List$1, {
-    className: classes.root,
-    dense: true
-  }, dryRun.results.map((result) => {
-    var _a;
-    const failed = result.log.some((l) => l.body.status === "failed");
-    return /* @__PURE__ */ React.createElement(ListItem, {
-      button: true,
-      key: result.id,
-      selected: ((_a = dryRun.selectedResult) == null ? void 0 : _a.id) === result.id,
-      onClick: () => dryRun.selectResult(result.id)
-    }, /* @__PURE__ */ React.createElement(ListItemIcon, {
-      className: failed ? classes.iconFailure : classes.iconSuccess
-    }, failed ? /* @__PURE__ */ React.createElement(Cancel, null) : /* @__PURE__ */ React.createElement(Check, null)), /* @__PURE__ */ React.createElement(ListItemText, {
-      primary: `Result ${result.id}`
-    }), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(IconButton$1, {
-      edge: "end",
-      "aria-label": "delete",
-      onClick: () => dryRun.deleteResult(result.id)
-    }, /* @__PURE__ */ React.createElement(DeleteIcon, null))));
-  }));
-}
-
-const useStyles$9 = makeStyles$1({
-  root: {
-    whiteSpace: "nowrap",
-    overflowY: "auto"
+  container: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: "auto"
   }
 });
-function parseFileEntires(paths) {
-  const root = {
-    type: "directory",
-    name: "",
-    path: "",
-    children: []
-  };
-  for (const path of paths.slice().sort()) {
-    const parts = path.split("/");
-    let current = root;
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-      if (part === "") {
-        throw new Error(`Invalid path part: ''`);
-      }
-      const entryPath = parts.slice(0, i + 1).join("/");
-      const existing = current.children.find((child) => child.name === part);
-      if ((existing == null ? void 0 : existing.type) === "file") {
-        throw new Error(`Duplicate filename at '${entryPath}'`);
-      } else if (existing) {
-        current = existing;
-      } else {
-        if (i < parts.length - 1) {
-          const newEntry = {
-            type: "directory",
-            name: part,
-            path: entryPath,
-            children: []
-          };
-          const firstFileIndex = current.children.findIndex(
-            (child) => child.type === "file"
-          );
+class ErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      shouldRender: true
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.invalidator !== this.props.invalidator) {
+      this.setState({ shouldRender: true });
+    }
+  }
+  componentDidCatch(error) {
+    this.props.setErrorText(error.message);
+    this.setState({ shouldRender: false });
+  }
+  render() {
+    return this.state.shouldRender ? this.props.children : null;
+  }
+}
+function isJsonObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function TemplateEditorForm(props) {
+  const {
+    content,
+    contentIsSpec,
+    data,
+    onUpdate,
+    onDryRun,
+    setErrorText,
+    fieldExtensions = [],
+    layouts = []
+  } = props;
+  const classes = useStyles$c();
+  const apiHolder = useApiHolder();
+  const [steps, setSteps] = useState();
+  const fields = useMemo(() => {
+    return Object.fromEntries(
+      fieldExtensions.map(({ name, component }) => [name, component])
+    );
+  }, [fieldExtensions]);
+  useDebounce(
+    () => {
+      try {
+        if (!content) {
+          setSteps(void 0);
+          return;
+        }
+        const parsed = yaml.parse(content);
+        if (!isJsonObject(parsed)) {
+          setSteps(void 0);
+          return;
+        }
+        let rootObj = parsed;
+        if (!contentIsSpec) {
+          const isTemplate = String(parsed.kind).toLocaleLowerCase("en-US") === "template";
+          if (!isTemplate) {
+            setSteps(void 0);
+            return;
+          }
+          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};
+        }
+        const { parameters } = rootObj;
+        if (!Array.isArray(parameters)) {
+          setErrorText("Template parameters must be an array");
+          setSteps(void 0);
+          return;
+        }
+        const fieldValidators = Object.fromEntries(
+          fieldExtensions.map(({ name, validation }) => [name, validation])
+        );
+        setErrorText();
+        setSteps(
+          parameters.flatMap(
+            (param) => isJsonObject(param) ? [
+              {
+                title: String(param.title),
+                schema: param,
+                validate: createValidator(param, fieldValidators, {
+                  apiHolder
+                })
+              }
+            ] : []
+          )
+        );
+      } catch (e) {
+        setErrorText(e.message);
+      }
+    },
+    250,
+    [contentIsSpec, content, apiHolder]
+  );
+  if (!steps) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes.containerWrapper
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: classes.container
+  }, /* @__PURE__ */ React.createElement(ErrorBoundary, {
+    invalidator: steps,
+    setErrorText
+  }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
+    steps,
+    fields,
+    formData: data,
+    onChange: (e) => onUpdate(e.formData),
+    onReset: () => onUpdate({}),
+    finishButtonLabel: onDryRun && "Try It",
+    onFinish: onDryRun && (() => onDryRun(data)),
+    layouts
+  }))));
+}
+function TemplateEditorFormDirectoryEditorDryRun(props) {
+  const { setErrorText, fieldExtensions = [], layouts } = props;
+  const dryRun = useDryRun();
+  const directoryEditor = useDirectoryEditor();
+  const { selectedFile } = directoryEditor;
+  const [data, setData] = useState({});
+  const handleDryRun = async () => {
+    if (!selectedFile) {
+      return;
+    }
+    try {
+      await dryRun.execute({
+        templateContent: selectedFile.content,
+        values: data,
+        files: directoryEditor.files
+      });
+      setErrorText();
+    } catch (e) {
+      setErrorText(String(e.cause || e));
+      throw e;
+    }
+  };
+  const content = selectedFile && selectedFile.path.match(/\.ya?ml$/) ? selectedFile.content : void 0;
+  return /* @__PURE__ */ React.createElement(TemplateEditorForm, {
+    onDryRun: handleDryRun,
+    fieldExtensions,
+    setErrorText,
+    content,
+    data,
+    onUpdate: setData,
+    layouts
+  });
+}
+TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
+
+const Form = withTheme(Theme);
+const useStyles$b = makeStyles((theme) => ({
+  root: {
+    gridArea: "pageContent",
+    display: "grid",
+    gridTemplateAreas: `
+      "controls controls"
+      "fieldForm preview"
+    `,
+    gridTemplateRows: "auto 1fr",
+    gridTemplateColumns: "1fr 1fr"
+  },
+  controls: {
+    gridArea: "controls",
+    display: "flex",
+    flexFlow: "row nowrap",
+    alignItems: "center",
+    margin: theme.spacing(1)
+  },
+  fieldForm: {
+    gridArea: "fieldForm"
+  },
+  preview: {
+    gridArea: "preview"
+  }
+}));
+const CustomFieldExplorer = ({
+  customFieldExtensions = [],
+  onClose
+}) => {
+  var _a, _b;
+  const classes = useStyles$b();
+  const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
+  const [selectedField, setSelectedField] = useState(fieldOptions[0]);
+  const [fieldFormState, setFieldFormState] = useState({});
+  const [formState, setFormState] = useState({});
+  const [refreshKey, setRefreshKey] = useState(Date.now());
+  const sampleFieldTemplate = useMemo(
+    () => {
+      var _a2, _b2;
+      return yaml.stringify({
+        parameters: [
+          {
+            title: `${selectedField.name} Example`,
+            properties: {
+              [selectedField.name]: {
+                type: (_b2 = (_a2 = selectedField.schema) == null ? void 0 : _a2.returnValue) == null ? void 0 : _b2.type,
+                "ui:field": selectedField.name,
+                "ui:options": fieldFormState
+              }
+            }
+          }
+        ]
+      });
+    },
+    [fieldFormState, selectedField]
+  );
+  const fieldComponents = useMemo(() => {
+    return Object.fromEntries(
+      customFieldExtensions.map(({ name, component }) => [name, component])
+    );
+  }, [customFieldExtensions]);
+  const handleSelectionChange = useCallback(
+    (selection) => {
+      setSelectedField(selection);
+      setFieldFormState({});
+      setFormState({});
+    },
+    [setFieldFormState, setFormState, setSelectedField]
+  );
+  const handleFieldConfigChange = useCallback(
+    (state) => {
+      setFieldFormState(state);
+      setFormState({});
+      setRefreshKey(Date.now());
+    },
+    [setFieldFormState, setRefreshKey]
+  );
+  return /* @__PURE__ */ React.createElement("main", {
+    className: classes.root
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: classes.controls
+  }, /* @__PURE__ */ React.createElement(FormControl, {
+    variant: "outlined",
+    size: "small",
+    fullWidth: true
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
+    id: "select-field-label"
+  }, "Choose Custom Field Extension"), /* @__PURE__ */ React.createElement(Select, {
+    value: selectedField,
+    label: "Choose Custom Field Extension",
+    labelId: "select-field-label",
+    onChange: (e) => handleSelectionChange(e.target.value)
+  }, fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem$1, {
+    key: idx,
+    value: option
+  }, option.name)))), /* @__PURE__ */ React.createElement(IconButton, {
+    size: "medium",
+    onClick: onClose
+  }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", {
+    className: classes.fieldForm
+  }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, {
+    title: "Field Options"
+  }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Form, {
+    showErrorList: false,
+    fields: { ...fieldOverrides, ...fieldComponents },
+    noHtml5Validate: true,
+    formData: fieldFormState,
+    formContext: { fieldFormState },
+    onSubmit: (e) => handleFieldConfigChange(e.formData),
+    schema: ((_a = selectedField.schema) == null ? void 0 : _a.uiOptions) || {}
+  }, /* @__PURE__ */ React.createElement(Button$1, {
+    variant: "contained",
+    color: "primary",
+    type: "submit",
+    disabled: !((_b = selectedField.schema) == null ? void 0 : _b.uiOptions)
+  }, "Apply"))))), /* @__PURE__ */ React.createElement("div", {
+    className: classes.preview
+  }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, {
+    title: "Example Template Spec"
+  }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(CodeMirror, {
+    readOnly: true,
+    theme: "dark",
+    height: "100%",
+    extensions: [StreamLanguage.define(yaml$1)],
+    value: sampleFieldTemplate
+  }))), /* @__PURE__ */ React.createElement(TemplateEditorForm, {
+    key: refreshKey,
+    content: sampleFieldTemplate,
+    contentIsSpec: true,
+    fieldExtensions: customFieldExtensions,
+    data: formState,
+    onUpdate: setFormState,
+    setErrorText: () => null
+  })));
+};
+
+const useStyles$a = makeStyles$1((theme) => ({
+  introText: {
+    textAlign: "center",
+    marginTop: theme.spacing(2)
+  },
+  card: {
+    position: "relative",
+    maxWidth: 340,
+    marginTop: theme.spacing(4),
+    margin: theme.spacing(0, 2)
+  },
+  infoIcon: {
+    position: "absolute",
+    top: theme.spacing(1),
+    right: theme.spacing(1)
+  }
+}));
+function TemplateEditorIntro(props) {
+  const classes = useStyles$a();
+  const supportsLoad = WebFileSystemAccess.isSupported();
+  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card$1, {
+    className: classes.card,
+    elevation: 4
+  }, /* @__PURE__ */ React.createElement(CardActionArea, {
+    disabled: !supportsLoad,
+    onClick: () => {
+      var _a;
+      return (_a = props.onSelect) == null ? void 0 : _a.call(props, "local");
+    }
+  }, /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(Typography$1, {
+    variant: "h5",
+    gutterBottom: true,
+    color: supportsLoad ? void 0 : "textSecondary",
+    style: { display: "flex", flexFlow: "row nowrap" }
+  }, "Load Template Directory"), /* @__PURE__ */ React.createElement(Typography$1, {
+    variant: "body1",
+    color: supportsLoad ? void 0 : "textSecondary"
+  }, "Load a local template directory, allowing you to both edit and try executing your own template."))), !supportsLoad && /* @__PURE__ */ React.createElement("div", {
+    className: classes.infoIcon
+  }, /* @__PURE__ */ React.createElement(Tooltip$1, {
+    placement: "top",
+    title: "Only supported in some Chromium-based browsers"
+  }, /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null))));
+  const cardFormEditor = /* @__PURE__ */ React.createElement(Card$1, {
+    className: classes.card,
+    elevation: 4
+  }, /* @__PURE__ */ React.createElement(CardActionArea, {
+    onClick: () => {
+      var _a;
+      return (_a = props.onSelect) == null ? void 0 : _a.call(props, "form");
+    }
+  }, /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(Typography$1, {
+    variant: "h5",
+    gutterBottom: true
+  }, "Edit Template Form"), /* @__PURE__ */ React.createElement(Typography$1, {
+    variant: "body1"
+  }, "Preview and edit a template form, either using a sample template or by loading a template from the catalog."))));
+  const cardFieldExplorer = /* @__PURE__ */ React.createElement(Card$1, {
+    className: classes.card,
+    elevation: 4
+  }, /* @__PURE__ */ React.createElement(CardActionArea, {
+    onClick: () => {
+      var _a;
+      return (_a = props.onSelect) == null ? void 0 : _a.call(props, "field-explorer");
+    }
+  }, /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(Typography$1, {
+    variant: "h5",
+    gutterBottom: true
+  }, "Custom Field Explorer"), /* @__PURE__ */ React.createElement(Typography$1, {
+    variant: "body1"
+  }, "View and play around with available installed custom field extensions."))));
+  return /* @__PURE__ */ React.createElement("div", {
+    style: props.style
+  }, /* @__PURE__ */ React.createElement(Typography$1, {
+    variant: "h6",
+    className: classes.introText
+  }, "Get started by choosing one of the options below"), /* @__PURE__ */ React.createElement("div", {
+    style: {
+      display: "flex",
+      flexFlow: "row wrap",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      alignContent: "flex-start"
+    }
+  }, supportsLoad && cardLoadLocal, cardFormEditor, !supportsLoad && cardLoadLocal, cardFieldExplorer));
+}
+
+const useStyles$9 = makeStyles$1((theme) => ({
+  root: {
+    overflowY: "auto",
+    background: theme.palette.background.default
+  },
+  iconSuccess: {
+    minWidth: 0,
+    marginRight: theme.spacing(1),
+    color: theme.palette.status.ok
+  },
+  iconFailure: {
+    minWidth: 0,
+    marginRight: theme.spacing(1),
+    color: theme.palette.status.error
+  }
+}));
+function DryRunResultsList() {
+  const classes = useStyles$9();
+  const dryRun = useDryRun();
+  return /* @__PURE__ */ React.createElement(List$1, {
+    className: classes.root,
+    dense: true
+  }, dryRun.results.map((result) => {
+    var _a;
+    const failed = result.log.some((l) => l.body.status === "failed");
+    return /* @__PURE__ */ React.createElement(ListItem, {
+      button: true,
+      key: result.id,
+      selected: ((_a = dryRun.selectedResult) == null ? void 0 : _a.id) === result.id,
+      onClick: () => dryRun.selectResult(result.id)
+    }, /* @__PURE__ */ React.createElement(ListItemIcon, {
+      className: failed ? classes.iconFailure : classes.iconSuccess
+    }, failed ? /* @__PURE__ */ React.createElement(Cancel, null) : /* @__PURE__ */ React.createElement(Check, null)), /* @__PURE__ */ React.createElement(ListItemText, {
+      primary: `Result ${result.id}`
+    }), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(IconButton$1, {
+      edge: "end",
+      "aria-label": "delete",
+      onClick: () => dryRun.deleteResult(result.id)
+    }, /* @__PURE__ */ React.createElement(DeleteIcon, null))));
+  }));
+}
+
+const useStyles$8 = makeStyles$1({
+  root: {
+    whiteSpace: "nowrap",
+    overflowY: "auto"
+  }
+});
+function parseFileEntires(paths) {
+  const root = {
+    type: "directory",
+    name: "",
+    path: "",
+    children: []
+  };
+  for (const path of paths.slice().sort()) {
+    const parts = path.split("/");
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (part === "") {
+        throw new Error(`Invalid path part: ''`);
+      }
+      const entryPath = parts.slice(0, i + 1).join("/");
+      const existing = current.children.find((child) => child.name === part);
+      if ((existing == null ? void 0 : existing.type) === "file") {
+        throw new Error(`Duplicate filename at '${entryPath}'`);
+      } else if (existing) {
+        current = existing;
+      } else {
+        if (i < parts.length - 1) {
+          const newEntry = {
+            type: "directory",
+            name: part,
+            path: entryPath,
+            children: []
+          };
+          const firstFileIndex = current.children.findIndex(
+            (child) => child.type === "file"
+          );
           current.children.splice(firstFileIndex, 0, newEntry);
           current = newEntry;
         } else {
@@ -1481,7 +1827,7 @@ function FileTreeItem({ entry }) {
   })));
 }
 function FileBrowser(props) {
-  const classes = useStyles$9();
+  const classes = useStyles$8();
   const fileTree = useMemo(
     () => parseFileEntires(props.filePaths),
     [props.filePaths]
@@ -1502,7 +1848,7 @@ function FileBrowser(props) {
   })));
 }
 
-const useStyles$8 = makeStyles$1((theme) => ({
+const useStyles$7 = makeStyles$1((theme) => ({
   root: {
     display: "grid",
     gridTemplateColumns: "280px auto 3fr",
@@ -1518,7 +1864,7 @@ const useStyles$8 = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResultsSplitView(props) {
-  const classes = useStyles$8();
+  const classes = useStyles$7();
   const childArray = Children.toArray(props.children);
   if (childArray.length !== 2) {
     throw new Error("must have exactly 2 children");
@@ -1534,7 +1880,7 @@ function DryRunResultsSplitView(props) {
   }, childArray[1]));
 }
 
-const useStyles$7 = makeStyles$1({
+const useStyles$6 = makeStyles$1({
   root: {
     display: "flex",
     flexFlow: "column nowrap"
@@ -1560,7 +1906,7 @@ const useStyles$7 = makeStyles$1({
   }
 });
 function FilesContent() {
-  const classes = useStyles$7();
+  const classes = useStyles$6();
   const { selectedResult } = useDryRun();
   const [selectedPath, setSelectedPath] = useState("");
   const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find(
@@ -1629,7 +1975,7 @@ function LogContent() {
 }
 function OutputContent() {
   var _a, _b;
-  const classes = useStyles$7();
+  const classes = useStyles$6();
   const { selectedResult } = useDryRun();
   if (!selectedResult) {
     return null;
@@ -1648,7 +1994,7 @@ function OutputContent() {
   }));
 }
 function DryRunResultsView() {
-  const classes = useStyles$7();
+  const classes = useStyles$6();
   const [selectedTab, setSelectedTab] = useState(
     "files"
   );
@@ -1673,7 +2019,7 @@ function DryRunResultsView() {
   }, selectedTab === "files" && /* @__PURE__ */ React.createElement(FilesContent, null), selectedTab === "log" && /* @__PURE__ */ React.createElement(LogContent, null), selectedTab === "output" && /* @__PURE__ */ React.createElement(OutputContent, null))));
 }
 
-const useStyles$6 = makeStyles$1((theme) => ({
+const useStyles$5 = makeStyles$1((theme) => ({
   header: {
     height: 48,
     minHeight: 0,
@@ -1692,7 +2038,7 @@ const useStyles$6 = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResults() {
-  const classes = useStyles$6();
+  const classes = useStyles$5();
   const dryRun = useDryRun();
   const [expanded, setExpanded] = useState(false);
   const [hidden, setHidden] = useState(true);
@@ -1724,7 +2070,7 @@ function DryRunResults() {
   }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))));
 }
 
-const useStyles$5 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   button: {
     padding: theme.spacing(1)
   },
@@ -1743,7 +2089,7 @@ const useStyles$5 = makeStyles((theme) => ({
 }));
 function TemplateEditorBrowser(props) {
   var _a, _b;
-  const classes = useStyles$5();
+  const classes = useStyles$4();
   const directoryEditor = useDirectoryEditor();
   const changedFiles = directoryEditor.files.filter((file) => file.dirty);
   const handleClose = () => {
@@ -1789,170 +2135,6 @@ function TemplateEditorBrowser(props) {
   }));
 }
 
-const useStyles$4 = makeStyles$1({
-  containerWrapper: {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  },
-  container: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    overflow: "auto"
-  }
-});
-class ErrorBoundary extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      shouldRender: true
-    };
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.invalidator !== this.props.invalidator) {
-      this.setState({ shouldRender: true });
-    }
-  }
-  componentDidCatch(error) {
-    this.props.setErrorText(error.message);
-    this.setState({ shouldRender: false });
-  }
-  render() {
-    return this.state.shouldRender ? this.props.children : null;
-  }
-}
-function isJsonObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function TemplateEditorForm(props) {
-  const {
-    content,
-    contentIsSpec,
-    data,
-    onUpdate,
-    onDryRun,
-    setErrorText,
-    fieldExtensions = [],
-    layouts = []
-  } = props;
-  const classes = useStyles$4();
-  const apiHolder = useApiHolder();
-  const [steps, setSteps] = useState();
-  const fields = useMemo(() => {
-    return Object.fromEntries(
-      fieldExtensions.map(({ name, component }) => [name, component])
-    );
-  }, [fieldExtensions]);
-  useDebounce(
-    () => {
-      try {
-        if (!content) {
-          setSteps(void 0);
-          return;
-        }
-        const parsed = yaml.parse(content);
-        if (!isJsonObject(parsed)) {
-          setSteps(void 0);
-          return;
-        }
-        let rootObj = parsed;
-        if (!contentIsSpec) {
-          const isTemplate = String(parsed.kind).toLocaleLowerCase("en-US") === "template";
-          if (!isTemplate) {
-            setSteps(void 0);
-            return;
-          }
-          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};
-        }
-        const { parameters } = rootObj;
-        if (!Array.isArray(parameters)) {
-          setErrorText("Template parameters must be an array");
-          setSteps(void 0);
-          return;
-        }
-        const fieldValidators = Object.fromEntries(
-          fieldExtensions.map(({ name, validation }) => [name, validation])
-        );
-        setErrorText();
-        setSteps(
-          parameters.flatMap(
-            (param) => isJsonObject(param) ? [
-              {
-                title: String(param.title),
-                schema: param,
-                validate: createValidator(param, fieldValidators, {
-                  apiHolder
-                })
-              }
-            ] : []
-          )
-        );
-      } catch (e) {
-        setErrorText(e.message);
-      }
-    },
-    250,
-    [contentIsSpec, content, apiHolder]
-  );
-  if (!steps) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", {
-    className: classes.containerWrapper
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: classes.container
-  }, /* @__PURE__ */ React.createElement(ErrorBoundary, {
-    invalidator: steps,
-    setErrorText
-  }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
-    steps,
-    fields,
-    formData: data,
-    onChange: (e) => onUpdate(e.formData),
-    onReset: () => onUpdate({}),
-    finishButtonLabel: onDryRun && "Try It",
-    onFinish: onDryRun && (() => onDryRun(data)),
-    layouts
-  }))));
-}
-function TemplateEditorFormDirectoryEditorDryRun(props) {
-  const { setErrorText, fieldExtensions = [], layouts } = props;
-  const dryRun = useDryRun();
-  const directoryEditor = useDirectoryEditor();
-  const { selectedFile } = directoryEditor;
-  const [data, setData] = useState({});
-  const handleDryRun = async () => {
-    if (!selectedFile) {
-      return;
-    }
-    try {
-      await dryRun.execute({
-        templateContent: selectedFile.content,
-        values: data,
-        files: directoryEditor.files
-      });
-      setErrorText();
-    } catch (e) {
-      setErrorText(String(e.cause || e));
-      throw e;
-    }
-  };
-  const content = selectedFile && selectedFile.path.match(/\.ya?ml$/) ? selectedFile.content : void 0;
-  return /* @__PURE__ */ React.createElement(TemplateEditorForm, {
-    onDryRun: handleDryRun,
-    fieldExtensions,
-    setErrorText,
-    content,
-    data,
-    onUpdate: setData,
-    layouts
-  });
-}
-TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
-
 const useStyles$3 = makeStyles((theme) => ({
   container: {
     position: "relative",
@@ -2275,6 +2457,11 @@ function TemplateEditorPage(props) {
       onClose: () => setSelection(void 0),
       layouts: props.layouts
     });
+  } else if ((selection == null ? void 0 : selection.type) === "field-explorer") {
+    content = /* @__PURE__ */ React.createElement(CustomFieldExplorer, {
+      customFieldExtensions: props.customFieldExtensions,
+      onClose: () => setSelection(void 0)
+    });
   } else {
     content = /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(TemplateEditorIntro, {
       onSelect: (option) => {
@@ -2283,6 +2470,8 @@ function TemplateEditorPage(props) {
           });
         } else if (option === "form") {
           setSelection({ type: "form" });
+        } else if (option === "field-explorer") {
+          setSelection({ type: "field-explorer" });
         }
       }
     }));
@@ -2522,7 +2711,7 @@ const ListTasksPage = (props) => {
 
 const Router = (props) => {
   const { groups, components = {}, defaultPreviewTemplate } = props;
-  const { TemplateCardComponent, TaskPageComponent } = components;
+  const { ReviewStepComponent, TemplateCardComponent, TaskPageComponent } = components;
   const outlet = useOutlet();
   const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
   const customFieldExtensions = useElementFilter(
@@ -2576,8 +2765,10 @@ const Router = (props) => {
   }), /* @__PURE__ */ React.createElement(Route, {
     path: selectedTemplateRouteRef.path,
     element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePage, {
+      ReviewStepComponent,
       customFieldExtensions: fieldExtensions,
-      layouts: customLayouts
+      layouts: customLayouts,
+      headerOptions: props.headerOptions
     }))
   }), /* @__PURE__ */ React.createElement(Route, {
     path: scaffolderListTaskRouteRef.path,
@@ -2604,4 +2795,4 @@ const Router = (props) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-ace3f7b5.esm.js.map
+//# sourceMappingURL=Router-c72ed8e0.esm.js.map