@backstage/plugin-scaffolder-react 1.5.6 → 1.6.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.6.0-next.1
+
+### Patch Changes
+
+- 62b5922916: Internal theme type updates
+- 76d07da66a: Make it possible to define control buttons text (Back, Create, Review) per template
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.9.0-next.1
+  - @backstage/plugin-scaffolder-common@1.4.3-next.1
+  - @backstage/core-components@0.13.8-next.1
+  - @backstage/catalog-client@1.4.5
+  - @backstage/catalog-model@1.4.3
+  - @backstage/core-plugin-api@1.8.0-next.0
+  - @backstage/errors@1.2.3
+  - @backstage/theme@0.4.4-next.0
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7-next.0
+
+## 1.6.0-next.0
+
+### Minor Changes
+
+- 3fdffbb699: Release design improvements for the `Scaffolder` plugin and support v5 of `@rjsf/*` libraries.
+
+  This change should be non-breaking. If you're seeing typescript issues after migrating please [open an issue](https://github.com/backstage/backstage/issues/new/choose)
+
+  The `next` versions like `createNextFieldExtension` and `NextScaffolderPage` have been promoted to the public interface under `createScaffolderFieldExtension` and `ScaffolderPage`, so any older imports which are no longer found will need updating from `@backstage/plugin-scaffolder/alpha` or `@backstage/plugin-scaffolder-react/alpha` will need to be imported from `@backstage/plugin-scaffolder` and `@backstage/plugin-scaffolder-react` respectively.
+
+  The legacy versions are now available in `/alpha` under `createLegacyFieldExtension` and `LegacyScaffolderPage` if you're running into issues, but be aware that these will be removed in a next mainline release.
+
+### Patch Changes
+
+- 6c2b872153: Add official support for React 18.
+- Updated dependencies
+  - @backstage/core-components@0.13.7-next.0
+  - @backstage/plugin-scaffolder-common@1.4.3-next.0
+  - @backstage/plugin-catalog-react@1.9.0-next.0
+  - @backstage/core-plugin-api@1.8.0-next.0
+  - @backstage/version-bridge@1.0.7-next.0
+  - @backstage/theme@0.4.4-next.0
+  - @backstage/catalog-client@1.4.5
+  - @backstage/catalog-model@1.4.3
+  - @backstage/errors@1.2.3
+  - @backstage/types@1.1.1
+
 ## 1.5.6
 
 ### Patch Changes

package/alpha/package.json

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

package/dist/alpha.d.ts

@@ -1,59 +1,11 @@
 /// <reference types="react" />
 import { JsonObject, JsonValue } from '@backstage/types';
 import * as React from 'react';
-import React__default, { PropsWithChildren, ReactNode, ReactElement } from 'react';
-import { ApiHolder, Extension, IconComponent } from '@backstage/core-plugin-api';
-import { FieldProps, UiSchema, UIOptionsType, FieldValidation } from '@rjsf/utils';
-import { CustomFieldExtensionSchema, FieldExtensionComponent, TemplateParameterSchema, LayoutOptions, ScaffolderTaskOutput, ScaffolderStep } from '@backstage/plugin-scaffolder-react';
-import { FormProps as FormProps$1 } from '@rjsf/core-v5';
-import { TemplateEntityV1beta3, TaskStep } from '@backstage/plugin-scaffolder-common';
-
-/**
- * Type for Field Extension Props for RJSF v5
- *
- * @alpha
- */
-interface NextFieldExtensionComponentProps<TFieldReturnValue, TUiOptions = {}> extends PropsWithChildren<FieldProps<TFieldReturnValue>> {
-    uiSchema?: NextFieldExtensionUiSchema<TFieldReturnValue, TUiOptions>;
-}
-/**
- * Type for Field Extension UiSchema
- *
- * @alpha
- */
-interface NextFieldExtensionUiSchema<TFieldReturnValue, TUiOptions> extends UiSchema<TFieldReturnValue> {
-    'ui:options'?: TUiOptions & UIOptionsType;
-}
-/**
- * Field validation type for Custom Field Extensions.
- *
- * @alpha
- */
-type NextCustomFieldValidator<TFieldReturnValue, TUiOptions = unknown> = (data: TFieldReturnValue, field: FieldValidation, context: {
-    apiHolder: ApiHolder;
-    formData: JsonObject;
-    schema: JsonObject;
-    uiSchema?: NextFieldExtensionUiSchema<TFieldReturnValue, TUiOptions>;
-}) => void | Promise<void>;
-/**
- * Type for the Custom Field Extension with the
- * name and components and validation function.
- *
- * @alpha
- */
-type NextFieldExtensionOptions<TFieldReturnValue = unknown, TUiOptions = unknown> = {
-    name: string;
-    component: (props: NextFieldExtensionComponentProps<TFieldReturnValue, TUiOptions>) => JSX.Element | null;
-    validation?: NextCustomFieldValidator<TFieldReturnValue, TUiOptions>;
-    schema?: CustomFieldExtensionSchema;
-};
-
-/**
- * Method for creating field extensions that can be used in the scaffolder
- * frontend form.
- * @alpha
- */
-declare function createNextScaffolderFieldExtension<TReturnValue = unknown, TInputProps extends UIOptionsType = {}>(options: NextFieldExtensionOptions<TReturnValue, TInputProps>): Extension<FieldExtensionComponent<TReturnValue, TInputProps>>;
+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';
 
 /**
  * This is the parsed template schema that is returned from the {@link useTemplateSchema} hook.
@@ -74,6 +26,7 @@ interface ParsedTemplateSchema {
  */
 declare const useTemplateSchema: (manifest: TemplateParameterSchema) => {
     steps: ParsedTemplateSchema[];
+    presentation?: TemplatePresentationV1beta3 | undefined;
 };
 
 /**
@@ -90,26 +43,21 @@ type ReviewStateProps = {
  */
 declare const ReviewState: (props: ReviewStateProps) => React__default.JSX.Element;
 
-/**
- * Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderpage`
- *
- * @alpha
- */
-type FormProps = Pick<FormProps$1, 'transformErrors' | 'noHtml5Validate'>;
-
 /**
  * The Props for {@link Stepper} component
  * @alpha
  */
 type StepperProps = {
     manifest: TemplateParameterSchema;
-    extensions: NextFieldExtensionOptions<any, any>[];
+    extensions: FieldExtensionOptions<any, any>[];
     templateName?: string;
-    FormProps?: FormProps;
+    formProps?: FormProps;
     initialState?: Record<string, JsonValue>;
     onCreate: (values: Record<string, JsonValue>) => Promise<void>;
     components?: {
+        ReviewStepComponent?: ComponentType<ReviewStepProps>;
         ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;
+        backButtonText?: ReactNode;
         createButtonText?: ReactNode;
         reviewButtonText?: ReactNode;
     };
@@ -121,6 +69,15 @@ type StepperProps = {
  */
 declare const Stepper: (stepperProps: StepperProps) => React__default.JSX.Element;
 
+/** @alpha */
+type FormValidation = {
+    [name: string]: FieldValidation | FormValidation;
+};
+/** @alpha */
+declare const createAsyncValidators: (rootSchema: JsonObject, validators: Record<string, undefined | CustomFieldValidator<unknown, unknown>>, context: {
+    apiHolder: ApiHolder;
+}) => (formData: JsonObject) => Promise<FormValidation>;
+
 /**
  * The Props for the {@link TemplateCard} component
  * @alpha
@@ -165,13 +122,6 @@ interface TemplateGroupProps {
  */
 declare const TemplateGroup: (props: TemplateGroupProps) => React__default.JSX.Element | null;
 
-/**
- * @alpha
- */
-type TemplateGroupFilter = {
-    title?: React__default.ReactNode;
-    filter: (entity: TemplateEntityV1beta3) => boolean;
-};
 /**
  * @alpha
  */
@@ -201,8 +151,11 @@ type WorkflowProps = {
     description?: string;
     namespace: string;
     templateName: string;
+    components?: {
+        ReviewStepComponent?: React__default.ComponentType<ReviewStepProps>;
+    };
     onError(error: Error | undefined): JSX.Element | null;
-} & Pick<StepperProps, 'extensions' | 'FormProps' | 'components' | 'onCreate' | 'initialState' | 'layouts'>;
+} & Pick<StepperProps, 'extensions' | 'formProps' | 'components' | 'onCreate' | 'initialState' | 'layouts'>;
 /**
  * @alpha
  */
@@ -225,7 +178,7 @@ declare const DefaultTemplateOutputs: (props: {
  * The Form component
  * @alpha
  */
-declare const Form: (props: PropsWithChildren<FormProps$1>) => React__default.JSX.Element;
+declare const Form: (props: PropsWithChildren<ScaffolderRJSFFormProps>) => React__default.JSX.Element;
 
 /**
  * Props for the TaskSteps component
@@ -326,4 +279,43 @@ declare const useTemplateParameterSchema: (templateRef: string) => {
     error: Error | undefined;
 };
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormProps, NextCustomFieldValidator, NextFieldExtensionComponentProps, NextFieldExtensionOptions, NextFieldExtensionUiSchema, ParsedTemplateSchema, ReviewState, ReviewStateProps, ScaffolderField, ScaffolderFieldProps, ScaffolderPageContextMenu, ScaffolderPageContextMenuProps, Stepper, StepperProps, TaskLogStream, TaskSteps, TaskStepsProps, TemplateCard, TemplateCardProps, TemplateCategoryPicker, TemplateGroup, TemplateGroupFilter, TemplateGroupProps, TemplateGroups, TemplateGroupsProps, Workflow, WorkflowProps, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+/**
+ * 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, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };

package/dist/alpha.esm.js

@@ -7,13 +7,13 @@ 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 { withTheme } from '@rjsf/core-v5';
+import { withTheme } from '@rjsf/core';
 import { getUiOptions, getTemplate } from '@rjsf/utils';
+import { Theme } from '@rjsf/material-ui';
 import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
 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 { TemplateGroup as TemplateGroup$1 } from '@backstage/plugin-scaffolder-react/alpha';
 import WebIcon from '@material-ui/icons/Web';
 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
 import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
@@ -295,6 +295,7 @@ const useTemplateSchema = (manifest) => {
     };
   });
   return {
+    presentation: manifest.presentation,
     steps: returningSteps
   };
 };
@@ -491,14 +492,40 @@ const DescriptionFieldTemplate = (props) => {
   return null;
 };
 
-const WrappedForm = withTheme(require("@rjsf/material-ui-v5").Theme);
+const WrappedForm = withTheme(Theme);
 const Form = (props) => {
-  const templates = {
-    FieldTemplate,
-    DescriptionFieldTemplate,
-    ...props.templates
-  };
-  return /* @__PURE__ */ React.createElement(WrappedForm, { ...props, templates });
+  const wrappedFields = React.useMemo(
+    () => {
+      var _a;
+      return Object.fromEntries(
+        Object.entries((_a = props.fields) != null ? _a : {}).map(([key, Component]) => [
+          key,
+          (wrapperProps) => {
+            var _a2, _b;
+            return /* @__PURE__ */ React.createElement(
+              Component,
+              {
+                ...wrapperProps,
+                uiSchema: (_a2 = wrapperProps.uiSchema) != null ? _a2 : {},
+                formData: wrapperProps.formData,
+                rawErrors: (_b = wrapperProps.rawErrors) != null ? _b : []
+              }
+            );
+          }
+        ])
+      );
+    },
+    [props.fields]
+  );
+  const templates = React.useMemo(
+    () => ({
+      FieldTemplate,
+      DescriptionFieldTemplate,
+      ...props.templates
+    }),
+    [props.templates]
+  );
+  return /* @__PURE__ */ React.createElement(WrappedForm, { ...props, templates, fields: wrappedFields });
 };
 
 const useStyles$8 = makeStyles((theme) => ({
@@ -516,15 +543,17 @@ const useStyles$8 = makeStyles((theme) => ({
   }
 }));
 const Stepper = (stepperProps) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { layouts = [], components = {}, ...props } = stepperProps;
   const {
     ReviewStateComponent = ReviewState,
+    ReviewStepComponent,
+    backButtonText = "Back",
     createButtonText = "Create",
     reviewButtonText = "Review"
   } = components;
   const analytics = useAnalytics();
-  const { steps } = useTemplateSchema(props.manifest);
+  const { presentation, steps } = useTemplateSchema(props.manifest);
   const apiHolder = useApiHolder();
   const [activeStep, setActiveStep] = useState(0);
   const [isValidating, setIsValidating] = useState(false);
@@ -536,6 +565,10 @@ const Stepper = (stepperProps) => {
       props.extensions.map(({ name, component }) => [name, component])
     );
   }, [props.extensions]);
+  const fields = useMemo(
+    () => ({ ...FieldOverrides, ...extensions }),
+    [extensions]
+  );
   const validators = useMemo(() => {
     return Object.fromEntries(
       props.extensions.map(({ name, validation: validation2 }) => [name, validation2])
@@ -554,6 +587,12 @@ const Stepper = (stepperProps) => {
     (e) => setFormState((current) => ({ ...current, ...e.formData })),
     [setFormState]
   );
+  const handleCreate = useCallback(() => {
+    var _a2;
+    props.onCreate(formState);
+    const name = typeof formState.name === "string" ? formState.name : void 0;
+    analytics.captureEvent("create", (_a2 = name != null ? name : props.templateName) != null ? _a2 : "unknown");
+  }, [props, formState, analytics]);
   const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });
   const handleNext = async ({
     formData = {}
@@ -574,6 +613,9 @@ const Stepper = (stepperProps) => {
     }
     setFormState((current) => ({ ...current, ...formData }));
   };
+  const backLabel = (_b = (_a = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _a.backButtonText) != null ? _b : backButtonText;
+  const createLabel = (_d = (_c = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _c.createButtonText) != null ? _d : createButtonText;
+  const reviewLabel = (_f = (_e = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _e.reviewButtonText) != null ? _f : reviewButtonText;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isValidating && /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" }), /* @__PURE__ */ React.createElement(Stepper$1, { activeStep, alternativeLabel: true, variant: "elevation" }, steps.map((step, index) => /* @__PURE__ */ React.createElement(Step, { key: index }, /* @__PURE__ */ React.createElement(StepLabel, null, step.title))), /* @__PURE__ */ React.createElement(Step, null, /* @__PURE__ */ React.createElement(StepLabel, null, "Review"))), /* @__PURE__ */ React.createElement("div", { className: styles.formWrapper }, activeStep < steps.length ? /* @__PURE__ */ React.createElement(
     Form,
     {
@@ -584,10 +626,10 @@ const Stepper = (stepperProps) => {
       schema: currentStep.schema,
       uiSchema: currentStep.uiSchema,
       onSubmit: handleNext,
-      fields: { ...FieldOverrides, ...extensions },
+      fields,
       showErrorList: false,
       onChange: handleChange,
-      ...(_a = props.FormProps) != null ? _a : {}
+      ...(_g = props.formProps) != null ? _g : {}
     },
     /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
       Button,
@@ -596,7 +638,7 @@ const Stepper = (stepperProps) => {
         className: styles.backButton,
         disabled: activeStep < 1 || isValidating
       },
-      "Back"
+      backLabel
     ), /* @__PURE__ */ React.createElement(
       Button,
       {
@@ -605,33 +647,39 @@ const Stepper = (stepperProps) => {
         type: "submit",
         disabled: isValidating
       },
-      activeStep === steps.length - 1 ? reviewButtonText : "Next"
+      activeStep === steps.length - 1 ? reviewLabel : "Next"
     ))
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ReviewStateComponent, { formState, schemas: steps }), /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      onClick: handleBack,
-      className: styles.backButton,
-      disabled: activeStep < 1
-    },
-    "Back"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "contained",
-      color: "primary",
-      onClick: () => {
-        var _a2;
-        props.onCreate(formState);
-        const name = typeof formState.name === "string" ? formState.name : void 0;
-        analytics.captureEvent(
-          "create",
-          (_a2 = name != null ? name : props.templateName) != null ? _a2 : "unknown"
-        );
+  ) : (
+    // TODO: potentially move away from this pattern, deprecate?
+    ReviewStepComponent ? /* @__PURE__ */ React.createElement(
+      ReviewStepComponent,
+      {
+        disableButtons: isValidating,
+        formData: formState,
+        handleBack,
+        handleReset: () => {
+        },
+        steps,
+        handleCreate
       }
-    },
-    createButtonText
-  )))));
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ReviewStateComponent, { formState, schemas: steps }), /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleBack,
+        className: styles.backButton,
+        disabled: activeStep < 1
+      },
+      "Back"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "contained",
+        color: "primary",
+        onClick: handleCreate
+      },
+      createLabel
+    )))
+  )));
 };
 
 const useStyles$7 = makeStyles(() => ({
@@ -822,7 +870,7 @@ const TemplateGroups = (props) => {
       };
     });
     return /* @__PURE__ */ React.createElement(
-      TemplateGroup$1,
+      TemplateGroup,
       {
         key: index,
         templates,
@@ -1210,7 +1258,7 @@ function ScaffolderPageContextMenu(props) {
   ));
 }
 
-function createNextScaffolderFieldExtension(options) {
+function createLegacyScaffolderFieldExtension(options) {
   return {
     expose() {
       const FieldExtensionDataHolder = () => null;
@@ -1224,5 +1272,5 @@ function createNextScaffolderFieldExtension(options) {
   };
 }
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, ScaffolderField, ScaffolderPageContextMenu, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createFieldValidation, createNextScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, ScaffolderField, ScaffolderPageContextMenu, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, createLegacyScaffolderFieldExtension, extractSchemaFromStep, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
 //# sourceMappingURL=alpha.esm.js.map