@backstage/plugin-scaffolder 1.12.0-next.2 → 1.13.0-next.0

package/dist/esm/index/index-e3edaa49.esm.js

@@ -0,0 +1,991 @@
+import React, { useCallback, useState, useMemo, useEffect, Component } from 'react';
+import { Link, useNavigate, Navigate, useParams, useOutlet, Routes, Route } from 'react-router-dom';
+import { useRouteRef, useApp, useApi, useRouteRefParams, AnalyticsContext, useApiHolder, alertApiRef } from '@backstage/core-plugin-api';
+import { DocsIcon, Page, Header, Content, ContentHeader, SupportButton, ErrorPanel, ErrorPage } from '@backstage/core-components';
+import { EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+import { ScaffolderPageContextMenu, TemplateCategoryPicker, TemplateGroups, Workflow, DefaultTemplateOutputs, TaskSteps, TaskLogStream, 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 { r as registerComponentRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, v as viewTechDocRouteRef, s as selectedTemplateRouteRef, d as rootRouteRef, c as scaffolderTaskRouteRef } from './index-8321766a.esm.js';
+import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
+import { useTemplateSecrets, scaffolderApiRef, useTaskEventStream, 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 './ListTasksPage-64779a2d.esm.js';
+import { makeStyles, IconButton as IconButton$1, Popover, MenuList, MenuItem, ListItemIcon, ListItemText, Box, Paper, FormControl, InputLabel, Select, Card, CardHeader, CardContent, Button as Button$1, LinearProgress } from '@material-ui/core';
+import qs from 'qs';
+import { useAsync } from '@react-hookz/web';
+import Cancel from '@material-ui/icons/Cancel';
+import Retry from '@material-ui/icons/Repeat';
+import Toc from '@material-ui/icons/Toc';
+import MoreVert from '@material-ui/icons/MoreVert';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import CloseIcon from '@material-ui/icons/Close';
+import CodeMirror from '@uiw/react-codemirror';
+import yaml from 'yaml';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import useDebounce from 'react-use/lib/useDebounce';
+import validator from '@rjsf/validator-ajv8';
+import useAsync$1 from 'react-use/lib/useAsync';
+import '@backstage/errors';
+import 'zen-observable';
+import '@backstage/integration-react';
+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/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/Check';
+import '@material-ui/icons/FiberManualRecord';
+import 'classnames';
+import 'luxon';
+import 'react-use/lib/useInterval';
+import '@material-ui/icons/Language';
+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/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/ListItemIcon';
+import '@material-ui/core/ListItemSecondaryAction';
+import '@material-ui/core/ListItemText';
+import '@material-ui/icons/Delete';
+import '@material-ui/core/Box';
+import '@material-ui/core/Tab';
+import '@material-ui/core/Tabs';
+import '@material-ui/icons/Refresh';
+import '@material-ui/icons/Save';
+import '@material-ui/lab/TreeView';
+import '@material-ui/icons/ChevronRight';
+import '@material-ui/lab/TreeItem';
+import '@codemirror/view';
+import '@material-ui/icons/Settings';
+import '@material-ui/icons/FontDownload';
+import 'humanize-duration';
+
+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
+  } = 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: "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"
+    },
+    /* @__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"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Workflow,
+    {
+      namespace,
+      templateName,
+      onCreate,
+      onError,
+      extensions: props.customFieldExtensions,
+      FormProps: props.FormProps,
+      layouts: props.layouts
+    }
+  )));
+};
+
+const useStyles$5 = makeStyles((theme) => ({
+  button: {
+    color: theme.palette.common.white
+  }
+}));
+const ContextMenu = (props) => {
+  const { cancelEnabled, logsVisible, onStartOver, onToggleLogs, taskId } = props;
+  const classes = useStyles$5();
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const [anchorEl, setAnchorEl] = useState();
+  const [{ status: cancelStatus }, { execute: cancel }] = useAsync(async () => {
+    if (taskId) {
+      await scaffolderApi.cancelTask(taskId);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton$1,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: (event) => {
+        setAnchorEl(event.currentTarget);
+      },
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      onClose: () => setAnchorEl(void 0),
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList, null, /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => onToggleLogs == null ? void 0 : onToggleLogs(!logsVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Toc, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: logsVisible ? "Hide Logs" : "Show Logs" })), /* @__PURE__ */ React.createElement(MenuItem, { onClick: onStartOver }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Retry, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Start Over" })), /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        onClick: cancel,
+        disabled: !cancelEnabled || cancelStatus !== "not-executed",
+        "data-testid": "cancel-task"
+      },
+      /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Cancel, { fontSize: "small" })),
+      /* @__PURE__ */ React.createElement(ListItemText, { primary: "Cancel" })
+    ))
+  ));
+};
+
+const useStyles$4 = makeStyles({
+  contentWrapper: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+const OngoingTask = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { taskId } = useParams();
+  const templateRouteRef = useRouteRef(selectedTemplateRouteRef);
+  const navigate = useNavigate();
+  const taskStream = useTaskEventStream(taskId);
+  const classes = useStyles$4();
+  const steps = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = taskStream.task) == null ? void 0 : _a2.spec.steps.map((step) => {
+        var _a3;
+        return {
+          ...step,
+          ...(_a3 = taskStream == null ? void 0 : taskStream.steps) == null ? void 0 : _a3[step.id]
+        };
+      })) != null ? _b2 : [];
+    },
+    [taskStream]
+  );
+  const [logsVisible, setLogVisibleState] = useState(false);
+  useEffect(() => {
+    if (taskStream.error) {
+      setLogVisibleState(true);
+    }
+  }, [taskStream.error]);
+  const activeStep = useMemo(() => {
+    for (let i = steps.length - 1; i >= 0; i--) {
+      if (steps[i].status !== "open") {
+        return i;
+      }
+    }
+    return 0;
+  }, [steps]);
+  const startOver = useCallback(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    const { namespace, name } = (_d2 = (_c2 = (_b2 = (_a2 = taskStream.task) == null ? void 0 : _a2.spec.templateInfo) == null ? void 0 : _b2.entity) == null ? void 0 : _c2.metadata) != null ? _d2 : {};
+    const formData = (_f2 = (_e2 = taskStream.task) == null ? void 0 : _e2.spec.parameters) != null ? _f2 : {};
+    if (!namespace || !name) {
+      return;
+    }
+    navigate({
+      pathname: templateRouteRef({
+        namespace,
+        templateName: name
+      }),
+      search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`
+    });
+  }, [
+    navigate,
+    (_a = taskStream.task) == null ? void 0 : _a.spec.parameters,
+    (_d = (_c = (_b = taskStream.task) == null ? void 0 : _b.spec.templateInfo) == null ? void 0 : _c.entity) == null ? void 0 : _d.metadata,
+    templateRouteRef
+  ]);
+  const Outputs = (_e = props.TemplateOutputsComponent) != null ? _e : DefaultTemplateOutputs;
+  const templateName = (_h = (_g = (_f = taskStream.task) == null ? void 0 : _f.spec.templateInfo) == null ? void 0 : _g.entity) == null ? void 0 : _h.metadata.name;
+  const cancelEnabled = !(taskStream.cancelled || taskStream.completed);
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: `Run of ${templateName}`,
+      title: /* @__PURE__ */ React.createElement("div", null, "Run of ", /* @__PURE__ */ React.createElement("code", null, templateName)),
+      subtitle: `Task ${taskId}`
+    },
+    /* @__PURE__ */ React.createElement(
+      ContextMenu,
+      {
+        cancelEnabled,
+        logsVisible,
+        onStartOver: startOver,
+        onToggleLogs: setLogVisibleState,
+        taskId
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(Content, { className: classes.contentWrapper }, taskStream.error ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(
+    ErrorPanel,
+    {
+      error: taskStream.error,
+      title: taskStream.error.message
+    }
+  )) : null, /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(
+    TaskSteps,
+    {
+      steps,
+      activeStep,
+      isComplete: taskStream.completed,
+      isError: Boolean(taskStream.error)
+    }
+  )), /* @__PURE__ */ React.createElement(Outputs, { output: taskStream.output }), logsVisible ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2, height: "100%" }, /* @__PURE__ */ React.createElement(Paper, { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(Box, { padding: 2, height: "100%" }, /* @__PURE__ */ React.createElement(TaskLogStream, { logs: taskStream.stepLogs })))) : null));
+};
+
+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,
+    onDryRun,
+    setErrorText,
+    fieldExtensions = [],
+    layouts = []
+  } = props;
+  const classes = useStyles$3();
+  const apiHolder = useApiHolder();
+  const [steps, setSteps] = useState();
+  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;
+        }
+        setErrorText();
+        setSteps(
+          parameters.flatMap(
+            (param) => isJsonObject(param) ? [
+              {
+                title: String(param.title),
+                schema: param
+              }
+            ] : []
+          )
+        );
+      } 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,
+      onCreate: async (data) => {
+        await (onDryRun == null ? void 0 : onDryRun(data));
+      },
+      layouts,
+      components: { createButtonText: onDryRun && "Try It" }
+    }
+  ))));
+}
+function TemplateEditorFormDirectoryEditorDryRun(props) {
+  const { setErrorText, fieldExtensions = [], layouts } = props;
+  const dryRun = useDryRun();
+  const directoryEditor = useDirectoryEditor();
+  const { selectedFile } = directoryEditor;
+  const handleDryRun = async (values) => {
+    if (!selectedFile) {
+      return;
+    }
+    try {
+      await dryRun.execute({
+        templateContent: selectedFile.content,
+        values,
+        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((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 }, /* @__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) || {}
+    },
+    /* @__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({
+  // 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 { loading } = useAsync$1(
+    () => 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, { 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,
+      TemplateOutputsComponent,
+      TaskPageComponent = OngoingTask,
+      TemplateListPageComponent = TemplateListPage,
+      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
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: selectedTemplateRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplateWizardPageComponent,
+        {
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts,
+          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-e3edaa49.esm.js.map