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

package/dist/esm/{index/ListTasksPage-64779a2d.esm.js → TemplateEditorIntro-f7f6d664.esm.js}

@@ -1,31 +1,29 @@
-import React, { Fragment, createContext, useEffect, useContext, useState, useRef, useCallback, useMemo, Children } from 'react';
+import React, { useState, Fragment, createContext, useRef, useCallback, useMemo, useContext, useEffect, 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, Chip, 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 { makeStyles, Box, Typography, Accordion, AccordionSummary, AccordionDetails, Grid, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Collapse, Card, List, MenuItem, ListItemIcon, ListItemText, Tooltip, IconButton as IconButton$1, Divider as Divider$1 } from '@material-ui/core';
 import classNames from 'classnames';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-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 Card 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 ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import { useApi } from '@backstage/core-plugin-api';
+import { Progress, ErrorPage, MarkdownContent, Page, Header, Content, CodeSnippet, ErrorPanel, LogViewer } from '@backstage/core-components';
+import Chip from '@material-ui/core/Chip';
+import SettingsIcon from '@material-ui/icons/Settings';
+import AllIcon from '@material-ui/icons/FontDownload';
 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 ExpandMoreIcon$1 from '@material-ui/icons/ExpandLess';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import Typography$1 from '@material-ui/core/Typography';
 import { useAsync as useAsync$1, useRerender, usePrevious, useKeyboardEvent } from '@react-hookz/web';
 import yaml from 'yaml';
 import IconButton from '@material-ui/core/IconButton';
-import List from '@material-ui/core/List';
+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';
@@ -35,7 +33,7 @@ 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 { g as TaskStatusStepper, h as TaskPageLinks, E as EntityPicker, i as EntityPickerSchema, j as EntityNamePicker, k as entityNamePickerValidation, m as EntityNamePickerSchema, n as EntityTagsPicker, o as EntityTagsPickerSchema, R as RepoUrlPicker, p as repoPickerValidation, q as RepoUrlPickerSchema, O as OwnerPicker, t as OwnerPickerSchema, u as OwnedEntityPicker, w as OwnedEntityPickerSchema, d as rootRouteRef } from './index-8321766a.esm.js';
+import { l as TaskStatusStepper, n as TaskPageLinks } from './TaskPage-f304e0fc.esm.js';
 import CloseIcon from '@material-ui/icons/Close';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
@@ -43,12 +41,11 @@ 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 { 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 Card$1 from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardContent from '@material-ui/core/CardContent';
+import Tooltip$1 from '@material-ui/core/Tooltip';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 
 const useStyles$9 = makeStyles((theme) => ({
   code: {
@@ -90,6 +87,7 @@ const ActionsPage = () => {
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
+  const [isExpanded, setIsExpanded] = useState({});
   if (loading) {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
@@ -102,40 +100,86 @@ const ActionsPage = () => {
       }
     );
   }
-  const formatRows = (input) => {
-    const properties = input.properties;
+  const renderTable = (rows) => {
+    if (!rows || rows.length < 1) {
+      return /* @__PURE__ */ React.createElement(Typography, null, "No schema defined");
+    }
+    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, rows)));
+  };
+  const getTypes = (properties) => {
+    var _a, _b;
+    if (!properties.type) {
+      return ["unknown"];
+    }
+    if (properties.type !== "array") {
+      return [properties.type].flat();
+    }
+    return [
+      `${properties.type}(${(_b = (_a = properties.items) == null ? void 0 : _a.type) != null ? _b : "unknown"})`
+    ];
+  };
+  const formatRows = (parentId, input) => {
+    const properties = input == null ? void 0 : input.properties;
     if (!properties) {
       return void 0;
     }
     return Object.entries(properties).map((entry) => {
-      var _a;
+      var _a, _b, _c;
       const [key] = entry;
+      const id = `${parentId}.${key}`;
       const props = entry[1];
       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(React.Fragment, null, [props.type].flat().map((type) => /* @__PURE__ */ React.createElement(Chip, { label: type, key: type })))));
+      const types = getTypes(props);
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: id }, /* @__PURE__ */ React.createElement(TableRow, { key: id }, /* @__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, types.map(
+        (type) => type.includes("object") ? /* @__PURE__ */ React.createElement(
+          Chip,
+          {
+            label: type,
+            key: type,
+            icon: isExpanded[id] ? /* @__PURE__ */ React.createElement(ExpandLessIcon, null) : /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
+            variant: "outlined",
+            onClick: () => setIsExpanded((prevState) => {
+              const state = { ...prevState };
+              state[id] = !prevState[id];
+              return state;
+            })
+          }
+        ) : /* @__PURE__ */ React.createElement(Chip, { label: type, key: type, variant: "outlined" })
+      ))), /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: 6 }, /* @__PURE__ */ React.createElement(Collapse, { in: isExpanded[id], timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React.createElement(Box, { sx: { margin: 1 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", component: "div" }, key), renderTable(
+        formatRows(
+          id,
+          props.type === "array" ? {
+            properties: (_c = (_b = props.items) == null ? void 0 : _b.properties) != null ? _c : {}
+          } : props
+        )
+      ))))));
     });
   };
-  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))));
-  };
-  const renderTables = (name, input) => {
+  const renderTables = (name, id, 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(
+      formatRows(`${id}.${index}`, i)
+    ))));
   };
   const items = value == null ? void 0 : value.map((action) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (action.id.startsWith("legacy:")) {
       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), action.description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: 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)), action.examples && /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Examples")), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(ExamplesTable, { examples: action.examples })))));
+    const oneOf = renderTables(
+      "oneOf",
+      `${action.id}.input`,
+      (_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), action.description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: action.description }), ((_c = action.schema) == null ? void 0 : _c.input) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Input"), renderTable(
+      formatRows(`${action.id}.input`, (_d = action == null ? void 0 : action.schema) == null ? void 0 : _d.input)
+    ), oneOf), ((_e = action.schema) == null ? void 0 : _e.output) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Output"), renderTable(
+      formatRows(`${action.id}.output`, (_f = action == null ? void 0 : action.schema) == null ? void 0 : _f.output)
+    )), action.examples && /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Examples")), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(ExamplesTable, { examples: action.examples })))));
   });
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
@@ -147,6 +191,73 @@ const ActionsPage = () => {
   ), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
+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)
+    }
+  }),
+  {
+    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$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", className: classes.title }, group.name), /* @__PURE__ */ React.createElement(Card, { className: classes.groupWrapper }, /* @__PURE__ */ React.createElement(List, { disablePadding: true, dense: true }, group.items.map((item) => /* @__PURE__ */ React.createElement(
+    MenuItem,
+    {
+      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, { className: classes.listIcon }, /* @__PURE__ */ React.createElement(item.icon, { fontSize: "small" })),
+    /* @__PURE__ */ React.createElement(ListItemText, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, item.label))
+  )))))));
+};
+
 const showDirectoryPicker = window.showDirectoryPicker;
 class WebFileAccess {
   constructor(path, handle) {
@@ -201,6 +312,109 @@ class WebFileSystemAccess {
   }
 }
 
+const MAX_CONTENT_SIZE = 64 * 1024;
+const CHUNK_SIZE = 32 * 1024;
+const DryRunContext = createContext(void 0);
+function base64EncodeContent(content) {
+  if (content.length > MAX_CONTENT_SIZE) {
+    return window.btoa("<file too large>");
+  }
+  try {
+    return window.btoa(content);
+  } catch {
+    const decoder = new TextEncoder();
+    const buffer = decoder.encode(content);
+    const chunks = new Array();
+    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {
+      chunks.push(
+        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
+      );
+    }
+    return window.btoa(chunks.join(""));
+  }
+}
+function DryRunProvider(props) {
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const [state, setState] = useState({
+    results: [],
+    selectedResult: void 0
+  });
+  const idRef = useRef(1);
+  const selectResult = useCallback((id) => {
+    setState((prevState) => {
+      const result = prevState.results.find((r) => r.id === id);
+      if (result === prevState.selectedResult) {
+        return prevState;
+      }
+      return {
+        results: prevState.results,
+        selectedResult: result
+      };
+    });
+  }, []);
+  const deleteResult = useCallback((id) => {
+    setState((prevState) => {
+      var _a;
+      const index = prevState.results.findIndex((r) => r.id === id);
+      if (index === -1) {
+        return prevState;
+      }
+      const newResults = prevState.results.slice();
+      const [deleted] = newResults.splice(index, 1);
+      return {
+        results: newResults,
+        selectedResult: ((_a = prevState.selectedResult) == null ? void 0 : _a.id) === deleted.id ? newResults[0] : prevState.selectedResult
+      };
+    });
+  }, []);
+  const execute = useCallback(
+    async (options) => {
+      if (!scaffolderApi.dryRun) {
+        throw new Error("Scaffolder API does not support dry-run");
+      }
+      const parsed = yaml.parse(options.templateContent);
+      const response = await scaffolderApi.dryRun({
+        template: parsed,
+        values: options.values,
+        secrets: {},
+        directoryContents: options.files.map((file) => ({
+          path: file.path,
+          base64Content: base64EncodeContent(file.content)
+        }))
+      });
+      const result = {
+        ...response,
+        id: idRef.current++
+      };
+      setState((prevState) => {
+        var _a;
+        return {
+          results: [...prevState.results, result],
+          selectedResult: (_a = prevState.selectedResult) != null ? _a : result
+        };
+      });
+    },
+    [scaffolderApi]
+  );
+  const dryRun = useMemo(
+    () => ({
+      ...state,
+      selectResult,
+      deleteResult,
+      execute
+    }),
+    [state, selectResult, deleteResult, execute]
+  );
+  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, { value: dryRun }, props.children);
+}
+function useDryRun() {
+  const value = useContext(DryRunContext);
+  if (!value) {
+    throw new Error("must be used within a DryRunProvider");
+  }
+  return value;
+}
+
 var __accessCheck = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -307,255 +521,72 @@ class DirectoryEditorManager {
   }
   async save() {
     await Promise.all(__privateGet(this, _files).map((file) => file.save()));
-  }
-  async reload() {
-    var _a;
-    const selectedPath = (_a = __privateGet(this, _selectedFile)) == null ? void 0 : _a.path;
-    const files = await __privateGet(this, _access2).listFiles();
-    const fileManagers = await Promise.all(
-      files.map(async (file) => {
-        const manager = new DirectoryEditorFileManager(
-          file,
-          __privateGet(this, _signalUpdate2)
-        );
-        await manager.reload();
-        return manager;
-      })
-    );
-    __privateGet(this, _files).length = 0;
-    __privateGet(this, _files).push(...fileManagers);
-    this.setSelectedFile(selectedPath);
-    __privateGet(this, _signalUpdate2).call(this);
-  }
-  subscribe(listener) {
-    __privateGet(this, _listeners).add(listener);
-    return () => {
-      __privateGet(this, _listeners).delete(listener);
-    };
-  }
-}
-_access2 = new WeakMap();
-_listeners = new WeakMap();
-_files = new WeakMap();
-_selectedFile = new WeakMap();
-_signalUpdate2 = new WeakMap();
-const DirectoryEditorContext = createContext(
-  void 0
-);
-function useDirectoryEditor() {
-  const value = useContext(DirectoryEditorContext);
-  const rerender = useRerender();
-  useEffect(() => value == null ? void 0 : value.subscribe(rerender), [value, rerender]);
-  if (!value) {
-    throw new Error("must be used within a DirectoryEditorProvider");
-  }
-  return value;
-}
-function DirectoryEditorProvider(props) {
-  const { directory } = props;
-  const [{ result, error }, { execute }] = useAsync$1(
-    async (dir) => {
-      const manager = new DirectoryEditorManager(dir);
-      await manager.reload();
-      const firstYaml = manager.files.find((file) => file.path.match(/\.ya?ml$/));
-      if (firstYaml) {
-        manager.setSelectedFile(firstYaml.path);
-      }
-      return manager;
-    }
-  );
-  useEffect(() => {
-    execute(directory);
-  }, [execute, directory]);
-  if (error) {
-    return /* @__PURE__ */ React.createElement(ErrorPanel, { error });
-  } else if (!result) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
-}
-
-const MAX_CONTENT_SIZE = 64 * 1024;
-const CHUNK_SIZE = 32 * 1024;
-const DryRunContext = createContext(void 0);
-function base64EncodeContent(content) {
-  if (content.length > MAX_CONTENT_SIZE) {
-    return window.btoa("<file too large>");
-  }
-  try {
-    return window.btoa(content);
-  } catch {
-    const decoder = new TextEncoder();
-    const buffer = decoder.encode(content);
-    const chunks = new Array();
-    for (let offset = 0; offset < buffer.length; offset += CHUNK_SIZE) {
-      chunks.push(
-        String.fromCharCode(...buffer.slice(offset, offset + CHUNK_SIZE))
-      );
-    }
-    return window.btoa(chunks.join(""));
-  }
-}
-function DryRunProvider(props) {
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const [state, setState] = useState({
-    results: [],
-    selectedResult: void 0
-  });
-  const idRef = useRef(1);
-  const selectResult = useCallback((id) => {
-    setState((prevState) => {
-      const result = prevState.results.find((r) => r.id === id);
-      if (result === prevState.selectedResult) {
-        return prevState;
-      }
-      return {
-        results: prevState.results,
-        selectedResult: result
-      };
-    });
-  }, []);
-  const deleteResult = useCallback((id) => {
-    setState((prevState) => {
-      var _a;
-      const index = prevState.results.findIndex((r) => r.id === id);
-      if (index === -1) {
-        return prevState;
-      }
-      const newResults = prevState.results.slice();
-      const [deleted] = newResults.splice(index, 1);
-      return {
-        results: newResults,
-        selectedResult: ((_a = prevState.selectedResult) == null ? void 0 : _a.id) === deleted.id ? newResults[0] : prevState.selectedResult
-      };
-    });
-  }, []);
-  const execute = useCallback(
-    async (options) => {
-      if (!scaffolderApi.dryRun) {
-        throw new Error("Scaffolder API does not support dry-run");
-      }
-      const parsed = yaml.parse(options.templateContent);
-      const response = await scaffolderApi.dryRun({
-        template: parsed,
-        values: options.values,
-        secrets: {},
-        directoryContents: options.files.map((file) => ({
-          path: file.path,
-          base64Content: base64EncodeContent(file.content)
-        }))
-      });
-      const result = {
-        ...response,
-        id: idRef.current++
-      };
-      setState((prevState) => {
-        var _a;
-        return {
-          results: [...prevState.results, result],
-          selectedResult: (_a = prevState.selectedResult) != null ? _a : result
-        };
-      });
-    },
-    [scaffolderApi]
-  );
-  const dryRun = useMemo(
-    () => ({
-      ...state,
-      selectResult,
-      deleteResult,
-      execute
-    }),
-    [state, selectResult, deleteResult, execute]
-  );
-  return /* @__PURE__ */ React.createElement(DryRunContext.Provider, { value: dryRun }, props.children);
-}
-function useDryRun() {
-  const value = useContext(DryRunContext);
-  if (!value) {
-    throw new Error("must be used within a DryRunProvider");
-  }
-  return value;
-}
-
-const useStyles$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: "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,
-    {
-      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: "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, { 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: "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"
+  }
+  async reload() {
+    var _a;
+    const selectedPath = (_a = __privateGet(this, _selectedFile)) == null ? void 0 : _a.path;
+    const files = await __privateGet(this, _access2).listFiles();
+    const fileManagers = await Promise.all(
+      files.map(async (file) => {
+        const manager = new DirectoryEditorFileManager(
+          file,
+          __privateGet(this, _signalUpdate2)
+        );
+        await manager.reload();
+        return manager;
+      })
+    );
+    __privateGet(this, _files).length = 0;
+    __privateGet(this, _files).push(...fileManagers);
+    this.setSelectedFile(selectedPath);
+    __privateGet(this, _signalUpdate2).call(this);
+  }
+  subscribe(listener) {
+    __privateGet(this, _listeners).add(listener);
+    return () => {
+      __privateGet(this, _listeners).delete(listener);
+    };
+  }
+}
+_access2 = new WeakMap();
+_listeners = new WeakMap();
+_files = new WeakMap();
+_selectedFile = new WeakMap();
+_signalUpdate2 = new WeakMap();
+const DirectoryEditorContext = createContext(
+  void 0
+);
+function useDirectoryEditor() {
+  const value = useContext(DirectoryEditorContext);
+  const rerender = useRerender();
+  useEffect(() => value == null ? void 0 : value.subscribe(rerender), [value, rerender]);
+  if (!value) {
+    throw new Error("must be used within a DirectoryEditorProvider");
+  }
+  return value;
+}
+function DirectoryEditorProvider(props) {
+  const { directory } = props;
+  const [{ result, error }, { execute }] = useAsync$1(
+    async (dir) => {
+      const manager = new DirectoryEditorManager(dir);
+      await manager.reload();
+      const firstYaml = manager.files.find((file) => file.path.match(/\.ya?ml$/));
+      if (firstYaml) {
+        manager.setSelectedFile(firstYaml.path);
       }
-    },
-    supportsLoad && cardLoadLocal,
-    cardFormEditor,
-    !supportsLoad && cardLoadLocal,
-    cardFieldExplorer
-  ));
+      return manager;
+    }
+  );
+  useEffect(() => {
+    execute(directory);
+  }, [execute, directory]);
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { error });
+  } else if (!result) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
 }
 
 const useStyles$7 = makeStyles$1((theme) => ({
@@ -577,7 +608,7 @@ const useStyles$7 = makeStyles$1((theme) => ({
 function DryRunResultsList() {
   const classes = useStyles$7();
   const dryRun = useDryRun();
-  return /* @__PURE__ */ React.createElement(List, { 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(
@@ -589,13 +620,13 @@ function DryRunResultsList() {
         onClick: () => dryRun.selectResult(result.id)
       },
       /* @__PURE__ */ React.createElement(
-        ListItemIcon,
+        ListItemIcon$1,
         {
           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(ListItemText$1, { primary: `Result ${result.id}` }),
       /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
         IconButton,
         {
@@ -887,7 +918,7 @@ function DryRunResults() {
       AccordionSummary$1,
       {
         className: classes.header,
-        expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon$1, null)
+        expandIcon: /* @__PURE__ */ React.createElement(ExpandLessIcon, null)
       },
       /* @__PURE__ */ React.createElement(Typography$1, null, "Dry-run results")
     ),
@@ -932,7 +963,7 @@ function TemplateEditorBrowser(props) {
     }
     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(
+  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$1,
     {
       className: classes.button,
@@ -940,14 +971,14 @@ function TemplateEditorBrowser(props) {
       onClick: () => directoryEditor.save()
     },
     /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Reload directory" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Tooltip, { 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(
+  )), /* @__PURE__ */ React.createElement("div", { className: classes.buttonsGap }), /* @__PURE__ */ React.createElement(Tooltip, { 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 : "",
@@ -1015,7 +1046,7 @@ function TemplateEditorTextArea(props) {
       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(
+  ), (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$1,
     {
       className: classes.floatingButton,
@@ -1025,7 +1056,7 @@ function TemplateEditorTextArea(props) {
       }
     },
     /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
+  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
     IconButton$1,
     {
       className: classes.floatingButton,
@@ -1061,250 +1092,85 @@ function TemplateEditorDirectoryEditorTextArea(props) {
 }
 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
+const useStyles = makeStyles$1((theme) => ({
+  introText: {
+    textAlign: "center",
+    marginTop: theme.spacing(2)
   },
-  {
-    component: OwnerPicker,
-    name: "OwnerPicker",
-    schema: OwnerPickerSchema
+  card: {
+    position: "relative",
+    maxWidth: 340,
+    marginTop: theme.spacing(4),
+    margin: theme.spacing(0, 2)
   },
-  {
-    component: OwnedEntityPicker,
-    name: "OwnedEntityPicker",
-    schema: OwnedEntityPickerSchema
-  }
-];
-
-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"
+  infoIcon: {
+    position: "absolute",
+    top: theme.spacing(1),
+    right: theme.spacing(1)
   }
-);
-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;
+}));
+function TemplateEditorIntro(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", className: classes.title }, group.name), /* @__PURE__ */ React.createElement(Card$1, { className: classes.groupWrapper }, /* @__PURE__ */ React.createElement(List$1, { disablePadding: true, dense: true }, group.items.map((item) => /* @__PURE__ */ React.createElement(
-    MenuItem,
+  const supportsLoad = WebFileSystemAccess.isSupported();
+  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card$1, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(
+    CardActionArea,
     {
-      key: item.id,
-      button: true,
-      divider: true,
-      onClick: () => onSelectOwner(item.id),
-      selected: item.id === filter,
-      className: classes.menuItem,
-      "data-testid": `owner-picker-${item.id}`
+      disabled: !supportsLoad,
+      onClick: () => {
+        var _a;
+        return (_a = props.onSelect) == null ? void 0 : _a.call(props, "local");
+      }
     },
-    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,
+    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+      Typography$1,
       {
-        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,
+        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,
     {
-      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 })
-        }
-      ]
-    }
+      placement: "top",
+      title: "Only supported in some Chromium-based browsers"
+    },
+    /* @__PURE__ */ React.createElement(InfoOutlinedIcon, null)
   )));
-};
-const ListTasksPage = (props) => {
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
+  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: "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, 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",
     {
-      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 })));
-};
+      style: {
+        display: "flex",
+        flexFlow: "row wrap",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        alignContent: "flex-start"
+      }
+    },
+    supportsLoad && cardLoadLocal,
+    cardFormEditor,
+    !supportsLoad && cardLoadLocal,
+    cardFieldExplorer
+  ));
+}
 
-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-64779a2d.esm.js.map
+export { ActionsPage as A, DirectoryEditorProvider as D, OwnerListPicker as O, TemplateEditorBrowser as T, WebFileSystemAccess as W, useDirectoryEditor as a, DryRunProvider as b, TemplateEditorTextArea as c, DryRunResults as d, TemplateEditorIntro as e, useDryRun as u };
+//# sourceMappingURL=TemplateEditorIntro-f7f6d664.esm.js.map