@backstage/plugin-scaffolder 1.15.1 → 1.16.0-next.0

package/dist/esm/{plugin-76d8b756.esm.js → OngoingTask-8acb140b.esm.js}

@@ -1,14 +1,14 @@
 import { scmIntegrationsApiRef, scmAuthApiRef } from '@backstage/integration-react';
-import { scaffolderApiRef, useTemplateSecrets, createScaffolderFieldExtension } from '@backstage/plugin-scaffolder-react';
+import { scaffolderApiRef, useTemplateSecrets, createScaffolderFieldExtension, useTaskEventStream } from '@backstage/plugin-scaffolder-react';
 import { parseEntityRef, stringifyEntityRef, KubernetesValidatorFunctions, RELATION_OWNED_BY, makeValidator } from '@backstage/catalog-model';
 import { ResponseError, NotFoundError } from '@backstage/errors';
 import qs from 'qs';
 import ObservableImpl from 'zen-observable';
 import { EventSourcePolyfill } from 'event-source-polyfill';
 import { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
-import { useApi, identityApiRef, createExternalRouteRef, createRouteRef, createSubRouteRef, errorApiRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
-import { catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import { TextField, FormControl as FormControl$1 } from '@material-ui/core';
+import { useApi, identityApiRef, createExternalRouteRef, createRouteRef, createSubRouteRef, errorApiRef, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, createRoutableExtension, alertApiRef, useRouteRef } from '@backstage/core-plugin-api';
+import { catalogApiRef, humanizeEntityRef, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
+import { TextField, FormControl as FormControl$1, Box, Typography, FormControlLabel, Checkbox, makeStyles, useTheme, IconButton, Popover, MenuList, MenuItem, ListItemIcon, ListItemText, Paper, 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 } from 'react';
@@ -18,10 +18,22 @@ 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 } from '@backstage/core-components';
+import { Select, Progress, Page, Header, Content, ErrorPanel } 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 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 { useParams, useNavigate } from 'react-router-dom';
+import { useAsync as useAsync$1 } from '@react-hookz/web';
+import Cancel from '@material-ui/icons/Cancel';
+import Retry from '@material-ui/icons/Repeat';
+import Toc from '@material-ui/icons/Toc';
+import ControlPointIcon from '@material-ui/icons/ControlPoint';
+import MoreVert from '@material-ui/icons/MoreVert';
+import { DefaultTemplateOutputs, TaskSteps, TaskLogStream } from '@backstage/plugin-scaffolder-react/alpha';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1450,7 +1462,7 @@ const MyGroupsPickerFieldExtension = scaffolderPlugin.provide(
 const ScaffolderPage = scaffolderPlugin.provide(
   createRoutableExtension({
     name: "ScaffolderPage",
-    component: () => import('./Router-f5f81642.esm.js').then((m) => m.Router),
+    component: () => import('./index-52e5acc5.esm.js').then((m) => m.Router),
     mountPoint: rootRouteRef
   })
 );
@@ -1468,13 +1480,282 @@ const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(
     schema: EntityTagsPickerSchema
   })
 );
-const NextScaffolderPage = scaffolderPlugin.provide(
+const LegacyScaffolderPage = scaffolderPlugin.provide(
   createRoutableExtension({
-    name: "NextScaffolderPage",
-    component: () => import('./index-e1da2925.esm.js').then((m) => m.Router),
+    name: "LegacyScaffolderPage",
+    component: () => import('./Router-b60d8000.esm.js').then((m) => m.LegacyRouter),
     mountPoint: rootRouteRef
   })
 );
 
-export { entityNamePickerValidation as A, EntityNamePickerSchema as B, EntityTagsPicker as C, EntityTagsPickerSchema as D, EntityPickerFieldExtension as E, RepoUrlPicker as F, RepoUrlPickerSchema as G, OwnerPicker as H, OwnerPickerSchema as I, OwnedEntityPicker as J, OwnedEntityPickerSchema as K, MyGroupsPicker as L, MyGroupsPickerFieldExtension as M, NextScaffolderPage as N, OwnerPickerFieldExtension as O, RepoUrlPickerFieldExtension as R, ScaffolderClient as S, EntityNamePickerFieldExtension as a, EntityTagsPickerFieldExtension as b, OwnedEntityPickerFieldExtension as c, ScaffolderPage as d, EntityPickerFieldSchema as e, OwnerPickerFieldSchema as f, RepoUrlPickerFieldSchema as g, repoPickerValidation as h, OwnedEntityPickerFieldSchema as i, EntityTagsPickerFieldSchema as j, MyGroupsPickerSchema as k, MyGroupsPickerFieldSchema as l, makeFieldSchemaFromZod as m, selectedTemplateRouteRef as n, scaffolderTaskRouteRef as o, editRouteRef as p, actionsRouteRef as q, rootRouteRef as r, scaffolderPlugin as s, scaffolderListTaskRouteRef as t, registerComponentRouteRef as u, viewTechDocRouteRef as v, legacySelectedTemplateRouteRef as w, EntityPicker as x, EntityPickerSchema as y, EntityNamePicker as z };
-//# sourceMappingURL=plugin-76d8b756.esm.js.map
+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",
+      component: "label",
+      htmlFor: "categories-picker"
+    },
+    "Categories"
+  ), /* @__PURE__ */ React.createElement(
+    Autocomplete$1,
+    {
+      id: "categories-picker",
+      multiple: true,
+      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 useStyles$1 = makeStyles(() => ({
+  button: {
+    color: ({ fontColor }) => fontColor
+  }
+}));
+const ContextMenu = (props) => {
+  const {
+    cancelEnabled,
+    logsVisible,
+    buttonBarVisible,
+    onStartOver,
+    onToggleLogs,
+    onToggleButtonBar,
+    taskId
+  } = props;
+  const { getPageTheme } = useTheme();
+  const pageTheme = getPageTheme({ themeId: "website" });
+  const classes = useStyles$1({ fontColor: pageTheme.fontColor });
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const [anchorEl, setAnchorEl] = useState();
+  const [{ status: cancelStatus }, { execute: cancel }] = useAsync$1(async () => {
+    if (taskId) {
+      await scaffolderApi.cancelTask(taskId);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "more",
+      "aria-controls": "long-menu",
+      "aria-haspopup": "true",
+      onClick: (event) => {
+        setAnchorEl(event.currentTarget);
+      },
+      "data-testid": "menu-button",
+      className: classes.button
+    },
+    /* @__PURE__ */ React.createElement(MoreVert, null)
+  ), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      onClose: () => setAnchorEl(void 0),
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    /* @__PURE__ */ React.createElement(MenuList, null, /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => onToggleLogs == null ? void 0 : onToggleLogs(!logsVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Toc, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: logsVisible ? "Hide Logs" : "Show Logs" })), /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => onToggleButtonBar == null ? void 0 : onToggleButtonBar(!buttonBarVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ControlPointIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: buttonBarVisible ? "Hide Button Bar" : "Show Button Bar"
+      }
+    )), /* @__PURE__ */ React.createElement(MenuItem, { onClick: onStartOver }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Retry, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Start Over" })), /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        onClick: cancel,
+        disabled: !cancelEnabled || cancelStatus !== "not-executed",
+        "data-testid": "cancel-task"
+      },
+      /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Cancel, { fontSize: "small" })),
+      /* @__PURE__ */ React.createElement(ListItemText, { primary: "Cancel" })
+    ))
+  ));
+};
+
+const useStyles = makeStyles((theme) => ({
+  contentWrapper: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  buttonBar: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "right"
+  },
+  cancelButton: {
+    marginRight: theme.spacing(1)
+  },
+  logsVisibilityButton: {
+    marginRight: theme.spacing(1)
+  }
+}));
+const OngoingTask = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { taskId } = useParams();
+  const templateRouteRef = useRouteRef(selectedTemplateRouteRef);
+  const navigate = useNavigate();
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const taskStream = useTaskEventStream(taskId);
+  const classes = useStyles();
+  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);
+  const [buttonBarVisible, setButtonBarVisibleState] = useState(true);
+  useEffect(() => {
+    if (taskStream.error) {
+      setLogVisibleState(true);
+    }
+  }, [taskStream.error]);
+  useEffect(() => {
+    if (taskStream.completed && !taskStream.error) {
+      setButtonBarVisibleState(false);
+    }
+  }, [taskStream.error, taskStream.completed]);
+  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 [{ status: cancelStatus }, { execute: triggerCancel }] = useAsync$1(
+    async () => {
+      if (taskId) {
+        await scaffolderApi.cancelTask(taskId);
+      }
+    }
+  );
+  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;
+  const cancelEnabled = !(taskStream.cancelled || taskStream.completed);
+  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,
+      {
+        cancelEnabled,
+        logsVisible,
+        buttonBarVisible,
+        onStartOver: startOver,
+        onToggleLogs: setLogVisibleState,
+        onToggleButtonBar: setButtonBarVisibleState,
+        taskId
+      }
+    )
+  ), /* @__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(
+    TaskSteps,
+    {
+      steps,
+      activeStep,
+      isComplete: taskStream.completed,
+      isError: Boolean(taskStream.error)
+    }
+  )), /* @__PURE__ */ React.createElement(Outputs, { output: taskStream.output }), buttonBarVisible ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(Box, { padding: 2 }, /* @__PURE__ */ React.createElement("div", { className: classes.buttonBar }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: classes.cancelButton,
+      disabled: !cancelEnabled || cancelStatus !== "not-executed",
+      onClick: triggerCancel,
+      "data-testid": "cancel-button"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: classes.logsVisibilityButton,
+      color: "primary",
+      variant: "outlined",
+      onClick: () => setLogVisibleState(!logsVisible)
+    },
+    logsVisible ? "Hide Logs" : "Show Logs"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      disabled: cancelEnabled,
+      onClick: startOver
+    },
+    "Start Over"
+  ))))) : null, 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));
+};
+
+export { EntityNamePicker as A, entityNamePickerValidation as B, EntityNamePickerSchema as C, EntityTagsPicker as D, EntityPickerFieldExtension as E, EntityTagsPickerSchema as F, RepoUrlPicker as G, RepoUrlPickerSchema as H, OwnerPicker as I, OwnerPickerSchema as J, OwnedEntityPicker as K, LegacyScaffolderPage as L, MyGroupsPickerFieldExtension as M, OwnedEntityPickerSchema as N, OwnerPickerFieldExtension as O, MyGroupsPicker as P, RepoUrlPickerFieldExtension as R, ScaffolderClient as S, TemplateTypePicker as T, EntityNamePickerFieldExtension as a, EntityTagsPickerFieldExtension as b, OwnedEntityPickerFieldExtension as c, ScaffolderPage as d, OngoingTask as e, EntityPickerFieldSchema as f, OwnerPickerFieldSchema as g, RepoUrlPickerFieldSchema as h, repoPickerValidation as i, OwnedEntityPickerFieldSchema as j, EntityTagsPickerFieldSchema as k, MyGroupsPickerSchema as l, makeFieldSchemaFromZod as m, MyGroupsPickerFieldSchema as n, selectedTemplateRouteRef as o, editRouteRef as p, actionsRouteRef as q, rootRouteRef as r, scaffolderPlugin as s, scaffolderListTaskRouteRef as t, registerComponentRouteRef as u, viewTechDocRouteRef as v, scaffolderTaskRouteRef as w, legacySelectedTemplateRouteRef as x, EntityPicker as y, EntityPickerSchema as z };
+//# sourceMappingURL=OngoingTask-8acb140b.esm.js.map