@backstage/plugin-scaffolder 1.9.0-next.0 → 1.9.0-next.1

package/dist/esm/{Router-c72ed8e0.esm.js → Router-95a01240.esm.js}

@@ -3,7 +3,7 @@ import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router';
 import { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1 } from '@backstage/core-components';
 import { useApp, useRouteRef, useApi, useRouteRefParams, useAnalytics, errorApiRef, featureFlagsApiRef, useApiHolder, AnalyticsContext, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
 import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef, EntityRefLink } from '@backstage/plugin-catalog-react';
-import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, L as LAYOUTS_WRAPPER_KEY, j as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, k as SecretsContextProvider, m as TaskPage } from './index-ed1a1fba.esm.js';
+import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, L as LAYOUTS_WRAPPER_KEY, j as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, k as SecretsContextProvider, m as TaskPage } from './index-102258f6.esm.js';
 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, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, FormControl, InputLabel, Select, MenuItem as MenuItem$1, CardHeader, Divider as Divider$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
@@ -27,7 +27,7 @@ import useAsync from 'react-use/lib/useAsync';
 import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
 import cloneDeep from 'lodash/cloneDeep';
-import { e as extractSchemaFromStep, D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './schema-b28a29ab.esm.js';
+import { e as extractSchemaFromStep, D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './schema-4db0f1ff.esm.js';
 import classNames from 'classnames';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
@@ -157,17 +157,15 @@ const getTemplateCardProps = (template) => {
 };
 const DeprecationWarning = () => {
   const styles = useDeprecationStyles();
-  const Title = /* @__PURE__ */ React.createElement(Typography, {
-    style: { padding: 10, maxWidth: 300 }
-  }, "This template uses a syntax that has been deprecated, and should be migrated to a newer syntax. Click for more info.");
-  return /* @__PURE__ */ React.createElement("div", {
-    className: styles.deprecationIcon
-  }, /* @__PURE__ */ React.createElement(Tooltip, {
-    title: Title
-  }, /* @__PURE__ */ React.createElement(Link, {
-    to: "https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3",
-    className: styles.link
-  }, /* @__PURE__ */ React.createElement(WarningIcon, null))));
+  const Title = /* @__PURE__ */ React.createElement(Typography, { style: { padding: 10, maxWidth: 300 } }, "This template uses a syntax that has been deprecated, and should be migrated to a newer syntax. Click for more info.");
+  return /* @__PURE__ */ React.createElement("div", { className: styles.deprecationIcon }, /* @__PURE__ */ React.createElement(Tooltip, { title: Title }, /* @__PURE__ */ React.createElement(
+    Link,
+    {
+      to: "https://backstage.io/docs/features/software-templates/migrating-from-v1beta2-to-v1beta3",
+      className: styles.link
+    },
+    /* @__PURE__ */ React.createElement(WarningIcon, null)
+  )));
 };
 const TemplateCard = ({ template, deprecated }) => {
   var _a, _b, _c;
@@ -197,73 +195,71 @@ const TemplateCard = ({ template, deprecated }) => {
   };
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
   const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi);
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardMedia, {
-    className: classes.cardHeader
-  }, /* @__PURE__ */ React.createElement(FavoriteEntity, {
-    className: classes.starButton,
-    entity: template
-  }), deprecated && /* @__PURE__ */ React.createElement(DeprecationWarning, null), /* @__PURE__ */ React.createElement(ItemCardHeader, {
-    title: templateProps.title,
-    subtitle: templateProps.type,
-    classes: { root: classes.title }
-  })), /* @__PURE__ */ React.createElement(CardContent, {
-    style: { display: "flex", flexDirection: "column", gap: "16px" }
-  }, /* @__PURE__ */ React.createElement(Box, {
-    className: classes.box
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "body2",
-    className: classes.label
-  }, "Description"), /* @__PURE__ */ React.createElement(MarkdownContent, {
-    className: classes.description,
-    content: templateProps.description
-  })), /* @__PURE__ */ React.createElement(Box, {
-    className: classes.box
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "body2",
-    className: classes.label
-  }, "Owner"), /* @__PURE__ */ React.createElement(EntityRefLinks, {
-    entityRefs: ownedByRelations,
-    defaultKind: "Group"
-  })), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, {
-    style: { marginBottom: "4px" },
-    variant: "body2",
-    className: classes.label
-  }, "Tags"), (_b = templateProps.tags) == null ? void 0 : _b.map((tag) => /* @__PURE__ */ React.createElement(Chip, {
-    size: "small",
-    label: tag,
-    key: tag
-  })))), /* @__PURE__ */ React.createElement(Typography, {
-    variant: "body2",
-    className: [classes.label, classes.linksLabel].join(" ")
-  }, "Links"), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement("div", {
-    className: classes.leftButton
-  }, sourceLocation && /* @__PURE__ */ React.createElement(Tooltip, {
-    title: sourceLocation.integrationType || sourceLocation.locationTargetUrl
-  }, /* @__PURE__ */ React.createElement(IconButton, {
-    className: classes.leftButton,
-    href: sourceLocation.locationTargetUrl
-  }, /* @__PURE__ */ React.createElement(ScmIntegrationIcon, {
-    type: sourceLocation.integrationType
-  }))), viewTechDocsLink && /* @__PURE__ */ React.createElement(Tooltip, {
-    title: "View TechDocs"
-  }, /* @__PURE__ */ React.createElement(IconButton, {
-    className: classes.leftButton,
-    href: viewTechDocsLink
-  }, /* @__PURE__ */ React.createElement(MuiIcon, {
-    icon: iconResolver("docs")
-  }))), (_c = templateProps.links) == null ? void 0 : _c.map((link, i) => /* @__PURE__ */ React.createElement(Tooltip, {
-    key: `${link.url}_${i}`,
-    title: link.title || link.url
-  }, /* @__PURE__ */ React.createElement(IconButton, {
-    size: "medium",
-    href: link.url
-  }, /* @__PURE__ */ React.createElement(MuiIcon, {
-    icon: iconResolver(link.icon)
-  }))))), /* @__PURE__ */ React.createElement(Button, {
-    color: "primary",
-    to: href,
-    "aria-label": `Choose ${templateProps.title}`
-  }, "Choose")));
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardMedia, { className: classes.cardHeader }, /* @__PURE__ */ React.createElement(FavoriteEntity, { className: classes.starButton, entity: template }), deprecated && /* @__PURE__ */ React.createElement(DeprecationWarning, null), /* @__PURE__ */ React.createElement(
+    ItemCardHeader,
+    {
+      title: templateProps.title,
+      subtitle: templateProps.type,
+      classes: { root: classes.title }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    CardContent,
+    {
+      style: { display: "flex", flexDirection: "column", gap: "16px" }
+    },
+    /* @__PURE__ */ React.createElement(Box, { className: classes.box }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.label }, "Description"), /* @__PURE__ */ React.createElement(
+      MarkdownContent,
+      {
+        className: classes.description,
+        content: templateProps.description
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Box, { className: classes.box }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.label }, "Owner"), /* @__PURE__ */ React.createElement(EntityRefLinks, { entityRefs: ownedByRelations, defaultKind: "Group" })),
+    /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        style: { marginBottom: "4px" },
+        variant: "body2",
+        className: classes.label
+      },
+      "Tags"
+    ), (_b = templateProps.tags) == null ? void 0 : _b.map((tag) => /* @__PURE__ */ React.createElement(Chip, { size: "small", label: tag, key: tag })))
+  ), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "body2",
+      className: [classes.label, classes.linksLabel].join(" ")
+    },
+    "Links"
+  ), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement("div", { className: classes.leftButton }, sourceLocation && /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: sourceLocation.integrationType || sourceLocation.locationTargetUrl
+    },
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        className: classes.leftButton,
+        href: sourceLocation.locationTargetUrl
+      },
+      /* @__PURE__ */ React.createElement(ScmIntegrationIcon, { type: sourceLocation.integrationType })
+    )
+  ), viewTechDocsLink && /* @__PURE__ */ React.createElement(Tooltip, { title: "View TechDocs" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      className: classes.leftButton,
+      href: viewTechDocsLink
+    },
+    /* @__PURE__ */ React.createElement(MuiIcon, { icon: iconResolver("docs") })
+  )), (_c = templateProps.links) == null ? void 0 : _c.map((link, i) => /* @__PURE__ */ React.createElement(Tooltip, { key: `${link.url}_${i}`, title: link.title || link.url }, /* @__PURE__ */ React.createElement(IconButton, { size: "medium", href: link.url }, /* @__PURE__ */ React.createElement(MuiIcon, { icon: iconResolver(link.icon) }))))), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      to: href,
+      "aria-label": `Choose ${templateProps.title}`
+    },
+    "Choose"
+  )));
 };
 
 const TemplateList = ({
@@ -276,30 +272,23 @@ const TemplateList = ({
   const titleComponent = (() => {
     if (group && group.title) {
       if (typeof group.title === "string") {
-        return /* @__PURE__ */ React.createElement(ContentHeader, {
-          title: group.title
-        });
+        return /* @__PURE__ */ React.createElement(ContentHeader, { title: group.title });
       }
       return group.title;
     }
-    return /* @__PURE__ */ React.createElement(ContentHeader, {
-      title: "Other Templates"
-    });
+    return /* @__PURE__ */ React.createElement(ContentHeader, { title: "Other Templates" });
   })();
   if (group && maybeFilteredEntities.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(Progress, null), error && /* @__PURE__ */ React.createElement(WarningPanel, {
-    title: "Oops! Something went wrong loading the templates"
-  }, error.message), !error && !loading && !entities.length && /* @__PURE__ */ React.createElement(Typography, {
-    variant: "body2"
-  }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, {
-    to: "https://backstage.io/docs/features/software-templates/adding-templates"
-  }, "adding templates"), "."), /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, maybeFilteredEntities && (maybeFilteredEntities == null ? void 0 : maybeFilteredEntities.length) > 0 && maybeFilteredEntities.map((template) => /* @__PURE__ */ React.createElement(Card, {
-    key: stringifyEntityRef(template),
-    template,
-    deprecated: template.apiVersion === "backstage.io/v1beta2"
-  })))));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(Progress, null), error && /* @__PURE__ */ React.createElement(WarningPanel, { title: "Oops! Something went wrong loading the templates" }, error.message), !error && !loading && !entities.length && /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-templates/adding-templates" }, "adding templates"), "."), /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, maybeFilteredEntities && (maybeFilteredEntities == null ? void 0 : maybeFilteredEntities.length) > 0 && maybeFilteredEntities.map((template) => /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      key: stringifyEntityRef(template),
+      template,
+      deprecated: template.apiVersion === "backstage.io/v1beta2"
+    }
+  )))));
 };
 
 const useStyles$e = makeStyles$1({
@@ -326,39 +315,29 @@ function ScaffolderPageContextMenu(props) {
   const onClose = () => {
     setAnchorEl(void 0);
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconButton$1, {
-    "aria-label": "more",
-    "aria-controls": "long-menu",
-    "aria-haspopup": "true",
-    onClick: onOpen,
-    "data-testid": "menu-button",
-    color: "inherit",
-    className: classes.button
-  }, /* @__PURE__ */ React.createElement(MoreVert, null)), /* @__PURE__ */ React.createElement(Popover, {
-    open: Boolean(anchorEl),
-    onClose,
-    anchorEl,
-    anchorOrigin: { vertical: "bottom", horizontal: "right" },
-    transformOrigin: { vertical: "top", horizontal: "right" }
-  }, /* @__PURE__ */ React.createElement(MenuList, null, showEditor && /* @__PURE__ */ React.createElement(MenuItem, {
-    onClick: () => navigate(editLink())
-  }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, {
-    fontSize: "small"
-  })), /* @__PURE__ */ React.createElement(ListItemText, {
-    primary: "Template Editor"
-  })), showActions && /* @__PURE__ */ React.createElement(MenuItem, {
-    onClick: () => navigate(actionsLink())
-  }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, {
-    fontSize: "small"
-  })), /* @__PURE__ */ React.createElement(ListItemText, {
-    primary: "Installed Actions"
-  })), showTasks && /* @__PURE__ */ React.createElement(MenuItem, {
-    onClick: () => navigate(tasksLink())
-  }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, {
-    fontSize: "small"
-  })), /* @__PURE__ */ React.createElement(ListItemText, {
-    primary: "Task List"
-  })))));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton$1,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: onOpen,
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      onClose,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList, null, showEditor && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(editLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Template Editor" })), showActions && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(actionsLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Installed Actions" })), showTasks && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(tasksLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
+  ));
 }
 
 const ScaffolderPageContents = ({
@@ -378,47 +357,57 @@ const ScaffolderPageContents = ({
   const { allowed } = usePermission({
     permission: catalogEntityCreatePermission
   });
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    pageTitleOverride: "Create a New Component",
-    title: "Create a New Component",
-    subtitle: "Create new software components using standard templates",
-    ...headerOptions
-  }, /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, {
-    ...contextMenu
-  })), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
-    title: "Available Templates"
-  }, allowed && /* @__PURE__ */ React.createElement(CreateButton, {
-    title: "Register Existing Component",
-    to: registerComponentLink && registerComponentLink()
-  }), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, {
-    initialFilter: "template",
-    hidden: true
-  }), /* @__PURE__ */ React.createElement(UserListPicker, {
-    initialFilter: "all",
-    availableFilters: ["all", "starred"]
-  }), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(TemplateList, {
-    key: index,
-    TemplateCardComponent,
-    group
-  })), /* @__PURE__ */ React.createElement(TemplateList, {
-    key: "other",
-    TemplateCardComponent,
-    group: otherTemplatesGroup
-  })))));
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a New Component",
+      title: "Create a New Component",
+      subtitle: "Create new software components using standard templates",
+      ...headerOptions
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...contextMenu })
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Available Templates" }, allowed && /* @__PURE__ */ React.createElement(
+    CreateButton,
+    {
+      title: "Register Existing Component",
+      to: registerComponentLink && registerComponentLink()
+    }
+  ), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, { initialFilter: "template", hidden: true }), /* @__PURE__ */ React.createElement(
+    UserListPicker,
+    {
+      initialFilter: "all",
+      availableFilters: ["all", "starred"]
+    }
+  ), /* @__PURE__ */ React.createElement(TemplateTypePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, groups && groups.map((group, index) => /* @__PURE__ */ React.createElement(
+    TemplateList,
+    {
+      key: index,
+      TemplateCardComponent,
+      group
+    }
+  )), /* @__PURE__ */ React.createElement(
+    TemplateList,
+    {
+      key: "other",
+      TemplateCardComponent,
+      group: otherTemplatesGroup
+    }
+  )))));
 };
 const ScaffolderPage = ({
   TemplateCardComponent,
   groups,
   contextMenu,
   headerOptions
-}) => /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(ScaffolderPageContents, {
-  TemplateCardComponent,
-  groups,
-  contextMenu,
-  headerOptions
-}));
+}) => /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(
+  ScaffolderPageContents,
+  {
+    TemplateCardComponent,
+    groups,
+    contextMenu,
+    headerOptions
+  }
+));
 
 function isObject$1(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -509,10 +498,7 @@ function transformSchemaToProps(inputSchema, layouts = []) {
   return { schema, uiSchema };
 }
 
-const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, {
-  content: description,
-  linkTarget: "_blank"
-});
+const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: description, linkTarget: "_blank" });
 
 var fieldOverrides = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -572,28 +558,22 @@ const ReviewStep = (props) => {
     handleReset,
     steps
   } = props;
-  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Paper, {
-    square: true,
-    elevation: 0
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "h6"
-  }, "Review and create"), /* @__PURE__ */ React.createElement(StructuredMetadataTable, {
-    dense: true,
-    metadata: getReviewData(formData, getUiSchemasFromSteps(steps))
-  }), /* @__PURE__ */ React.createElement(Box, {
-    mb: 4
-  }), /* @__PURE__ */ React.createElement(Button$1, {
-    onClick: handleBack,
-    disabled: disableButtons
-  }, "Back"), /* @__PURE__ */ React.createElement(Button$1, {
-    onClick: handleReset,
-    disabled: disableButtons
-  }, "Reset"), /* @__PURE__ */ React.createElement(Button$1, {
-    variant: "contained",
-    color: "primary",
-    onClick: handleCreate,
-    disabled: disableButtons
-  }, "Create")));
+  return /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Paper, { square: true, elevation: 0 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, "Review and create"), /* @__PURE__ */ React.createElement(
+    StructuredMetadataTable,
+    {
+      dense: true,
+      metadata: getReviewData(formData, getUiSchemasFromSteps(steps))
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { mb: 4 }), /* @__PURE__ */ React.createElement(Button$1, { onClick: handleBack, disabled: disableButtons }, "Back"), /* @__PURE__ */ React.createElement(Button$1, { onClick: handleReset, disabled: disableButtons }, "Reset"), /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      variant: "contained",
+      color: "primary",
+      onClick: handleCreate,
+      disabled: disableButtons
+    },
+    "Create"
+  )));
 };
 
 const Form$1 = withTheme(Theme);
@@ -675,51 +655,46 @@ const MultistepJsonForm = (props) => {
     }
   };
   const ReviewStepElement = ReviewStepComponent != null ? ReviewStepComponent : ReviewStep;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper, {
-    activeStep,
-    orientation: "vertical"
-  }, steps.map(({ title, schema, ...formProps }, index) => {
-    return /* @__PURE__ */ React.createElement(Step, {
-      key: title
-    }, /* @__PURE__ */ React.createElement(StepLabel, {
-      "aria-label": `Step ${index + 1} ${title}`,
-      "aria-disabled": "false",
-      tabIndex: 0
-    }, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h6",
-      component: "h3"
-    }, title)), /* @__PURE__ */ React.createElement(StepContent, {
-      key: title
-    }, /* @__PURE__ */ React.createElement(Form$1, {
-      showErrorList: false,
-      fields: { ...fieldOverrides, ...fields },
-      widgets,
-      noHtml5Validate: true,
-      formData,
-      formContext: { formData },
-      onChange,
-      onSubmit: (e) => {
-        if (e.errors.length === 0)
-          handleNext();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper, { activeStep, orientation: "vertical" }, steps.map(({ title, schema, ...formProps }, index) => {
+    return /* @__PURE__ */ React.createElement(Step, { key: title }, /* @__PURE__ */ React.createElement(
+      StepLabel,
+      {
+        "aria-label": `Step ${index + 1} ${title}`,
+        "aria-disabled": "false",
+        tabIndex: 0
       },
-      ...formProps,
-      ...transformSchemaToProps(schema, layouts)
-    }, /* @__PURE__ */ React.createElement(Button$1, {
-      disabled: activeStep === 0,
-      onClick: handleBack
-    }, "Back"), /* @__PURE__ */ React.createElement(Button$1, {
-      variant: "contained",
-      color: "primary",
-      type: "submit"
-    }, "Next step"))));
-  })), activeStep === steps.length && /* @__PURE__ */ React.createElement(ReviewStepElement, {
-    disableButtons,
-    handleBack,
-    handleCreate,
-    handleReset,
-    formData,
-    steps: getSchemasFromSteps(steps)
-  }));
+      /* @__PURE__ */ React.createElement(Typography, { variant: "h6", component: "h3" }, title)
+    ), /* @__PURE__ */ React.createElement(StepContent, { key: title }, /* @__PURE__ */ React.createElement(
+      Form$1,
+      {
+        showErrorList: false,
+        fields: { ...fieldOverrides, ...fields },
+        widgets,
+        noHtml5Validate: true,
+        formData,
+        formContext: { formData },
+        onChange,
+        onSubmit: (e) => {
+          if (e.errors.length === 0)
+            handleNext();
+        },
+        ...formProps,
+        ...transformSchemaToProps(schema, layouts)
+      },
+      /* @__PURE__ */ React.createElement(Button$1, { disabled: activeStep === 0, onClick: handleBack }, "Back"),
+      /* @__PURE__ */ React.createElement(Button$1, { variant: "contained", color: "primary", type: "submit" }, "Next step")
+    )));
+  })), activeStep === steps.length && /* @__PURE__ */ React.createElement(
+    ReviewStepElement,
+    {
+      disableButtons,
+      handleBack,
+      handleCreate,
+      handleReset,
+      formData,
+      steps: getSchemasFromSteps(steps)
+    }
+  ));
 };
 
 function isObject(obj) {
@@ -832,15 +807,11 @@ const TemplatePage = ({
   };
   if (error) {
     errorApi.post(new Error(`Failed to load template, ${error}`));
-    return /* @__PURE__ */ React.createElement(Navigate, {
-      to: rootRoute()
-    });
+    return /* @__PURE__ */ React.createElement(Navigate, { to: rootRoute() });
   }
   if (!loading && !schema) {
     errorApi.post(new Error("Template was not found."));
-    return /* @__PURE__ */ React.createElement(Navigate, {
-      to: rootRoute()
-    });
+    return /* @__PURE__ */ React.createElement(Navigate, { to: rootRoute() });
   }
   const customFieldComponents = Object.fromEntries(
     customFieldExtensions.map(({ name, component }) => [name, component])
@@ -848,40 +819,44 @@ const TemplatePage = ({
   const customFieldValidators = Object.fromEntries(
     customFieldExtensions.map(({ name, validation }) => [name, validation])
   );
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: { entityRef: templateRef }
-  }, /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    pageTitleOverride: "Create a New Component",
-    title: "Create a New Component",
-    subtitle: "Create new software components using standard templates",
-    ...headerOptions
-  }), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, {
-    "data-testid": "loading-progress"
-  }), schema && /* @__PURE__ */ React.createElement(InfoCard, {
-    title: schema.title,
-    noPadding: true,
-    titleTypographyProps: { component: "h2" }
-  }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
-    ReviewStepComponent,
-    formData: formState,
-    fields: customFieldComponents,
-    onChange: handleChange,
-    onReset: handleFormReset,
-    onFinish: handleCreate,
-    layouts,
-    steps: schema.steps.map((step) => {
-      return {
-        ...step,
-        validate: createValidator(
-          step.schema,
-          customFieldValidators,
-          { apiHolder }
-        )
-      };
-    })
-  })))));
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a New Component",
+      title: "Create a New Component",
+      subtitle: "Create new software components using standard templates",
+      ...headerOptions
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, { "data-testid": "loading-progress" }), schema && /* @__PURE__ */ React.createElement(
+    InfoCard,
+    {
+      title: schema.title,
+      noPadding: true,
+      titleTypographyProps: { component: "h2" }
+    },
+    /* @__PURE__ */ React.createElement(
+      MultistepJsonForm,
+      {
+        ReviewStepComponent,
+        formData: formState,
+        fields: customFieldComponents,
+        onChange: handleChange,
+        onReset: handleFormReset,
+        onFinish: handleCreate,
+        layouts,
+        steps: schema.steps.map((step) => {
+          return {
+            ...step,
+            validate: createValidator(
+              step.schema,
+              customFieldValidators,
+              { apiHolder }
+            )
+          };
+        })
+      }
+    )
+  ))));
 };
 
 const useStyles$d = makeStyles((theme) => ({
@@ -915,10 +890,13 @@ const ActionsPage = () => {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
   if (error) {
-    return /* @__PURE__ */ React.createElement(ErrorPage, {
-      statusMessage: "Failed to load installed actions",
-      status: "500"
-    });
+    return /* @__PURE__ */ React.createElement(
+      ErrorPage,
+      {
+        statusMessage: "Failed to load installed actions",
+        status: "500"
+      }
+    );
   }
   const formatRows = (input) => {
     const properties = input.properties;
@@ -932,34 +910,20 @@ const ActionsPage = () => {
       const codeClassname = classNames(classes.code, {
         [classes.codeRequired]: (_a = input.required) == null ? void 0 : _a.includes(key)
       });
-      return /* @__PURE__ */ React.createElement(TableRow, {
-        key
-      }, /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("div", {
-        className: codeClassname
-      }, key)), /* @__PURE__ */ React.createElement(TableCell, null, props.title), /* @__PURE__ */ React.createElement(TableCell, null, props.description), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("span", {
-        className: classes.code
-      }, props.type)));
+      return /* @__PURE__ */ React.createElement(TableRow, { key }, /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("div", { className: codeClassname }, key)), /* @__PURE__ */ React.createElement(TableCell, null, props.title), /* @__PURE__ */ React.createElement(TableCell, null, props.description), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("span", { className: classes.code }, props.type)));
     });
   };
   const renderTable = (input) => {
     if (!input.properties) {
       return void 0;
     }
-    return /* @__PURE__ */ React.createElement(TableContainer, {
-      component: Paper
-    }, /* @__PURE__ */ React.createElement(Table, {
-      size: "small"
-    }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, null, "Name"), /* @__PURE__ */ React.createElement(TableCell, null, "Title"), /* @__PURE__ */ React.createElement(TableCell, null, "Description"), /* @__PURE__ */ React.createElement(TableCell, null, "Type"))), /* @__PURE__ */ React.createElement(TableBody, null, formatRows(input))));
+    return /* @__PURE__ */ React.createElement(TableContainer, { component: Paper }, /* @__PURE__ */ React.createElement(Table, { size: "small" }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, null, "Name"), /* @__PURE__ */ React.createElement(TableCell, null, "Title"), /* @__PURE__ */ React.createElement(TableCell, null, "Description"), /* @__PURE__ */ React.createElement(TableCell, null, "Type"))), /* @__PURE__ */ React.createElement(TableBody, null, formatRows(input))));
   };
   const renderTables = (name, input) => {
     if (!input) {
       return void 0;
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h6"
-    }, name), input.map((i, index) => /* @__PURE__ */ React.createElement("div", {
-      key: index
-    }, renderTable(i))));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, name), input.map((i, index) => /* @__PURE__ */ React.createElement("div", { key: index }, renderTable(i))));
   };
   const items = value == null ? void 0 : value.map((action) => {
     var _a, _b, _c, _d;
@@ -967,29 +931,16 @@ const ActionsPage = () => {
       return void 0;
     }
     const oneOf = renderTables("oneOf", (_b = (_a = action.schema) == null ? void 0 : _a.input) == null ? void 0 : _b.oneOf);
-    return /* @__PURE__ */ React.createElement(Box, {
-      pb: 4,
-      key: action.id
-    }, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h4",
-      className: classes.code
-    }, action.id), /* @__PURE__ */ React.createElement(Typography, null, action.description), ((_c = action.schema) == null ? void 0 : _c.input) && /* @__PURE__ */ React.createElement(Box, {
-      pb: 2
-    }, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h5"
-    }, "Input"), renderTable(action.schema.input), oneOf), ((_d = action.schema) == null ? void 0 : _d.output) && /* @__PURE__ */ React.createElement(Box, {
-      pb: 2
-    }, /* @__PURE__ */ React.createElement(Typography, {
-      variant: "h5"
-    }, "Output"), renderTable(action.schema.output)));
+    return /* @__PURE__ */ React.createElement(Box, { pb: 4, key: action.id }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", className: classes.code }, action.id), /* @__PURE__ */ React.createElement(Typography, null, action.description), ((_c = action.schema) == null ? void 0 : _c.input) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Input"), renderTable(action.schema.input), oneOf), ((_d = action.schema) == null ? void 0 : _d.output) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Output"), renderTable(action.schema.output)));
   });
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    pageTitleOverride: "Create a New Component",
-    title: "Installed actions",
-    subtitle: "This is the collection of all installed actions"
-  }), /* @__PURE__ */ React.createElement(Content, null, items));
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a New Component",
+      title: "Installed actions",
+      subtitle: "This is the collection of all installed actions"
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
 const showDirectoryPicker = window.showDirectoryPicker;
@@ -1213,15 +1164,11 @@ function DirectoryEditorProvider(props) {
     execute(directory);
   }, [execute, directory]);
   if (error) {
-    return /* @__PURE__ */ React.createElement(ErrorPanel, {
-      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);
+  return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
 }
 
 const MAX_CONTENT_SIZE = 64 * 1024;
@@ -1229,10 +1176,10 @@ const CHUNK_SIZE = 32 * 1024;
 const DryRunContext = createContext(void 0);
 function base64EncodeContent(content) {
   if (content.length > MAX_CONTENT_SIZE) {
-    return btoa("<file too large>");
+    return window.btoa("<file too large>");
   }
   try {
-    return btoa(content);
+    return window.btoa(content);
   } catch {
     const decoder = new TextEncoder();
     const buffer = decoder.encode(content);
@@ -1242,7 +1189,7 @@ function base64EncodeContent(content) {
         String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
       );
     }
-    return btoa(chunks.join(""));
+    return window.btoa(chunks.join(""));
   }
 }
 function DryRunProvider(props) {
@@ -1317,9 +1264,7 @@ function DryRunProvider(props) {
     }),
     [state, selectResult, deleteResult, execute]
   );
-  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, {
-    value: dryRun
-  }, props.children);
+  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, { value: dryRun }, props.children);
 }
 function useDryRun() {
   const value = useContext(DryRunContext);
@@ -1440,23 +1385,19 @@ function TemplateEditorForm(props) {
   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(MultistepJsonForm, {
-    steps,
-    fields,
-    formData: data,
-    onChange: (e) => onUpdate(e.formData),
-    onReset: () => onUpdate({}),
-    finishButtonLabel: onDryRun && "Try It",
-    onFinish: onDryRun && (() => onDryRun(data)),
-    layouts
-  }))));
+  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(
+    MultistepJsonForm,
+    {
+      steps,
+      fields,
+      formData: data,
+      onChange: (e) => onUpdate(e.formData),
+      onReset: () => onUpdate({}),
+      finishButtonLabel: onDryRun && "Try It",
+      onFinish: onDryRun && (() => onDryRun(data)),
+      layouts
+    }
+  ))));
 }
 function TemplateEditorFormDirectoryEditorDryRun(props) {
   const { setErrorText, fieldExtensions = [], layouts } = props;
@@ -1481,15 +1422,18 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
     }
   };
   const content = selectedFile && selectedFile.path.match(/\.ya?ml$/) ? selectedFile.content : void 0;
-  return /* @__PURE__ */ React.createElement(TemplateEditorForm, {
-    onDryRun: handleDryRun,
-    fieldExtensions,
-    setErrorText,
-    content,
-    data,
-    onUpdate: setData,
-    layouts
-  });
+  return /* @__PURE__ */ React.createElement(
+    TemplateEditorForm,
+    {
+      onDryRun: handleDryRun,
+      fieldExtensions,
+      setErrorText,
+      content,
+      data,
+      onUpdate: setData,
+      layouts
+    }
+  );
 }
 TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
 
@@ -1571,63 +1515,57 @@ const CustomFieldExplorer = ({
     },
     [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
-  }, /* @__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$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,
-    data: formState,
-    onUpdate: setFormState,
-    setErrorText: () => null
-  })));
+  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 }, /* @__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$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,
+      data: formState,
+      onUpdate: setFormState,
+      setErrorText: () => null
+    }
+  )));
 };
 
 const useStyles$a = makeStyles$1((theme) => ({
@@ -1650,71 +1588,64 @@ const useStyles$a = makeStyles$1((theme) => ({
 function TemplateEditorIntro(props) {
   const classes = useStyles$a();
   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 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$9 = makeStyles$1((theme) => ({
@@ -1736,26 +1667,35 @@ const useStyles$9 = makeStyles$1((theme) => ({
 function DryRunResultsList() {
   const classes = useStyles$9();
   const dryRun = useDryRun();
-  return /* @__PURE__ */ React.createElement(List$1, {
-    className: classes.root,
-    dense: true
-  }, dryRun.results.map((result) => {
+  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))));
+    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)
+      ))
+    );
   }));
 }
 
@@ -1813,18 +1753,9 @@ function parseFileEntires(paths) {
 }
 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 });
   }
-  return /* @__PURE__ */ React.createElement(TreeItem, {
-    nodeId: entry.path,
-    label: entry.name
-  }, entry.children.map((child) => /* @__PURE__ */ React.createElement(FileTreeItem, {
-    key: child.path,
-    entry: child
-  })));
+  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$8();
@@ -1832,20 +1763,21 @@ function FileBrowser(props) {
     () => 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);
+  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
-  })));
+    },
+    fileTree.map((entry) => /* @__PURE__ */ React.createElement(FileTreeItem, { key: entry.path, entry }))
+  );
 }
 
 const useStyles$7 = makeStyles$1((theme) => ({
@@ -1869,15 +1801,7 @@ function DryRunResultsSplitView(props) {
   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]));
+  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$6 = makeStyles$1({
@@ -1926,18 +1850,24 @@ function FilesContent() {
   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) : ""
-  }));
+  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;
@@ -1965,13 +1895,14 @@ function LogContent() {
     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 : ""
-  }));
+  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;
@@ -1980,43 +1911,24 @@ function OutputContent() {
   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)
-  }));
+  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$6();
   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))));
+  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$5 = makeStyles$1((theme) => ({
@@ -2052,22 +1964,26 @@ function DryRunResults() {
       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))));
+  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$4 = makeStyles((theme) => ({
@@ -2106,33 +2022,29 @@ function TemplateEditorBrowser(props) {
     }
     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)
-  }));
+  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$3 = makeStyles((theme) => ({
@@ -2183,34 +2095,37 @@ function TemplateEditorTextArea(props) {
       }
     }
   );
-  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);
+  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
     }
-  }, /* @__PURE__ */ React.createElement(RefreshIcon, null))))));
+  ), (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;
@@ -2221,15 +2136,18 @@ function TemplateEditorDirectoryEditorTextArea(props) {
   } : {
     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
-  });
+  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;
 
@@ -2263,27 +2181,14 @@ const useStyles$2 = makeStyles({
 const TemplateEditor = (props) => {
   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, {
-    setErrorText,
-    fieldExtensions: props.fieldExtensions,
-    layouts: props.layouts
-  })), /* @__PURE__ */ React.createElement("section", {
-    className: classes.results
-  }, /* @__PURE__ */ React.createElement(DryRunResults, null)))));
+  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
@@ -2400,88 +2305,91 @@ const TemplateFormPreviewer = ({
     },
     [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$1, {
-    key: idx,
-    value: option.value
-  }, option.label)))), /* @__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,
-    onUpdate: setTemplateYaml,
-    errorText
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: classes.preview
-  }, /* @__PURE__ */ React.createElement(TemplateEditorForm, {
-    content: templateYaml,
-    contentIsSpec: true,
-    fieldExtensions: customFieldExtensions,
-    data: formState,
-    onUpdate: setFormState,
-    setErrorText,
-    layouts
-  }))));
+  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$1, { key: idx, value: option.value }, option.label))
+  )), /* @__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,
+      onUpdate: setTemplateYaml,
+      errorText
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(
+    TemplateEditorForm,
+    {
+      content: templateYaml,
+      contentIsSpec: true,
+      fieldExtensions: customFieldExtensions,
+      data: formState,
+      onUpdate: setFormState,
+      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
-    });
+    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
-    });
+    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)
-    });
+    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" });
+    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);
+    ));
+  }
+  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 useStyles = makeStyles(
@@ -2535,33 +2443,20 @@ const OwnerListPicker = (props) => {
   const { filter, onSelectOwner } = props;
   const classes = useStyles();
   const filterGroups = getFilterGroups();
-  return /* @__PURE__ */ React.createElement(Card, {
-    className: classes.root
-  }, filterGroups.map((group) => /* @__PURE__ */ React.createElement(Fragment, {
-    key: group.name
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "subtitle2",
-    className: classes.title
-  }, group.name), /* @__PURE__ */ React.createElement(Card, {
-    className: classes.groupWrapper
-  }, /* @__PURE__ */ React.createElement(List$2, {
-    disablePadding: true,
-    dense: true
-  }, group.items.map((item) => /* @__PURE__ */ React.createElement(MenuItem$1, {
-    key: item.id,
-    button: true,
-    divider: true,
-    onClick: () => onSelectOwner(item.id),
-    selected: item.id === filter,
-    className: classes.menuItem,
-    "data-testid": `owner-picker-${item.id}`
-  }, item.icon && /* @__PURE__ */ React.createElement(ListItemIcon$1, {
-    className: classes.listIcon
-  }, /* @__PURE__ */ React.createElement(item.icon, {
-    fontSize: "small"
-  })), /* @__PURE__ */ React.createElement(ListItemText$1, null, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "body1"
-  }, item.label)))))))));
+  return /* @__PURE__ */ React.createElement(Card, { className: classes.root }, filterGroups.map((group) => /* @__PURE__ */ React.createElement(Fragment, { key: group.name }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", className: classes.title }, group.name), /* @__PURE__ */ React.createElement(Card, { className: classes.groupWrapper }, /* @__PURE__ */ React.createElement(List$2, { disablePadding: true, dense: true }, group.items.map((item) => /* @__PURE__ */ React.createElement(
+    MenuItem$1,
+    {
+      key: item.id,
+      button: true,
+      divider: true,
+      onClick: () => onSelectOwner(item.id),
+      selected: item.id === filter,
+      className: classes.menuItem,
+      "data-testid": `owner-picker-${item.id}`
+    },
+    item.icon && /* @__PURE__ */ React.createElement(ListItemIcon$1, { className: classes.listIcon }, /* @__PURE__ */ React.createElement(item.icon, { fontSize: "small" })),
+    /* @__PURE__ */ React.createElement(ListItemText$1, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, item.label))
+  )))))));
 };
 
 const CreatedAtColumn = ({ createdAt }) => {
@@ -2583,10 +2478,13 @@ const OwnerEntityColumn = ({ entityRef }) => {
   if (loading || error) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(EntityRefLink, {
-    entityRef: parseEntityRef(entityRef),
-    title: (_c = (_b = (_a = value == null ? void 0 : value.spec) == null ? void 0 : _a.profile) == null ? void 0 : _b.displayName) != null ? _c : value == null ? void 0 : value.metadata.name
-  });
+  return /* @__PURE__ */ React.createElement(
+    EntityRefLink,
+    {
+      entityRef: parseEntityRef(entityRef),
+      title: (_c = (_b = (_a = value == null ? void 0 : value.spec) == null ? void 0 : _a.profile) == null ? void 0 : _b.displayName) != null ? _c : value == null ? void 0 : value.metadata.name
+    }
+  );
 };
 
 const TaskStatusColumn = ({ status }) => {
@@ -2610,10 +2508,7 @@ const TemplateTitleColumn = ({ entityRef }) => {
   if (loading || error || !entityRef) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(EntityRefLink, {
-    entityRef: parseEntityRef(entityRef),
-    title: value == null ? void 0 : value.title
-  });
+  return /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: parseEntityRef(entityRef), title: value == null ? void 0 : value.title });
 };
 
 const ListTaskPageContent = (props) => {
@@ -2636,77 +2531,75 @@ const ListTaskPageContent = (props) => {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
   if (error) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ErrorPanel, {
-      error
-    }), /* @__PURE__ */ React.createElement(EmptyState, {
-      missing: "info",
-      title: "No information to display",
-      description: "There is no Tasks or there was an issue communicating with backend."
-    }));
-  }
-  return /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(OwnerListPicker, {
-    filter: ownerFilter,
-    onSelectOwner: (id) => setOwnerFilter(id)
-  })), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(Table$1, {
-    data: (_a = value == null ? void 0 : value.tasks) != null ? _a : [],
-    title: "Tasks",
-    columns: [
-      {
-        title: "Task ID",
-        field: "id",
-        render: (row) => /* @__PURE__ */ React.createElement(Link, {
-          to: `${rootLink()}/tasks/${row.id}`
-        }, row.id)
-      },
-      {
-        title: "Template",
-        render: (row) => {
-          var _a2;
-          return /* @__PURE__ */ React.createElement(TemplateTitleColumn, {
-            entityRef: (_a2 = row.spec.templateInfo) == null ? void 0 : _a2.entityRef
-          });
-        }
-      },
-      {
-        title: "Created",
-        field: "createdAt",
-        render: (row) => /* @__PURE__ */ React.createElement(CreatedAtColumn, {
-          createdAt: row.createdAt
-        })
-      },
-      {
-        title: "Owner",
-        field: "createdBy",
-        render: (row) => {
-          var _a2, _b;
-          return /* @__PURE__ */ React.createElement(OwnerEntityColumn, {
-            entityRef: (_b = (_a2 = row.spec) == null ? void 0 : _a2.user) == null ? void 0 : _b.ref
-          });
-        }
-      },
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ErrorPanel, { error }), /* @__PURE__ */ React.createElement(
+      EmptyState,
       {
-        title: "Status",
-        field: "status",
-        render: (row) => /* @__PURE__ */ React.createElement(TaskStatusColumn, {
-          status: row.status
-        })
+        missing: "info",
+        title: "No information to display",
+        description: "There is no Tasks or there was an issue communicating with backend."
       }
-    ]
-  })));
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(
+    OwnerListPicker,
+    {
+      filter: ownerFilter,
+      onSelectOwner: (id) => setOwnerFilter(id)
+    }
+  )), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(
+    Table$1,
+    {
+      data: (_a = value == null ? void 0 : value.tasks) != null ? _a : [],
+      title: "Tasks",
+      columns: [
+        {
+          title: "Task ID",
+          field: "id",
+          render: (row) => /* @__PURE__ */ React.createElement(Link, { to: `${rootLink()}/tasks/${row.id}` }, row.id)
+        },
+        {
+          title: "Template",
+          render: (row) => {
+            var _a2;
+            return /* @__PURE__ */ React.createElement(
+              TemplateTitleColumn,
+              {
+                entityRef: (_a2 = row.spec.templateInfo) == null ? void 0 : _a2.entityRef
+              }
+            );
+          }
+        },
+        {
+          title: "Created",
+          field: "createdAt",
+          render: (row) => /* @__PURE__ */ React.createElement(CreatedAtColumn, { createdAt: row.createdAt })
+        },
+        {
+          title: "Owner",
+          field: "createdBy",
+          render: (row) => {
+            var _a2, _b;
+            return /* @__PURE__ */ React.createElement(OwnerEntityColumn, { entityRef: (_b = (_a2 = row.spec) == null ? void 0 : _a2.user) == null ? void 0 : _b.ref });
+          }
+        },
+        {
+          title: "Status",
+          field: "status",
+          render: (row) => /* @__PURE__ */ React.createElement(TaskStatusColumn, { status: row.status })
+        }
+      ]
+    }
+  )));
 };
 const ListTasksPage = (props) => {
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    pageTitleOverride: "Templates Tasks",
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "List template tasks ", /* @__PURE__ */ React.createElement(Lifecycle, {
-      shorthand: true,
-      alpha: true
-    })),
-    subtitle: "All tasks that have been started"
-  }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ListTaskPageContent, {
-    ...props
-  })));
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Templates Tasks",
+      title: /* @__PURE__ */ React.createElement(React.Fragment, null, "List template tasks ", /* @__PURE__ */ React.createElement(Lifecycle, { shorthand: true, alpha: true })),
+      subtitle: "All tasks that have been started"
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ListTaskPageContent, { ...props })));
 };
 
 const Router = (props) => {
@@ -2747,52 +2640,63 @@ const Router = (props) => {
       ),
       []
     );
-    return /* @__PURE__ */ React.createElement(Navigate, {
-      to: newLink({ namespace: "default", templateName })
-    });
+    return /* @__PURE__ */ React.createElement(Navigate, { to: newLink({ namespace: "default", templateName }) });
   };
-  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
-    path: "/",
-    element: /* @__PURE__ */ React.createElement(ScaffolderPage, {
-      groups,
-      TemplateCardComponent,
-      contextMenu: props.contextMenu,
-      headerOptions: props.headerOptions
-    })
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: legacySelectedTemplateRouteRef.path,
-    element: /* @__PURE__ */ React.createElement(RedirectingComponent, null)
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: selectedTemplateRouteRef.path,
-    element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePage, {
-      ReviewStepComponent,
-      customFieldExtensions: fieldExtensions,
-      layouts: customLayouts,
-      headerOptions: props.headerOptions
-    }))
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: scaffolderListTaskRouteRef.path,
-    element: /* @__PURE__ */ React.createElement(ListTasksPage, null)
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: scaffolderTaskRouteRef.path,
-    element: /* @__PURE__ */ React.createElement(TaskPageElement, null)
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: actionsRouteRef.path,
-    element: /* @__PURE__ */ React.createElement(ActionsPage, null)
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: editRouteRef.path,
-    element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplateEditorPage, {
-      defaultPreviewTemplate,
-      customFieldExtensions: fieldExtensions,
-      layouts: customLayouts
-    }))
-  }), /* @__PURE__ */ React.createElement(Route, {
-    path: "preview",
-    element: /* @__PURE__ */ React.createElement(Navigate, {
-      to: "../edit"
-    })
-  }));
+  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: "/",
+      element: /* @__PURE__ */ React.createElement(
+        ScaffolderPage,
+        {
+          groups,
+          TemplateCardComponent,
+          contextMenu: props.contextMenu,
+          headerOptions: props.headerOptions
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: legacySelectedTemplateRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(RedirectingComponent, null)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: selectedTemplateRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplatePage,
+        {
+          ReviewStepComponent,
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts,
+          headerOptions: props.headerOptions
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: scaffolderListTaskRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(ListTasksPage, null)
+    }
+  ), /* @__PURE__ */ React.createElement(Route, { path: scaffolderTaskRouteRef.path, element: /* @__PURE__ */ React.createElement(TaskPageElement, null) }), /* @__PURE__ */ React.createElement(Route, { path: actionsRouteRef.path, element: /* @__PURE__ */ React.createElement(ActionsPage, null) }), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: editRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplateEditorPage,
+        {
+          defaultPreviewTemplate,
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(Route, { path: "preview", element: /* @__PURE__ */ React.createElement(Navigate, { to: "../edit" }) }));
 };
 
 export { Router };
-//# sourceMappingURL=Router-c72ed8e0.esm.js.map
+//# sourceMappingURL=Router-95a01240.esm.js.map