@backstage/plugin-scaffolder 1.17.1 → 1.18.0-next.1

package/dist/esm/{DryRunResults-c0cd5eb5.esm.js → index-7840abd4.esm.js}

@@ -1,363 +1,183 @@
-import React, { useRef, useEffect, memo, useState, useMemo, Fragment, createContext, useContext, useCallback, Children } from 'react';
+import React, { useState, Fragment, useCallback, createContext, useRef, useMemo, useContext, useEffect, Component, Children, memo } from 'react';
+import { useNavigate, Link as Link$1, Navigate, useOutlet, Routes, Route } from 'react-router-dom';
+import { useTemplateSecrets, scaffolderApiRef, useCustomFieldExtensions, useCustomLayouts, SecretsContextProvider } from '@backstage/plugin-scaffolder-react';
+import { E as EntityPicker, a as EntityPickerSchema, b as EntityNamePicker, e as entityNamePickerValidation, c as EntityNamePickerSchema, l as EntityTagsPicker, m as EntityTagsPickerSchema, R as RepoUrlPicker, r as repoPickerValidation, f as RepoUrlPickerSchema, O as OwnerPicker, g as OwnerPickerSchema, j as OwnedEntityPicker, k as OwnedEntityPickerSchema, h as MyGroupsPicker, i as MyGroupsPickerSchema, M as MultiEntityPicker, d as MultiEntityPickerSchema, v as validateMultiEntityPickerValidation, n as OngoingTask } from './OngoingTask-5a95edc0.esm.js';
+import { ScaffolderField, ScaffolderPageContextMenu, TemplateCategoryPicker, TemplateGroups, Workflow, createAsyncValidators, Stepper, Form } from '@backstage/plugin-scaffolder-react/alpha';
+import { InputLabel, Input, makeStyles, Box, Typography, Accordion, AccordionSummary, AccordionDetails, Grid, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Collapse, Card, List, MenuItem, ListItemIcon, ListItemText, FormControl, Select, IconButton as IconButton$1, CardHeader, CardContent, Button as Button$1, Tooltip, Divider, createStyles, StepButton, CircularProgress, LinearProgress } from '@material-ui/core';
+import { e as editRouteRef, c as scaffolderListTaskRouteRef, r as rootRouteRef, b as actionsRouteRef, d as registerComponentRouteRef, v as viewTechDocRouteRef, s as selectedTemplateRouteRef, a as scaffolderTaskRouteRef } from './routes-1428737e.esm.js';
+import { Progress, ErrorPage, MarkdownContent, Page, Header, Content, CodeSnippet, StatusError, StatusOK, StatusPending, ErrorPanel, EmptyState, Table as Table$1, Link, DocsIcon, ContentHeader, SupportButton, LogViewer } from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
-import { scaffolderApiRef, useTaskEventStream, useTemplateSecrets } from '@backstage/plugin-scaffolder-react';
-import { Box, makeStyles, Grid, Typography, StepButton, CircularProgress, Paper, Button, Accordion, AccordionSummary, AccordionDetails, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Collapse, InputLabel, Input, Card, List, MenuItem, ListItemIcon, ListItemText, Tooltip as Tooltip$1, IconButton, Divider } from '@material-ui/core';
 import classNames from 'classnames';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
-import { useApp, useRouteRef, useApi, useRouteRefParams } from '@backstage/core-plugin-api';
-import { DismissableBanner, Link, Page, Header, Content, ErrorPage, Progress, LogViewer, MarkdownContent, CodeSnippet, StatusError, StatusOK, StatusPending, Lifecycle, ErrorPanel, EmptyState, Table as Table$1 } from '@backstage/core-components';
+import { useApi, useRouteRef, useApp, useRouteRefParams, AnalyticsContext, useApiHolder, alertApiRef } from '@backstage/core-plugin-api';
 import Chip from '@material-ui/core/Chip';
-import { r as rootRouteRef, o as selectedTemplateRouteRef, w as scaffolderTaskRouteRef, y as EntityPicker, z as EntityPickerSchema, A as EntityNamePicker, B as entityNamePickerValidation, C as EntityNamePickerSchema, D as EntityTagsPicker, F as EntityTagsPickerSchema, G as RepoUrlPicker, i as repoPickerValidation, H as RepoUrlPickerSchema, I as OwnerPicker, J as OwnerPickerSchema, K as OwnedEntityPicker, N as OwnedEntityPickerSchema, P as MyGroupsPicker, l as MyGroupsPickerSchema } from './OngoingTask-87c6761c.esm.js';
-import { ScaffolderField } from '@backstage/plugin-scaffolder-react/alpha';
-import { entityRouteRef, catalogApiRef, EntityRefLink, CatalogFilterLayout } from '@backstage/plugin-catalog-react';
+import { catalogApiRef, EntityRefLink, CatalogFilterLayout, EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, entityRouteRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
 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 Typography$1 from '@material-ui/core/Typography';
-import { parseEntityRef } from '@backstage/catalog-model';
-import Card$1 from '@material-ui/core/Card';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardContent from '@material-ui/core/CardContent';
-import Tooltip from '@material-ui/core/Tooltip';
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import { makeStyles as makeStyles$1, createStyles } from '@material-ui/core/styles';
+import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import { usePermission } from '@backstage/plugin-permission-react';
+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 { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import useDebounce from 'react-use/lib/useDebounce';
+import { useAsync as useAsync$1, useRerender, useKeyboardEvent, usePrevious } from '@react-hookz/web';
+import validator from '@rjsf/validator-ajv8';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
-import { StreamLanguage } from '@codemirror/language';
-import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import TreeView from '@material-ui/lab/TreeView';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
 import { showPanel } from '@codemirror/view';
-import { useAsync as useAsync$1, useRerender, useKeyboardEvent, usePrevious } from '@react-hookz/web';
-import CodeMirror from '@uiw/react-codemirror';
 import Accordion$1 from '@material-ui/core/Accordion';
 import AccordionDetails$1 from '@material-ui/core/AccordionDetails';
 import AccordionSummary$1 from '@material-ui/core/AccordionSummary';
 import Divider$1 from '@material-ui/core/Divider';
-import yaml from 'yaml';
-import IconButton$1 from '@material-ui/core/IconButton';
 import List$1 from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon$1 from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText$1 from '@material-ui/core/ListItemText';
 import Cancel from '@material-ui/icons/Cancel';
-import Check from '@material-ui/icons/Check';
+import CheckIcon from '@material-ui/icons/Check';
 import DeleteIcon from '@material-ui/icons/Delete';
 import DownloadIcon from '@material-ui/icons/GetApp';
 import Box$1 from '@material-ui/core/Box';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
-import TreeView from '@material-ui/lab/TreeView';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import TreeItem from '@material-ui/lab/TreeItem';
 import LanguageIcon from '@material-ui/icons/Language';
-import Grid$1 from '@material-ui/core/Grid';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
-import Stepper from '@material-ui/core/Stepper';
+import Stepper$1 from '@material-ui/core/Stepper';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
-import qs from 'qs';
-import { useNavigate } from 'react-router-dom';
 import useInterval from 'react-use/lib/useInterval';
+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 InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+import 'zod';
+import '@backstage/catalog-client';
+import '@material-ui/core/FormControl';
+import '@material-ui/lab/Autocomplete';
+import '@backstage/integration-react';
+import '@material-ui/core/FormHelperText';
+import '@material-ui/core/Input';
+import '@material-ui/core/InputLabel';
+import 'react-use/lib/useEffectOnce';
+import '@material-ui/lab';
+import 'zod-to-json-schema';
+import '@backstage/errors';
+import 'qs';
+import '@material-ui/icons/Repeat';
+import '@material-ui/icons/Toc';
+import '@material-ui/icons/ControlPoint';
+import '@material-ui/icons/MoreVert';
+import 'zen-observable';
+import 'event-source-polyfill';
 
-const TaskErrors = ({ error }) => {
-  const id = useRef("");
-  useEffect(() => {
-    id.current = String(Math.random());
-  }, [error]);
-  return error ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
-    DismissableBanner,
-    {
-      id: id.current,
-      variant: "warning",
-      message: error.message
-    }
-  )) : null;
-};
-
-const useStyles$b = makeStyles({
-  svgIcon: {
-    display: "inline-block",
-    "& svg": {
-      display: "inline-block",
-      fontSize: "inherit",
-      verticalAlign: "baseline"
-    }
-  }
-});
-const IconLink = (props) => {
-  const { href, text, Icon, ...linkProps } = props;
-  const classes = useStyles$b();
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { component: "div", className: classes.svgIcon }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Link, { to: href, ...linkProps }, text || href)));
-};
-
-const TaskPageLinks = ({ output }) => {
-  const { links = [] } = output;
-  const app = useApp();
-  const entityRoute = useRouteRef(entityRouteRef);
-  const iconResolver = (key) => {
-    var _a;
-    return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
-  };
-  return /* @__PURE__ */ React.createElement(Box, { px: 3, pb: 3 }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
-    if (entityRef) {
-      const entityName = parseEntityRef(entityRef, {
-        defaultKind: "<unknown>",
-        defaultNamespace: "<unknown>"
-      });
-      const target = entityRoute(entityName);
-      return { title, icon, url: target };
-    }
-    return { title, icon, url };
-  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(
-    IconLink,
-    {
-      key: `output-link-${i}`,
-      href: url,
-      text: title != null ? title : url,
-      Icon: iconResolver(icon),
-      target: "_blank"
-    }
-  )));
-};
-
-const useStyles$a = makeStyles$1(
-  (theme) => createStyles({
-    root: {
-      width: "100%"
-    },
-    button: {
-      marginBottom: theme.spacing(2),
-      marginLeft: theme.spacing(2)
-    },
-    actionsContainer: {
-      marginBottom: theme.spacing(2)
-    },
-    resetContainer: {
-      padding: theme.spacing(3)
-    },
-    labelWrapper: {
-      display: "flex",
-      flex: 1,
-      flexDirection: "row",
-      justifyContent: "space-between"
-    },
-    stepWrapper: {
-      width: "100%"
-    }
-  })
-);
-const StepTimeTicker = ({ step }) => {
-  const [time, setTime] = useState("");
-  useInterval(() => {
-    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 }));
-  }, 1e3);
-  return /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, time);
-};
-const useStepIconStyles = makeStyles$1(
-  (theme) => createStyles({
-    root: {
-      color: theme.palette.text.disabled,
-      display: "flex",
-      height: 22,
-      alignItems: "center"
-    },
-    completed: {
-      color: theme.palette.status.ok
-    },
-    error: {
-      color: theme.palette.status.error
-    }
-  })
-);
-function TaskStepIconComponent(props) {
-  const classes = useStepIconStyles();
-  const { active, completed, error } = props;
-  const getMiddle = () => {
-    if (active) {
-      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "24px" });
-    }
-    if (completed) {
-      return /* @__PURE__ */ React.createElement(Check, null);
-    }
-    if (error) {
-      return /* @__PURE__ */ React.createElement(Cancel, null);
-    }
-    return /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null);
-  };
+const SecretInput = (props) => {
+  var _a;
+  const { setSecrets, secrets } = useTemplateSecrets();
+  const {
+    name,
+    onChange,
+    schema: { title, description },
+    rawErrors,
+    disabled,
+    errors,
+    required
+  } = props;
   return /* @__PURE__ */ React.createElement(
-    "div",
+    ScaffolderField,
     {
-      className: classNames(classes.root, {
-        [classes.completed]: completed,
-        [classes.error]: error
-      })
+      rawErrors,
+      rawDescription: description,
+      disabled,
+      errors,
+      required
     },
-    getMiddle()
-  );
-}
-const TaskStatusStepper = memo(
-  (props) => {
-    const { steps, currentStepId, onUserStepChange } = props;
-    const classes = useStyles$a(props);
-    return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
-      Stepper,
+    /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: title }, title),
+    /* @__PURE__ */ React.createElement(
+      Input,
       {
-        activeStep: steps.findIndex((s) => s.id === currentStepId),
-        orientation: "vertical",
-        nonLinear: true
-      },
-      steps.map((step, index) => {
-        const isCancelled = step.status === "cancelled";
-        const isActive = step.status === "processing";
-        const isCompleted = step.status === "completed";
-        const isFailed = step.status === "failed";
-        const isSkipped = step.status === "skipped";
-        return /* @__PURE__ */ React.createElement(Step, { key: String(index), expanded: true }, /* @__PURE__ */ React.createElement(StepButton, { onClick: () => onUserStepChange(step.id) }, /* @__PURE__ */ React.createElement(
-          StepLabel,
-          {
-            StepIconProps: {
-              completed: isCompleted,
-              error: isFailed || isCancelled,
-              active: isActive
-            },
-            StepIconComponent: TaskStepIconComponent,
-            className: classes.stepWrapper
-          },
-          /* @__PURE__ */ React.createElement("div", { className: classes.labelWrapper }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "subtitle2" }, step.name), isSkipped ? /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, "Skipped") : /* @__PURE__ */ React.createElement(StepTimeTicker, { step }))
-        )));
-      })
-    ));
-  }
-);
-const hasLinks = ({ links = [] }) => links.length > 0;
-const TaskPage = (props) => {
-  const { loadingText } = props;
-  const classes = useStyles$a();
-  const navigate = useNavigate();
-  const rootPath = useRouteRef(rootRouteRef);
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const templateRoute = useRouteRef(selectedTemplateRouteRef);
-  const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
-  const [clickedToCancel, setClickedToCancel] = useState(false);
-  const [lastActiveStepId, setLastActiveStepId] = useState(
-    void 0
-  );
-  const { taskId } = useRouteRefParams(scaffolderTaskRouteRef);
-  const taskStream = useTaskEventStream(taskId);
-  const completed = taskStream.completed;
-  const taskCancelled = taskStream.cancelled;
-  const steps = useMemo(
-    () => {
-      var _a, _b;
-      return (_b = (_a = taskStream.task) == null ? void 0 : _a.spec.steps.map((step) => {
-        var _a2;
-        return {
-          ...step,
-          ...(_a2 = taskStream == null ? void 0 : taskStream.steps) == null ? void 0 : _a2[step.id]
-        };
-      })) != null ? _b : [];
-    },
-    [taskStream]
+        id: title,
+        "aria-describedby": title,
+        onChange: (e) => {
+          var _a2, _b;
+          onChange(Array((_a2 = e.target) == null ? void 0 : _a2.value.length).fill("*").join(""));
+          setSecrets({ [name]: (_b = e.target) == null ? void 0 : _b.value });
+        },
+        value: (_a = secrets[name]) != null ? _a : "",
+        type: "password",
+        autoComplete: "off"
+      }
+    )
   );
-  useEffect(() => {
-    var _a;
-    const mostRecentFailedOrActiveStep = steps.find(
-      (step) => ["failed", "processing"].includes(step.status)
-    );
-    if (completed && !mostRecentFailedOrActiveStep) {
-      setLastActiveStepId((_a = steps[steps.length - 1]) == null ? void 0 : _a.id);
-      return;
-    }
-    setLastActiveStepId(mostRecentFailedOrActiveStep == null ? void 0 : mostRecentFailedOrActiveStep.id);
-  }, [steps, completed]);
-  const currentStepId = userSelectedStepId != null ? userSelectedStepId : lastActiveStepId;
-  const logAsString = useMemo(() => {
-    if (!currentStepId) {
-      return loadingText ? loadingText : "Loading...";
-    }
-    const log = taskStream.stepLogs[currentStepId];
-    if (!(log == null ? void 0 : log.length)) {
-      return "Waiting for logs...";
-    }
-    return log.join("\n");
-  }, [taskStream.stepLogs, currentStepId, loadingText]);
-  const taskNotFound = taskStream.completed && !taskStream.loading && !taskStream.task;
-  const { output } = taskStream;
-  const handleStartOver = () => {
-    var _a, _b, _c;
-    if (!taskStream.task || !((_b = (_a = taskStream.task) == null ? void 0 : _a.spec.templateInfo) == null ? void 0 : _b.entityRef)) {
-      navigate(rootPath());
-      return;
-    }
-    const formData = taskStream.task.spec.parameters;
-    const { name, namespace } = parseEntityRef(
-      (_c = taskStream.task.spec.templateInfo) == null ? void 0 : _c.entityRef
-    );
-    navigate(
-      `${templateRoute({ templateName: name, namespace })}?${qs.stringify({
-        formData: JSON.stringify(formData)
-      })}`
-    );
-  };
-  const handleCancel = async () => {
-    setClickedToCancel(true);
-    await scaffolderApi.cancelTask(taskId);
-  };
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      pageTitleOverride: `Task ${taskId}`,
-      title: "Task Activity",
-      subtitle: `Activity for task: ${taskId}`
-    }
-  ), /* @__PURE__ */ React.createElement(Content, null, taskNotFound ? /* @__PURE__ */ React.createElement(
-    ErrorPage,
-    {
-      status: "404",
-      statusMessage: "Task not found",
-      additionalInfo: "No task found with this ID"
-    }
-  ) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Grid$1, { container: true }, /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(
-    TaskStatusStepper,
-    {
-      steps,
-      currentStepId,
-      onUserStepChange: setUserSelectedStepId
-    }
-  ), output && hasLinks(output) && /* @__PURE__ */ React.createElement(TaskPageLinks, { output }), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: classes.button,
-      onClick: handleStartOver,
-      disabled: !completed,
-      variant: "contained",
-      color: "primary"
-    },
-    "Start Over"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: classes.button,
-      onClick: handleCancel,
-      disabled: completed || taskCancelled || clickedToCancel,
-      variant: "outlined",
-      color: "secondary"
-    },
-    (taskCancelled || clickedToCancel) && !completed ? "Cancelling..." : "Cancel"
-  ))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 9 }, !currentStepId && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement("div", { style: { height: "80vh" } }, /* @__PURE__ */ React.createElement(TaskErrors, { error: taskStream.error }), /* @__PURE__ */ React.createElement(LogViewer, { text: logAsString })))))));
 };
 
-const useStyles$9 = makeStyles((theme) => ({
+const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
+  {
+    component: EntityPicker,
+    name: "EntityPicker",
+    schema: EntityPickerSchema
+  },
+  {
+    component: EntityNamePicker,
+    name: "EntityNamePicker",
+    validation: entityNamePickerValidation,
+    schema: EntityNamePickerSchema
+  },
+  {
+    component: EntityTagsPicker,
+    name: "EntityTagsPicker",
+    schema: EntityTagsPickerSchema
+  },
+  {
+    component: RepoUrlPicker,
+    name: "RepoUrlPicker",
+    validation: repoPickerValidation,
+    schema: RepoUrlPickerSchema
+  },
+  {
+    component: OwnerPicker,
+    name: "OwnerPicker",
+    schema: OwnerPickerSchema
+  },
+  {
+    component: OwnedEntityPicker,
+    name: "OwnedEntityPicker",
+    schema: OwnedEntityPickerSchema
+  },
+  {
+    component: MyGroupsPicker,
+    name: "MyGroupsPicker",
+    schema: MyGroupsPickerSchema
+  },
+  {
+    component: SecretInput,
+    name: "Secret"
+  },
+  {
+    component: MultiEntityPicker,
+    name: "MultiEntityPicker",
+    schema: MultiEntityPickerSchema,
+    validation: validateMultiEntityPickerValidation
+  }
+];
+
+const useStyles$f = makeStyles((theme) => ({
   code: {
     fontFamily: "Menlo, monospace",
     padding: theme.spacing(1),
@@ -393,7 +213,17 @@ const ExamplesTable = (props) => {
 };
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
-  const classes = useStyles$9();
+  const navigate = useNavigate();
+  const editorLink = useRouteRef(editRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: () => navigate(editorLink()),
+    onActionsClicked: void 0,
+    onTasksClicked: () => navigate(tasksLink()),
+    onCreateClicked: () => navigate(createLink())
+  };
+  const classes = useStyles$f();
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
@@ -497,95 +327,12 @@ const ActionsPage = () => {
       pageTitleOverride: "Create a New Component",
       title: "Installed actions",
       subtitle: "This is the collection of all installed actions"
-    }
-  ), /* @__PURE__ */ React.createElement(Content, null, items));
-};
-
-const SecretInput = (props) => {
-  var _a;
-  const { setSecrets, secrets } = useTemplateSecrets();
-  const {
-    name,
-    onChange,
-    schema: { title, description },
-    rawErrors,
-    disabled,
-    errors,
-    required
-  } = props;
-  return /* @__PURE__ */ React.createElement(
-    ScaffolderField,
-    {
-      rawErrors,
-      rawDescription: description,
-      disabled,
-      errors,
-      required
     },
-    /* @__PURE__ */ React.createElement(InputLabel, { htmlFor: title }, title),
-    /* @__PURE__ */ React.createElement(
-      Input,
-      {
-        id: title,
-        "aria-describedby": title,
-        onChange: (e) => {
-          var _a2, _b;
-          onChange(Array((_a2 = e.target) == null ? void 0 : _a2.value.length).fill("*").join(""));
-          setSecrets({ [name]: (_b = e.target) == null ? void 0 : _b.value });
-        },
-        value: (_a = secrets[name]) != null ? _a : "",
-        type: "password",
-        autoComplete: "off"
-      }
-    )
-  );
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+  ), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
-const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
-  {
-    component: EntityPicker,
-    name: "EntityPicker",
-    schema: EntityPickerSchema
-  },
-  {
-    component: EntityNamePicker,
-    name: "EntityNamePicker",
-    validation: entityNamePickerValidation,
-    schema: EntityNamePickerSchema
-  },
-  {
-    component: EntityTagsPicker,
-    name: "EntityTagsPicker",
-    schema: EntityTagsPickerSchema
-  },
-  {
-    component: RepoUrlPicker,
-    name: "RepoUrlPicker",
-    validation: repoPickerValidation,
-    schema: RepoUrlPickerSchema
-  },
-  {
-    component: OwnerPicker,
-    name: "OwnerPicker",
-    schema: OwnerPickerSchema
-  },
-  {
-    component: OwnedEntityPicker,
-    name: "OwnedEntityPicker",
-    schema: OwnedEntityPickerSchema
-  },
-  {
-    component: MyGroupsPicker,
-    name: "MyGroupsPicker",
-    schema: MyGroupsPickerSchema
-  },
-  {
-    component: SecretInput,
-    name: "Secret"
-  }
-];
-
-const useStyles$8 = makeStyles(
+const useStyles$e = makeStyles(
   (theme) => ({
     root: {
       backgroundColor: "rgba(0, 0, 0, .11)",
@@ -634,7 +381,7 @@ function getFilterGroups() {
 }
 const OwnerListPicker = (props) => {
   const { filter, onSelectOwner } = props;
-  const classes = useStyles$8();
+  const classes = useStyles$e();
   const filterGroups = getFilterGroups();
   return /* @__PURE__ */ React.createElement(Card, { className: classes.root }, filterGroups.map((group) => /* @__PURE__ */ React.createElement(Fragment, { key: group.name }, /* @__PURE__ */ React.createElement(
     Typography,
@@ -793,14 +540,184 @@ const ListTaskPageContent = (props) => {
   )));
 };
 const ListTasksPage = (props) => {
+  const navigate = useNavigate();
+  const editorLink = useRouteRef(editRouteRef);
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: () => navigate(editorLink()),
+    onActionsClicked: () => navigate(actionsLink()),
+    onTasksClicked: void 0,
+    onCreateClicked: () => navigate(createLink())
+  };
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      pageTitleOverride: "Templates Tasks",
-      title: /* @__PURE__ */ React.createElement(React.Fragment, null, "List template tasks ", /* @__PURE__ */ React.createElement(Lifecycle, { shorthand: true, alpha: true })),
-      subtitle: "All tasks that have been started"
+      pageTitleOverride: "Templates Tasks",
+      title: "List template tasks",
+      subtitle: "All tasks that have been started"
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ListTaskPageContent, { ...props })));
+};
+
+const RegisterExistingButton = (props) => {
+  const { title, to } = props;
+  const { allowed } = usePermission({
+    permission: catalogEntityCreatePermission
+  });
+  const isXSScreen = useMediaQuery(
+    (theme) => theme.breakpoints.down("xs")
+  );
+  if (!to || !allowed) {
+    return null;
+  }
+  return isXSScreen ? /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      component: Link$1,
+      color: "primary",
+      title,
+      size: "small",
+      to
+    },
+    /* @__PURE__ */ React.createElement(CreateComponentIcon, null)
+  ) : /* @__PURE__ */ React.createElement(Button, { component: Link$1, variant: "contained", color: "primary", to }, title);
+};
+
+const defaultGroup = {
+  title: "Templates",
+  filter: () => true
+};
+const createGroupsWithOther = (groups) => [
+  ...groups,
+  {
+    title: "Other Templates",
+    filter: (e) => ![...groups].some(({ filter }) => filter(e))
+  }
+];
+const TemplateListPage = (props) => {
+  var _a, _b, _c;
+  const registerComponentLink = useRouteRef(registerComponentRouteRef);
+  const {
+    TemplateCardComponent,
+    groups: givenGroups = [],
+    templateFilter,
+    headerOptions
+  } = props;
+  const navigate = useNavigate();
+  const editorLink = useRouteRef(editRouteRef);
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
+  const app = useApp();
+  const groups = givenGroups.length ? createGroupsWithOther(givenGroups) : [defaultGroup];
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: ((_a = props == null ? void 0 : props.contextMenu) == null ? void 0 : _a.editor) !== false ? () => navigate(editorLink()) : void 0,
+    onActionsClicked: ((_b = props == null ? void 0 : props.contextMenu) == null ? void 0 : _b.actions) !== false ? () => navigate(actionsLink()) : void 0,
+    onTasksClicked: ((_c = props == null ? void 0 : props.contextMenu) == null ? void 0 : _c.tasks) !== false ? () => navigate(tasksLink()) : void 0
+  };
+  const additionalLinksForEntity = useCallback(
+    (template) => {
+      var _a2, _b2;
+      const { kind, namespace, name } = parseEntityRef(
+        stringifyEntityRef(template)
+      );
+      return ((_a2 = template.metadata.annotations) == null ? void 0 : _a2["backstage.io/techdocs-ref"]) && viewTechDocsLink ? [
+        {
+          icon: (_b2 = app.getSystemIcon("docs")) != null ? _b2 : DocsIcon,
+          text: "View TechDocs",
+          url: viewTechDocsLink({ kind, namespace, name })
+        }
+      ] : [];
+    },
+    [app, viewTechDocsLink]
+  );
+  const onTemplateSelected = useCallback(
+    (template) => {
+      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));
+      navigate(templateRoute({ namespace, templateName: name }));
+    },
+    [navigate, templateRoute]
+  );
+  return /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a new component",
+      title: "Create a new component",
+      subtitle: "Create new software components using standard templates in your organization",
+      ...headerOptions
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Available Templates" }, /* @__PURE__ */ React.createElement(
+    RegisterExistingButton,
+    {
+      title: "Register Existing Component",
+      to: registerComponentLink && registerComponentLink()
+    }
+  ), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, { initialFilter: "template", hidden: true }), /* @__PURE__ */ React.createElement(
+    UserListPicker,
+    {
+      initialFilter: "all",
+      availableFilters: ["all", "starred"]
+    }
+  ), /* @__PURE__ */ React.createElement(TemplateCategoryPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(
+    TemplateGroups,
+    {
+      groups,
+      templateFilter,
+      TemplateCardComponent,
+      onTemplateSelected,
+      additionalLinksForEntity
+    }
+  ))))));
+};
+
+const TemplateWizardPage = (props) => {
+  const rootRef = useRouteRef(rootRouteRef);
+  const taskRoute = useRouteRef(scaffolderTaskRouteRef);
+  const { secrets } = useTemplateSecrets();
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const navigate = useNavigate();
+  const { templateName, namespace } = useRouteRefParams(
+    selectedTemplateRouteRef
+  );
+  const templateRef = stringifyEntityRef({
+    kind: "Template",
+    namespace,
+    name: templateName
+  });
+  const onCreate = async (values) => {
+    const { taskId } = await scaffolderApi.scaffold({
+      templateRef,
+      values,
+      secrets
+    });
+    navigate(taskRoute({ taskId }));
+  };
+  const onError = () => /* @__PURE__ */ React.createElement(Navigate, { to: rootRef() });
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a new component",
+      title: "Create a new component",
+      subtitle: "Create new software components using standard templates in your organization",
+      ...props.headerOptions
     }
-  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ListTaskPageContent, { ...props })));
+  ), /* @__PURE__ */ React.createElement(
+    Workflow,
+    {
+      namespace,
+      templateName,
+      onCreate,
+      components: props.components,
+      onError,
+      extensions: props.customFieldExtensions,
+      formProps: props.formProps,
+      layouts: props.layouts
+    }
+  )));
 };
 
 const showDirectoryPicker = window.showDirectoryPicker;
@@ -857,91 +774,113 @@ class WebFileSystemAccess {
   }
 }
 
-const useStyles$7 = 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)
+const MAX_CONTENT_SIZE = 64 * 1024;
+const CHUNK_SIZE = 32 * 1024;
+const DryRunContext = createContext(void 0);
+function base64EncodeContent(content) {
+  if (content.length > MAX_CONTENT_SIZE) {
+    return window.btoa("<file too large>");
   }
-}));
-function TemplateEditorIntro(props) {
-  const classes = useStyles$7();
-  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");
+  try {
+    return window.btoa(content);
+  } catch {
+    const decoder = new TextEncoder();
+    const buffer = decoder.encode(content);
+    const chunks = new Array();
+    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {
+      chunks.push(
+        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
+      );
+    }
+    return window.btoa(chunks.join(""));
+  }
+}
+function DryRunProvider(props) {
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const [state, setState] = useState({
+    results: [],
+    selectedResult: void 0
+  });
+  const idRef = useRef(1);
+  const selectResult = useCallback((id) => {
+    setState((prevState) => {
+      const result = prevState.results.find((r) => r.id === id);
+      if (result === prevState.selectedResult) {
+        return prevState;
       }
-    },
-    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-      Typography$1,
-      {
-        variant: "h4",
-        component: "h3",
-        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,
-    {
-      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, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h4", component: "h3", 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, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h4", component: "h3", 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: "h4", component: "h2", 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"
+      return {
+        results: prevState.results,
+        selectedResult: result
+      };
+    });
+  }, []);
+  const deleteResult = useCallback((id) => {
+    setState((prevState) => {
+      var _a;
+      const index = prevState.results.findIndex((r) => r.id === id);
+      if (index === -1) {
+        return prevState;
+      }
+      const newResults = prevState.results.slice();
+      const [deleted] = newResults.splice(index, 1);
+      return {
+        results: newResults,
+        selectedResult: ((_a = prevState.selectedResult) == null ? void 0 : _a.id) === deleted.id ? newResults[0] : prevState.selectedResult
+      };
+    });
+  }, []);
+  const execute = useCallback(
+    async (options) => {
+      if (!scaffolderApi.dryRun) {
+        throw new Error("Scaffolder API does not support dry-run");
       }
+      const parsed = yaml.parse(options.templateContent);
+      const response = await scaffolderApi.dryRun({
+        template: parsed,
+        values: options.values,
+        secrets: {},
+        directoryContents: options.files.map((file) => ({
+          path: file.path,
+          base64Content: base64EncodeContent(file.content)
+        }))
+      });
+      const result = {
+        ...response,
+        id: idRef.current++
+      };
+      setState((prevState) => {
+        var _a;
+        return {
+          results: [...prevState.results, result],
+          selectedResult: (_a = prevState.selectedResult) != null ? _a : result
+        };
+      });
     },
-    supportsLoad && cardLoadLocal,
-    cardFormEditor,
-    !supportsLoad && cardLoadLocal,
-    cardFieldExplorer
-  ));
+    [scaffolderApi]
+  );
+  const dryRun = useMemo(
+    () => ({
+      ...state,
+      selectResult,
+      deleteResult,
+      execute
+    }),
+    [state, selectResult, deleteResult, execute]
+  );
+  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, { value: dryRun }, props.children);
+}
+function useDryRun() {
+  const value = useContext(DryRunContext);
+  if (!value) {
+    throw new Error("must be used within a DryRunProvider");
+  }
+  return value;
 }
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck = (obj, member, msg) => {
@@ -1026,7 +965,7 @@ class DirectoryEditorManager {
     __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
     __privateAdd(this, _files, []);
     __privateAdd(this, _selectedFile, void 0);
-    __publicField(this, "setSelectedFile", (path) => {
+    __publicField$1(this, "setSelectedFile", (path) => {
       const prev = __privateGet(this, _selectedFile);
       const next = __privateGet(this, _files).find((file) => file.path === path);
       if (prev !== next) {
@@ -1118,110 +1057,299 @@ function DirectoryEditorProvider(props) {
   return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
 }
 
-const MAX_CONTENT_SIZE = 64 * 1024;
-const CHUNK_SIZE = 32 * 1024;
-const DryRunContext = createContext(void 0);
-function base64EncodeContent(content) {
-  if (content.length > MAX_CONTENT_SIZE) {
-    return window.btoa("<file too large>");
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const useStyles$d = makeStyles$1({
+  containerWrapper: {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  },
+  container: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: "auto"
   }
-  try {
-    return window.btoa(content);
-  } catch {
-    const decoder = new TextEncoder();
-    const buffer = decoder.encode(content);
-    const chunks = new Array();
-    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {
-      chunks.push(
-        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
-      );
+});
+class ErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      shouldRender: true
+    });
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.invalidator !== this.props.invalidator) {
+      this.setState({ shouldRender: true });
     }
-    return window.btoa(chunks.join(""));
   }
-}
-function DryRunProvider(props) {
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const [state, setState] = useState({
-    results: [],
-    selectedResult: void 0
-  });
-  const idRef = useRef(1);
-  const selectResult = useCallback((id) => {
-    setState((prevState) => {
-      const result = prevState.results.find((r) => r.id === id);
-      if (result === prevState.selectedResult) {
-        return prevState;
-      }
-      return {
-        results: prevState.results,
-        selectedResult: result
-      };
-    });
-  }, []);
-  const deleteResult = useCallback((id) => {
-    setState((prevState) => {
-      var _a;
-      const index = prevState.results.findIndex((r) => r.id === id);
-      if (index === -1) {
-        return prevState;
-      }
-      const newResults = prevState.results.slice();
-      const [deleted] = newResults.splice(index, 1);
-      return {
-        results: newResults,
-        selectedResult: ((_a = prevState.selectedResult) == null ? void 0 : _a.id) === deleted.id ? newResults[0] : prevState.selectedResult
-      };
-    });
-  }, []);
-  const execute = useCallback(
-    async (options) => {
-      if (!scaffolderApi.dryRun) {
-        throw new Error("Scaffolder API does not support dry-run");
+  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,
+    onDryRun,
+    setErrorText,
+    fieldExtensions = [],
+    layouts = []
+  } = props;
+  const classes = useStyles$d();
+  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.parseAllDocuments(content).filter((c) => c).map((c) => c.toJSON())[0];
+        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: createAsyncValidators(param, fieldValidators, {
+                  apiHolder
+                })
+              }
+            ] : []
+          )
+        );
+      } catch (e) {
+        setErrorText(e.message);
       }
-      const parsed = yaml.parse(options.templateContent);
-      const response = await scaffolderApi.dryRun({
-        template: parsed,
-        values: options.values,
-        secrets: {},
-        directoryContents: options.files.map((file) => ({
-          path: file.path,
-          base64Content: base64EncodeContent(file.content)
-        }))
-      });
-      const result = {
-        ...response,
-        id: idRef.current++
-      };
-      setState((prevState) => {
-        var _a;
-        return {
-          results: [...prevState.results, result],
-          selectedResult: (_a = prevState.selectedResult) != null ? _a : result
-        };
-      });
     },
-    [scaffolderApi]
+    250,
+    [contentIsSpec, content, apiHolder]
   );
-  const dryRun = useMemo(
-    () => ({
-      ...state,
-      selectResult,
-      deleteResult,
-      execute
-    }),
-    [state, selectResult, deleteResult, execute]
+  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(
+    Stepper,
+    {
+      manifest: { steps, title: "Template Editor" },
+      extensions: fieldExtensions,
+      components: fields,
+      onCreate: async (options) => {
+        await (onDryRun == null ? void 0 : onDryRun(options));
+      },
+      layouts
+    }
+  ))));
+}
+function TemplateEditorFormDirectoryEditorDryRun(props) {
+  const { setErrorText, fieldExtensions = [], layouts } = props;
+  const dryRun = useDryRun();
+  const directoryEditor = useDirectoryEditor();
+  const { selectedFile } = directoryEditor;
+  const handleDryRun = async (data) => {
+    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,
+      layouts
+    }
   );
-  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, { value: dryRun }, props.children);
 }
-function useDryRun() {
-  const value = useContext(DryRunContext);
-  if (!value) {
-    throw new Error("must be used within a DryRunProvider");
+TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
+
+const useStyles$c = 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"
   }
-  return value;
-}
+}));
+const CustomFieldExplorer = ({
+  customFieldExtensions = [],
+  onClose
+}) => {
+  var _a, _b;
+  const classes = useStyles$c();
+  const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
+  const [selectedField, setSelectedField] = useState(fieldOptions[0]);
+  const [fieldFormState, setFieldFormState] = 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({});
+    },
+    [setFieldFormState, setSelectedField]
+  );
+  const handleFieldConfigChange = useCallback(
+    (state) => {
+      setFieldFormState(state);
+      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, { key: idx, value: option }, option.name))
+  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__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: { ...fieldComponents },
+      noHtml5Validate: true,
+      formData: fieldFormState,
+      formContext: { fieldFormState },
+      onSubmit: (e) => handleFieldConfigChange(e.formData),
+      validator,
+      schema: ((_a = selectedField.schema) == null ? void 0 : _a.uiOptions) || {},
+      experimental_defaultFormStateBehavior: {
+        allOf: "populateDefaults"
+      }
+    },
+    /* @__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,
+      setErrorText: () => null
+    }
+  )));
+};
 
-const useStyles$6 = makeStyles$1({
+const useStyles$b = makeStyles$1({
   root: {
     whiteSpace: "nowrap",
     overflowY: "auto"
@@ -1280,7 +1408,7 @@ function FileTreeItem({ entry }) {
   return /* @__PURE__ */ React.createElement(TreeItem, { nodeId: entry.path, label: entry.name }, entry.children.map((child) => /* @__PURE__ */ React.createElement(FileTreeItem, { key: child.path, entry: child })));
 }
 function FileBrowser(props) {
-  const classes = useStyles$6();
+  const classes = useStyles$b();
   const fileTree = useMemo(
     () => parseFileEntires(props.filePaths),
     [props.filePaths]
@@ -1302,7 +1430,7 @@ function FileBrowser(props) {
   );
 }
 
-const useStyles$5 = makeStyles((theme) => ({
+const useStyles$a = makeStyles((theme) => ({
   button: {
     padding: theme.spacing(1)
   },
@@ -1321,7 +1449,7 @@ const useStyles$5 = makeStyles((theme) => ({
 }));
 function TemplateEditorBrowser(props) {
   var _a, _b;
-  const classes = useStyles$5();
+  const classes = useStyles$a();
   const directoryEditor = useDirectoryEditor();
   const changedFiles = directoryEditor.files.filter((file) => file.dirty);
   const handleClose = () => {
@@ -1338,22 +1466,22 @@ function TemplateEditorBrowser(props) {
     }
     props.onClose();
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Save all files" }, /* @__PURE__ */ React.createElement(
-    IconButton,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Save all files" }, /* @__PURE__ */ React.createElement(
+    IconButton$1,
     {
       className: classes.button,
       disabled: directoryEditor.files.every((file) => !file.dirty),
       onClick: () => directoryEditor.save()
     },
     /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Reload directory" }, /* @__PURE__ */ React.createElement(
-    IconButton,
+  )), /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload directory" }, /* @__PURE__ */ React.createElement(
+    IconButton$1,
     {
       className: classes.button,
       onClick: () => directoryEditor.reload()
     },
     /* @__PURE__ */ React.createElement(RefreshIcon, null)
-  )), /* @__PURE__ */ React.createElement("div", { className: classes.buttonsGap }), /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Close directory" }, /* @__PURE__ */ React.createElement(IconButton, { className: classes.button, onClick: handleClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)))), /* @__PURE__ */ React.createElement(Divider, { className: classes.buttonsDivider }), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("div", { className: classes.buttonsGap }), /* @__PURE__ */ React.createElement(Tooltip, { title: "Close directory" }, /* @__PURE__ */ React.createElement(IconButton$1, { className: classes.button, onClick: handleClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)))), /* @__PURE__ */ React.createElement(Divider, { className: classes.buttonsDivider }), /* @__PURE__ */ React.createElement(
     FileBrowser,
     {
       selected: (_b = (_a = directoryEditor.selectedFile) == null ? void 0 : _a.path) != null ? _b : "",
@@ -1363,7 +1491,7 @@ function TemplateEditorBrowser(props) {
   ));
 }
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$9 = makeStyles((theme) => ({
   container: {
     position: "relative",
     width: "100%",
@@ -1392,7 +1520,7 @@ const useStyles$4 = makeStyles((theme) => ({
 }));
 function TemplateEditorTextArea(props) {
   const { errorText } = props;
-  const classes = useStyles$4();
+  const classes = useStyles$9();
   const panelExtension = useMemo(() => {
     if (!errorText) {
       return showPanel.of(null);
@@ -1421,8 +1549,8 @@ function TemplateEditorTextArea(props) {
       value: props.content,
       onChange: props.onUpdate
     }
-  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Save file" }, /* @__PURE__ */ React.createElement(
-    IconButton,
+  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(Tooltip, { title: "Save file" }, /* @__PURE__ */ React.createElement(
+    IconButton$1,
     {
       className: classes.floatingButton,
       onClick: () => {
@@ -1431,8 +1559,8 @@ function TemplateEditorTextArea(props) {
       }
     },
     /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
-    IconButton,
+  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
+    IconButton$1,
     {
       className: classes.floatingButton,
       onClick: () => {
@@ -1476,7 +1604,7 @@ function downloadBlob(blob, name) {
   a.remove();
 }
 
-const useStyles$3 = makeStyles$1((theme) => ({
+const useStyles$8 = makeStyles$1((theme) => ({
   root: {
     overflowY: "auto",
     background: theme.palette.background.default
@@ -1493,7 +1621,7 @@ const useStyles$3 = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResultsList() {
-  const classes = useStyles$3();
+  const classes = useStyles$8();
   const dryRun = useDryRun();
   return /* @__PURE__ */ React.createElement(List$1, { className: classes.root, dense: true }, dryRun.results.map((result) => {
     var _a;
@@ -1520,11 +1648,11 @@ function DryRunResultsList() {
         {
           className: failed ? classes.iconFailure : classes.iconSuccess
         },
-        failed ? /* @__PURE__ */ React.createElement(Cancel, null) : /* @__PURE__ */ React.createElement(Check, null)
+        failed ? /* @__PURE__ */ React.createElement(Cancel, null) : /* @__PURE__ */ React.createElement(CheckIcon, null)
       ),
       /* @__PURE__ */ React.createElement(ListItemText$1, { primary: `Result ${result.id}` }),
       /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
-        IconButton$1,
+        IconButton,
         {
           edge: "end",
           "aria-label": "download",
@@ -1534,7 +1662,7 @@ function DryRunResultsList() {
         },
         /* @__PURE__ */ React.createElement(DownloadIcon, null)
       ), /* @__PURE__ */ React.createElement(
-        IconButton$1,
+        IconButton,
         {
           edge: "end",
           "aria-label": "delete",
@@ -1556,32 +1684,195 @@ async function downloadDirectoryContents(directoryContents, name) {
   const blob = await zip.generateAsync({ type: "blob" });
   downloadBlob(blob, name);
 }
-
-const useStyles$2 = makeStyles$1((theme) => ({
-  root: {
-    display: "grid",
-    gridTemplateColumns: "280px auto 3fr",
-    gridTemplateRows: "1fr"
-  },
-  child: {
-    overflowY: "auto",
-    height: "100%",
-    minHeight: 0
-  },
-  firstChild: {
-    background: theme.palette.background.paper
-  }
-}));
-function DryRunResultsSplitView(props) {
-  const classes = useStyles$2();
-  const childArray = Children.toArray(props.children);
-  if (childArray.length !== 2) {
-    throw new Error("must have exactly 2 children");
+
+const useStyles$7 = makeStyles$1((theme) => ({
+  root: {
+    display: "grid",
+    gridTemplateColumns: "280px auto 3fr",
+    gridTemplateRows: "1fr"
+  },
+  child: {
+    overflowY: "auto",
+    height: "100%",
+    minHeight: 0
+  },
+  firstChild: {
+    background: theme.palette.background.paper
+  }
+}));
+function DryRunResultsSplitView(props) {
+  const classes = useStyles$7();
+  const childArray = Children.toArray(props.children);
+  if (childArray.length !== 2) {
+    throw new Error("must have exactly 2 children");
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classNames(classes.child, classes.firstChild) }, childArray[0]), /* @__PURE__ */ React.createElement(Divider$1, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement("div", { className: classes.child }, childArray[1]));
+}
+
+const useStyles$6 = makeStyles({
+  svgIcon: {
+    display: "inline-block",
+    "& svg": {
+      display: "inline-block",
+      fontSize: "inherit",
+      verticalAlign: "baseline"
+    }
+  }
+});
+const IconLink = (props) => {
+  const { href, text, Icon, ...linkProps } = props;
+  const classes = useStyles$6();
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { component: "div", className: classes.svgIcon }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Link, { to: href, ...linkProps }, text || href)));
+};
+
+const TaskPageLinks = ({ output }) => {
+  const { links = [] } = output;
+  const app = useApp();
+  const entityRoute = useRouteRef(entityRouteRef);
+  const iconResolver = (key) => {
+    var _a;
+    return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
+  };
+  return /* @__PURE__ */ React.createElement(Box, { px: 3, pb: 3 }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
+    if (entityRef) {
+      const entityName = parseEntityRef(entityRef, {
+        defaultKind: "<unknown>",
+        defaultNamespace: "<unknown>"
+      });
+      const target = entityRoute(entityName);
+      return { title, icon, url: target };
+    }
+    return { title, icon, url };
+  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(
+    IconLink,
+    {
+      key: `output-link-${i}`,
+      href: url,
+      text: title != null ? title : url,
+      Icon: iconResolver(icon),
+      target: "_blank"
+    }
+  )));
+};
+
+const useStyles$5 = makeStyles(
+  (theme) => createStyles({
+    root: {
+      width: "100%"
+    },
+    button: {
+      marginBottom: theme.spacing(2),
+      marginLeft: theme.spacing(2)
+    },
+    actionsContainer: {
+      marginBottom: theme.spacing(2)
+    },
+    resetContainer: {
+      padding: theme.spacing(3)
+    },
+    labelWrapper: {
+      display: "flex",
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    stepWrapper: {
+      width: "100%"
+    }
+  })
+);
+const useStepIconStyles = makeStyles(
+  (theme) => createStyles({
+    root: {
+      color: theme.palette.text.disabled,
+      display: "flex",
+      height: 22,
+      alignItems: "center"
+    },
+    completed: {
+      color: theme.palette.status.ok
+    },
+    error: {
+      color: theme.palette.status.error
+    }
+  })
+);
+const StepTimeTicker = ({ step }) => {
+  const [time, setTime] = useState("");
+  useInterval(() => {
+    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 }));
+  }, 1e3);
+  return /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, time);
+};
+function TaskStepIconComponent(props) {
+  const classes = useStepIconStyles();
+  const { active, completed, error } = props;
+  const getMiddle = () => {
+    if (active) {
+      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "24px" });
+    }
+    if (completed) {
+      return /* @__PURE__ */ React.createElement(CheckIcon, null);
+    }
+    if (error) {
+      return /* @__PURE__ */ React.createElement(Cancel, null);
+    }
+    return /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(classes.root, {
+        [classes.completed]: completed,
+        [classes.error]: error
+      })
+    },
+    getMiddle()
+  );
+}
+const TaskStatusStepper = memo(
+  (props) => {
+    const { steps, currentStepId, onUserStepChange } = props;
+    const classes = useStyles$5(props);
+    return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
+      Stepper$1,
+      {
+        activeStep: steps.findIndex((s) => s.id === currentStepId),
+        orientation: "vertical",
+        nonLinear: true
+      },
+      steps.map((step, index) => {
+        const isCancelled = step.status === "cancelled";
+        const isActive = step.status === "processing";
+        const isCompleted = step.status === "completed";
+        const isFailed = step.status === "failed";
+        const isSkipped = step.status === "skipped";
+        return /* @__PURE__ */ React.createElement(Step, { key: String(index), expanded: true }, /* @__PURE__ */ React.createElement(StepButton, { onClick: () => onUserStepChange(step.id) }, /* @__PURE__ */ React.createElement(
+          StepLabel,
+          {
+            StepIconProps: {
+              completed: isCompleted,
+              error: isFailed || isCancelled,
+              active: isActive
+            },
+            StepIconComponent: TaskStepIconComponent,
+            className: classes.stepWrapper
+          },
+          /* @__PURE__ */ React.createElement("div", { className: classes.labelWrapper }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "subtitle2" }, step.name), isSkipped ? /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, "Skipped") : /* @__PURE__ */ React.createElement(StepTimeTicker, { step }))
+        )));
+      })
+    ));
   }
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classNames(classes.child, classes.firstChild) }, childArray[0]), /* @__PURE__ */ React.createElement(Divider$1, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement("div", { className: classes.child }, childArray[1]));
-}
+);
 
-const useStyles$1 = makeStyles$1({
+const useStyles$4 = makeStyles$1({
   root: {
     display: "flex",
     flexFlow: "column nowrap"
@@ -1607,7 +1898,7 @@ const useStyles$1 = makeStyles$1({
   }
 });
 function FilesContent() {
-  const classes = useStyles$1();
+  const classes = useStyles$4();
   const { selectedResult } = useDryRun();
   const [selectedPath, setSelectedPath] = useState("");
   const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find(
@@ -1683,7 +1974,7 @@ function LogContent() {
 }
 function OutputContent() {
   var _a, _b;
-  const classes = useStyles$1();
+  const classes = useStyles$4();
   const { selectedResult } = useDryRun();
   if (!selectedResult) {
     return null;
@@ -1701,14 +1992,14 @@ function OutputContent() {
   ));
 }
 function DryRunResultsView() {
-  const classes = useStyles$1();
+  const classes = useStyles$4();
   const [selectedTab, setSelectedTab] = useState(
     "files"
   );
   return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Tabs, { value: selectedTab, onChange: (_, v) => setSelectedTab(v) }, /* @__PURE__ */ React.createElement(Tab, { value: "files", label: "Files" }), /* @__PURE__ */ React.createElement(Tab, { value: "log", label: "Log" }), /* @__PURE__ */ React.createElement(Tab, { value: "output", label: "Output" })), /* @__PURE__ */ React.createElement(Divider$1, null), /* @__PURE__ */ React.createElement("div", { className: classes.contentWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, selectedTab === "files" && /* @__PURE__ */ React.createElement(FilesContent, null), selectedTab === "log" && /* @__PURE__ */ React.createElement(LogContent, null), selectedTab === "output" && /* @__PURE__ */ React.createElement(OutputContent, null))));
 }
 
-const useStyles = makeStyles$1((theme) => ({
+const useStyles$3 = makeStyles$1((theme) => ({
   header: {
     height: 48,
     minHeight: 0,
@@ -1727,7 +2018,7 @@ const useStyles = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResults() {
-  const classes = useStyles();
+  const classes = useStyles$3();
   const dryRun = useDryRun();
   const [expanded, setExpanded] = useState(false);
   const [hidden, setHidden] = useState(true);
@@ -1763,5 +2054,427 @@ function DryRunResults() {
   ));
 }
 
-export { ActionsPage as A, DirectoryEditorProvider as D, ListTasksPage as L, TemplateEditorBrowser as T, WebFileSystemAccess as W, useDirectoryEditor as a, DryRunProvider as b, TemplateEditorTextArea as c, DryRunResults as d, TemplateEditorIntro as e, DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS as f, TaskPage as g, useDryRun as u };
-//# sourceMappingURL=DryRunResults-c0cd5eb5.esm.js.map
+const useStyles$2 = makeStyles({
+  // Reset and fix sizing to make sure scrolling behaves correctly
+  root: {
+    gridArea: "pageContent",
+    display: "grid",
+    gridTemplateAreas: `
+      "browser editor preview"
+      "results results results"
+    `,
+    gridTemplateColumns: "1fr 3fr 2fr",
+    gridTemplateRows: "1fr auto"
+  },
+  browser: {
+    gridArea: "browser",
+    overflow: "auto"
+  },
+  editor: {
+    gridArea: "editor",
+    overflow: "auto"
+  },
+  preview: {
+    gridArea: "preview",
+    overflow: "auto"
+  },
+  results: {
+    gridArea: "results"
+  }
+});
+const TemplateEditor = (props) => {
+  const classes = useStyles$2();
+  const [errorText, setErrorText] = useState();
+  return /* @__PURE__ */ React.createElement(DirectoryEditorProvider, { directory: props.directory }, /* @__PURE__ */ React.createElement(DryRunProvider, null, /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("section", { className: classes.browser }, /* @__PURE__ */ React.createElement(TemplateEditorBrowser, { onClose: props.onClose })), /* @__PURE__ */ React.createElement("section", { className: classes.editor }, /* @__PURE__ */ React.createElement(TemplateEditorTextArea.DirectoryEditor, { errorText })), /* @__PURE__ */ React.createElement("section", { className: classes.preview }, /* @__PURE__ */ React.createElement(
+    TemplateEditorForm.DirectoryEditorDryRun,
+    {
+      setErrorText,
+      fieldExtensions: props.fieldExtensions,
+      layouts: props.layouts
+    }
+  )), /* @__PURE__ */ React.createElement("section", { className: classes.results }, /* @__PURE__ */ React.createElement(DryRunResults, null)))));
+};
+
+const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
+parameters:
+  - title: Fill in some steps
+    required:
+      - name
+    properties:
+      name:
+        title: Name
+        type: string
+        description: Unique name of the component
+      owner:
+        title: Owner
+        type: string
+        description: Owner of the component
+        ui:field: OwnerPicker
+        ui:options:
+          catalogFilter:
+            kind: Group
+  - title: Choose a location
+    required:
+      - repoUrl
+    properties:
+      repoUrl:
+        title: Repository Location
+        type: string
+        ui:field: RepoUrlPicker
+        ui:options:
+          allowedHosts:
+            - github.com
+steps:
+  - id: fetch-base
+    name: Fetch Base
+    action: fetch:template
+    input:
+      url: ./template
+      values:
+        name: \${{parameters.name}}
+`;
+const useStyles$1 = makeStyles((theme) => ({
+  root: {
+    gridArea: "pageContent",
+    display: "grid",
+    gridTemplateAreas: `
+      "controls controls"
+      "textArea preview"
+    `,
+    gridTemplateRows: "auto 1fr",
+    gridTemplateColumns: "1fr 1fr"
+  },
+  controls: {
+    gridArea: "controls",
+    display: "flex",
+    flexFlow: "row nowrap",
+    alignItems: "center",
+    margin: theme.spacing(1)
+  },
+  textArea: {
+    gridArea: "textArea"
+  },
+  preview: {
+    gridArea: "preview"
+  }
+}));
+const TemplateFormPreviewer = ({
+  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
+  customFieldExtensions = [],
+  onClose,
+  layouts = []
+}) => {
+  const classes = useStyles$1();
+  const alertApi = useApi(alertApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const [selectedTemplate, setSelectedTemplate] = useState("");
+  const [errorText, setErrorText] = useState();
+  const [templateOptions, setTemplateOptions] = useState([]);
+  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
+  const { loading } = useAsync(
+    () => catalogApi.getEntities({
+      filter: { kind: "template" },
+      fields: [
+        "kind",
+        "metadata.namespace",
+        "metadata.name",
+        "metadata.title",
+        "spec.parameters",
+        "spec.steps",
+        "spec.output"
+      ]
+    }).then(
+      ({ items }) => setTemplateOptions(
+        items.map((template) => {
+          var _a;
+          return {
+            label: (_a = template.metadata.title) != null ? _a : humanizeEntityRef(template, { defaultKind: "template" }),
+            value: template
+          };
+        })
+      )
+    ).catch(
+      (e) => alertApi.post({
+        message: `Error loading exisiting templates: ${e.message}`,
+        severity: "error"
+      })
+    ),
+    [catalogApi]
+  );
+  const handleSelectChange = useCallback(
+    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types
+    (selected) => {
+      setSelectedTemplate(selected);
+      setTemplateYaml(yaml.stringify(selected.spec));
+    },
+    [setTemplateYaml]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__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-template-label" }, "Load Existing Template"), /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      value: selectedTemplate,
+      label: "Load Existing Template",
+      labelId: "select-template-label",
+      onChange: (e) => handleSelectChange(e.target.value)
+    },
+    templateOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option.value }, option.label))
+  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
+    TemplateEditorTextArea,
+    {
+      content: templateYaml,
+      onUpdate: setTemplateYaml,
+      errorText
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(
+    TemplateEditorForm,
+    {
+      content: templateYaml,
+      contentIsSpec: true,
+      fieldExtensions: customFieldExtensions,
+      setErrorText,
+      layouts
+    }
+  ))));
+};
+
+const useStyles = 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();
+  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: "h4",
+        component: "h3",
+        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: "h4", component: "h3", 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: "h4", component: "h3", 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: "h4", component: "h2", 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
+  ));
+}
+
+function TemplateEditorPage(props) {
+  const [selection, setSelection] = useState();
+  const navigate = useNavigate();
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const createLink = useRouteRef(rootRouteRef);
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: void 0,
+    onActionsClicked: () => navigate(actionsLink()),
+    onTasksClicked: () => navigate(tasksLink()),
+    onCreateClicked: () => navigate(createLink())
+  };
+  let content = null;
+  if ((selection == null ? void 0 : selection.type) === "local") {
+    content = /* @__PURE__ */ React.createElement(
+      TemplateEditor,
+      {
+        directory: selection.directory,
+        fieldExtensions: props.customFieldExtensions,
+        onClose: () => setSelection(void 0),
+        layouts: props.layouts
+      }
+    );
+  } else if ((selection == null ? void 0 : selection.type) === "form") {
+    content = /* @__PURE__ */ React.createElement(
+      TemplateFormPreviewer,
+      {
+        defaultPreviewTemplate: props.defaultPreviewTemplate,
+        customFieldExtensions: props.customFieldExtensions,
+        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) => {
+          if (option === "local") {
+            WebFileSystemAccess.requestDirectoryAccess().then((directory) => setSelection({ type: "local", directory })).catch(() => {
+            });
+          } else if (option === "form") {
+            setSelection({ type: "form" });
+          } else if (option === "field-explorer") {
+            setSelection({ type: "field-explorer" });
+          }
+        }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Template Editor",
+      subtitle: "Edit, preview, and try out templates and template forms"
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+  ), content);
+}
+
+const Router = (props) => {
+  const {
+    components: {
+      TemplateCardComponent,
+      TaskPageComponent = OngoingTask,
+      ReviewStepComponent,
+      EXPERIMENTAL_TemplateOutputsComponent: TemplateOutputsComponent,
+      EXPERIMENTAL_TemplateListPageComponent: TemplateListPageComponent = TemplateListPage,
+      EXPERIMENTAL_TemplateWizardPageComponent: TemplateWizardPageComponent = TemplateWizardPage
+    } = {}
+  } = props;
+  const outlet = useOutlet() || props.children;
+  const customFieldExtensions = useCustomFieldExtensions(outlet);
+  const fieldExtensions = [
+    ...customFieldExtensions,
+    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
+      ({ name }) => !customFieldExtensions.some(
+        (customFieldExtension) => customFieldExtension.name === name
+      )
+    )
+  ];
+  const customLayouts = useCustomLayouts(outlet);
+  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: "/",
+      element: /* @__PURE__ */ React.createElement(
+        TemplateListPageComponent,
+        {
+          TemplateCardComponent,
+          contextMenu: props.contextMenu,
+          groups: props.groups,
+          templateFilter: props.templateFilter,
+          headerOptions: props.headerOptions
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: selectedTemplateRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplateWizardPageComponent,
+        {
+          headerOptions: props.headerOptions,
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts,
+          components: { ReviewStepComponent },
+          formProps: props.formProps
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: scaffolderTaskRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(
+        TaskPageComponent,
+        {
+          TemplateOutputsComponent
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: editRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplateEditorPage,
+        {
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(Route, { path: actionsRouteRef.path, element: /* @__PURE__ */ React.createElement(ActionsPage, null) }), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: scaffolderListTaskRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(ListTasksPage, null)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: "*",
+      element: /* @__PURE__ */ React.createElement(ErrorPage, { status: "404", statusMessage: "Page not found" })
+    }
+  ));
+};
+
+export { Router };
+//# sourceMappingURL=index-7840abd4.esm.js.map