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

package/dist/esm/index-38156f16.esm.js

@@ -1,876 +0,0 @@
-import React, { useCallback, useState, useMemo, Component } from 'react';
-import { Link, useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router-dom';
-import { useTemplateSecrets, scaffolderApiRef, useCustomFieldExtensions, useCustomLayouts, SecretsContextProvider } from '@backstage/plugin-scaffolder-react';
-import { u as useDryRun, a as useDirectoryEditor, D as DirectoryEditorProvider, b as DryRunProvider, T as TemplateEditorBrowser, c as TemplateEditorTextArea, d as DryRunResults, e as TemplateEditorIntro, W as WebFileSystemAccess, f as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS, A as ActionsPage, L as ListTasksPage } from './DryRunResults-c0cd5eb5.esm.js';
-import { u as registerComponentRouteRef, p as editRouteRef, q as actionsRouteRef, t as scaffolderListTaskRouteRef, v as viewTechDocRouteRef, o as selectedTemplateRouteRef, r as rootRouteRef, w as scaffolderTaskRouteRef, e as OngoingTask } from './OngoingTask-87c6761c.esm.js';
-import { DocsIcon, Page, Header, Content, ContentHeader, SupportButton, ErrorPage } from '@backstage/core-components';
-import { useRouteRef, useApp, useApi, useRouteRefParams, AnalyticsContext, useApiHolder, alertApiRef } from '@backstage/core-plugin-api';
-import { EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import { ScaffolderPageContextMenu, TemplateCategoryPicker, TemplateGroups, Workflow, createAsyncValidators, Stepper, Form } from '@backstage/plugin-scaffolder-react/alpha';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
-import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
-import { usePermission } from '@backstage/plugin-permission-react';
-import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
-import { StreamLanguage } from '@codemirror/language';
-import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
-import { makeStyles as makeStyles$1, FormControl, InputLabel, Select, MenuItem, IconButton as IconButton$1, Card, CardHeader, CardContent, Button as Button$1, LinearProgress } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import CodeMirror from '@uiw/react-codemirror';
-import yaml from 'yaml';
-import { makeStyles } from '@material-ui/core/styles';
-import useDebounce from 'react-use/lib/useDebounce';
-import validator from '@rjsf/validator-ajv8';
-import useAsync from 'react-use/lib/useAsync';
-import 'classnames';
-import '@material-ui/icons/ExpandMore';
-import '@material-ui/icons/ExpandLess';
-import '@material-ui/core/Chip';
-import '@material-ui/icons/Settings';
-import '@material-ui/icons/FontDownload';
-import 'luxon';
-import 'humanize-duration';
-import '@material-ui/core/Typography';
-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';
-import '@material-ui/icons/Refresh';
-import '@material-ui/icons/Save';
-import '@codemirror/view';
-import '@react-hookz/web';
-import '@material-ui/core/Accordion';
-import '@material-ui/core/AccordionDetails';
-import '@material-ui/core/AccordionSummary';
-import '@material-ui/core/Divider';
-import '@material-ui/core/List';
-import '@material-ui/core/ListItem';
-import '@material-ui/core/ListItemIcon';
-import '@material-ui/core/ListItemSecondaryAction';
-import '@material-ui/core/ListItemText';
-import '@material-ui/icons/Cancel';
-import '@material-ui/icons/Check';
-import '@material-ui/icons/Delete';
-import '@material-ui/icons/GetApp';
-import '@material-ui/core/Box';
-import '@material-ui/core/Tab';
-import '@material-ui/core/Tabs';
-import '@material-ui/lab/TreeView';
-import '@material-ui/icons/ChevronRight';
-import '@material-ui/lab/TreeItem';
-import '@material-ui/icons/Language';
-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 'qs';
-import 'react-use/lib/useInterval';
-import '@backstage/integration-react';
-import '@backstage/errors';
-import 'zen-observable';
-import 'event-source-polyfill';
-import '@backstage/catalog-client';
-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/lab';
-import 'lodash/capitalize';
-import '@material-ui/icons/CheckBox';
-import '@material-ui/icons/CheckBoxOutlineBlank';
-import '@material-ui/icons/Repeat';
-import '@material-ui/icons/Toc';
-import '@material-ui/icons/ControlPoint';
-import '@material-ui/icons/MoreVert';
-
-const RegisterExistingButton = (props) => {
-  const { title, to } = props;
-  const { allowed } = usePermission({
-    permission: catalogEntityCreatePermission
-  });
-  const isXSScreen = useMediaQuery(
-    (theme) => theme.breakpoints.down("xs")
-  );
-  if (!to || !allowed) {
-    return null;
-  }
-  return isXSScreen ? /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      component: Link,
-      color: "primary",
-      title,
-      size: "small",
-      to
-    },
-    /* @__PURE__ */ React.createElement(AddCircleOutline, null)
-  ) : /* @__PURE__ */ React.createElement(Button, { component: Link, variant: "contained", color: "primary", to }, title);
-};
-
-const defaultGroup = {
-  title: "Templates",
-  filter: () => true
-};
-const createGroupsWithOther = (groups) => [
-  ...groups,
-  {
-    title: "Other Templates",
-    filter: (e) => ![...groups].some(({ filter }) => filter(e))
-  }
-];
-const TemplateListPage = (props) => {
-  var _a, _b, _c;
-  const registerComponentLink = useRouteRef(registerComponentRouteRef);
-  const {
-    TemplateCardComponent,
-    groups: givenGroups = [],
-    templateFilter,
-    headerOptions
-  } = props;
-  const navigate = useNavigate();
-  const editorLink = useRouteRef(editRouteRef);
-  const actionsLink = useRouteRef(actionsRouteRef);
-  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
-  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);
-  const templateRoute = useRouteRef(selectedTemplateRouteRef);
-  const app = useApp();
-  const groups = givenGroups.length ? createGroupsWithOther(givenGroups) : [defaultGroup];
-  const scaffolderPageContextMenuProps = {
-    onEditorClicked: ((_a = props == null ? void 0 : props.contextMenu) == null ? void 0 : _a.editor) !== false ? () => navigate(editorLink()) : void 0,
-    onActionsClicked: ((_b = props == null ? void 0 : props.contextMenu) == null ? void 0 : _b.actions) !== false ? () => navigate(actionsLink()) : void 0,
-    onTasksClicked: ((_c = props == null ? void 0 : props.contextMenu) == null ? void 0 : _c.tasks) !== false ? () => navigate(tasksLink()) : void 0
-  };
-  const additionalLinksForEntity = useCallback(
-    (template) => {
-      var _a2, _b2;
-      const { kind, namespace, name } = parseEntityRef(
-        stringifyEntityRef(template)
-      );
-      return ((_a2 = template.metadata.annotations) == null ? void 0 : _a2["backstage.io/techdocs-ref"]) && viewTechDocsLink ? [
-        {
-          icon: (_b2 = app.getSystemIcon("docs")) != null ? _b2 : DocsIcon,
-          text: "View TechDocs",
-          url: viewTechDocsLink({ kind, namespace, name })
-        }
-      ] : [];
-    },
-    [app, viewTechDocsLink]
-  );
-  const onTemplateSelected = useCallback(
-    (template) => {
-      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));
-      navigate(templateRoute({ namespace, templateName: name }));
-    },
-    [navigate, templateRoute]
-  );
-  return /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      pageTitleOverride: "Create a new component",
-      title: "Create a new component",
-      subtitle: "Create new software components using standard templates in your organization",
-      ...headerOptions
-    },
-    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
-  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Available Templates" }, /* @__PURE__ */ React.createElement(
-    RegisterExistingButton,
-    {
-      title: "Register Existing Component",
-      to: registerComponentLink && registerComponentLink()
-    }
-  ), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, { initialFilter: "template", hidden: true }), /* @__PURE__ */ React.createElement(
-    UserListPicker,
-    {
-      initialFilter: "all",
-      availableFilters: ["all", "starred"]
-    }
-  ), /* @__PURE__ */ React.createElement(TemplateCategoryPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(
-    TemplateGroups,
-    {
-      groups,
-      templateFilter,
-      TemplateCardComponent,
-      onTemplateSelected,
-      additionalLinksForEntity
-    }
-  ))))));
-};
-
-const TemplateWizardPage = (props) => {
-  const rootRef = useRouteRef(rootRouteRef);
-  const taskRoute = useRouteRef(scaffolderTaskRouteRef);
-  const { secrets } = useTemplateSecrets();
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const navigate = useNavigate();
-  const { templateName, namespace } = useRouteRefParams(
-    selectedTemplateRouteRef
-  );
-  const templateRef = stringifyEntityRef({
-    kind: "Template",
-    namespace,
-    name: templateName
-  });
-  const onCreate = async (values) => {
-    const { taskId } = await scaffolderApi.scaffold({
-      templateRef,
-      values,
-      secrets
-    });
-    navigate(taskRoute({ taskId }));
-  };
-  const onError = () => /* @__PURE__ */ React.createElement(Navigate, { to: rootRef() });
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      pageTitleOverride: "Create a new component",
-      title: "Create a new component",
-      subtitle: "Create new software components using standard templates in your organization",
-      ...props.headerOptions
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Workflow,
-    {
-      namespace,
-      templateName,
-      onCreate,
-      components: props.components,
-      onError,
-      extensions: props.customFieldExtensions,
-      formProps: props.formProps,
-      layouts: props.layouts
-    }
-  )));
-};
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-const useStyles$3 = makeStyles({
-  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);
-    __publicField(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,
-    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.parseAllDocuments(content).filter((c) => c).map((c) => c.toJSON())[0];
-        if (!isJsonObject(parsed)) {
-          setSteps(void 0);
-          return;
-        }
-        let rootObj = parsed;
-        if (!contentIsSpec) {
-          const isTemplate = String(parsed.kind).toLocaleLowerCase("en-US") === "template";
-          if (!isTemplate) {
-            setSteps(void 0);
-            return;
-          }
-          rootObj = isJsonObject(parsed.spec) ? parsed.spec : {};
-        }
-        const { parameters } = rootObj;
-        if (!Array.isArray(parameters)) {
-          setErrorText("Template parameters must be an array");
-          setSteps(void 0);
-          return;
-        }
-        const fieldValidators = Object.fromEntries(
-          fieldExtensions.map(({ name, validation }) => [name, validation])
-        );
-        setErrorText();
-        setSteps(
-          parameters.flatMap(
-            (param) => isJsonObject(param) ? [
-              {
-                title: String(param.title),
-                schema: param,
-                validate: createAsyncValidators(param, fieldValidators, {
-                  apiHolder
-                })
-              }
-            ] : []
-          )
-        );
-      } catch (e) {
-        setErrorText(e.message);
-      }
-    },
-    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(
-    Stepper,
-    {
-      manifest: { steps, title: "Template Editor" },
-      extensions: fieldExtensions,
-      components: fields,
-      onCreate: async (options) => {
-        await (onDryRun == null ? void 0 : onDryRun(options));
-      },
-      layouts
-    }
-  ))));
-}
-function TemplateEditorFormDirectoryEditorDryRun(props) {
-  const { setErrorText, fieldExtensions = [], layouts } = props;
-  const dryRun = useDryRun();
-  const directoryEditor = useDirectoryEditor();
-  const { selectedFile } = directoryEditor;
-  const handleDryRun = async (data) => {
-    if (!selectedFile) {
-      return;
-    }
-    try {
-      await dryRun.execute({
-        templateContent: selectedFile.content,
-        values: data,
-        files: directoryEditor.files
-      });
-      setErrorText();
-    } catch (e) {
-      setErrorText(String(e.cause || e));
-      throw e;
-    }
-  };
-  const content = selectedFile && selectedFile.path.match(/\.ya?ml$/) ? selectedFile.content : void 0;
-  return /* @__PURE__ */ React.createElement(
-    TemplateEditorForm,
-    {
-      onDryRun: handleDryRun,
-      fieldExtensions,
-      setErrorText,
-      content,
-      layouts
-    }
-  );
-}
-TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
-
-const useStyles$2 = makeStyles$1((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 [refreshKey, setRefreshKey] = useState(Date.now());
-  const sampleFieldTemplate = useMemo(
-    () => {
-      var _a2, _b2;
-      return yaml.stringify({
-        parameters: [
-          {
-            title: `${selectedField.name} Example`,
-            properties: {
-              [selectedField.name]: {
-                type: (_b2 = (_a2 = selectedField.schema) == null ? void 0 : _a2.returnValue) == null ? void 0 : _b2.type,
-                "ui:field": selectedField.name,
-                "ui:options": fieldFormState
-              }
-            }
-          }
-        ]
-      });
-    },
-    [fieldFormState, selectedField]
-  );
-  const fieldComponents = useMemo(() => {
-    return Object.fromEntries(
-      customFieldExtensions.map(({ name, component }) => [name, component])
-    );
-  }, [customFieldExtensions]);
-  const handleSelectionChange = useCallback(
-    (selection) => {
-      setSelectedField(selection);
-      setFieldFormState({});
-    },
-    [setFieldFormState, setSelectedField]
-  );
-  const handleFieldConfigChange = useCallback(
-    (state) => {
-      setFieldFormState(state);
-      setRefreshKey(Date.now());
-    },
-    [setFieldFormState, setRefreshKey]
-  );
-  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-field-label" }, "Choose Custom Field Extension"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      value: selectedField,
-      label: "Choose Custom Field Extension",
-      labelId: "select-field-label",
-      onChange: (e) => handleSelectionChange(e.target.value)
-    },
-    fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option }, option.name))
-  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Field Options" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-    Form,
-    {
-      showErrorList: false,
-      fields: { ...fieldComponents },
-      noHtml5Validate: true,
-      formData: fieldFormState,
-      formContext: { fieldFormState },
-      onSubmit: (e) => handleFieldConfigChange(e.formData),
-      validator,
-      schema: ((_a = selectedField.schema) == null ? void 0 : _a.uiOptions) || {},
-      experimental_defaultFormStateBehavior: {
-        allOf: "populateDefaults"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Button$1,
-      {
-        variant: "contained",
-        color: "primary",
-        type: "submit",
-        disabled: !((_b = selectedField.schema) == null ? void 0 : _b.uiOptions)
-      },
-      "Apply"
-    )
-  )))), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Example Template Spec" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      readOnly: true,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml$1)],
-      value: sampleFieldTemplate
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    TemplateEditorForm,
-    {
-      key: refreshKey,
-      content: sampleFieldTemplate,
-      contentIsSpec: true,
-      fieldExtensions: customFieldExtensions,
-      setErrorText: () => null
-    }
-  )));
-};
-
-const useStyles$1 = makeStyles$1({
-  // 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$1((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 { loading } = useAsync(
-    () => catalogApi.getEntities({
-      filter: { kind: "template" },
-      fields: [
-        "kind",
-        "metadata.namespace",
-        "metadata.name",
-        "metadata.title",
-        "spec.parameters",
-        "spec.steps",
-        "spec.output"
-      ]
-    }).then(
-      ({ items }) => setTemplateOptions(
-        items.map((template) => {
-          var _a;
-          return {
-            label: (_a = template.metadata.title) != null ? _a : humanizeEntityRef(template, { defaultKind: "template" }),
-            value: template
-          };
-        })
-      )
-    ).catch(
-      (e) => alertApi.post({
-        message: `Error loading exisiting templates: ${e.message}`,
-        severity: "error"
-      })
-    ),
-    [catalogApi]
-  );
-  const handleSelectChange = useCallback(
-    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types
-    (selected) => {
-      setSelectedTemplate(selected);
-      setTemplateYaml(yaml.stringify(selected.spec));
-    },
-    [setTemplateYaml]
-  );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-template-label" }, "Load Existing Template"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      value: selectedTemplate,
-      label: "Load Existing Template",
-      labelId: "select-template-label",
-      onChange: (e) => handleSelectChange(e.target.value)
-    },
-    templateOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option.value }, option.label))
-  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
-    TemplateEditorTextArea,
-    {
-      content: templateYaml,
-      onUpdate: setTemplateYaml,
-      errorText
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(
-    TemplateEditorForm,
-    {
-      content: templateYaml,
-      contentIsSpec: true,
-      fieldExtensions: customFieldExtensions,
-      setErrorText,
-      layouts
-    }
-  ))));
-};
-
-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 {
-    components: {
-      TemplateCardComponent,
-      TaskPageComponent = OngoingTask,
-      ReviewStepComponent,
-      EXPERIMENTAL_TemplateOutputsComponent: TemplateOutputsComponent,
-      EXPERIMENTAL_TemplateListPageComponent: TemplateListPageComponent = TemplateListPage,
-      EXPERIMENTAL_TemplateWizardPageComponent: TemplateWizardPageComponent = TemplateWizardPage
-    } = {}
-  } = props;
-  const outlet = useOutlet() || props.children;
-  const customFieldExtensions = useCustomFieldExtensions(outlet);
-  const fieldExtensions = [
-    ...customFieldExtensions,
-    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
-      ({ name }) => !customFieldExtensions.some(
-        (customFieldExtension) => customFieldExtension.name === name
-      )
-    )
-  ];
-  const customLayouts = useCustomLayouts(outlet);
-  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      path: "/",
-      element: /* @__PURE__ */ React.createElement(
-        TemplateListPageComponent,
-        {
-          TemplateCardComponent,
-          contextMenu: props.contextMenu,
-          groups: props.groups,
-          templateFilter: props.templateFilter,
-          headerOptions: props.headerOptions
-        }
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      path: selectedTemplateRouteRef.path,
-      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
-        TemplateWizardPageComponent,
-        {
-          headerOptions: props.headerOptions,
-          customFieldExtensions: fieldExtensions,
-          layouts: customLayouts,
-          components: { ReviewStepComponent },
-          formProps: props.formProps
-        }
-      ))
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      path: scaffolderTaskRouteRef.path,
-      element: /* @__PURE__ */ React.createElement(
-        TaskPageComponent,
-        {
-          TemplateOutputsComponent
-        }
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      path: editRouteRef.path,
-      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
-        TemplateEditorPage,
-        {
-          customFieldExtensions: fieldExtensions,
-          layouts: customLayouts
-        }
-      ))
-    }
-  ), /* @__PURE__ */ React.createElement(Route, { path: actionsRouteRef.path, element: /* @__PURE__ */ React.createElement(ActionsPage, null) }), /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      path: scaffolderListTaskRouteRef.path,
-      element: /* @__PURE__ */ React.createElement(ListTasksPage, null)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      path: "*",
-      element: /* @__PURE__ */ React.createElement(ErrorPage, { status: "404", statusMessage: "Page not found" })
-    }
-  ));
-};
-
-export { Router };
-//# sourceMappingURL=index-38156f16.esm.js.map