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

package/dist/esm/{index-42d9f897.esm.js → index-02b0e824.esm.js}

@@ -3,47 +3,66 @@ import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import ObservableImpl from 'zen-observable';
 import { scmIntegrationsApiRef, scmAuthApiRef } from '@backstage/integration-react';
-import { scaffolderApiRef as scaffolderApiRef$1, useTemplateSecrets as useTemplateSecrets$1, createScaffolderFieldExtension as createScaffolderFieldExtension$1, ScaffolderFieldExtensions as ScaffolderFieldExtensions$1, createScaffolderLayout as createScaffolderLayout$1, ScaffolderLayouts as ScaffolderLayouts$1 } from '@backstage/plugin-scaffolder-react';
-import { useApi, identityApiRef, createExternalRouteRef, createRouteRef, createSubRouteRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, alertApiRef, useApp, useRouteRef, useRouteRefParams } from '@backstage/core-plugin-api';
+import { scaffolderApiRef as scaffolderApiRef$1, useTemplateSecrets as useTemplateSecrets$1, DefaultTemplateOutputs, createScaffolderFieldExtension as createScaffolderFieldExtension$1, ScaffolderFieldExtensions as ScaffolderFieldExtensions$1, createScaffolderLayout as createScaffolderLayout$1, ScaffolderLayouts as ScaffolderLayouts$1 } from '@backstage/plugin-scaffolder-react';
+import { useApi, identityApiRef, createExternalRouteRef, createRouteRef, createSubRouteRef, useRouteRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, alertApiRef, useApp, useRouteRefParams } from '@backstage/core-plugin-api';
 import { catalogApiRef, humanizeEntityRef, useEntityTypeFilter, entityRouteRef } from '@backstage/plugin-catalog-react';
-import { TextField, FormControl as FormControl$1, Box, Typography, FormControlLabel, Checkbox, makeStyles, Grid, StepButton, Paper, Button, CircularProgress } from '@material-ui/core';
+import { TextField, FormControl as FormControl$1, makeStyles as makeStyles$1, CircularProgress, Typography, Stepper, Step, StepButton, StepLabel, Box, LinearProgress, IconButton as IconButton$1, Popover as Popover$1, MenuList as MenuList$1, MenuItem as MenuItem$1, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1, Paper, Accordion, AccordionSummary, AccordionDetails, Grid, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Chip, Card, List as List$1, FormControlLabel, Checkbox, Button } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import React, { useCallback, useEffect, useState, useMemo, useRef, memo } from 'react';
+import React, { useCallback, useEffect, useState, useMemo, Fragment, useRef, memo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { z } from 'zod';
 import zodToJsonSchema from 'zod-to-json-schema';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
-import { Select, Progress, DismissableBanner, Link, Page, Header, Content, ErrorPage, LogViewer } from '@backstage/core-components';
+import { Select, Progress, LogViewer, Page, Header, Content, ErrorPanel, ErrorPage, MarkdownContent, CodeSnippet, DismissableBanner, Link } from '@backstage/core-components';
 import useDebounce from 'react-use/lib/useDebounce';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import capitalize from 'lodash/capitalize';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import '@material-ui/core/Button';
-import '@material-ui/core/IconButton';
+import IconButton from '@material-ui/core/IconButton';
 import '@material-ui/core/useMediaQuery';
 import '@material-ui/icons/AddCircleOutline';
 import '@backstage/plugin-catalog-common';
 import '@backstage/plugin-permission-react';
-import Grid$1 from '@material-ui/core/Grid';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import Stepper from '@material-ui/core/Stepper';
-import { makeStyles as makeStyles$1, createStyles } from '@material-ui/core/styles';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import Popover from '@material-ui/core/Popover';
+import { makeStyles, createStyles } 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 { useImmerReducer } from 'use-immer';
+import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
+import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
+import classNames from 'classnames';
+import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import useInterval from 'react-use/lib/useInterval';
+import { DateTime, Interval } from 'luxon';
+import humanizeDuration$1 from 'humanize-duration';
+import { useMountEffect } from '@react-hookz/web';
+import Retry from '@material-ui/icons/Repeat';
+import Toc from '@material-ui/icons/Toc';
+import SettingsIcon from '@material-ui/icons/Settings';
+import AllIcon from '@material-ui/icons/FontDownload';
 import Typography$1 from '@material-ui/core/Typography';
+import Grid$1 from '@material-ui/core/Grid';
+import Step$1 from '@material-ui/core/Step';
+import StepLabel$1 from '@material-ui/core/StepLabel';
+import Stepper$1 from '@material-ui/core/Stepper';
 import Cancel from '@material-ui/icons/Cancel';
 import Check from '@material-ui/icons/Check';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
-import classNames from 'classnames';
-import { DateTime, Interval } from 'luxon';
-import useInterval from 'react-use/lib/useInterval';
-import { useImmerReducer } from 'use-immer';
 import LanguageIcon from '@material-ui/icons/Language';
 
 class ScaffolderClient {
@@ -1264,139 +1283,70 @@ const nextScaffolderTaskRouteRef = createSubRouteRef({
   parent: nextRouteRef,
   path: "/tasks/:taskId"
 });
+const nextScaffolderListTaskRouteRef = createSubRouteRef({
+  id: "scaffolder/next/list-tasks",
+  parent: nextRouteRef,
+  path: "/tasks"
+});
+const nextActionsRouteRef = createSubRouteRef({
+  id: "scaffolder/next/actions",
+  parent: nextRouteRef,
+  path: "/actions"
+});
+const nextEditRouteRef = createSubRouteRef({
+  id: "scaffolder/next/edit",
+  parent: nextRouteRef,
+  path: "/edit"
+});
 
-const scaffolderPlugin = createPlugin({
-  id: "scaffolder",
-  apis: [
-    createApiFactory({
-      api: scaffolderApiRef$1,
-      deps: {
-        discoveryApi: discoveryApiRef,
-        scmIntegrationsApi: scmIntegrationsApiRef,
-        fetchApi: fetchApiRef,
-        identityApi: identityApiRef
-      },
-      factory: ({ discoveryApi, scmIntegrationsApi, fetchApi, identityApi }) => new ScaffolderClient({
-        discoveryApi,
-        scmIntegrationsApi,
-        fetchApi,
-        identityApi
-      })
-    })
-  ],
-  routes: {
-    root: rootRouteRef$1,
-    selectedTemplate: selectedTemplateRouteRef,
-    ongoingTask: scaffolderTaskRouteRef
-  },
-  externalRoutes: {
-    registerComponent: registerComponentRouteRef,
-    viewTechDoc: viewTechDocRouteRef
+const useStyles$8 = makeStyles({
+  button: {
+    color: "white"
   }
 });
-const EntityPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension$1({
-    component: EntityPicker,
-    name: "EntityPicker",
-    schema: EntityPickerSchema
-  })
-);
-const EntityNamePickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension$1({
-    component: EntityNamePicker,
-    name: "EntityNamePicker",
-    validation: entityNamePickerValidation,
-    schema: EntityNamePickerSchema
-  })
-);
-const RepoUrlPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension$1({
-    component: RepoUrlPicker,
-    name: "RepoUrlPicker",
-    validation: repoPickerValidation,
-    schema: RepoUrlPickerSchema
-  })
-);
-const OwnerPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension$1({
-    component: OwnerPicker,
-    name: "OwnerPicker",
-    schema: OwnerPickerSchema
-  })
-);
-const ScaffolderPage = scaffolderPlugin.provide(
-  createRoutableExtension({
-    name: "ScaffolderPage",
-    component: () => import('./Router-73a659c0.esm.js').then((m) => m.Router),
-    mountPoint: rootRouteRef$1
-  })
-);
-const OwnedEntityPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension$1({
-    component: OwnedEntityPicker,
-    name: "OwnedEntityPicker",
-    schema: OwnedEntityPickerSchema
-  })
-);
-const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(
-  createScaffolderFieldExtension$1({
-    component: EntityTagsPicker,
-    name: "EntityTagsPicker",
-    schema: EntityTagsPickerSchema
-  })
-);
-const NextScaffolderPage = scaffolderPlugin.provide(
-  createRoutableExtension({
-    name: "NextScaffolderPage",
-    component: () => import('./index-88194b1f.esm.js').then((m) => m.Router),
-    mountPoint: nextRouteRef
-  })
-);
-
-const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
-const TemplateTypePicker = () => {
-  const alertApi = useApi(alertApiRef);
-  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
-  if (loading)
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  if (!availableTypes)
-    return null;
-  if (error) {
-    alertApi.post({
-      message: `Failed to load entity types`,
-      severity: "error"
-    });
+function ContextMenu$1(props) {
+  const classes = useStyles$8();
+  const [anchorEl, setAnchorEl] = useState();
+  const editLink = useRouteRef(nextEditRouteRef);
+  const actionsLink = useRouteRef(nextActionsRouteRef);
+  const tasksLink = useRouteRef(nextScaffolderListTaskRouteRef);
+  const navigate = useNavigate();
+  const showEditor = props.editor !== false;
+  const showActions = props.actions !== false;
+  const showTasks = props.tasks !== false;
+  if (!showEditor && !showActions) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Categories"), /* @__PURE__ */ React.createElement(
-    Autocomplete$1,
+  const onOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const onClose = () => {
+    setAnchorEl(void 0);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
     {
-      multiple: true,
-      "aria-label": "Categories",
-      options: availableTypes,
-      value: selectedTypes,
-      onChange: (_, value) => setSelectedTypes(value),
-      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ React.createElement(
-            Checkbox,
-            {
-              icon,
-              checkedIcon,
-              checked: selected
-            }
-          ),
-          label: capitalize(option)
-        }
-      ),
-      size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "categories-picker-expand" }),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
-    }
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: onOpen,
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      onClose,
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList, null, showEditor && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(editLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Template Editor" })), showActions && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(actionsLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Description, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Installed Actions" })), showTasks && /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => navigate(tasksLink()) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
   ));
-};
+}
 
 function reducer(draft, action) {
   var _a, _b, _c;
@@ -1524,6 +1474,562 @@ const useTaskEventStream = (taskId) => {
   return state;
 };
 
+const useStepIconStyles$1 = makeStyles$1((theme) => ({
+  root: {
+    color: theme.palette.text.disabled
+  },
+  completed: {
+    color: theme.palette.status.ok
+  },
+  error: {
+    color: theme.palette.status.error
+  }
+}));
+const StepIcon = (props) => {
+  const classes = useStepIconStyles$1();
+  const { active, completed, error, skipped } = props;
+  const getMiddle = () => {
+    if (active) {
+      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "20px" });
+    }
+    if (completed) {
+      return /* @__PURE__ */ React.createElement(CheckCircleOutline, null);
+    }
+    if (error) {
+      return /* @__PURE__ */ React.createElement(ErrorOutline, null);
+    }
+    if (skipped) {
+      return /* @__PURE__ */ React.createElement(RemoveCircleOutline, null);
+    }
+    return /* @__PURE__ */ React.createElement(PanoramaFishEyeIcon, null);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(classes.root, {
+        [classes.completed]: completed,
+        [classes.error]: error
+      })
+    },
+    getMiddle()
+  );
+};
+
+const StepTime = (props) => {
+  const [time, setTime] = useState("");
+  const { step } = props;
+  const calculate = useCallback(() => {
+    if (!step.startedAt) {
+      setTime("");
+      return;
+    }
+    const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
+    const startedAt = DateTime.fromISO(step.startedAt);
+    const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
+    setTime(humanizeDuration$1(formatted, { round: true }));
+  }, [step.endedAt, step.startedAt]);
+  useMountEffect(() => calculate());
+  useInterval(() => !step.endedAt && calculate(), 1e3);
+  return /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, time);
+};
+
+const TaskSteps = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    Stepper,
+    {
+      activeStep: props.activeStep,
+      alternativeLabel: true,
+      variant: "elevation"
+    },
+    props.steps.map((step, index) => {
+      const isCompleted = step.status === "completed";
+      const isFailed = step.status === "failed";
+      const isActive = step.status === "processing";
+      const isSkipped = step.status === "skipped";
+      const stepIconProps = {
+        completed: isCompleted,
+        error: isFailed,
+        active: isActive,
+        skipped: isSkipped
+      };
+      return /* @__PURE__ */ React.createElement(Step, { key: index }, /* @__PURE__ */ React.createElement(StepButton, null, /* @__PURE__ */ React.createElement(
+        StepLabel,
+        {
+          StepIconProps: stepIconProps,
+          StepIconComponent: StepIcon
+        },
+        /* @__PURE__ */ React.createElement(Box, null, step.name),
+        /* @__PURE__ */ React.createElement(StepTime, { step })
+      )));
+    })
+  );
+};
+
+const useStyles$7 = makeStyles$1((theme) => ({
+  failed: {
+    backgroundColor: theme.palette.error.main
+  },
+  success: {
+    backgroundColor: theme.palette.success.main
+  }
+}));
+const TaskBorder = (props) => {
+  const styles = useStyles$7();
+  if (!props.isComplete) {
+    return /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" });
+  }
+  return /* @__PURE__ */ React.createElement(
+    LinearProgress,
+    {
+      variant: "determinate",
+      classes: { bar: props.isError ? styles.failed : styles.success },
+      value: 100
+    }
+  );
+};
+
+const useStyles$6 = makeStyles({
+  root: {
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  }
+});
+const TaskLogStream = (props) => {
+  const styles = useStyles$6();
+  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(
+    LogViewer,
+    {
+      text: Object.values(props.logs).map((l) => l.join("\n")).filter(Boolean).join("\n")
+    }
+  ));
+};
+
+const useStyles$5 = makeStyles$1((theme) => ({
+  button: {
+    color: theme.palette.common.white
+  }
+}));
+const ContextMenu = (props) => {
+  const { logsVisible, onToggleLogs, onStartOver } = props;
+  const classes = useStyles$5();
+  const [anchorEl, setAnchorEl] = useState();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton$1,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: (event) => {
+        setAnchorEl(event.currentTarget);
+      },
+      "data-testid": "menu-button",
+      color: "inherit",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover$1,
+    {
+      open: Boolean(anchorEl),
+      onClose: () => setAnchorEl(void 0),
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList$1, null, /* @__PURE__ */ React.createElement(MenuItem$1, { onClick: () => onToggleLogs == null ? void 0 : onToggleLogs(!logsVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Toc, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: logsVisible ? "Hide Logs" : "Show Logs" })), /* @__PURE__ */ React.createElement(MenuItem$1, { onClick: onStartOver }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Retry, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Start Over" })))
+  ));
+};
+
+const useStyles$4 = makeStyles$1({
+  contentWrapper: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+const OngoingTask = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { taskId } = useParams();
+  const templateRouteRef = useRouteRef(nextSelectedTemplateRouteRef);
+  const navigate = useNavigate();
+  const taskStream = useTaskEventStream(taskId);
+  const classes = useStyles$4();
+  const steps = useMemo(
+    () => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = taskStream.task) == null ? void 0 : _a2.spec.steps.map((step) => {
+        var _a3;
+        return {
+          ...step,
+          ...(_a3 = taskStream == null ? void 0 : taskStream.steps) == null ? void 0 : _a3[step.id]
+        };
+      })) != null ? _b2 : [];
+    },
+    [taskStream]
+  );
+  const [logsVisible, setLogVisibleState] = useState(false);
+  useEffect(() => {
+    if (taskStream.error) {
+      setLogVisibleState(true);
+    }
+  }, [taskStream.error]);
+  const activeStep = useMemo(() => {
+    for (let i = steps.length - 1; i >= 0; i--) {
+      if (steps[i].status !== "open") {
+        return i;
+      }
+    }
+    return 0;
+  }, [steps]);
+  const startOver = useCallback(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    const { namespace, name } = (_d2 = (_c2 = (_b2 = (_a2 = taskStream.task) == null ? void 0 : _a2.spec.templateInfo) == null ? void 0 : _b2.entity) == null ? void 0 : _c2.metadata) != null ? _d2 : {};
+    const formData = (_f2 = (_e2 = taskStream.task) == null ? void 0 : _e2.spec.parameters) != null ? _f2 : {};
+    if (!namespace || !name) {
+      return;
+    }
+    navigate({
+      pathname: templateRouteRef({
+        namespace,
+        templateName: name
+      }),
+      search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`
+    });
+  }, [
+    navigate,
+    (_a = taskStream.task) == null ? void 0 : _a.spec.parameters,
+    (_d = (_c = (_b = taskStream.task) == null ? void 0 : _b.spec.templateInfo) == null ? void 0 : _c.entity) == null ? void 0 : _d.metadata,
+    templateRouteRef
+  ]);
+  const Outputs = (_e = props.TemplateOutputsComponent) != null ? _e : DefaultTemplateOutputs;
+  const templateName = (_h = (_g = (_f = taskStream.task) == null ? void 0 : _f.spec.templateInfo) == null ? void 0 : _g.entity) == null ? void 0 : _h.metadata.name;
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: `Run of ${templateName}`,
+      title: /* @__PURE__ */ React.createElement("div", null, "Run of ", /* @__PURE__ */ React.createElement("code", null, templateName)),
+      subtitle: `Task ${taskId}`
+    },
+    /* @__PURE__ */ React.createElement(
+      ContextMenu,
+      {
+        onToggleLogs: setLogVisibleState,
+        onStartOver: startOver,
+        logsVisible
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(Content, { className: classes.contentWrapper }, taskStream.error ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(
+    ErrorPanel,
+    {
+      error: taskStream.error,
+      title: taskStream.error.message
+    }
+  )) : null, /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(Paper, { style: { position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
+    TaskBorder,
+    {
+      isComplete: taskStream.completed,
+      isError: Boolean(taskStream.error)
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { padding: 2 }, /* @__PURE__ */ React.createElement(TaskSteps, { steps, activeStep })))), /* @__PURE__ */ React.createElement(Outputs, { output: taskStream.output }), logsVisible ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2, height: "100%" }, /* @__PURE__ */ React.createElement(Paper, { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(Box, { padding: 2, height: "100%" }, /* @__PURE__ */ React.createElement(TaskLogStream, { logs: taskStream.stepLogs })))) : null));
+};
+
+const useStyles$3 = makeStyles$1((theme) => ({
+  code: {
+    fontFamily: "Menlo, monospace",
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.grey[700] : theme.palette.grey[300],
+    display: "inline-block",
+    borderRadius: 5,
+    border: `1px solid ${theme.palette.grey[500]}`,
+    position: "relative"
+  },
+  codeRequired: {
+    "&::after": {
+      position: "absolute",
+      content: '"*"',
+      top: 0,
+      right: theme.spacing(0.5),
+      fontWeight: "bolder",
+      color: theme.palette.error.light
+    }
+  }
+}));
+const ExamplesTable = (props) => {
+  return /* @__PURE__ */ React.createElement(Grid, { container: true }, props.examples.map((example, index) => {
+    return /* @__PURE__ */ React.createElement(Fragment, { key: `example-${index}` }, /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 3 }, /* @__PURE__ */ React.createElement(Box, { padding: 4 }, /* @__PURE__ */ React.createElement(Typography, null, example.description))), /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 9 }, /* @__PURE__ */ React.createElement(Box, { padding: 1 }, /* @__PURE__ */ React.createElement(
+      CodeSnippet,
+      {
+        text: example.example,
+        showLineNumbers: true,
+        showCopyCodeButton: true,
+        language: "yaml"
+      }
+    ))));
+  }));
+};
+const ActionsPage = () => {
+  const api = useApi(scaffolderApiRef$1);
+  const classes = useStyles$3();
+  const { loading, value, error } = useAsync(async () => {
+    return api.listActions();
+  });
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(
+      ErrorPage,
+      {
+        statusMessage: "Failed to load installed actions",
+        status: "500"
+      }
+    );
+  }
+  const formatRows = (input) => {
+    const properties = input.properties;
+    if (!properties) {
+      return void 0;
+    }
+    return Object.entries(properties).map((entry) => {
+      var _a;
+      const [key] = entry;
+      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 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) => {
+    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))));
+  };
+  const items = value == null ? void 0 : value.map((action) => {
+    var _a, _b, _c, _d;
+    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 })))));
+  });
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a New Component",
+      title: "Installed actions",
+      subtitle: "This is the collection of all installed actions"
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, items));
+};
+
+const useStyles$2 = makeStyles$1(
+  (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$2();
+  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$1, { 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 scaffolderPlugin = createPlugin({
+  id: "scaffolder",
+  apis: [
+    createApiFactory({
+      api: scaffolderApiRef$1,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        scmIntegrationsApi: scmIntegrationsApiRef,
+        fetchApi: fetchApiRef,
+        identityApi: identityApiRef
+      },
+      factory: ({ discoveryApi, scmIntegrationsApi, fetchApi, identityApi }) => new ScaffolderClient({
+        discoveryApi,
+        scmIntegrationsApi,
+        fetchApi,
+        identityApi
+      })
+    })
+  ],
+  routes: {
+    root: rootRouteRef$1,
+    selectedTemplate: selectedTemplateRouteRef,
+    ongoingTask: scaffolderTaskRouteRef
+  },
+  externalRoutes: {
+    registerComponent: registerComponentRouteRef,
+    viewTechDoc: viewTechDocRouteRef
+  }
+});
+const EntityPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension$1({
+    component: EntityPicker,
+    name: "EntityPicker",
+    schema: EntityPickerSchema
+  })
+);
+const EntityNamePickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension$1({
+    component: EntityNamePicker,
+    name: "EntityNamePicker",
+    validation: entityNamePickerValidation,
+    schema: EntityNamePickerSchema
+  })
+);
+const RepoUrlPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension$1({
+    component: RepoUrlPicker,
+    name: "RepoUrlPicker",
+    validation: repoPickerValidation,
+    schema: RepoUrlPickerSchema
+  })
+);
+const OwnerPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension$1({
+    component: OwnerPicker,
+    name: "OwnerPicker",
+    schema: OwnerPickerSchema
+  })
+);
+const ScaffolderPage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    name: "ScaffolderPage",
+    component: () => import('./Router-e878e04f.esm.js').then((m) => m.Router),
+    mountPoint: rootRouteRef$1
+  })
+);
+const OwnedEntityPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension$1({
+    component: OwnedEntityPicker,
+    name: "OwnedEntityPicker",
+    schema: OwnedEntityPickerSchema
+  })
+);
+const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension$1({
+    component: EntityTagsPicker,
+    name: "EntityTagsPicker",
+    schema: EntityTagsPickerSchema
+  })
+);
+const NextScaffolderPage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    name: "NextScaffolderPage",
+    component: () => import('./index-9bea2c47.esm.js').then((m) => m.Router),
+    mountPoint: nextRouteRef
+  })
+);
+
+const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+const TemplateTypePicker = () => {
+  const alertApi = useApi(alertApiRef);
+  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
+  if (loading)
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (!availableTypes)
+    return null;
+  if (error) {
+    alertApi.post({
+      message: `Failed to load entity types`,
+      severity: "error"
+    });
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button" }, "Categories"), /* @__PURE__ */ React.createElement(
+    Autocomplete$1,
+    {
+      multiple: true,
+      "aria-label": "Categories",
+      options: availableTypes,
+      value: selectedTypes,
+      onChange: (_, value) => setSelectedTypes(value),
+      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              icon,
+              checkedIcon,
+              checked: selected
+            }
+          ),
+          label: capitalize(option)
+        }
+      ),
+      size: "small",
+      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "categories-picker-expand" }),
+      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
+    }
+  ));
+};
+
 const TaskErrors = ({ error }) => {
   const id = useRef("");
   useEffect(() => {
@@ -1539,7 +2045,7 @@ const TaskErrors = ({ error }) => {
   )) : null;
 };
 
-const useStyles$1 = makeStyles({
+const useStyles$1 = makeStyles$1({
   svgIcon: {
     display: "inline-block",
     "& svg": {
@@ -1586,7 +2092,7 @@ const TaskPageLinks = ({ output }) => {
 };
 
 const humanizeDuration = require("humanize-duration");
-const useStyles = makeStyles$1(
+const useStyles = makeStyles(
   (theme) => createStyles({
     root: {
       width: "100%"
@@ -1626,7 +2132,7 @@ const StepTimeTicker = ({ step }) => {
   }, 1e3);
   return /* @__PURE__ */ React.createElement(Typography$1, { variant: "caption" }, time);
 };
-const useStepIconStyles = makeStyles$1(
+const useStepIconStyles = makeStyles(
   (theme) => createStyles({
     root: {
       color: theme.palette.text.disabled,
@@ -1673,7 +2179,7 @@ const TaskStatusStepper = memo(
     const { steps, currentStepId, onUserStepChange } = props;
     const classes = useStyles(props);
     return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(
-      Stepper,
+      Stepper$1,
       {
         activeStep: steps.findIndex((s) => s.id === currentStepId),
         orientation: "vertical",
@@ -1684,8 +2190,8 @@ const TaskStatusStepper = memo(
         const isFailed = step.status === "failed";
         const isActive = step.status === "processing";
         const isSkipped = step.status === "skipped";
-        return /* @__PURE__ */ React.createElement(Step, { key: String(index), expanded: true }, /* @__PURE__ */ React.createElement(StepButton, { onClick: () => onUserStepChange(step.id) }, /* @__PURE__ */ React.createElement(
-          StepLabel,
+        return /* @__PURE__ */ React.createElement(Step$1, { key: String(index), expanded: true }, /* @__PURE__ */ React.createElement(StepButton, { onClick: () => onUserStepChange(step.id) }, /* @__PURE__ */ React.createElement(
+          StepLabel$1,
           {
             StepIconProps: {
               completed: isCompleted,
@@ -1809,5 +2315,5 @@ const scaffolderApiRef = scaffolderApiRef$1;
 const createScaffolderLayout = createScaffolderLayout$1;
 const ScaffolderLayouts = ScaffolderLayouts$1;
 
-export { EntityNamePickerFieldExtension as A, EntityTagsPickerFieldExtension as B, OwnerPickerFieldExtension as C, OwnedEntityPickerFieldExtension as D, EntityPicker as E, RepoUrlPickerFieldExtension as F, ScaffolderPage as G, scaffolderPlugin as H, nextScaffolderTaskRouteRef as I, makeFieldSchemaFromZod as J, EntityPickerFieldSchema as K, OwnerPickerFieldSchema as L, RepoUrlPickerFieldSchema as M, NextScaffolderPage as N, OwnerPicker as O, OwnedEntityPickerFieldSchema as P, EntityTagsPickerFieldSchema as Q, RepoUrlPicker as R, ScaffolderClient as S, TemplateTypePicker as T, rootRouteRef as U, createScaffolderFieldExtension as V, ScaffolderFieldExtensions as W, useTemplateSecrets as X, scaffolderApiRef as Y, createScaffolderLayout as Z, ScaffolderLayouts as _, actionsRouteRef as a, scaffolderListTaskRouteRef as b, scaffolderTaskRouteRef as c, rootRouteRef$1 as d, editRouteRef as e, TaskStatusStepper as f, TaskPageLinks as g, TaskPage as h, EntityPickerSchema as i, EntityNamePicker as j, entityNamePickerValidation as k, legacySelectedTemplateRouteRef as l, EntityNamePickerSchema as m, EntityTagsPicker as n, EntityTagsPickerSchema as o, repoPickerValidation as p, RepoUrlPickerSchema as q, registerComponentRouteRef as r, selectedTemplateRouteRef as s, OwnerPickerSchema as t, OwnedEntityPicker as u, viewTechDocRouteRef as v, OwnedEntityPickerSchema as w, nextSelectedTemplateRouteRef as x, nextRouteRef as y, EntityPickerFieldExtension as z };
-//# sourceMappingURL=index-42d9f897.esm.js.map
+export { createScaffolderFieldExtension as $, ActionsPage as A, nextScaffolderTaskRouteRef as B, ContextMenu$1 as C, nextActionsRouteRef as D, EntityPicker as E, nextScaffolderListTaskRouteRef as F, OngoingTask as G, EntityPickerFieldExtension as H, EntityNamePickerFieldExtension as I, EntityTagsPickerFieldExtension as J, OwnerPickerFieldExtension as K, OwnedEntityPickerFieldExtension as L, RepoUrlPickerFieldExtension as M, ScaffolderPage as N, OwnerPicker as O, scaffolderPlugin as P, NextScaffolderPage as Q, RepoUrlPicker as R, ScaffolderClient as S, TemplateTypePicker as T, makeFieldSchemaFromZod as U, EntityPickerFieldSchema as V, OwnerPickerFieldSchema as W, RepoUrlPickerFieldSchema as X, OwnedEntityPickerFieldSchema as Y, EntityTagsPickerFieldSchema as Z, rootRouteRef as _, actionsRouteRef as a, ScaffolderFieldExtensions as a0, useTemplateSecrets as a1, scaffolderApiRef as a2, createScaffolderLayout as a3, ScaffolderLayouts as a4, scaffolderListTaskRouteRef as b, scaffolderTaskRouteRef as c, rootRouteRef$1 as d, editRouteRef as e, TaskStatusStepper as f, TaskPageLinks as g, TaskPage as h, EntityPickerSchema as i, EntityNamePicker as j, entityNamePickerValidation as k, legacySelectedTemplateRouteRef as l, EntityNamePickerSchema as m, EntityTagsPicker as n, EntityTagsPickerSchema as o, repoPickerValidation as p, RepoUrlPickerSchema as q, registerComponentRouteRef as r, selectedTemplateRouteRef as s, OwnerPickerSchema as t, OwnedEntityPicker as u, viewTechDocRouteRef as v, OwnedEntityPickerSchema as w, OwnerListPicker as x, nextSelectedTemplateRouteRef as y, nextRouteRef as z };
+//# sourceMappingURL=index-02b0e824.esm.js.map