@backstage/plugin-scaffolder 1.3.0-next.1 → 1.3.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @backstage/plugin-scaffolder
 
+## 1.3.0-next.2
+
+### Minor Changes
+
+- dc39366bdb: - Added a new page under `/create/tasks` to show tasks that have been run by the Scaffolder.
+  - Ability to filter these tasks by the signed in user, and all tasks.
+  - Added optional method to the `ScaffolderApi` interface called `listTasks` to get tasks with an required `filterByOwnership` parameter.
+
+### Patch Changes
+
+- ac0c7e45ee: Fixes review mask in `MultistepJsonForm` to work as documented. `show: true` no longer needed when mask is set.
+- fd505f40c0: Handle binary files and files that are too large during dry-run content upload.
+- Updated dependencies
+  - @backstage/plugin-catalog-common@1.0.3-next.1
+  - @backstage/core-components@0.9.5-next.2
+  - @backstage/integration@1.2.1-next.2
+
 ## 1.3.0-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder",
-  "version": "1.3.0-next.1",
+  "version": "1.3.0-next.2",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/esm/{Router-0396362f.esm.js → Router-09b6a7c3.esm.js}

@@ -1,11 +1,11 @@
-import React, { useState, useContext, useCallback, createContext, useEffect, useRef, useMemo, Children, Component } from 'react';
+import React, { useState, useContext, useCallback, createContext, useEffect, useRef, useMemo, Children, Component, Fragment } from 'react';
 import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router';
-import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer } from '@backstage/core-components';
+import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState } from '@backstage/core-components';
 import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
-import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import { s as selectedTemplateRouteRef, r as rootRouteRef, a as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, b as scaffolderApiRef, c as scaffolderTaskRouteRef, d as TaskStatusStepper, e as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, f as FIELD_EXTENSION_KEY, g as SecretsContextProvider, h as actionsRouteRef, i as editRouteRef, j as TaskPage } from './index-6a2f3be9.esm.js';
-import { RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
-import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1 } from '@material-ui/core';
+import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef, EntityRefLink } from '@backstage/plugin-catalog-react';
+import { s as selectedTemplateRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, j as SecretsContextProvider, k as TaskPage } from './index-b64713a1.esm.js';
+import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import WarningIcon from '@material-ui/icons/Warning';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
@@ -19,6 +19,7 @@ import Popover from '@material-ui/core/Popover';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import Description from '@material-ui/icons/Description';
 import Edit from '@material-ui/icons/Edit';
+import List from '@material-ui/icons/List';
 import MoreVert from '@material-ui/icons/MoreVert';
 import qs from 'qs';
 import { useParams } from 'react-router-dom';
@@ -40,7 +41,7 @@ import AccordionDetails from '@material-ui/core/AccordionDetails';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import Divider from '@material-ui/core/Divider';
 import ExpandMoreIcon$1 from '@material-ui/icons/ExpandLess';
-import List from '@material-ui/core/List';
+import List$1 from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Cancel from '@material-ui/icons/Cancel';
@@ -61,7 +62,12 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
 import useDebounce from 'react-use/lib/useDebounce';
 import { showPanel } from '@codemirror/view';
-import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-bff55719.esm.js';
+import MaterialTable from '@material-table/core';
+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 { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-554cb9ad.esm.js';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
@@ -79,12 +85,11 @@ import '@material-ui/core/Step';
 import '@material-ui/core/StepLabel';
 import '@material-ui/core/Stepper';
 import '@material-ui/icons/FiberManualRecord';
-import 'luxon';
 import 'react-use/lib/useInterval';
 import 'use-immer';
 import '@material-ui/icons/Language';
 
-const useStyles$d = makeStyles((theme) => ({
+const useStyles$e = makeStyles((theme) => ({
   cardHeader: {
     position: "relative"
   },
@@ -163,7 +168,7 @@ const TemplateCard = ({ template, deprecated }) => {
   const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
   const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type }) ? templateProps.type : "other";
   const theme = backstageTheme.getPageTheme({ themeId });
-  const classes = useStyles$d({ backgroundImage: theme.backgroundImage });
+  const classes = useStyles$e({ backgroundImage: theme.backgroundImage });
   const href = templateRoute({ templateName: templateProps.name });
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
   const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi);
@@ -248,18 +253,21 @@ const TemplateList = ({
   })))));
 };
 
-const useStyles$c = makeStyles$1({
+const useStyles$d = makeStyles$1({
   button: {
     color: "white"
   }
 });
 function ScaffolderPageContextMenu(props) {
-  const classes = useStyles$c();
+  const classes = useStyles$d();
   const [anchorEl, setAnchorEl] = useState();
-  const pageLink = useRouteRef(rootRouteRef);
+  const editLink = useRouteRef(editRouteRef);
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
   const navigate = useNavigate();
   const showEditor = props.editor !== false;
   const showActions = props.actions !== false;
+  const showTasks = props.tasks !== false;
   if (!showEditor && !showActions) {
     return null;
   }
@@ -284,17 +292,23 @@ function ScaffolderPageContextMenu(props) {
     anchorOrigin: { vertical: "bottom", horizontal: "right" },
     transformOrigin: { vertical: "top", horizontal: "right" }
   }, /* @__PURE__ */ React.createElement(MenuList, null, showEditor && /* @__PURE__ */ React.createElement(MenuItem, {
-    onClick: () => navigate(`${pageLink()}/edit`)
+    onClick: () => navigate(editLink())
   }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, {
     fontSize: "small"
   })), /* @__PURE__ */ React.createElement(ListItemText, {
     primary: "Template Editor"
   })), showActions && /* @__PURE__ */ React.createElement(MenuItem, {
-    onClick: () => navigate(`${pageLink()}/actions`)
+    onClick: () => navigate(actionsLink())
   }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, {
     fontSize: "small"
   })), /* @__PURE__ */ React.createElement(ListItemText, {
     primary: "Installed Actions"
+  })), showTasks && /* @__PURE__ */ React.createElement(MenuItem, {
+    onClick: () => navigate(tasksLink())
+  }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, {
+    fontSize: "small"
+  })), /* @__PURE__ */ React.createElement(ListItemText, {
+    primary: "Task List"
   })))));
 }
 
@@ -474,13 +488,13 @@ function getReviewData(formData, steps) {
         continue;
       }
       const review = uiSchema["ui:backstage"].review;
-      if (!review.show) {
-        continue;
-      }
       if (review.mask) {
         reviewData[key] = review.mask;
         continue;
       }
+      if (!review.show) {
+        continue;
+      }
       reviewData[key] = formData[key];
     }
   }
@@ -732,7 +746,7 @@ const TemplatePage = ({
   }))));
 };
 
-const useStyles$b = makeStyles((theme) => ({
+const useStyles$c = makeStyles((theme) => ({
   code: {
     fontFamily: "Menlo, monospace",
     padding: theme.spacing(1),
@@ -755,7 +769,7 @@ const useStyles$b = makeStyles((theme) => ({
 }));
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
-  const classes = useStyles$b();
+  const classes = useStyles$c();
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
@@ -891,7 +905,7 @@ class WebFileSystemAccess {
   }
 }
 
-const useStyles$a = makeStyles$1((theme) => ({
+const useStyles$b = makeStyles$1((theme) => ({
   introText: {
     textAlign: "center",
     marginTop: theme.spacing(2)
@@ -909,7 +923,7 @@ const useStyles$a = makeStyles$1((theme) => ({
   }
 }));
 function TemplateEditorIntro(props) {
-  const classes = useStyles$a();
+  const classes = useStyles$b();
   const supportsLoad = WebFileSystemAccess.isSupported();
   const cardLoadLocal = /* @__PURE__ */ React.createElement(Card$1, {
     className: classes.card,
@@ -1133,7 +1147,25 @@ function DirectoryEditorProvider(props) {
   }, props.children);
 }
 
+const MAX_CONTENT_SIZE = 256 * 1024;
+const CHUNK_SIZE = 32768;
 const DryRunContext = createContext(void 0);
+function base64EncodeContent(content) {
+  if (content.length > MAX_CONTENT_SIZE) {
+    return btoa("<file too large>");
+  }
+  try {
+    return 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 btoa(chunks.join(""));
+  }
+}
 function DryRunProvider(props) {
   const scaffolderApi = useApi(scaffolderApiRef);
   const [state, setState] = useState({
@@ -1179,7 +1211,7 @@ function DryRunProvider(props) {
       secrets: {},
       directoryContents: options.files.map((file) => ({
         path: file.path,
-        base64Content: btoa(file.content)
+        base64Content: base64EncodeContent(file.content)
       }))
     });
     const result = {
@@ -1212,7 +1244,7 @@ function useDryRun() {
   return value;
 }
 
-const useStyles$9 = makeStyles$1((theme) => ({
+const useStyles$a = makeStyles$1((theme) => ({
   root: {
     overflowY: "auto",
     background: theme.palette.background.default
@@ -1229,9 +1261,9 @@ const useStyles$9 = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResultsList() {
-  const classes = useStyles$9();
+  const classes = useStyles$a();
   const dryRun = useDryRun();
-  return /* @__PURE__ */ React.createElement(List, {
+  return /* @__PURE__ */ React.createElement(List$1, {
     className: classes.root,
     dense: true
   }, dryRun.results.map((result) => {
@@ -1254,7 +1286,7 @@ function DryRunResultsList() {
   }));
 }
 
-const useStyles$8 = makeStyles$1({
+const useStyles$9 = makeStyles$1({
   root: {
     whiteSpace: "nowrap",
     overflowY: "auto"
@@ -1320,7 +1352,7 @@ function FileTreeItem({ entry }) {
   })));
 }
 function FileBrowser(props) {
-  const classes = useStyles$8();
+  const classes = useStyles$9();
   const fileTree = useMemo(() => parseFileEntires(props.filePaths), [props.filePaths]);
   return /* @__PURE__ */ React.createElement(TreeView, {
     selected: props.selected,
@@ -1338,7 +1370,7 @@ function FileBrowser(props) {
   })));
 }
 
-const useStyles$7 = makeStyles$1((theme) => ({
+const useStyles$8 = makeStyles$1((theme) => ({
   root: {
     display: "grid",
     gridTemplateColumns: "280px auto 3fr",
@@ -1354,7 +1386,7 @@ const useStyles$7 = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResultsSplitView(props) {
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   const childArray = Children.toArray(props.children);
   if (childArray.length !== 2) {
     throw new Error("must have exactly 2 children");
@@ -1370,7 +1402,7 @@ function DryRunResultsSplitView(props) {
   }, childArray[1]));
 }
 
-const useStyles$6 = makeStyles$1({
+const useStyles$7 = makeStyles$1({
   root: {
     display: "flex",
     flexFlow: "column nowrap"
@@ -1396,7 +1428,7 @@ const useStyles$6 = makeStyles$1({
   }
 });
 function FilesContent() {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   const { selectedResult } = useDryRun();
   const [selectedPath, setSelectedPath] = useState("");
   const selectedFile = selectedResult == null ? void 0 : selectedResult.directoryContents.find((f) => f.path === selectedPath);
@@ -1461,7 +1493,7 @@ function LogContent() {
 }
 function OutputContent() {
   var _a, _b;
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   const { selectedResult } = useDryRun();
   if (!selectedResult) {
     return null;
@@ -1480,7 +1512,7 @@ function OutputContent() {
   }));
 }
 function DryRunResultsView() {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   const [selectedTab, setSelectedTab] = useState("files");
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.root
@@ -1503,7 +1535,7 @@ function DryRunResultsView() {
   }, selectedTab === "files" && /* @__PURE__ */ React.createElement(FilesContent, null), selectedTab === "log" && /* @__PURE__ */ React.createElement(LogContent, null), selectedTab === "output" && /* @__PURE__ */ React.createElement(OutputContent, null))));
 }
 
-const useStyles$5 = makeStyles$1((theme) => ({
+const useStyles$6 = makeStyles$1((theme) => ({
   header: {
     height: 48,
     minHeight: 0,
@@ -1522,7 +1554,7 @@ const useStyles$5 = makeStyles$1((theme) => ({
   }
 }));
 function DryRunResults() {
-  const classes = useStyles$5();
+  const classes = useStyles$6();
   const dryRun = useDryRun();
   const [expanded, setExpanded] = useState(false);
   const [hidden, setHidden] = useState(true);
@@ -1554,7 +1586,7 @@ function DryRunResults() {
   }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))));
 }
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   button: {
     padding: theme.spacing(1)
   },
@@ -1573,7 +1605,7 @@ const useStyles$4 = makeStyles((theme) => ({
 }));
 function TemplateEditorBrowser(props) {
   var _a, _b;
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   const directoryEditor = useDirectoryEditor();
   const changedFiles = directoryEditor.files.filter((file) => file.dirty);
   const handleClose = () => {
@@ -1617,7 +1649,7 @@ function TemplateEditorBrowser(props) {
   }));
 }
 
-const useStyles$3 = makeStyles$1({
+const useStyles$4 = makeStyles$1({
   containerWrapper: {
     position: "relative",
     width: "100%",
@@ -1665,7 +1697,7 @@ function TemplateEditorForm(props) {
     setErrorText,
     fieldExtensions = []
   } = props;
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   const apiHolder = useApiHolder();
   const [steps, setSteps] = useState();
   const fields = useMemo(() => {
@@ -1760,7 +1792,7 @@ function TemplateEditorFormDirectoryEditorDryRun(props) {
 }
 TemplateEditorForm.DirectoryEditorDryRun = TemplateEditorFormDirectoryEditorDryRun;
 
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
   container: {
     position: "relative",
     width: "100%",
@@ -1789,7 +1821,7 @@ const useStyles$2 = makeStyles((theme) => ({
 }));
 function TemplateEditorTextArea(props) {
   const { errorText } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const panelExtension = useMemo(() => {
     if (!errorText) {
       return showPanel.of(null);
@@ -1855,7 +1887,7 @@ function TemplateEditorDirectoryEditorTextArea(props) {
 }
 TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
 
-const useStyles$1 = makeStyles({
+const useStyles$2 = makeStyles({
   root: {
     gridArea: "pageContent",
     display: "grid",
@@ -1883,7 +1915,7 @@ const useStyles$1 = makeStyles({
   }
 });
 const TemplateEditor = (props) => {
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const [errorText, setErrorText] = useState();
   return /* @__PURE__ */ React.createElement(DirectoryEditorProvider, {
     directory: props.directory
@@ -1945,7 +1977,7 @@ steps:
       values:
         name: \${{parameters.name}}
 `;
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   root: {
     gridArea: "pageContent",
     display: "grid",
@@ -1975,7 +2007,7 @@ const TemplateFormPreviewer = ({
   customFieldExtensions = [],
   onClose
 }) => {
-  const classes = useStyles();
+  const classes = useStyles$1();
   const alertApi = useApi(alertApiRef);
   const catalogApi = useApi(catalogApiRef);
   const [selectedTemplate, setSelectedTemplate] = useState("");
@@ -2082,6 +2114,220 @@ function TemplateEditorPage(props) {
   }), content);
 }
 
+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, {
+    className: classes.root
+  }, filterGroups.map((group) => /* @__PURE__ */ React.createElement(Fragment, {
+    key: group.name
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "subtitle2",
+    className: classes.title
+  }, group.name), /* @__PURE__ */ React.createElement(Card, {
+    className: classes.groupWrapper
+  }, /* @__PURE__ */ React.createElement(List$2, {
+    disablePadding: true,
+    dense: true
+  }, group.items.map((item) => /* @__PURE__ */ React.createElement(MenuItem$1, {
+    key: item.id,
+    button: true,
+    divider: true,
+    onClick: () => onSelectOwner(item.id),
+    selected: item.id === filter,
+    className: classes.menuItem,
+    "data-testid": `owner-picker-${item.id}`
+  }, item.icon && /* @__PURE__ */ React.createElement(ListItemIcon$1, {
+    className: classes.listIcon
+  }, /* @__PURE__ */ React.createElement(item.icon, {
+    fontSize: "small"
+  })), /* @__PURE__ */ React.createElement(ListItemText$1, null, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "body1"
+  }, item.label)))))))));
+};
+
+const CreatedAtColumn = ({ createdAt }) => {
+  const createdAtTime = DateTime.fromISO(createdAt);
+  const formatted = Interval.fromDateTimes(createdAtTime, DateTime.local()).toDuration().valueOf();
+  return /* @__PURE__ */ React.createElement("p", null, 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("p", null, "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(MaterialTable, {
+    data: (_a = value == null ? void 0 : value.tasks) != null ? _a : [],
+    title: "Tasks",
+    columns: [
+      {
+        title: "Task ID",
+        field: "id",
+        render: (row) => /* @__PURE__ */ React.createElement(Link$1, {
+          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 Router = (props) => {
   const { groups, components = {}, defaultPreviewTemplate } = props;
   const { TemplateCardComponent, TaskPageComponent } = components;
@@ -2107,6 +2353,9 @@ const Router = (props) => {
     element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePage, {
       customFieldExtensions: fieldExtensions
     }))
+  }), /* @__PURE__ */ React.createElement(Route, {
+    path: scaffolderListTaskRouteRef.path,
+    element: /* @__PURE__ */ React.createElement(ListTasksPage, null)
   }), /* @__PURE__ */ React.createElement(Route, {
     path: scaffolderTaskRouteRef.path,
     element: /* @__PURE__ */ React.createElement(TaskPageElement, null)
@@ -2128,4 +2377,4 @@ const Router = (props) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-0396362f.esm.js.map
+//# sourceMappingURL=Router-09b6a7c3.esm.js.map