@backstage/plugin-scaffolder 1.11.0-next.2 → 1.11.0

package/dist/esm/{Router-e878e04f.esm.js → Router-fae7a62f.esm.js}

@@ -1,14 +1,14 @@
-import React, { useState, useCallback, createContext, useEffect, useContext, useRef, useMemo, Component, Children } from 'react';
+import React, { useState, useCallback, useMemo, Component, useEffect } from 'react';
 import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router-dom';
-import { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPanel, LogViewer } from '@backstage/core-components';
+import { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard } from '@backstage/core-components';
 import { useApp, useRouteRef, useApi, useRouteRefParams, useAnalytics, errorApiRef, featureFlagsApiRef, useApiHolder, AnalyticsContext, alertApiRef } 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 { RELATION_OWNED_BY, parseEntityRef, stringifyEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Paper, Button as Button$1, Stepper, Step, StepLabel, StepContent, LinearProgress, FormControl, InputLabel, Select, MenuItem as MenuItem$1, CardHeader, Divider as Divider$1 } from '@material-ui/core';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Paper, Button as Button$1, Stepper, Step, StepLabel, StepContent, LinearProgress, FormControl, InputLabel, Select, MenuItem as MenuItem$1, CardHeader } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import LanguageIcon from '@material-ui/icons/Language';
 import WarningIcon from '@material-ui/icons/Warning';
-import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, c as scaffolderTaskRouteRef, d as rootRouteRef, f as TaskStatusStepper, g as TaskPageLinks, l as legacySelectedTemplateRouteRef, A as ActionsPage, h as TaskPage } from './index-02b0e824.esm.js';
+import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, c as scaffolderTaskRouteRef, d as rootRouteRef, u as useDryRun, f as useDirectoryEditor, D as DirectoryEditorProvider, g as DryRunProvider, h as TemplateEditorBrowser, i as TemplateEditorTextArea, j as DryRunResults, k as TemplateEditorIntro, W as WebFileSystemAccess, l as legacySelectedTemplateRouteRef, A as ActionsPage, m as TaskPage } from './index-5b3a75fa.esm.js';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { usePermission } from '@backstage/plugin-permission-react';
 import IconButton$1 from '@material-ui/core/IconButton';
@@ -34,36 +34,7 @@ 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 { useAsync as useAsync$1, useRerender, usePrevious, useKeyboardEvent } from '@react-hookz/web';
-import Card$1 from '@material-ui/core/Card';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardContent$1 from '@material-ui/core/CardContent';
-import Tooltip$1 from '@material-ui/core/Tooltip';
-import Typography$1 from '@material-ui/core/Typography';
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import Divider from '@material-ui/core/Divider';
-import ExpandMoreIcon$1 from '@material-ui/icons/ExpandLess';
-import List$1 from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import Cancel from '@material-ui/icons/Cancel';
-import Check from '@material-ui/icons/Check';
-import DeleteIcon from '@material-ui/icons/Delete';
-import Box$1 from '@material-ui/core/Box';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import TreeView from '@material-ui/lab/TreeView';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import TreeItem from '@material-ui/lab/TreeItem';
-import classNames from 'classnames';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import SaveIcon from '@material-ui/icons/Save';
-import { showPanel } from '@codemirror/view';
-import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS, L as ListTasksPage } from './ListTasksPage-6e377096.esm.js';
+import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS, L as ListTasksPage } from './ListTasksPage-a0fe74a9.esm.js';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
@@ -78,28 +49,58 @@ 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/Button';
 import '@material-ui/core/useMediaQuery';
 import '@material-ui/icons/AddCircleOutline';
 import 'use-immer';
 import '@material-ui/icons/RemoveCircleOutline';
 import '@material-ui/icons/PanoramaFishEye';
+import 'classnames';
 import '@material-ui/icons/CheckCircleOutline';
 import '@material-ui/icons/ErrorOutline';
 import 'react-use/lib/useInterval';
 import 'luxon';
 import 'humanize-duration';
+import '@react-hookz/web';
 import '@material-ui/icons/Repeat';
 import '@material-ui/icons/Toc';
 import '@material-ui/icons/Settings';
 import '@material-ui/icons/FontDownload';
+import '@material-ui/core/Typography';
+import '@rjsf/validator-ajv8';
+import '@material-ui/core/Accordion';
+import '@material-ui/core/AccordionDetails';
+import '@material-ui/core/AccordionSummary';
+import '@material-ui/core/Divider';
+import '@material-ui/icons/ExpandLess';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemSecondaryAction';
+import '@material-ui/icons/Cancel';
+import '@material-ui/icons/Check';
+import '@material-ui/icons/Delete';
+import '@material-ui/core/Box';
+import '@material-ui/core/Tab';
+import '@material-ui/core/Tabs';
 import '@material-ui/core/Grid';
 import '@material-ui/core/Step';
 import '@material-ui/core/StepLabel';
 import '@material-ui/core/Stepper';
 import '@material-ui/icons/FiberManualRecord';
+import '@material-ui/lab/TreeView';
+import '@material-ui/icons/ChevronRight';
+import '@material-ui/lab/TreeItem';
+import '@material-ui/icons/Refresh';
+import '@material-ui/icons/Save';
+import '@codemirror/view';
+import '@material-ui/core/Card';
+import '@material-ui/core/CardActionArea';
+import '@material-ui/core/CardContent';
+import '@material-ui/core/Tooltip';
+import '@material-ui/icons/InfoOutlined';
 
-const useStyles$d = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   cardHeader: {
     position: "relative"
   },
@@ -189,7 +190,7 @@ const TemplateCard = ({ template, deprecated }) => {
   );
   const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type }) ? templateProps.type : "other";
   const theme = backstageTheme.getPageTheme({ themeId });
-  const classes = useStyles$d({ backgroundImage: theme.backgroundImage });
+  const classes = useStyles$5({ backgroundImage: theme.backgroundImage });
   const { name, namespace } = parseEntityRef(stringifyEntityRef(template));
   const href = templateRoute({ templateName: name, namespace });
   const viewTechDoc = useRouteRef(viewTechDocRouteRef);
@@ -301,13 +302,13 @@ const TemplateList = ({
   )))));
 };
 
-const useStyles$c = makeStyles$1({
+const useStyles$4 = makeStyles$1({
   button: {
     color: "white"
   }
 });
 function ScaffolderPageContextMenu(props) {
-  const classes = useStyles$c();
+  const classes = useStyles$4();
   const [anchorEl, setAnchorEl] = useState();
   const editLink = useRouteRef(editRouteRef);
   const actionsLink = useRouteRef(actionsRouteRef);
@@ -716,6 +717,9 @@ const MultistepJsonForm = (props) => {
 function isObject(obj) {
   return typeof obj === "object" && obj !== null && !Array.isArray(obj);
 }
+function isArray(obj) {
+  return typeof obj === "object" && obj !== null && Array.isArray(obj);
+}
 const createValidator = (rootSchema, validators, context) => {
   function validate(schema, formData, errors) {
     const schemaProps = schema.properties;
@@ -726,8 +730,8 @@ const createValidator = (rootSchema, validators, context) => {
     if (schemaProps) {
       for (const [key, propData] of Object.entries(formData)) {
         const propValidation = errors[key];
+        const propSchemaProps = schemaProps[key];
         if (isObject(propData)) {
-          const propSchemaProps = schemaProps[key];
           if (isObject(propSchemaProps)) {
             validate(
               propSchemaProps,
@@ -735,9 +739,22 @@ const createValidator = (rootSchema, validators, context) => {
               propValidation
             );
           }
+        } else if (isArray(propData)) {
+          if (isObject(propSchemaProps)) {
+            const { items } = propSchemaProps;
+            if (isObject(items)) {
+              const fieldName = items["ui:field"];
+              if (fieldName && typeof validators[fieldName] === "function") {
+                validators[fieldName](
+                  propData,
+                  propValidation,
+                  context
+                );
+              }
+            }
+          }
         } else {
-          const propSchema = schemaProps[key];
-          const fieldName = isObject(propSchema) && propSchema["ui:field"];
+          const fieldName = isObject(propSchemaProps) && propSchemaProps["ui:field"];
           if (fieldName && typeof validators[fieldName] === "function") {
             validators[fieldName](
               propData,
@@ -875,338 +892,7 @@ const TemplatePage = ({
   ))));
 };
 
-const showDirectoryPicker = window.showDirectoryPicker;
-class WebFileAccess {
-  constructor(path, handle) {
-    this.path = path;
-    this.handle = handle;
-  }
-  file() {
-    return this.handle.getFile();
-  }
-  async save(data) {
-    const writable = await this.handle.createWritable();
-    await writable.write(data);
-    await writable.close();
-  }
-}
-class WebDirectoryAccess {
-  constructor(handle) {
-    this.handle = handle;
-  }
-  async listFiles() {
-    const content = [];
-    for await (const entry of this.listDirectoryContents(this.handle)) {
-      content.push(entry);
-    }
-    return content;
-  }
-  async *listDirectoryContents(dirHandle, basePath = []) {
-    for await (const handle of dirHandle.values()) {
-      if (handle.kind === "file") {
-        yield new WebFileAccess([...basePath, handle.name].join("/"), handle);
-      } else if (handle.kind === "directory") {
-        if (handle.name === ".git") {
-          continue;
-        }
-        yield* this.listDirectoryContents(handle, [...basePath, handle.name]);
-      }
-    }
-  }
-}
-class WebFileSystemAccess {
-  static isSupported() {
-    return Boolean(showDirectoryPicker);
-  }
-  static async requestDirectoryAccess() {
-    if (!showDirectoryPicker) {
-      throw new Error("File system access is not supported");
-    }
-    const handle = await showDirectoryPicker();
-    return new WebDirectoryAccess(handle);
-  }
-  constructor() {
-  }
-}
-
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-var _access, _signalUpdate, _content, _savedContent, _access2, _listeners, _files, _selectedFile, _signalUpdate2;
-const MAX_SIZE = 1024 * 1024;
-const MAX_SIZE_MESSAGE = "This file is too large to be displayed";
-class DirectoryEditorFileManager {
-  constructor(access, signalUpdate) {
-    __privateAdd(this, _access, void 0);
-    __privateAdd(this, _signalUpdate, void 0);
-    __privateAdd(this, _content, void 0);
-    __privateAdd(this, _savedContent, void 0);
-    __privateSet(this, _access, access);
-    __privateSet(this, _signalUpdate, signalUpdate);
-  }
-  get path() {
-    return __privateGet(this, _access).path;
-  }
-  get content() {
-    var _a;
-    return (_a = __privateGet(this, _content)) != null ? _a : MAX_SIZE_MESSAGE;
-  }
-  updateContent(content) {
-    if (__privateGet(this, _content) === void 0) {
-      return;
-    }
-    __privateSet(this, _content, content);
-    __privateGet(this, _signalUpdate).call(this);
-  }
-  get dirty() {
-    return __privateGet(this, _content) !== __privateGet(this, _savedContent);
-  }
-  async save() {
-    if (__privateGet(this, _content) !== void 0) {
-      await __privateGet(this, _access).save(__privateGet(this, _content));
-      __privateSet(this, _savedContent, __privateGet(this, _content));
-      __privateGet(this, _signalUpdate).call(this);
-    }
-  }
-  async reload() {
-    const file = await __privateGet(this, _access).file();
-    if (file.size > MAX_SIZE) {
-      if (__privateGet(this, _content) !== void 0) {
-        __privateSet(this, _content, void 0);
-        __privateSet(this, _savedContent, void 0);
-        __privateGet(this, _signalUpdate).call(this);
-      }
-      return;
-    }
-    const content = await file.text();
-    if (__privateGet(this, _content) !== content) {
-      __privateSet(this, _content, content);
-      __privateSet(this, _savedContent, content);
-      __privateGet(this, _signalUpdate).call(this);
-    }
-  }
-}
-_access = new WeakMap();
-_signalUpdate = new WeakMap();
-_content = new WeakMap();
-_savedContent = new WeakMap();
-class DirectoryEditorManager {
-  constructor(access) {
-    __privateAdd(this, _access2, void 0);
-    __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
-    __privateAdd(this, _files, []);
-    __privateAdd(this, _selectedFile, void 0);
-    this.setSelectedFile = (path) => {
-      const prev = __privateGet(this, _selectedFile);
-      const next = __privateGet(this, _files).find((file) => file.path === path);
-      if (prev !== next) {
-        __privateSet(this, _selectedFile, next);
-        __privateGet(this, _signalUpdate2).call(this);
-      }
-    };
-    __privateAdd(this, _signalUpdate2, () => {
-      __privateGet(this, _listeners).forEach((listener) => listener());
-    });
-    __privateSet(this, _access2, access);
-  }
-  get files() {
-    return __privateGet(this, _files);
-  }
-  get selectedFile() {
-    return __privateGet(this, _selectedFile);
-  }
-  get dirty() {
-    return __privateGet(this, _files).some((file) => file.dirty);
-  }
-  async save() {
-    await Promise.all(__privateGet(this, _files).map((file) => file.save()));
-  }
-  async reload() {
-    var _a;
-    const selectedPath = (_a = __privateGet(this, _selectedFile)) == null ? void 0 : _a.path;
-    const files = await __privateGet(this, _access2).listFiles();
-    const fileManagers = await Promise.all(
-      files.map(async (file) => {
-        const manager = new DirectoryEditorFileManager(
-          file,
-          __privateGet(this, _signalUpdate2)
-        );
-        await manager.reload();
-        return manager;
-      })
-    );
-    __privateGet(this, _files).length = 0;
-    __privateGet(this, _files).push(...fileManagers);
-    this.setSelectedFile(selectedPath);
-    __privateGet(this, _signalUpdate2).call(this);
-  }
-  subscribe(listener) {
-    __privateGet(this, _listeners).add(listener);
-    return () => {
-      __privateGet(this, _listeners).delete(listener);
-    };
-  }
-}
-_access2 = new WeakMap();
-_listeners = new WeakMap();
-_files = new WeakMap();
-_selectedFile = new WeakMap();
-_signalUpdate2 = new WeakMap();
-const DirectoryEditorContext = createContext(
-  void 0
-);
-function useDirectoryEditor() {
-  const value = useContext(DirectoryEditorContext);
-  const rerender = useRerender();
-  useEffect(() => value == null ? void 0 : value.subscribe(rerender), [value, rerender]);
-  if (!value) {
-    throw new Error("must be used within a DirectoryEditorProvider");
-  }
-  return value;
-}
-function DirectoryEditorProvider(props) {
-  const { directory } = props;
-  const [{ result, error }, { execute }] = useAsync$1(
-    async (dir) => {
-      const manager = new DirectoryEditorManager(dir);
-      await manager.reload();
-      const firstYaml = manager.files.find((file) => file.path.match(/\.ya?ml$/));
-      if (firstYaml) {
-        manager.setSelectedFile(firstYaml.path);
-      }
-      return manager;
-    }
-  );
-  useEffect(() => {
-    execute(directory);
-  }, [execute, directory]);
-  if (error) {
-    return /* @__PURE__ */ React.createElement(ErrorPanel, { error });
-  } else if (!result) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
-}
-
-const MAX_CONTENT_SIZE = 64 * 1024;
-const CHUNK_SIZE = 32 * 1024;
-const DryRunContext = createContext(void 0);
-function base64EncodeContent(content) {
-  if (content.length > MAX_CONTENT_SIZE) {
-    return window.btoa("<file too large>");
-  }
-  try {
-    return window.btoa(content);
-  } catch {
-    const decoder = new TextEncoder();
-    const buffer = decoder.encode(content);
-    const chunks = new Array();
-    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {
-      chunks.push(
-        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
-      );
-    }
-    return window.btoa(chunks.join(""));
-  }
-}
-function DryRunProvider(props) {
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const [state, setState] = useState({
-    results: [],
-    selectedResult: void 0
-  });
-  const idRef = useRef(1);
-  const selectResult = useCallback((id) => {
-    setState((prevState) => {
-      const result = prevState.results.find((r) => r.id === id);
-      if (result === prevState.selectedResult) {
-        return prevState;
-      }
-      return {
-        results: prevState.results,
-        selectedResult: result
-      };
-    });
-  }, []);
-  const deleteResult = useCallback((id) => {
-    setState((prevState) => {
-      var _a;
-      const index = prevState.results.findIndex((r) => r.id === id);
-      if (index === -1) {
-        return prevState;
-      }
-      const newResults = prevState.results.slice();
-      const [deleted] = newResults.splice(index, 1);
-      return {
-        results: newResults,
-        selectedResult: ((_a = prevState.selectedResult) == null ? void 0 : _a.id) === deleted.id ? newResults[0] : prevState.selectedResult
-      };
-    });
-  }, []);
-  const execute = useCallback(
-    async (options) => {
-      if (!scaffolderApi.dryRun) {
-        throw new Error("Scaffolder API does not support dry-run");
-      }
-      const parsed = yaml.parse(options.templateContent);
-      const response = await scaffolderApi.dryRun({
-        template: parsed,
-        values: options.values,
-        secrets: {},
-        directoryContents: options.files.map((file) => ({
-          path: file.path,
-          base64Content: base64EncodeContent(file.content)
-        }))
-      });
-      const result = {
-        ...response,
-        id: idRef.current++
-      };
-      setState((prevState) => {
-        var _a;
-        return {
-          results: [...prevState.results, result],
-          selectedResult: (_a = prevState.selectedResult) != null ? _a : result
-        };
-      });
-    },
-    [scaffolderApi]
-  );
-  const dryRun = useMemo(
-    () => ({
-      ...state,
-      selectResult,
-      deleteResult,
-      execute
-    }),
-    [state, selectResult, deleteResult, execute]
-  );
-  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, { value: dryRun }, props.children);
-}
-function useDryRun() {
-  const value = useContext(DryRunContext);
-  if (!value) {
-    throw new Error("must be used within a DryRunProvider");
-  }
-  return value;
-}
-
-const useStyles$b = makeStyles$1({
+const useStyles$3 = makeStyles$1({
   containerWrapper: {
     position: "relative",
     width: "100%",
@@ -1255,7 +941,7 @@ function TemplateEditorForm(props) {
     fieldExtensions = [],
     layouts = []
   } = props;
-  const classes = useStyles$b();
+  const classes = useStyles$3();
   const apiHolder = useApiHolder();
   const [steps, setSteps] = useState();
   const fields = useMemo(() => {
@@ -1370,7 +1056,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
 TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
 
 const Form = withTheme(Theme);
-const useStyles$a = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   root: {
     gridArea: "pageContent",
     display: "grid",
@@ -1400,7 +1086,7 @@ const CustomFieldExplorer = ({
   onClose
 }) => {
   var _a, _b;
-  const classes = useStyles$a();
+  const classes = useStyles$2();
   const fieldOptions = customFieldExtensions.filter((field) => !!field.schema);
   const [selectedField, setSelectedField] = useState(fieldOptions[0]);
   const [fieldFormState, setFieldFormState] = useState({});
@@ -1500,589 +1186,6 @@ const CustomFieldExplorer = ({
   )));
 };
 
-const useStyles$9 = makeStyles$1((theme) => ({
-  introText: {
-    textAlign: "center",
-    marginTop: theme.spacing(2)
-  },
-  card: {
-    position: "relative",
-    maxWidth: 340,
-    marginTop: theme.spacing(4),
-    margin: theme.spacing(0, 2)
-  },
-  infoIcon: {
-    position: "absolute",
-    top: theme.spacing(1),
-    right: theme.spacing(1)
-  }
-}));
-function TemplateEditorIntro(props) {
-  const classes = useStyles$9();
-  const supportsLoad = WebFileSystemAccess.isSupported();
-  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card$1, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(
-    CardActionArea,
-    {
-      disabled: !supportsLoad,
-      onClick: () => {
-        var _a;
-        return (_a = props.onSelect) == null ? void 0 : _a.call(props, "local");
-      }
-    },
-    /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(
-      Typography$1,
-      {
-        variant: "h5",
-        gutterBottom: true,
-        color: supportsLoad ? void 0 : "textSecondary",
-        style: { display: "flex", flexFlow: "row nowrap" }
-      },
-      "Load Template Directory"
-    ), /* @__PURE__ */ React.createElement(
-      Typography$1,
-      {
-        variant: "body1",
-        color: supportsLoad ? void 0 : "textSecondary"
-      },
-      "Load a local template directory, allowing you to both edit and try executing your own template."
-    ))
-  ), !supportsLoad && /* @__PURE__ */ React.createElement("div", { className: classes.infoIcon }, /* @__PURE__ */ React.createElement(
-    Tooltip$1,
-    {
-      placement: "top",
-      title: "Only supported in some Chromium-based browsers"
-    },
-    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
-  )));
-  const cardFormEditor = /* @__PURE__ */ React.createElement(Card$1, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => {
-    var _a;
-    return (_a = props.onSelect) == null ? void 0 : _a.call(props, "form");
-  } }, /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h5", gutterBottom: true }, "Edit Template Form"), /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, "Preview and edit a template form, either using a sample template or by loading a template from the catalog."))));
-  const cardFieldExplorer = /* @__PURE__ */ React.createElement(Card$1, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => {
-    var _a;
-    return (_a = props.onSelect) == null ? void 0 : _a.call(props, "field-explorer");
-  } }, /* @__PURE__ */ React.createElement(CardContent$1, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h5", gutterBottom: true }, "Custom Field Explorer"), /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, "View and play around with available installed custom field extensions."))));
-  return /* @__PURE__ */ React.createElement("div", { style: props.style }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6", className: classes.introText }, "Get started by choosing one of the options below"), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexFlow: "row wrap",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        alignContent: "flex-start"
-      }
-    },
-    supportsLoad && cardLoadLocal,
-    cardFormEditor,
-    !supportsLoad && cardLoadLocal,
-    cardFieldExplorer
-  ));
-}
-
-const useStyles$8 = makeStyles$1((theme) => ({
-  root: {
-    overflowY: "auto",
-    background: theme.palette.background.default
-  },
-  iconSuccess: {
-    minWidth: 0,
-    marginRight: theme.spacing(1),
-    color: theme.palette.status.ok
-  },
-  iconFailure: {
-    minWidth: 0,
-    marginRight: theme.spacing(1),
-    color: theme.palette.status.error
-  }
-}));
-function DryRunResultsList() {
-  const classes = useStyles$8();
-  const dryRun = useDryRun();
-  return /* @__PURE__ */ React.createElement(List$1, { className: classes.root, dense: true }, dryRun.results.map((result) => {
-    var _a;
-    const failed = result.log.some((l) => l.body.status === "failed");
-    return /* @__PURE__ */ React.createElement(
-      ListItem,
-      {
-        button: true,
-        key: result.id,
-        selected: ((_a = dryRun.selectedResult) == null ? void 0 : _a.id) === result.id,
-        onClick: () => dryRun.selectResult(result.id)
-      },
-      /* @__PURE__ */ React.createElement(
-        ListItemIcon,
-        {
-          className: failed ? classes.iconFailure : classes.iconSuccess
-        },
-        failed ? /* @__PURE__ */ React.createElement(Cancel, null) : /* @__PURE__ */ React.createElement(Check, null)
-      ),
-      /* @__PURE__ */ React.createElement(ListItemText, { primary: `Result ${result.id}` }),
-      /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
-        IconButton$1,
-        {
-          edge: "end",
-          "aria-label": "delete",
-          onClick: () => dryRun.deleteResult(result.id)
-        },
-        /* @__PURE__ */ React.createElement(DeleteIcon, null)
-      ))
-    );
-  }));
-}
-
-const useStyles$7 = makeStyles$1({
-  root: {
-    whiteSpace: "nowrap",
-    overflowY: "auto"
-  }
-});
-function parseFileEntires(paths) {
-  const root = {
-    type: "directory",
-    name: "",
-    path: "",
-    children: []
-  };
-  for (const path of paths.slice().sort()) {
-    const parts = path.split("/");
-    let current = root;
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-      if (part === "") {
-        throw new Error(`Invalid path part: ''`);
-      }
-      const entryPath = parts.slice(0, i + 1).join("/");
-      const existing = current.children.find((child) => child.name === part);
-      if ((existing == null ? void 0 : existing.type) === "file") {
-        throw new Error(`Duplicate filename at '${entryPath}'`);
-      } else if (existing) {
-        current = existing;
-      } else {
-        if (i < parts.length - 1) {
-          const newEntry = {
-            type: "directory",
-            name: part,
-            path: entryPath,
-            children: []
-          };
-          const firstFileIndex = current.children.findIndex(
-            (child) => child.type === "file"
-          );
-          current.children.splice(firstFileIndex, 0, newEntry);
-          current = newEntry;
-        } else {
-          current.children.push({
-            type: "file",
-            name: part,
-            path: entryPath
-          });
-        }
-      }
-    }
-  }
-  return root.children;
-}
-function FileTreeItem({ entry }) {
-  if (entry.type === "file") {
-    return /* @__PURE__ */ React.createElement(TreeItem, { nodeId: entry.path, label: entry.name });
-  }
-  return /* @__PURE__ */ React.createElement(TreeItem, { nodeId: entry.path, label: entry.name }, entry.children.map((child) => /* @__PURE__ */ React.createElement(FileTreeItem, { key: child.path, entry: child })));
-}
-function FileBrowser(props) {
-  const classes = useStyles$7();
-  const fileTree = useMemo(
-    () => parseFileEntires(props.filePaths),
-    [props.filePaths]
-  );
-  return /* @__PURE__ */ React.createElement(
-    TreeView,
-    {
-      selected: props.selected,
-      className: classes.root,
-      defaultCollapseIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
-      defaultExpandIcon: /* @__PURE__ */ React.createElement(ChevronRightIcon, null),
-      onNodeSelect: (_e, nodeId) => {
-        if (props.onSelect && props.filePaths.includes(nodeId)) {
-          props.onSelect(nodeId);
-        }
-      }
-    },
-    fileTree.map((entry) => /* @__PURE__ */ React.createElement(FileTreeItem, { key: entry.path, entry }))
-  );
-}
-
-const useStyles$6 = makeStyles$1((theme) => ({
-  root: {
-    display: "grid",
-    gridTemplateColumns: "280px auto 3fr",
-    gridTemplateRows: "1fr"
-  },
-  child: {
-    overflowY: "auto",
-    height: "100%",
-    minHeight: 0
-  },
-  firstChild: {
-    background: theme.palette.background.paper
-  }
-}));
-function DryRunResultsSplitView(props) {
-  const classes = useStyles$6();
-  const childArray = Children.toArray(props.children);
-  if (childArray.length !== 2) {
-    throw new Error("must have exactly 2 children");
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classNames(classes.child, classes.firstChild) }, childArray[0]), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement("div", { className: classes.child }, childArray[1]));
-}
-
-const useStyles$5 = makeStyles$1({
-  root: {
-    display: "flex",
-    flexFlow: "column nowrap"
-  },
-  contentWrapper: {
-    flex: 1,
-    position: "relative"
-  },
-  content: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: "flex",
-    "& > *": {
-      flex: 1
-    }
-  },
-  codeMirror: {
-    height: "100%",
-    overflowY: "auto"
-  }
-});
-function FilesContent() {
-  const classes = useStyles$5();
-  const { selectedResult } = useDryRun();
-  const [selectedPath, setSelectedPath] = useState("");
-  const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find(
-    (f) => f.path === selectedPath
-  );
-  useEffect(() => {
-    if (selectedResult) {
-      const [firstFile] = selectedResult.directoryContents;
-      if (firstFile) {
-        setSelectedPath(firstFile.path);
-      } else {
-        setSelectedPath("");
-      }
-    }
-    return void 0;
-  }, [selectedResult]);
-  if (!selectedResult) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(
-    FileBrowser,
-    {
-      selected: selectedPath,
-      onSelect: setSelectedPath,
-      filePaths: selectedResult.directoryContents.map((file) => file.path)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      className: classes.codeMirror,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml$1)],
-      readOnly: true,
-      value: (selectedFile == null ? void 0 : selectedFile.base64Content) ? atob(selectedFile.base64Content) : ""
-    }
-  ));
-}
-function LogContent() {
-  var _a, _b;
-  const { selectedResult } = useDryRun();
-  const [currentStepId, setUserSelectedStepId] = useState();
-  const steps = useMemo(() => {
-    var _a2;
-    if (!selectedResult) {
-      return [];
-    }
-    return (_a2 = selectedResult.steps.map((step) => {
-      var _a3, _b2;
-      const stepLog = selectedResult.log.filter(
-        (l) => l.body.stepId === step.id
-      );
-      return {
-        id: step.id,
-        name: step.name,
-        logString: stepLog.map((l) => l.body.message).join("\n"),
-        status: (_b2 = (_a3 = stepLog[stepLog.length - 1]) == null ? void 0 : _a3.body.status) != null ? _b2 : "completed"
-      };
-    })) != null ? _a2 : [];
-  }, [selectedResult]);
-  if (!selectedResult) {
-    return null;
-  }
-  const selectedStep = (_a = steps.find((s) => s.id === currentStepId)) != null ? _a : steps[0];
-  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(
-    TaskStatusStepper,
-    {
-      steps,
-      currentStepId: selectedStep.id,
-      onUserStepChange: setUserSelectedStepId
-    }
-  ), /* @__PURE__ */ React.createElement(LogViewer, { text: (_b = selectedStep == null ? void 0 : selectedStep.logString) != null ? _b : "" }));
-}
-function OutputContent() {
-  var _a, _b;
-  const classes = useStyles$5();
-  const { selectedResult } = useDryRun();
-  if (!selectedResult) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(DryRunResultsSplitView, null, /* @__PURE__ */ React.createElement(Box$1, { pt: 2 }, ((_b = (_a = selectedResult.output) == null ? void 0 : _a.links) == null ? void 0 : _b.length) && /* @__PURE__ */ React.createElement(TaskPageLinks, { output: selectedResult.output })), /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      className: classes.codeMirror,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml$1)],
-      readOnly: true,
-      value: JSON.stringify(selectedResult.output, null, 2)
-    }
-  ));
-}
-function DryRunResultsView() {
-  const classes = useStyles$5();
-  const [selectedTab, setSelectedTab] = useState(
-    "files"
-  );
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Tabs, { value: selectedTab, onChange: (_, v) => setSelectedTab(v) }, /* @__PURE__ */ React.createElement(Tab, { value: "files", label: "Files" }), /* @__PURE__ */ React.createElement(Tab, { value: "log", label: "Log" }), /* @__PURE__ */ React.createElement(Tab, { value: "output", label: "Output" })), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement("div", { className: classes.contentWrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, selectedTab === "files" && /* @__PURE__ */ React.createElement(FilesContent, null), selectedTab === "log" && /* @__PURE__ */ React.createElement(LogContent, null), selectedTab === "output" && /* @__PURE__ */ React.createElement(OutputContent, null))));
-}
-
-const useStyles$4 = makeStyles$1((theme) => ({
-  header: {
-    height: 48,
-    minHeight: 0,
-    "&.Mui-expanded": {
-      height: 48,
-      minHeight: 0
-    }
-  },
-  content: {
-    display: "grid",
-    background: theme.palette.background.default,
-    gridTemplateColumns: "180px auto 1fr",
-    gridTemplateRows: "1fr",
-    padding: 0,
-    height: 400
-  }
-}));
-function DryRunResults() {
-  const classes = useStyles$4();
-  const dryRun = useDryRun();
-  const [expanded, setExpanded] = useState(false);
-  const [hidden, setHidden] = useState(true);
-  const resultsLength = dryRun.results.length;
-  const prevResultsLength = usePrevious(resultsLength);
-  useEffect(() => {
-    if (prevResultsLength === 0 && resultsLength === 1) {
-      setHidden(false);
-      setExpanded(true);
-    } else if (prevResultsLength === 1 && resultsLength === 0) {
-      setExpanded(false);
-    }
-  }, [prevResultsLength, resultsLength]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Accordion,
-    {
-      variant: "outlined",
-      expanded,
-      hidden: resultsLength === 0 && hidden,
-      onChange: (_, exp) => setExpanded(exp),
-      onTransitionEnd: () => resultsLength === 0 && setHidden(true)
-    },
-    /* @__PURE__ */ React.createElement(
-      AccordionSummary,
-      {
-        className: classes.header,
-        expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon$1, null)
-      },
-      /* @__PURE__ */ React.createElement(Typography$1, null, "Dry-run results")
-    ),
-    /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }),
-    /* @__PURE__ */ React.createElement(AccordionDetails, { className: classes.content }, /* @__PURE__ */ React.createElement(DryRunResultsList, null), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))
-  ));
-}
-
-const useStyles$3 = makeStyles((theme) => ({
-  button: {
-    padding: theme.spacing(1)
-  },
-  buttons: {
-    display: "flex",
-    flexFlow: "row nowrap",
-    alignItems: "center",
-    justifyContent: "flex-start"
-  },
-  buttonsGap: {
-    flex: "1 1 auto"
-  },
-  buttonsDivider: {
-    marginBottom: theme.spacing(1)
-  }
-}));
-function TemplateEditorBrowser(props) {
-  var _a, _b;
-  const classes = useStyles$3();
-  const directoryEditor = useDirectoryEditor();
-  const changedFiles = directoryEditor.files.filter((file) => file.dirty);
-  const handleClose = () => {
-    if (!props.onClose) {
-      return;
-    }
-    if (changedFiles.length > 0) {
-      const accepted = window.confirm(
-        "Are you sure? Unsaved changes will be lost"
-      );
-      if (!accepted) {
-        return;
-      }
-    }
-    props.onClose();
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Save all files" }, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      className: classes.button,
-      disabled: directoryEditor.files.every((file) => !file.dirty),
-      onClick: () => directoryEditor.save()
-    },
-    /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload directory" }, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      className: classes.button,
-      onClick: () => directoryEditor.reload()
-    },
-    /* @__PURE__ */ React.createElement(RefreshIcon, null)
-  )), /* @__PURE__ */ React.createElement("div", { className: classes.buttonsGap }), /* @__PURE__ */ React.createElement(Tooltip, { title: "Close directory" }, /* @__PURE__ */ React.createElement(IconButton, { className: classes.button, onClick: handleClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)))), /* @__PURE__ */ React.createElement(Divider$1, { className: classes.buttonsDivider }), /* @__PURE__ */ React.createElement(
-    FileBrowser,
-    {
-      selected: (_b = (_a = directoryEditor.selectedFile) == null ? void 0 : _a.path) != null ? _b : "",
-      onSelect: directoryEditor.setSelectedFile,
-      filePaths: directoryEditor.files.map((file) => file.path)
-    }
-  ));
-}
-
-const useStyles$2 = makeStyles((theme) => ({
-  container: {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  },
-  codeMirror: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  errorPanel: {
-    color: theme.palette.error.main,
-    lineHeight: 2,
-    margin: theme.spacing(0, 1)
-  },
-  floatingButtons: {
-    position: "absolute",
-    top: theme.spacing(1),
-    right: theme.spacing(3)
-  },
-  floatingButton: {
-    padding: theme.spacing(1)
-  }
-}));
-function TemplateEditorTextArea(props) {
-  const { errorText } = props;
-  const classes = useStyles$2();
-  const panelExtension = useMemo(() => {
-    if (!errorText) {
-      return showPanel.of(null);
-    }
-    const dom = document.createElement("div");
-    dom.classList.add(classes.errorPanel);
-    dom.textContent = errorText;
-    return showPanel.of(() => ({ dom, bottom: true }));
-  }, [classes, errorText]);
-  useKeyboardEvent(
-    (e) => e.key === "s" && (e.ctrlKey || e.metaKey),
-    (e) => {
-      e.preventDefault();
-      if (props.onSave) {
-        props.onSave();
-      }
-    }
-  );
-  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      className: classes.codeMirror,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml$1), panelExtension],
-      value: props.content,
-      onChange: props.onUpdate
-    }
-  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(Tooltip, { title: "Save file" }, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      className: classes.floatingButton,
-      onClick: () => {
-        var _a;
-        return (_a = props.onSave) == null ? void 0 : _a.call(props);
-      }
-    },
-    /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      className: classes.floatingButton,
-      onClick: () => {
-        var _a;
-        return (_a = props.onReload) == null ? void 0 : _a.call(props);
-      }
-    },
-    /* @__PURE__ */ React.createElement(RefreshIcon, null)
-  )))));
-}
-function TemplateEditorDirectoryEditorTextArea(props) {
-  var _a, _b;
-  const directoryEditor = useDirectoryEditor();
-  const actions = ((_a = directoryEditor.selectedFile) == null ? void 0 : _a.dirty) ? {
-    onSave: () => directoryEditor.save(),
-    onReload: () => directoryEditor.reload()
-  } : {
-    onReload: () => directoryEditor.reload()
-  };
-  return /* @__PURE__ */ React.createElement(
-    TemplateEditorTextArea,
-    {
-      errorText: props.errorText,
-      content: (_b = directoryEditor.selectedFile) == null ? void 0 : _b.content,
-      onUpdate: (content) => {
-        var _a2;
-        return (_a2 = directoryEditor.selectedFile) == null ? void 0 : _a2.updateContent(content);
-      },
-      ...actions
-    }
-  );
-}
-TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
-
 const useStyles$1 = makeStyles({
   // Reset and fix sizing to make sure scrolling behaves correctly
   root: {
@@ -2411,4 +1514,4 @@ const Router = (props) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-e878e04f.esm.js.map
+//# sourceMappingURL=Router-fae7a62f.esm.js.map