@backstage/plugin-scaffolder 1.15.1 → 1.16.0-next.0

package/dist/esm/{Router-f5f81642.esm.js → Router-b60d8000.esm.js}

@@ -9,8 +9,7 @@ import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Ch
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import LanguageIcon from '@material-ui/icons/Language';
 import WarningIcon from '@material-ui/icons/Warning';
-import { n as selectedTemplateRouteRef, v as viewTechDocRouteRef, p as editRouteRef, q as actionsRouteRef, t as scaffolderListTaskRouteRef, u as registerComponentRouteRef, o as scaffolderTaskRouteRef, r as rootRouteRef, w as legacySelectedTemplateRouteRef } from './plugin-76d8b756.esm.js';
-import { T as TemplateTypePicker } from './TemplateTypePicker-efec8c34.esm.js';
+import { o as selectedTemplateRouteRef, v as viewTechDocRouteRef, p as editRouteRef, q as actionsRouteRef, t as scaffolderListTaskRouteRef, u as registerComponentRouteRef, T as TemplateTypePicker, w as scaffolderTaskRouteRef, r as rootRouteRef, x as legacySelectedTemplateRouteRef } from './OngoingTask-8acb140b.esm.js';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { usePermission } from '@backstage/plugin-permission-react';
 import IconButton$1 from '@material-ui/core/IconButton';
@@ -24,21 +23,22 @@ import Description from '@material-ui/icons/Description';
 import Edit from '@material-ui/icons/Edit';
 import List from '@material-ui/icons/List';
 import MoreVert from '@material-ui/icons/MoreVert';
+import 'zod-to-json-schema';
 import qs from 'qs';
 import useAsync from 'react-use/lib/useAsync';
 import { useTemplateSecrets, scaffolderApiRef, useCustomFieldExtensions, useCustomLayouts, SecretsContextProvider } from '@backstage/plugin-scaffolder-react';
 import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
 import cloneDeep from 'lodash/cloneDeep';
-import { extractSchemaFromStep } from '@backstage/plugin-scaffolder-react/alpha';
-import { T as TaskPage } from './TaskPage-d1a669e0.esm.js';
-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, L as ListTasksPage, A as ActionsPage } from './ListTasksPage-b7beed35.esm.js';
+import validator from '@rjsf/validator-ajv8';
+import { extractSchemaFromStep, Form as Form$1 } from '@backstage/plugin-scaffolder-react/alpha';
+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, L as ListTasksPage, A as ActionsPage, g as TaskPage } from './DryRunResults-a4d44358.esm.js';
+import useDebounce from 'react-use/lib/useDebounce';
+import yaml from 'yaml';
+import CloseIcon from '@material-ui/icons/Close';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
-import CloseIcon from '@material-ui/icons/Close';
 import CodeMirror from '@uiw/react-codemirror';
-import yaml from 'yaml';
-import useDebounce from 'react-use/lib/useDebounce';
 import '@backstage/errors';
 import 'zen-observable';
 import 'event-source-polyfill';
@@ -46,7 +46,6 @@ 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';
@@ -56,46 +55,49 @@ 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 '@react-hookz/web';
 import '@material-ui/icons/Cancel';
-import '@material-ui/icons/Check';
-import '@material-ui/icons/FiberManualRecord';
+import '@material-ui/icons/Repeat';
+import '@material-ui/icons/Toc';
+import '@material-ui/icons/ControlPoint';
 import 'classnames';
-import 'luxon';
-import 'react-use/lib/useInterval';
 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 '@material-ui/core/Accordion';
 import '@material-ui/core/AccordionDetails';
 import '@material-ui/core/AccordionSummary';
 import '@material-ui/core/Divider';
-import '@react-hookz/web';
 import '@material-ui/core/List';
 import '@material-ui/core/ListItem';
 import '@material-ui/core/ListItemSecondaryAction';
+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/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';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Step';
+import '@material-ui/core/StepLabel';
+import '@material-ui/core/Stepper';
+import '@material-ui/icons/FiberManualRecord';
+import 'react-use/lib/useInterval';
 
 const useStyles$5 = makeStyles((theme) => ({
   cardHeader: {
@@ -605,7 +607,7 @@ const ReviewStep = (props) => {
   )));
 };
 
-const Form$1 = withTheme(Theme);
+const Form = withTheme(Theme);
 function getSchemasFromSteps(steps) {
   return steps.map(({ schema }) => ({
     mergedSchema: schema,
@@ -694,8 +696,9 @@ const MultistepJsonForm = (props) => {
       },
       /* @__PURE__ */ React.createElement(Typography, { variant: "h6", component: "h2" }, title)
     ), /* @__PURE__ */ React.createElement(StepContent, { key: title }, /* @__PURE__ */ React.createElement(
-      Form$1,
+      Form,
       {
+        validator,
         showErrorList: false,
         fields: { ...fieldOverrides, ...fields },
         widgets,
@@ -1077,138 +1080,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
 }
 TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
 
-const Form = withTheme(Theme);
-const useStyles$2 = makeStyles((theme) => ({
-  root: {
-    gridArea: "pageContent",
-    display: "grid",
-    gridTemplateAreas: `
-      "controls controls"
-      "fieldForm preview"
-    `,
-    gridTemplateRows: "auto 1fr",
-    gridTemplateColumns: "1fr 1fr"
-  },
-  controls: {
-    gridArea: "controls",
-    display: "flex",
-    flexFlow: "row nowrap",
-    alignItems: "center",
-    margin: theme.spacing(1)
-  },
-  fieldForm: {
-    gridArea: "fieldForm"
-  },
-  preview: {
-    gridArea: "preview"
-  }
-}));
-const CustomFieldExplorer = ({
-  customFieldExtensions = [],
-  onClose
-}) => {
-  var _a, _b;
-  const classes = useStyles$2();
-  const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
-  const [selectedField, setSelectedField] = useState(fieldOptions[0]);
-  const [fieldFormState, setFieldFormState] = useState({});
-  const [formState, setFormState] = useState({});
-  const [refreshKey, setRefreshKey] = useState(Date.now());
-  const sampleFieldTemplate = useMemo(
-    () => {
-      var _a2, _b2;
-      return yaml.stringify({
-        parameters: [
-          {
-            title: `${selectedField.name} Example`,
-            properties: {
-              [selectedField.name]: {
-                type: (_b2 = (_a2 = selectedField.schema) == null ? void 0 : _a2.returnValue) == null ? void 0 : _b2.type,
-                "ui:field": selectedField.name,
-                "ui:options": fieldFormState
-              }
-            }
-          }
-        ]
-      });
-    },
-    [fieldFormState, selectedField]
-  );
-  const fieldComponents = useMemo(() => {
-    return Object.fromEntries(
-      customFieldExtensions.map(({ name, component }) => [name, component])
-    );
-  }, [customFieldExtensions]);
-  const handleSelectionChange = useCallback(
-    (selection) => {
-      setSelectedField(selection);
-      setFieldFormState({});
-      setFormState({});
-    },
-    [setFieldFormState, setFormState, setSelectedField]
-  );
-  const handleFieldConfigChange = useCallback(
-    (state) => {
-      setFieldFormState(state);
-      setFormState({});
-      setRefreshKey(Date.now());
-    },
-    [setFieldFormState, setRefreshKey]
-  );
-  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-field-label" }, "Choose Custom Field Extension"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      value: selectedField,
-      label: "Choose Custom Field Extension",
-      labelId: "select-field-label",
-      onChange: (e) => handleSelectionChange(e.target.value)
-    },
-    fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem$1, { key: idx, value: option }, option.name))
-  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose, "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: { ...fieldOverrides, ...fieldComponents },
-      noHtml5Validate: true,
-      formData: fieldFormState,
-      formContext: { fieldFormState },
-      onSubmit: (e) => handleFieldConfigChange(e.formData),
-      schema: ((_a = selectedField.schema) == null ? void 0 : _a.uiOptions) || {}
-    },
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        type: "submit",
-        disabled: !((_b = selectedField.schema) == null ? void 0 : _b.uiOptions)
-      },
-      "Apply"
-    )
-  )))), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Example Template Spec" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      readOnly: true,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml$1)],
-      value: sampleFieldTemplate
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    TemplateEditorForm,
-    {
-      key: refreshKey,
-      content: sampleFieldTemplate,
-      contentIsSpec: true,
-      fieldExtensions: customFieldExtensions,
-      data: formState,
-      onUpdate: setFormState,
-      setErrorText: () => null
-    }
-  )));
-};
-
-const useStyles$1 = makeStyles({
+const useStyles$2 = makeStyles({
   // Reset and fix sizing to make sure scrolling behaves correctly
   root: {
     gridArea: "pageContent",
@@ -1237,7 +1109,7 @@ const useStyles$1 = makeStyles({
   }
 });
 const TemplateEditor = (props) => {
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   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,
@@ -1287,7 +1159,7 @@ steps:
       values:
         name: \${{parameters.name}}
 `;
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   root: {
     gridArea: "pageContent",
     display: "grid",
@@ -1318,7 +1190,7 @@ const TemplateFormPreviewer = ({
   onClose,
   layouts = []
 }) => {
-  const classes = useStyles();
+  const classes = useStyles$1();
   const alertApi = useApi(alertApiRef);
   const catalogApi = useApi(catalogApiRef);
   const [selectedTemplate, setSelectedTemplate] = useState("");
@@ -1373,7 +1245,7 @@ const TemplateFormPreviewer = ({
       onChange: (e) => handleSelectChange(e.target.value)
     },
     templateOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem$1, { key: idx, value: option.value }, option.label))
-  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
     TemplateEditorTextArea,
     {
       content: templateYaml,
@@ -1383,17 +1255,149 @@ const TemplateFormPreviewer = ({
   )), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(
     TemplateEditorForm,
     {
+      data: formState,
+      onUpdate: setFormState,
       content: templateYaml,
       contentIsSpec: true,
       fieldExtensions: customFieldExtensions,
-      data: formState,
-      onUpdate: setFormState,
       setErrorText,
       layouts
     }
   ))));
 };
 
+const useStyles = 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();
+  const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
+  const [selectedField, setSelectedField] = useState(fieldOptions[0]);
+  const [fieldFormState, setFieldFormState] = useState({});
+  const [refreshKey, setRefreshKey] = useState(Date.now());
+  const [formState, setFormState] = useState({});
+  const sampleFieldTemplate = useMemo(
+    () => {
+      var _a2, _b2;
+      return yaml.stringify({
+        parameters: [
+          {
+            title: `${selectedField.name} Example`,
+            properties: {
+              [selectedField.name]: {
+                type: (_b2 = (_a2 = selectedField.schema) == null ? void 0 : _a2.returnValue) == null ? void 0 : _b2.type,
+                "ui:field": selectedField.name,
+                "ui:options": fieldFormState
+              }
+            }
+          }
+        ]
+      });
+    },
+    [fieldFormState, selectedField]
+  );
+  const fieldComponents = useMemo(() => {
+    return Object.fromEntries(
+      customFieldExtensions.map(({ name, component }) => [name, component])
+    );
+  }, [customFieldExtensions]);
+  const handleSelectionChange = useCallback(
+    (selection) => {
+      setSelectedField(selection);
+      setFieldFormState({});
+      setFormState({});
+    },
+    [setFieldFormState, setSelectedField, setFormState]
+  );
+  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$1, { key: idx, value: option }, option.name))
+  )), /* @__PURE__ */ React.createElement(IconButton, { 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$1,
+    {
+      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,
+      {
+        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,
+    {
+      data: formState,
+      onUpdate: setFormState,
+      key: refreshKey,
+      content: sampleFieldTemplate,
+      contentIsSpec: true,
+      fieldExtensions: customFieldExtensions,
+      setErrorText: () => null
+    }
+  )));
+};
+
 function TemplateEditorPage(props) {
   const [selection, setSelection] = useState();
   let content = null;
@@ -1451,7 +1455,7 @@ function TemplateEditorPage(props) {
   ), content);
 }
 
-const Router = (props) => {
+const LegacyRouter = (props) => {
   const {
     groups,
     templateFilter,
@@ -1542,5 +1546,5 @@ const Router = (props) => {
   ), /* @__PURE__ */ React.createElement(Route, { path: "preview", element: /* @__PURE__ */ React.createElement(Navigate, { to: "../edit" }) }));
 };
 
-export { Router };
-//# sourceMappingURL=Router-f5f81642.esm.js.map
+export { LegacyRouter };
+//# sourceMappingURL=Router-b60d8000.esm.js.map