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

package/dist/esm/{index-8b5d21c1.esm.js → index-71578268.esm.js}

@@ -1,29 +1,44 @@
-import { createApiRef, useApi, attachComponentData, createExternalRouteRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, useRouteRef, alertApiRef } from '@backstage/core-plugin-api';
+import { createApiRef, useApi, attachComponentData, createExternalRouteRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, useRouteRef, alertApiRef, useApp } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import ObservableImpl from 'zen-observable';
-import { catalogApiRef, formatEntityRefTitle, useOwnedEntities, useStarredEntity, getEntityRelations, getEntitySourceLocation, EntityRefLinks, useEntityListProvider, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
-import { TextField, FormControl as FormControl$1, withStyles, makeStyles, IconButton, Tooltip, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Link, FormControlLabel, Checkbox } from '@material-ui/core';
+import { catalogApiRef, formatEntityRefTitle, useOwnedEntities, useStarredEntity, getEntityRelations, getEntitySourceLocation, EntityRefLinks, useEntityListProvider, useEntityTypeFilter, entityRouteRef } from '@backstage/plugin-catalog-react';
+import { TextField, FormControl as FormControl$1, withStyles, makeStyles, IconButton, Tooltip, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Link, FormControlLabel, Checkbox, Grid, StepButton, Paper, Button as Button$1, CircularProgress } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useState, createContext, useContext, useMemo, memo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import { KubernetesValidatorFunctions, makeValidator, RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+import { KubernetesValidatorFunctions, makeValidator, RELATION_OWNED_BY, stringifyEntityRef, parseEntityName } from '@backstage/catalog-model';
 import useEffectOnce from 'react-use/lib/useEffectOnce';
 import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
-import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
+import { scmIntegrationsApiRef, scmAuthApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
-import { Select, Progress, ItemCardHeader, Button, ContentHeader, WarningPanel, Link as Link$1, Content, ItemCardGrid } from '@backstage/core-components';
+import { Select, Progress, ItemCardHeader, Button, ContentHeader, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, Lifecycle, ErrorPage, LogViewer } from '@backstage/core-components';
+import useDebounce from 'react-use/lib/useDebounce';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import WarningIcon from '@material-ui/icons/Warning';
-import { generatePath } from 'react-router';
+import { generatePath, useNavigate, useParams } from 'react-router';
 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 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 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 LanguageIcon from '@material-ui/icons/Language';
 
 const scaffolderApiRef = createApiRef({
   id: "plugin.scaffolder.service"
@@ -493,11 +508,15 @@ const RepoUrlPickerHost = (props) => {
     });
   });
   useEffect(() => {
-    if (hosts && !host) {
-      onChange(hosts[0]);
+    if (!host) {
+      if (hosts == null ? void 0 : hosts.length) {
+        onChange(hosts[0]);
+      } else if (integrations == null ? void 0 : integrations.length) {
+        onChange(integrations[0].host);
+      }
     }
-  }, [hosts, host, onChange]);
-  const hostsOptions = integrations ? integrations.filter((i) => hosts == null ? void 0 : hosts.includes(i.host)).map((i) => ({ label: i.title, value: i.host })) : [{ label: "Loading...", value: "loading" }];
+  }, [hosts, host, onChange, integrations]);
+  const hostsOptions = integrations ? integrations.filter((i) => (hosts == null ? void 0 : hosts.length) ? hosts == null ? void 0 : hosts.includes(i.host) : true).map((i) => ({ label: i.title, value: i.host })) : [{ label: "Loading...", value: "loading" }];
   if (loading) {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
@@ -539,32 +558,53 @@ function serializeRepoPickerUrl(data) {
   return `${data.host}?${params.toString()}`;
 }
 function parseRepoPickerUrl(url) {
-  let host = void 0;
-  let owner = void 0;
-  let repoName = void 0;
-  let organization = void 0;
-  let workspace = void 0;
-  let project = void 0;
+  let host = "";
+  let owner = "";
+  let repoName = "";
+  let organization = "";
+  let workspace = "";
+  let project = "";
   try {
     if (url) {
       const parsed = new URL(`https://${url}`);
       host = parsed.host;
-      owner = parsed.searchParams.get("owner") || void 0;
-      repoName = parsed.searchParams.get("repo") || void 0;
-      organization = parsed.searchParams.get("organization") || void 0;
-      workspace = parsed.searchParams.get("workspace") || void 0;
-      project = parsed.searchParams.get("project") || void 0;
+      owner = parsed.searchParams.get("owner") || "";
+      repoName = parsed.searchParams.get("repo") || "";
+      organization = parsed.searchParams.get("organization") || "";
+      workspace = parsed.searchParams.get("workspace") || "";
+      project = parsed.searchParams.get("project") || "";
     }
   } catch {
   }
   return { host, owner, repoName, organization, workspace, project };
 }
 
+const SecretsContext = createContext(void 0);
+const SecretsContextProvider = ({ children }) => {
+  const [secrets, setSecrets] = useState({});
+  return /* @__PURE__ */ React.createElement(SecretsContext.Provider, {
+    value: { secrets, setSecrets }
+  }, children);
+};
+const useTemplateSecrets = () => {
+  const value = useContext(SecretsContext);
+  if (!value) {
+    throw new Error("useTemplateSecrets must be used within a SecretsContextProvider");
+  }
+  const { setSecrets } = value;
+  const setSecret = useCallback((input) => {
+    setSecrets((currentSecrets) => ({ ...currentSecrets, ...input }));
+  }, [setSecrets]);
+  return { setSecret };
+};
+
 const RepoUrlPicker = (props) => {
   var _a, _b;
   const { uiSchema, onChange, rawErrors, formData } = props;
   const [state, setState] = useState(parseRepoPickerUrl(formData));
   const integrationApi = useApi(scmIntegrationsApiRef);
+  const scmAuthApi = useApi(scmAuthApiRef);
+  const { setSecret } = useTemplateSecrets();
   const allowedHosts = useMemo(() => {
     var _a2, _b2;
     return (_b2 = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) == null ? void 0 : _a2.allowedHosts) != null ? _b2 : [];
@@ -584,6 +624,26 @@ const RepoUrlPicker = (props) => {
   const updateLocalState = useCallback((newState) => {
     setState((prevState) => ({ ...prevState, ...newState }));
   }, [setState]);
+  useDebounce(async () => {
+    var _a2;
+    const { requestUserCredentials } = (_a2 = uiSchema == null ? void 0 : uiSchema["ui:options"]) != null ? _a2 : {};
+    if (!requestUserCredentials || !(state.host && state.owner && state.repoName)) {
+      return;
+    }
+    const [host, owner, repoName] = [
+      state.host,
+      state.owner,
+      state.repoName
+    ].map(encodeURIComponent);
+    const { token } = await scmAuthApi.getCredentials({
+      url: `https://${host}/${owner}/${repoName}`,
+      additionalScope: {
+        repoWrite: true,
+        customScopes: requestUserCredentials.additionalScopes
+      }
+    });
+    setSecret({ [requestUserCredentials.secretsKey]: token });
+  }, 500, [state, uiSchema]);
   const hostType = (_b = state.host && ((_a = integrationApi.byHost(state.host)) == null ? void 0 : _a.type)) != null ? _b : null;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RepoUrlPickerHost, {
     host: state.host,
@@ -747,7 +807,7 @@ const OwnerPickerFieldExtension = scaffolderPlugin.provide(createScaffolderField
 }));
 const ScaffolderPage = scaffolderPlugin.provide(createRoutableExtension({
   name: "ScaffolderPage",
-  component: () => import('./Router-5ca674eb.esm.js').then((m) => m.Router),
+  component: () => import('./Router-5df57206.esm.js').then((m) => m.Router),
   mountPoint: rootRouteRef
 }));
 const OwnedEntityPickerFieldExtension = scaffolderPlugin.provide(createScaffolderFieldExtension({
@@ -769,7 +829,7 @@ const WhiteBorderStar = withStyles({
     color: "#ffffff"
   }
 })(StarBorder);
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
   starButton: {
     position: "absolute",
     top: theme.spacing(0.5),
@@ -780,7 +840,7 @@ const useStyles$1 = makeStyles((theme) => ({
 const favouriteTemplateTooltip = (isStarred) => isStarred ? "Remove from favorites" : "Add to favorites";
 const favouriteTemplateIcon = (isStarred) => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(WhiteBorderStar, null);
 const FavouriteTemplate = (props) => {
-  const classes = useStyles$1();
+  const classes = useStyles$3();
   const { toggleStarredEntity, isStarredEntity } = useStarredEntity(props.entity);
   return /* @__PURE__ */ React.createElement(IconButton, {
     color: "inherit",
@@ -792,7 +852,7 @@ const FavouriteTemplate = (props) => {
   }, favouriteTemplateIcon(isStarredEntity)));
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   cardHeader: {
     position: "relative"
   },
@@ -864,7 +924,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({ backgroundImage: theme.backgroundImage });
+  const classes = useStyles$2({ backgroundImage: theme.backgroundImage });
   const href = generatePath(`${rootLink()}/templates/:templateName`, {
     templateName: templateProps.name
   });
@@ -989,5 +1049,407 @@ const TemplateTypePicker = () => {
   }));
 };
 
-export { EntityPicker as E, FIELD_EXTENSION_WRAPPER_KEY as F, OwnerPicker as O, RepoUrlPicker as R, ScaffolderClient as S, TemplateTypePicker as T, EntityNamePicker as a, EntityTagsPicker as b, OwnedEntityPicker as c, registerComponentRouteRef as d, entityNamePickerValidation as e, TemplateList as f, rootRouteRef as g, FIELD_EXTENSION_KEY as h, createScaffolderFieldExtension as i, ScaffolderFieldExtensions as j, EntityPickerFieldExtension as k, EntityNamePickerFieldExtension as l, EntityTagsPickerFieldExtension as m, OwnerPickerFieldExtension as n, OwnedEntityPickerFieldExtension as o, RepoUrlPickerFieldExtension as p, ScaffolderPage as q, repoPickerValidation as r, scaffolderApiRef as s, scaffolderPlugin as t, TextValuePicker as u, FavouriteTemplate as v };
-//# sourceMappingURL=index-8b5d21c1.esm.js.map
+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$1 = 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$1();
+  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$1, {
+    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 = 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();
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes.root
+  }, /* @__PURE__ */ React.createElement(Stepper, {
+    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, {
+      key: String(index),
+      expanded: true
+    }, /* @__PURE__ */ React.createElement(StepButton, {
+      onClick: () => onUserStepChange(step.id)
+    }, /* @__PURE__ */ React.createElement(StepLabel, {
+      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 = ({ loadingText }) => {
+  const classes = useStyles();
+  const navigate = useNavigate();
+  const rootLink = useRouteRef(rootRouteRef);
+  const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
+  const [lastActiveStepId, setLastActiveStepId] = useState(void 0);
+  const { taskId } = useParams();
+  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 loadingText ? loadingText : "Loading...";
+    }
+    const log = taskStream.stepLogs[currentStepId];
+    if (!(log == null ? void 0 : log.length)) {
+      return "Waiting for logs...";
+    }
+    return log.join("\n");
+  }, [taskStream.stepLogs, currentStepId, loadingText]);
+  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: JSON.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$1, {
+    className: classes.button,
+    onClick: handleStartOver,
+    disabled: !completed,
+    variant: "contained",
+    color: "primary"
+  }, "Start Over"))), /* @__PURE__ */ React.createElement(Grid$1, {
+    item: true,
+    xs: 9
+  }, !currentStepId && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement("div", {
+    style: { height: "80vh" }
+  }, /* @__PURE__ */ React.createElement(LogViewer, {
+    text: logAsString
+  })))))));
+};
+
+export { EntityPicker as E, FIELD_EXTENSION_WRAPPER_KEY as F, OwnerPicker as O, RepoUrlPicker as R, SecretsContext as S, TemplateTypePicker as T, EntityNamePicker as a, EntityTagsPicker as b, OwnedEntityPicker as c, registerComponentRouteRef as d, entityNamePickerValidation as e, TemplateList as f, rootRouteRef as g, FIELD_EXTENSION_KEY as h, SecretsContextProvider as i, TaskPage as j, ScaffolderClient as k, createScaffolderFieldExtension as l, ScaffolderFieldExtensions as m, EntityPickerFieldExtension as n, EntityNamePickerFieldExtension as o, EntityTagsPickerFieldExtension as p, OwnerPickerFieldExtension as q, repoPickerValidation as r, scaffolderApiRef as s, OwnedEntityPickerFieldExtension as t, RepoUrlPickerFieldExtension as u, ScaffolderPage as v, scaffolderPlugin as w, TextValuePicker as x, FavouriteTemplate as y, useTemplateSecrets as z };
+//# sourceMappingURL=index-71578268.esm.js.map