@backstage/plugin-scaffolder 1.11.0 → 1.11.1-next.0

package/dist/esm/alpha/Router-0b12a83d.esm.js

@@ -0,0 +1,1563 @@
+import React, { useState, useCallback, useMemo, Component, useEffect } from 'react';
+import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router-dom';
+import { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard } from '@backstage/core-components';
+import { useApp, useRouteRef, useApi, alertApiRef, useRouteRefParams, useAnalytics, errorApiRef, featureFlagsApiRef, useApiHolder, AnalyticsContext } from '@backstage/core-plugin-api';
+import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, useEntityTypeFilter, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+import { RELATION_OWNED_BY, parseEntityRef, stringifyEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, FormControlLabel, Checkbox, TextField, Paper, Button as Button$1, Stepper, Step, StepLabel, StepContent, LinearProgress, FormControl, InputLabel, Select, MenuItem as MenuItem$1, CardHeader } 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';
+import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, c as scaffolderTaskRouteRef, d as rootRouteRef, u as useDryRun, f as useDirectoryEditor, D as DirectoryEditorProvider, g as DryRunProvider, T as TemplateEditorBrowser, h as TemplateEditorTextArea, i as DryRunResults, j as TemplateEditorIntro, W as WebFileSystemAccess, l as legacySelectedTemplateRouteRef, A as ActionsPage, k as TaskPage } from './alpha-d9ed6c0a.esm.js';
+import capitalize from 'lodash/capitalize';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Autocomplete } from '@material-ui/lab';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import { usePermission } from '@backstage/plugin-permission-react';
+import IconButton$1 from '@material-ui/core/IconButton';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import Popover from '@material-ui/core/Popover';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import Description from '@material-ui/icons/Description';
+import Edit from '@material-ui/icons/Edit';
+import List from '@material-ui/icons/List';
+import MoreVert from '@material-ui/icons/MoreVert';
+import qs from 'qs';
+import useAsync from 'react-use/lib/useAsync';
+import { useTemplateSecrets, scaffolderApiRef, useCustomFieldExtensions, useCustomLayouts, SecretsContextProvider } from '@backstage/plugin-scaffolder-react';
+import { withTheme } from '@rjsf/core';
+import { Theme } from '@rjsf/material-ui';
+import cloneDeep from 'lodash/cloneDeep';
+import { extractSchemaFromStep } from '@backstage/plugin-scaffolder-react/alpha';
+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 { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS, L as ListTasksPage } from './ListTasksPage-5aa6305b.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 '@material-ui/core/FormHelperText';
+import '@material-ui/core/Input';
+import '@material-ui/core/InputLabel';
+import 'react-use/lib/useEffectOnce';
+import '@material-ui/core/Button';
+import '@material-ui/core/useMediaQuery';
+import '@material-ui/icons/AddCircleOutline';
+import 'use-immer';
+import '@material-ui/icons/RemoveCircleOutline';
+import '@material-ui/icons/PanoramaFishEye';
+import 'classnames';
+import '@material-ui/icons/CheckCircleOutline';
+import '@material-ui/icons/ErrorOutline';
+import 'react-use/lib/useInterval';
+import 'luxon';
+import 'humanize-duration';
+import '@react-hookz/web';
+import '@material-ui/icons/Repeat';
+import '@material-ui/icons/Toc';
+import '@material-ui/icons/Settings';
+import '@material-ui/icons/FontDownload';
+import '@material-ui/core/Typography';
+import '@rjsf/validator-ajv8';
+import '@material-ui/core/Accordion';
+import '@material-ui/core/AccordionDetails';
+import '@material-ui/core/AccordionSummary';
+import '@material-ui/core/Divider';
+import '@material-ui/icons/ExpandLess';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemSecondaryAction';
+import '@material-ui/icons/Cancel';
+import '@material-ui/icons/Check';
+import '@material-ui/icons/Delete';
+import '@material-ui/core/Box';
+import '@material-ui/core/Tab';
+import '@material-ui/core/Tabs';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Step';
+import '@material-ui/core/StepLabel';
+import '@material-ui/core/Stepper';
+import '@material-ui/icons/FiberManualRecord';
+import '@material-ui/lab/TreeView';
+import '@material-ui/icons/ChevronRight';
+import '@material-ui/lab/TreeItem';
+import '@material-ui/icons/Refresh';
+import '@material-ui/icons/Save';
+import '@codemirror/view';
+import '@material-ui/core/Card';
+import '@material-ui/core/CardActionArea';
+import '@material-ui/core/CardContent';
+import '@material-ui/core/Tooltip';
+import '@material-ui/icons/InfoOutlined';
+
+const useStyles$5 = makeStyles((theme) => ({
+  cardHeader: {
+    position: "relative"
+  },
+  title: {
+    backgroundImage: ({ backgroundImage }) => backgroundImage
+  },
+  box: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    "-webkit-line-clamp": 10,
+    "-webkit-box-orient": "vertical"
+  },
+  label: {
+    color: theme.palette.text.secondary,
+    textTransform: "uppercase",
+    fontSize: "0.65rem",
+    fontWeight: "bold",
+    letterSpacing: 0.5,
+    lineHeight: 1,
+    paddingBottom: "0.2rem"
+  },
+  linksLabel: {
+    padding: "0 16px"
+  },
+  description: {
+    "& p": {
+      margin: "0px"
+    }
+  },
+  leftButton: {
+    marginRight: "auto"
+  },
+  starButton: {
+    position: "absolute",
+    top: theme.spacing(0.5),
+    right: theme.spacing(0.5),
+    padding: "0.25rem",
+    color: "#fff"
+  }
+}));
+const MuiIcon = ({ icon: Icon }) => /* @__PURE__ */ React.createElement(Icon, null);
+const useDeprecationStyles = makeStyles((theme) => ({
+  deprecationIcon: {
+    position: "absolute",
+    top: theme.spacing(0.5),
+    right: theme.spacing(3.5),
+    padding: "0.25rem"
+  },
+  link: {
+    color: theme.palette.warning.light
+  }
+}));
+const getTemplateCardProps = (template) => {
+  var _a, _b, _c, _d, _e, _f;
+  return {
+    key: template.metadata.uid,
+    name: template.metadata.name,
+    title: `${(_a = template.metadata.title || template.metadata.name) != null ? _a : ""}`,
+    type: (_b = template.spec.type) != null ? _b : "",
+    description: (_c = template.metadata.description) != null ? _c : "-",
+    tags: (_e = (_d = template.metadata) == null ? void 0 : _d.tags) != null ? _e : [],
+    links: (_f = template.metadata.links) != null ? _f : []
+  };
+};
+const DeprecationWarning = () => {
+  const styles = useDeprecationStyles();
+  const Title = /* @__PURE__ */ React.createElement(Typography, { style: { padding: 10, maxWidth: 300 } }, "This template uses a syntax that has been deprecated, and should be migrated to a newer syntax. Click for more info.");
+  return /* @__PURE__ */ React.createElement("div", { className: styles.deprecationIcon }, /* @__PURE__ */ React.createElement(Tooltip, { title: Title }, /* @__PURE__ */ React.createElement(
+    Link,
+    {
+      to: "https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3",
+      className: styles.link
+    },
+    /* @__PURE__ */ React.createElement(WarningIcon, null)
+  )));
+};
+const TemplateCard = ({ template, deprecated }) => {
+  var _a, _b, _c;
+  const app = useApp();
+  const backstageTheme = useTheme();
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
+  const templateProps = getTemplateCardProps(template);
+  const ownedByRelations = getEntityRelations(
+    template,
+    RELATION_OWNED_BY
+  );
+  const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type }) ? templateProps.type : "other";
+  const theme = backstageTheme.getPageTheme({ themeId });
+  const classes = useStyles$5({ backgroundImage: theme.backgroundImage });
+  const { name, namespace } = parseEntityRef(stringifyEntityRef(template));
+  const href = templateRoute({ templateName: name, namespace });
+  const viewTechDoc = useRouteRef(viewTechDocRouteRef);
+  const viewTechDocsAnnotation = (_a = template.metadata.annotations) == null ? void 0 : _a["backstage.io/techdocs-ref"];
+  const viewTechDocsLink = !!viewTechDocsAnnotation && !!viewTechDoc && viewTechDoc({
+    namespace: template.metadata.namespace || DEFAULT_NAMESPACE,
+    kind: template.kind,
+    name: template.metadata.name
+  });
+  const iconResolver = (key) => {
+    var _a2;
+    return key ? (_a2 = app.getSystemIcon(key)) != null ? _a2 : LanguageIcon : LanguageIcon;
+  };
+  const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
+  const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi);
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardMedia, { className: classes.cardHeader }, /* @__PURE__ */ React.createElement(FavoriteEntity, { className: classes.starButton, entity: template }), deprecated && /* @__PURE__ */ React.createElement(DeprecationWarning, null), /* @__PURE__ */ React.createElement(
+    ItemCardHeader,
+    {
+      title: templateProps.title,
+      subtitle: templateProps.type,
+      classes: { root: classes.title }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    CardContent,
+    {
+      style: { display: "flex", flexDirection: "column", gap: "16px" }
+    },
+    /* @__PURE__ */ React.createElement(Box, { className: classes.box }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.label }, "Description"), /* @__PURE__ */ React.createElement(
+      MarkdownContent,
+      {
+        className: classes.description,
+        content: templateProps.description
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Box, { className: classes.box }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.label }, "Owner"), /* @__PURE__ */ React.createElement(EntityRefLinks, { entityRefs: ownedByRelations, defaultKind: "Group" })),
+    /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        style: { marginBottom: "4px" },
+        variant: "body2",
+        className: classes.label
+      },
+      "Tags"
+    ), (_b = templateProps.tags) == null ? void 0 : _b.map((tag) => /* @__PURE__ */ React.createElement(Chip, { size: "small", label: tag, key: tag })))
+  ), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "body2",
+      className: [classes.label, classes.linksLabel].join(" ")
+    },
+    "Links"
+  ), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement("div", { className: classes.leftButton }, sourceLocation && /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: sourceLocation.integrationType || sourceLocation.locationTargetUrl
+    },
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        className: classes.leftButton,
+        href: sourceLocation.locationTargetUrl
+      },
+      /* @__PURE__ */ React.createElement(ScmIntegrationIcon, { type: sourceLocation.integrationType })
+    )
+  ), viewTechDocsLink && /* @__PURE__ */ React.createElement(Tooltip, { title: "View TechDocs" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      className: classes.leftButton,
+      href: viewTechDocsLink
+    },
+    /* @__PURE__ */ React.createElement(MuiIcon, { icon: iconResolver("docs") })
+  )), (_c = templateProps.links) == null ? void 0 : _c.map((link, i) => /* @__PURE__ */ React.createElement(Tooltip, { key: `${link.url}_${i}`, title: link.title || link.url }, /* @__PURE__ */ React.createElement(IconButton, { size: "medium", href: link.url }, /* @__PURE__ */ React.createElement(MuiIcon, { icon: iconResolver(link.icon) }))))), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      to: href,
+      "aria-label": `Choose ${templateProps.title}`
+    },
+    "Choose"
+  )));
+};
+
+const TemplateList = ({
+  TemplateCardComponent,
+  group
+}) => {
+  const { loading, error, entities } = useEntityList();
+  const Card = TemplateCardComponent || TemplateCard;
+  const maybeFilteredEntities = group ? entities.filter((e) => group.filter(e)) : entities;
+  const titleComponent = (() => {
+    if (group && group.title) {
+      if (typeof group.title === "string") {
+        return /* @__PURE__ */ React.createElement(ContentHeader, { title: group.title });
+      }
+      return group.title;
+    }
+    return /* @__PURE__ */ React.createElement(ContentHeader, { title: "Other Templates" });
+  })();
+  if (group && maybeFilteredEntities.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(Progress, null), error && /* @__PURE__ */ React.createElement(WarningPanel, { title: "Oops! Something went wrong loading the templates" }, error.message), !error && !loading && !entities.length && /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-templates/adding-templates" }, "adding templates"), "."), /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, maybeFilteredEntities && (maybeFilteredEntities == null ? void 0 : maybeFilteredEntities.length) > 0 && maybeFilteredEntities.map((template) => /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      key: stringifyEntityRef(template),
+      template,
+      deprecated: template.apiVersion === "backstage.io/v1beta2"
+    }
+  )))));
+};
+
+const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+const TemplateTypePicker = () => {
+  const alertApi = useApi(alertApiRef);
+  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
+  if (loading)
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (!availableTypes)
+    return null;
+  if (error) {
+    alertApi.post({
+      message: `Failed to load entity types`,
+      severity: "error"
+    });
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Categories"), /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      multiple: true,
+      "aria-label": "Categories",
+      options: availableTypes,
+      value: selectedTypes,
+      onChange: (_, value) => setSelectedTypes(value),
+      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              icon,
+              checkedIcon,
+              checked: selected
+            }
+          ),
+          label: capitalize(option)
+        }
+      ),
+      size: "small",
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "categories-picker-expand" }),
+      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
+    }
+  ));
+};
+
+const useStyles$4 = makeStyles$1({
+  button: {
+    color: "white"
+  }
+});
+function ScaffolderPageContextMenu(props) {
+  const classes = useStyles$4();
+  const [anchorEl, setAnchorEl] = useState();
+  const editLink = useRouteRef(editRouteRef);
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const navigate = useNavigate();
+  const showEditor = props.editor !== false;
+  const showActions = props.actions !== false;
+  const showTasks = props.tasks !== false;
+  if (!showEditor && !showActions) {
+    return null;
+  }
+  const onOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const onClose = () => {
+    setAnchorEl(void 0);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton$1,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: onOpen,
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      onClose,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList, null, showEditor && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(editLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Template Editor" })), showActions && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(actionsLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Installed Actions" })), showTasks && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(tasksLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
+  ));
+}
+
+const ScaffolderPageContents = ({
+  TemplateCardComponent,
+  groups,
+  contextMenu,
+  headerOptions
+}) => {
+  const registerComponentLink = useRouteRef(registerComponentRouteRef);
+  const otherTemplatesGroup = {
+    title: groups ? "Other Templates" : "Templates",
+    filter: (entity) => {
+      const filtered = (groups != null ? groups : []).map((group) => group.filter(entity));
+      return !filtered.some((result) => result === true);
+    }
+  };
+  const { allowed } = usePermission({
+    permission: catalogEntityCreatePermission
+  });
+  return /* @__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",
+      ...headerOptions
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...contextMenu })
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Available Templates" }, allowed && /* @__PURE__ */ React.createElement(
+    CreateButton,
+    {
+      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(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(
+    TemplateList,
+    {
+      key: index,
+      TemplateCardComponent,
+      group
+    }
+  )), /* @__PURE__ */ React.createElement(
+    TemplateList,
+    {
+      key: "other",
+      TemplateCardComponent,
+      group: otherTemplatesGroup
+    }
+  )))));
+};
+const ScaffolderPage = ({
+  TemplateCardComponent,
+  groups,
+  contextMenu,
+  headerOptions
+}) => /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(
+  ScaffolderPageContents,
+  {
+    TemplateCardComponent,
+    groups,
+    contextMenu,
+    headerOptions
+  }
+));
+
+function isObject$1(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function extractUiSchema(schema, uiSchema) {
+  if (!isObject$1(schema)) {
+    return;
+  }
+  const { properties, items, anyOf, oneOf, allOf, dependencies } = schema;
+  for (const propName in schema) {
+    if (!schema.hasOwnProperty(propName)) {
+      continue;
+    }
+    if (propName.startsWith("ui:")) {
+      uiSchema[propName] = schema[propName];
+      delete schema[propName];
+    }
+  }
+  if (isObject$1(properties)) {
+    for (const propName in properties) {
+      if (!properties.hasOwnProperty(propName)) {
+        continue;
+      }
+      const schemaNode = properties[propName];
+      if (!isObject$1(schemaNode)) {
+        continue;
+      }
+      const innerUiSchema = {};
+      uiSchema[propName] = uiSchema[propName] || innerUiSchema;
+      extractUiSchema(schemaNode, innerUiSchema);
+    }
+  }
+  if (isObject$1(items)) {
+    const innerUiSchema = {};
+    uiSchema.items = innerUiSchema;
+    extractUiSchema(items, innerUiSchema);
+  }
+  if (Array.isArray(anyOf)) {
+    for (const schemaNode of anyOf) {
+      if (!isObject$1(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+  if (Array.isArray(oneOf)) {
+    for (const schemaNode of oneOf) {
+      if (!isObject$1(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+  if (Array.isArray(allOf)) {
+    for (const schemaNode of allOf) {
+      if (!isObject$1(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+  if (isObject$1(dependencies)) {
+    for (const depName of Object.keys(dependencies)) {
+      const schemaNode = dependencies[depName];
+      if (!isObject$1(schemaNode)) {
+        continue;
+      }
+      extractUiSchema(schemaNode, uiSchema);
+    }
+  }
+}
+function transformSchemaToProps(inputSchema, layouts = []) {
+  var _a;
+  const customLayoutName = inputSchema["ui:ObjectFieldTemplate"];
+  inputSchema.type = inputSchema.type || "object";
+  const schema = JSON.parse(JSON.stringify(inputSchema));
+  delete schema.title;
+  const uiSchema = {};
+  extractUiSchema(schema, uiSchema);
+  if (customLayoutName) {
+    const Layout = (_a = layouts.find(
+      (layout) => layout.name === customLayoutName
+    )) == null ? void 0 : _a.component;
+    if (Layout) {
+      uiSchema["ui:ObjectFieldTemplate"] = Layout;
+    }
+  }
+  return { schema, uiSchema };
+}
+
+const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: description, linkTarget: "_blank" });
+
+var fieldOverrides = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DescriptionField: DescriptionField
+});
+
+function getReviewData(formData, uiSchemas) {
+  const reviewData = {};
+  const orderedReviewProperties = new Set(
+    uiSchemas.map((us) => us.name).concat(Object.getOwnPropertyNames(formData))
+  );
+  for (const key of orderedReviewProperties) {
+    const uiSchema = uiSchemas.find((us) => us.name === key);
+    if (!uiSchema) {
+      reviewData[key] = formData[key];
+      continue;
+    }
+    if (uiSchema["ui:widget"] === "password") {
+      reviewData[key] = "******";
+      continue;
+    }
+    if (!uiSchema["ui:backstage"] || !uiSchema["ui:backstage"].review) {
+      reviewData[key] = formData[key];
+      continue;
+    }
+    const review = uiSchema["ui:backstage"].review;
+    if (review.mask) {
+      reviewData[key] = review.mask;
+      continue;
+    }
+    if (!review.show) {
+      continue;
+    }
+    reviewData[key] = formData[key];
+  }
+  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.map(({ mergedSchema }) => ({ schema: mergedSchema }))
+        )
+      )
+    }
+  ), /* @__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,
+    onChange,
+    onReset,
+    onFinish,
+    fields,
+    widgets,
+    layouts,
+    ReviewStepComponent
+  } = props;
+  const { templateName } = useRouteRefParams(selectedTemplateRouteRef);
+  const analytics = useAnalytics();
+  const [activeStep, setActiveStep] = useState(0);
+  const [disableButtons, setDisableButtons] = useState(false);
+  const errorApi = useApi(errorApiRef);
+  const featureFlagApi = useApi(featureFlagsApiRef);
+  const featureFlagKey = "backstage:featureFlag";
+  const filterOutProperties = (step) => {
+    var _a;
+    const filteredStep = cloneDeep(step);
+    const removedPropertyKeys = [];
+    if (filteredStep.schema.properties) {
+      filteredStep.schema.properties = Object.fromEntries(
+        Object.entries(filteredStep.schema.properties).filter(
+          ([key, value]) => {
+            if (value[featureFlagKey]) {
+              if (featureFlagApi.isActive(value[featureFlagKey])) {
+                return true;
+              }
+              removedPropertyKeys.push(key);
+              return false;
+            }
+            return true;
+          }
+        )
+      );
+      filteredStep.schema.required = Array.isArray(filteredStep.schema.required) ? (_a = filteredStep.schema.required) == null ? void 0 : _a.filter(
+        (r) => !removedPropertyKeys.includes(r)
+      ) : filteredStep.schema.required;
+    }
+    return filteredStep;
+  };
+  const steps = props.steps.filter((step) => {
+    const featureFlag = step.schema[featureFlagKey];
+    return typeof featureFlag !== "string" || featureFlagApi.isActive(featureFlag);
+  }).map(filterOutProperties);
+  const handleReset = () => {
+    setActiveStep(0);
+    onReset();
+  };
+  const handleNext = () => {
+    const stepNum = Math.min(activeStep + 1, steps.length);
+    setActiveStep(stepNum);
+    analytics.captureEvent("click", `Next Step (${stepNum})`);
+  };
+  const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
+  const handleCreate = async () => {
+    if (!onFinish) {
+      return;
+    }
+    setDisableButtons(true);
+    try {
+      await onFinish();
+      analytics.captureEvent("create", formData.name || `new ${templateName}`);
+    } catch (err) {
+      errorApi.post(err);
+    } finally {
+      setDisableButtons(false);
+    }
+  };
+  const ReviewStepElement = ReviewStepComponent != null ? ReviewStepComponent : ReviewStep;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper, { activeStep, orientation: "vertical" }, steps.map(({ title, schema, ...formProps }, index) => {
+    return /* @__PURE__ */ React.createElement(Step, { key: title }, /* @__PURE__ */ React.createElement(
+      StepLabel,
+      {
+        "aria-label": `Step ${index + 1} ${title}`,
+        "aria-disabled": "false",
+        tabIndex: 0
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "h6", component: "h3" }, title)
+    ), /* @__PURE__ */ React.createElement(StepContent, { key: title }, /* @__PURE__ */ React.createElement(
+      Form$1,
+      {
+        showErrorList: false,
+        fields: { ...fieldOverrides, ...fields },
+        widgets,
+        noHtml5Validate: true,
+        formData,
+        formContext: { formData },
+        onChange,
+        onSubmit: (e) => {
+          if (e.errors.length === 0)
+            handleNext();
+        },
+        ...formProps,
+        ...transformSchemaToProps(schema, layouts)
+      },
+      /* @__PURE__ */ React.createElement(Button$1, { disabled: activeStep === 0, onClick: handleBack }, "Back"),
+      /* @__PURE__ */ React.createElement(Button$1, { variant: "contained", color: "primary", type: "submit" }, "Next step")
+    )));
+  })), activeStep === steps.length && /* @__PURE__ */ React.createElement(
+    ReviewStepElement,
+    {
+      disableButtons,
+      handleBack,
+      handleCreate,
+      handleReset,
+      formData,
+      steps: getSchemasFromSteps(steps)
+    }
+  ));
+};
+
+function isObject(obj) {
+  return typeof obj === "object" && obj !== null && !Array.isArray(obj);
+}
+function isArray(obj) {
+  return typeof obj === "object" && obj !== null && Array.isArray(obj);
+}
+const createValidator = (rootSchema, validators, context) => {
+  function validate(schema, formData, errors) {
+    const schemaProps = schema.properties;
+    const customObject = schema.type === "object" && schemaProps === void 0;
+    if (!isObject(schemaProps) && !customObject) {
+      return;
+    }
+    if (schemaProps) {
+      for (const [key, propData] of Object.entries(formData)) {
+        const propValidation = errors[key];
+        const propSchemaProps = schemaProps[key];
+        if (isObject(propData)) {
+          if (isObject(propSchemaProps)) {
+            validate(
+              propSchemaProps,
+              propData,
+              propValidation
+            );
+          }
+        } else if (isArray(propData)) {
+          if (isObject(propSchemaProps)) {
+            const { items } = propSchemaProps;
+            if (isObject(items)) {
+              const fieldName = items["ui:field"];
+              if (fieldName && typeof validators[fieldName] === "function") {
+                validators[fieldName](
+                  propData,
+                  propValidation,
+                  context
+                );
+              }
+            }
+          }
+        } else {
+          const fieldName = isObject(propSchemaProps) && propSchemaProps["ui:field"];
+          if (fieldName && typeof validators[fieldName] === "function") {
+            validators[fieldName](
+              propData,
+              propValidation,
+              context
+            );
+          }
+        }
+      }
+    } else if (customObject) {
+      const fieldName = schema["ui:field"];
+      if (fieldName && typeof validators[fieldName] === "function") {
+        validators[fieldName](formData, errors, context);
+      }
+    }
+  }
+  return (formData, errors) => {
+    validate(rootSchema, formData, errors);
+    return errors;
+  };
+};
+
+const useTemplateParameterSchema = (templateRef) => {
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const { value, loading, error } = useAsync(
+    () => scaffolderApi.getTemplateParameterSchema(templateRef),
+    [scaffolderApi, templateRef]
+  );
+  return { schema: value, loading, error };
+};
+const TemplatePage = ({
+  ReviewStepComponent,
+  customFieldExtensions = [],
+  layouts = [],
+  headerOptions
+}) => {
+  const apiHolder = useApiHolder();
+  const secretsContext = useTemplateSecrets();
+  const errorApi = useApi(errorApiRef);
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const { templateName, namespace } = useRouteRefParams(
+    selectedTemplateRouteRef
+  );
+  const templateRef = stringifyEntityRef({
+    name: templateName,
+    kind: "template",
+    namespace
+  });
+  const navigate = useNavigate();
+  const scaffolderTaskRoute = useRouteRef(scaffolderTaskRouteRef);
+  const rootRoute = useRouteRef(rootRouteRef);
+  const { schema, loading, error } = useTemplateParameterSchema(templateRef);
+  const [formState, setFormState] = useState(() => {
+    var _a;
+    const query = qs.parse(window.location.search, {
+      ignoreQueryPrefix: true
+    });
+    try {
+      return JSON.parse(query.formData);
+    } catch (e) {
+      return (_a = query.formData) != null ? _a : {};
+    }
+  });
+  const handleFormReset = () => setFormState({});
+  const handleChange = useCallback(
+    (e) => setFormState(e.formData),
+    [setFormState]
+  );
+  const handleCreate = async () => {
+    var _a;
+    const { taskId } = await scaffolderApi.scaffold({
+      templateRef,
+      values: formState,
+      secrets: secretsContext == null ? void 0 : secretsContext.secrets
+    });
+    const formParams = qs.stringify(
+      { formData: formState },
+      { addQueryPrefix: true }
+    );
+    const newUrl = `${window.location.pathname}${formParams}`;
+    (_a = window.history) == null ? void 0 : _a.replaceState(null, document.title, newUrl);
+    navigate(scaffolderTaskRoute({ taskId }));
+  };
+  if (error) {
+    errorApi.post(new Error(`Failed to load template, ${error}`));
+    return /* @__PURE__ */ React.createElement(Navigate, { to: rootRoute() });
+  }
+  if (!loading && !schema) {
+    errorApi.post(new Error("Template was not found."));
+    return /* @__PURE__ */ React.createElement(Navigate, { to: rootRoute() });
+  }
+  const customFieldComponents = Object.fromEntries(
+    customFieldExtensions.map(({ name, component }) => [name, component])
+  );
+  const customFieldValidators = Object.fromEntries(
+    customFieldExtensions.map(({ name, validation }) => [name, validation])
+  );
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__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",
+      ...headerOptions
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, { "data-testid": "loading-progress" }), schema && /* @__PURE__ */ React.createElement(
+    InfoCard,
+    {
+      title: schema.title,
+      noPadding: true,
+      titleTypographyProps: { component: "h2" }
+    },
+    /* @__PURE__ */ React.createElement(
+      MultistepJsonForm,
+      {
+        ReviewStepComponent,
+        formData: formState,
+        fields: customFieldComponents,
+        onChange: handleChange,
+        onReset: handleFormReset,
+        onFinish: handleCreate,
+        layouts,
+        steps: schema.steps.map((step) => {
+          return {
+            ...step,
+            validate: createValidator(
+              step.schema,
+              customFieldValidators,
+              { apiHolder }
+            )
+          };
+        })
+      }
+    )
+  ))));
+};
+
+const useStyles$3 = 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$3();
+  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$2 = 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$2();
+  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$1 = 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$1();
+  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 = 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();
+  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 [formState, setFormState] = useState({});
+  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(
+    (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$1, { key: idx, value: option.value }, option.label))
+  )), /* @__PURE__ */ React.createElement(IconButton, { 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,
+      data: formState,
+      onUpdate: setFormState,
+      setErrorText,
+      layouts
+    }
+  ))));
+};
+
+function TemplateEditorPage(props) {
+  const [selection, setSelection] = useState();
+  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"
+    }
+  ), content);
+}
+
+const Router = (props) => {
+  const { groups, components = {}, defaultPreviewTemplate } = props;
+  const { ReviewStepComponent, TemplateCardComponent, TaskPageComponent } = components;
+  const outlet = useOutlet();
+  const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
+  const customFieldExtensions = useCustomFieldExtensions(outlet);
+  const fieldExtensions = [
+    ...customFieldExtensions,
+    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
+      ({ name }) => !customFieldExtensions.some(
+        (customFieldExtension) => customFieldExtension.name === name
+      )
+    )
+  ];
+  const customLayouts = useCustomLayouts(outlet);
+  const RedirectingComponent = () => {
+    const { templateName } = useRouteRefParams(legacySelectedTemplateRouteRef);
+    const newLink = useRouteRef(selectedTemplateRouteRef);
+    useEffect(
+      () => (
+        // eslint-disable-next-line no-console
+        console.warn(
+          "The route /template/:templateName is deprecated, please use the new /template/:namespace/:templateName route instead"
+        )
+      ),
+      []
+    );
+    return /* @__PURE__ */ React.createElement(Navigate, { to: newLink({ namespace: "default", templateName }) });
+  };
+  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: "/",
+      element: /* @__PURE__ */ React.createElement(
+        ScaffolderPage,
+        {
+          groups,
+          TemplateCardComponent,
+          contextMenu: props.contextMenu,
+          headerOptions: props.headerOptions
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: legacySelectedTemplateRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(RedirectingComponent, null)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: selectedTemplateRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplatePage,
+        {
+          ReviewStepComponent,
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts,
+          headerOptions: props.headerOptions
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: scaffolderListTaskRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(ListTasksPage, null)
+    }
+  ), /* @__PURE__ */ React.createElement(Route, { path: scaffolderTaskRouteRef.path, element: /* @__PURE__ */ React.createElement(TaskPageElement, null) }), /* @__PURE__ */ React.createElement(Route, { path: actionsRouteRef.path, element: /* @__PURE__ */ React.createElement(ActionsPage, null) }), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: editRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplateEditorPage,
+        {
+          defaultPreviewTemplate,
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(Route, { path: "preview", element: /* @__PURE__ */ React.createElement(Navigate, { to: "../edit" }) }));
+};
+
+export { Router };
+//# sourceMappingURL=Router-0b12a83d.esm.js.map