@backstage/plugin-scaffolder 1.14.1-next.1 → 1.14.1

package/dist/esm/{TemplateFormPreviewer-475decbc.esm.js → index-05d3e519.esm.js}

@@ -1,10 +1,20 @@
-import React, { useState, useMemo, useEffect, useCallback, Component } from 'react';
-import { Page, Header, Content, ErrorPanel } from '@backstage/core-components';
-import { useParams, useNavigate } from 'react-router-dom';
-import { makeStyles, useTheme, IconButton, Popover, MenuList, MenuItem, ListItemIcon, ListItemText, Box, Paper, Button, FormControl, InputLabel, Select, Card, CardHeader, CardContent, LinearProgress } from '@material-ui/core';
-import { scaffolderApiRef, useTaskEventStream } from '@backstage/plugin-scaffolder-react';
-import { n as selectedTemplateRouteRef } from './TaskPage-b9589b1b.esm.js';
-import { useApi, useRouteRef, useApiHolder, alertApiRef } from '@backstage/core-plugin-api';
+import React, { useCallback, useState, useMemo, useEffect, Component } from 'react';
+import { Link, useNavigate, Navigate, useParams, useOutlet, Routes, Route } from 'react-router-dom';
+import { useRouteRef, useApp, useApi, useRouteRefParams, AnalyticsContext, useApiHolder, alertApiRef } from '@backstage/core-plugin-api';
+import { DocsIcon, Page, Header, Content, ContentHeader, SupportButton, ErrorPanel, ErrorPage } from '@backstage/core-components';
+import { EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+import { ScaffolderPageContextMenu, TemplateCategoryPicker, TemplateGroups, Workflow, DefaultTemplateOutputs, TaskSteps, TaskLogStream, Stepper, Form } from '@backstage/plugin-scaffolder-react/alpha';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
+import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import { usePermission } from '@backstage/plugin-permission-react';
+import { u as registerComponentRouteRef, p as editRouteRef, q as actionsRouteRef, t as scaffolderListTaskRouteRef, v as viewTechDocRouteRef, n as selectedTemplateRouteRef, r as rootRouteRef, o as scaffolderTaskRouteRef } from './plugin-e86ee6a1.esm.js';
+import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
+import { useTemplateSecrets, scaffolderApiRef, useTaskEventStream, useCustomFieldExtensions, useCustomLayouts, SecretsContextProvider } from '@backstage/plugin-scaffolder-react';
+import { u as useDryRun, a as useDirectoryEditor, D as DirectoryEditorProvider, b as DryRunProvider, T as TemplateEditorBrowser, c as TemplateEditorTextArea, d as DryRunResults, e as TemplateEditorIntro, W as WebFileSystemAccess, f as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS, A as ActionsPage, L as ListTasksPage } from './ListTasksPage-44381650.esm.js';
+import { makeStyles, useTheme, IconButton as IconButton$1, Popover, MenuList, MenuItem, ListItemIcon, ListItemText, Box, Paper, Button as Button$1, FormControl, InputLabel, Select, Card, CardHeader, CardContent, LinearProgress } from '@material-ui/core';
 import qs from 'qs';
 import { useAsync } from '@react-hookz/web';
 import Cancel from '@material-ui/icons/Cancel';
@@ -12,18 +22,226 @@ 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, Stepper, Form } from '@backstage/plugin-scaffolder-react/alpha';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
 import CloseIcon from '@material-ui/icons/Close';
 import CodeMirror from '@uiw/react-codemirror';
 import yaml from 'yaml';
-import validator from '@rjsf/validator-ajv8';
-import { u as useDryRun, a as useDirectoryEditor, D as DirectoryEditorProvider, b as DryRunProvider, T as TemplateEditorBrowser, c as TemplateEditorTextArea, d as DryRunResults } from './TemplateEditorIntro-580933c6.esm.js';
-import { catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import useAsync$1 from 'react-use/lib/useAsync';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import useDebounce from 'react-use/lib/useDebounce';
+import validator from '@rjsf/validator-ajv8';
+import useAsync$1 from 'react-use/lib/useAsync';
+import '@backstage/integration-react';
+import '@backstage/errors';
+import 'zen-observable';
+import 'event-source-polyfill';
+import '@backstage/catalog-client';
+import '@material-ui/core/FormControl';
+import '@material-ui/lab/Autocomplete';
+import 'zod';
+import 'zod-to-json-schema';
+import '@material-ui/core/FormHelperText';
+import '@material-ui/core/Input';
+import '@material-ui/core/InputLabel';
+import 'react-use/lib/useEffectOnce';
+import '@material-ui/lab';
+import 'classnames';
+import '@material-ui/icons/ExpandMore';
+import '@material-ui/icons/ExpandLess';
+import '@material-ui/core/Chip';
+import '@material-ui/core/Card';
+import '@material-ui/core/CardActionArea';
+import '@material-ui/core/CardContent';
+import '@material-ui/core/Tooltip';
+import '@material-ui/core/Typography';
+import '@material-ui/icons/InfoOutlined';
+import '@material-ui/core/Accordion';
+import '@material-ui/core/AccordionDetails';
+import '@material-ui/core/AccordionSummary';
+import '@material-ui/core/Divider';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/core/ListItemIcon';
+import '@material-ui/core/ListItemSecondaryAction';
+import '@material-ui/core/ListItemText';
+import '@material-ui/icons/Check';
+import '@material-ui/icons/Delete';
+import '@material-ui/core/Box';
+import '@material-ui/core/Tab';
+import '@material-ui/core/Tabs';
+import './TaskPage-e70ca2f8.esm.js';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Step';
+import '@material-ui/core/StepLabel';
+import '@material-ui/core/Stepper';
+import '@material-ui/icons/FiberManualRecord';
+import 'luxon';
+import 'react-use/lib/useInterval';
+import '@material-ui/icons/Language';
+import '@material-ui/icons/Refresh';
+import '@material-ui/icons/Save';
+import '@material-ui/lab/TreeView';
+import '@material-ui/icons/ChevronRight';
+import '@material-ui/lab/TreeItem';
+import '@codemirror/view';
+import '@material-ui/icons/Settings';
+import '@material-ui/icons/FontDownload';
+import 'humanize-duration';
+
+const RegisterExistingButton = (props) => {
+  const { title, to } = props;
+  const { allowed } = usePermission({
+    permission: catalogEntityCreatePermission
+  });
+  const isXSScreen = useMediaQuery(
+    (theme) => theme.breakpoints.down("xs")
+  );
+  if (!to || !allowed) {
+    return null;
+  }
+  return isXSScreen ? /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      component: Link,
+      color: "primary",
+      title,
+      size: "small",
+      to
+    },
+    /* @__PURE__ */ React.createElement(AddCircleOutline, null)
+  ) : /* @__PURE__ */ React.createElement(Button, { component: Link, variant: "contained", color: "primary", to }, title);
+};
+
+const defaultGroup = {
+  title: "Templates",
+  filter: () => true
+};
+const createGroupsWithOther = (groups) => [
+  ...groups,
+  {
+    title: "Other Templates",
+    filter: (e) => ![...groups].some(({ filter }) => filter(e))
+  }
+];
+const TemplateListPage = (props) => {
+  var _a, _b, _c;
+  const registerComponentLink = useRouteRef(registerComponentRouteRef);
+  const {
+    TemplateCardComponent,
+    groups: givenGroups = [],
+    templateFilter
+  } = props;
+  const navigate = useNavigate();
+  const editorLink = useRouteRef(editRouteRef);
+  const actionsLink = useRouteRef(actionsRouteRef);
+  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
+  const app = useApp();
+  const groups = givenGroups.length ? createGroupsWithOther(givenGroups) : [defaultGroup];
+  const scaffolderPageContextMenuProps = {
+    onEditorClicked: ((_a = props == null ? void 0 : props.contextMenu) == null ? void 0 : _a.editor) !== false ? () => navigate(editorLink()) : void 0,
+    onActionsClicked: ((_b = props == null ? void 0 : props.contextMenu) == null ? void 0 : _b.actions) !== false ? () => navigate(actionsLink()) : void 0,
+    onTasksClicked: ((_c = props == null ? void 0 : props.contextMenu) == null ? void 0 : _c.tasks) !== false ? () => navigate(tasksLink()) : void 0
+  };
+  const additionalLinksForEntity = useCallback(
+    (template) => {
+      var _a2, _b2;
+      const { kind, namespace, name } = parseEntityRef(
+        stringifyEntityRef(template)
+      );
+      return ((_a2 = template.metadata.annotations) == null ? void 0 : _a2["backstage.io/techdocs-ref"]) && viewTechDocsLink ? [
+        {
+          icon: (_b2 = app.getSystemIcon("docs")) != null ? _b2 : DocsIcon,
+          text: "View TechDocs",
+          url: viewTechDocsLink({ kind, namespace, name })
+        }
+      ] : [];
+    },
+    [app, viewTechDocsLink]
+  );
+  const onTemplateSelected = useCallback(
+    (template) => {
+      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));
+      navigate(templateRoute({ namespace, templateName: name }));
+    },
+    [navigate, templateRoute]
+  );
+  return /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a new component",
+      title: "Create a new component",
+      subtitle: "Create new software components using standard templates in your organization"
+    },
+    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Available Templates" }, /* @__PURE__ */ React.createElement(
+    RegisterExistingButton,
+    {
+      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(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, { initialFilter: "template", hidden: true }), /* @__PURE__ */ React.createElement(
+    UserListPicker,
+    {
+      initialFilter: "all",
+      availableFilters: ["all", "starred"]
+    }
+  ), /* @__PURE__ */ React.createElement(TemplateCategoryPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(
+    TemplateGroups,
+    {
+      groups,
+      templateFilter,
+      TemplateCardComponent,
+      onTemplateSelected,
+      additionalLinksForEntity
+    }
+  ))))));
+};
+
+const TemplateWizardPage = (props) => {
+  const rootRef = useRouteRef(rootRouteRef);
+  const taskRoute = useRouteRef(scaffolderTaskRouteRef);
+  const { secrets } = useTemplateSecrets();
+  const scaffolderApi = useApi(scaffolderApiRef);
+  const navigate = useNavigate();
+  const { templateName, namespace } = useRouteRefParams(
+    selectedTemplateRouteRef
+  );
+  const templateRef = stringifyEntityRef({
+    kind: "Template",
+    namespace,
+    name: templateName
+  });
+  const onCreate = async (values) => {
+    const { taskId } = await scaffolderApi.scaffold({
+      templateRef,
+      values,
+      secrets
+    });
+    navigate(taskRoute({ taskId }));
+  };
+  const onError = () => /* @__PURE__ */ React.createElement(Navigate, { to: rootRef() });
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      pageTitleOverride: "Create a new component",
+      title: "Create a new component",
+      subtitle: "Create new software components using standard templates in your organization"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Workflow,
+    {
+      namespace,
+      templateName,
+      onCreate,
+      onError,
+      extensions: props.customFieldExtensions,
+      FormProps: props.FormProps,
+      layouts: props.layouts
+    }
+  )));
+};
 
 const useStyles$5 = makeStyles(() => ({
   button: {
@@ -51,7 +269,7 @@ const ContextMenu = (props) => {
     }
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    IconButton,
+    IconButton$1,
     {
       "aria-label": "more",
       "aria-controls": "long-menu",
@@ -209,7 +427,7 @@ const OngoingTask = (props) => {
       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,
+    Button$1,
     {
       className: classes.cancelButton,
       disabled: !cancelEnabled || cancelStatus !== "not-executed",
@@ -218,7 +436,7 @@ const OngoingTask = (props) => {
     },
     "Cancel"
   ), /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       variant: "contained",
       color: "primary",
@@ -229,6 +447,12 @@ const OngoingTask = (props) => {
   ))))) : 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));
 };
 
+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;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 const useStyles$3 = makeStyles$1({
   containerWrapper: {
     position: "relative",
@@ -247,9 +471,9 @@ const useStyles$3 = makeStyles$1({
 class ErrorBoundary extends Component {
   constructor() {
     super(...arguments);
-    this.state = {
+    __publicField(this, "state", {
       shouldRender: true
-    };
+    });
   }
   componentDidUpdate(prevProps) {
     if (prevProps.invalidator !== this.props.invalidator) {
@@ -458,7 +682,7 @@ const CustomFieldExplorer = ({
       onChange: (e) => handleSelectionChange(e.target.value)
     },
     fieldOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option }, option.name))
-  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Field Options" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose, "aria-label": "Close" }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { title: "Field Options" }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
     Form,
     {
       showErrorList: false,
@@ -471,7 +695,7 @@ const CustomFieldExplorer = ({
       schema: ((_a = selectedField.schema) == null ? void 0 : _a.uiOptions) || {}
     },
     /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         variant: "contained",
         color: "primary",
@@ -664,7 +888,7 @@ const TemplateFormPreviewer = ({
       onChange: (e) => handleSelectChange(e.target.value)
     },
     templateOptions.map((option, idx) => /* @__PURE__ */ React.createElement(MenuItem, { key: idx, value: option.value }, option.label))
-  )), /* @__PURE__ */ React.createElement(IconButton, { size: "medium", onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(IconButton$1, { size: "medium", onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
     TemplateEditorTextArea,
     {
       content: templateYaml,
@@ -683,5 +907,148 @@ const TemplateFormPreviewer = ({
   ))));
 };
 
-export { CustomFieldExplorer as C, OngoingTask as O, TemplateEditor as T, TemplateFormPreviewer as a };
-//# sourceMappingURL=TemplateFormPreviewer-475decbc.esm.js.map
+function TemplateEditorPage(props) {
+  const [selection, setSelection] = useState();
+  let content = null;
+  if ((selection == null ? void 0 : selection.type) === "local") {
+    content = /* @__PURE__ */ React.createElement(
+      TemplateEditor,
+      {
+        directory: selection.directory,
+        fieldExtensions: props.customFieldExtensions,
+        onClose: () => setSelection(void 0),
+        layouts: props.layouts
+      }
+    );
+  } else if ((selection == null ? void 0 : selection.type) === "form") {
+    content = /* @__PURE__ */ React.createElement(
+      TemplateFormPreviewer,
+      {
+        defaultPreviewTemplate: props.defaultPreviewTemplate,
+        customFieldExtensions: props.customFieldExtensions,
+        onClose: () => setSelection(void 0),
+        layouts: props.layouts
+      }
+    );
+  } else if ((selection == null ? void 0 : selection.type) === "field-explorer") {
+    content = /* @__PURE__ */ React.createElement(
+      CustomFieldExplorer,
+      {
+        customFieldExtensions: props.customFieldExtensions,
+        onClose: () => setSelection(void 0)
+      }
+    );
+  } else {
+    content = /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
+      TemplateEditorIntro,
+      {
+        onSelect: (option) => {
+          if (option === "local") {
+            WebFileSystemAccess.requestDirectoryAccess().then((directory) => setSelection({ type: "local", directory })).catch(() => {
+            });
+          } else if (option === "form") {
+            setSelection({ type: "form" });
+          } else if (option === "field-explorer") {
+            setSelection({ type: "field-explorer" });
+          }
+        }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: "Template Editor",
+      subtitle: "Edit, preview, and try out templates and template forms"
+    }
+  ), content);
+}
+
+const Router = (props) => {
+  const {
+    components: {
+      TemplateCardComponent,
+      TemplateOutputsComponent,
+      TaskPageComponent = OngoingTask,
+      TemplateListPageComponent = TemplateListPage,
+      TemplateWizardPageComponent = TemplateWizardPage
+    } = {}
+  } = props;
+  const outlet = useOutlet() || props.children;
+  const customFieldExtensions = useCustomFieldExtensions(outlet);
+  const fieldExtensions = [
+    ...customFieldExtensions,
+    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
+      ({ name }) => !customFieldExtensions.some(
+        (customFieldExtension) => customFieldExtension.name === name
+      )
+    )
+  ];
+  const customLayouts = useCustomLayouts(outlet);
+  return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: "/",
+      element: /* @__PURE__ */ React.createElement(
+        TemplateListPageComponent,
+        {
+          TemplateCardComponent,
+          contextMenu: props.contextMenu,
+          groups: props.groups,
+          templateFilter: props.templateFilter
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: selectedTemplateRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplateWizardPageComponent,
+        {
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts,
+          FormProps: props.FormProps
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: scaffolderTaskRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(
+        TaskPageComponent,
+        {
+          TemplateOutputsComponent
+        }
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: editRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(
+        TemplateEditorPage,
+        {
+          customFieldExtensions: fieldExtensions,
+          layouts: customLayouts
+        }
+      ))
+    }
+  ), /* @__PURE__ */ React.createElement(Route, { path: actionsRouteRef.path, element: /* @__PURE__ */ React.createElement(ActionsPage, null) }), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: scaffolderListTaskRouteRef.path,
+      element: /* @__PURE__ */ React.createElement(ListTasksPage, null)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Route,
+    {
+      path: "*",
+      element: /* @__PURE__ */ React.createElement(ErrorPage, { status: "404", statusMessage: "Page not found" })
+    }
+  ));
+};
+
+export { Router };
+//# sourceMappingURL=index-05d3e519.esm.js.map