@backstage/plugin-scaffolder-react 1.7.1 → 1.8.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.8.0-next.1
+
+### Minor Changes
+
+- b07ec70: Use more distinguishable icons for link (`Link`) and text output (`Description`).
+
+### Patch Changes
+
+- 3f60ad5: fix for: converting circular structure to JSON error
+- 31f0a0a: Added `ScaffolderPageContextMenu` to `ActionsPage`, `ListTaskPage`, and `TemplateEditorPage` so that you can more easily navigate between these pages
+- 82affc7: Fix issue where `ui:schema` was replaced with an empty object if `dependencies` is defined
+- Updated dependencies
+  - @backstage/core-components@0.14.0-next.0
+  - @backstage/catalog-model@1.4.4-next.0
+  - @backstage/catalog-client@1.6.0-next.1
+  - @backstage/core-plugin-api@1.8.3-next.0
+  - @backstage/plugin-catalog-react@1.9.4-next.1
+  - @backstage/theme@0.5.0
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+  - @backstage/plugin-scaffolder-common@1.5.0-next.1
+
+## 1.8.0-next.0
+
+### Minor Changes
+
+- c56f1a2: Remove the old legacy exports from `/alpha`
+- 11b9a08: Introduced the first version of recoverable tasks.
+
+### Patch Changes
+
+- 0b0c6b6: Allow defining default output text to be shown
+- 6a74ffd: Updated dependency `@rjsf/utils` to `5.16.1`.
+  Updated dependency `@rjsf/core` to `5.16.1`.
+  Updated dependency `@rjsf/material-ui` to `5.16.1`.
+  Updated dependency `@rjsf/validator-ajv8` to `5.16.1`.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.9.4-next.0
+  - @backstage/catalog-client@1.6.0-next.0
+  - @backstage/plugin-scaffolder-common@1.5.0-next.0
+  - @backstage/core-components@0.13.10
+  - @backstage/catalog-model@1.4.3
+  - @backstage/core-plugin-api@1.8.2
+  - @backstage/theme@0.5.0
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+
 ## 1.7.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder-react",
-  "version": "1.7.1",
+  "version": "1.8.0-next.1",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/alpha.d.ts

@@ -4,8 +4,8 @@ import * as React from 'react';
 import React__default, { ComponentType, ReactNode, PropsWithChildren, ReactElement } from 'react';
 import { TemplatePresentationV1beta3, TemplateEntityV1beta3, TaskStep } from '@backstage/plugin-scaffolder-common';
 import { UiSchema, FieldValidation } from '@rjsf/utils';
-import { TemplateParameterSchema, FieldExtensionOptions, FormProps, ReviewStepProps, LayoutOptions, CustomFieldValidator, TemplateGroupFilter, ScaffolderTaskOutput, ScaffolderRJSFFormProps, ScaffolderStep, CustomFieldExtensionSchema, ScaffolderRJSFFieldProps, FieldExtensionComponent } from '@backstage/plugin-scaffolder-react';
-import { ApiHolder, IconComponent, Extension } from '@backstage/core-plugin-api';
+import { TemplateParameterSchema, FieldExtensionOptions, FormProps, ReviewStepProps, LayoutOptions, CustomFieldValidator, TemplateGroupFilter, ScaffolderTaskOutput, ScaffolderRJSFFormProps, ScaffolderStep } from '@backstage/plugin-scaffolder-react';
+import { ApiHolder, IconComponent } from '@backstage/core-plugin-api';
 
 /**
  * This is the parsed template schema that is returned from the {@link useTemplateSchema} hook.
@@ -223,6 +223,7 @@ type ScaffolderPageContextMenuProps = {
     onEditorClicked?: () => void;
     onActionsClicked?: () => void;
     onTasksClicked?: () => void;
+    onCreateClicked?: () => void;
 };
 /**
  * @alpha
@@ -285,43 +286,4 @@ declare const useTemplateParameterSchema: (templateRef: string) => {
  */
 declare const useFilteredSchemaProperties: (manifest: TemplateParameterSchema | undefined) => TemplateParameterSchema | undefined;
 
-/**
- * Field validation type for Custom Field Extensions.
- *
- * @alpha
- */
-type LegacyCustomFieldValidator<TFieldReturnValue> = (data: TFieldReturnValue, field: FieldValidation, context: {
-    apiHolder: ApiHolder;
-}) => void | Promise<void>;
-/**
- * Type for the Custom Field Extension with the
- * name and components and validation function.
- *
- * @alpha
- */
-type LegacyFieldExtensionOptions<TFieldReturnValue = unknown, TInputProps = unknown> = {
-    name: string;
-    component: (props: LegacyFieldExtensionComponentProps<TFieldReturnValue, TInputProps>) => JSX.Element | null;
-    validation?: LegacyCustomFieldValidator<TFieldReturnValue>;
-    schema?: CustomFieldExtensionSchema;
-};
-/**
- * Type for field extensions and being able to type
- * incoming props easier.
- *
- * @alpha
- */
-interface LegacyFieldExtensionComponentProps<TFieldReturnValue, TUiOptions = unknown> extends ScaffolderRJSFFieldProps<TFieldReturnValue> {
-    uiSchema: ScaffolderRJSFFieldProps['uiSchema'] & {
-        'ui:options'?: TUiOptions;
-    };
-}
-
-/**
- * Method for creating field extensions that can be used in the scaffolder
- * frontend form.
- * @alpha
- */
-declare function createLegacyScaffolderFieldExtension<TReturnValue = unknown, TInputProps = unknown>(options: LegacyFieldExtensionOptions<TReturnValue, TInputProps>): Extension<FieldExtensionComponent<TReturnValue, TInputProps>>;
-
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormValidation, LegacyCustomFieldValidator, LegacyFieldExtensionComponentProps, LegacyFieldExtensionOptions, ParsedTemplateSchema, ReviewState, ReviewStateProps, ScaffolderField, ScaffolderFieldProps, ScaffolderPageContextMenu, ScaffolderPageContextMenuProps, Stepper, StepperProps, TaskLogStream, TaskSteps, TaskStepsProps, TemplateCard, TemplateCardProps, TemplateCategoryPicker, TemplateGroup, TemplateGroupProps, TemplateGroups, TemplateGroupsProps, Workflow, WorkflowProps, createAsyncValidators, createFieldValidation, createLegacyScaffolderFieldExtension, extractSchemaFromStep, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormValidation, ParsedTemplateSchema, ReviewState, ReviewStateProps, ScaffolderField, ScaffolderFieldProps, ScaffolderPageContextMenu, ScaffolderPageContextMenuProps, Stepper, StepperProps, TaskLogStream, TaskSteps, TaskStepsProps, TemplateCard, TemplateCardProps, TemplateCategoryPicker, TemplateGroup, TemplateGroupProps, TemplateGroups, TemplateGroupsProps, Workflow, WorkflowProps, createAsyncValidators, createFieldValidation, extractSchemaFromStep, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };

package/dist/alpha.esm.js

@@ -1,12 +1,13 @@
-import { useApi, featureFlagsApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef, alertApiRef, attachComponentData } from '@backstage/core-plugin-api';
+import { useApi, featureFlagsApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef, alertApiRef } from '@backstage/core-plugin-api';
 import { makeStyles, FormControl, Typography, createStyles, Paper, List, ListItem, ListItemIcon, ListItemText, LinearProgress, Stepper as Stepper$1, Step, StepLabel, Button, useTheme, Card, CardContent, Grid, Box, Divider, Chip, CardActions, CircularProgress, StepButton, FormControlLabel, Checkbox, TextField } from '@material-ui/core';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { Draft07 } from 'json-schema-library';
+import { parse, stringify } from 'flatted';
 import { StructuredMetadataTable, MarkdownContent, ItemCardHeader, Link, UserIcon, Content, ItemCardGrid, ContentHeader, Progress, InfoCard, LogViewer } from '@backstage/core-components';
 import validator from '@rjsf/validator-ajv8';
 import qs from 'qs';
 import useAsync from 'react-use/lib/useAsync';
-import { s as scaffolderApiRef, S as SecretsContextProvider, a as FIELD_EXTENSION_KEY } from './esm/ref-6fdfc121.esm.js';
+import { s as scaffolderApiRef, S as SecretsContextProvider } from './esm/ref-e2ee478c.esm.js';
 import cloneDeep from 'lodash/cloneDeep';
 import { withTheme } from '@rjsf/core';
 import { getUiOptions, getTemplate } from '@rjsf/utils';
@@ -16,7 +17,8 @@ import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstag
 import { FavoriteEntity, getEntityRelations, EntityRefLinks, useEntityList, entityRouteRef, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
 import LanguageIcon from '@material-ui/icons/Language';
 import { isTemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import WebIcon from '@material-ui/icons/Web';
+import LinkIcon from '@material-ui/icons/Link';
+import DescriptionIcon from '@material-ui/icons/Description';
 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
 import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
 import classNames from 'classnames';
@@ -38,7 +40,7 @@ import ListItemText$1 from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import Popover from '@material-ui/core/Popover';
-import Description from '@material-ui/icons/Description';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import Edit from '@material-ui/icons/Edit';
 import List$1 from '@material-ui/icons/List';
 import MoreVert from '@material-ui/icons/MoreVert';
@@ -79,9 +81,11 @@ function extractUiSchema(schema, uiSchema) {
       if (!isObject$1(schemaNode)) {
         continue;
       }
-      const innerUiSchema = {};
-      uiSchema[propName] = innerUiSchema;
-      extractUiSchema(schemaNode, innerUiSchema);
+      if (!isObject$1(uiSchema[propName])) {
+        const innerUiSchema = {};
+        uiSchema[propName] = innerUiSchema;
+      }
+      extractUiSchema(schemaNode, uiSchema[propName]);
     }
   }
   if (isObject$1(items)) {
@@ -131,7 +135,7 @@ function extractUiSchema(schema, uiSchema) {
 }
 const extractSchemaFromStep = (inputStep) => {
   const uiSchema = {};
-  const returnSchema = JSON.parse(JSON.stringify(inputStep));
+  const returnSchema = parse(stringify(inputStep));
   extractUiSchema(returnSchema, uiSchema);
   return { uiSchema, schema: returnSchema };
 };
@@ -1053,7 +1057,7 @@ const LinkOutputs = (props) => {
   const entityRoute = useRouteRef(entityRouteRef);
   const iconResolver = (key) => {
     var _a;
-    return (_a = app.getSystemIcon(key)) != null ? _a : WebIcon;
+    return (_a = app.getSystemIcon(key)) != null ? _a : LinkIcon;
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
     if (entityRef) {
@@ -1077,7 +1081,7 @@ const TextOutputs = (props) => {
   const app = useApp();
   const iconResolver = (key) => {
     var _a;
-    return (_a = app.getSystemIcon(key)) != null ? _a : WebIcon;
+    return (_a = app.getSystemIcon(key)) != null ? _a : DescriptionIcon;
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, text.filter(({ content }) => content !== void 0).map(({ title, icon }, i) => {
     const Icon = iconResolver(icon);
@@ -1101,11 +1105,19 @@ const TextOutputs = (props) => {
 };
 
 const DefaultTemplateOutputs = (props) => {
-  var _a, _b, _c;
+  var _a, _b;
   const { output } = props;
   const [textOutputIndex, setTextOutputIndex] = useState(
-    ((_a = output == null ? void 0 : output.text) == null ? void 0 : _a.length) ? 0 : void 0
+    void 0
   );
+  useEffect(() => {
+    if (textOutputIndex === void 0 && (output == null ? void 0 : output.text)) {
+      const defaultIndex = output.text.findIndex(
+        (t) => t.default
+      );
+      setTextOutputIndex(defaultIndex >= 0 ? defaultIndex : 0);
+    }
+  }, [textOutputIndex, output]);
   const textOutput = useMemo(
     () => {
       var _a2;
@@ -1126,11 +1138,11 @@ const DefaultTemplateOutputs = (props) => {
   ), /* @__PURE__ */ React.createElement(LinkOutputs, { output })))), textOutput ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(
     InfoCard,
     {
-      title: (_b = textOutput.title) != null ? _b : "Text Output",
+      title: (_a = textOutput.title) != null ? _a : "Text Output",
       noPadding: true,
       titleTypographyProps: { component: "h2" }
     },
-    /* @__PURE__ */ React.createElement(Box, { padding: 2, height: "100%" }, /* @__PURE__ */ React.createElement(MarkdownContent, { content: (_c = textOutput.content) != null ? _c : "" }))
+    /* @__PURE__ */ React.createElement(Box, { padding: 2, height: "100%" }, /* @__PURE__ */ React.createElement(MarkdownContent, { content: (_b = textOutput.content) != null ? _b : "" }))
   )) : null);
 };
 
@@ -1342,7 +1354,7 @@ const useStyles = makeStyles$1((theme) => ({
   }
 }));
 function ScaffolderPageContextMenu(props) {
-  const { onEditorClicked, onActionsClicked, onTasksClicked } = props;
+  const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } = props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState();
   if (!onEditorClicked && !onActionsClicked) {
@@ -1379,23 +1391,9 @@ function ScaffolderPageContextMenu(props) {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React.createElement(MenuList, null, onEditorClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onEditorClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Template Editor" })), onActionsClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onActionsClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Description, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Installed Actions" })), onTasksClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onTasksClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(List$1, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Task List" })))
+    /* @__PURE__ */ React.createElement(MenuList, null, onCreateClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onCreateClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(CreateComponentIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Create" })), onEditorClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onEditorClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Template Editor" })), onActionsClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onActionsClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(DescriptionIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Installed Actions" })), onTasksClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onTasksClicked }, /* @__PURE__ */ React.createElement(ListItemIcon$1, null, /* @__PURE__ */ React.createElement(List$1, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText$1, { primary: "Task List" })))
   ));
 }
 
-function createLegacyScaffolderFieldExtension(options) {
-  return {
-    expose() {
-      const FieldExtensionDataHolder = () => null;
-      attachComponentData(
-        FieldExtensionDataHolder,
-        FIELD_EXTENSION_KEY,
-        options
-      );
-      return FieldExtensionDataHolder;
-    }
-  };
-}
-
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, ScaffolderField, ScaffolderPageContextMenu, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, createLegacyScaffolderFieldExtension, extractSchemaFromStep, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, ScaffolderField, ScaffolderPageContextMenu, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, extractSchemaFromStep, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
 //# sourceMappingURL=alpha.esm.js.map