@backstage/plugin-scaffolder 1.3.0-next.0 → 1.3.0

package/dist/esm/Router-980d33c1.esm.js

@@ -1,1014 +0,0 @@
-import React, { useState, useContext, useCallback } from 'react';
-import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router';
-import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage } from '@backstage/core-components';
-import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
-import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import { s as selectedTemplateRouteRef, r as rootRouteRef, a as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, b as scaffolderApiRef, c as scaffolderTaskRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, d as FIELD_EXTENSION_KEY, e as SecretsContextProvider, f as actionsRouteRef, g as editRouteRef, h as TaskPage } from './index-9dc0f892.esm.js';
-import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
-import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Grid, FormControl, InputLabel, Select, MenuItem as MenuItem$1 } from '@material-ui/core';
-import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
-import WarningIcon from '@material-ui/icons/Warning';
-import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
-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 MoreVert from '@material-ui/icons/MoreVert';
-import qs from 'qs';
-import { useParams } from 'react-router-dom';
-import useAsync from 'react-use/lib/useAsync';
-import { withTheme } from '@rjsf/core';
-import { Theme } from '@rjsf/material-ui';
-import cloneDeep from 'lodash/cloneDeep';
-import classNames from 'classnames';
-import useDebounce from 'react-use/lib/useDebounce';
-import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
-import { showPanel } from '@codemirror/view';
-import { StreamLanguage } from '@codemirror/language';
-import CodeMirror from '@uiw/react-codemirror';
-import yaml from 'yaml';
-import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-fb4a2845.esm.js';
-import '@backstage/errors';
-import 'zen-observable';
-import '@material-ui/core/FormControl';
-import '@material-ui/lab/Autocomplete';
-import 'react-use/lib/useEffectOnce';
-import '@material-ui/lab';
-import '@material-ui/core/FormHelperText';
-import '@material-ui/core/Input';
-import '@material-ui/core/InputLabel';
-import 'lodash/capitalize';
-import '@material-ui/icons/CheckBox';
-import '@material-ui/icons/CheckBoxOutlineBlank';
-import '@material-ui/icons/ExpandMore';
-import '@material-ui/core/Grid';
-import '@material-ui/core/Step';
-import '@material-ui/core/StepLabel';
-import '@material-ui/core/Stepper';
-import '@material-ui/core/Typography';
-import '@material-ui/icons/Cancel';
-import '@material-ui/icons/Check';
-import '@material-ui/icons/FiberManualRecord';
-import 'luxon';
-import 'react-use/lib/useInterval';
-import 'use-immer';
-import '@material-ui/icons/Language';
-
-const useStyles$3 = 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",
-    paddingBottom: "0.8em"
-  },
-  label: {
-    color: theme.palette.text.secondary,
-    textTransform: "uppercase",
-    fontSize: "0.65rem",
-    fontWeight: "bold",
-    letterSpacing: 0.5,
-    lineHeight: 1,
-    paddingBottom: "0.2rem"
-  },
-  leftButton: {
-    marginRight: "auto"
-  },
-  starButton: {
-    position: "absolute",
-    top: theme.spacing(0.5),
-    right: theme.spacing(0.5),
-    padding: "0.25rem",
-    color: "#fff"
-  }
-}));
-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;
-  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 : []
-  };
-};
-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, {
-    href: "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;
-  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$3({ backgroundImage: theme.backgroundImage });
-  const href = templateRoute({ templateName: templateProps.name });
-  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: "grid" }
-  }, /* @__PURE__ */ React.createElement(Box, {
-    className: classes.box
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "body2",
-    className: classes.label
-  }, "Description"), /* @__PURE__ */ React.createElement(MarkdownContent, {
-    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, {
-    variant: "body2",
-    className: classes.label
-  }, "Tags"), (_a = templateProps.tags) == null ? void 0 : _a.map((tag) => /* @__PURE__ */ React.createElement(Chip, {
-    size: "small",
-    label: tag,
-    key: tag
-  })))), /* @__PURE__ */ React.createElement(CardActions, null, sourceLocation && /* @__PURE__ */ React.createElement(IconButton, {
-    className: classes.leftButton,
-    href: sourceLocation.locationTargetUrl
-  }, /* @__PURE__ */ React.createElement(ScmIntegrationIcon, {
-    type: sourceLocation.integrationType
-  })), /* @__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$1, {
-    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 useStyles$2 = makeStyles$1({
-  button: {
-    color: "white"
-  }
-});
-function ScaffolderPageContextMenu(props) {
-  const classes = useStyles$2();
-  const [anchorEl, setAnchorEl] = useState();
-  const pageLink = useRouteRef(rootRouteRef);
-  const navigate = useNavigate();
-  const showEditor = props.editor !== false;
-  const showActions = props.actions !== 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(`${pageLink()}/edit`)
-  }, /* @__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(`${pageLink()}/actions`)
-  }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, {
-    fontSize: "small"
-  })), /* @__PURE__ */ React.createElement(ListItemText, {
-    primary: "Installed Actions"
-  })))));
-}
-
-const ScaffolderPageContents = ({
-  TemplateCardComponent,
-  groups,
-  contextMenu
-}) => {
-  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"
-  }, /* @__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
-}) => /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(ScaffolderPageContents, {
-  TemplateCardComponent,
-  groups
-}));
-
-function isObject$1(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function extractUiSchema(schema, uiSchema) {
-  if (!isObject$1(schema)) {
-    return;
-  }
-  const { properties, items, anyOf, oneOf, allOf, dependencies } = schema;
-  for (const propName in schema) {
-    if (!schema.hasOwnProperty(propName)) {
-      continue;
-    }
-    if (propName.startsWith("ui:")) {
-      uiSchema[propName] = schema[propName];
-      delete schema[propName];
-    }
-  }
-  if (isObject$1(properties)) {
-    for (const propName in properties) {
-      if (!properties.hasOwnProperty(propName)) {
-        continue;
-      }
-      const schemaNode = properties[propName];
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      const innerUiSchema = {};
-      uiSchema[propName] = innerUiSchema;
-      extractUiSchema(schemaNode, innerUiSchema);
-    }
-  }
-  if (isObject$1(items)) {
-    const innerUiSchema = {};
-    uiSchema.items = innerUiSchema;
-    extractUiSchema(items, innerUiSchema);
-  }
-  if (Array.isArray(anyOf)) {
-    for (const schemaNode of anyOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (Array.isArray(oneOf)) {
-    for (const schemaNode of oneOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (Array.isArray(allOf)) {
-    for (const schemaNode of allOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (isObject$1(dependencies)) {
-    for (const depName of Object.keys(dependencies)) {
-      const schemaNode = dependencies[depName];
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-}
-function transformSchemaToProps(inputSchema) {
-  inputSchema.type = inputSchema.type || "object";
-  const schema = JSON.parse(JSON.stringify(inputSchema));
-  delete schema.title;
-  const uiSchema = {};
-  extractUiSchema(schema, uiSchema);
-  return { schema, uiSchema };
-}
-
-const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, {
-  content: description,
-  linkTarget: "_blank"
-});
-
-var fieldOverrides = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DescriptionField: DescriptionField
-});
-
-const Form = withTheme(Theme);
-function getUiSchemasFromSteps(steps) {
-  const uiSchemas = [];
-  steps.forEach((step) => {
-    const schemaProps = step.schema.properties;
-    for (const key in schemaProps) {
-      if (schemaProps.hasOwnProperty(key)) {
-        const uiSchema = schemaProps[key];
-        uiSchema.name = key;
-        uiSchemas.push(uiSchema);
-      }
-    }
-  });
-  return uiSchemas;
-}
-function getReviewData(formData, steps) {
-  const uiSchemas = getUiSchemasFromSteps(steps);
-  const reviewData = {};
-  for (const key in formData) {
-    if (formData.hasOwnProperty(key)) {
-      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.show) {
-        continue;
-      }
-      if (review.mask) {
-        reviewData[key] = review.mask;
-        continue;
-      }
-      reviewData[key] = formData[key];
-    }
-  }
-  return reviewData;
-}
-const MultistepJsonForm = (props) => {
-  const { formData, onChange, onReset, onFinish, fields, widgets } = props;
-  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 = () => {
-    setActiveStep(Math.min(activeStep + 1, steps.length));
-  };
-  const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
-  const handleCreate = async () => {
-    if (!onFinish) {
-      return;
-    }
-    setDisableButtons(true);
-    try {
-      await onFinish();
-    } catch (err) {
-      setDisableButtons(false);
-      errorApi.post(err);
-    }
-  };
-  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, {
-      showErrorList: false,
-      fields: { ...fieldOverrides, ...fields },
-      widgets,
-      noHtml5Validate: true,
-      formData,
-      formContext: { formData },
-      onChange,
-      onSubmit: (e) => {
-        if (e.errors.length === 0)
-          handleNext();
-      },
-      ...formProps,
-      ...transformSchemaToProps(schema)
-    }, /* @__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(Content, null, /* @__PURE__ */ React.createElement(Paper, {
-    square: true,
-    elevation: 0
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "h6"
-  }, "Review and create"), /* @__PURE__ */ React.createElement(StructuredMetadataTable, {
-    dense: true,
-    metadata: getReviewData(formData, steps)
-  }), /* @__PURE__ */ React.createElement(Box, {
-    mb: 4
-  }), /* @__PURE__ */ React.createElement(Button$1, {
-    onClick: handleBack,
-    disabled: disableButtons
-  }, "Back"), /* @__PURE__ */ React.createElement(Button$1, {
-    onClick: handleReset,
-    disabled: disableButtons
-  }, "Reset"), /* @__PURE__ */ React.createElement(Button$1, {
-    variant: "contained",
-    color: "primary",
-    onClick: handleCreate,
-    disabled: !onFinish || disableButtons
-  }, "Create"))));
-};
-
-function isObject(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];
-        if (isObject(propData)) {
-          const propSchemaProps = schemaProps[key];
-          if (isObject(propSchemaProps)) {
-            validate(propSchemaProps, propData, propValidation);
-          }
-        } else {
-          const propSchema = schemaProps[key];
-          const fieldName = isObject(propSchema) && propSchema["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 = ({
-  customFieldExtensions = []
-}) => {
-  const apiHolder = useApiHolder();
-  const secretsContext = useContext(SecretsContext);
-  const errorApi = useApi(errorApiRef);
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const { templateName } = useParams();
-  const navigate = useNavigate();
-  const scaffolderTaskRoute = useRouteRef(scaffolderTaskRouteRef);
-  const rootRoute = useRouteRef(rootRouteRef);
-  const { schema, loading, error } = useTemplateParameterSchema(templateName);
-  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: stringifyEntityRef({
-        name: templateName,
-        kind: "template",
-        namespace: "default"
-      }),
-      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(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"
-  }), /* @__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, {
-    formData: formState,
-    fields: customFieldComponents,
-    onChange: handleChange,
-    onReset: handleFormReset,
-    onFinish: handleCreate,
-    steps: schema.steps.map((step) => {
-      return {
-        ...step,
-        validate: createValidator(step.schema, customFieldValidators, { apiHolder })
-      };
-    })
-  }))));
-};
-
-const useStyles$1 = makeStyles((theme) => ({
-  code: {
-    fontFamily: "Menlo, monospace",
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.type === "dark" ? theme.palette.grey[700] : theme.palette.grey[300],
-    display: "inline-block",
-    borderRadius: 5,
-    border: `1px solid ${theme.palette.grey[500]}`,
-    position: "relative"
-  },
-  codeRequired: {
-    "&::after": {
-      position: "absolute",
-      content: '"*"',
-      top: 0,
-      right: theme.spacing(0.5),
-      fontWeight: "bolder",
-      color: theme.palette.error.light
-    }
-  }
-}));
-const ActionsPage = () => {
-  const api = useApi(scaffolderApiRef);
-  const classes = useStyles$1();
-  const { loading, value, error } = useAsync(async () => {
-    return api.listActions();
-  });
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (error) {
-    return /* @__PURE__ */ React.createElement(ErrorPage, {
-      statusMessage: "Failed to load installed actions",
-      status: "500"
-    });
-  }
-  const formatRows = (input) => {
-    const properties = input.properties;
-    if (!properties) {
-      return void 0;
-    }
-    return Object.entries(properties).map((entry) => {
-      var _a;
-      const [key] = entry;
-      const props = entry[1];
-      const codeClassname = classNames(classes.code, {
-        [classes.codeRequired]: (_a = input.required) == null ? void 0 : _a.includes(key)
-      });
-      return /* @__PURE__ */ React.createElement(TableRow, {
-        key
-      }, /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("div", {
-        className: codeClassname
-      }, key)), /* @__PURE__ */ React.createElement(TableCell, null, props.title), /* @__PURE__ */ React.createElement(TableCell, null, props.description), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("span", {
-        className: classes.code
-      }, props.type)));
-    });
-  };
-  const renderTable = (input) => {
-    if (!input.properties) {
-      return void 0;
-    }
-    return /* @__PURE__ */ React.createElement(TableContainer, {
-      component: Paper
-    }, /* @__PURE__ */ React.createElement(Table, {
-      size: "small"
-    }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, null, "Name"), /* @__PURE__ */ React.createElement(TableCell, null, "Title"), /* @__PURE__ */ React.createElement(TableCell, null, "Description"), /* @__PURE__ */ React.createElement(TableCell, null, "Type"))), /* @__PURE__ */ React.createElement(TableBody, null, formatRows(input))));
-  };
-  const renderTables = (name, input) => {
-    if (!input) {
-      return void 0;
-    }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h6"
-    }, name), input.map((i, index) => /* @__PURE__ */ React.createElement("div", {
-      key: index
-    }, renderTable(i))));
-  };
-  const items = value == null ? void 0 : value.map((action) => {
-    var _a, _b, _c, _d;
-    if (action.id.startsWith("legacy:")) {
-      return void 0;
-    }
-    const oneOf = renderTables("oneOf", (_b = (_a = action.schema) == null ? void 0 : _a.input) == null ? void 0 : _b.oneOf);
-    return /* @__PURE__ */ React.createElement(Box, {
-      pb: 4,
-      key: action.id
-    }, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h4",
-      className: classes.code
-    }, action.id), /* @__PURE__ */ React.createElement(Typography, null, action.description), ((_c = action.schema) == null ? void 0 : _c.input) && /* @__PURE__ */ React.createElement(Box, {
-      pb: 2
-    }, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h5"
-    }, "Input"), renderTable(action.schema.input), oneOf), ((_d = action.schema) == null ? void 0 : _d.output) && /* @__PURE__ */ React.createElement(Box, {
-      pb: 2
-    }, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h5"
-    }, "Output"), renderTable(action.schema.output)));
-  });
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    pageTitleOverride: "Create a New Component",
-    title: "Installed actions",
-    subtitle: "This is the collection of all installed actions"
-  }), /* @__PURE__ */ React.createElement(Content, null, items));
-};
-
-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:
-          allowedKinds:
-            - Group
-  - title: Choose a location
-    required:
-      - repoUrl
-    properties:
-      repoUrl:
-        title: Repository Location
-        type: string
-        ui:field: RepoUrlPicker
-        ui:options:
-          allowedHosts:
-            - github.com
-`;
-const useStyles = makeStyles({
-  templateSelect: {
-    marginBottom: "10px"
-  },
-  grid: {
-    height: "100%"
-  },
-  codeMirror: {
-    height: "95%"
-  }
-});
-const TemplateEditorPage = ({
-  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
-  customFieldExtensions = []
-}) => {
-  const classes = useStyles();
-  const alertApi = useApi(alertApiRef);
-  const catalogApi = useApi(catalogApiRef);
-  const apiHolder = useApiHolder();
-  const [selectedTemplate, setSelectedTemplate] = useState("");
-  const [schema, setSchema] = useState({
-    title: "",
-    steps: []
-  });
-  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"
-    ]
-  }).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 errorPanel = document.createElement("div");
-  errorPanel.style.color = "red";
-  useDebounce(() => {
-    try {
-      const parsedTemplate = yaml.parse(templateYaml);
-      setSchema({
-        title: "Preview",
-        steps: parsedTemplate.parameters.map((param) => ({
-          title: param.title,
-          schema: param
-        }))
-      });
-      setFormState({});
-    } catch (e) {
-      errorPanel.textContent = e.message;
-    }
-  }, 250, [setFormState, setSchema, templateYaml]);
-  const handleSelectChange = useCallback((selected) => {
-    setSelectedTemplate(selected);
-    setTemplateYaml(yaml.stringify(selected.spec));
-  }, [setTemplateYaml]);
-  const handleFormReset = () => setFormState({});
-  const handleFormChange = useCallback((e) => setFormState(e.formData), [setFormState]);
-  const handleCodeChange = useCallback((code) => {
-    setTemplateYaml(code);
-  }, [setTemplateYaml]);
-  const customFieldComponents = Object.fromEntries(customFieldExtensions.map(({ name, component }) => [name, component]));
-  const customFieldValidators = Object.fromEntries(customFieldExtensions.map(({ name, validation }) => [name, validation]));
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    title: "Template Editor",
-    subtitle: "Preview your template parameter UI"
-  }), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement(Grid, {
-    container: true,
-    className: classes.grid
-  }, /* @__PURE__ */ React.createElement(Grid, {
-    item: true,
-    xs: 6
-  }, /* @__PURE__ */ React.createElement(FormControl, {
-    className: classes.templateSelect,
-    variant: "outlined",
-    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(CodeMirror, {
-    className: classes.codeMirror,
-    value: templateYaml,
-    theme: "dark",
-    height: "100%",
-    extensions: [
-      StreamLanguage.define(yaml$1),
-      showPanel.of(() => ({ dom: errorPanel, top: true }))
-    ],
-    onChange: handleCodeChange
-  })), /* @__PURE__ */ React.createElement(Grid, {
-    item: true,
-    xs: 6
-  }, schema && /* @__PURE__ */ React.createElement(InfoCard, {
-    key: JSON.stringify(schema)
-  }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
-    formData: formState,
-    fields: customFieldComponents,
-    onChange: handleFormChange,
-    onReset: handleFormReset,
-    steps: schema.steps.map((step) => {
-      return {
-        ...step,
-        validate: createValidator(step.schema, customFieldValidators, { apiHolder })
-      };
-    })
-  }))))));
-};
-
-const Router = (props) => {
-  const { groups, components = {}, defaultPreviewTemplate } = props;
-  const { TemplateCardComponent, TaskPageComponent } = components;
-  const outlet = useOutlet();
-  const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
-  const customFieldExtensions = useElementFilter(outlet, (elements) => elements.selectByComponentData({
-    key: FIELD_EXTENSION_WRAPPER_KEY
-  }).findComponentData({
-    key: FIELD_EXTENSION_KEY
-  }));
-  const fieldExtensions = [
-    ...customFieldExtensions,
-    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(({ name }) => !customFieldExtensions.some((customFieldExtension) => customFieldExtension.name === name))
-  ];
-  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
-    element: /* @__PURE__ */ React.createElement(ScaffolderPage, {
-      groups,
-      TemplateCardComponent,
-      contextMenu: props.contextMenu
-    })
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: selectedTemplateRouteRef.path,
-    element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePage, {
-      customFieldExtensions: fieldExtensions
-    }))
-  }), /* @__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
-    }))
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: "preview",
-    element: /* @__PURE__ */ React.createElement(Navigate, {
-      to: "../edit"
-    })
-  }));
-};
-
-export { Router };
-//# sourceMappingURL=Router-980d33c1.esm.js.map