@backstage/plugin-scaffolder 1.14.1-next.1 → 1.14.1

package/dist/esm/{TemplateEditorIntro-580933c6.esm.js → ListTasksPage-44381650.esm.js}

@@ -1,29 +1,32 @@
-import React, { useState, Fragment, createContext, useRef, useCallback, useMemo, useContext, useEffect, Children } from 'react';
+import React, { useState, Fragment, createContext, useEffect, useContext, useRef, useCallback, useMemo, 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, Card, List, MenuItem, ListItemIcon, ListItemText, Tooltip, IconButton as IconButton$1, Divider as Divider$1 } from '@material-ui/core';
+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 classNames from 'classnames';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 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 { 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 Chip from '@material-ui/core/Chip';
-import SettingsIcon from '@material-ui/icons/Settings';
-import AllIcon from '@material-ui/icons/FontDownload';
+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 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 { 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$1 from '@material-ui/core/List';
+import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon$1 from '@material-ui/core/ListItemIcon';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText$1 from '@material-ui/core/ListItemText';
+import ListItemText 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';
@@ -33,7 +36,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 { o as TaskStatusStepper, p as TaskPageLinks } from './TaskPage-b9589b1b.esm.js';
+import { a as TaskStatusStepper, b as TaskPageLinks } from './TaskPage-e70ca2f8.esm.js';
 import CloseIcon from '@material-ui/icons/Close';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
@@ -41,11 +44,13 @@ 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 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';
+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-e86ee6a1.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';
 
 const useStyles$9 = makeStyles((theme) => ({
   code: {
@@ -191,82 +196,6 @@ 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",
-      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))
-  )))))));
-};
-
 const showDirectoryPicker = window.showDirectoryPicker;
 class WebFileAccess {
   constructor(path, handle) {
@@ -321,109 +250,12 @@ 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");
-  }
+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);
@@ -506,14 +338,14 @@ class DirectoryEditorManager {
     __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
     __privateAdd(this, _files, []);
     __privateAdd(this, _selectedFile, void 0);
-    this.setSelectedFile = (path) => {
+    __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());
     });
@@ -595,7 +427,191 @@ function DirectoryEditorProvider(props) {
   } else if (!result) {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
-  return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
+  return /* @__PURE__ */ React.createElement(DirectoryEditorContext.Provider, { value: result }, props.children);
+}
+
+const MAX_CONTENT_SIZE = 64 * 1024;
+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: "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
+  ));
 }
 
 const useStyles$7 = makeStyles$1((theme) => ({
@@ -617,7 +633,7 @@ const useStyles$7 = makeStyles$1((theme) => ({
 function DryRunResultsList() {
   const classes = useStyles$7();
   const dryRun = useDryRun();
-  return /* @__PURE__ */ React.createElement(List$1, { className: classes.root, dense: true }, dryRun.results.map((result) => {
+  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");
     return /* @__PURE__ */ React.createElement(
@@ -629,13 +645,13 @@ function DryRunResultsList() {
         onClick: () => dryRun.selectResult(result.id)
       },
       /* @__PURE__ */ React.createElement(
-        ListItemIcon$1,
+        ListItemIcon,
         {
           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(ListItemText, { primary: `Result ${result.id}` }),
       /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
         IconButton,
         {
@@ -972,7 +988,7 @@ function TemplateEditorBrowser(props) {
     }
     props.onClose();
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.buttons }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Save all files" }, /* @__PURE__ */ React.createElement(
+  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,
@@ -980,14 +996,14 @@ function TemplateEditorBrowser(props) {
       onClick: () => directoryEditor.save()
     },
     /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload directory" }, /* @__PURE__ */ React.createElement(
+  )), /* @__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, { 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$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 : "",
@@ -1055,7 +1071,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, { 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$1, { title: "Save file" }, /* @__PURE__ */ React.createElement(
     IconButton$1,
     {
       className: classes.floatingButton,
@@ -1065,7 +1081,7 @@ function TemplateEditorTextArea(props) {
       }
     },
     /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
+  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip$1, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
     IconButton$1,
     {
       className: classes.floatingButton,
@@ -1101,86 +1117,264 @@ function TemplateEditorDirectoryEditorTextArea(props) {
 }
 TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
 
-const useStyles = makeStyles$1((theme) => ({
-  introText: {
-    textAlign: "center",
-    marginTop: theme.spacing(2)
+const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
+  {
+    component: EntityPicker,
+    name: "EntityPicker",
+    schema: EntityPickerSchema
   },
-  card: {
-    position: "relative",
-    maxWidth: 340,
-    marginTop: theme.spacing(4),
-    margin: theme.spacing(0, 2)
+  {
+    component: EntityNamePicker,
+    name: "EntityNamePicker",
+    validation: entityNamePickerValidation,
+    schema: EntityNamePickerSchema
   },
-  infoIcon: {
-    position: "absolute",
-    top: theme.spacing(1),
-    right: theme.spacing(1)
+  {
+    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
   }
-}));
-function TemplateEditorIntro(props) {
+];
+
+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 supportsLoad = WebFileSystemAccess.isSupported();
-  const cardLoadLocal = /* @__PURE__ */ React.createElement(Card$1, { className: classes.card, elevation: 4 }, /* @__PURE__ */ React.createElement(
-    CardActionArea,
+  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,
     {
-      disabled: !supportsLoad,
-      onClick: () => {
-        var _a;
-        return (_a = props.onSelect) == null ? void 0 : _a.call(props, "local");
-      }
+      variant: "subtitle2",
+      component: "span",
+      className: classes.title
     },
-    /* @__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$1,
+    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,
     {
-      placement: "top",
-      title: "Only supported in some Chromium-based browsers"
+      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}`
     },
-    /* @__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",
+    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,
     {
-      style: {
-        display: "flex",
-        flexFlow: "row wrap",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        alignContent: "flex-start"
+      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."
       }
-    },
-    supportsLoad && cardLoadLocal,
-    cardFormEditor,
-    !supportsLoad && cardLoadLocal,
-    cardFieldExplorer
-  ));
-}
+    ));
+  }
+  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, 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-580933c6.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, useDryRun as u };
+//# sourceMappingURL=ListTasksPage-44381650.esm.js.map