@backstage/plugin-scaffolder 0.12.0 → 0.12.2-next.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @backstage/plugin-scaffolder
 
+## 0.12.2-next.0
+
+### Patch Changes
+
+- 33e139e652: Adds a loading bar to the scaffolder task page if the task is still loading. This can happen if it takes a while for a task worker to pick up a task.
+- 6458be3307: Encode the `formData` in the `queryString` using `JSON.stringify` to keep the types in the decoded value
+- 319f4b79a2: The ScaffolderPage can be passed an optional `TaskPageComponent` with a `loadingText` string. It will replace the Loading text in the scaffolder task page.
+- Updated dependencies
+  - @backstage/core-components@0.8.8-next.0
+  - @backstage/plugin-catalog-react@0.6.14-next.0
+  - @backstage/integration-react@0.1.21-next.0
+
+## 0.12.1
+
+### Patch Changes
+
+- ba59832aed: Permission the Register Existing Component button
+- cee44ad289: Added the ability to collect users `oauth` token from the `RepoUrlPicker` for use in the template manifest
+- a681cb9c2f: Make linkTarget configurable for MarkdownContent component
+- Updated dependencies
+  - @backstage/core-components@0.8.7
+  - @backstage/plugin-catalog-react@0.6.13
+  - @backstage/plugin-catalog-common@0.1.2
+  - @backstage/integration-react@0.1.20
+
+## 0.12.1-next.1
+
+### Patch Changes
+
+- ba59832aed: Permission the Register Existing Component button
+- Updated dependencies
+  - @backstage/core-components@0.8.7-next.1
+  - @backstage/plugin-catalog-react@0.6.13-next.1
+  - @backstage/plugin-catalog-common@0.1.2-next.0
+
+## 0.12.1-next.0
+
+### Patch Changes
+
+- a681cb9c2f: Make linkTarget configurable for MarkdownContent component
+- Updated dependencies
+  - @backstage/core-components@0.8.7-next.0
+  - @backstage/integration-react@0.1.20-next.0
+  - @backstage/plugin-catalog-react@0.6.13-next.0
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/esm/{Router-5ca674eb.esm.js → Router-5df57206.esm.js}

@@ -1,40 +1,30 @@
-import React, { useState, useCallback, useEffect, memo, useMemo } from 'react';
-import { useNavigate, Navigate, generatePath, useParams as useParams$1, useOutlet, Routes, Route } from 'react-router';
-import { Page, Header, Lifecycle, Content, ContentHeader, CreateButton, SupportButton, MarkdownContent, StructuredMetadataTable, InfoCard, Link, ErrorPage, LogViewer, Progress } from '@backstage/core-components';
-import { useRouteRef, useApi, errorApiRef, useApiHolder, useApp, useElementFilter } from '@backstage/core-plugin-api';
-import { EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, entityRouteRef } from '@backstage/plugin-catalog-react';
-import { makeStyles, Stepper, Step, StepLabel, Typography, StepContent, Button, Paper, Box, LinearProgress, Grid, StepButton, CircularProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
-import { E as EntityPicker, a as EntityNamePicker, e as entityNamePickerValidation, b as EntityTagsPicker, R as RepoUrlPicker, r as repoPickerValidation, O as OwnerPicker, c as OwnedEntityPicker, d as registerComponentRouteRef, T as TemplateTypePicker, f as TemplateList, s as scaffolderApiRef, g as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, h as FIELD_EXTENSION_KEY } from './index-8b5d21c1.esm.js';
+import React, { useState, useContext, useCallback } from 'react';
+import { useNavigate, Navigate, generatePath, useOutlet, Routes, Route } from 'react-router';
+import { Page, Header, Lifecycle, Content, ContentHeader, CreateButton, SupportButton, MarkdownContent, StructuredMetadataTable, InfoCard, Progress, ErrorPage } from '@backstage/core-components';
+import { useRouteRef, useApi, errorApiRef, useApiHolder, useElementFilter } from '@backstage/core-plugin-api';
+import { EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker } from '@backstage/plugin-catalog-react';
+import { makeStyles, Stepper, Step, StepLabel, Typography, StepContent, Button, Paper, Box, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+import { E as EntityPicker, a as EntityNamePicker, e as entityNamePickerValidation, b as EntityTagsPicker, R as RepoUrlPicker, r as repoPickerValidation, O as OwnerPicker, c as OwnedEntityPicker, d as registerComponentRouteRef, T as TemplateTypePicker, f as TemplateList, S as SecretsContext, s as scaffolderApiRef, g as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, h as FIELD_EXTENSION_KEY, i as SecretsContextProvider, j as TaskPage } from './index-71578268.esm.js';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
+import { usePermission } from '@backstage/plugin-permission-react';
 import qs from 'qs';
 import { useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
-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 { makeStyles as makeStyles$1, createStyles } from '@material-ui/core/styles';
-import Typography$1 from '@material-ui/core/Typography';
-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 { parseEntityName } from '@backstage/catalog-model';
-import LanguageIcon from '@material-ui/icons/Language';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
 import '@material-ui/lab/Autocomplete';
+import '@backstage/catalog-model';
 import 'react-use/lib/useEffectOnce';
 import '@material-ui/lab';
 import '@backstage/integration-react';
 import '@material-ui/core/FormHelperText';
 import '@material-ui/core/Input';
 import '@material-ui/core/InputLabel';
+import 'react-use/lib/useDebounce';
 import '@material-ui/icons/Star';
 import '@material-ui/icons/StarBorder';
 import '@material-ui/icons/Warning';
@@ -42,6 +32,19 @@ import 'lodash/capitalize';
 import '@material-ui/icons/CheckBox';
 import '@material-ui/icons/CheckBoxOutlineBlank';
 import '@material-ui/icons/ExpandMore';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Step';
+import '@material-ui/core/StepLabel';
+import '@material-ui/core/Stepper';
+import '@material-ui/core/styles';
+import '@material-ui/core/Typography';
+import '@material-ui/icons/Cancel';
+import '@material-ui/icons/Check';
+import '@material-ui/icons/FiberManualRecord';
+import 'luxon';
+import 'react-use/lib/useInterval';
+import 'use-immer';
+import '@material-ui/icons/Language';
 
 const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
   {
@@ -72,7 +75,7 @@ const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
   }
 ];
 
-const useStyles$3 = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   contentWrapper: {
     display: "grid",
     gridTemplateAreas: "'filters' 'grid'",
@@ -84,7 +87,7 @@ const ScaffolderPageContents = ({
   TemplateCardComponent,
   groups
 }) => {
-  const styles = useStyles$3();
+  const styles = useStyles$1();
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const otherTemplatesGroup = {
     title: groups ? "Other Templates" : "Templates",
@@ -93,6 +96,7 @@ const ScaffolderPageContents = ({
       return !filtered.some((result) => result === true);
     }
   };
+  const { allowed } = usePermission(catalogEntityCreatePermission);
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
@@ -103,7 +107,7 @@ const ScaffolderPageContents = ({
     subtitle: "Create new software components using standard templates"
   }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, {
     title: "Available Templates"
-  }, /* @__PURE__ */ React.createElement(CreateButton, {
+  }, allowed && /* @__PURE__ */ React.createElement(CreateButton, {
     title: "Register Existing Component",
     to: registerComponentLink && registerComponentLink()
   }), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement("div", {
@@ -212,7 +216,8 @@ function transformSchemaToProps(inputSchema) {
 }
 
 const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, {
-  content: description
+  content: description,
+  linkTarget: "_blank"
 });
 
 var fieldOverrides = /*#__PURE__*/Object.freeze({
@@ -398,6 +403,7 @@ const TemplatePage = ({
   customFieldExtensions = []
 }) => {
   const apiHolder = useApiHolder();
+  const secretsContext = useContext(SecretsContext);
   const errorApi = useApi(errorApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
   const { templateName } = useParams();
@@ -409,13 +415,17 @@ const TemplatePage = ({
     const query = qs.parse(window.location.search, {
       ignoreQueryPrefix: true
     });
-    return (_a = query.formData) != null ? _a : {};
+    try {
+      return JSON.parse(query.formData);
+    } catch (e) {
+      return (_a = query.formData) != null ? _a : {};
+    }
   });
   const handleFormReset = () => setFormState({});
   const handleChange = useCallback((e) => setFormState(e.formData), [setFormState]);
   const handleCreate = async () => {
     var _a;
-    const id = await scaffolderApi.scaffold(templateName, formState);
+    const id = await scaffolderApi.scaffold(templateName, formState, secretsContext == null ? void 0 : secretsContext.secrets);
     const formParams = qs.stringify({ formData: formState }, { addQueryPrefix: true });
     const newUrl = `${window.location.pathname}${formParams}`;
     (_a = window.history) == null ? void 0 : _a.replaceState(null, document.title, newUrl);
@@ -464,406 +474,6 @@ const TemplatePage = ({
   }))));
 };
 
-function reducer(draft, action) {
-  var _a, _b, _c;
-  switch (action.type) {
-    case "INIT": {
-      draft.steps = action.data.spec.steps.reduce((current, next) => {
-        current[next.id] = { status: "open", id: next.id };
-        return current;
-      }, {});
-      draft.stepLogs = action.data.spec.steps.reduce((current, next) => {
-        current[next.id] = [];
-        return current;
-      }, {});
-      draft.loading = false;
-      draft.error = void 0;
-      draft.completed = false;
-      draft.task = action.data;
-      return;
-    }
-    case "LOGS": {
-      const entries = action.data;
-      for (const entry of entries) {
-        const logLine = `${entry.createdAt} ${entry.body.message}`;
-        if (!entry.body.stepId || !((_a = draft.steps) == null ? void 0 : _a[entry.body.stepId])) {
-          continue;
-        }
-        const currentStepLog = (_b = draft.stepLogs) == null ? void 0 : _b[entry.body.stepId];
-        const currentStep = (_c = draft.steps) == null ? void 0 : _c[entry.body.stepId];
-        if (entry.body.status && entry.body.status !== currentStep.status) {
-          currentStep.status = entry.body.status;
-          if (currentStep.status === "processing") {
-            currentStep.startedAt = entry.createdAt;
-          }
-          if (["cancelled", "failed", "completed"].includes(currentStep.status)) {
-            currentStep.endedAt = entry.createdAt;
-          }
-        }
-        currentStepLog == null ? void 0 : currentStepLog.push(logLine);
-      }
-      return;
-    }
-    case "COMPLETED": {
-      draft.completed = true;
-      draft.output = action.data.body.output;
-      return;
-    }
-    case "ERROR": {
-      draft.error = action.data;
-      draft.loading = false;
-      draft.completed = true;
-      return;
-    }
-    default:
-      return;
-  }
-}
-const useTaskEventStream = (taskId) => {
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const [state, dispatch] = useImmerReducer(reducer, {
-    loading: true,
-    completed: false,
-    stepLogs: {},
-    steps: {}
-  });
-  useEffect(() => {
-    let didCancel = false;
-    let subscription;
-    let logPusher;
-    scaffolderApi.getTask(taskId).then((task) => {
-      if (didCancel) {
-        return;
-      }
-      dispatch({ type: "INIT", data: task });
-      const observable = scaffolderApi.streamLogs({ taskId });
-      const collectedLogEvents = new Array();
-      function emitLogs() {
-        if (collectedLogEvents.length) {
-          const logs = collectedLogEvents.splice(0, collectedLogEvents.length);
-          dispatch({ type: "LOGS", data: logs });
-        }
-      }
-      logPusher = setInterval(emitLogs, 500);
-      subscription = observable.subscribe({
-        next: (event) => {
-          switch (event.type) {
-            case "log":
-              return collectedLogEvents.push(event);
-            case "completion":
-              emitLogs();
-              dispatch({ type: "COMPLETED", data: event });
-              return void 0;
-            default:
-              throw new Error(`Unhandled event type ${event.type} in observer`);
-          }
-        },
-        error: (error) => {
-          emitLogs();
-          dispatch({ type: "ERROR", data: error });
-        }
-      });
-    }, (error) => {
-      if (!didCancel) {
-        dispatch({ type: "ERROR", data: error });
-      }
-    });
-    return () => {
-      didCancel = true;
-      if (subscription) {
-        subscription.unsubscribe();
-      }
-      if (logPusher) {
-        clearInterval(logPusher);
-      }
-    };
-  }, [scaffolderApi, dispatch, taskId]);
-  return state;
-};
-
-const useStyles$2 = makeStyles({
-  svgIcon: {
-    display: "inline-block",
-    "& svg": {
-      display: "inline-block",
-      fontSize: "inherit",
-      verticalAlign: "baseline"
-    }
-  }
-});
-const IconLink = (props) => {
-  const { href, text, Icon, ...linkProps } = props;
-  const classes = useStyles$2();
-  return /* @__PURE__ */ React.createElement(Grid, {
-    container: true,
-    direction: "row",
-    spacing: 1
-  }, /* @__PURE__ */ React.createElement(Grid, {
-    item: true
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    component: "div",
-    className: classes.svgIcon
-  }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Grid, {
-    item: true
-  }, /* @__PURE__ */ React.createElement(Link, {
-    to: href,
-    ...linkProps
-  }, text || href)));
-};
-
-const TaskPageLinks = ({ output }) => {
-  const { entityRef: entityRefOutput, remoteUrl } = output;
-  let { links = [] } = output;
-  const app = useApp();
-  const entityRoute = useRouteRef(entityRouteRef);
-  const iconResolver = (key) => {
-    var _a;
-    return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
-  };
-  if (remoteUrl) {
-    links = [{ url: remoteUrl, title: "Repo" }, ...links];
-  }
-  if (entityRefOutput) {
-    links = [
-      {
-        entityRef: entityRefOutput,
-        title: "Open in catalog",
-        icon: "catalog"
-      },
-      ...links
-    ];
-  }
-  return /* @__PURE__ */ React.createElement(Box, {
-    px: 3,
-    pb: 3
-  }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
-    if (entityRef) {
-      const entityName = parseEntityName(entityRef);
-      const target = entityRoute(entityName);
-      return { title, icon, url: target };
-    }
-    return { title, icon, url };
-  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(IconLink, {
-    key: `output-link-${i}`,
-    href: url,
-    text: title != null ? title : url,
-    Icon: iconResolver(icon),
-    target: "_blank"
-  })));
-};
-
-const humanizeDuration = require("humanize-duration");
-const useStyles$1 = makeStyles$1((theme) => createStyles({
-  root: {
-    width: "100%"
-  },
-  button: {
-    marginBottom: theme.spacing(2),
-    marginLeft: theme.spacing(2)
-  },
-  actionsContainer: {
-    marginBottom: theme.spacing(2)
-  },
-  resetContainer: {
-    padding: theme.spacing(3)
-  },
-  labelWrapper: {
-    display: "flex",
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  stepWrapper: {
-    width: "100%"
-  }
-}));
-const StepTimeTicker = ({ step }) => {
-  const [time, setTime] = useState("");
-  useInterval(() => {
-    if (!step.startedAt) {
-      setTime("");
-      return;
-    }
-    const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
-    const startedAt = DateTime.fromISO(step.startedAt);
-    const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
-    setTime(humanizeDuration(formatted, { round: true }));
-  }, 1e3);
-  return /* @__PURE__ */ React.createElement(Typography$1, {
-    variant: "caption"
-  }, time);
-};
-const useStepIconStyles = makeStyles$1((theme) => createStyles({
-  root: {
-    color: theme.palette.text.disabled,
-    display: "flex",
-    height: 22,
-    alignItems: "center"
-  },
-  completed: {
-    color: theme.palette.status.ok
-  },
-  error: {
-    color: theme.palette.status.error
-  }
-}));
-function TaskStepIconComponent(props) {
-  const classes = useStepIconStyles();
-  const { active, completed, error } = props;
-  const getMiddle = () => {
-    if (active) {
-      return /* @__PURE__ */ React.createElement(CircularProgress, {
-        size: "24px"
-      });
-    }
-    if (completed) {
-      return /* @__PURE__ */ React.createElement(Check, null);
-    }
-    if (error) {
-      return /* @__PURE__ */ React.createElement(Cancel, null);
-    }
-    return /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null);
-  };
-  return /* @__PURE__ */ React.createElement("div", {
-    className: classNames(classes.root, {
-      [classes.completed]: completed,
-      [classes.error]: error
-    })
-  }, getMiddle());
-}
-const TaskStatusStepper = memo(({
-  steps,
-  currentStepId,
-  onUserStepChange
-}) => {
-  const classes = useStyles$1();
-  return /* @__PURE__ */ React.createElement("div", {
-    className: classes.root
-  }, /* @__PURE__ */ React.createElement(Stepper$1, {
-    activeStep: steps.findIndex((s) => s.id === currentStepId),
-    orientation: "vertical",
-    nonLinear: true
-  }, steps.map((step, index) => {
-    const isCompleted = step.status === "completed";
-    const isFailed = step.status === "failed";
-    const isActive = step.status === "processing";
-    const isSkipped = step.status === "skipped";
-    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,
-        error: isFailed,
-        active: isActive
-      },
-      StepIconComponent: TaskStepIconComponent,
-      className: classes.stepWrapper
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: classes.labelWrapper
-    }, /* @__PURE__ */ React.createElement(Typography$1, {
-      variant: "subtitle2"
-    }, step.name), isSkipped ? /* @__PURE__ */ React.createElement(Typography$1, {
-      variant: "caption"
-    }, "Skipped") : /* @__PURE__ */ React.createElement(StepTimeTicker, {
-      step
-    })))));
-  })));
-});
-const hasLinks = ({ entityRef, remoteUrl, links = [] }) => !!(entityRef || remoteUrl || links.length > 0);
-const TaskPage = () => {
-  const classes = useStyles$1();
-  const navigate = useNavigate();
-  const rootLink = useRouteRef(rootRouteRef);
-  const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
-  const [lastActiveStepId, setLastActiveStepId] = useState(void 0);
-  const { taskId } = useParams$1();
-  const taskStream = useTaskEventStream(taskId);
-  const completed = taskStream.completed;
-  const steps = useMemo(() => {
-    var _a, _b;
-    return (_b = (_a = taskStream.task) == null ? void 0 : _a.spec.steps.map((step) => {
-      var _a2;
-      return {
-        ...step,
-        ...(_a2 = taskStream == null ? void 0 : taskStream.steps) == null ? void 0 : _a2[step.id]
-      };
-    })) != null ? _b : [];
-  }, [taskStream]);
-  useEffect(() => {
-    var _a;
-    const mostRecentFailedOrActiveStep = steps.find((step) => ["failed", "processing"].includes(step.status));
-    if (completed && !mostRecentFailedOrActiveStep) {
-      setLastActiveStepId((_a = steps[steps.length - 1]) == null ? void 0 : _a.id);
-      return;
-    }
-    setLastActiveStepId(mostRecentFailedOrActiveStep == null ? void 0 : mostRecentFailedOrActiveStep.id);
-  }, [steps, completed]);
-  const currentStepId = userSelectedStepId != null ? userSelectedStepId : lastActiveStepId;
-  const logAsString = useMemo(() => {
-    if (!currentStepId) {
-      return "Loading...";
-    }
-    const log = taskStream.stepLogs[currentStepId];
-    if (!(log == null ? void 0 : log.length)) {
-      return "Waiting for logs...";
-    }
-    return log.join("\n");
-  }, [taskStream.stepLogs, currentStepId]);
-  const taskNotFound = taskStream.completed === true && taskStream.loading === false && !taskStream.task;
-  const { output } = taskStream;
-  const handleStartOver = () => {
-    var _a, _b;
-    if (!taskStream.task || !((_b = (_a = taskStream.task) == null ? void 0 : _a.spec.metadata) == null ? void 0 : _b.name)) {
-      navigate(generatePath(rootLink()));
-    }
-    const formData = taskStream.task.spec.apiVersion === "backstage.io/v1beta2" ? taskStream.task.spec.values : taskStream.task.spec.parameters;
-    navigate(generatePath(`${rootLink()}/templates/:templateName?${qs.stringify({ formData })}`, {
-      templateName: taskStream.task.spec.metadata.name
-    }));
-  };
-  return /* @__PURE__ */ React.createElement(Page, {
-    themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
-    pageTitleOverride: `Task ${taskId}`,
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Task Activity ", /* @__PURE__ */ React.createElement(Lifecycle, {
-      alpha: true,
-      shorthand: true
-    })),
-    subtitle: `Activity for task: ${taskId}`
-  }), /* @__PURE__ */ React.createElement(Content, null, taskNotFound ? /* @__PURE__ */ React.createElement(ErrorPage, {
-    status: "404",
-    statusMessage: "Task not found",
-    additionalInfo: "No task found with this ID"
-  }) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Grid$1, {
-    container: true
-  }, /* @__PURE__ */ React.createElement(Grid$1, {
-    item: true,
-    xs: 3
-  }, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(TaskStatusStepper, {
-    steps,
-    currentStepId,
-    onUserStepChange: setUserSelectedStepId
-  }), output && hasLinks(output) && /* @__PURE__ */ React.createElement(TaskPageLinks, {
-    output
-  }), /* @__PURE__ */ React.createElement(Button, {
-    className: classes.button,
-    onClick: handleStartOver,
-    disabled: !completed,
-    variant: "contained",
-    color: "primary"
-  }, "Start Over"))), /* @__PURE__ */ React.createElement(Grid$1, {
-    item: true,
-    xs: 9
-  }, /* @__PURE__ */ React.createElement("div", {
-    style: { height: "80vh" }
-  }, /* @__PURE__ */ React.createElement(LogViewer, {
-    text: logAsString
-  })))))));
-};
-
 const useStyles = makeStyles((theme) => ({
   code: {
     fontFamily: "Menlo, monospace",
@@ -972,8 +582,13 @@ const ActionsPage = () => {
   }), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
-const Router = ({ TemplateCardComponent, groups }) => {
+const Router = ({
+  TemplateCardComponent,
+  TaskPageComponent,
+  groups
+}) => {
   const outlet = useOutlet();
+  const TaskPageElement = TaskPageComponent || TaskPage;
   const customFieldExtensions = useElementFilter(outlet, (elements) => elements.selectByComponentData({
     key: FIELD_EXTENSION_WRAPPER_KEY
   }).findComponentData({
@@ -991,12 +606,12 @@ const Router = ({ TemplateCardComponent, groups }) => {
     })
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/templates/:templateName",
-    element: /* @__PURE__ */ React.createElement(TemplatePage, {
+    element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePage, {
       customFieldExtensions: fieldExtensions
-    })
+    }))
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/tasks/:taskId",
-    element: /* @__PURE__ */ React.createElement(TaskPage, null)
+    element: /* @__PURE__ */ React.createElement(TaskPageElement, null)
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "/actions",
     element: /* @__PURE__ */ React.createElement(ActionsPage, null)
@@ -1004,4 +619,4 @@ const Router = ({ TemplateCardComponent, groups }) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-5ca674eb.esm.js.map
+//# sourceMappingURL=Router-5df57206.esm.js.map