@backstage/plugin-scaffolder 1.12.0 → 1.13.0-next.1

package/dist/esm/alpha/Router-2826a2b8.esm.js

@@ -1,1566 +0,0 @@
-import React, { useState, useCallback, useMemo, Component, useEffect } from 'react';
-import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router-dom';
-import { ItemCardHeader, MarkdownContent, LinkButton, 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, 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-714dad1b.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-2e8f4176.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 '@material-ui/icons/Repeat';
-import '@material-ui/icons/Toc';
-import 'classnames';
-import '@material-ui/icons/Settings';
-import '@material-ui/icons/FontDownload';
-import 'luxon';
-import 'humanize-duration';
-import '@material-ui/core/Typography';
-import '@react-hookz/web';
-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 'react-use/lib/useInterval';
-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,
-    color: ({ fontColor }) => fontColor
-  },
-  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: theme.palette.common.white
-  }
-}));
-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({
-    fontColor: theme.fontColor,
-    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(
-    LinkButton,
-    {
-      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((theme) => ({
-  button: {
-    color: theme.page.fontColor
-  }
-}));
-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, { onClick: handleBack, disabled: disableButtons }, "Back"), /* @__PURE__ */ React.createElement(Button, { onClick: handleReset, disabled: disableButtons }, "Reset"), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      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, { disabled: activeStep === 0, onClick: handleBack }, "Back"),
-      /* @__PURE__ */ React.createElement(Button, { 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) {
-    var _a;
-    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 doValidate = (item) => {
-          if (item && isObject(item)) {
-            const fieldName = item["ui:field"];
-            if (fieldName && typeof validators[fieldName] === "function") {
-              validators[fieldName](
-                propData,
-                propValidation,
-                context
-              );
-            }
-          }
-        };
-        const propSchemaProps = schemaProps[key];
-        if (isObject(propData) && isObject(propSchemaProps)) {
-          validate(
-            propSchemaProps,
-            propData,
-            propValidation
-          );
-        } else if (isArray(propData)) {
-          if (isObject(propSchemaProps)) {
-            const { items } = propSchemaProps;
-            if (isObject(items)) {
-              if (items.type === "object") {
-                const properties = (_a = items == null ? void 0 : items.properties) != null ? _a : [];
-                for (const [, value] of Object.entries(properties)) {
-                  doValidate(value);
-                }
-              } else {
-                doValidate(items);
-              }
-            }
-          }
-        } else {
-          doValidate(propSchemaProps);
-        }
-      }
-    } 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,
-      {
-        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-2826a2b8.esm.js.map