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

package/dist/esm/{ListTasksPage-b7beed35.esm.js → DryRunResults-a4d44358.esm.js}

@@ -1,57 +1,360 @@
-import React, { useState, Fragment, createContext, useEffect, useContext, useRef, useCallback, useMemo, Children } from 'react';
+import React, { useRef, useEffect, memo, useState, useMemo, Fragment, createContext, useContext, useCallback, Children } from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
-import { makeStyles, Box, Typography, Accordion, AccordionSummary, AccordionDetails, Grid, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Collapse, Tooltip as Tooltip$1, IconButton as IconButton$1, Divider as Divider$1, Card as Card$1, List as List$1, MenuItem, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
+import { scaffolderApiRef, useTaskEventStream } from '@backstage/plugin-scaffolder-react';
+import { Box, makeStyles, Grid, Typography, StepButton, CircularProgress, Paper, Button, Accordion, AccordionSummary, AccordionDetails, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Collapse, Card, List, MenuItem, ListItemIcon, ListItemText, Tooltip as Tooltip$1, IconButton, Divider } from '@material-ui/core';
 import classNames from 'classnames';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
-import { useApi, useRouteRef } from '@backstage/core-plugin-api';
-import { Progress, ErrorPage, MarkdownContent, Page, Header, Content, CodeSnippet, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1, Link } from '@backstage/core-components';
+import { useApp, useRouteRef, useApi, useRouteRefParams } from '@backstage/core-plugin-api';
+import { DismissableBanner, Link, Page, Header, Content, ErrorPage, Progress, LogViewer, MarkdownContent, CodeSnippet, StatusError, StatusOK, StatusPending, Lifecycle, ErrorPanel, EmptyState, Table as Table$1 } from '@backstage/core-components';
 import Chip from '@material-ui/core/Chip';
-import Card from '@material-ui/core/Card';
+import { r as rootRouteRef, o as selectedTemplateRouteRef, w as scaffolderTaskRouteRef, y as EntityPicker, z as EntityPickerSchema, A as EntityNamePicker, B as entityNamePickerValidation, C as EntityNamePickerSchema, D as EntityTagsPicker, F as EntityTagsPickerSchema, G as RepoUrlPicker, i as repoPickerValidation, H as RepoUrlPickerSchema, I as OwnerPicker, J as OwnerPickerSchema, K as OwnedEntityPicker, N as OwnedEntityPickerSchema, P as MyGroupsPicker, l as MyGroupsPickerSchema } from './OngoingTask-8acb140b.esm.js';
+import { entityRouteRef, catalogApiRef, EntityRefLink, CatalogFilterLayout } from '@backstage/plugin-catalog-react';
+import SettingsIcon from '@material-ui/icons/Settings';
+import AllIcon from '@material-ui/icons/FontDownload';
+import { DateTime, Interval } from 'luxon';
+import humanizeDuration from 'humanize-duration';
+import Typography$1 from '@material-ui/core/Typography';
+import { parseEntityRef } from '@backstage/catalog-model';
+import Card$1 from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
 import Tooltip from '@material-ui/core/Tooltip';
-import Typography$1 from '@material-ui/core/Typography';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import { makeStyles as makeStyles$1, createStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import SaveIcon from '@material-ui/icons/Save';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
+import { showPanel } from '@codemirror/view';
+import { useAsync as useAsync$1, useRerender, useKeyboardEvent, usePrevious } from '@react-hookz/web';
+import CodeMirror from '@uiw/react-codemirror';
 import Accordion$1 from '@material-ui/core/Accordion';
 import AccordionDetails$1 from '@material-ui/core/AccordionDetails';
 import AccordionSummary$1 from '@material-ui/core/AccordionSummary';
-import Divider from '@material-ui/core/Divider';
-import { useAsync as useAsync$1, useRerender, usePrevious, useKeyboardEvent } from '@react-hookz/web';
+import Divider$1 from '@material-ui/core/Divider';
 import yaml from 'yaml';
-import IconButton from '@material-ui/core/IconButton';
-import List from '@material-ui/core/List';
+import IconButton$1 from '@material-ui/core/IconButton';
+import List$1 from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemIcon$1 from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItemText$1 from '@material-ui/core/ListItemText';
 import Cancel from '@material-ui/icons/Cancel';
 import Check from '@material-ui/icons/Check';
 import DeleteIcon from '@material-ui/icons/Delete';
 import DownloadIcon from '@material-ui/icons/GetApp';
-import { StreamLanguage } from '@codemirror/language';
-import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
 import Box$1 from '@material-ui/core/Box';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
-import CodeMirror from '@uiw/react-codemirror';
-import { a as TaskStatusStepper, b as TaskPageLinks } from './TaskPage-d1a669e0.esm.js';
-import CloseIcon from '@material-ui/icons/Close';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import SaveIcon from '@material-ui/icons/Save';
 import TreeView from '@material-ui/lab/TreeView';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
-import { showPanel } from '@codemirror/view';
-import { x as EntityPicker, y as EntityPickerSchema, z as EntityNamePicker, A as entityNamePickerValidation, B as EntityNamePickerSchema, C as EntityTagsPicker, D as EntityTagsPickerSchema, F as RepoUrlPicker, h as repoPickerValidation, G as RepoUrlPickerSchema, H as OwnerPicker, I as OwnerPickerSchema, J as OwnedEntityPicker, K as OwnedEntityPickerSchema, L as MyGroupsPicker, k as MyGroupsPickerSchema, r as rootRouteRef } from './plugin-76d8b756.esm.js';
-import { catalogApiRef, EntityRefLink, CatalogFilterLayout } from '@backstage/plugin-catalog-react';
-import SettingsIcon from '@material-ui/icons/Settings';
-import AllIcon from '@material-ui/icons/FontDownload';
-import { DateTime, Interval } from 'luxon';
-import humanizeDuration from 'humanize-duration';
-import { parseEntityRef } from '@backstage/catalog-model';
+import LanguageIcon from '@material-ui/icons/Language';
+import Grid$1 from '@material-ui/core/Grid';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import Stepper from '@material-ui/core/Stepper';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import qs from 'qs';
+import { useNavigate } from 'react-router-dom';
+import useInterval from 'react-use/lib/useInterval';
+
+const TaskErrors = ({ error }) => {
+  const id = useRef("");
+  useEffect(() => {
+    id.current = String(Math.random());
+  }, [error]);
+  return error ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+    DismissableBanner,
+    {
+      id: id.current,
+      variant: "warning",
+      message: error.message
+    }
+  )) : null;
+};
+
+const useStyles$b = makeStyles({
+  svgIcon: {
+    display: "inline-block",
+    "& svg": {
+      display: "inline-block",
+      fontSize: "inherit",
+      verticalAlign: "baseline"
+    }
+  }
+});
+const IconLink = (props) => {
+  const { href, text, Icon, ...linkProps } = props;
+  const classes = useStyles$b();
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { component: "div", className: classes.svgIcon }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Link, { to: href, ...linkProps }, text || href)));
+};
+
+const TaskPageLinks = ({ output }) => {
+  const { links = [] } = output;
+  const app = useApp();
+  const entityRoute = useRouteRef(entityRouteRef);
+  const iconResolver = (key) => {
+    var _a;
+    return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
+  };
+  return /* @__PURE__ */ React.createElement(Box, { px: 3, pb: 3 }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
+    if (entityRef) {
+      const entityName = parseEntityRef(entityRef, {
+        defaultKind: "<unknown>",
+        defaultNamespace: "<unknown>"
+      });
+      const target = entityRoute(entityName);
+      return { title, icon, url: target };
+    }
+    return { title, icon, url };
+  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(
+    IconLink,
+    {
+      key: `output-link-${i}`,
+      href: url,
+      text: title != null ? title : url,
+      Icon: iconResolver(icon),
+      target: "_blank"
+    }
+  )));
+};
+
+const useStyles$a = makeStyles$1(
+  (theme) => createStyles({
+    root: {
+      width: "100%"
+    },
+    button: {
+      marginBottom: theme.spacing(2),
+      marginLeft: theme.spacing(2)
+    },
+    actionsContainer: {
+      marginBottom: theme.spacing(2)
+    },
+    resetContainer: {
+      padding: theme.spacing(3)
+    },
+    labelWrapper: {
+      display: "flex",
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    stepWrapper: {
+      width: "100%"
+    }
+  })
+);
+const StepTimeTicker = ({ step }) => {
+  const [time, setTime] = useState("");
+  useInterval(() => {
+    if (!step.startedAt) {
+      setTime("");
+      return;
+    }
+    const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
+    const startedAt = DateTime.fromISO(step.startedAt);
+    const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
+    setTime(humanizeDuration(formatted, { round: true }));
+  }, 1e3);
+  return /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, time);
+};
+const useStepIconStyles = makeStyles$1(
+  (theme) => createStyles({
+    root: {
+      color: theme.palette.text.disabled,
+      display: "flex",
+      height: 22,
+      alignItems: "center"
+    },
+    completed: {
+      color: theme.palette.status.ok
+    },
+    error: {
+      color: theme.palette.status.error
+    }
+  })
+);
+function TaskStepIconComponent(props) {
+  const classes = useStepIconStyles();
+  const { active, completed, error } = props;
+  const getMiddle = () => {
+    if (active) {
+      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "24px" });
+    }
+    if (completed) {
+      return /* @__PURE__ */ React.createElement(Check, null);
+    }
+    if (error) {
+      return /* @__PURE__ */ React.createElement(Cancel, null);
+    }
+    return /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(classes.root, {
+        [classes.completed]: completed,
+        [classes.error]: error
+      })
+    },
+    getMiddle()
+  );
+}
+const TaskStatusStepper = memo(
+  (props) => {
+    const { steps, currentStepId, onUserStepChange } = props;
+    const classes = useStyles$a(props);
+    return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
+      Stepper,
+      {
+        activeStep: steps.findIndex((s) => s.id === currentStepId),
+        orientation: "vertical",
+        nonLinear: true
+      },
+      steps.map((step, index) => {
+        const isCancelled = step.status === "cancelled";
+        const isActive = step.status === "processing";
+        const isCompleted = step.status === "completed";
+        const isFailed = step.status === "failed";
+        const isSkipped = step.status === "skipped";
+        return /* @__PURE__ */ React.createElement(Step, { key: String(index), expanded: true }, /* @__PURE__ */ React.createElement(StepButton, { onClick: () => onUserStepChange(step.id) }, /* @__PURE__ */ React.createElement(
+          StepLabel,
+          {
+            StepIconProps: {
+              completed: isCompleted,
+              error: isFailed || isCancelled,
+              active: isActive
+            },
+            StepIconComponent: TaskStepIconComponent,
+            className: classes.stepWrapper
+          },
+          /* @__PURE__ */ React.createElement("div", { className: classes.labelWrapper }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "subtitle2" }, step.name), isSkipped ? /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, "Skipped") : /* @__PURE__ */ React.createElement(StepTimeTicker, { step }))
+        )));
+      })
+    ));
+  }
+);
+const hasLinks = ({ links = [] }) => links.length > 0;
+const TaskPage = (props) => {
+  const { loadingText } = props;
+  const classes = useStyles$a();
+  const navigate = useNavigate();
+  const rootPath = useRouteRef(rootRouteRef);
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
+  const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
+  const [clickedToCancel, setClickedToCancel] = useState(false);
+  const [lastActiveStepId, setLastActiveStepId] = useState(
+    void 0
+  );
+  const { taskId } = useRouteRefParams(scaffolderTaskRouteRef);
+  const taskStream = useTaskEventStream(taskId);
+  const completed = taskStream.completed;
+  const taskCancelled = taskStream.cancelled;
+  const steps = useMemo(
+    () => {
+      var _a, _b;
+      return (_b = (_a = taskStream.task) == null ? void 0 : _a.spec.steps.map((step) => {
+        var _a2;
+        return {
+          ...step,
+          ...(_a2 = taskStream == null ? void 0 : taskStream.steps) == null ? void 0 : _a2[step.id]
+        };
+      })) != null ? _b : [];
+    },
+    [taskStream]
+  );
+  useEffect(() => {
+    var _a;
+    const mostRecentFailedOrActiveStep = steps.find(
+      (step) => ["failed", "processing"].includes(step.status)
+    );
+    if (completed && !mostRecentFailedOrActiveStep) {
+      setLastActiveStepId((_a = steps[steps.length - 1]) == null ? void 0 : _a.id);
+      return;
+    }
+    setLastActiveStepId(mostRecentFailedOrActiveStep == null ? void 0 : mostRecentFailedOrActiveStep.id);
+  }, [steps, completed]);
+  const currentStepId = userSelectedStepId != null ? userSelectedStepId : lastActiveStepId;
+  const logAsString = useMemo(() => {
+    if (!currentStepId) {
+      return loadingText ? loadingText : "Loading...";
+    }
+    const log = taskStream.stepLogs[currentStepId];
+    if (!(log == null ? void 0 : log.length)) {
+      return "Waiting for logs...";
+    }
+    return log.join("\n");
+  }, [taskStream.stepLogs, currentStepId, loadingText]);
+  const taskNotFound = taskStream.completed && !taskStream.loading && !taskStream.task;
+  const { output } = taskStream;
+  const handleStartOver = () => {
+    var _a, _b, _c;
+    if (!taskStream.task || !((_b = (_a = taskStream.task) == null ? void 0 : _a.spec.templateInfo) == null ? void 0 : _b.entityRef)) {
+      navigate(rootPath());
+      return;
+    }
+    const formData = taskStream.task.spec.parameters;
+    const { name, namespace } = parseEntityRef(
+      (_c = taskStream.task.spec.templateInfo) == null ? void 0 : _c.entityRef
+    );
+    navigate(
+      `${templateRoute({ templateName: name, namespace })}?${qs.stringify({
+        formData: JSON.stringify(formData)
+      })}`
+    );
+  };
+  const handleCancel = async () => {
+    setClickedToCancel(true);
+    await scaffolderApi.cancelTask(taskId);
+  };
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: `Task ${taskId}`,
+      title: "Task Activity",
+      subtitle: `Activity for task: ${taskId}`
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, taskNotFound ? /* @__PURE__ */ React.createElement(
+    ErrorPage,
+    {
+      status: "404",
+      statusMessage: "Task not found",
+      additionalInfo: "No task found with this ID"
+    }
+  ) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Grid$1, { container: true }, /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(
+    TaskStatusStepper,
+    {
+      steps,
+      currentStepId,
+      onUserStepChange: setUserSelectedStepId
+    }
+  ), output && hasLinks(output) && /* @__PURE__ */ React.createElement(TaskPageLinks, { output }), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: classes.button,
+      onClick: handleStartOver,
+      disabled: !completed,
+      variant: "contained",
+      color: "primary"
+    },
+    "Start Over"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: classes.button,
+      onClick: handleCancel,
+      disabled: completed || taskCancelled || clickedToCancel,
+      variant: "outlined",
+      color: "secondary"
+    },
+    (taskCancelled || clickedToCancel) && !completed ? "Cancelling..." : "Cancel"
+  ))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 9 }, !currentStepId && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement("div", { style: { height: "80vh" } }, /* @__PURE__ */ React.createElement(TaskErrors, { error: taskStream.error }), /* @__PURE__ */ React.createElement(LogViewer, { text: logAsString })))))));
+};
 
 const useStyles$9 = makeStyles((theme) => ({
   code: {
@@ -197,168 +500,508 @@ const ActionsPage = () => {
   ), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
-const showDirectoryPicker = window.showDirectoryPicker;
-class WebFileAccess {
-  constructor(path, handle) {
-    this.path = path;
-    this.handle = handle;
-  }
-  file() {
-    return this.handle.getFile();
-  }
-  async save(data) {
-    const writable = await this.handle.createWritable();
-    await writable.write(data);
-    await writable.close();
-  }
-}
-class WebDirectoryAccess {
-  constructor(handle) {
-    this.handle = handle;
+const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
+  {
+    component: EntityPicker,
+    name: "EntityPicker",
+    schema: EntityPickerSchema
+  },
+  {
+    component: EntityNamePicker,
+    name: "EntityNamePicker",
+    validation: entityNamePickerValidation,
+    schema: EntityNamePickerSchema
+  },
+  {
+    component: EntityTagsPicker,
+    name: "EntityTagsPicker",
+    schema: EntityTagsPickerSchema
+  },
+  {
+    component: RepoUrlPicker,
+    name: "RepoUrlPicker",
+    validation: repoPickerValidation,
+    schema: RepoUrlPickerSchema
+  },
+  {
+    component: OwnerPicker,
+    name: "OwnerPicker",
+    schema: OwnerPickerSchema
+  },
+  {
+    component: OwnedEntityPicker,
+    name: "OwnedEntityPicker",
+    schema: OwnedEntityPickerSchema
+  },
+  {
+    component: MyGroupsPicker,
+    name: "MyGroupsPicker",
+    schema: MyGroupsPickerSchema
   }
-  async listFiles() {
-    const content = [];
-    for await (const entry of this.listDirectoryContents(this.handle)) {
-      content.push(entry);
+];
+
+const useStyles$8 = makeStyles(
+  (theme) => ({
+    root: {
+      backgroundColor: "rgba(0, 0, 0, .11)",
+      boxShadow: "none",
+      margin: theme.spacing(1, 0, 1, 0)
+    },
+    title: {
+      margin: theme.spacing(1, 0, 0, 1),
+      textTransform: "uppercase",
+      fontSize: 12,
+      fontWeight: "bold"
+    },
+    listIcon: {
+      minWidth: 30,
+      color: theme.palette.text.primary
+    },
+    menuItem: {
+      minHeight: theme.spacing(6)
+    },
+    groupWrapper: {
+      margin: theme.spacing(1, 1, 2, 1)
     }
-    return content;
+  }),
+  {
+    name: "ScaffolderReactOwnerListPicker"
   }
-  async *listDirectoryContents(dirHandle, basePath = []) {
-    for await (const handle of dirHandle.values()) {
-      if (handle.kind === "file") {
-        yield new WebFileAccess([...basePath, handle.name].join("/"), handle);
-      } else if (handle.kind === "directory") {
-        if (handle.name === ".git") {
-          continue;
+);
+function getFilterGroups() {
+  return [
+    {
+      name: "Task Owner",
+      items: [
+        {
+          id: "owned",
+          label: "Owned",
+          icon: SettingsIcon
+        },
+        {
+          id: "all",
+          label: "All",
+          icon: AllIcon
         }
-        yield* this.listDirectoryContents(handle, [...basePath, handle.name]);
-      }
-    }
-  }
-}
-class WebFileSystemAccess {
-  static isSupported() {
-    return Boolean(showDirectoryPicker);
-  }
-  static async requestDirectoryAccess() {
-    if (!showDirectoryPicker) {
-      throw new Error("File system access is not supported");
+      ]
     }
-    const handle = await showDirectoryPicker();
-    return new WebDirectoryAccess(handle);
-  }
-  constructor() {
-  }
+  ];
 }
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+const OwnerListPicker = (props) => {
+  const { filter, onSelectOwner } = props;
+  const classes = useStyles$8();
+  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",
+      component: "span",
+      className: classes.title
+    },
+    group.name
+  ), /* @__PURE__ */ React.createElement(Card, { className: classes.groupWrapper }, /* @__PURE__ */ React.createElement(List, { disablePadding: true, dense: true, role: "menu" }, group.items.map((item) => /* @__PURE__ */ React.createElement(
+    MenuItem,
+    {
+      key: item.id,
+      button: true,
+      divider: true,
+      ContainerProps: { role: "menuitem" },
+      onClick: () => onSelectOwner(item.id),
+      selected: item.id === filter,
+      className: classes.menuItem,
+      "data-testid": `owner-picker-${item.id}`
+    },
+    item.icon && /* @__PURE__ */ React.createElement(ListItemIcon, { className: classes.listIcon }, /* @__PURE__ */ React.createElement(item.icon, { fontSize: "small" })),
+    /* @__PURE__ */ React.createElement(ListItemText, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, item.label))
+  )))))));
 };
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
+
+const CreatedAtColumn = ({ createdAt }) => {
+  const createdAtTime = DateTime.fromISO(createdAt);
+  const formatted = Interval.fromDateTimes(createdAtTime, DateTime.local()).toDuration().valueOf();
+  return /* @__PURE__ */ React.createElement(Typography$1, { paragraph: true }, humanizeDuration(formatted, { round: true }), " ago");
 };
-var _access, _signalUpdate, _content, _savedContent, _access2, _listeners, _files, _selectedFile, _signalUpdate2;
-const MAX_SIZE = 1024 * 1024;
-const MAX_SIZE_MESSAGE = "This file is too large to be displayed";
-class DirectoryEditorFileManager {
-  constructor(access, signalUpdate) {
-    __privateAdd(this, _access, void 0);
-    __privateAdd(this, _signalUpdate, void 0);
-    __privateAdd(this, _content, void 0);
-    __privateAdd(this, _savedContent, void 0);
-    __privateSet(this, _access, access);
-    __privateSet(this, _signalUpdate, signalUpdate);
-  }
-  get path() {
-    return __privateGet(this, _access).path;
+
+const OwnerEntityColumn = ({ entityRef }) => {
+  var _a, _b, _c;
+  const catalogApi = useApi(catalogApiRef);
+  const { value, loading, error } = useAsync(
+    () => catalogApi.getEntityByRef(entityRef || ""),
+    [catalogApi, entityRef]
+  );
+  if (!entityRef) {
+    return /* @__PURE__ */ React.createElement(Typography$1, { paragraph: true }, "Unknown");
   }
-  get content() {
-    var _a;
-    return (_a = __privateGet(this, _content)) != null ? _a : MAX_SIZE_MESSAGE;
+  if (loading || error) {
+    return null;
   }
-  updateContent(content) {
-    if (__privateGet(this, _content) === void 0) {
-      return;
+  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
     }
-    __privateSet(this, _content, content);
-    __privateGet(this, _signalUpdate).call(this);
+  );
+};
+
+const TaskStatusColumn = ({ status }) => {
+  switch (status) {
+    case "processing":
+      return /* @__PURE__ */ React.createElement(StatusPending, null, status);
+    case "completed":
+      return /* @__PURE__ */ React.createElement(StatusOK, null, status);
+    case "error":
+    default:
+      return /* @__PURE__ */ React.createElement(StatusError, null, status);
   }
-  get dirty() {
-    return __privateGet(this, _content) !== __privateGet(this, _savedContent);
+};
+
+const TemplateTitleColumn = ({ entityRef }) => {
+  const scaffolder = useApi(scaffolderApiRef);
+  const { value, loading, error } = useAsync(
+    () => scaffolder.getTemplateParameterSchema(entityRef || ""),
+    [scaffolder, entityRef]
+  );
+  if (loading || error || !entityRef) {
+    return null;
   }
-  async save() {
-    if (__privateGet(this, _content) !== void 0) {
-      await __privateGet(this, _access).save(__privateGet(this, _content));
-      __privateSet(this, _savedContent, __privateGet(this, _content));
-      __privateGet(this, _signalUpdate).call(this);
+  return /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: parseEntityRef(entityRef), title: value == null ? void 0 : value.title });
+};
+
+const ListTaskPageContent = (props) => {
+  var _a;
+  const { initiallySelectedFilter = "owned" } = props;
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const rootLink = useRouteRef(rootRouteRef);
+  const [ownerFilter, setOwnerFilter] = useState(initiallySelectedFilter);
+  const { value, loading, error } = useAsync(() => {
+    var _a2;
+    if (scaffolderApi.listTasks) {
+      return (_a2 = scaffolderApi.listTasks) == null ? void 0 : _a2.call(scaffolderApi, { filterByOwnership: ownerFilter });
     }
+    console.warn(
+      "listTasks is not implemented in the scaffolderApi, please make sure to implement this method."
+    );
+    return Promise.resolve({ tasks: [] });
+  }, [scaffolderApi, ownerFilter]);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
   }
-  async reload() {
-    const file = await __privateGet(this, _access).file();
-    if (file.size > MAX_SIZE) {
-      if (__privateGet(this, _content) !== void 0) {
-        __privateSet(this, _content, void 0);
-        __privateSet(this, _savedContent, void 0);
-        __privateGet(this, _signalUpdate).call(this);
+  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;
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(
+    OwnerListPicker,
+    {
+      filter: ownerFilter,
+      onSelectOwner: (id) => setOwnerFilter(id)
     }
-    const content = await file.text();
-    if (__privateGet(this, _content) !== content) {
-      __privateSet(this, _content, content);
-      __privateSet(this, _savedContent, content);
-      __privateGet(this, _signalUpdate).call(this);
+  )), /* @__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 })));
+};
+
+const showDirectoryPicker = window.showDirectoryPicker;
+class WebFileAccess {
+  constructor(path, handle) {
+    this.path = path;
+    this.handle = handle;
   }
-}
-_access = new WeakMap();
-_signalUpdate = new WeakMap();
-_content = new WeakMap();
-_savedContent = new WeakMap();
-class DirectoryEditorManager {
-  constructor(access) {
-    __privateAdd(this, _access2, void 0);
-    __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
-    __privateAdd(this, _files, []);
-    __privateAdd(this, _selectedFile, void 0);
-    __publicField(this, "setSelectedFile", (path) => {
-      const prev = __privateGet(this, _selectedFile);
-      const next = __privateGet(this, _files).find((file) => file.path === path);
-      if (prev !== next) {
-        __privateSet(this, _selectedFile, next);
-        __privateGet(this, _signalUpdate2).call(this);
-      }
-    });
-    __privateAdd(this, _signalUpdate2, () => {
-      __privateGet(this, _listeners).forEach((listener) => listener());
-    });
-    __privateSet(this, _access2, access);
+  file() {
+    return this.handle.getFile();
   }
-  get files() {
-    return __privateGet(this, _files);
+  async save(data) {
+    const writable = await this.handle.createWritable();
+    await writable.write(data);
+    await writable.close();
   }
-  get selectedFile() {
-    return __privateGet(this, _selectedFile);
+}
+class WebDirectoryAccess {
+  constructor(handle) {
+    this.handle = handle;
   }
-  get dirty() {
+  async listFiles() {
+    const content = [];
+    for await (const entry of this.listDirectoryContents(this.handle)) {
+      content.push(entry);
+    }
+    return content;
+  }
+  async *listDirectoryContents(dirHandle, basePath = []) {
+    for await (const handle of dirHandle.values()) {
+      if (handle.kind === "file") {
+        yield new WebFileAccess([...basePath, handle.name].join("/"), handle);
+      } else if (handle.kind === "directory") {
+        if (handle.name === ".git") {
+          continue;
+        }
+        yield* this.listDirectoryContents(handle, [...basePath, handle.name]);
+      }
+    }
+  }
+}
+class WebFileSystemAccess {
+  static isSupported() {
+    return Boolean(showDirectoryPicker);
+  }
+  static async requestDirectoryAccess() {
+    if (!showDirectoryPicker) {
+      throw new Error("File system access is not supported");
+    }
+    const handle = await showDirectoryPicker();
+    return new WebDirectoryAccess(handle);
+  }
+  constructor() {
+  }
+}
+
+const useStyles$7 = makeStyles$1((theme) => ({
+  introText: {
+    textAlign: "center",
+    marginTop: theme.spacing(2)
+  },
+  card: {
+    position: "relative",
+    maxWidth: 340,
+    marginTop: theme.spacing(4),
+    margin: theme.spacing(0, 2)
+  },
+  infoIcon: {
+    position: "absolute",
+    top: theme.spacing(1),
+    right: theme.spacing(1)
+  }
+}));
+function TemplateEditorIntro(props) {
+  const classes = useStyles$7();
+  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, null, /* @__PURE__ */ React.createElement(
+      Typography$1,
+      {
+        variant: "h4",
+        component: "h3",
+        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,
+    {
+      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, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h4", component: "h3", 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, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h4", component: "h3", 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: "h4", component: "h2", 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
+  ));
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _access, _signalUpdate, _content, _savedContent, _access2, _listeners, _files, _selectedFile, _signalUpdate2;
+const MAX_SIZE = 1024 * 1024;
+const MAX_SIZE_MESSAGE = "This file is too large to be displayed";
+class DirectoryEditorFileManager {
+  constructor(access, signalUpdate) {
+    __privateAdd(this, _access, void 0);
+    __privateAdd(this, _signalUpdate, void 0);
+    __privateAdd(this, _content, void 0);
+    __privateAdd(this, _savedContent, void 0);
+    __privateSet(this, _access, access);
+    __privateSet(this, _signalUpdate, signalUpdate);
+  }
+  get path() {
+    return __privateGet(this, _access).path;
+  }
+  get content() {
+    var _a;
+    return (_a = __privateGet(this, _content)) != null ? _a : MAX_SIZE_MESSAGE;
+  }
+  updateContent(content) {
+    if (__privateGet(this, _content) === void 0) {
+      return;
+    }
+    __privateSet(this, _content, content);
+    __privateGet(this, _signalUpdate).call(this);
+  }
+  get dirty() {
+    return __privateGet(this, _content) !== __privateGet(this, _savedContent);
+  }
+  async save() {
+    if (__privateGet(this, _content) !== void 0) {
+      await __privateGet(this, _access).save(__privateGet(this, _content));
+      __privateSet(this, _savedContent, __privateGet(this, _content));
+      __privateGet(this, _signalUpdate).call(this);
+    }
+  }
+  async reload() {
+    const file = await __privateGet(this, _access).file();
+    if (file.size > MAX_SIZE) {
+      if (__privateGet(this, _content) !== void 0) {
+        __privateSet(this, _content, void 0);
+        __privateSet(this, _savedContent, void 0);
+        __privateGet(this, _signalUpdate).call(this);
+      }
+      return;
+    }
+    const content = await file.text();
+    if (__privateGet(this, _content) !== content) {
+      __privateSet(this, _content, content);
+      __privateSet(this, _savedContent, content);
+      __privateGet(this, _signalUpdate).call(this);
+    }
+  }
+}
+_access = new WeakMap();
+_signalUpdate = new WeakMap();
+_content = new WeakMap();
+_savedContent = new WeakMap();
+class DirectoryEditorManager {
+  constructor(access) {
+    __privateAdd(this, _access2, void 0);
+    __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
+    __privateAdd(this, _files, []);
+    __privateAdd(this, _selectedFile, void 0);
+    __publicField(this, "setSelectedFile", (path) => {
+      const prev = __privateGet(this, _selectedFile);
+      const next = __privateGet(this, _files).find((file) => file.path === path);
+      if (prev !== next) {
+        __privateSet(this, _selectedFile, next);
+        __privateGet(this, _signalUpdate2).call(this);
+      }
+    });
+    __privateAdd(this, _signalUpdate2, () => {
+      __privateGet(this, _listeners).forEach((listener) => listener());
+    });
+    __privateSet(this, _access2, access);
+  }
+  get files() {
+    return __privateGet(this, _files);
+  }
+  get selectedFile() {
+    return __privateGet(this, _selectedFile);
+  }
+  get dirty() {
     return __privateGet(this, _files).some((file) => file.dirty);
   }
   async save() {
@@ -534,181 +1177,10 @@ function useDryRun() {
   return value;
 }
 
-const useStyles$8 = makeStyles$1((theme) => ({
-  introText: {
-    textAlign: "center",
-    marginTop: theme.spacing(2)
-  },
-  card: {
-    position: "relative",
-    maxWidth: 340,
-    marginTop: theme.spacing(4),
-    margin: theme.spacing(0, 2)
-  },
-  infoIcon: {
-    position: "absolute",
-    top: theme.spacing(1),
-    right: theme.spacing(1)
-  }
-}));
-function TemplateEditorIntro(props) {
-  const classes = useStyles$8();
-  const supportsLoad = WebFileSystemAccess.isSupported();
-  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card, { 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, null, /* @__PURE__ */ React.createElement(
-      Typography$1,
-      {
-        variant: "h4",
-        component: "h3",
-        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,
-    {
-      placement: "top",
-      title: "Only supported in some Chromium-based browsers"
-    },
-    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
-  )));
-  const cardFormEditor = /* @__PURE__ */ React.createElement(Card, { 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, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h4", component: "h3", 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, { 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, null, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h4", component: "h3", 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: "h4", component: "h2", 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
-  ));
-}
-
-function downloadBlob(blob, name) {
-  const a = document.createElement("a");
-  a.href = URL.createObjectURL(blob);
-  a.download = name;
-  a.click();
-  URL.revokeObjectURL(a.href);
-  a.remove();
-}
-
-const useStyles$7 = makeStyles$1((theme) => ({
-  root: {
-    overflowY: "auto",
-    background: theme.palette.background.default
-  },
-  iconSuccess: {
-    minWidth: 0,
-    marginRight: theme.spacing(1),
-    color: theme.palette.status.ok
-  },
-  iconFailure: {
-    minWidth: 0,
-    marginRight: theme.spacing(1),
-    color: theme.palette.status.error
-  }
-}));
-function DryRunResultsList() {
-  const classes = useStyles$7();
-  const dryRun = useDryRun();
-  return /* @__PURE__ */ React.createElement(List, { className: classes.root, dense: true }, dryRun.results.map((result) => {
-    var _a;
-    const failed = result.log.some((l) => l.body.status === "failed");
-    let isLoading = false;
-    async function downloadResult() {
-      isLoading = true;
-      await downloadDirectoryContents(
-        result.directoryContents,
-        `dry-run-result-${result.id}.zip`
-      );
-      isLoading = false;
-    }
-    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,
-        {
-          edge: "end",
-          "aria-label": "download",
-          title: "Download as .zip",
-          disabled: isLoading,
-          onClick: () => downloadResult()
-        },
-        /* @__PURE__ */ React.createElement(DownloadIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          edge: "end",
-          "aria-label": "delete",
-          title: "Delete result",
-          onClick: () => dryRun.deleteResult(result.id)
-        },
-        /* @__PURE__ */ React.createElement(DeleteIcon, null)
-      ))
-    );
-  }));
-}
-async function downloadDirectoryContents(directoryContents, name) {
-  const { default: JSZip } = await import('jszip');
-  const zip = new JSZip();
-  for (const d of directoryContents) {
-    const converted = atob(d.base64Content);
-    await zip.file(d.path, converted);
-  }
-  const blob = await zip.generateAsync({ type: "blob" });
-  downloadBlob(blob, name);
-}
-
-const useStyles$6 = makeStyles$1({
-  root: {
-    whiteSpace: "nowrap",
-    overflowY: "auto"
+const useStyles$6 = makeStyles$1({
+  root: {
+    whiteSpace: "nowrap",
+    overflowY: "auto"
   }
 });
 function parseFileEntires(paths) {
@@ -786,72 +1258,327 @@ function FileBrowser(props) {
   );
 }
 
-const useStyles$5 = makeStyles$1((theme) => ({
-  root: {
-    display: "grid",
-    gridTemplateColumns: "280px auto 3fr",
-    gridTemplateRows: "1fr"
+const useStyles$5 = makeStyles((theme) => ({
+  button: {
+    padding: theme.spacing(1)
   },
-  child: {
-    overflowY: "auto",
-    height: "100%",
-    minHeight: 0
+  buttons: {
+    display: "flex",
+    flexFlow: "row nowrap",
+    alignItems: "center",
+    justifyContent: "flex-start"
   },
-  firstChild: {
-    background: theme.palette.background.paper
+  buttonsGap: {
+    flex: "1 1 auto"
+  },
+  buttonsDivider: {
+    marginBottom: theme.spacing(1)
   }
 }));
-function DryRunResultsSplitView(props) {
+function TemplateEditorBrowser(props) {
+  var _a, _b;
   const classes = useStyles$5();
-  const childArray = Children.toArray(props.children);
-  if (childArray.length !== 2) {
-    throw new Error("must have exactly 2 children");
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classNames(classes.child, classes.firstChild) }, childArray[0]), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement("div", { className: classes.child }, childArray[1]));
+  const directoryEditor = useDirectoryEditor();
+  const changedFiles = directoryEditor.files.filter((file) => file.dirty);
+  const handleClose = () => {
+    if (!props.onClose) {
+      return;
+    }
+    if (changedFiles.length > 0) {
+      const accepted = window.confirm(
+        "Are you sure? Unsaved changes will be lost"
+      );
+      if (!accepted) {
+        return;
+      }
+    }
+    props.onClose();
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(Tooltip$1, { 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$1, { 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$1, { title: "Close directory" }, /* @__PURE__ */ React.createElement(IconButton, { className: classes.button, onClick: handleClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)))), /* @__PURE__ */ React.createElement(Divider, { 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$4 = makeStyles$1({
-  root: {
-    display: "flex",
-    flexFlow: "column nowrap"
-  },
-  contentWrapper: {
-    flex: 1,
-    position: "relative"
+const useStyles$4 = makeStyles((theme) => ({
+  container: {
+    position: "relative",
+    width: "100%",
+    height: "100%"
   },
-  content: {
+  codeMirror: {
     position: "absolute",
     top: 0,
-    left: 0,
-    right: 0,
     bottom: 0,
-    display: "flex",
-    "& > *": {
-      flex: 1
-    }
+    left: 0,
+    right: 0
   },
-  codeMirror: {
-    height: "100%",
-    overflowY: "auto"
+  errorPanel: {
+    color: theme.palette.error.main,
+    lineHeight: 2,
+    margin: theme.spacing(0, 1)
+  },
+  floatingButtons: {
+    position: "absolute",
+    top: theme.spacing(1),
+    right: theme.spacing(3)
+  },
+  floatingButton: {
+    padding: theme.spacing(1)
   }
-});
-function FilesContent() {
+}));
+function TemplateEditorTextArea(props) {
+  const { errorText } = props;
   const classes = useStyles$4();
-  const { selectedResult } = useDryRun();
-  const [selectedPath, setSelectedPath] = useState("");
-  const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find(
-    (f) => f.path === selectedPath
-  );
-  useEffect(() => {
-    if (selectedResult) {
-      const [firstFile] = selectedResult.directoryContents;
-      if (firstFile) {
-        setSelectedPath(firstFile.path);
-      } else {
-        setSelectedPath("");
-      }
-    }
-    return void 0;
+  const panelExtension = useMemo(() => {
+    if (!errorText) {
+      return showPanel.of(null);
+    }
+    const dom = document.createElement("div");
+    dom.classList.add(classes.errorPanel);
+    dom.textContent = errorText;
+    return showPanel.of(() => ({ dom, bottom: true }));
+  }, [classes, errorText]);
+  useKeyboardEvent(
+    (e) => e.key === "s" && (e.ctrlKey || e.metaKey),
+    (e) => {
+      e.preventDefault();
+      if (props.onSave) {
+        props.onSave();
+      }
+    }
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(
+    CodeMirror,
+    {
+      className: classes.codeMirror,
+      theme: "dark",
+      height: "100%",
+      extensions: [StreamLanguage.define(yaml$1), panelExtension],
+      value: props.content,
+      onChange: props.onUpdate
+    }
+  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(Tooltip$1, { 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$1, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      className: classes.floatingButton,
+      onClick: () => {
+        var _a;
+        return (_a = props.onReload) == null ? void 0 : _a.call(props);
+      }
+    },
+    /* @__PURE__ */ React.createElement(RefreshIcon, null)
+  )))));
+}
+function TemplateEditorDirectoryEditorTextArea(props) {
+  var _a, _b;
+  const directoryEditor = useDirectoryEditor();
+  const actions = ((_a = directoryEditor.selectedFile) == null ? void 0 : _a.dirty) ? {
+    onSave: () => directoryEditor.save(),
+    onReload: () => directoryEditor.reload()
+  } : {
+    onReload: () => directoryEditor.reload()
+  };
+  return /* @__PURE__ */ React.createElement(
+    TemplateEditorTextArea,
+    {
+      errorText: props.errorText,
+      content: (_b = directoryEditor.selectedFile) == null ? void 0 : _b.content,
+      onUpdate: (content) => {
+        var _a2;
+        return (_a2 = directoryEditor.selectedFile) == null ? void 0 : _a2.updateContent(content);
+      },
+      ...actions
+    }
+  );
+}
+TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
+
+function downloadBlob(blob, name) {
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = name;
+  a.click();
+  URL.revokeObjectURL(a.href);
+  a.remove();
+}
+
+const useStyles$3 = makeStyles$1((theme) => ({
+  root: {
+    overflowY: "auto",
+    background: theme.palette.background.default
+  },
+  iconSuccess: {
+    minWidth: 0,
+    marginRight: theme.spacing(1),
+    color: theme.palette.status.ok
+  },
+  iconFailure: {
+    minWidth: 0,
+    marginRight: theme.spacing(1),
+    color: theme.palette.status.error
+  }
+}));
+function DryRunResultsList() {
+  const classes = useStyles$3();
+  const dryRun = useDryRun();
+  return /* @__PURE__ */ React.createElement(List$1, { className: classes.root, dense: true }, dryRun.results.map((result) => {
+    var _a;
+    const failed = result.log.some((l) => l.body.status === "failed");
+    let isLoading = false;
+    async function downloadResult() {
+      isLoading = true;
+      await downloadDirectoryContents(
+        result.directoryContents,
+        `dry-run-result-${result.id}.zip`
+      );
+      isLoading = false;
+    }
+    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$1,
+        {
+          className: failed ? classes.iconFailure : classes.iconSuccess
+        },
+        failed ? /* @__PURE__ */ React.createElement(Cancel, null) : /* @__PURE__ */ React.createElement(Check, null)
+      ),
+      /* @__PURE__ */ React.createElement(ListItemText$1, { primary: `Result ${result.id}` }),
+      /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
+        IconButton$1,
+        {
+          edge: "end",
+          "aria-label": "download",
+          title: "Download as .zip",
+          disabled: isLoading,
+          onClick: () => downloadResult()
+        },
+        /* @__PURE__ */ React.createElement(DownloadIcon, null)
+      ), /* @__PURE__ */ React.createElement(
+        IconButton$1,
+        {
+          edge: "end",
+          "aria-label": "delete",
+          title: "Delete result",
+          onClick: () => dryRun.deleteResult(result.id)
+        },
+        /* @__PURE__ */ React.createElement(DeleteIcon, null)
+      ))
+    );
+  }));
+}
+async function downloadDirectoryContents(directoryContents, name) {
+  const { default: JSZip } = await import('jszip');
+  const zip = new JSZip();
+  for (const d of directoryContents) {
+    const converted = atob(d.base64Content);
+    await zip.file(d.path, converted);
+  }
+  const blob = await zip.generateAsync({ type: "blob" });
+  downloadBlob(blob, name);
+}
+
+const useStyles$2 = makeStyles$1((theme) => ({
+  root: {
+    display: "grid",
+    gridTemplateColumns: "280px auto 3fr",
+    gridTemplateRows: "1fr"
+  },
+  child: {
+    overflowY: "auto",
+    height: "100%",
+    minHeight: 0
+  },
+  firstChild: {
+    background: theme.palette.background.paper
+  }
+}));
+function DryRunResultsSplitView(props) {
+  const classes = useStyles$2();
+  const childArray = Children.toArray(props.children);
+  if (childArray.length !== 2) {
+    throw new Error("must have exactly 2 children");
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classNames(classes.child, classes.firstChild) }, childArray[0]), /* @__PURE__ */ React.createElement(Divider$1, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement("div", { className: classes.child }, childArray[1]));
+}
+
+const useStyles$1 = makeStyles$1({
+  root: {
+    display: "flex",
+    flexFlow: "column nowrap"
+  },
+  contentWrapper: {
+    flex: 1,
+    position: "relative"
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    "& > *": {
+      flex: 1
+    }
+  },
+  codeMirror: {
+    height: "100%",
+    overflowY: "auto"
+  }
+});
+function FilesContent() {
+  const classes = useStyles$1();
+  const { selectedResult } = useDryRun();
+  const [selectedPath, setSelectedPath] = useState("");
+  const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find(
+    (f) => f.path === selectedPath
+  );
+  useEffect(() => {
+    if (selectedResult) {
+      const [firstFile] = selectedResult.directoryContents;
+      if (firstFile) {
+        setSelectedPath(firstFile.path);
+      } else {
+        setSelectedPath("");
+      }
+    }
+    return void 0;
   }, [selectedResult]);
   if (!selectedResult) {
     return null;
@@ -912,7 +1639,7 @@ function LogContent() {
 }
 function OutputContent() {
   var _a, _b;
-  const classes = useStyles$4();
+  const classes = useStyles$1();
   const { selectedResult } = useDryRun();
   if (!selectedResult) {
     return null;
@@ -930,14 +1657,14 @@ function OutputContent() {
   ));
 }
 function DryRunResultsView() {
-  const classes = useStyles$4();
+  const classes = useStyles$1();
   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$1, 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$3 = makeStyles$1((theme) => ({
+const useStyles = makeStyles$1((theme) => ({
   header: {
     height: 48,
     minHeight: 0,
@@ -956,7 +1683,7 @@ const useStyles$3 = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResults() {
-  const classes = useStyles$3();
+  const classes = useStyles();
   const dryRun = useDryRun();
   const [expanded, setExpanded] = useState(false);
   const [hidden, setHidden] = useState(true);
@@ -987,434 +1714,10 @@ function DryRunResults() {
       },
       /* @__PURE__ */ React.createElement(Typography$1, null, "Dry-run results")
     ),
-    /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }),
-    /* @__PURE__ */ React.createElement(AccordionDetails$1, { className: classes.content }, /* @__PURE__ */ React.createElement(DryRunResultsList, null), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))
+    /* @__PURE__ */ React.createElement(Divider$1, { orientation: "horizontal" }),
+    /* @__PURE__ */ React.createElement(AccordionDetails$1, { className: classes.content }, /* @__PURE__ */ React.createElement(DryRunResultsList, null), /* @__PURE__ */ React.createElement(Divider$1, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))
   ));
 }
 
-const useStyles$2 = makeStyles((theme) => ({
-  button: {
-    padding: theme.spacing(1)
-  },
-  buttons: {
-    display: "flex",
-    flexFlow: "row nowrap",
-    alignItems: "center",
-    justifyContent: "flex-start"
-  },
-  buttonsGap: {
-    flex: "1 1 auto"
-  },
-  buttonsDivider: {
-    marginBottom: theme.spacing(1)
-  }
-}));
-function TemplateEditorBrowser(props) {
-  var _a, _b;
-  const classes = useStyles$2();
-  const directoryEditor = useDirectoryEditor();
-  const changedFiles = directoryEditor.files.filter((file) => file.dirty);
-  const handleClose = () => {
-    if (!props.onClose) {
-      return;
-    }
-    if (changedFiles.length > 0) {
-      const accepted = window.confirm(
-        "Are you sure? Unsaved changes will be lost"
-      );
-      if (!accepted) {
-        return;
-      }
-    }
-    props.onClose();
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Save all files" }, /* @__PURE__ */ React.createElement(
-    IconButton$1,
-    {
-      className: classes.button,
-      disabled: directoryEditor.files.every((file) => !file.dirty),
-      onClick: () => directoryEditor.save()
-    },
-    /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Reload directory" }, /* @__PURE__ */ React.createElement(
-    IconButton$1,
-    {
-      className: classes.button,
-      onClick: () => directoryEditor.reload()
-    },
-    /* @__PURE__ */ React.createElement(RefreshIcon, null)
-  )), /* @__PURE__ */ React.createElement("div", { className: classes.buttonsGap }), /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Close directory" }, /* @__PURE__ */ React.createElement(IconButton$1, { 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$1 = makeStyles((theme) => ({
-  container: {
-    position: "relative",
-    width: "100%",
-    height: "100%"
-  },
-  codeMirror: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  errorPanel: {
-    color: theme.palette.error.main,
-    lineHeight: 2,
-    margin: theme.spacing(0, 1)
-  },
-  floatingButtons: {
-    position: "absolute",
-    top: theme.spacing(1),
-    right: theme.spacing(3)
-  },
-  floatingButton: {
-    padding: theme.spacing(1)
-  }
-}));
-function TemplateEditorTextArea(props) {
-  const { errorText } = props;
-  const classes = useStyles$1();
-  const panelExtension = useMemo(() => {
-    if (!errorText) {
-      return showPanel.of(null);
-    }
-    const dom = document.createElement("div");
-    dom.classList.add(classes.errorPanel);
-    dom.textContent = errorText;
-    return showPanel.of(() => ({ dom, bottom: true }));
-  }, [classes, errorText]);
-  useKeyboardEvent(
-    (e) => e.key === "s" && (e.ctrlKey || e.metaKey),
-    (e) => {
-      e.preventDefault();
-      if (props.onSave) {
-        props.onSave();
-      }
-    }
-  );
-  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      className: classes.codeMirror,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml$1), panelExtension],
-      value: props.content,
-      onChange: props.onUpdate
-    }
-  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Save file" }, /* @__PURE__ */ React.createElement(
-    IconButton$1,
-    {
-      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$1, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
-    IconButton$1,
-    {
-      className: classes.floatingButton,
-      onClick: () => {
-        var _a;
-        return (_a = props.onReload) == null ? void 0 : _a.call(props);
-      }
-    },
-    /* @__PURE__ */ React.createElement(RefreshIcon, null)
-  )))));
-}
-function TemplateEditorDirectoryEditorTextArea(props) {
-  var _a, _b;
-  const directoryEditor = useDirectoryEditor();
-  const actions = ((_a = directoryEditor.selectedFile) == null ? void 0 : _a.dirty) ? {
-    onSave: () => directoryEditor.save(),
-    onReload: () => directoryEditor.reload()
-  } : {
-    onReload: () => directoryEditor.reload()
-  };
-  return /* @__PURE__ */ React.createElement(
-    TemplateEditorTextArea,
-    {
-      errorText: props.errorText,
-      content: (_b = directoryEditor.selectedFile) == null ? void 0 : _b.content,
-      onUpdate: (content) => {
-        var _a2;
-        return (_a2 = directoryEditor.selectedFile) == null ? void 0 : _a2.updateContent(content);
-      },
-      ...actions
-    }
-  );
-}
-TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
-
-const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
-  {
-    component: EntityPicker,
-    name: "EntityPicker",
-    schema: EntityPickerSchema
-  },
-  {
-    component: EntityNamePicker,
-    name: "EntityNamePicker",
-    validation: entityNamePickerValidation,
-    schema: EntityNamePickerSchema
-  },
-  {
-    component: EntityTagsPicker,
-    name: "EntityTagsPicker",
-    schema: EntityTagsPickerSchema
-  },
-  {
-    component: RepoUrlPicker,
-    name: "RepoUrlPicker",
-    validation: repoPickerValidation,
-    schema: RepoUrlPickerSchema
-  },
-  {
-    component: OwnerPicker,
-    name: "OwnerPicker",
-    schema: OwnerPickerSchema
-  },
-  {
-    component: OwnedEntityPicker,
-    name: "OwnedEntityPicker",
-    schema: OwnedEntityPickerSchema
-  },
-  {
-    component: MyGroupsPicker,
-    name: "MyGroupsPicker",
-    schema: MyGroupsPickerSchema
-  }
-];
-
-const useStyles = makeStyles(
-  (theme) => ({
-    root: {
-      backgroundColor: "rgba(0, 0, 0, .11)",
-      boxShadow: "none",
-      margin: theme.spacing(1, 0, 1, 0)
-    },
-    title: {
-      margin: theme.spacing(1, 0, 0, 1),
-      textTransform: "uppercase",
-      fontSize: 12,
-      fontWeight: "bold"
-    },
-    listIcon: {
-      minWidth: 30,
-      color: theme.palette.text.primary
-    },
-    menuItem: {
-      minHeight: theme.spacing(6)
-    },
-    groupWrapper: {
-      margin: theme.spacing(1, 1, 2, 1)
-    }
-  }),
-  {
-    name: "ScaffolderReactOwnerListPicker"
-  }
-);
-function getFilterGroups() {
-  return [
-    {
-      name: "Task Owner",
-      items: [
-        {
-          id: "owned",
-          label: "Owned",
-          icon: SettingsIcon
-        },
-        {
-          id: "all",
-          label: "All",
-          icon: AllIcon
-        }
-      ]
-    }
-  ];
-}
-const OwnerListPicker = (props) => {
-  const { filter, onSelectOwner } = props;
-  const classes = useStyles();
-  const filterGroups = getFilterGroups();
-  return /* @__PURE__ */ React.createElement(Card$1, { className: classes.root }, filterGroups.map((group) => /* @__PURE__ */ React.createElement(Fragment, { key: group.name }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "subtitle2",
-      component: "span",
-      className: classes.title
-    },
-    group.name
-  ), /* @__PURE__ */ React.createElement(Card$1, { className: classes.groupWrapper }, /* @__PURE__ */ React.createElement(List$1, { disablePadding: true, dense: true, role: "menu" }, group.items.map((item) => /* @__PURE__ */ React.createElement(
-    MenuItem,
-    {
-      key: item.id,
-      button: true,
-      divider: true,
-      ContainerProps: { role: "menuitem" },
-      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 }) => {
-  const createdAtTime = DateTime.fromISO(createdAt);
-  const formatted = Interval.fromDateTimes(createdAtTime, DateTime.local()).toDuration().valueOf();
-  return /* @__PURE__ */ React.createElement(Typography$1, { paragraph: true }, humanizeDuration(formatted, { round: true }), " ago");
-};
-
-const OwnerEntityColumn = ({ entityRef }) => {
-  var _a, _b, _c;
-  const catalogApi = useApi(catalogApiRef);
-  const { value, loading, error } = useAsync(
-    () => catalogApi.getEntityByRef(entityRef || ""),
-    [catalogApi, entityRef]
-  );
-  if (!entityRef) {
-    return /* @__PURE__ */ React.createElement(Typography$1, { paragraph: true }, "Unknown");
-  }
-  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
-    }
-  );
-};
-
-const TaskStatusColumn = ({ status }) => {
-  switch (status) {
-    case "processing":
-      return /* @__PURE__ */ React.createElement(StatusPending, null, status);
-    case "completed":
-      return /* @__PURE__ */ React.createElement(StatusOK, null, status);
-    case "error":
-    default:
-      return /* @__PURE__ */ React.createElement(StatusError, null, status);
-  }
-};
-
-const TemplateTitleColumn = ({ entityRef }) => {
-  const scaffolder = useApi(scaffolderApiRef);
-  const { value, loading, error } = useAsync(
-    () => scaffolder.getTemplateParameterSchema(entityRef || ""),
-    [scaffolder, entityRef]
-  );
-  if (loading || error || !entityRef) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: parseEntityRef(entityRef), title: value == null ? void 0 : value.title });
-};
-
-const ListTaskPageContent = (props) => {
-  var _a;
-  const { initiallySelectedFilter = "owned" } = props;
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const rootLink = useRouteRef(rootRouteRef);
-  const [ownerFilter, setOwnerFilter] = useState(initiallySelectedFilter);
-  const { value, loading, error } = useAsync(() => {
-    var _a2;
-    if (scaffolderApi.listTasks) {
-      return (_a2 = scaffolderApi.listTasks) == null ? void 0 : _a2.call(scaffolderApi, { filterByOwnership: ownerFilter });
-    }
-    console.warn(
-      "listTasks is not implemented in the scaffolderApi, please make sure to implement this method."
-    );
-    return Promise.resolve({ tasks: [] });
-  }, [scaffolderApi, ownerFilter]);
-  if (loading) {
-    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 });
-          }
-        },
-        {
-          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 })));
-};
-
-export { ActionsPage as A, DirectoryEditorProvider as D, ListTasksPage as L, TemplateEditorBrowser as T, WebFileSystemAccess as W, useDirectoryEditor as a, DryRunProvider as b, TemplateEditorTextArea as c, DryRunResults as d, TemplateEditorIntro as e, DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS as f, useDryRun as u };
-//# sourceMappingURL=ListTasksPage-b7beed35.esm.js.map
+export { ActionsPage as A, DirectoryEditorProvider as D, ListTasksPage as L, TemplateEditorBrowser as T, WebFileSystemAccess as W, useDirectoryEditor as a, DryRunProvider as b, TemplateEditorTextArea as c, DryRunResults as d, TemplateEditorIntro as e, DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS as f, TaskPage as g, useDryRun as u };
+//# sourceMappingURL=DryRunResults-a4d44358.esm.js.map