@backstage/plugin-scaffolder 1.6.0-next.3 → 1.7.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @backstage/plugin-scaffolder
 
+## 1.7.0-next.0
+
+### Minor Changes
+
+- f13d5f3f06: Add support for link to TechDocs and other links defined in template entity specification metadata on TemplateCard
+- 05f22193c5: EntityPickers now support flags to control when to include default namespace
+  in result
+
+### Patch Changes
+
+- 8960d83013: Add support for `allowedOrganizations` and `allowedOwners` to the `AzureRepoPicker`.
+- b681275e69: Ignore .git directories in Template Editor, increase upload limit for dry-runs to 10MB.
+- Updated dependencies
+  - @backstage/catalog-model@1.1.2-next.0
+  - @backstage/core-components@0.11.2-next.0
+  - @backstage/catalog-client@1.1.1-next.0
+  - @backstage/plugin-catalog-react@1.1.5-next.0
+  - @backstage/plugin-scaffolder-common@1.2.1-next.0
+  - @backstage/integration-react@1.1.5-next.0
+  - @backstage/config@1.0.3-next.0
+  - @backstage/core-plugin-api@1.0.7-next.0
+  - @backstage/errors@1.1.2-next.0
+  - @backstage/integration@1.3.2-next.0
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.0
+  - @backstage/plugin-catalog-common@1.0.7-next.0
+  - @backstage/plugin-permission-react@0.4.6-next.0
+
+## 1.6.0
+
+### Minor Changes
+
+- 3424a8075d: Added support for `async` validation for the `next` version of the plugin
+- ad036784e9: Ability to modify the layout of the step form
+- 192d856495: Implementing review step for the scaffolder under `create/next`
+
+### Patch Changes
+
+- 817f3196f6: Updated React Router dependencies to be peer dependencies.
+- eadf56bbbf: Bump `git-url-parse` version to `^13.0.0`
+- 9ffb75616d: Fix bug with empty strings in `EntityPicker`
+- 3f739be9d9: Minor API signatures cleanup
+- 763fb81e82: Internal refactor to use more type safe code when dealing with route parameters.
+- a66d44b72b: Fixing bug when the workspace would not be automatically saved when using `allowedOwners`
+- 7d47def9c4: Removed dependency on `@types/jest`.
+- 6522e459aa: Support displaying and ordering by counts in `EntityTagPicker` field. Add the `showCounts` option to enable this. Also support configuring `helperText`.
+- f0510a20b5: Addition of a dismissible Error Banner in Scaffolder page
+- 667d917488: Updated dependency `msw` to `^0.47.0`.
+- 87ec2ba4d6: Updated dependency `msw` to `^0.46.0`.
+- 9097278df2: Updated dependency `json-schema-library` to `^7.0.0`.
+- bf5e9030eb: Updated dependency `msw` to `^0.45.0`.
+- de336de9cd: fix uiSchema generation when using complex dependencies
+- Updated dependencies
+  - @backstage/core-components@0.11.1
+  - @backstage/core-plugin-api@1.0.6
+  - @backstage/plugin-catalog-react@1.1.4
+  - @backstage/plugin-permission-react@0.4.5
+  - @backstage/integration@1.3.1
+  - @backstage/catalog-client@1.1.0
+  - @backstage/catalog-model@1.1.1
+  - @backstage/config@1.0.2
+  - @backstage/errors@1.1.1
+  - @backstage/integration-react@1.1.4
+  - @backstage/plugin-scaffolder-common@1.2.0
+  - @backstage/plugin-catalog-common@1.0.6
+
 ## 1.6.0-next.3
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder",
-  "version": "1.6.0-next.3",
+  "version": "1.7.0-next.0",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/esm/{Router-7a18bcf2.esm.js → Router-7e8b8be7.esm.js}

@@ -1,12 +1,13 @@
 import React, { useState, useContext, useCallback, createContext, useEffect, useRef, useMemo, Children, Component, Fragment } from 'react';
 import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router';
 import { ItemCardHeader, MarkdownContent, Button, ContentHeader, Progress, WarningPanel, Link as Link$1, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1 } from '@backstage/core-components';
-import { useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, useRouteRefParams, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
+import { useApp, useRouteRef, useApi, errorApiRef, featureFlagsApiRef, useApiHolder, useRouteRefParams, alertApiRef, useElementFilter } from '@backstage/core-plugin-api';
 import { getEntityRelations, getEntitySourceLocation, FavoriteEntity, EntityRefLinks, useEntityList, EntityListProvider, CatalogFilterLayout, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, catalogApiRef, humanizeEntityRef, EntityRefLink } from '@backstage/plugin-catalog-react';
-import { s as selectedTemplateRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, l as legacySelectedTemplateRouteRef, j as SecretsContextProvider, k as TaskPage } from './index-3b8e3839.esm.js';
-import { RELATION_OWNED_BY, parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
-import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, IconButton, Tooltip, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
+import { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, S as SecretsContext, c as scaffolderApiRef, d as scaffolderTaskRouteRef, f as rootRouteRef, g as TaskStatusStepper, h as TaskPageLinks, F as FIELD_EXTENSION_WRAPPER_KEY, i as FIELD_EXTENSION_KEY, L as LAYOUTS_WRAPPER_KEY, j as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, k as SecretsContextProvider, m as TaskPage } from './index-f96a52f0.esm.js';
+import { RELATION_OWNED_BY, parseEntityRef, stringifyEntityRef, DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Link, Stepper, Step, StepLabel, StepContent, Button as Button$1, Paper, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Divider as Divider$1, FormControl, InputLabel, Select, MenuItem as MenuItem$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
+import LanguageIcon from '@material-ui/icons/Language';
 import WarningIcon from '@material-ui/icons/Warning';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { usePermission } from '@backstage/plugin-permission-react';
@@ -65,7 +66,7 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import AllIcon from '@material-ui/icons/FontDownload';
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
-import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-77c6fe10.esm.js';
+import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-21c262f6.esm.js';
 import '@backstage/errors';
 import 'zen-observable';
 import '@material-ui/core/FormControl';
@@ -85,7 +86,6 @@ import '@material-ui/core/Stepper';
 import '@material-ui/icons/FiberManualRecord';
 import 'react-use/lib/useInterval';
 import 'use-immer';
-import '@material-ui/icons/Language';
 
 const useStyles$e = makeStyles((theme) => ({
   cardHeader: {
@@ -99,8 +99,7 @@ const useStyles$e = makeStyles((theme) => ({
     textOverflow: "ellipsis",
     display: "-webkit-box",
     "-webkit-line-clamp": 10,
-    "-webkit-box-orient": "vertical",
-    paddingBottom: "0.8em"
+    "-webkit-box-orient": "vertical"
   },
   label: {
     color: theme.palette.text.secondary,
@@ -111,6 +110,14 @@ const useStyles$e = makeStyles((theme) => ({
     lineHeight: 1,
     paddingBottom: "0.2rem"
   },
+  linksLabel: {
+    padding: "0 16px"
+  },
+  description: {
+    "& p": {
+      margin: "0px"
+    }
+  },
   leftButton: {
     marginRight: "auto"
   },
@@ -122,6 +129,7 @@ const useStyles$e = makeStyles((theme) => ({
     color: "#fff"
   }
 }));
+const MuiIcon = ({ icon: Icon }) => /* @__PURE__ */ React.createElement(Icon, null);
 const useDeprecationStyles = makeStyles((theme) => ({
   deprecationIcon: {
     position: "absolute",
@@ -134,14 +142,15 @@ const useDeprecationStyles = makeStyles((theme) => ({
   }
 }));
 const getTemplateCardProps = (template) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   return {
     key: template.metadata.uid,
     name: template.metadata.name,
     title: `${(_a = template.metadata.title || template.metadata.name) != null ? _a : ""}`,
     type: (_b = template.spec.type) != null ? _b : "",
     description: (_c = template.metadata.description) != null ? _c : "-",
-    tags: (_e = (_d = template.metadata) == null ? void 0 : _d.tags) != null ? _e : []
+    tags: (_e = (_d = template.metadata) == null ? void 0 : _d.tags) != null ? _e : [],
+    links: (_f = template.metadata.links) != null ? _f : []
   };
 };
 const DeprecationWarning = () => {
@@ -159,7 +168,8 @@ const DeprecationWarning = () => {
   }, /* @__PURE__ */ React.createElement(WarningIcon, null))));
 };
 const TemplateCard = ({ template, deprecated }) => {
-  var _a;
+  var _a, _b, _c;
+  const app = useApp();
   const backstageTheme = useTheme();
   const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const templateProps = getTemplateCardProps(template);
@@ -172,6 +182,17 @@ const TemplateCard = ({ template, deprecated }) => {
   const classes = useStyles$e({ backgroundImage: theme.backgroundImage });
   const { name, namespace } = parseEntityRef(stringifyEntityRef(template));
   const href = templateRoute({ templateName: name, namespace });
+  const viewTechDoc = useRouteRef(viewTechDocRouteRef);
+  const viewTechDocsAnnotation = (_a = template.metadata.annotations) == null ? void 0 : _a["backstage.io/techdocs-ref"];
+  const viewTechDocsLink = !!viewTechDocsAnnotation && !!viewTechDoc && viewTechDoc({
+    namespace: template.metadata.namespace || DEFAULT_NAMESPACE,
+    kind: template.kind,
+    name: template.metadata.name
+  });
+  const iconResolver = (key) => {
+    var _a2;
+    return key ? (_a2 = app.getSystemIcon(key)) != null ? _a2 : LanguageIcon : LanguageIcon;
+  };
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
   const sourceLocation = getEntitySourceLocation(template, scmIntegrationsApi);
   return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardMedia, {
@@ -184,13 +205,14 @@ const TemplateCard = ({ template, deprecated }) => {
     subtitle: templateProps.type,
     classes: { root: classes.title }
   })), /* @__PURE__ */ React.createElement(CardContent, {
-    style: { display: "grid" }
+    style: { display: "flex", flexDirection: "column", gap: "16px" }
   }, /* @__PURE__ */ React.createElement(Box, {
     className: classes.box
   }, /* @__PURE__ */ React.createElement(Typography, {
     variant: "body2",
     className: classes.label
   }, "Description"), /* @__PURE__ */ React.createElement(MarkdownContent, {
+    className: classes.description,
     content: templateProps.description
   })), /* @__PURE__ */ React.createElement(Box, {
     className: classes.box
@@ -201,18 +223,41 @@ const TemplateCard = ({ template, deprecated }) => {
     entityRefs: ownedByRelations,
     defaultKind: "Group"
   })), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, {
+    style: { marginBottom: "4px" },
     variant: "body2",
     className: classes.label
-  }, "Tags"), (_a = templateProps.tags) == null ? void 0 : _a.map((tag) => /* @__PURE__ */ React.createElement(Chip, {
+  }, "Tags"), (_b = templateProps.tags) == null ? void 0 : _b.map((tag) => /* @__PURE__ */ React.createElement(Chip, {
     size: "small",
     label: tag,
     key: tag
-  })))), /* @__PURE__ */ React.createElement(CardActions, null, sourceLocation && /* @__PURE__ */ React.createElement(IconButton, {
+  })))), /* @__PURE__ */ React.createElement(Typography, {
+    variant: "body2",
+    className: [classes.label, classes.linksLabel].join(" ")
+  }, "Links"), /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement("div", {
+    className: classes.leftButton
+  }, sourceLocation && /* @__PURE__ */ React.createElement(Tooltip, {
+    title: sourceLocation.integrationType || sourceLocation.locationTargetUrl
+  }, /* @__PURE__ */ React.createElement(IconButton, {
     className: classes.leftButton,
     href: sourceLocation.locationTargetUrl
   }, /* @__PURE__ */ React.createElement(ScmIntegrationIcon, {
     type: sourceLocation.integrationType
-  })), /* @__PURE__ */ React.createElement(Button, {
+  }))), viewTechDocsLink && /* @__PURE__ */ React.createElement(Tooltip, {
+    title: "View TechDocs"
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    className: classes.leftButton,
+    href: viewTechDocsLink
+  }, /* @__PURE__ */ React.createElement(MuiIcon, {
+    icon: iconResolver("docs")
+  }))), (_c = templateProps.links) == null ? void 0 : _c.map((link, i) => /* @__PURE__ */ React.createElement(Tooltip, {
+    key: `${link.url}_${i}`,
+    title: link.title || link.url
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    size: "medium",
+    href: link.url
+  }, /* @__PURE__ */ React.createElement(MuiIcon, {
+    icon: iconResolver(link.icon)
+  }))))), /* @__PURE__ */ React.createElement(Button, {
     color: "primary",
     to: href,
     "aria-label": `Choose ${templateProps.title}`
@@ -439,12 +484,22 @@ function extractUiSchema(schema, uiSchema) {
     }
   }
 }
-function transformSchemaToProps(inputSchema) {
+function transformSchemaToProps(inputSchema, layouts = []) {
+  var _a;
+  const customLayoutName = inputSchema["ui:ObjectFieldTemplate"];
   inputSchema.type = inputSchema.type || "object";
   const schema = JSON.parse(JSON.stringify(inputSchema));
   delete schema.title;
   const uiSchema = {};
   extractUiSchema(schema, uiSchema);
+  if (customLayoutName) {
+    const Layout = (_a = layouts.find(
+      (layout) => layout.name === customLayoutName
+    )) == null ? void 0 : _a.component;
+    if (Layout) {
+      uiSchema["ui:ObjectFieldTemplate"] = Layout;
+    }
+  }
   return { schema, uiSchema };
 }
 
@@ -512,7 +567,8 @@ const MultistepJsonForm = (props) => {
     onFinish,
     fields,
     widgets,
-    finishButtonLabel
+    finishButtonLabel,
+    layouts
   } = props;
   const [activeStep, setActiveStep] = useState(0);
   const [disableButtons, setDisableButtons] = useState(false);
@@ -597,7 +653,7 @@ const MultistepJsonForm = (props) => {
           handleNext();
       },
       ...formProps,
-      ...transformSchemaToProps(schema)
+      ...transformSchemaToProps(schema, layouts)
     }, /* @__PURE__ */ React.createElement(Button$1, {
       disabled: activeStep === 0,
       onClick: handleBack
@@ -686,7 +742,8 @@ const useTemplateParameterSchema = (templateRef) => {
   return { schema: value, loading, error };
 };
 const TemplatePage = ({
-  customFieldExtensions = []
+  customFieldExtensions = [],
+  layouts = []
 }) => {
   const apiHolder = useApiHolder();
   const secretsContext = useContext(SecretsContext);
@@ -771,6 +828,7 @@ const TemplatePage = ({
     onChange: handleChange,
     onReset: handleFormReset,
     onFinish: handleCreate,
+    layouts,
     steps: schema.steps.map((step) => {
       return {
         ...step,
@@ -923,6 +981,9 @@ class WebDirectoryAccess {
       if (handle.kind === "file") {
         yield new WebFileAccess([...basePath, handle.name].join("/"), handle);
       } else if (handle.kind === "directory") {
+        if (handle.name === ".git") {
+          continue;
+        }
         yield* this.listDirectoryContents(handle, [...basePath, handle.name]);
       }
     }
@@ -1763,7 +1824,8 @@ function TemplateEditorForm(props) {
     onUpdate,
     onDryRun,
     setErrorText,
-    fieldExtensions = []
+    fieldExtensions = [],
+    layouts = []
   } = props;
   const classes = useStyles$4();
   const apiHolder = useApiHolder();
@@ -1841,7 +1903,8 @@ function TemplateEditorForm(props) {
     onChange: (e) => onUpdate(e.formData),
     onReset: () => onUpdate({}),
     finishButtonLabel: onDryRun && "Try It",
-    onFinish: onDryRun && (() => onDryRun(data))
+    onFinish: onDryRun && (() => onDryRun(data)),
+    layouts
   }))));
 }
 function TemplateEditorFormDirectoryEditorDryRun(props) {
@@ -2022,7 +2085,8 @@ const TemplateEditor = (props) => {
     className: classes.preview
   }, /* @__PURE__ */ React.createElement(TemplateEditorForm.DirectoryEditorDryRun, {
     setErrorText,
-    fieldExtensions: props.fieldExtensions
+    fieldExtensions: props.fieldExtensions,
+    layouts: props.layouts
   })), /* @__PURE__ */ React.createElement("section", {
     className: classes.results
   }, /* @__PURE__ */ React.createElement(DryRunResults, null)))));
@@ -2094,7 +2158,8 @@ const useStyles$1 = makeStyles((theme) => ({
 const TemplateFormPreviewer = ({
   defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
   customFieldExtensions = [],
-  onClose
+  onClose,
+  layouts = []
 }) => {
   const classes = useStyles$1();
   const alertApi = useApi(alertApiRef);
@@ -2176,7 +2241,8 @@ const TemplateFormPreviewer = ({
     fieldExtensions: customFieldExtensions,
     data: formState,
     onUpdate: setFormState,
-    setErrorText
+    setErrorText,
+    layouts
   }))));
 };
 
@@ -2187,13 +2253,15 @@ function TemplateEditorPage(props) {
     content = /* @__PURE__ */ React.createElement(TemplateEditor, {
       directory: selection.directory,
       fieldExtensions: props.customFieldExtensions,
-      onClose: () => setSelection(void 0)
+      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)
+      onClose: () => setSelection(void 0),
+      layouts: props.layouts
     });
   } else {
     content = /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(TemplateEditorIntro, {
@@ -2461,6 +2529,14 @@ const Router = (props) => {
       )
     )
   ];
+  const customLayouts = useElementFilter(
+    outlet,
+    (elements) => elements.selectByComponentData({
+      key: LAYOUTS_WRAPPER_KEY
+    }).findComponentData({
+      key: LAYOUTS_KEY
+    })
+  );
   const RedirectingComponent = () => {
     const { templateName } = useRouteRefParams(legacySelectedTemplateRouteRef);
     const newLink = useRouteRef(selectedTemplateRouteRef);
@@ -2487,7 +2563,8 @@ const Router = (props) => {
   }), /* @__PURE__ */ React.createElement(Route, {
     path: selectedTemplateRouteRef.path,
     element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplatePage, {
-      customFieldExtensions: fieldExtensions
+      customFieldExtensions: fieldExtensions,
+      layouts: customLayouts
     }))
   }), /* @__PURE__ */ React.createElement(Route, {
     path: scaffolderListTaskRouteRef.path,
@@ -2502,7 +2579,8 @@ const Router = (props) => {
     path: editRouteRef.path,
     element: /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(TemplateEditorPage, {
       defaultPreviewTemplate,
-      customFieldExtensions: fieldExtensions
+      customFieldExtensions: fieldExtensions,
+      layouts: customLayouts
     }))
   }), /* @__PURE__ */ React.createElement(Route, {
     path: "preview",
@@ -2513,4 +2591,4 @@ const Router = (props) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-7a18bcf2.esm.js.map
+//# sourceMappingURL=Router-7e8b8be7.esm.js.map