@backstage/plugin-scaffolder 1.10.0-next.0 → 1.10.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @backstage/plugin-scaffolder
 
+## 1.10.0-next.2
+
+### Minor Changes
+
+- b4955ed7b9: - **Deprecation** - Deprecated the following exports, please import them directly from `@backstage/plugin-scaffolder-react` instead
+
+  ```
+  createScaffolderFieldExtension
+  ScaffolderFieldExtensions
+  useTemplateSecrets
+  scaffolderApiRef
+  ScaffolderApi
+  ScaffolderUseTemplateSecrets
+  TemplateParameterSchema
+  CustomFieldExtensionSchema
+  CustomFieldValidator
+  FieldExtensionOptions
+  FieldExtensionComponentProps
+  FieldExtensionComponent
+  ListActionsResponse
+  LogEvent
+  ScaffolderDryRunOptions
+  ScaffolderDryRunResponse
+  ScaffolderGetIntegrationsListOptions
+  ScaffolderGetIntegrationsListResponse
+  ScaffolderOutputlink
+  ScaffolderScaffoldOptions
+  ScaffolderScaffoldResponse
+  ScaffolderStreamLogsOptions
+  ScaffolderTask
+  ScaffolderTaskOutput
+  ScaffolderTaskStatus
+  ```
+
+  - **Deprecation** - Deprecated the `rootRouteRef` export, this should now be used from `scaffolderPlugin.routes.root`
+
+  - The following `/alpha` types have removed from this package and moved to the `@backstage/plugin-scaffolder-react/alpha` package
+
+    ```
+    createNextScaffolderFieldExtension
+    FormProps
+    NextCustomFieldValidator
+    NextFieldExtensionComponentProps
+    NextFieldExtensionOptions
+    ```
+
+### Patch Changes
+
+- 2fadff2a25: Render the scaffolder action description using the `MarkdownContent` component. This will allow the page to show richer content to describe scaffolder actions.
+- 659c92a1dc: Updated dependency `use-immer` to `^0.8.0`.
+- 489935d625: Show action example yaml on the scaffolder actions documentation page.
+- b8269de9f1: Explicitly declaring children as optional props to facilitate react 18 changes
+- Updated dependencies
+  - @backstage/plugin-scaffolder-react@1.0.0-next.0
+  - @backstage/core-plugin-api@1.3.0-next.1
+  - @backstage/catalog-client@1.3.0-next.2
+  - @backstage/plugin-catalog-react@1.2.4-next.2
+  - @backstage/plugin-permission-react@0.4.9-next.1
+  - @backstage/catalog-model@1.1.5-next.1
+  - @backstage/config@1.0.6-next.0
+  - @backstage/core-components@0.12.3-next.2
+  - @backstage/errors@1.1.4
+  - @backstage/integration@1.4.2-next.0
+  - @backstage/integration-react@1.1.9-next.2
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2
+  - @backstage/plugin-catalog-common@1.0.10-next.1
+  - @backstage/plugin-scaffolder-common@1.2.4-next.1
+
+## 1.10.0-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/config@1.0.6-next.0
+  - @backstage/catalog-client@1.3.0-next.1
+  - @backstage/catalog-model@1.1.5-next.1
+  - @backstage/core-components@0.12.3-next.1
+  - @backstage/core-plugin-api@1.2.1-next.0
+  - @backstage/errors@1.1.4
+  - @backstage/integration@1.4.2-next.0
+  - @backstage/integration-react@1.1.9-next.1
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2
+  - @backstage/plugin-catalog-common@1.0.10-next.1
+  - @backstage/plugin-catalog-react@1.2.4-next.1
+  - @backstage/plugin-permission-react@0.4.9-next.0
+  - @backstage/plugin-scaffolder-common@1.2.4-next.1
+
 ## 1.10.0-next.0
 
 ### Minor Changes

package/alpha/package.json

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

package/dist/esm/{Router-416b874d.esm.js → Router-c499b201.esm.js}

@@ -1,14 +1,14 @@
-import React, { useState, useContext, useCallback, createContext, useEffect, useRef, useMemo, Component, Children, Fragment } from 'react';
+import React, { useState, useCallback, Fragment, createContext, useEffect, useContext, useRef, useMemo, Component, Children } from 'react';
 import { useNavigate, Navigate, useOutlet, Routes, Route } from 'react-router-dom';
-import { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, 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 { ItemCardHeader, MarkdownContent, Button, Link, ContentHeader, Progress, WarningPanel, Content, ItemCardGrid, Page, Header, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, ErrorPage, CodeSnippet, ErrorPanel, LogViewer, StatusError, StatusOK, StatusPending, Lifecycle, EmptyState, Table as Table$1 } from '@backstage/core-components';
 import { useApp, useRouteRef, useApi, useRouteRefParams, useAnalytics, errorApiRef, featureFlagsApiRef, useApiHolder, AnalyticsContext, 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, 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-7e25101d.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, Paper, Button as Button$1, Stepper, Step, StepLabel, StepContent, LinearProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, FormControl, InputLabel, Select, MenuItem as MenuItem$1, CardHeader, Divider as Divider$1, List as List$2, ListItemIcon as ListItemIcon$1, ListItemText as ListItemText$1 } from '@material-ui/core';
+import { makeStyles, useTheme, Card, CardMedia, CardContent, Box, Typography, Chip, CardActions, Tooltip, IconButton, Paper, Button as Button$1, Stepper, Step, StepLabel, StepContent, LinearProgress, Accordion, AccordionSummary, AccordionDetails, Grid, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, FormControl, InputLabel, Select, MenuItem as MenuItem$1, CardHeader, Divider as Divider$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 { s as selectedTemplateRouteRef, v as viewTechDocRouteRef, e as editRouteRef, a as actionsRouteRef, b as scaffolderListTaskRouteRef, r as registerComponentRouteRef, T as TemplateTypePicker, c as scaffolderTaskRouteRef, d as rootRouteRef, f as TaskStatusStepper, g as TaskPageLinks, L as LAYOUTS_WRAPPER_KEY, h as LAYOUTS_KEY, l as legacySelectedTemplateRouteRef, i as TaskPage } from './index-618869a2.esm.js';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { usePermission } from '@backstage/plugin-permission-react';
 import IconButton$1 from '@material-ui/core/IconButton';
@@ -24,11 +24,12 @@ import List from '@material-ui/icons/List';
 import MoreVert from '@material-ui/icons/MoreVert';
 import qs from 'qs';
 import useAsync from 'react-use/lib/useAsync';
+import { extractSchemaFromStep, useTemplateSecrets, scaffolderApiRef, useCustomFieldExtensions, SecretsContextProvider } from '@backstage/plugin-scaffolder-react';
 import { withTheme } from '@rjsf/core';
 import { Theme } from '@rjsf/material-ui';
 import cloneDeep from 'lodash/cloneDeep';
-import { e as extractSchemaFromStep, D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './schema-bfff60e2.esm.js';
 import classNames from 'classnames';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
 import CloseIcon from '@material-ui/icons/Close';
@@ -42,9 +43,9 @@ import CardContent$1 from '@material-ui/core/CardContent';
 import Tooltip$1 from '@material-ui/core/Tooltip';
 import Typography$1 from '@material-ui/core/Typography';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
+import Accordion$1 from '@material-ui/core/Accordion';
+import AccordionDetails$1 from '@material-ui/core/AccordionDetails';
+import AccordionSummary$1 from '@material-ui/core/AccordionSummary';
 import Divider from '@material-ui/core/Divider';
 import ExpandMoreIcon$1 from '@material-ui/icons/ExpandLess';
 import List$1 from '@material-ui/core/List';
@@ -57,12 +58,12 @@ import Box$1 from '@material-ui/core/Box';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import TreeView from '@material-ui/lab/TreeView';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import SaveIcon from '@material-ui/icons/Save';
 import { showPanel } from '@codemirror/view';
+import { D as DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default-b0a9b946.esm.js';
 import SettingsIcon from '@material-ui/icons/Settings';
 import AllIcon from '@material-ui/icons/FontDownload';
 import { DateTime, Interval } from 'luxon';
@@ -73,14 +74,17 @@ import '@material-ui/core/FormControl';
 import '@material-ui/lab/Autocomplete';
 import 'zod';
 import 'zod-to-json-schema';
-import 'react-use/lib/useEffectOnce';
-import '@material-ui/lab';
 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 'lodash/capitalize';
 import '@material-ui/icons/CheckBox';
 import '@material-ui/icons/CheckBoxOutlineBlank';
+import '@material-ui/core/Button';
+import '@material-ui/core/useMediaQuery';
+import '@material-ui/icons/AddCircleOutline';
 import '@material-ui/core/Grid';
 import '@material-ui/core/Step';
 import '@material-ui/core/StepLabel';
@@ -759,7 +763,7 @@ const TemplatePage = ({
   headerOptions
 }) => {
   const apiHolder = useApiHolder();
-  const secretsContext = useContext(SecretsContext);
+  const secretsContext = useTemplateSecrets();
   const errorApi = useApi(errorApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
   const { templateName, namespace } = useRouteRefParams(
@@ -880,6 +884,19 @@ const useStyles$d = makeStyles((theme) => ({
     }
   }
 }));
+const ExamplesTable = (props) => {
+  return /* @__PURE__ */ React.createElement(Grid, { container: true }, props.examples.map((example, index) => {
+    return /* @__PURE__ */ React.createElement(Fragment, { key: `example-${index}` }, /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 3 }, /* @__PURE__ */ React.createElement(Box, { padding: 4 }, /* @__PURE__ */ React.createElement(Typography, null, example.description))), /* @__PURE__ */ React.createElement(Grid, { item: true, lg: 9 }, /* @__PURE__ */ React.createElement(Box, { padding: 1 }, /* @__PURE__ */ React.createElement(
+      CodeSnippet,
+      {
+        text: example.example,
+        showLineNumbers: true,
+        showCopyCodeButton: true,
+        language: "yaml"
+      }
+    ))));
+  }));
+};
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
   const classes = useStyles$d();
@@ -910,7 +927,7 @@ const ActionsPage = () => {
       const codeClassname = classNames(classes.code, {
         [classes.codeRequired]: (_a = input.required) == null ? void 0 : _a.includes(key)
       });
-      return /* @__PURE__ */ React.createElement(TableRow, { key }, /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("div", { className: codeClassname }, key)), /* @__PURE__ */ React.createElement(TableCell, null, props.title), /* @__PURE__ */ React.createElement(TableCell, null, props.description), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(React.Fragment, null, [props.type].flat().map((type) => /* @__PURE__ */ React.createElement(Chip, { label: type })))));
+      return /* @__PURE__ */ React.createElement(TableRow, { key }, /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement("div", { className: codeClassname }, key)), /* @__PURE__ */ React.createElement(TableCell, null, props.title), /* @__PURE__ */ React.createElement(TableCell, null, props.description), /* @__PURE__ */ React.createElement(TableCell, null, /* @__PURE__ */ React.createElement(React.Fragment, null, [props.type].flat().map((type) => /* @__PURE__ */ React.createElement(Chip, { label: type, key: type })))));
     });
   };
   const renderTable = (input) => {
@@ -931,7 +948,7 @@ const ActionsPage = () => {
       return void 0;
     }
     const oneOf = renderTables("oneOf", (_b = (_a = action.schema) == null ? void 0 : _a.input) == null ? void 0 : _b.oneOf);
-    return /* @__PURE__ */ React.createElement(Box, { pb: 4, key: action.id }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", className: classes.code }, action.id), /* @__PURE__ */ React.createElement(Typography, null, action.description), ((_c = action.schema) == null ? void 0 : _c.input) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Input"), renderTable(action.schema.input), oneOf), ((_d = action.schema) == null ? void 0 : _d.output) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Output"), renderTable(action.schema.output)));
+    return /* @__PURE__ */ React.createElement(Box, { pb: 4, key: action.id }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", className: classes.code }, action.id), action.description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: action.description }), ((_c = action.schema) == null ? void 0 : _c.input) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Input"), renderTable(action.schema.input), oneOf), ((_d = action.schema) == null ? void 0 : _d.output) && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Output"), renderTable(action.schema.output)), action.examples && /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Examples")), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(ExamplesTable, { examples: action.examples })))));
   });
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
@@ -1965,7 +1982,7 @@ function DryRunResults() {
     }
   }, [prevResultsLength, resultsLength]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Accordion,
+    Accordion$1,
     {
       variant: "outlined",
       expanded,
@@ -1974,7 +1991,7 @@ function DryRunResults() {
       onTransitionEnd: () => resultsLength === 0 && setHidden(true)
     },
     /* @__PURE__ */ React.createElement(
-      AccordionSummary,
+      AccordionSummary$1,
       {
         className: classes.header,
         expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon$1, null)
@@ -1982,7 +1999,7 @@ function DryRunResults() {
       /* @__PURE__ */ React.createElement(Typography$1, null, "Dry-run results")
     ),
     /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }),
-    /* @__PURE__ */ React.createElement(AccordionDetails, { className: classes.content }, /* @__PURE__ */ React.createElement(DryRunResultsList, null), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))
+    /* @__PURE__ */ React.createElement(AccordionDetails$1, { className: classes.content }, /* @__PURE__ */ React.createElement(DryRunResultsList, null), /* @__PURE__ */ React.createElement(Divider, { orientation: "horizontal" }), /* @__PURE__ */ React.createElement(DryRunResultsView, null))
   ));
 }
 
@@ -2152,6 +2169,7 @@ function TemplateEditorDirectoryEditorTextArea(props) {
 TemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;
 
 const useStyles$2 = makeStyles({
+  // Reset and fix sizing to make sure scrolling behaves correctly
   root: {
     gridArea: "pageContent",
     display: "grid",
@@ -2607,14 +2625,7 @@ const Router = (props) => {
   const { ReviewStepComponent, TemplateCardComponent, TaskPageComponent } = components;
   const outlet = useOutlet();
   const TaskPageElement = TaskPageComponent != null ? TaskPageComponent : TaskPage;
-  const customFieldExtensions = useElementFilter(
-    outlet,
-    (elements) => elements.selectByComponentData({
-      key: FIELD_EXTENSION_WRAPPER_KEY
-    }).findComponentData({
-      key: FIELD_EXTENSION_KEY
-    })
-  );
+  const customFieldExtensions = useCustomFieldExtensions(outlet);
   const fieldExtensions = [
     ...customFieldExtensions,
     ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(
@@ -2635,7 +2646,8 @@ const Router = (props) => {
     const { templateName } = useRouteRefParams(legacySelectedTemplateRouteRef);
     const newLink = useRouteRef(selectedTemplateRouteRef);
     useEffect(
-      () => console.warn(
+      () => // eslint-disable-next-line no-console
+      console.warn(
         "The route /template/:templateName is deprecated, please use the new /template/:namespace/:templateName route instead"
       ),
       []
@@ -2699,4 +2711,4 @@ const Router = (props) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-416b874d.esm.js.map
+//# sourceMappingURL=Router-c499b201.esm.js.map