{
// @public
export type LayoutTemplate = NonNullable<
- FormProps['uiSchema']
+ FormProps_2['uiSchema']
>['ui:ObjectFieldTemplate'];
// @public
@@ -124,6 +162,20 @@ export type LogEvent = {
taskId: string;
};
+// @public
+export type ReviewStepProps = {
+ disableButtons: boolean;
+ formData: JsonObject;
+ handleBack: () => void;
+ handleReset: () => void;
+ handleCreate: () => void;
+ steps: {
+ uiSchema: UiSchema;
+ mergedSchema: JsonObject;
+ schema: JsonObject;
+ }[];
+};
+
// @public
export interface ScaffolderApi {
cancelTask(taskId: string): Promise;
@@ -186,8 +238,8 @@ export interface ScaffolderDryRunResponse {
}
// @public
-export const ScaffolderFieldExtensions: React_2.ComponentType<
- React_2.PropsWithChildren<{}>
+export const ScaffolderFieldExtensions: React.ComponentType<
+ React.PropsWithChildren<{}>
>;
// @public
@@ -226,6 +278,113 @@ export type ScaffolderOutputText = {
content?: string;
};
+// @public
+export type ScaffolderRJSFField<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> = ComponentType>;
+
+// @public
+export interface ScaffolderRJSFFieldProps<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> extends GenericObjectType,
+ Pick<
+ HTMLAttributes,
+ Exclude<
+ keyof HTMLAttributes,
+ 'onBlur' | 'onFocus' | 'onChange'
+ >
+ > {
+ autofocus?: boolean;
+ disabled: boolean;
+ errorSchema?: ErrorSchema;
+ formContext?: F;
+ formData: T;
+ hideError?: boolean;
+ idPrefix?: string;
+ idSchema: IdSchema;
+ idSeparator?: string;
+ name: string;
+ onBlur: (id: string, value: any) => void;
+ onChange: (
+ newFormData: T | undefined,
+ es?: ErrorSchema,
+ id?: string,
+ ) => any;
+ onFocus: (id: string, value: any) => void;
+ rawErrors: string[];
+ readonly: boolean;
+ registry: Registry;
+ required?: boolean;
+ schema: S;
+ uiSchema: UiSchema;
+}
+
+// @public
+export interface ScaffolderRJSFFormProps<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> {
+ acceptcharset?: string;
+ action?: string;
+ autoComplete?: string;
+ children?: ReactNode;
+ className?: string;
+ customValidate?: CustomValidator;
+ disabled?: boolean;
+ enctype?: string;
+ experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior;
+ extraErrors?: ErrorSchema;
+ fields?: ScaffolderRJSFRegistryFieldsType;
+ focusOnFirstError?: boolean | ((error: RJSFValidationError) => void);
+ formContext?: F;
+ formData?: T;
+ id?: string;
+ idPrefix?: string;
+ idSeparator?: string;
+ _internalFormWrapper?: ElementType;
+ liveOmit?: boolean;
+ liveValidate?: boolean;
+ method?: string;
+ name?: string;
+ noHtml5Validate?: boolean;
+ // @deprecated
+ noValidate?: boolean;
+ omitExtraData?: boolean;
+ onBlur?: (id: string, data: any) => void;
+ onChange?: (data: IChangeEvent, id?: string) => void;
+ onError?: (errors: RJSFValidationError[]) => void;
+ onFocus?: (id: string, data: any) => void;
+ onSubmit?: (data: IChangeEvent, event: FormEvent) => void;
+ readonly?: boolean;
+ ref?: Ref>;
+ schema: S;
+ showErrorList?: false | 'top' | 'bottom';
+ tagName?: ElementType;
+ target?: string;
+ templates?: Partial, 'ButtonTemplates'>> & {
+ ButtonTemplates?: Partial['ButtonTemplates']>;
+ };
+ transformErrors?: ErrorTransformer;
+ translateString?: Registry['translateString'];
+ uiSchema?: UiSchema;
+ validator: ValidatorType;
+ widgets?: RegistryWidgetsType;
+}
+
+// @public
+export type ScaffolderRJSFRegistryFieldsType<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> = {
+ [name: string]: ScaffolderRJSFField;
+};
+
// @public
export interface ScaffolderScaffoldOptions {
// (undocumented)
@@ -313,6 +472,12 @@ export type TaskStream = {
output?: ScaffolderTaskOutput;
};
+// @public (undocumented)
+export type TemplateGroupFilter = {
+ title?: React.ReactNode;
+ filter: (entity: TemplateEntityV1beta3) => boolean;
+};
+
// @public
export type TemplateParameterSchema = {
title: string;
diff --git a/plugins/scaffolder-react/package.json b/plugins/scaffolder-react/package.json
index 05dccfa1fe..df4a3c867f 100644
--- a/plugins/scaffolder-react/package.json
+++ b/plugins/scaffolder-react/package.json
@@ -60,10 +60,8 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.61",
"@react-hookz/web": "^20.0.0",
- "@rjsf/core": "^3.2.1",
- "@rjsf/core-v5": "npm:@rjsf/core@5.13.0",
- "@rjsf/material-ui": "^3.2.1",
- "@rjsf/material-ui-v5": "npm:@rjsf/material-ui@5.13.0",
+ "@rjsf/core": "5.13.0",
+ "@rjsf/material-ui": "5.13.0",
"@rjsf/utils": "5.13.0",
"@rjsf/validator-ajv8": "5.13.0",
"@types/json-schema": "^7.0.9",
diff --git a/plugins/scaffolder-react/src/alpha.ts b/plugins/scaffolder-react/src/alpha.ts
index 731b8e07d9..224ee97c06 100644
--- a/plugins/scaffolder-react/src/alpha.ts
+++ b/plugins/scaffolder-react/src/alpha.ts
@@ -15,4 +15,4 @@
*/
export * from './next';
-export type { FormProps } from './next';
+export * from './legacy';
diff --git a/plugins/scaffolder-react/src/components/index.ts b/plugins/scaffolder-react/src/components/index.ts
new file mode 100644
index 0000000000..92cb965d75
--- /dev/null
+++ b/plugins/scaffolder-react/src/components/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './types';
diff --git a/plugins/scaffolder-react/src/components/types.ts b/plugins/scaffolder-react/src/components/types.ts
new file mode 100644
index 0000000000..597998bac4
--- /dev/null
+++ b/plugins/scaffolder-react/src/components/types.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import type { FormProps as SchemaFormProps } from '@rjsf/core';
+import { UiSchema } from '@rjsf/utils';
+import { JsonObject } from '@backstage/types';
+
+/** @public */
+export type TemplateGroupFilter = {
+ title?: React.ReactNode;
+ filter: (entity: TemplateEntityV1beta3) => boolean;
+};
+
+/**
+ * Any `@rjsf/core` form properties that are publicly exposed to the `ScaffolderPage`
+ *
+ * @public
+ */
+export type FormProps = Pick<
+ SchemaFormProps,
+ 'transformErrors' | 'noHtml5Validate'
+>;
+
+/**
+ * The props for the Last Step in scaffolder template form.
+ * Which represents the summary of the input provided by the end user.
+ *
+ * @public
+ */
+export type ReviewStepProps = {
+ disableButtons: boolean;
+ formData: JsonObject;
+ handleBack: () => void;
+ handleReset: () => void;
+ handleCreate: () => void;
+ steps: {
+ uiSchema: UiSchema;
+ mergedSchema: JsonObject;
+ schema: JsonObject;
+ }[];
+};
diff --git a/plugins/scaffolder-react/src/extensions/index.tsx b/plugins/scaffolder-react/src/extensions/index.tsx
index d70f5e36c5..5372a8cf7e 100644
--- a/plugins/scaffolder-react/src/extensions/index.tsx
+++ b/plugins/scaffolder-react/src/extensions/index.tsx
@@ -14,23 +14,17 @@
* limitations under the License.
*/
-import React from 'react';
import {
- CustomFieldExtensionSchema,
CustomFieldValidator,
FieldExtensionOptions,
FieldExtensionComponentProps,
+ FieldExtensionUiSchema,
+ CustomFieldExtensionSchema,
} from './types';
import { Extension, attachComponentData } from '@backstage/core-plugin-api';
+import { UIOptionsType } from '@rjsf/utils';
import { FIELD_EXTENSION_KEY, FIELD_EXTENSION_WRAPPER_KEY } from './keys';
-/**
- * The type used to wrap up the Layout and embed the input props
- *
- * @public
- */
-export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null;
-
/**
* Method for creating field extensions that can be used in the scaffolder
* frontend form.
@@ -38,7 +32,7 @@ export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null;
*/
export function createScaffolderFieldExtension<
TReturnValue = unknown,
- TInputProps = unknown,
+ TInputProps extends UIOptionsType = {},
>(
options: FieldExtensionOptions,
): Extension> {
@@ -72,9 +66,19 @@ attachComponentData(
true,
);
+/**
+ * The type used to wrap up the Layout and embed the input props
+ *
+ * @public
+ */
+export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null;
+
export type {
- CustomFieldExtensionSchema,
CustomFieldValidator,
FieldExtensionOptions,
FieldExtensionComponentProps,
+ FieldExtensionUiSchema,
+ CustomFieldExtensionSchema,
};
+
+export * from './rjsf';
diff --git a/plugins/scaffolder-react/src/extensions/rjsf.ts b/plugins/scaffolder-react/src/extensions/rjsf.ts
new file mode 100644
index 0000000000..cacedad080
--- /dev/null
+++ b/plugins/scaffolder-react/src/extensions/rjsf.ts
@@ -0,0 +1,292 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentType, ElementType, FormEvent, ReactNode, Ref } from 'react';
+import {
+ ErrorSchema,
+ FormContextType,
+ GenericObjectType,
+ IdSchema,
+ Registry,
+ RJSFSchema,
+ StrictRJSFSchema,
+ UiSchema,
+ ValidatorType,
+ TemplatesType,
+ RegistryWidgetsType,
+ RJSFValidationError,
+ CustomValidator,
+ Experimental_DefaultFormStateBehavior,
+ ErrorTransformer,
+} from '@rjsf/utils';
+import { HTMLAttributes } from 'react';
+import Form, { IChangeEvent } from '@rjsf/core';
+
+/**
+ * The props for the `Field` components
+ * @public
+ */
+export interface ScaffolderRJSFFieldProps<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> extends GenericObjectType,
+ Pick<
+ HTMLAttributes,
+ Exclude<
+ keyof HTMLAttributes,
+ 'onBlur' | 'onFocus' | 'onChange'
+ >
+ > {
+ /** The JSON subschema object for this field */
+ schema: S;
+ /** The uiSchema for this field */
+ uiSchema: UiSchema;
+ /** The tree of unique ids for every child field */
+ idSchema: IdSchema;
+ /** The data for this field */
+ formData: T;
+ /** The tree of errors for this field and its children */
+ errorSchema?: ErrorSchema;
+ /** The field change event handler; called with the updated form data and an optional `ErrorSchema` */
+ onChange: (
+ newFormData: T | undefined,
+ es?: ErrorSchema,
+ id?: string,
+ ) => any;
+ /** The input blur event handler; call it with the field id and value */
+ onBlur: (id: string, value: any) => void;
+ /** The input focus event handler; call it with the field id and value */
+ onFocus: (id: string, value: any) => void;
+ /** The `formContext` object that you passed to `Form` */
+ formContext?: F;
+ /** A boolean value stating if the field should autofocus */
+ autofocus?: boolean;
+ /** A boolean value stating if the field is disabled */
+ disabled: boolean;
+ /** A boolean value stating if the field is hiding its errors */
+ hideError?: boolean;
+ /** A boolean value stating if the field is read-only */
+ readonly: boolean;
+ /** The required status of this field */
+ required?: boolean;
+ /** The unique name of the field, usually derived from the name of the property in the JSONSchema */
+ name: string;
+ /** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;
+ * Default is `root`
+ */
+ idPrefix?: string;
+ /** To avoid using a path separator that is present in field names, it is possible to change the separator used for
+ * ids (Default is `_`)
+ */
+ idSeparator?: string;
+ /** An array of strings listing all generated error messages from encountered errors for this field */
+ rawErrors: string[];
+ /** The `registry` object */
+ registry: Registry;
+}
+
+/**
+ * The properties that are passed to the `Form`
+ * @public
+ */
+export interface ScaffolderRJSFFormProps<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> {
+ /** The JSON schema object for the form */
+ schema: S;
+ /** An implementation of the `ValidatorType` interface that is needed for form validation to work */
+ validator: ValidatorType;
+ /** The optional children for the form, if provided, it will replace the default `SubmitButton` */
+ children?: ReactNode;
+ /** The uiSchema for the form */
+ uiSchema?: UiSchema;
+ /** The data for the form, used to prefill a form with existing data */
+ formData?: T;
+ /** You can provide a `formContext` object to the form, which is passed down to all fields and widgets. Useful for
+ * implementing context aware fields and widgets.
+ *
+ * NOTE: Setting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as
+ * disabled.
+ */
+ formContext?: F;
+ /** To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids;
+ * Default is `root`
+ */
+ idPrefix?: string;
+ /** To avoid using a path separator that is present in field names, it is possible to change the separator used for
+ * ids (Default is `_`)
+ */
+ idSeparator?: string;
+ /** It's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down
+ * to each field of the form. If you just want to disable some fields, see the `ui:disabled` parameter in `uiSchema`
+ */
+ disabled?: boolean;
+ /** It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then
+ * forwarded down to each field of the form. If you just want to make some fields read-only, see the `ui:readonly`
+ * parameter in `uiSchema`
+ */
+ readonly?: boolean;
+ /** The dictionary of registered fields in the form */
+ fields?: ScaffolderRJSFRegistryFieldsType;
+ /** The dictionary of registered templates in the form; Partial allows a subset to be provided beyond the defaults */
+ templates?: Partial, 'ButtonTemplates'>> & {
+ ButtonTemplates?: Partial['ButtonTemplates']>;
+ };
+ /** The dictionary of registered widgets in the form */
+ widgets?: RegistryWidgetsType;
+ /** If you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will
+ * receive the same args as `onSubmit` any time a value is updated in the form. Can also return the `id` of the field
+ * that caused the change
+ */
+ onChange?: (data: IChangeEvent, id?: string) => void;
+ /** To react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of
+ * encountered errors
+ */
+ onError?: (errors: RJSFValidationError[]) => void;
+ /** You can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted
+ * and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form
+ * data you're usually after. The original event will also be passed as a second parameter
+ */
+ onSubmit?: (data: IChangeEvent, event: FormEvent) => void;
+ /** Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass
+ * an `onBlur` handler, which will receive the id of the input that was blurred and the field value
+ */
+ onBlur?: (id: string, data: any) => void;
+ /** Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass
+ * an `onFocus` handler, which will receive the id of the input that is focused and the field value
+ */
+ onFocus?: (id: string, data: any) => void;
+ /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form */
+ acceptcharset?: string;
+ /** The value of this prop will be passed to the `action` HTML attribute on the form
+ *
+ * NOTE: this just renders the `action` attribute in the HTML markup. There is no real network request being sent to
+ * this `action` on submit. Instead, react-jsonschema-form catches the submit event with `event.preventDefault()`
+ * and then calls the `onSubmit` function, where you could send a request programmatically with `fetch` or similar.
+ */
+ action?: string;
+ /** The value of this prop will be passed to the `autocomplete` HTML attribute on the form */
+ autoComplete?: string;
+ /** The value of this prop will be passed to the `class` HTML attribute on the form */
+ className?: string;
+ /** The value of this prop will be passed to the `enctype` HTML attribute on the form */
+ enctype?: string;
+ /** The value of this prop will be passed to the `id` HTML attribute on the form */
+ id?: string;
+ /** The value of this prop will be passed to the `name` HTML attribute on the form */
+ name?: string;
+ /** The value of this prop will be passed to the `method` HTML attribute on the form */
+ method?: string;
+ /** It's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are
+ * nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no
+ * longer work
+ */
+ tagName?: ElementType;
+ /** The value of this prop will be passed to the `target` HTML attribute on the form */
+ target?: string;
+ /** Formerly the `validate` prop; Takes a function that specifies custom validation rules for the form */
+ customValidate?: CustomValidator;
+ /** This prop allows passing in custom errors that are augmented with the existing JSON Schema errors on the form; it
+ * can be used to implement asynchronous validation
+ */
+ extraErrors?: ErrorSchema;
+ /** If set to true, turns off HTML5 validation on the form; Set to `false` by default */
+ noHtml5Validate?: boolean;
+ /** If set to true, turns off all validation. Set to `false` by default
+ *
+ * @deprecated - In a future release, this switch may be replaced by making `validator` prop optional
+ */
+ noValidate?: boolean;
+ /** If set to true, the form will perform validation and show any validation errors whenever the form data is changed,
+ * rather than just on submit
+ */
+ liveValidate?: boolean;
+ /** If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field
+ * will be removed whenever `onChange` is called. Set to `false` by default
+ */
+ liveOmit?: boolean;
+ /** If set to true, then extra form data values that are not in any form field will be removed whenever `onSubmit` is
+ * called. Set to `false` by default.
+ */
+ omitExtraData?: boolean;
+ /** When this prop is set to `top` or 'bottom', a list of errors (or the custom error list defined in the `ErrorList`) will also
+ * show. When set to false, only inline input validation errors will be shown. Set to `top` by default
+ */
+ showErrorList?: false | 'top' | 'bottom';
+ /** A function can be passed to this prop in order to make modifications to the default errors resulting from JSON
+ * Schema validation
+ */
+ transformErrors?: ErrorTransformer;
+ /** If set to true, then the first field with an error will receive the focus when the form is submitted with errors
+ */
+ focusOnFirstError?: boolean | ((error: RJSFValidationError) => void);
+ /** Optional string translation function, if provided, allows users to change the translation of the RJSF internal
+ * strings. Some strings contain replaceable parameter values as indicated by `%1`, `%2`, etc. The number after the
+ * `%` indicates the order of the parameter. The ordering of parameters is important because some languages may choose
+ * to put the second parameter before the first in its translation.
+ */
+ translateString?: Registry['translateString'];
+ /** Optional configuration object with flags, if provided, allows users to override default form state behavior
+ * Currently only affecting minItems on array fields and handling of setting defaults based on the value of
+ * `emptyObjectFields`
+ */
+ experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior;
+ /**
+ * _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around ``
+ * that supports the proper rendering of those themes. To use this prop, one must pass a component that takes two
+ * props: `children` and `as`. That component, at minimum, should render the `children` inside of a tag
+ * unless `as` is provided, in which case, use the `as` prop in place of ``.
+ * i.e.:
+ * ```
+ * export default function InternalForm({ children, as }) {
+ * const FormTag = as || 'form';
+ * return {children};
+ * }
+ * ```
+ *
+ * Use at your own risk as this prop is private and may change at any time without notice.
+ */
+ _internalFormWrapper?: ElementType;
+ /** Support receiving a React ref to the Form
+ */
+ ref?: Ref>;
+}
+
+/**
+ * The set of `Fields` stored in the `Registry`
+ * @public
+ */
+export type ScaffolderRJSFRegistryFieldsType<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> = {
+ /** A `Field` indexed by `name` */
+ [name: string]: ScaffolderRJSFField;
+};
+
+/**
+ * The `Field` type for Field Extensions
+ * @public
+ */
+export type ScaffolderRJSFField<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any,
+> = ComponentType>;
diff --git a/plugins/scaffolder-react/src/extensions/types.ts b/plugins/scaffolder-react/src/extensions/types.ts
index 5d560a20bc..b77dc39c73 100644
--- a/plugins/scaffolder-react/src/extensions/types.ts
+++ b/plugins/scaffolder-react/src/extensions/types.ts
@@ -14,19 +14,23 @@
* limitations under the License.
*/
import { ApiHolder } from '@backstage/core-plugin-api';
-import { FieldValidation, FieldProps } from '@rjsf/core';
+import { PropsWithChildren } from 'react';
+import { JsonObject } from '@backstage/types';
import { JSONSchema7 } from 'json-schema';
+import { UiSchema, UIOptionsType, FieldValidation } from '@rjsf/utils';
+import { ScaffolderRJSFFieldProps } from './rjsf';
/**
- * Field validation type for Custom Field Extensions.
+ * Type for Field Extension Props for RJSF v5
*
* @public
*/
-export type CustomFieldValidator = (
- data: TFieldReturnValue,
- field: FieldValidation,
- context: { apiHolder: ApiHolder },
-) => void | Promise;
+export interface FieldExtensionComponentProps<
+ TFieldReturnValue,
+ TUiOptions = {},
+> extends PropsWithChildren> {
+ uiSchema: FieldExtensionUiSchema;
+}
/**
* Type for the Custom Field Extension schema.
@@ -38,6 +42,32 @@ export type CustomFieldExtensionSchema = {
uiOptions?: JSONSchema7;
};
+/**
+ * Type for Field Extension UiSchema
+ *
+ * @public
+ */
+export interface FieldExtensionUiSchema
+ extends UiSchema {
+ 'ui:options'?: TUiOptions & UIOptionsType;
+}
+
+/**
+ * Field validation type for Custom Field Extensions.
+ *
+ * @public
+ */
+export type CustomFieldValidator = (
+ data: TFieldReturnValue,
+ field: FieldValidation,
+ context: {
+ apiHolder: ApiHolder;
+ formData: JsonObject;
+ schema: JsonObject;
+ uiSchema?: FieldExtensionUiSchema;
+ },
+) => void | Promise;
+
/**
* Type for the Custom Field Extension with the
* name and components and validation function.
@@ -46,27 +76,12 @@ export type CustomFieldExtensionSchema = {
*/
export type FieldExtensionOptions<
TFieldReturnValue = unknown,
- TInputProps = unknown,
+ TUiOptions = unknown,
> = {
name: string;
component: (
- props: FieldExtensionComponentProps,
+ props: FieldExtensionComponentProps,
) => JSX.Element | null;
- validation?: CustomFieldValidator;
+ validation?: CustomFieldValidator;
schema?: CustomFieldExtensionSchema;
};
-
-/**
- * Type for field extensions and being able to type
- * incoming props easier.
- *
- * @public
- */
-export interface FieldExtensionComponentProps<
- TFieldReturnValue,
- TUiOptions = unknown,
-> extends FieldProps {
- uiSchema: FieldProps['uiSchema'] & {
- 'ui:options'?: TUiOptions;
- };
-}
diff --git a/plugins/scaffolder-react/src/index.ts b/plugins/scaffolder-react/src/index.ts
index 1b20c19414..70560cc694 100644
--- a/plugins/scaffolder-react/src/index.ts
+++ b/plugins/scaffolder-react/src/index.ts
@@ -15,6 +15,7 @@
*/
export * from './extensions';
+export * from './components';
export * from './types';
export * from './secrets';
export * from './api';
diff --git a/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts
index 6b2ae1b33b..d950285a7d 100644
--- a/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts
+++ b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts
@@ -16,7 +16,7 @@
import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from './keys';
import { attachComponentData, Extension } from '@backstage/core-plugin-api';
-import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
+import type { FormProps as SchemaFormProps } from '@rjsf/core';
import React from 'react';
/**
diff --git a/plugins/scaffolder-react/src/next/extensions/index.tsx b/plugins/scaffolder-react/src/legacy/extensions/index.tsx
similarity index 74%
rename from plugins/scaffolder-react/src/next/extensions/index.tsx
rename to plugins/scaffolder-react/src/legacy/extensions/index.tsx
index 70751936c5..870d797fc4 100644
--- a/plugins/scaffolder-react/src/next/extensions/index.tsx
+++ b/plugins/scaffolder-react/src/legacy/extensions/index.tsx
@@ -15,13 +15,11 @@
*/
import {
- NextCustomFieldValidator,
- NextFieldExtensionOptions,
- NextFieldExtensionComponentProps,
- NextFieldExtensionUiSchema,
+ LegacyCustomFieldValidator,
+ LegacyFieldExtensionOptions,
+ LegacyFieldExtensionComponentProps,
} from './types';
import { Extension, attachComponentData } from '@backstage/core-plugin-api';
-import { UIOptionsType } from '@rjsf/utils';
import { FIELD_EXTENSION_KEY } from '../../extensions/keys';
import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react';
@@ -30,11 +28,11 @@ import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react';
* frontend form.
* @alpha
*/
-export function createNextScaffolderFieldExtension<
+export function createLegacyScaffolderFieldExtension<
TReturnValue = unknown,
- TInputProps extends UIOptionsType = {},
+ TInputProps = unknown,
>(
- options: NextFieldExtensionOptions,
+ options: LegacyFieldExtensionOptions,
): Extension> {
return {
expose() {
@@ -52,8 +50,7 @@ export function createNextScaffolderFieldExtension<
}
export type {
- NextCustomFieldValidator,
- NextFieldExtensionOptions,
- NextFieldExtensionComponentProps,
- NextFieldExtensionUiSchema,
+ LegacyCustomFieldValidator,
+ LegacyFieldExtensionOptions,
+ LegacyFieldExtensionComponentProps,
};
diff --git a/plugins/scaffolder-react/src/legacy/extensions/types.ts b/plugins/scaffolder-react/src/legacy/extensions/types.ts
new file mode 100644
index 0000000000..54c38ad2cd
--- /dev/null
+++ b/plugins/scaffolder-react/src/legacy/extensions/types.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ApiHolder } from '@backstage/core-plugin-api';
+import { FieldValidation } from '@rjsf/utils';
+import {
+ CustomFieldExtensionSchema,
+ ScaffolderRJSFFieldProps,
+} from '@backstage/plugin-scaffolder-react';
+
+/**
+ * Field validation type for Custom Field Extensions.
+ *
+ * @alpha
+ */
+export type LegacyCustomFieldValidator = (
+ data: TFieldReturnValue,
+ field: FieldValidation,
+ context: { apiHolder: ApiHolder },
+) => void | Promise;
+
+/**
+ * Type for the Custom Field Extension with the
+ * name and components and validation function.
+ *
+ * @alpha
+ */
+export type LegacyFieldExtensionOptions<
+ TFieldReturnValue = unknown,
+ TInputProps = unknown,
+> = {
+ name: string;
+ component: (
+ props: LegacyFieldExtensionComponentProps,
+ ) => JSX.Element | null;
+ validation?: LegacyCustomFieldValidator;
+ schema?: CustomFieldExtensionSchema;
+};
+
+/**
+ * Type for field extensions and being able to type
+ * incoming props easier.
+ *
+ * @alpha
+ */
+export interface LegacyFieldExtensionComponentProps<
+ TFieldReturnValue,
+ TUiOptions = unknown,
+> extends ScaffolderRJSFFieldProps {
+ uiSchema: ScaffolderRJSFFieldProps['uiSchema'] & {
+ 'ui:options'?: TUiOptions;
+ };
+}
diff --git a/plugins/scaffolder-react/src/legacy/index.ts b/plugins/scaffolder-react/src/legacy/index.ts
new file mode 100644
index 0000000000..c539a8ba60
--- /dev/null
+++ b/plugins/scaffolder-react/src/legacy/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './extensions';
diff --git a/plugins/scaffolder-react/src/next/components/Form/Form.tsx b/plugins/scaffolder-react/src/next/components/Form/Form.tsx
index 790c9027fe..85e75e2c0d 100644
--- a/plugins/scaffolder-react/src/next/components/Form/Form.tsx
+++ b/plugins/scaffolder-react/src/next/components/Form/Form.tsx
@@ -14,26 +14,47 @@
* limitations under the License.
*/
-import { FormProps, withTheme } from '@rjsf/core-v5';
+import { withTheme } from '@rjsf/core';
import React from 'react';
import { PropsWithChildren } from 'react';
import { FieldTemplate } from './FieldTemplate';
import { DescriptionFieldTemplate } from './DescriptionFieldTemplate';
+import { FieldProps } from '@rjsf/utils';
+import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react';
+import { Theme as MuiTheme } from '@rjsf/material-ui';
-// TODO(blam): We require here, as the types in this package depend on @rjsf/core explicitly
-// which is what we're using here as the default types, it needs to depend on @rjsf/core-v5 because
-// of the re-writing we're doing. Once we've migrated, we can import this the exact same as before.
-const WrappedForm = withTheme(require('@rjsf/material-ui-v5').Theme);
+const WrappedForm = withTheme(MuiTheme);
/**
* The Form component
* @alpha
*/
-export const Form = (props: PropsWithChildren) => {
+export const Form = (props: PropsWithChildren) => {
+ // This is where we unbreak the changes from RJSF, and make it work with our custom fields so we don't pass on this
+ // breaking change to our users. We will look more into a better API for this in scaffolderv2.
+ const wrappedFields = Object.fromEntries(
+ Object.entries(props.fields ?? {}).map(([key, Component]) => [
+ key,
+ (wrapperProps: FieldProps) => {
+ return (
+
+ );
+ },
+ ]),
+ );
+
const templates = {
FieldTemplate,
DescriptionFieldTemplate,
...props.templates,
};
- return ;
+
+ return (
+
+ );
};
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
index 6183f32a6c..24126152ed 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
@@ -20,7 +20,7 @@ import { renderInTestApp } from '@backstage/test-utils';
import { act, fireEvent } from '@testing-library/react';
import type { RJSFValidationError } from '@rjsf/utils';
import { JsonValue } from '@backstage/types';
-import { NextFieldExtensionComponentProps } from '../../extensions';
+import { FieldExtensionComponentProps } from '../../../extensions';
import { LayoutTemplate } from '../../../layouts';
describe('Stepper', () => {
@@ -115,7 +115,7 @@ describe('Stepper', () => {
it('should merge nested formData correctly in multiple steps', async () => {
const Repo = ({
onChange,
- }: NextFieldExtensionComponentProps<{ repository: string }, any>) => (
+ }: FieldExtensionComponentProps<{ repository: string }, any>) => (
{
const Owner = ({
onChange,
- }: NextFieldExtensionComponentProps<{ owner: string }, any>) => (
+ }: FieldExtensionComponentProps<{ owner: string }, any>) => (
{
manifest={manifest}
extensions={[]}
onCreate={jest.fn()}
- FormProps={{ transformErrors }}
+ formProps={{ transformErrors }}
/>,
);
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
index e15953bf1f..1e43eba770 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
@@ -23,10 +23,15 @@ import {
makeStyles,
LinearProgress,
} from '@material-ui/core';
-import { type IChangeEvent } from '@rjsf/core-v5';
+import { type IChangeEvent } from '@rjsf/core';
import { ErrorSchema } from '@rjsf/utils';
-import React, { useCallback, useMemo, useState, type ReactNode } from 'react';
-import { NextFieldExtensionOptions } from '../../extensions';
+import React, {
+ useCallback,
+ useMemo,
+ useState,
+ type ReactNode,
+ ComponentType,
+} from 'react';
import {
createAsyncValidators,
type FormValidation,
@@ -35,7 +40,6 @@ import { ReviewState, type ReviewStateProps } from '../ReviewState';
import { useTemplateSchema } from '../../hooks/useTemplateSchema';
import validator from '@rjsf/validator-ajv8';
import { useFormDataFromQuery } from '../../hooks';
-import { FormProps } from '../../types';
import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';
import { hasErrors } from './utils';
import * as FieldOverrides from './FieldOverrides';
@@ -43,7 +47,10 @@ import { Form } from '../Form';
import {
TemplateParameterSchema,
LayoutOptions,
+ FieldExtensionOptions,
+ FormProps,
} from '@backstage/plugin-scaffolder-react';
+import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
const useStyles = makeStyles(theme => ({
backButton: {
@@ -66,12 +73,13 @@ const useStyles = makeStyles(theme => ({
*/
export type StepperProps = {
manifest: TemplateParameterSchema;
- extensions: NextFieldExtensionOptions[];
+ extensions: FieldExtensionOptions[];
templateName?: string;
- FormProps?: FormProps;
+ formProps?: FormProps;
initialState?: Record;
onCreate: (values: Record) => Promise;
components?: {
+ ReviewStepComponent?: ComponentType;
ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;
createButtonText?: ReactNode;
reviewButtonText?: ReactNode;
@@ -87,6 +95,7 @@ export const Stepper = (stepperProps: StepperProps) => {
const { layouts = [], components = {}, ...props } = stepperProps;
const {
ReviewStateComponent = ReviewState,
+ ReviewStepComponent,
createButtonText = 'Create',
reviewButtonText = 'Review',
} = components;
@@ -128,6 +137,13 @@ export const Stepper = (stepperProps: StepperProps) => {
[setFormState],
);
+ const handleCreate = useCallback(() => {
+ props.onCreate(formState);
+ const name =
+ typeof formState.name === 'string' ? formState.name : undefined;
+ analytics.captureEvent('create', name ?? props.templateName ?? 'unknown');
+ }, [props, formState, analytics]);
+
const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });
const handleNext = async ({
@@ -171,6 +187,7 @@ export const Stepper = (stepperProps: StepperProps) => {
+ {/* eslint-disable-next-line no-nested-ternary */}
{activeStep < steps.length ? (
+ ) : // TODO: potentially move away from this pattern, deprecate?
+ ReviewStepComponent ? (
+ {}}
+ steps={steps}
+ handleCreate={handleCreate}
+ />
) : (
<>
@@ -217,17 +244,7 @@ export const Stepper = (stepperProps: StepperProps) => {
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.test.ts b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.test.ts
index 3633410769..f4dab376bc 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.test.ts
+++ b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.test.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { JsonObject } from '@backstage/types';
-import { NextCustomFieldValidator } from '../../extensions';
+import { CustomFieldValidator } from '../../../extensions';
import { createAsyncValidators } from './createAsyncValidators';
describe('createAsyncValidators', () => {
@@ -158,16 +158,13 @@ describe('createAsyncValidators', () => {
},
};
- const NameField: NextCustomFieldValidator = (
- value,
- { addError },
- ) => {
+ const NameField: CustomFieldValidator = (value, { addError }) => {
if (!value) {
addError('something is broken here!');
}
};
- const AddressField: NextCustomFieldValidator<{
+ const AddressField: CustomFieldValidator<{
street?: string;
postcode?: string;
}> = (value, { addError }) => {
@@ -183,8 +180,8 @@ describe('createAsyncValidators', () => {
const validate = createAsyncValidators(
schema,
{
- NameField: NameField as NextCustomFieldValidator,
- AddressField: AddressField as NextCustomFieldValidator,
+ NameField: NameField as CustomFieldValidator,
+ AddressField: AddressField as CustomFieldValidator,
},
{
apiHolder: { get: jest.fn() },
@@ -298,7 +295,7 @@ describe('createAsyncValidators', () => {
},
};
- const AddressField: NextCustomFieldValidator<{
+ const AddressField: CustomFieldValidator<{
street?: string;
postcode?: string;
}> = (value, { addError }) => {
@@ -311,18 +308,15 @@ describe('createAsyncValidators', () => {
}
};
- const NameField: NextCustomFieldValidator = (
- value,
- { addError },
- ) => {
+ const NameField: CustomFieldValidator = (value, { addError }) => {
if (!value) {
addError('something is broken here!');
}
};
const validators = {
- AddressField: AddressField as NextCustomFieldValidator,
- NameField: NameField as NextCustomFieldValidator,
+ AddressField: AddressField as CustomFieldValidator,
+ NameField: NameField as CustomFieldValidator,
};
const validate = createAsyncValidators(schema, validators, {
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts
index ceef701255..f50f44d8f5 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts
+++ b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts
@@ -19,22 +19,23 @@ import type { JsonObject, JsonValue } from '@backstage/types';
import { ApiHolder } from '@backstage/core-plugin-api';
import { Draft07 as JSONSchema } from 'json-schema-library';
import { createFieldValidation, extractSchemaFromStep } from '../../lib';
-import { NextCustomFieldValidator } from '../../extensions';
+import {
+ CustomFieldValidator,
+ FieldExtensionUiSchema,
+} from '@backstage/plugin-scaffolder-react';
import { isObject } from './utils';
-import { NextFieldExtensionUiSchema } from '../../extensions/types';
-/**
- * @internal
- */
+/** @alpha */
export type FormValidation = {
[name: string]: FieldValidation | FormValidation;
};
+/** @alpha */
export const createAsyncValidators = (
rootSchema: JsonObject,
validators: Record<
string,
- undefined | NextCustomFieldValidator
+ undefined | CustomFieldValidator
>,
context: {
apiHolder: ApiHolder;
@@ -53,7 +54,7 @@ export const createAsyncValidators = (
key: string,
value: JsonValue | undefined,
schema: JsonObject,
- uiSchema: NextFieldExtensionUiSchema,
+ uiSchema: FieldExtensionUiSchema,
) => {
const validator = validators[validatorName];
if (validator) {
@@ -82,7 +83,7 @@ export const createAsyncValidators = (
const doValidateItem = async (
propValue: JsonObject,
itemSchema: JsonObject,
- itemUiSchema: NextFieldExtensionUiSchema,
+ itemUiSchema: FieldExtensionUiSchema,
) => {
await validateForm(
propValue['ui:field'] as string,
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/index.ts b/plugins/scaffolder-react/src/next/components/Stepper/index.ts
index daa47f078e..5f33c2ff78 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/index.ts
+++ b/plugins/scaffolder-react/src/next/components/Stepper/index.ts
@@ -14,3 +14,7 @@
* limitations under the License.
*/
export { Stepper, type StepperProps } from './Stepper';
+export {
+ createAsyncValidators,
+ type FormValidation,
+} from './createAsyncValidators';
diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx
index 894c6ea4d0..66c9d01ffd 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.test.tsx
@@ -18,7 +18,7 @@ jest.mock('@backstage/plugin-catalog-react', () => ({
useEntityList: jest.fn(),
}));
-jest.mock('@backstage/plugin-scaffolder-react/alpha', () => ({
+jest.mock('../TemplateGroup/TemplateGroup', () => ({
TemplateGroup: jest.fn(() => null),
}));
@@ -27,7 +27,7 @@ import { useEntityList } from '@backstage/plugin-catalog-react';
import { TemplateGroups } from './TemplateGroups';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { errorApiRef } from '@backstage/core-plugin-api';
-import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha';
+import { TemplateGroup } from '../TemplateGroup/TemplateGroup';
describe('TemplateGroups', () => {
beforeEach(() => jest.clearAllMocks());
diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx
index f0f06b3410..800ec67a16 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx
+++ b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx
@@ -23,15 +23,8 @@ import {
import { Progress, Link } from '@backstage/core-components';
import { Typography } from '@material-ui/core';
import { errorApiRef, IconComponent, useApi } from '@backstage/core-plugin-api';
-import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha';
-
-/**
- * @alpha
- */
-export type TemplateGroupFilter = {
- title?: React.ReactNode;
- filter: (entity: TemplateEntityV1beta3) => boolean;
-};
+import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';
+import { TemplateGroup } from '../TemplateGroup/TemplateGroup';
/**
* @alpha
diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
index 228f5cefd9..e7c56378a7 100644
--- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
+++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx
@@ -27,6 +27,7 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api';
import { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema';
import { Stepper, type StepperProps } from '../Stepper/Stepper';
import { SecretsContextProvider } from '../../../secrets/SecretsContext';
+import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
const useStyles = makeStyles(() => ({
markdown: {
@@ -48,11 +49,14 @@ export type WorkflowProps = {
description?: string;
namespace: string;
templateName: string;
+ components?: {
+ ReviewStepComponent?: React.ComponentType;
+ };
onError(error: Error | undefined): JSX.Element | null;
} & Pick<
StepperProps,
| 'extensions'
- | 'FormProps'
+ | 'formProps'
| 'components'
| 'onCreate'
| 'initialState'
diff --git a/plugins/scaffolder-react/src/next/extensions/types.ts b/plugins/scaffolder-react/src/next/extensions/types.ts
deleted file mode 100644
index 803dcb2be6..0000000000
--- a/plugins/scaffolder-react/src/next/extensions/types.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { ApiHolder } from '@backstage/core-plugin-api';
-import {
- UIOptionsType,
- FieldProps as FieldPropsV5,
- UiSchema as UiSchemaV5,
- FieldValidation as FieldValidationV5,
-} from '@rjsf/utils';
-import { PropsWithChildren } from 'react';
-import { JsonObject } from '@backstage/types';
-import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react';
-
-/**
- * Type for Field Extension Props for RJSF v5
- *
- * @alpha
- */
-export interface NextFieldExtensionComponentProps<
- TFieldReturnValue,
- TUiOptions = {},
-> extends PropsWithChildren> {
- uiSchema?: NextFieldExtensionUiSchema;
-}
-
-/**
- * Type for Field Extension UiSchema
- *
- * @alpha
- */
-export interface NextFieldExtensionUiSchema
- extends UiSchemaV5 {
- 'ui:options'?: TUiOptions & UIOptionsType;
-}
-
-/**
- * Field validation type for Custom Field Extensions.
- *
- * @alpha
- */
-export type NextCustomFieldValidator<
- TFieldReturnValue,
- TUiOptions = unknown,
-> = (
- data: TFieldReturnValue,
- field: FieldValidationV5,
- context: {
- apiHolder: ApiHolder;
- formData: JsonObject;
- schema: JsonObject;
- uiSchema?: NextFieldExtensionUiSchema;
- },
-) => void | Promise;
-
-/**
- * Type for the Custom Field Extension with the
- * name and components and validation function.
- *
- * @alpha
- */
-export type NextFieldExtensionOptions<
- TFieldReturnValue = unknown,
- TUiOptions = unknown,
-> = {
- name: string;
- component: (
- props: NextFieldExtensionComponentProps,
- ) => JSX.Element | null;
- validation?: NextCustomFieldValidator;
- schema?: CustomFieldExtensionSchema;
-};
diff --git a/plugins/scaffolder-react/src/next/index.ts b/plugins/scaffolder-react/src/next/index.ts
index a18649f506..f13bb76d7a 100644
--- a/plugins/scaffolder-react/src/next/index.ts
+++ b/plugins/scaffolder-react/src/next/index.ts
@@ -14,7 +14,5 @@
* limitations under the License.
*/
export * from './components';
-export * from './extensions';
-export * from './types';
export * from './lib';
export * from './hooks';
diff --git a/plugins/scaffolder-react/src/next/types.ts b/plugins/scaffolder-react/src/next/types.ts
deleted file mode 100644
index 192fdf4146..0000000000
--- a/plugins/scaffolder-react/src/next/types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
-
-// TODO(Rugvip): The FormProps type is actually supposed to be alpha, but since we want to
-// refer to it from @backstage/plugin-scaffolder, it needs to be public for now.
-// Once we support internal alpha re-exports this should be switched to an alpha export.
-
-/**
- * Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderpage`
- *
- * @alpha
- */
-export type FormProps = Pick<
- SchemaFormProps,
- 'transformErrors' | 'noHtml5Validate'
->;
diff --git a/plugins/scaffolder/alpha-api-report.md b/plugins/scaffolder/alpha-api-report.md
index 8cacf6105e..55d14bff75 100644
--- a/plugins/scaffolder/alpha-api-report.md
+++ b/plugins/scaffolder/alpha-api-report.md
@@ -5,50 +5,58 @@
```ts
///
-import { FormProps as FormProps_2 } from '@backstage/plugin-scaffolder-react/alpha';
-import type { FormProps as FormProps_3 } from '@rjsf/core-v5';
+import { ComponentType } from 'react';
+import { Entity } from '@backstage/catalog-model';
+import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
+import type { FormProps as FormProps_2 } from '@rjsf/core';
+import { FormProps as FormProps_3 } from '@backstage/plugin-scaffolder-react';
import { JSX as JSX_2 } from 'react';
import { LayoutOptions } from '@backstage/plugin-scaffolder-react';
-import { NextFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
import { PropsWithChildren } from 'react';
import { default as React_2 } from 'react';
-import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
+import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react/alpha';
+import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';
// @alpha @deprecated
export type FormProps = Pick<
- FormProps_3,
+ FormProps_2,
'transformErrors' | 'noHtml5Validate'
>;
// @alpha
-export type NextRouterProps = {
+export const LegacyRouter: (props: LegacyRouterProps) => React_2.JSX.Element;
+
+// @alpha
+export type LegacyRouterProps = {
components?: {
- TemplateCardComponent?: React_2.ComponentType<{
- template: TemplateEntityV1beta3;
- }>;
- TaskPageComponent?: React_2.ComponentType>;
- TemplateOutputsComponent?: React_2.ComponentType<{
- output?: ScaffolderTaskOutput;
- }>;
- TemplateListPageComponent?: React_2.ComponentType;
- TemplateWizardPageComponent?: React_2.ComponentType;
+ ReviewStepComponent?: ComponentType;
+ TemplateCardComponent?:
+ | ComponentType<{
+ template: TemplateEntityV1beta3;
+ }>
+ | undefined;
+ TaskPageComponent?: ComponentType>;
};
- groups?: TemplateGroupFilter[];
+ groups?: Array<{
+ title?: React_2.ReactNode;
+ filter: (entity: Entity) => boolean;
+ }>;
templateFilter?: (entity: TemplateEntityV1beta3) => boolean;
- FormProps?: FormProps_2;
+ defaultPreviewTemplate?: string;
+ headerOptions?: {
+ pageTitleOverride?: string;
+ title?: string;
+ subtitle?: string;
+ };
contextMenu?: {
editor?: boolean;
actions?: boolean;
- tasks?: boolean;
};
};
// @alpha
-export const NextScaffolderPage: (
- props: PropsWithChildren,
-) => JSX_2.Element;
+export const LegacyScaffolderPage: (props: LegacyRouterProps) => JSX_2.Element;
// @alpha (undocumented)
export type TemplateListPageProps = {
@@ -66,9 +74,12 @@ export type TemplateListPageProps = {
// @alpha (undocumented)
export type TemplateWizardPageProps = {
- customFieldExtensions: NextFieldExtensionOptions[];
+ customFieldExtensions: FieldExtensionOptions[];
+ components?: {
+ ReviewStepComponent?: React_2.ComponentType;
+ };
layouts?: LayoutOptions[];
- FormProps?: FormProps_2;
+ formProps?: FormProps_3;
};
// (No @packageDocumentation comment for this package)
diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md
index ddda40d95f..6f8479990b 100644
--- a/plugins/scaffolder/api-report.md
+++ b/plugins/scaffolder/api-report.md
@@ -14,15 +14,14 @@ import { createScaffolderLayout as createScaffolderLayout_2 } from '@backstage/p
import { CustomFieldExtensionSchema as CustomFieldExtensionSchema_2 } from '@backstage/plugin-scaffolder-react';
import { CustomFieldValidator as CustomFieldValidator_2 } from '@backstage/plugin-scaffolder-react';
import { DiscoveryApi } from '@backstage/core-plugin-api';
-import { Entity } from '@backstage/catalog-model';
import { ExternalRouteRef } from '@backstage/core-plugin-api';
import { FetchApi } from '@backstage/core-plugin-api';
import { FieldExtensionComponent as FieldExtensionComponent_2 } from '@backstage/plugin-scaffolder-react';
import { FieldExtensionComponentProps as FieldExtensionComponentProps_2 } from '@backstage/plugin-scaffolder-react';
import { FieldExtensionOptions as FieldExtensionOptions_2 } from '@backstage/plugin-scaffolder-react';
-import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/utils';
+import { FormProps } from '@backstage/plugin-scaffolder-react';
import { IdentityApi } from '@backstage/core-plugin-api';
-import { JsonObject } from '@backstage/types';
import { JSX as JSX_2 } from 'react';
import { LayoutOptions as LayoutOptions_2 } from '@backstage/plugin-scaffolder-react';
import { LayoutTemplate as LayoutTemplate_2 } from '@backstage/plugin-scaffolder-react';
@@ -33,6 +32,7 @@ import { PathParams } from '@backstage/core-plugin-api';
import { PropsWithChildren } from 'react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
+import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
import { RouteRef } from '@backstage/core-plugin-api';
import { ScaffolderApi as ScaffolderApi_2 } from '@backstage/plugin-scaffolder-react';
import { ScaffolderDryRunOptions as ScaffolderDryRunOptions_2 } from '@backstage/plugin-scaffolder-react';
@@ -50,8 +50,10 @@ import { ScaffolderUseTemplateSecrets as ScaffolderUseTemplateSecrets_2 } from '
import { ScmIntegrationRegistry } from '@backstage/integration';
import { SubRouteRef } from '@backstage/core-plugin-api';
import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';
+import { TemplateListPageProps } from '@backstage/plugin-scaffolder/alpha';
import { TemplateParameterSchema as TemplateParameterSchema_2 } from '@backstage/plugin-scaffolder-react';
-import { UiSchema } from '@rjsf/utils';
+import { TemplateWizardPageProps } from '@backstage/plugin-scaffolder/alpha';
import { z } from 'zod';
// @public @deprecated (undocumented)
@@ -419,19 +421,7 @@ export const RepoUrlPickerFieldSchema: FieldSchema<
export type RepoUrlPickerUiOptions =
typeof RepoUrlPickerFieldSchema.uiOptionsType;
-// @public
-export type ReviewStepProps = {
- disableButtons: boolean;
- formData: JsonObject;
- handleBack: () => void;
- handleReset: () => void;
- handleCreate: () => void;
- steps: {
- uiSchema: UiSchema;
- mergedSchema: JsonObject;
- schema: JsonObject;
- }[];
-};
+export { ReviewStepProps };
// @public @deprecated (undocumented)
export const rootRouteRef: RouteRef;
@@ -439,28 +429,30 @@ export const rootRouteRef: RouteRef;
// @public
export type RouterProps = {
components?: {
- ReviewStepComponent?: ComponentType;
- TemplateCardComponent?:
- | ComponentType<{
- template: TemplateEntityV1beta3;
- }>
- | undefined;
- TaskPageComponent?: ComponentType>;
+ ReviewStepComponent?: React_2.ComponentType;
+ TemplateCardComponent?: React_2.ComponentType<{
+ template: TemplateEntityV1beta3;
+ }>;
+ TaskPageComponent?: React_2.ComponentType>;
+ EXPERIMENTAL_TemplateOutputsComponent?: React_2.ComponentType<{
+ output?: ScaffolderTaskOutput_2;
+ }>;
+ EXPERIMENTAL_TemplateListPageComponent?: React_2.ComponentType;
+ EXPERIMENTAL_TemplateWizardPageComponent?: React_2.ComponentType;
};
- groups?: Array<{
- title?: React_2.ReactNode;
- filter: (entity: Entity) => boolean;
- }>;
+ groups?: TemplateGroupFilter[];
templateFilter?: (entity: TemplateEntityV1beta3) => boolean;
- defaultPreviewTemplate?: string;
headerOptions?: {
pageTitleOverride?: string;
title?: string;
subtitle?: string;
};
+ defaultPreviewTemplate?: string;
+ formProps?: FormProps;
contextMenu?: {
editor?: boolean;
actions?: boolean;
+ tasks?: boolean;
};
};
@@ -537,7 +529,9 @@ export const ScaffolderLayouts: ComponentType<{
export type ScaffolderOutputlink = ScaffolderOutputLink;
// @public
-export const ScaffolderPage: (props: RouterProps) => JSX_2.Element;
+export const ScaffolderPage: (
+ props: PropsWithChildren,
+) => JSX_2.Element;
// @public
export const scaffolderPlugin: BackstagePlugin<
@@ -585,10 +579,14 @@ export type ScaffolderTaskStatus = ScaffolderTaskStatus_2;
// @public @deprecated (undocumented)
export type ScaffolderUseTemplateSecrets = ScaffolderUseTemplateSecrets_2;
-// @public
-export const TaskPage: (props: TaskPageProps) => React_2.JSX.Element;
+// @public (undocumented)
+export const TaskPage: (props: {
+ TemplateOutputsComponent?: React_2.ComponentType<{
+ output?: ScaffolderTaskOutput_2;
+ }>;
+}) => React_2.JSX.Element;
-// @public
+// @public @deprecated
export type TaskPageProps = {
loadingText?: string;
};
diff --git a/plugins/scaffolder/dev/index.tsx b/plugins/scaffolder/dev/index.tsx
index 68c59eec2d..b683345ff5 100644
--- a/plugins/scaffolder/dev/index.tsx
+++ b/plugins/scaffolder/dev/index.tsx
@@ -24,7 +24,7 @@ import {
} from '@backstage/plugin-catalog-react';
import React from 'react';
import { scaffolderApiRef, ScaffolderClient } from '../src';
-import { NextScaffolderPage, ScaffolderPage } from '../src/plugin';
+import { ScaffolderPage, LegacyScaffolderPage } from '../src/plugin';
import {
discoveryApiRef,
fetchApiRef,
@@ -69,9 +69,9 @@ createDevApp()
element: ,
})
.addPage({
- path: '/next-create',
+ path: '/legacy-create',
title: 'Create (next)',
- element: ,
+ element: ,
})
.addPage({
path: '/create-groups',
@@ -92,10 +92,10 @@ createDevApp()
),
})
.addPage({
- path: '/next-create-groups',
+ path: '/legacy-create-groups',
title: 'Groups (next)',
element: (
- e.metadata.tags?.includes('techdocs') || false,
diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json
index 5cfc038e77..f6ca5b5003 100644
--- a/plugins/scaffolder/package.json
+++ b/plugins/scaffolder/package.json
@@ -68,8 +68,8 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.61",
"@react-hookz/web": "^20.0.0",
- "@rjsf/core": "^3.2.1",
- "@rjsf/material-ui": "^3.2.1",
+ "@rjsf/core": "5.13.0",
+ "@rjsf/material-ui": "5.13.0",
"@rjsf/utils": "5.13.0",
"@rjsf/validator-ajv8": "5.13.0",
"@types/react": "^16.13.1 || ^17.0.0",
diff --git a/plugins/scaffolder/src/alpha.ts b/plugins/scaffolder/src/alpha.ts
index d2bd762190..92ec945de4 100644
--- a/plugins/scaffolder/src/alpha.ts
+++ b/plugins/scaffolder/src/alpha.ts
@@ -14,10 +14,10 @@
* limitations under the License.
*/
-export { NextScaffolderPage } from './plugin';
export {
- type NextRouterProps,
type FormProps,
type TemplateListPageProps,
type TemplateWizardPageProps,
} from './next';
+
+export * from './legacy';
diff --git a/plugins/scaffolder/src/next/OngoingTask/ContextMenu.tsx b/plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx
similarity index 100%
rename from plugins/scaffolder/src/next/OngoingTask/ContextMenu.tsx
rename to plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx
diff --git a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.test.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/next/OngoingTask/OngoingTask.test.tsx
rename to plugins/scaffolder/src/components/OngoingTask/OngoingTask.test.tsx
diff --git a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx
similarity index 99%
rename from plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx
rename to plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx
index b483cd27cb..cc988599a0 100644
--- a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx
+++ b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx
@@ -51,6 +51,9 @@ const useStyles = makeStyles(theme => ({
},
}));
+/**
+ * @public
+ */
export const OngoingTask = (props: {
TemplateOutputsComponent?: React.ComponentType<{
output?: ScaffolderTaskOutput;
diff --git a/plugins/scaffolder/src/next/OngoingTask/index.ts b/plugins/scaffolder/src/components/OngoingTask/index.ts
similarity index 100%
rename from plugins/scaffolder/src/next/OngoingTask/index.ts
rename to plugins/scaffolder/src/components/OngoingTask/index.ts
diff --git a/plugins/scaffolder/src/next/Router/Router.test.tsx b/plugins/scaffolder/src/components/Router/Router.test.tsx
similarity index 91%
rename from plugins/scaffolder/src/next/Router/Router.test.tsx
rename to plugins/scaffolder/src/components/Router/Router.test.tsx
index 3d52dd0dd0..8c301b55fb 100644
--- a/plugins/scaffolder/src/next/Router/Router.test.tsx
+++ b/plugins/scaffolder/src/components/Router/Router.test.tsx
@@ -14,8 +14,6 @@
* limitations under the License.
*/
import React from 'react';
-import { TemplateListPage } from '../TemplateListPage';
-import { TemplateWizardPage } from '../TemplateWizardPage';
import { Router } from './Router';
import { renderInTestApp } from '@backstage/test-utils';
import {
@@ -27,13 +25,11 @@ import {
createScaffolderLayout,
ScaffolderLayouts,
} from '@backstage/plugin-scaffolder-react';
+import { TemplateListPage, TemplateWizardPage } from '../../next';
-jest.mock('../TemplateListPage', () => ({
- TemplateListPage: jest.fn(() => null),
-}));
-
-jest.mock('../TemplateWizardPage', () => ({
+jest.mock('../../next', () => ({
TemplateWizardPage: jest.fn(() => null),
+ TemplateListPage: jest.fn(() => null),
}));
describe('Router', () => {
@@ -52,7 +48,7 @@ describe('Router', () => {
const { getByText } = await renderInTestApp(
<>foobar,
+ EXPERIMENTAL_TemplateListPageComponent: () => <>foobar,
}}
/>,
{
@@ -77,7 +73,7 @@ describe('Router', () => {
const { getByText } = await renderInTestApp(
<>foobar,
+ EXPERIMENTAL_TemplateWizardPageComponent: () => <>foobar,
}}
/>,
{
@@ -93,7 +89,7 @@ describe('Router', () => {
await renderInTestApp(
{
const mock = TemplateWizardPage as jest.Mock;
- const [{ FormProps }] = mock.mock.calls[0];
+ const [{ formProps }] = mock.mock.calls[0];
- expect(FormProps).toEqual({
+ expect(formProps).toEqual({
transformErrors: transformErrorsMock,
noHtml5Validate: true,
});
diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/components/Router/Router.tsx
similarity index 74%
rename from plugins/scaffolder/src/next/Router/Router.tsx
rename to plugins/scaffolder/src/components/Router/Router.tsx
index 2061cd1243..dede51d676 100644
--- a/plugins/scaffolder/src/next/Router/Router.tsx
+++ b/plugins/scaffolder/src/components/Router/Router.tsx
@@ -15,16 +15,13 @@
*/
import React, { PropsWithChildren } from 'react';
import { Routes, Route, useOutlet } from 'react-router-dom';
-import { TemplateListPage, TemplateListPageProps } from '../TemplateListPage';
+
import {
- TemplateWizardPage,
- TemplateWizardPageProps,
-} from '../TemplateWizardPage';
-import {
- NextFieldExtensionOptions,
+ FieldExtensionOptions,
FormProps,
+ ReviewStepProps,
TemplateGroupFilter,
-} from '@backstage/plugin-scaffolder-react/alpha';
+} from '@backstage/plugin-scaffolder-react';
import {
ScaffolderTaskOutput,
SecretsContextProvider,
@@ -43,32 +40,45 @@ import {
selectedTemplateRouteRef,
} from '../../routes';
import { ErrorPage } from '@backstage/core-components';
-import { OngoingTask } from '../OngoingTask';
+
import { ActionsPage } from '../../components/ActionsPage';
import { ListTasksPage } from '../../components/ListTasksPage';
-import { TemplateEditorPage } from '../TemplateEditorPage';
+
+import {
+ TemplateListPageProps,
+ TemplateWizardPageProps,
+} from '@backstage/plugin-scaffolder/alpha';
+import { TemplateListPage, TemplateWizardPage } from '../../next';
+import { OngoingTask } from '../OngoingTask';
+import { TemplateEditorPage } from '../../next/TemplateEditorPage';
/**
* The Props for the Scaffolder Router
*
- * @alpha
+ * @public
*/
-export type NextRouterProps = {
+export type RouterProps = {
components?: {
+ ReviewStepComponent?: React.ComponentType;
TemplateCardComponent?: React.ComponentType<{
template: TemplateEntityV1beta3;
}>;
TaskPageComponent?: React.ComponentType>;
- TemplateOutputsComponent?: React.ComponentType<{
+ EXPERIMENTAL_TemplateOutputsComponent?: React.ComponentType<{
output?: ScaffolderTaskOutput;
}>;
- TemplateListPageComponent?: React.ComponentType;
- TemplateWizardPageComponent?: React.ComponentType;
+ EXPERIMENTAL_TemplateListPageComponent?: React.ComponentType;
+ EXPERIMENTAL_TemplateWizardPageComponent?: React.ComponentType;
};
groups?: TemplateGroupFilter[];
templateFilter?: (entity: TemplateEntityV1beta3) => boolean;
- // todo(blam): rename this to formProps
- FormProps?: FormProps;
+ headerOptions?: {
+ pageTitleOverride?: string;
+ title?: string;
+ subtitle?: string;
+ };
+ defaultPreviewTemplate?: string;
+ formProps?: FormProps;
contextMenu?: {
/** Whether to show a link to the template editor */
editor?: boolean;
@@ -82,21 +92,24 @@ export type NextRouterProps = {
/**
* The Scaffolder Router
*
- * @alpha
+ * @public
*/
-export const Router = (props: PropsWithChildren) => {
+export const Router = (props: PropsWithChildren) => {
const {
components: {
TemplateCardComponent,
- TemplateOutputsComponent,
TaskPageComponent = OngoingTask,
- TemplateListPageComponent = TemplateListPage,
- TemplateWizardPageComponent = TemplateWizardPage,
+ ReviewStepComponent,
+ EXPERIMENTAL_TemplateOutputsComponent: TemplateOutputsComponent,
+ EXPERIMENTAL_TemplateListPageComponent:
+ TemplateListPageComponent = TemplateListPage,
+ EXPERIMENTAL_TemplateWizardPageComponent:
+ TemplateWizardPageComponent = TemplateWizardPage,
} = {},
} = props;
const outlet = useOutlet() || props.children;
const customFieldExtensions =
- useCustomFieldExtensions(outlet);
+ useCustomFieldExtensions(outlet);
const fieldExtensions = [
...customFieldExtensions,
@@ -106,7 +119,7 @@ export const Router = (props: PropsWithChildren) => {
customFieldExtension => customFieldExtension.name === name,
),
),
- ] as NextFieldExtensionOptions[];
+ ] as FieldExtensionOptions[];
const customLayouts = useCustomLayouts(outlet);
@@ -130,7 +143,8 @@ export const Router = (props: PropsWithChildren) => {
}
diff --git a/plugins/scaffolder/src/next/Router/index.ts b/plugins/scaffolder/src/components/Router/index.ts
similarity index 87%
rename from plugins/scaffolder/src/next/Router/index.ts
rename to plugins/scaffolder/src/components/Router/index.ts
index dac1db7b3a..afe51fbdc9 100644
--- a/plugins/scaffolder/src/next/Router/index.ts
+++ b/plugins/scaffolder/src/components/Router/index.ts
@@ -13,5 +13,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-export { Router } from './Router';
-export type { NextRouterProps } from './Router';
+export { Router, type RouterProps } from './Router';
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.test.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.test.tsx
deleted file mode 100644
index bf9cd8c464..0000000000
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.test.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { TemplateEditorPage } from './TemplateEditorPage';
-
-describe('TemplateEditorPage', () => {
- it('renders without exploding', async () => {
- await renderInTestApp();
-
- expect(screen.getByText('Load Template Directory')).toBeInTheDocument();
- expect(screen.getByText('Edit Template Form')).toBeInTheDocument();
- });
-
- it('template directory loading should not be supported in Jest', async () => {
- await renderInTestApp();
-
- expect(
- screen.getByRole('button', { name: /Load Template Directory/ }),
- ).toBeDisabled();
- });
-
- it('should be able to continue to form preview', async () => {
- await renderInTestApp(
-
-
- ,
- );
-
- await userEvent.click(screen.getByText('Edit Template Form'));
-
- expect(screen.getByLabelText('Load Existing Template')).toBeInTheDocument();
- });
-});
diff --git a/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.test.ts b/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.test.ts
index 290650387e..7201c9c4b3 100644
--- a/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.test.ts
+++ b/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.test.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/utils';
import { KubernetesValidatorFunctions } from '@backstage/catalog-model';
import { entityNamePickerValidation } from './validation';
diff --git a/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.ts b/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.ts
index d116bef228..9302e9abc1 100644
--- a/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.ts
+++ b/plugins/scaffolder/src/components/fields/EntityNamePicker/validation.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/utils';
import { KubernetesValidatorFunctions } from '@backstage/catalog-model';
export const entityNamePickerValidation = (
diff --git a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx
index cbc587a732..4329b2208b 100644
--- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx
@@ -18,11 +18,12 @@ import { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
import { Entity } from '@backstage/catalog-model';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { FieldProps } from '@rjsf/core';
+
import { fireEvent, screen } from '@testing-library/react';
import React from 'react';
import { EntityPicker } from './EntityPicker';
import { EntityPickerProps } from './schema';
+import { ScaffolderRJSFFieldProps as FieldProps } from '@backstage/plugin-scaffolder-react';
const makeEntity = (kind: string, namespace: string, name: string): Entity => ({
apiVersion: 'scaffolder.backstage.io/v1beta3',
@@ -39,7 +40,7 @@ describe('', () => {
const rawErrors: string[] = [];
const formData = undefined;
- let props: FieldProps;
+ let props: FieldProps;
const catalogApi: jest.Mocked = {
getLocationById: jest.fn(),
@@ -76,7 +77,7 @@ describe('', () => {
uiSchema,
rawErrors,
formData,
- } as unknown as FieldProps;
+ } as unknown as FieldProps;
catalogApi.getEntities.mockResolvedValue({ items: entities });
});
diff --git a/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx b/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx
index 099d6fa6ed..521c4029b3 100644
--- a/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx
@@ -17,7 +17,6 @@
import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { CatalogApi } from '@backstage/catalog-client';
-import { FieldProps } from '@rjsf/core';
import { MyGroupsPicker } from './MyGroupsPicker';
import { TestApiProvider } from '@backstage/test-utils';
import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -29,6 +28,7 @@ import {
identityApiRef,
} from '@backstage/core-plugin-api';
import userEvent from '@testing-library/user-event';
+import { ScaffolderRJSFFieldProps as FieldProps } from '@backstage/plugin-scaffolder-react';
// Create a mock IdentityApi
const mockIdentityApi: IdentityApi = {
@@ -109,7 +109,7 @@ describe('', () => {
onChange,
schema,
required,
- } as unknown as FieldProps;
+ } as unknown as FieldProps;
render(
', () => {
onChange,
schema,
required,
- } as unknown as FieldProps;
+ } as unknown as FieldProps;
const { queryByText, getByRole } = render(
', () => {
onChange,
schema,
required,
- } as unknown as FieldProps;
+ } as unknown as FieldProps;
const { getByRole } = render(
', () => {
const rawErrors: string[] = [];
const formData = undefined;
- let props: FieldProps;
+ let props: FieldProps;
const catalogApi: jest.Mocked = {
getLocationById: jest.fn(),
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
index 4b44a4fa3e..da86e6e4b8 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx
@@ -15,7 +15,8 @@
*/
import React from 'react';
import { RepoUrlPicker } from './RepoUrlPicker';
-import Form from '@rjsf/core';
+import { Form } from '@backstage/plugin-scaffolder-react/alpha';
+import validator from '@rjsf/validator-ajv8';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import {
scmIntegrationsApiRef,
@@ -29,6 +30,7 @@ import {
scaffolderApiRef,
ScaffolderApi,
useTemplateSecrets,
+ ScaffolderRJSFField,
} from '@backstage/plugin-scaffolder-react';
import { act, fireEvent } from '@testing-library/react';
@@ -73,9 +75,12 @@ describe('RepoUrlPicker', () => {
>
@@ -109,12 +114,15 @@ describe('RepoUrlPicker', () => {
>
,
@@ -144,6 +152,7 @@ describe('RepoUrlPicker', () => {
>
@@ -206,6 +217,7 @@ describe('RepoUrlPicker', () => {
>
@@ -259,6 +273,7 @@ describe('RepoUrlPicker', () => {
>
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.test.ts b/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.test.ts
index 45e44b4072..b9c481957c 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.test.ts
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.test.ts
@@ -15,7 +15,7 @@
*/
import { repoPickerValidation } from './validation';
-import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/utils';
import { ScmIntegrations } from '@backstage/integration';
import { ConfigReader } from '@backstage/core-app-api';
import { ApiHolder } from '@backstage/core-plugin-api';
diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.ts b/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.ts
index 99847f9e3b..55ba92abdc 100644
--- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.ts
+++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/utils';
import { ApiHolder } from '@backstage/core-plugin-api';
import { scmIntegrationsApiRef } from '@backstage/integration-react';
diff --git a/plugins/scaffolder/src/components/index.ts b/plugins/scaffolder/src/components/index.ts
index a5c17b8ab0..fd8c11e2da 100644
--- a/plugins/scaffolder/src/components/index.ts
+++ b/plugins/scaffolder/src/components/index.ts
@@ -15,7 +15,12 @@
*/
export * from './fields';
export type { RepoUrlPickerUiOptions } from './fields';
+
export { TemplateTypePicker } from './TemplateTypePicker';
-export { TaskPage, type TaskPageProps } from './TaskPage';
+
export type { RouterProps } from './Router';
-export type { ReviewStepProps } from './types';
+export { OngoingTask as TaskPage } from './OngoingTask';
+
+export type { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
+
+export type { TaskPageProps } from '../legacy/TaskPage';
diff --git a/plugins/scaffolder/src/components/types.ts b/plugins/scaffolder/src/components/types.ts
index f5989a2ae1..b1e99a84e6 100644
--- a/plugins/scaffolder/src/components/types.ts
+++ b/plugins/scaffolder/src/components/types.ts
@@ -13,25 +13,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-import { UiSchema } from '@rjsf/utils';
-import { JsonObject } from '@backstage/types';
-
-/**
- * The props for the Last Step in scaffolder template form.
- * Which represents the summary of the input provided by the end user.
- *
- * @public
- */
-export type ReviewStepProps = {
- disableButtons: boolean;
- formData: JsonObject;
- handleBack: () => void;
- handleReset: () => void;
- handleCreate: () => void;
- steps: {
- uiSchema: UiSchema;
- mergedSchema: JsonObject;
- schema: JsonObject;
- }[];
-};
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/FieldOverrides/DescriptionField.tsx b/plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/DescriptionField.tsx
similarity index 95%
rename from plugins/scaffolder/src/components/MultistepJsonForm/FieldOverrides/DescriptionField.tsx
rename to plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/DescriptionField.tsx
index 3c592860ef..eded38beee 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/FieldOverrides/DescriptionField.tsx
+++ b/plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/DescriptionField.tsx
@@ -16,7 +16,7 @@
import React from 'react';
import { MarkdownContent } from '@backstage/core-components';
-import { FieldProps } from '@rjsf/core';
+import { FieldProps } from '@rjsf/utils';
export const DescriptionField = ({ description }: FieldProps) =>
description && ;
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/FieldOverrides/index.ts b/plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/index.ts
similarity index 100%
rename from plugins/scaffolder/src/components/MultistepJsonForm/FieldOverrides/index.ts
rename to plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/index.ts
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.test.tsx b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.test.tsx
rename to plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.test.tsx
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx
similarity index 95%
rename from plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
rename to plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx
index d8299a9b5f..312522bc88 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx
@@ -29,17 +29,20 @@ import {
useRouteRefParams,
useApi,
} from '@backstage/core-plugin-api';
-import { FormProps, IChangeEvent, ISubmitEvent, withTheme } from '@rjsf/core';
+import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
import { Theme as MuiTheme } from '@rjsf/material-ui';
import React, { ComponentType, useState } from 'react';
import { transformSchemaToProps } from './schema';
import cloneDeep from 'lodash/cloneDeep';
import * as fieldOverrides from './FieldOverrides';
-import { ReviewStepProps } from '../types';
import { ReviewStep } from './ReviewStep';
+import validator from '@rjsf/validator-ajv8';
import { extractSchemaFromStep } from '@backstage/plugin-scaffolder-react/alpha';
import { selectedTemplateRouteRef } from '../../routes';
-import { LayoutOptions } from '@backstage/plugin-scaffolder-react';
+import {
+ LayoutOptions,
+ ReviewStepProps,
+} from '@backstage/plugin-scaffolder-react';
const Form = withTheme(MuiTheme);
@@ -178,6 +181,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditor.tsx
similarity index 79%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx
rename to plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditor.tsx
index e07434aff7..f6e7b38d7d 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx
+++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditor.tsx
@@ -15,17 +15,15 @@
*/
import { makeStyles } from '@material-ui/core';
import React, { useState } from 'react';
-import type {
- FieldExtensionOptions,
- LayoutOptions,
-} from '@backstage/plugin-scaffolder-react';
+import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
import { TemplateDirectoryAccess } from '../../lib/filesystem';
-import { DirectoryEditorProvider } from './DirectoryEditorContext';
-import { DryRunProvider } from './DryRunContext';
-import { DryRunResults } from './DryRunResults';
-import { TemplateEditorBrowser } from './TemplateEditorBrowser';
+import { LayoutOptions } from '@backstage/plugin-scaffolder-react';
+import { DirectoryEditorProvider } from '../../next/TemplateEditorPage/DirectoryEditorContext';
+import { DryRunProvider } from '../../next/TemplateEditorPage/DryRunContext';
+import { TemplateEditorBrowser } from '../../next/TemplateEditorPage/TemplateEditorBrowser';
+import { TemplateEditorTextArea } from '../../next/TemplateEditorPage/TemplateEditorTextArea';
import { TemplateEditorForm } from './TemplateEditorForm';
-import { TemplateEditorTextArea } from './TemplateEditorTextArea';
+import { DryRunResults } from '../../next/TemplateEditorPage/DryRunResults';
const useStyles = makeStyles({
// Reset and fix sizing to make sure scrolling behaves correctly
@@ -59,7 +57,7 @@ const useStyles = makeStyles({
export const TemplateEditor = (props: {
directory: TemplateDirectoryAccess;
- fieldExtensions?: FieldExtensionOptions[];
+ fieldExtensions?: LegacyFieldExtensionOptions[];
layouts?: LayoutOptions[];
onClose?: () => void;
}) => {
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx
similarity index 94%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx
rename to plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx
index 2a726110b8..df05efc921 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx
+++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx
@@ -19,15 +19,16 @@ import { makeStyles } from '@material-ui/core/styles';
import React, { Component, ReactNode, useMemo, useState } from 'react';
import useDebounce from 'react-use/lib/useDebounce';
import yaml from 'yaml';
-import type {
- FieldExtensionOptions,
+import {
LayoutOptions,
TemplateParameterSchema,
} from '@backstage/plugin-scaffolder-react';
+
+import { useDryRun } from '../../next/TemplateEditorPage/DryRunContext';
+import { useDirectoryEditor } from '../../next/TemplateEditorPage/DirectoryEditorContext';
import { MultistepJsonForm } from '../MultistepJsonForm';
import { createValidator } from '../TemplatePage';
-import { useDirectoryEditor } from './DirectoryEditorContext';
-import { useDryRun } from './DryRunContext';
+import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
const useStyles = makeStyles({
containerWrapper: {
@@ -85,7 +86,7 @@ interface TemplateEditorFormProps {
setErrorText: (errorText?: string) => void;
onDryRun?: (data: JsonObject) => Promise;
- fieldExtensions?: FieldExtensionOptions[];
+ fieldExtensions?: LegacyFieldExtensionOptions[];
layouts?: LayoutOptions[];
}
@@ -191,7 +192,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
onUpdate(e.formData)}
onReset={() => onUpdate({})}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx
similarity index 90%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx
rename to plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx
index ebb763e145..127c73dcf5 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx
+++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx
@@ -19,14 +19,12 @@ import {
TemplateDirectoryAccess,
WebFileSystemAccess,
} from '../../lib/filesystem';
-import { CustomFieldExplorer } from './CustomFieldExplorer';
-import { TemplateEditorIntro } from './TemplateEditorIntro';
+import { type LayoutOptions } from '@backstage/plugin-scaffolder-react';
+import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
+import { TemplateEditorIntro } from '../../next/TemplateEditorPage/TemplateEditorIntro';
import { TemplateEditor } from './TemplateEditor';
import { TemplateFormPreviewer } from './TemplateFormPreviewer';
-import {
- type FieldExtensionOptions,
- type LayoutOptions,
-} from '@backstage/plugin-scaffolder-react';
+import { CustomFieldExplorer } from './CustomFieldExplorer';
type Selection =
| {
@@ -42,7 +40,7 @@ type Selection =
interface TemplateEditorPageProps {
defaultPreviewTemplate?: string;
- customFieldExtensions?: FieldExtensionOptions[];
+ customFieldExtensions?: LegacyFieldExtensionOptions[];
layouts?: LayoutOptions[];
}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx
similarity index 92%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx
rename to plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx
index 9442394177..b83acf85a5 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx
+++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx
@@ -32,12 +32,10 @@ import CloseIcon from '@material-ui/icons/Close';
import React, { useCallback, useState } from 'react';
import useAsync from 'react-use/lib/useAsync';
import yaml from 'yaml';
-import {
- type FieldExtensionOptions,
- type LayoutOptions,
-} from '@backstage/plugin-scaffolder-react';
+import { LayoutOptions } from '@backstage/plugin-scaffolder-react';
+import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
+import { TemplateEditorTextArea } from '../../next/TemplateEditorPage/TemplateEditorTextArea';
import { TemplateEditorForm } from './TemplateEditorForm';
-import { TemplateEditorTextArea } from './TemplateEditorTextArea';
const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
parameters:
@@ -116,7 +114,7 @@ export const TemplateFormPreviewer = ({
layouts = [],
}: {
defaultPreviewTemplate?: string;
- customFieldExtensions?: FieldExtensionOptions[];
+ customFieldExtensions?: LegacyFieldExtensionOptions[];
onClose?: () => void;
layouts?: LayoutOptions[];
}) => {
@@ -164,8 +162,7 @@ export const TemplateFormPreviewer = ({
);
const handleSelectChange = useCallback(
- // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types
- (selected: any) => {
+ selected => {
setSelectedTemplate(selected);
setTemplateYaml(yaml.stringify(selected.spec));
},
@@ -195,7 +192,7 @@ export const TemplateFormPreviewer = ({
-
+
@@ -208,11 +205,11 @@ export const TemplateFormPreviewer = ({
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/index.ts b/plugins/scaffolder/src/legacy/TemplateEditorPage/index.ts
similarity index 93%
rename from plugins/scaffolder/src/components/TemplateEditorPage/index.ts
rename to plugins/scaffolder/src/legacy/TemplateEditorPage/index.ts
index 7ec6bddb64..7de0d3c679 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/index.ts
+++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/index.ts
@@ -1,5 +1,5 @@
/*
- * Copyright 2022 The Backstage Authors
+ * Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -13,5 +13,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
export { TemplateEditorPage } from './TemplateEditorPage';
diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.test.tsx b/plugins/scaffolder/src/legacy/TemplateList/TemplateList.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateList/TemplateList.test.tsx
rename to plugins/scaffolder/src/legacy/TemplateList/TemplateList.test.tsx
diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/legacy/TemplateList/TemplateList.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateList/TemplateList.tsx
rename to plugins/scaffolder/src/legacy/TemplateList/TemplateList.tsx
diff --git a/plugins/scaffolder/src/components/TemplateList/index.ts b/plugins/scaffolder/src/legacy/TemplateList/index.ts
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateList/index.ts
rename to plugins/scaffolder/src/legacy/TemplateList/index.ts
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx b/plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
rename to plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.test.tsx
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx
similarity index 96%
rename from plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
rename to plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx
index c615649f93..ffb754bae3 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx
@@ -20,10 +20,10 @@ import React, { ComponentType, useCallback, useState } from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
import useAsync from 'react-use/lib/useAsync';
import {
- type FieldExtensionOptions,
type LayoutOptions,
scaffolderApiRef,
useTemplateSecrets,
+ ReviewStepProps,
} from '@backstage/plugin-scaffolder-react';
import { MultistepJsonForm } from '../MultistepJsonForm';
import { createValidator } from './createValidator';
@@ -38,12 +38,12 @@ import {
useRouteRefParams,
} from '@backstage/core-plugin-api';
import { stringifyEntityRef } from '@backstage/catalog-model';
-import { ReviewStepProps } from '../types';
import {
rootRouteRef,
scaffolderTaskRouteRef,
selectedTemplateRouteRef,
} from '../../routes';
+import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
const useTemplateParameterSchema = (templateRef: string) => {
const scaffolderApi = useApi(scaffolderApiRef);
@@ -56,7 +56,7 @@ const useTemplateParameterSchema = (templateRef: string) => {
type Props = {
ReviewStepComponent?: ComponentType;
- customFieldExtensions?: FieldExtensionOptions[];
+ customFieldExtensions?: LegacyFieldExtensionOptions[];
layouts?: LayoutOptions[];
headerOptions?: {
pageTitleOverride?: string;
@@ -162,7 +162,7 @@ export const TemplatePage = ({
{
- const validators: Record> =
- {
- CustomPicker: (
- value: unknown,
- fieldValidation: FieldValidation,
- _context: { apiHolder: ApiHolder },
- ) => {
- if (!value || !(value as { value?: unknown }).value) {
- fieldValidation.addError('Error !');
- }
- },
- CustomLink: (
- values: unknown,
- fieldValidation: FieldValidation,
- _context: { apiHolder: ApiHolder },
- ) => {
- const input = values as CustomLinkType[];
- for (const item of input) {
- const validGitlabUrlRegex =
- /gitlab\.(?:stg\.)?spotify\.com\?owner=.*&repo=.*/;
+ const validators: Record<
+ string,
+ undefined | LegacyCustomFieldValidator
+ > = {
+ CustomPicker: (
+ value: unknown,
+ fieldValidation: FieldValidation,
+ _context: { apiHolder: ApiHolder },
+ ) => {
+ if (!value || !(value as { value?: unknown }).value) {
+ fieldValidation.addError('Error !');
+ }
+ },
+ CustomLink: (
+ values: unknown,
+ fieldValidation: FieldValidation,
+ _context: { apiHolder: ApiHolder },
+ ) => {
+ const input = values as CustomLinkType[];
+ for (const item of input) {
+ const validGitlabUrlRegex =
+ /gitlab\.(?:stg\.)?spotify\.com\?owner=.*&repo=.*/;
- if (!item || !validGitlabUrlRegex.test(item.url)) {
- fieldValidation.addError(
- `Make sure to put in a valid gitlab clone url.`,
- );
- }
+ if (!item || !validGitlabUrlRegex.test(item.url)) {
+ fieldValidation.addError(
+ `Make sure to put in a valid gitlab clone url.`,
+ );
}
- },
- TagPicker: (
- values: unknown,
- fieldValidation: FieldValidation,
- _context: { apiHolder: ApiHolder },
- ) => {
- const input = values as string[];
- for (const item of input) {
- if (!/^[a-z0-9-]+$/.test(item)) {
- fieldValidation.addError(
- 'A tag name can only contain lowercase letters, numeric characters or dashes',
- );
- }
+ }
+ },
+ TagPicker: (
+ values: unknown,
+ fieldValidation: FieldValidation,
+ _context: { apiHolder: ApiHolder },
+ ) => {
+ const input = values as string[];
+ for (const item of input) {
+ if (!/^[a-z0-9-]+$/.test(item)) {
+ fieldValidation.addError(
+ 'A tag name can only contain lowercase letters, numeric characters or dashes',
+ );
}
- },
- };
+ }
+ },
+ };
const apiHolderMock: jest.Mocked = {
get: jest.fn().mockImplementation(() => {
@@ -109,7 +111,7 @@ describe('createValidator', () => {
/* THEN */
expect(result).not.toBeNull();
- expect(result.p1.addError).toHaveBeenCalledTimes(1);
+ expect(result.p1?.addError).toHaveBeenCalledTimes(1);
});
it('should call validator for array property from a custom field extension', () => {
@@ -144,7 +146,7 @@ describe('createValidator', () => {
/* THEN */
expect(result).not.toBeNull();
- expect(result.tags.addError).toHaveBeenCalledTimes(1);
+ expect(result.tags?.addError).toHaveBeenCalledTimes(1);
});
it('should call validator for array object property from a custom field extension', () => {
@@ -193,6 +195,6 @@ describe('createValidator', () => {
/* THEN */
expect(result).not.toBeNull();
- expect(result.links.addError).toHaveBeenCalledTimes(1);
+ expect(result.links?.addError).toHaveBeenCalledTimes(1);
});
});
diff --git a/plugins/scaffolder/src/components/TemplatePage/createValidator.ts b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts
similarity index 91%
rename from plugins/scaffolder/src/components/TemplatePage/createValidator.ts
rename to plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts
index 8bfe8c8313..ae0b834fe9 100644
--- a/plugins/scaffolder/src/components/TemplatePage/createValidator.ts
+++ b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts
@@ -14,8 +14,8 @@
* limitations under the License.
*/
-import { CustomFieldValidator } from '@backstage/plugin-scaffolder-react';
-import { FormValidation } from '@rjsf/core';
+import { LegacyCustomFieldValidator } from '@backstage/plugin-scaffolder-react/alpha';
+import { FieldValidation, FormValidation } from '@rjsf/utils';
import { JsonObject, JsonValue } from '@backstage/types';
import { ApiHolder } from '@backstage/core-plugin-api';
@@ -29,7 +29,7 @@ function isArray(obj: unknown): obj is JsonObject {
export const createValidator = (
rootSchema: JsonObject,
- validators: Record>,
+ validators: Record>,
context: {
apiHolder: ApiHolder;
},
@@ -56,7 +56,7 @@ export const createValidator = (
if (fieldName && typeof validators[fieldName] === 'function') {
validators[fieldName]!(
propData as JsonObject[],
- propValidation,
+ propValidation as FieldValidation,
context,
);
}
diff --git a/plugins/scaffolder/src/components/TemplatePage/index.ts b/plugins/scaffolder/src/legacy/TemplatePage/index.ts
similarity index 100%
rename from plugins/scaffolder/src/components/TemplatePage/index.ts
rename to plugins/scaffolder/src/legacy/TemplatePage/index.ts
diff --git a/plugins/scaffolder/src/legacy/index.ts b/plugins/scaffolder/src/legacy/index.ts
new file mode 100644
index 0000000000..2393be0f69
--- /dev/null
+++ b/plugins/scaffolder/src/legacy/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { LegacyRouter, type LegacyRouterProps } from './Router';
+export { LegacyScaffolderPage } from '../plugin';
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx
index 15298dff8a..a6c06ea20a 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx
@@ -31,12 +31,10 @@ import CloseIcon from '@material-ui/icons/Close';
import CodeMirror from '@uiw/react-codemirror';
import React, { useCallback, useMemo, useState } from 'react';
import yaml from 'yaml';
-import {
- NextFieldExtensionOptions,
- Form,
-} from '@backstage/plugin-scaffolder-react/alpha';
+import { Form } from '@backstage/plugin-scaffolder-react/alpha';
import { TemplateEditorForm } from './TemplateEditorForm';
import validator from '@rjsf/validator-ajv8';
+import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
const useStyles = makeStyles(theme => ({
root: {
@@ -68,7 +66,7 @@ export const CustomFieldExplorer = ({
customFieldExtensions = [],
onClose,
}: {
- customFieldExtensions?: NextFieldExtensionOptions[];
+ customFieldExtensions?: FieldExtensionOptions[];
onClose?: () => void;
}) => {
const classes = useStyles();
@@ -102,7 +100,7 @@ export const CustomFieldExplorer = ({
}, [customFieldExtensions]);
const handleSelectionChange = useCallback(
- (selection: NextFieldExtensionOptions) => {
+ (selection: FieldExtensionOptions) => {
setSelectedField(selection);
setFieldFormState({});
},
@@ -131,7 +129,7 @@ export const CustomFieldExplorer = ({
label="Choose Custom Field Extension"
labelId="select-field-label"
onChange={e =>
- handleSelectionChange(e.target.value as NextFieldExtensionOptions)
+ handleSelectionChange(e.target.value as FieldExtensionOptions)
}
>
{fieldOptions.map((option, idx) => (
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DirectoryEditorContext.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DirectoryEditorContext.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DirectoryEditorContext.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DirectoryEditorContext.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunContext.test.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunContext.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunContext.test.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunContext.test.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunContext.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunContext.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunContext.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunContext.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResults.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx
similarity index 96%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx
index 9c56039808..68ed6f906f 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx
@@ -24,11 +24,11 @@ import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import CodeMirror from '@uiw/react-codemirror';
import React, { useEffect, useMemo, useState } from 'react';
-import { TaskStatusStepper } from '../../TaskPage/TaskPage';
-import { TaskPageLinks } from '../../TaskPage/TaskPageLinks';
import { useDryRun } from '../DryRunContext';
-import { FileBrowser } from '../../FileBrowser';
import { DryRunResultsSplitView } from './DryRunResultsSplitView';
+import { FileBrowser } from '../../../components/FileBrowser';
+import { TaskPageLinks } from '../../../legacy/TaskPage/TaskPageLinks';
+import { TaskStatusStepper } from '../../../legacy/TaskPage/TaskPage';
const useStyles = makeStyles({
root: {
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/index.ts b/plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/index.ts
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/DryRunResults/index.ts
rename to plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/index.ts
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditor.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditor.tsx
index 16067e8095..a348f5e513 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditor.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditor.tsx
@@ -16,14 +16,14 @@
import { makeStyles } from '@material-ui/core';
import React, { useState } from 'react';
import type { LayoutOptions } from '@backstage/plugin-scaffolder-react';
-import { NextFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
+import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
import { TemplateDirectoryAccess } from '../../lib/filesystem';
-import { DirectoryEditorProvider } from '../../components/TemplateEditorPage/DirectoryEditorContext';
-import { DryRunProvider } from '../../components/TemplateEditorPage/DryRunContext';
-import { DryRunResults } from '../../components/TemplateEditorPage/DryRunResults';
-import { TemplateEditorBrowser } from '../../components/TemplateEditorPage/TemplateEditorBrowser';
+import { DirectoryEditorProvider } from './DirectoryEditorContext';
+import { TemplateEditorBrowser } from './TemplateEditorBrowser';
+import { DryRunProvider } from './DryRunContext';
+import { TemplateEditorTextArea } from './TemplateEditorTextArea';
import { TemplateEditorForm } from './TemplateEditorForm';
-import { TemplateEditorTextArea } from '../../components/TemplateEditorPage/TemplateEditorTextArea';
+import { DryRunResults } from './DryRunResults';
const useStyles = makeStyles({
// Reset and fix sizing to make sure scrolling behaves correctly
@@ -57,7 +57,7 @@ const useStyles = makeStyles({
export const TemplateEditor = (props: {
directory: TemplateDirectoryAccess;
- fieldExtensions?: NextFieldExtensionOptions[];
+ fieldExtensions?: FieldExtensionOptions[];
layouts?: LayoutOptions[];
onClose?: () => void;
}) => {
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.test.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.test.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.test.tsx
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx
similarity index 98%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx
index 177ad11c2b..996da98d4a 100644
--- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx
@@ -18,8 +18,8 @@ import CloseIcon from '@material-ui/icons/Close';
import RefreshIcon from '@material-ui/icons/Refresh';
import SaveIcon from '@material-ui/icons/Save';
import React from 'react';
-import { FileBrowser } from '../FileBrowser';
import { useDirectoryEditor } from './DirectoryEditorContext';
+import { FileBrowser } from '../../components/FileBrowser';
const useStyles = makeStyles(theme => ({
button: {
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx
index 898487e200..4b5a00b7ba 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx
@@ -16,19 +16,20 @@
import { useApiHolder } from '@backstage/core-plugin-api';
import { JsonObject, JsonValue } from '@backstage/types';
import { makeStyles } from '@material-ui/core/styles';
-import React, { Component, ReactNode, useState } from 'react';
+import React, { Component, ReactNode, useMemo, useState } from 'react';
import useDebounce from 'react-use/lib/useDebounce';
import yaml from 'yaml';
import {
LayoutOptions,
TemplateParameterSchema,
+ FieldExtensionOptions,
} from '@backstage/plugin-scaffolder-react';
import {
- NextFieldExtensionOptions,
Stepper,
+ createAsyncValidators,
} from '@backstage/plugin-scaffolder-react/alpha';
-import { useDryRun } from '../../components/TemplateEditorPage/DryRunContext';
-import { useDirectoryEditor } from '../../components/TemplateEditorPage/DirectoryEditorContext';
+import { useDryRun } from './DryRunContext';
+import { useDirectoryEditor } from './DirectoryEditorContext';
const useStyles = makeStyles({
containerWrapper: {
@@ -82,8 +83,9 @@ interface TemplateEditorFormProps {
/** Setting this to true will cause the content to be parsed as if it is the template entity spec */
contentIsSpec?: boolean;
setErrorText: (errorText?: string) => void;
+
onDryRun?: (data: JsonObject) => Promise;
- fieldExtensions?: NextFieldExtensionOptions[];
+ fieldExtensions?: FieldExtensionOptions[];
layouts?: LayoutOptions[];
}
@@ -106,6 +108,12 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
const [steps, setSteps] = useState();
+ const fields = useMemo(() => {
+ return Object.fromEntries(
+ fieldExtensions.map(({ name, component }) => [name, component]),
+ );
+ }, [fieldExtensions]);
+
useDebounce(
() => {
try {
@@ -113,7 +121,10 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
setSteps(undefined);
return;
}
- const parsed: JsonValue = yaml.parse(content);
+ const parsed: JsonValue = yaml
+ .parseAllDocuments(content)
+ .filter(c => c)
+ .map(c => c.toJSON())[0];
if (!isJsonObject(parsed)) {
setSteps(undefined);
@@ -140,6 +151,10 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
return;
}
+ const fieldValidators = Object.fromEntries(
+ fieldExtensions.map(({ name, validation }) => [name, validation]),
+ );
+
setErrorText();
setSteps(
parameters.flatMap(param =>
@@ -148,6 +163,9 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
{
title: String(param.title),
schema: param,
+ validate: createAsyncValidators(param, fieldValidators, {
+ apiHolder,
+ }),
},
]
: [],
@@ -172,11 +190,11 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
{
- await onDryRun?.(data);
+ components={fields}
+ onCreate={async options => {
+ await onDryRun?.(options);
}}
layouts={layouts}
- components={{ createButtonText: onDryRun && 'Try It' }}
/>
@@ -197,7 +215,7 @@ export function TemplateEditorFormDirectoryEditorDryRun(
const directoryEditor = useDirectoryEditor();
const { selectedFile } = directoryEditor;
- const handleDryRun = async (values: JsonObject) => {
+ const handleDryRun = async (data: JsonObject) => {
if (!selectedFile) {
return;
}
@@ -205,7 +223,7 @@ export function TemplateEditorFormDirectoryEditorDryRun(
try {
await dryRun.execute({
templateContent: selectedFile.content,
- values,
+ values: data,
files: directoryEditor.files,
});
setErrorText();
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorIntro.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorIntro.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorIntro.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorIntro.tsx
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx
index 9863e99c73..aab693e590 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorPage.tsx
@@ -22,9 +22,11 @@ import {
import { CustomFieldExplorer } from './CustomFieldExplorer';
import { TemplateEditor } from './TemplateEditor';
import { TemplateFormPreviewer } from './TemplateFormPreviewer';
-import { type LayoutOptions } from '@backstage/plugin-scaffolder-react';
-import { NextFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
-import { TemplateEditorIntro } from '../../components/TemplateEditorPage/TemplateEditorIntro';
+import {
+ FieldExtensionOptions,
+ type LayoutOptions,
+} from '@backstage/plugin-scaffolder-react';
+import { TemplateEditorIntro } from './TemplateEditorIntro';
type Selection =
| {
@@ -40,7 +42,7 @@ type Selection =
interface TemplateEditorPageProps {
defaultPreviewTemplate?: string;
- customFieldExtensions?: NextFieldExtensionOptions[];
+ customFieldExtensions?: FieldExtensionOptions[];
layouts?: LayoutOptions[];
}
diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorTextArea.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorTextArea.tsx
similarity index 100%
rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorTextArea.tsx
rename to plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorTextArea.tsx
diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx
index 75d8c511b1..c253bc0a5f 100644
--- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx
+++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateFormPreviewer.tsx
@@ -32,10 +32,12 @@ import CloseIcon from '@material-ui/icons/Close';
import React, { useCallback, useState } from 'react';
import useAsync from 'react-use/lib/useAsync';
import yaml from 'yaml';
-import { type LayoutOptions } from '@backstage/plugin-scaffolder-react';
-import { NextFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha';
+import {
+ LayoutOptions,
+ FieldExtensionOptions,
+} from '@backstage/plugin-scaffolder-react';
import { TemplateEditorForm } from './TemplateEditorForm';
-import { TemplateEditorTextArea } from '../../components/TemplateEditorPage/TemplateEditorTextArea';
+import { TemplateEditorTextArea } from './TemplateEditorTextArea';
const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
parameters:
@@ -114,7 +116,7 @@ export const TemplateFormPreviewer = ({
layouts = [],
}: {
defaultPreviewTemplate?: string;
- customFieldExtensions?: NextFieldExtensionOptions[];
+ customFieldExtensions?: FieldExtensionOptions[];
onClose?: () => void;
layouts?: LayoutOptions[];
}) => {
diff --git a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
index 863d3009e1..44390bc03c 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
+++ b/plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx
@@ -38,7 +38,6 @@ import {
import {
ScaffolderPageContextMenu,
TemplateCategoryPicker,
- TemplateGroupFilter,
TemplateGroups,
} from '@backstage/plugin-scaffolder-react/alpha';
@@ -52,6 +51,7 @@ import {
viewTechDocRouteRef,
} from '../../routes';
import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
+import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';
/**
* @alpha
diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
index a7133ae8c7..3b14f2c07f 100644
--- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
+++ b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx
@@ -26,12 +26,11 @@ import {
scaffolderApiRef,
useTemplateSecrets,
type LayoutOptions,
-} from '@backstage/plugin-scaffolder-react';
-import {
FormProps,
- Workflow,
- NextFieldExtensionOptions,
-} from '@backstage/plugin-scaffolder-react/alpha';
+ FieldExtensionOptions,
+ ReviewStepProps,
+} from '@backstage/plugin-scaffolder-react';
+import { Workflow } from '@backstage/plugin-scaffolder-react/alpha';
import { JsonValue } from '@backstage/types';
import { Header, Page } from '@backstage/core-components';
@@ -45,9 +44,12 @@ import {
* @alpha
*/
export type TemplateWizardPageProps = {
- customFieldExtensions: NextFieldExtensionOptions[];
+ customFieldExtensions: FieldExtensionOptions[];
+ components?: {
+ ReviewStepComponent?: React.ComponentType;
+ };
layouts?: LayoutOptions[];
- FormProps?: FormProps;
+ formProps?: FormProps;
};
export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
@@ -90,9 +92,10 @@ export const TemplateWizardPage = (props: TemplateWizardPageProps) => {
namespace={namespace}
templateName={templateName}
onCreate={onCreate}
+ components={props.components}
onError={onError}
extensions={props.customFieldExtensions}
- FormProps={props.FormProps}
+ formProps={props.formProps}
layouts={props.layouts}
/>
diff --git a/plugins/scaffolder/src/next/index.ts b/plugins/scaffolder/src/next/index.ts
index 6cef3eaa03..2ae1b7b6c7 100644
--- a/plugins/scaffolder/src/next/index.ts
+++ b/plugins/scaffolder/src/next/index.ts
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-export * from './Router';
export * from './TemplateListPage';
export * from './TemplateWizardPage';
export * from './types';
diff --git a/plugins/scaffolder/src/next/types.ts b/plugins/scaffolder/src/next/types.ts
index c2ee473d54..80e01042f2 100644
--- a/plugins/scaffolder/src/next/types.ts
+++ b/plugins/scaffolder/src/next/types.ts
@@ -20,7 +20,7 @@
* It exists already in the `scaffolder-react` plugin, so you may have to update both files.
*/
-import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
+import type { FormProps as SchemaFormProps } from '@rjsf/core';
/**
* Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderPage`
diff --git a/plugins/scaffolder/src/plugin.tsx b/plugins/scaffolder/src/plugin.tsx
index ad9e70d843..fdde81695d 100644
--- a/plugins/scaffolder/src/plugin.tsx
+++ b/plugins/scaffolder/src/plugin.tsx
@@ -217,10 +217,10 @@ export const EntityTagsPickerFieldExtension = scaffolderPlugin.provide(
* @alpha
* The Router and main entrypoint to the Alpha Scaffolder plugin.
*/
-export const NextScaffolderPage = scaffolderPlugin.provide(
+export const LegacyScaffolderPage = scaffolderPlugin.provide(
createRoutableExtension({
- name: 'NextScaffolderPage',
- component: () => import('./next/Router').then(m => m.Router),
+ name: 'LegacyScaffolderPage',
+ component: () => import('./legacy/Router').then(m => m.LegacyRouter),
mountPoint: rootRouteRef,
}),
);
diff --git a/yarn.lock b/yarn.lock
index 6ced2641d6..575943fa23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7216,8 +7216,8 @@ __metadata:
"@material-ui/core": ^4.12.2
"@material-ui/icons": ^4.9.1
"@material-ui/lab": 4.0.0-alpha.61
- "@rjsf/core-v5": "npm:@rjsf/core@5.13.0"
- "@rjsf/material-ui-v5": "npm:@rjsf/material-ui@5.13.0"
+ "@rjsf/core": 5.13.0
+ "@rjsf/material-ui": 5.13.0
"@rjsf/utils": 5.13.0
"@rjsf/validator-ajv8": 5.13.0
"@testing-library/dom": ^9.0.0
@@ -8663,10 +8663,8 @@ __metadata:
"@material-ui/icons": ^4.9.1
"@material-ui/lab": 4.0.0-alpha.61
"@react-hookz/web": ^20.0.0
- "@rjsf/core": ^3.2.1
- "@rjsf/core-v5": "npm:@rjsf/core@5.13.0"
- "@rjsf/material-ui": ^3.2.1
- "@rjsf/material-ui-v5": "npm:@rjsf/material-ui@5.13.0"
+ "@rjsf/core": 5.13.0
+ "@rjsf/material-ui": 5.13.0
"@rjsf/utils": 5.13.0
"@rjsf/validator-ajv8": 5.13.0
"@testing-library/dom": ^9.0.0
@@ -8729,8 +8727,8 @@ __metadata:
"@material-ui/icons": ^4.9.1
"@material-ui/lab": 4.0.0-alpha.61
"@react-hookz/web": ^20.0.0
- "@rjsf/core": ^3.2.1
- "@rjsf/material-ui": ^3.2.1
+ "@rjsf/core": 5.13.0
+ "@rjsf/material-ui": 5.13.0
"@rjsf/utils": 5.13.0
"@rjsf/validator-ajv8": 5.13.0
"@testing-library/dom": ^9.0.0
@@ -14622,7 +14620,7 @@ __metadata:
languageName: node
linkType: hard
-"@rjsf/core-v5@npm:@rjsf/core@5.13.0":
+"@rjsf/core@npm:5.13.0":
version: 5.13.0
resolution: "@rjsf/core@npm:5.13.0"
dependencies:
@@ -14638,26 +14636,7 @@ __metadata:
languageName: node
linkType: hard
-"@rjsf/core@npm:^3.2.1":
- version: 3.2.1
- resolution: "@rjsf/core@npm:3.2.1"
- dependencies:
- "@types/json-schema": ^7.0.7
- ajv: ^6.7.0
- core-js-pure: ^3.6.5
- json-schema-merge-allof: ^0.6.0
- jsonpointer: ^5.0.0
- lodash: ^4.17.15
- nanoid: ^3.1.23
- prop-types: ^15.7.2
- react-is: ^16.9.0
- peerDependencies:
- react: ">=16"
- checksum: 2142d4a31229ea242b79aca4ed93e2fe89e75f15ce93111457c3017d3ab295cae8f53e4dd870c619afa571959d00f46b3c19085c6a336f522c891fc07ecc46f1
- languageName: node
- linkType: hard
-
-"@rjsf/material-ui-v5@npm:@rjsf/material-ui@5.13.0":
+"@rjsf/material-ui@npm:5.13.0":
version: 5.13.0
resolution: "@rjsf/material-ui@npm:5.13.0"
peerDependencies:
@@ -14670,18 +14649,6 @@ __metadata:
languageName: node
linkType: hard
-"@rjsf/material-ui@npm:^3.2.1":
- version: 3.2.1
- resolution: "@rjsf/material-ui@npm:3.2.1"
- peerDependencies:
- "@material-ui/core": ^4.2.0
- "@material-ui/icons": ^4.2.1
- "@rjsf/core": ^3.0.0
- react: ">=16"
- checksum: bd25cd9f2e2d568c653755e7268fe3e53279e1ae675e39bccd85f65557623d2052b706763e017a949f897751e25a16d0f2c8b995508bb56907be6786b09e2b1e
- languageName: node
- linkType: hard
-
"@rjsf/utils@npm:5.13.0":
version: 5.13.0
resolution: "@rjsf/utils@npm:5.13.0"
@@ -19612,7 +19579,7 @@ __metadata:
languageName: node
linkType: hard
-"ajv@npm:^6.10.1, ajv@npm:^6.12.2, ajv@npm:^6.12.4, ajv@npm:^6.12.5, ajv@npm:^6.5.5, ajv@npm:^6.7.0, ajv@npm:~6.12.6":
+"ajv@npm:^6.10.1, ajv@npm:^6.12.2, ajv@npm:^6.12.4, ajv@npm:^6.12.5, ajv@npm:^6.5.5, ajv@npm:~6.12.6":
version: 6.12.6
resolution: "ajv@npm:6.12.6"
dependencies:
@@ -22271,7 +22238,7 @@ __metadata:
languageName: node
linkType: hard
-"compute-lcm@npm:^1.1.0, compute-lcm@npm:^1.1.2":
+"compute-lcm@npm:^1.1.2":
version: 1.1.2
resolution: "compute-lcm@npm:1.1.2"
dependencies:
@@ -22537,7 +22504,7 @@ __metadata:
languageName: node
linkType: hard
-"core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.30.2, core-js-pure@npm:^3.6.5":
+"core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.30.2":
version: 3.31.0
resolution: "core-js-pure@npm:3.31.0"
checksum: 2bc5d2f6c3c9732fd5c066529b8d41fae9c746206ddf7614712dc4120a9efd47bf894df4fc600fde8c04324171c1999869798b48b23fca128eff5f09f58cd2f6
@@ -30317,17 +30284,6 @@ __metadata:
languageName: node
linkType: hard
-"json-schema-merge-allof@npm:^0.6.0":
- version: 0.6.0
- resolution: "json-schema-merge-allof@npm:0.6.0"
- dependencies:
- compute-lcm: ^1.1.0
- json-schema-compare: ^0.2.2
- lodash: ^4.17.4
- checksum: 2008aede3f5d05d7870e7d5e554e5c6a5b451cfff1357d34d3d8b34e2ba57468a97c76aa5b967bdb411d91b98c734f19f350de578d25b2a0a27cd4e1ca92bd1d
- languageName: node
- linkType: hard
-
"json-schema-merge-allof@npm:^0.8.1":
version: 0.8.1
resolution: "json-schema-merge-allof@npm:0.8.1"
@@ -33244,7 +33200,7 @@ __metadata:
languageName: node
linkType: hard
-"nanoid@npm:^3.1.23, nanoid@npm:^3.3.6":
+"nanoid@npm:^3.3.6":
version: 3.3.6
resolution: "nanoid@npm:3.3.6"
bin:
@@ -36761,7 +36717,7 @@ __metadata:
languageName: node
linkType: hard
-"react-is@npm:^16.10.2, react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.6.3, react-is@npm:^16.7.0, react-is@npm:^16.8.0, react-is@npm:^16.8.6, react-is@npm:^16.9.0":
+"react-is@npm:^16.10.2, react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.6.3, react-is@npm:^16.7.0, react-is@npm:^16.8.0, react-is@npm:^16.8.6":
version: 16.13.1
resolution: "react-is@npm:16.13.1"
checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f