From 95415da622aa4058e3ad9fc0d8f89edb18f6c6df Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 26 Sep 2023 14:39:19 +0200 Subject: [PATCH 01/14] feat: started to promote the bare minmum Signed-off-by: blam --- plugins/scaffolder-react/src/alpha.ts | 2 + .../scaffolder-react/src/extensions/index.tsx | 22 +- .../scaffolder-react/src/extensions/rjsf.ts | 292 ++++++++++++++++++ .../scaffolder-react/src/extensions/types.ts | 65 ++-- .../src/{next => legacy}/extensions/index.tsx | 23 +- .../src/legacy/extensions/types.ts | 62 ++++ plugins/scaffolder-react/src/legacy/index.ts | 16 + .../src/next/components/Form/Form.tsx | 24 +- .../next/components/Stepper/Stepper.test.tsx | 2 +- .../src/next/components/Stepper/Stepper.tsx | 2 +- .../Stepper/createAsyncValidators.test.ts | 2 +- .../Stepper/createAsyncValidators.ts | 2 +- .../src/next/extensions/types.ts | 84 ----- plugins/scaffolder-react/src/next/index.ts | 1 - 14 files changed, 460 insertions(+), 139 deletions(-) create mode 100644 plugins/scaffolder-react/src/extensions/rjsf.ts rename plugins/scaffolder-react/src/{next => legacy}/extensions/index.tsx (70%) create mode 100644 plugins/scaffolder-react/src/legacy/extensions/types.ts create mode 100644 plugins/scaffolder-react/src/legacy/index.ts delete mode 100644 plugins/scaffolder-react/src/next/extensions/types.ts diff --git a/plugins/scaffolder-react/src/alpha.ts b/plugins/scaffolder-react/src/alpha.ts index 731b8e07d9..f60ced6b35 100644 --- a/plugins/scaffolder-react/src/alpha.ts +++ b/plugins/scaffolder-react/src/alpha.ts @@ -16,3 +16,5 @@ export * from './next'; export type { FormProps } from './next'; + +export * from './legacy'; diff --git a/plugins/scaffolder-react/src/extensions/index.tsx b/plugins/scaffolder-react/src/extensions/index.tsx index d70f5e36c5..395a15f902 100644 --- a/plugins/scaffolder-react/src/extensions/index.tsx +++ b/plugins/scaffolder-react/src/extensions/index.tsx @@ -14,23 +14,16 @@ * limitations under the License. */ -import React from 'react'; import { - CustomFieldExtensionSchema, CustomFieldValidator, FieldExtensionOptions, FieldExtensionComponentProps, + FieldExtensionUiSchema, } 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 +31,7 @@ export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null; */ export function createScaffolderFieldExtension< TReturnValue = unknown, - TInputProps = unknown, + TInputProps extends UIOptionsType = {}, >( options: FieldExtensionOptions, ): Extension> { @@ -72,9 +65,16 @@ 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, }; diff --git a/plugins/scaffolder-react/src/extensions/rjsf.ts b/plugins/scaffolder-react/src/extensions/rjsf.ts new file mode 100644 index 0000000000..edacbc26aa --- /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-v5'; + +/** + * 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/next/extensions/index.tsx b/plugins/scaffolder-react/src/legacy/extensions/index.tsx similarity index 70% rename from plugins/scaffolder-react/src/next/extensions/index.tsx rename to plugins/scaffolder-react/src/legacy/extensions/index.tsx index 70751936c5..449aa74c22 100644 --- a/plugins/scaffolder-react/src/next/extensions/index.tsx +++ b/plugins/scaffolder-react/src/legacy/extensions/index.tsx @@ -15,26 +15,24 @@ */ import { - NextCustomFieldValidator, - NextFieldExtensionOptions, - NextFieldExtensionComponentProps, - NextFieldExtensionUiSchema, + CustomFieldValidator, + FieldExtensionOptions, + FieldExtensionComponentProps, } 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'; +import { FieldExtensionComponent } from '../../extensions'; /** * Method for creating field extensions that can be used in the scaffolder * frontend form. * @alpha */ -export function createNextScaffolderFieldExtension< +export function createLegacyScaffolderFieldExtension< TReturnValue = unknown, - TInputProps extends UIOptionsType = {}, + TInputProps = unknown, >( - options: NextFieldExtensionOptions, + options: FieldExtensionOptions, ): Extension> { return { expose() { @@ -52,8 +50,7 @@ export function createNextScaffolderFieldExtension< } export type { - NextCustomFieldValidator, - NextFieldExtensionOptions, - NextFieldExtensionComponentProps, - NextFieldExtensionUiSchema, + CustomFieldValidator, + FieldExtensionOptions, + FieldExtensionComponentProps, }; 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..1c94626b03 --- /dev/null +++ b/plugins/scaffolder-react/src/legacy/extensions/types.ts @@ -0,0 +1,62 @@ +/* + * 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, FieldProps } from '@rjsf/core'; +import { CustomFieldExtensionSchema } from '../../extensions/types'; + +/** + * Field validation type for Custom Field Extensions. + * + * @alpha + */ +export type CustomFieldValidator = ( + 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 FieldExtensionOptions< + TFieldReturnValue = unknown, + TInputProps = unknown, +> = { + name: string; + component: ( + props: FieldExtensionComponentProps, + ) => JSX.Element | null; + validation?: CustomFieldValidator; + schema?: CustomFieldExtensionSchema; +}; + +/** + * Type for field extensions and being able to type + * incoming props easier. + * + * @alpha + */ +export interface FieldExtensionComponentProps< + TFieldReturnValue, + TUiOptions = unknown, +> extends FieldProps { + uiSchema: FieldProps['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..adfb8db930 100644 --- a/plugins/scaffolder-react/src/next/components/Form/Form.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/Form.tsx @@ -19,6 +19,7 @@ import React from 'react'; import { PropsWithChildren } from 'react'; import { FieldTemplate } from './FieldTemplate'; import { DescriptionFieldTemplate } from './DescriptionFieldTemplate'; +import { FieldProps } from '@rjsf/utils'; // 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 @@ -30,10 +31,31 @@ const WrappedForm = withTheme(require('@rjsf/material-ui-v5').Theme); * @alpha */ 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..2dd3825cea 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 { NextFieldExtensionComponentProps } from '../../../extensions'; import { LayoutTemplate } from '../../../layouts'; describe('Stepper', () => { diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index e15953bf1f..3d2e1233c0 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -26,7 +26,7 @@ import { import { type IChangeEvent } from '@rjsf/core-v5'; import { ErrorSchema } from '@rjsf/utils'; import React, { useCallback, useMemo, useState, type ReactNode } from 'react'; -import { NextFieldExtensionOptions } from '../../extensions'; +import { NextFieldExtensionOptions } from '../../../extensions'; import { createAsyncValidators, type FormValidation, 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..65e7a5b4fd 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 { NextCustomFieldValidator } from '../../../extensions'; import { createAsyncValidators } from './createAsyncValidators'; describe('createAsyncValidators', () => { diff --git a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts index ceef701255..5531ff26b4 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts +++ b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts @@ -19,7 +19,7 @@ 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 { NextCustomFieldValidator } from '../../../extensions'; import { isObject } from './utils'; import { NextFieldExtensionUiSchema } from '../../extensions/types'; 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..5e4c9f91c1 100644 --- a/plugins/scaffolder-react/src/next/index.ts +++ b/plugins/scaffolder-react/src/next/index.ts @@ -14,7 +14,6 @@ * limitations under the License. */ export * from './components'; -export * from './extensions'; export * from './types'; export * from './lib'; export * from './hooks'; From 48db8c25ebc94a96079ae388a051493745d168c4 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 28 Sep 2023 13:14:35 +0200 Subject: [PATCH 02/14] feat: started some more work on getting this into shape Signed-off-by: blam --- .../src/components/ReviewStep.tsx | 15 + .../scaffolder-react/src/components/index.ts | 16 ++ .../src/{next => components}/types.ts | 36 ++- .../scaffolder-react/src/extensions/index.tsx | 4 + plugins/scaffolder-react/src/index.ts | 1 + .../src/legacy/extensions/index.tsx | 14 +- .../src/legacy/extensions/types.ts | 10 +- .../src/next/components/Stepper/Stepper.tsx | 51 ++-- .../TemplateGroups/TemplateGroups.tsx | 11 +- .../src/next/components/Workflow/Workflow.tsx | 6 +- plugins/scaffolder/src/alpha.ts | 4 +- .../OngoingTask/ContextMenu.tsx | 0 .../OngoingTask/OngoingTask.test.tsx | 0 .../OngoingTask/OngoingTask.tsx | 0 .../{next => components}/OngoingTask/index.ts | 0 .../Router/Router.test.tsx | 9 +- .../{next => components}/Router/Router.tsx | 57 ++-- .../src/{next => components}/Router/index.ts | 3 +- .../CustomFieldExplorer.tsx | 205 -------------- .../TemplateEditorPage/TemplateEditor.tsx | 94 ------- .../TemplateEditorPage/TemplateEditorForm.tsx | 260 ------------------ .../TemplateEditorPage.test.tsx | 58 ---- .../TemplateFormPreviewer.tsx | 223 --------------- .../fields/EntityNamePicker/validation.ts | 2 +- .../fields/EntityPicker/EntityPicker.test.tsx | 3 +- .../fields/RepoUrlPicker/validation.ts | 2 +- plugins/scaffolder/src/components/index.ts | 9 +- plugins/scaffolder/src/components/types.ts | 22 -- .../FieldOverrides/DescriptionField.tsx | 0 .../MultistepJsonForm/FieldOverrides/index.ts | 0 .../MultistepJsonForm.test.tsx | 0 .../MultistepJsonForm/MultistepJsonForm.tsx | 6 +- .../MultistepJsonForm/ReviewStep.tsx | 2 +- .../MultistepJsonForm/index.ts | 0 .../MultistepJsonForm/schema.test.ts | 0 .../MultistepJsonForm/schema.ts | 0 .../src/{components => legacy}/Router.tsx | 26 +- .../ScaffolderPage/ScaffolderPage.tsx | 2 +- .../ScaffolderPageContextMenu.test.tsx | 0 .../ScaffolderPageContextMenu.tsx | 0 .../ScaffolderPage/index.ts | 0 .../TaskPage/IconLink.test.tsx | 0 .../TaskPage/IconLink.tsx | 0 .../TaskPage/TaskErrors.tsx | 0 .../TaskPage/TaskPage.tsx | 4 +- .../TaskPage/TaskPageLinks.test.tsx | 0 .../TaskPage/TaskPageLinks.tsx | 0 .../{components => legacy}/TaskPage/index.ts | 0 .../TemplateCard/TemplateCard.tsx | 0 .../TemplateCard/index.ts | 0 .../TemplateEditorPage/TemplateEditorPage.tsx | 16 +- .../TemplateEditorPage/index.ts | 3 +- .../TemplateList/TemplateList.test.tsx | 0 .../TemplateList/TemplateList.tsx | 0 .../TemplateList/index.ts | 0 .../TemplatePage/TemplatePage.test.tsx | 0 .../TemplatePage/TemplatePage.tsx | 6 +- .../TemplatePage/createValidator.test.ts | 84 +++--- .../TemplatePage/createValidator.ts | 4 +- .../TemplatePage/index.ts | 0 plugins/scaffolder/src/legacy/index.ts | 16 ++ .../CustomFieldExplorer.tsx | 13 +- .../DirectoryEditorContext.tsx | 0 .../TemplateEditorPage/DryRunContext.test.tsx | 0 .../TemplateEditorPage/DryRunContext.tsx | 0 .../DryRunResults/DryRunResults.test.tsx | 0 .../DryRunResults/DryRunResults.tsx | 0 .../DryRunResults/DryRunResultsList.test.tsx | 0 .../DryRunResults/DryRunResultsList.tsx | 0 .../DryRunResults/DryRunResultsSplitView.tsx | 0 .../DryRunResults/DryRunResultsView.test.tsx | 0 .../DryRunResults/DryRunResultsView.tsx | 6 +- .../TemplateEditorPage/DryRunResults/index.ts | 0 .../TemplateEditorPage/TemplateEditor.tsx | 14 +- .../TemplateEditorBrowser.test.tsx | 0 .../TemplateEditorBrowser.tsx | 0 .../TemplateEditorPage/TemplateEditorForm.tsx | 12 +- .../TemplateEditorIntro.tsx | 0 .../TemplateEditorPage/TemplateEditorPage.tsx | 10 +- .../TemplateEditorTextArea.tsx | 0 .../TemplateFormPreviewer.tsx | 10 +- .../TemplateListPage/TemplateListPage.tsx | 2 +- .../TemplateWizardPage/TemplateWizardPage.tsx | 18 +- plugins/scaffolder/src/next/index.ts | 1 - plugins/scaffolder/src/plugin.tsx | 6 +- 85 files changed, 311 insertions(+), 1065 deletions(-) create mode 100644 plugins/scaffolder-react/src/components/ReviewStep.tsx create mode 100644 plugins/scaffolder-react/src/components/index.ts rename plugins/scaffolder-react/src/{next => components}/types.ts (50%) rename plugins/scaffolder/src/{next => components}/OngoingTask/ContextMenu.tsx (100%) rename plugins/scaffolder/src/{next => components}/OngoingTask/OngoingTask.test.tsx (100%) rename plugins/scaffolder/src/{next => components}/OngoingTask/OngoingTask.tsx (100%) rename plugins/scaffolder/src/{next => components}/OngoingTask/index.ts (100%) rename plugins/scaffolder/src/{next => components}/Router/Router.test.tsx (94%) rename plugins/scaffolder/src/{next => components}/Router/Router.tsx (77%) rename plugins/scaffolder/src/{next => components}/Router/index.ts (87%) delete mode 100644 plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx delete mode 100644 plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx delete mode 100644 plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx delete mode 100644 plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.test.tsx delete mode 100644 plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/FieldOverrides/DescriptionField.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/FieldOverrides/index.ts (100%) rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/MultistepJsonForm.test.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/MultistepJsonForm.tsx (98%) rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/ReviewStep.tsx (98%) rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/index.ts (100%) rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/schema.test.ts (100%) rename plugins/scaffolder/src/{components => legacy}/MultistepJsonForm/schema.ts (100%) rename plugins/scaffolder/src/{components => legacy}/Router.tsx (91%) rename plugins/scaffolder/src/{components => legacy}/ScaffolderPage/ScaffolderPage.tsx (98%) rename plugins/scaffolder/src/{components => legacy}/ScaffolderPage/ScaffolderPageContextMenu.test.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/ScaffolderPage/ScaffolderPageContextMenu.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/ScaffolderPage/index.ts (100%) rename plugins/scaffolder/src/{components => legacy}/TaskPage/IconLink.test.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TaskPage/IconLink.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TaskPage/TaskErrors.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TaskPage/TaskPage.tsx (99%) rename plugins/scaffolder/src/{components => legacy}/TaskPage/TaskPageLinks.test.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TaskPage/TaskPageLinks.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TaskPage/index.ts (100%) rename plugins/scaffolder/src/{components => legacy}/TemplateCard/TemplateCard.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TemplateCard/index.ts (100%) rename plugins/scaffolder/src/{components => legacy}/TemplateEditorPage/TemplateEditorPage.tsx (82%) rename plugins/scaffolder/src/{components => legacy}/TemplateEditorPage/index.ts (93%) rename plugins/scaffolder/src/{components => legacy}/TemplateList/TemplateList.test.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TemplateList/TemplateList.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TemplateList/index.ts (100%) rename plugins/scaffolder/src/{components => legacy}/TemplatePage/TemplatePage.test.tsx (100%) rename plugins/scaffolder/src/{components => legacy}/TemplatePage/TemplatePage.tsx (97%) rename plugins/scaffolder/src/{components => legacy}/TemplatePage/createValidator.test.ts (73%) rename plugins/scaffolder/src/{components => legacy}/TemplatePage/createValidator.ts (95%) rename plugins/scaffolder/src/{components => legacy}/TemplatePage/index.ts (100%) create mode 100644 plugins/scaffolder/src/legacy/index.ts rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DirectoryEditorContext.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunContext.test.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunContext.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/DryRunResults.test.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/DryRunResults.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/DryRunResultsList.test.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/DryRunResultsSplitView.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/DryRunResultsView.test.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/DryRunResultsView.tsx (96%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/DryRunResults/index.ts (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/TemplateEditorBrowser.test.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/TemplateEditorBrowser.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/TemplateEditorIntro.tsx (100%) rename plugins/scaffolder/src/{components => next}/TemplateEditorPage/TemplateEditorTextArea.tsx (100%) diff --git a/plugins/scaffolder-react/src/components/ReviewStep.tsx b/plugins/scaffolder-react/src/components/ReviewStep.tsx new file mode 100644 index 0000000000..eb2f165350 --- /dev/null +++ b/plugins/scaffolder-react/src/components/ReviewStep.tsx @@ -0,0 +1,15 @@ +/* + * 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. + */ 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/next/types.ts b/plugins/scaffolder-react/src/components/types.ts similarity index 50% rename from plugins/scaffolder-react/src/next/types.ts rename to plugins/scaffolder-react/src/components/types.ts index 192fdf4146..f6e186a56f 100644 --- a/plugins/scaffolder-react/src/next/types.ts +++ b/plugins/scaffolder-react/src/components/types.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. @@ -14,18 +14,42 @@ * limitations under the License. */ +import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import type { FormProps as SchemaFormProps } from '@rjsf/core-v5'; +import { UiSchema } from '@rjsf/utils'; +import { JsonObject } from '@backstage/types'; -// 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. +/** @public */ +export type TemplateGroupFilter = { + title?: React.ReactNode; + filter: (entity: TemplateEntityV1beta3) => boolean; +}; /** - * Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderpage` + * Any `@rjsf/core` form properties that are publicly exposed to the `ScaffolderPage` * - * @alpha + * @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 395a15f902..5372a8cf7e 100644 --- a/plugins/scaffolder-react/src/extensions/index.tsx +++ b/plugins/scaffolder-react/src/extensions/index.tsx @@ -19,6 +19,7 @@ import { FieldExtensionOptions, FieldExtensionComponentProps, FieldExtensionUiSchema, + CustomFieldExtensionSchema, } from './types'; import { Extension, attachComponentData } from '@backstage/core-plugin-api'; import { UIOptionsType } from '@rjsf/utils'; @@ -77,4 +78,7 @@ export type { FieldExtensionOptions, FieldExtensionComponentProps, FieldExtensionUiSchema, + CustomFieldExtensionSchema, }; + +export * from './rjsf'; 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/legacy/extensions/index.tsx b/plugins/scaffolder-react/src/legacy/extensions/index.tsx index 449aa74c22..5276d9d31c 100644 --- a/plugins/scaffolder-react/src/legacy/extensions/index.tsx +++ b/plugins/scaffolder-react/src/legacy/extensions/index.tsx @@ -15,9 +15,9 @@ */ import { - CustomFieldValidator, - FieldExtensionOptions, - FieldExtensionComponentProps, + LegacyCustomFieldValidator, + LegacyFieldExtensionOptions, + LegacyFieldExtensionComponentProps, } from './types'; import { Extension, attachComponentData } from '@backstage/core-plugin-api'; import { FIELD_EXTENSION_KEY } from '../../extensions/keys'; @@ -32,7 +32,7 @@ export function createLegacyScaffolderFieldExtension< TReturnValue = unknown, TInputProps = unknown, >( - options: FieldExtensionOptions, + options: LegacyFieldExtensionOptions, ): Extension> { return { expose() { @@ -50,7 +50,7 @@ export function createLegacyScaffolderFieldExtension< } export type { - CustomFieldValidator, - FieldExtensionOptions, - FieldExtensionComponentProps, + LegacyCustomFieldValidator, + LegacyFieldExtensionOptions, + LegacyFieldExtensionComponentProps, }; diff --git a/plugins/scaffolder-react/src/legacy/extensions/types.ts b/plugins/scaffolder-react/src/legacy/extensions/types.ts index 1c94626b03..80b2903b09 100644 --- a/plugins/scaffolder-react/src/legacy/extensions/types.ts +++ b/plugins/scaffolder-react/src/legacy/extensions/types.ts @@ -22,7 +22,7 @@ import { CustomFieldExtensionSchema } from '../../extensions/types'; * * @alpha */ -export type CustomFieldValidator = ( +export type LegacyCustomFieldValidator = ( data: TFieldReturnValue, field: FieldValidation, context: { apiHolder: ApiHolder }, @@ -34,15 +34,15 @@ export type CustomFieldValidator = ( * * @alpha */ -export type FieldExtensionOptions< +export type LegacyFieldExtensionOptions< TFieldReturnValue = unknown, TInputProps = unknown, > = { name: string; component: ( - props: FieldExtensionComponentProps, + props: LegacyFieldExtensionComponentProps, ) => JSX.Element | null; - validation?: CustomFieldValidator; + validation?: LegacyCustomFieldValidator; schema?: CustomFieldExtensionSchema; }; @@ -52,7 +52,7 @@ export type FieldExtensionOptions< * * @alpha */ -export interface FieldExtensionComponentProps< +export interface LegacyFieldExtensionComponentProps< TFieldReturnValue, TUiOptions = unknown, > extends FieldProps { diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 3d2e1233c0..9bb8084ac3 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -25,8 +25,13 @@ import { } from '@material-ui/core'; import { type IChangeEvent } from '@rjsf/core-v5'; 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 ? ( { fields={{ ...FieldOverrides, ...extensions }} showErrorList={false} onChange={handleChange} - {...(props.FormProps ?? {})} + {...(props.formProps ?? {})} >
+ ) : // 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/TemplateGroups/TemplateGroups.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx index f0f06b3410..ec08505c06 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 '../../../components'; +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..c0d6b40333 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 '../../../components'; 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/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 100% rename from plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx rename to plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx 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 94% rename from plugins/scaffolder/src/next/Router/Router.test.tsx rename to plugins/scaffolder/src/components/Router/Router.test.tsx index 3d52dd0dd0..2dc67a76be 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,6 +25,7 @@ import { createScaffolderLayout, ScaffolderLayouts, } from '@backstage/plugin-scaffolder-react'; +import { TemplateListPage, TemplateWizardPage } from '../../next'; jest.mock('../TemplateListPage', () => ({ TemplateListPage: jest.fn(() => null), @@ -52,7 +51,7 @@ describe('Router', () => { const { getByText } = await renderInTestApp( <>foobar, + EXPERIMENTAL_TemplateListPageComponent: () => <>foobar, }} />, { @@ -77,7 +76,7 @@ describe('Router', () => { const { getByText } = await renderInTestApp( <>foobar, + EXPERIMENTAL_TemplateWizardPageComponent: () => <>foobar, }} />, { @@ -93,7 +92,7 @@ describe('Router', () => { await renderInTestApp( ; 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; + formProps?: FormProps; contextMenu?: { /** Whether to show a link to the template editor */ editor?: boolean; @@ -82,21 +87,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 +114,7 @@ export const Router = (props: PropsWithChildren) => { customFieldExtension => customFieldExtension.name === name, ), ), - ] as NextFieldExtensionOptions[]; + ] as FieldExtensionOptions[]; const customLayouts = useCustomLayouts(outlet); @@ -130,7 +138,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/CustomFieldExplorer.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx deleted file mode 100644 index e470267b23..0000000000 --- a/plugins/scaffolder/src/components/TemplateEditorPage/CustomFieldExplorer.tsx +++ /dev/null @@ -1,205 +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 { StreamLanguage } from '@codemirror/language'; -import { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml'; -import { - Button, - Card, - CardContent, - CardHeader, - FormControl, - IconButton, - InputLabel, - makeStyles, - MenuItem, - Select, -} from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import { ISubmitEvent, withTheme } from '@rjsf/core'; -import { Theme as MuiTheme } from '@rjsf/material-ui'; -import CodeMirror from '@uiw/react-codemirror'; -import React, { useCallback, useMemo, useState } from 'react'; -import yaml from 'yaml'; -import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react'; -import * as fieldOverrides from '../MultistepJsonForm/FieldOverrides'; -import { TemplateEditorForm } from './TemplateEditorForm'; - -const Form = withTheme(MuiTheme); - -const useStyles = makeStyles(theme => ({ - root: { - gridArea: 'pageContent', - display: 'grid', - gridTemplateAreas: ` - "controls controls" - "fieldForm preview" - `, - gridTemplateRows: 'auto 1fr', - gridTemplateColumns: '1fr 1fr', - }, - controls: { - gridArea: 'controls', - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - margin: theme.spacing(1), - }, - fieldForm: { - gridArea: 'fieldForm', - }, - preview: { - gridArea: 'preview', - }, -})); - -export const CustomFieldExplorer = ({ - customFieldExtensions = [], - onClose, -}: { - customFieldExtensions?: FieldExtensionOptions[]; - onClose?: () => void; -}) => { - const classes = useStyles(); - const fieldOptions = customFieldExtensions.filter(field => !!field.schema); - const [selectedField, setSelectedField] = useState(fieldOptions[0]); - const [fieldFormState, setFieldFormState] = useState({}); - const [formState, setFormState] = useState({}); - const [refreshKey, setRefreshKey] = useState(Date.now()); - const sampleFieldTemplate = useMemo( - () => - yaml.stringify({ - parameters: [ - { - title: `${selectedField.name} Example`, - properties: { - [selectedField.name]: { - type: selectedField.schema?.returnValue?.type, - 'ui:field': selectedField.name, - 'ui:options': fieldFormState, - }, - }, - }, - ], - }), - [fieldFormState, selectedField], - ); - - const fieldComponents = useMemo(() => { - return Object.fromEntries( - customFieldExtensions.map(({ name, component }) => [name, component]), - ); - }, [customFieldExtensions]); - - const handleSelectionChange = useCallback( - (selection: FieldExtensionOptions) => { - setSelectedField(selection); - setFieldFormState({}); - setFormState({}); - }, - [setFieldFormState, setFormState, setSelectedField], - ); - - const handleFieldConfigChange = useCallback( - (state: {}) => { - setFieldFormState(state); - setFormState({}); - // Force TemplateEditorForm to re-render since some fields - // may not be responsive to ui:option changes - setRefreshKey(Date.now()); - }, - [setFieldFormState, setRefreshKey], - ); - - return ( -
-
- - - Choose Custom Field Extension - - - - - - - -
-
- - - -
) => - handleFieldConfigChange(e.formData) - } - schema={selectedField.schema?.uiOptions || {}} - > - -
- - -
-
- - - - - - - null} - /> -
-
- ); -}; diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx deleted file mode 100644 index e07434aff7..0000000000 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditor.tsx +++ /dev/null @@ -1,94 +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 { makeStyles } from '@material-ui/core'; -import React, { useState } from 'react'; -import type { - FieldExtensionOptions, - LayoutOptions, -} from '@backstage/plugin-scaffolder-react'; -import { TemplateDirectoryAccess } from '../../lib/filesystem'; -import { DirectoryEditorProvider } from './DirectoryEditorContext'; -import { DryRunProvider } from './DryRunContext'; -import { DryRunResults } from './DryRunResults'; -import { TemplateEditorBrowser } from './TemplateEditorBrowser'; -import { TemplateEditorForm } from './TemplateEditorForm'; -import { TemplateEditorTextArea } from './TemplateEditorTextArea'; - -const useStyles = makeStyles({ - // Reset and fix sizing to make sure scrolling behaves correctly - root: { - gridArea: 'pageContent', - - display: 'grid', - gridTemplateAreas: ` - "browser editor preview" - "results results results" - `, - gridTemplateColumns: '1fr 3fr 2fr', - gridTemplateRows: '1fr auto', - }, - browser: { - gridArea: 'browser', - overflow: 'auto', - }, - editor: { - gridArea: 'editor', - overflow: 'auto', - }, - preview: { - gridArea: 'preview', - overflow: 'auto', - }, - results: { - gridArea: 'results', - }, -}); - -export const TemplateEditor = (props: { - directory: TemplateDirectoryAccess; - fieldExtensions?: FieldExtensionOptions[]; - layouts?: LayoutOptions[]; - onClose?: () => void; -}) => { - const classes = useStyles(); - - const [errorText, setErrorText] = useState(); - - return ( - - -
-
- -
-
- -
-
- -
-
- -
-
- - - ); -}; diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx deleted file mode 100644 index 2a726110b8..0000000000 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorForm.tsx +++ /dev/null @@ -1,260 +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 { useApiHolder } from '@backstage/core-plugin-api'; -import { JsonObject, JsonValue } from '@backstage/types'; -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, - LayoutOptions, - TemplateParameterSchema, -} from '@backstage/plugin-scaffolder-react'; -import { MultistepJsonForm } from '../MultistepJsonForm'; -import { createValidator } from '../TemplatePage'; -import { useDirectoryEditor } from './DirectoryEditorContext'; -import { useDryRun } from './DryRunContext'; - -const useStyles = makeStyles({ - containerWrapper: { - position: 'relative', - width: '100%', - height: '100%', - }, - container: { - position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0, - overflow: 'auto', - }, -}); - -interface ErrorBoundaryProps { - invalidator: unknown; - setErrorText(errorText: string | undefined): void; - children: ReactNode; -} - -interface ErrorBoundaryState { - shouldRender: boolean; -} - -class ErrorBoundary extends Component { - state = { - shouldRender: true, - }; - - componentDidUpdate(prevProps: { invalidator: unknown }) { - if (prevProps.invalidator !== this.props.invalidator) { - this.setState({ shouldRender: true }); - } - } - - componentDidCatch(error: Error) { - this.props.setErrorText(error.message); - this.setState({ shouldRender: false }); - } - - render() { - return this.state.shouldRender ? this.props.children : null; - } -} - -interface TemplateEditorFormProps { - content?: string; - /** Setting this to true will cause the content to be parsed as if it is the template entity spec */ - contentIsSpec?: boolean; - data: JsonObject; - onUpdate: (data: JsonObject) => void; - setErrorText: (errorText?: string) => void; - - onDryRun?: (data: JsonObject) => Promise; - fieldExtensions?: FieldExtensionOptions[]; - layouts?: LayoutOptions[]; -} - -function isJsonObject(value: JsonValue | undefined): value is JsonObject { - return typeof value === 'object' && value !== null && !Array.isArray(value); -} - -/** Shows the a template form that is parsed from the provided content */ -export function TemplateEditorForm(props: TemplateEditorFormProps) { - const { - content, - contentIsSpec, - data, - onUpdate, - onDryRun, - setErrorText, - fieldExtensions = [], - layouts = [], - } = props; - const classes = useStyles(); - const apiHolder = useApiHolder(); - - const [steps, setSteps] = useState(); - - const fields = useMemo(() => { - return Object.fromEntries( - fieldExtensions.map(({ name, component }) => [name, component]), - ); - }, [fieldExtensions]); - - useDebounce( - () => { - try { - if (!content) { - setSteps(undefined); - return; - } - const parsed: JsonValue = yaml - .parseAllDocuments(content) - .filter(c => c) - .map(c => c.toJSON())[0]; - - if (!isJsonObject(parsed)) { - setSteps(undefined); - return; - } - - let rootObj = parsed; - if (!contentIsSpec) { - const isTemplate = - String(parsed.kind).toLocaleLowerCase('en-US') === 'template'; - if (!isTemplate) { - setSteps(undefined); - return; - } - - rootObj = isJsonObject(parsed.spec) ? parsed.spec : {}; - } - - const { parameters } = rootObj; - - if (!Array.isArray(parameters)) { - setErrorText('Template parameters must be an array'); - setSteps(undefined); - return; - } - - const fieldValidators = Object.fromEntries( - fieldExtensions.map(({ name, validation }) => [name, validation]), - ); - - setErrorText(); - setSteps( - parameters.flatMap(param => - isJsonObject(param) - ? [ - { - title: String(param.title), - schema: param, - validate: createValidator(param, fieldValidators, { - apiHolder, - }), - }, - ] - : [], - ), - ); - } catch (e) { - setErrorText(e.message); - } - }, - 250, - [contentIsSpec, content, apiHolder], - ); - - if (!steps) { - return null; - } - - return ( -
-
- - onUpdate(e.formData)} - onReset={() => onUpdate({})} - finishButtonLabel={onDryRun && 'Try It'} - onFinish={onDryRun && (() => onDryRun(data))} - layouts={layouts} - /> - -
-
- ); -} - -/** A version of the TemplateEditorForm that is connected to the DirectoryEditor and DryRun contexts */ -export function TemplateEditorFormDirectoryEditorDryRun( - props: Pick< - TemplateEditorFormProps, - 'setErrorText' | 'fieldExtensions' | 'layouts' - >, -) { - const { setErrorText, fieldExtensions = [], layouts } = props; - const dryRun = useDryRun(); - - const directoryEditor = useDirectoryEditor(); - const { selectedFile } = directoryEditor; - - const [data, setData] = useState({}); - - const handleDryRun = async () => { - if (!selectedFile) { - return; - } - - try { - await dryRun.execute({ - templateContent: selectedFile.content, - values: data, - files: directoryEditor.files, - }); - setErrorText(); - } catch (e) { - setErrorText(String(e.cause || e)); - throw e; - } - }; - - const content = - selectedFile && selectedFile.path.match(/\.ya?ml$/) - ? selectedFile.content - : undefined; - - return ( - - ); -} - -TemplateEditorForm.DirectoryEditorDryRun = - TemplateEditorFormDirectoryEditorDryRun; 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/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx deleted file mode 100644 index 9442394177..0000000000 --- a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateFormPreviewer.tsx +++ /dev/null @@ -1,223 +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 { Entity } from '@backstage/catalog-model'; -import { alertApiRef, useApi } from '@backstage/core-plugin-api'; -import { - catalogApiRef, - humanizeEntityRef, -} from '@backstage/plugin-catalog-react'; -import { - FormControl, - IconButton, - InputLabel, - LinearProgress, - makeStyles, - MenuItem, - Select, -} from '@material-ui/core'; -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 { 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: - - title: Fill in some steps - required: - - name - properties: - name: - title: Name - type: string - description: Unique name of the component - owner: - title: Owner - type: string - description: Owner of the component - ui:field: OwnerPicker - ui:options: - catalogFilter: - kind: Group - - title: Choose a location - required: - - repoUrl - properties: - repoUrl: - title: Repository Location - type: string - ui:field: RepoUrlPicker - ui:options: - allowedHosts: - - github.com -steps: - - id: fetch-base - name: Fetch Base - action: fetch:template - input: - url: ./template - values: - name: \${{parameters.name}} -`; - -type TemplateOption = { - label: string; - value: Entity; -}; - -const useStyles = makeStyles(theme => ({ - root: { - gridArea: 'pageContent', - display: 'grid', - gridTemplateAreas: ` - "controls controls" - "textArea preview" - `, - gridTemplateRows: 'auto 1fr', - gridTemplateColumns: '1fr 1fr', - }, - controls: { - gridArea: 'controls', - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - margin: theme.spacing(1), - }, - textArea: { - gridArea: 'textArea', - }, - preview: { - gridArea: 'preview', - }, -})); - -export const TemplateFormPreviewer = ({ - defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML, - customFieldExtensions = [], - onClose, - layouts = [], -}: { - defaultPreviewTemplate?: string; - customFieldExtensions?: FieldExtensionOptions[]; - onClose?: () => void; - layouts?: LayoutOptions[]; -}) => { - const classes = useStyles(); - const alertApi = useApi(alertApiRef); - const catalogApi = useApi(catalogApiRef); - const [selectedTemplate, setSelectedTemplate] = useState(''); - const [errorText, setErrorText] = useState(); - const [templateOptions, setTemplateOptions] = useState([]); - const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate); - const [formState, setFormState] = useState({}); - - const { loading } = useAsync( - () => - catalogApi - .getEntities({ - filter: { kind: 'template' }, - fields: [ - 'kind', - 'metadata.namespace', - 'metadata.name', - 'metadata.title', - 'spec.parameters', - 'spec.steps', - 'spec.output', - ], - }) - .then(({ items }) => - setTemplateOptions( - items.map(template => ({ - label: - template.metadata.title ?? - humanizeEntityRef(template, { defaultKind: 'template' }), - value: template, - })), - ), - ) - .catch(e => - alertApi.post({ - message: `Error loading exisiting templates: ${e.message}`, - severity: 'error', - }), - ), - [catalogApi], - ); - - const handleSelectChange = useCallback( - // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types - (selected: any) => { - setSelectedTemplate(selected); - setTemplateYaml(yaml.stringify(selected.spec)); - }, - [setTemplateYaml], - ); - - return ( - <> - {loading && } -
-
- - - Load Existing Template - - - - - - - -
-
- -
-
- -
-
- - ); -}; 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..300e23ee89 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 { FieldProps } from '@rjsf/utils'; const makeEntity = (kind: string, namespace: string, name: string): Entity => ({ apiVersion: 'scaffolder.backstage.io/v1beta3', 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 100% rename from plugins/scaffolder/src/components/MultistepJsonForm/FieldOverrides/DescriptionField.tsx rename to plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/DescriptionField.tsx 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 98% rename from plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx rename to plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx index d8299a9b5f..eddbbff4bf 100644 --- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx +++ b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx @@ -35,11 +35,13 @@ 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 { 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); diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/ReviewStep.tsx b/plugins/scaffolder/src/legacy/MultistepJsonForm/ReviewStep.tsx similarity index 98% rename from plugins/scaffolder/src/components/MultistepJsonForm/ReviewStep.tsx rename to plugins/scaffolder/src/legacy/MultistepJsonForm/ReviewStep.tsx index 112b96bdf1..7d9e81d91b 100644 --- a/plugins/scaffolder/src/components/MultistepJsonForm/ReviewStep.tsx +++ b/plugins/scaffolder/src/legacy/MultistepJsonForm/ReviewStep.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { Content, StructuredMetadataTable } from '@backstage/core-components'; import { UiSchema } from '@rjsf/core'; import { JsonObject } from '@backstage/types'; -import { ReviewStepProps } from '../types'; +import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; export function getReviewData( formData: Record, diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/index.ts b/plugins/scaffolder/src/legacy/MultistepJsonForm/index.ts similarity index 100% rename from plugins/scaffolder/src/components/MultistepJsonForm/index.ts rename to plugins/scaffolder/src/legacy/MultistepJsonForm/index.ts diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/schema.test.ts b/plugins/scaffolder/src/legacy/MultistepJsonForm/schema.test.ts similarity index 100% rename from plugins/scaffolder/src/components/MultistepJsonForm/schema.test.ts rename to plugins/scaffolder/src/legacy/MultistepJsonForm/schema.test.ts diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/schema.ts b/plugins/scaffolder/src/legacy/MultistepJsonForm/schema.ts similarity index 100% rename from plugins/scaffolder/src/components/MultistepJsonForm/schema.ts rename to plugins/scaffolder/src/legacy/MultistepJsonForm/schema.ts diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/legacy/Router.tsx similarity index 91% rename from plugins/scaffolder/src/components/Router.tsx rename to plugins/scaffolder/src/legacy/Router.tsx index 3ceda359cc..ac183b9470 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/legacy/Router.tsx @@ -21,18 +21,17 @@ import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { ScaffolderPage } from './ScaffolderPage'; import { TemplatePage } from './TemplatePage'; import { TaskPage } from './TaskPage'; -import { ActionsPage } from './ActionsPage'; -import { TemplateEditorPage } from './TemplateEditorPage'; +import { ActionsPage } from '../components/ActionsPage'; import { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../extensions/default'; import { useRouteRef, useRouteRefParams } from '@backstage/core-plugin-api'; +import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha'; import { - FieldExtensionOptions, + ReviewStepProps, SecretsContextProvider, useCustomFieldExtensions, useCustomLayouts, } from '@backstage/plugin-scaffolder-react'; -import { ListTasksPage } from './ListTasksPage'; -import { ReviewStepProps } from './types'; +import { ListTasksPage } from '../components/ListTasksPage'; import { actionsRouteRef, editRouteRef, @@ -41,12 +40,13 @@ import { scaffolderTaskRouteRef, selectedTemplateRouteRef, } from '../routes'; +import { TemplateEditorPage } from './TemplateEditorPage'; /** * The props for the entrypoint `ScaffolderPage` component the plugin. - * @public + * @alpha */ -export type RouterProps = { +export type LegacyRouterProps = { components?: { ReviewStepComponent?: ComponentType; TemplateCardComponent?: @@ -77,11 +77,11 @@ export type RouterProps = { }; /** - * The main entrypoint `Router` for the `ScaffolderPlugin`. + * The legacy router * - * @public + * @alpha */ -export const Router = (props: RouterProps) => { +export const LegacyRouter = (props: LegacyRouterProps) => { const { groups, templateFilter, @@ -95,7 +95,9 @@ export const Router = (props: RouterProps) => { const outlet = useOutlet(); const TaskPageElement = TaskPageComponent ?? TaskPage; - const customFieldExtensions = useCustomFieldExtensions(outlet); + const customFieldExtensions = + useCustomFieldExtensions(outlet); + const fieldExtensions = [ ...customFieldExtensions, ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter( @@ -104,7 +106,7 @@ export const Router = (props: RouterProps) => { customFieldExtension => customFieldExtension.name === name, ), ), - ] as FieldExtensionOptions[]; + ] as LegacyFieldExtensionOptions[]; const customLayouts = useCustomLayouts(outlet); diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPage.tsx similarity index 98% rename from plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx rename to plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPage.tsx index 40435573e9..54122eddf0 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPage.tsx @@ -34,11 +34,11 @@ import { } from '@backstage/plugin-catalog-react'; import React, { ComponentType } from 'react'; import { TemplateList } from '../TemplateList'; -import { TemplateTypePicker } from '../TemplateTypePicker'; import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; import { usePermission } from '@backstage/plugin-permission-react'; import { ScaffolderPageContextMenu } from './ScaffolderPageContextMenu'; import { registerComponentRouteRef } from '../../routes'; +import { TemplateTypePicker } from '../../components'; export type ScaffolderPageProps = { TemplateCardComponent?: diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.test.tsx b/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.test.tsx similarity index 100% rename from plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.test.tsx rename to plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.test.tsx diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx b/plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.tsx similarity index 100% rename from plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx rename to plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.tsx diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.ts b/plugins/scaffolder/src/legacy/ScaffolderPage/index.ts similarity index 100% rename from plugins/scaffolder/src/components/ScaffolderPage/index.ts rename to plugins/scaffolder/src/legacy/ScaffolderPage/index.ts diff --git a/plugins/scaffolder/src/components/TaskPage/IconLink.test.tsx b/plugins/scaffolder/src/legacy/TaskPage/IconLink.test.tsx similarity index 100% rename from plugins/scaffolder/src/components/TaskPage/IconLink.test.tsx rename to plugins/scaffolder/src/legacy/TaskPage/IconLink.test.tsx diff --git a/plugins/scaffolder/src/components/TaskPage/IconLink.tsx b/plugins/scaffolder/src/legacy/TaskPage/IconLink.tsx similarity index 100% rename from plugins/scaffolder/src/components/TaskPage/IconLink.tsx rename to plugins/scaffolder/src/legacy/TaskPage/IconLink.tsx diff --git a/plugins/scaffolder/src/components/TaskPage/TaskErrors.tsx b/plugins/scaffolder/src/legacy/TaskPage/TaskErrors.tsx similarity index 100% rename from plugins/scaffolder/src/components/TaskPage/TaskErrors.tsx rename to plugins/scaffolder/src/legacy/TaskPage/TaskErrors.tsx diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx similarity index 99% rename from plugins/scaffolder/src/components/TaskPage/TaskPage.tsx rename to plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx index 78cdc5d935..7ba7c2c9f7 100644 --- a/plugins/scaffolder/src/components/TaskPage/TaskPage.tsx +++ b/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx @@ -237,7 +237,7 @@ const hasLinks = ({ links = [] }: ScaffolderTaskOutput): boolean => * TaskPageProps for constructing a TaskPage * @param loadingText - Optional loading text shown before a task begins executing. * - * @public + * @deprecated - this is a useless type that is no longer used. */ export type TaskPageProps = { loadingText?: string; @@ -246,7 +246,7 @@ export type TaskPageProps = { /** * TaskPage for showing the status of the taskId provided as a param * - * @public + * @alpha */ export const TaskPage = (props: TaskPageProps) => { const { loadingText } = props; diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.test.tsx b/plugins/scaffolder/src/legacy/TaskPage/TaskPageLinks.test.tsx similarity index 100% rename from plugins/scaffolder/src/components/TaskPage/TaskPageLinks.test.tsx rename to plugins/scaffolder/src/legacy/TaskPage/TaskPageLinks.test.tsx diff --git a/plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx b/plugins/scaffolder/src/legacy/TaskPage/TaskPageLinks.tsx similarity index 100% rename from plugins/scaffolder/src/components/TaskPage/TaskPageLinks.tsx rename to plugins/scaffolder/src/legacy/TaskPage/TaskPageLinks.tsx diff --git a/plugins/scaffolder/src/components/TaskPage/index.ts b/plugins/scaffolder/src/legacy/TaskPage/index.ts similarity index 100% rename from plugins/scaffolder/src/components/TaskPage/index.ts rename to plugins/scaffolder/src/legacy/TaskPage/index.ts diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx similarity index 100% rename from plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx rename to plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx diff --git a/plugins/scaffolder/src/components/TemplateCard/index.ts b/plugins/scaffolder/src/legacy/TemplateCard/index.ts similarity index 100% rename from plugins/scaffolder/src/components/TemplateCard/index.ts rename to plugins/scaffolder/src/legacy/TemplateCard/index.ts diff --git a/plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx similarity index 82% rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorPage.tsx rename to plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx index ebb763e145..e65869ad0e 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 { TemplateEditor } from './TemplateEditor'; -import { TemplateFormPreviewer } from './TemplateFormPreviewer'; -import { - type FieldExtensionOptions, - type LayoutOptions, -} from '@backstage/plugin-scaffolder-react'; +import { type LayoutOptions } from '@backstage/plugin-scaffolder-react'; +import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha'; +import { CustomFieldExplorer } from '../../next/TemplateEditorPage/CustomFieldExplorer'; +import { TemplateFormPreviewer } from '../../next/TemplateEditorPage/TemplateFormPreviewer'; +import { TemplateEditor } from '../../next/TemplateEditorPage/TemplateEditor'; +import { TemplateEditorIntro } from '../../next/TemplateEditorPage/TemplateEditorIntro'; 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/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 97% rename from plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx rename to plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx index c615649f93..a5cac1ef54 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; diff --git a/plugins/scaffolder/src/components/TemplatePage/createValidator.test.ts b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.test.ts similarity index 73% rename from plugins/scaffolder/src/components/TemplatePage/createValidator.test.ts rename to plugins/scaffolder/src/legacy/TemplatePage/createValidator.test.ts index 1858e40241..117b54b0d2 100644 --- a/plugins/scaffolder/src/components/TemplatePage/createValidator.test.ts +++ b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.test.ts @@ -15,7 +15,7 @@ */ import { createValidator } from './createValidator'; -import { CustomFieldValidator } from '@backstage/plugin-scaffolder-react'; +import { LegacyCustomFieldValidator } from '@backstage/plugin-scaffolder-react/alpha'; import { ApiHolder } from '@backstage/core-plugin-api'; import { FieldValidation, FormValidation } from '@rjsf/core'; @@ -26,49 +26,51 @@ type CustomLinkType = { }; describe('createValidator', () => { - 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(() => { diff --git a/plugins/scaffolder/src/components/TemplatePage/createValidator.ts b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts similarity index 95% rename from plugins/scaffolder/src/components/TemplatePage/createValidator.ts rename to plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts index 8bfe8c8313..04325ce5e5 100644 --- a/plugins/scaffolder/src/components/TemplatePage/createValidator.ts +++ b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { CustomFieldValidator } from '@backstage/plugin-scaffolder-react'; +import { LegacyCustomFieldValidator } from '@backstage/plugin-scaffolder-react/alpha'; import { FormValidation } from '@rjsf/core'; 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; }, 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..83b5717fbe --- /dev/null +++ b/plugins/scaffolder/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 { LegacyRouter, type LegacyRouterProps } from './Router'; diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/CustomFieldExplorer.tsx index 15298dff8a..af195b866a 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) => ( @@ -152,6 +150,7 @@ export const CustomFieldExplorer = ({
[]; + 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 100% rename from plugins/scaffolder/src/components/TemplateEditorPage/TemplateEditorBrowser.tsx rename to plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx index 898487e200..15c53d6d81 100644 --- a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx +++ b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorForm.tsx @@ -22,13 +22,11 @@ import yaml from 'yaml'; import { LayoutOptions, TemplateParameterSchema, + FieldExtensionOptions, } from '@backstage/plugin-scaffolder-react'; -import { - NextFieldExtensionOptions, - Stepper, -} from '@backstage/plugin-scaffolder-react/alpha'; -import { useDryRun } from '../../components/TemplateEditorPage/DryRunContext'; -import { useDirectoryEditor } from '../../components/TemplateEditorPage/DirectoryEditorContext'; +import { Stepper } from '@backstage/plugin-scaffolder-react/alpha'; +import { useDryRun } from './DryRunContext'; +import { useDirectoryEditor } from './DirectoryEditorContext'; const useStyles = makeStyles({ containerWrapper: { @@ -83,7 +81,7 @@ interface TemplateEditorFormProps { contentIsSpec?: boolean; setErrorText: (errorText?: string) => void; onDryRun?: (data: JsonObject) => Promise; - fieldExtensions?: NextFieldExtensionOptions[]; + fieldExtensions?: FieldExtensionOptions[]; layouts?: LayoutOptions[]; } 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..464e23a201 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx +++ b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx @@ -26,12 +26,10 @@ import { scaffolderApiRef, useTemplateSecrets, type LayoutOptions, + FieldExtensionOptions, + ReviewStepProps, } from '@backstage/plugin-scaffolder-react'; -import { - FormProps, - Workflow, - NextFieldExtensionOptions, -} from '@backstage/plugin-scaffolder-react/alpha'; +import { FormProps, Workflow } from '@backstage/plugin-scaffolder-react/alpha'; import { JsonValue } from '@backstage/types'; import { Header, Page } from '@backstage/core-components'; @@ -45,9 +43,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 +91,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/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, }), ); From f0e021aeddbb4e08c095b8b0a2178aa584b3d14d Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 28 Sep 2023 13:50:23 +0200 Subject: [PATCH 03/14] chore: fixing some more work Signed-off-by: blam --- packages/app/src/App.tsx | 12 +- .../scaffolder/customScaffolderExtensions.tsx | 8 +- plugins/scaffolder-react/src/alpha.ts | 2 - .../src/next/components/Form/Form.tsx | 5 +- .../next/components/Stepper/Stepper.test.tsx | 8 +- .../Stepper/createAsyncValidators.test.ts | 24 +- .../Stepper/createAsyncValidators.ts | 12 +- plugins/scaffolder-react/src/next/index.ts | 1 - plugins/scaffolder/dev/index.tsx | 10 +- .../fields/EntityPicker/EntityPicker.test.tsx | 6 +- .../MyGroupsPicker/MyGroupsPicker.test.tsx | 6 +- .../fields/OwnerPicker/OwnerPicker.test.tsx | 4 +- .../RepoUrlPicker/RepoUrlPicker.test.tsx | 2 +- .../CustomFieldExplorer.tsx | 195 +++++++++++++++ .../TemplateEditorPage/TemplateEditor.tsx | 92 +++++++ .../TemplateEditorPage/TemplateEditorForm.tsx | 236 ++++++++++++++++++ .../TemplateEditorPage/TemplateEditorPage.tsx | 6 +- .../TemplateFormPreviewer.tsx | 217 ++++++++++++++++ plugins/scaffolder/src/legacy/index.ts | 1 + .../TemplateEditorBrowser.tsx | 2 +- .../TemplateWizardPage/TemplateWizardPage.tsx | 3 +- 21 files changed, 792 insertions(+), 60 deletions(-) create mode 100644 plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx create mode 100644 plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditor.tsx create mode 100644 plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx create mode 100644 plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index f2b7d66b21..cc3787a8bc 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -64,7 +64,7 @@ import { GcpProjectsPage } from '@backstage/plugin-gcp-projects'; import { HomepageCompositionRoot, VisitListener } from '@backstage/plugin-home'; import { LighthousePage } from '@backstage/plugin-lighthouse'; import { NewRelicPage } from '@backstage/plugin-newrelic'; -import { NextScaffolderPage } from '@backstage/plugin-scaffolder/alpha'; +import { LegacyScaffolderPage } from '@backstage/plugin-scaffolder/alpha'; import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; import { ScaffolderFieldExtensions, @@ -236,11 +236,11 @@ const routes = ( - + - + - + - + diff --git a/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx b/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx index b15d12979a..e236e01d79 100644 --- a/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx +++ b/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx @@ -17,10 +17,6 @@ import React from 'react'; import type { FieldValidation } from '@rjsf/utils'; import { scaffolderPlugin } from '@backstage/plugin-scaffolder'; import { TextField } from '@material-ui/core'; -import { - NextFieldExtensionComponentProps, - createNextScaffolderFieldExtension, -} from '@backstage/plugin-scaffolder-react/alpha'; import { createScaffolderFieldExtension, FieldExtensionComponentProps, @@ -67,7 +63,7 @@ export const LowerCaseValuePickerFieldExtension = scaffolderPlugin.provide( ); const MockDelayComponent = ( - props: NextFieldExtensionComponentProps<{ test?: string }>, + props: FieldExtensionComponentProps<{ test?: string }>, ) => { const { onChange, formData, rawErrors = [] } = props; return ( @@ -83,7 +79,7 @@ const MockDelayComponent = ( }; export const DelayingComponentFieldExtension = scaffolderPlugin.provide( - createNextScaffolderFieldExtension({ + createScaffolderFieldExtension({ name: 'DelayingComponent', component: MockDelayComponent, validation: async ( diff --git a/plugins/scaffolder-react/src/alpha.ts b/plugins/scaffolder-react/src/alpha.ts index f60ced6b35..224ee97c06 100644 --- a/plugins/scaffolder-react/src/alpha.ts +++ b/plugins/scaffolder-react/src/alpha.ts @@ -15,6 +15,4 @@ */ export * from './next'; -export type { FormProps } from './next'; - export * from './legacy'; diff --git a/plugins/scaffolder-react/src/next/components/Form/Form.tsx b/plugins/scaffolder-react/src/next/components/Form/Form.tsx index adfb8db930..ec644333b9 100644 --- a/plugins/scaffolder-react/src/next/components/Form/Form.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/Form.tsx @@ -14,12 +14,13 @@ * limitations under the License. */ -import { FormProps, withTheme } from '@rjsf/core-v5'; +import { withTheme } from '@rjsf/core-v5'; import React from 'react'; import { PropsWithChildren } from 'react'; import { FieldTemplate } from './FieldTemplate'; import { DescriptionFieldTemplate } from './DescriptionFieldTemplate'; import { FieldProps } from '@rjsf/utils'; +import { ScaffolderRJSFFormProps } from '../../../extensions'; // 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 @@ -30,7 +31,7 @@ const WrappedForm = withTheme(require('@rjsf/material-ui-v5').Theme); * 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( 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 2dd3825cea..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/createAsyncValidators.test.ts b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.test.ts index 65e7a5b4fd..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 5531ff26b4..a606f01d6b 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts +++ b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts @@ -19,9 +19,11 @@ 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 '../../../extensions'; import { isObject } from './utils'; -import { NextFieldExtensionUiSchema } from '../../extensions/types'; /** * @internal @@ -34,7 +36,7 @@ export const createAsyncValidators = ( rootSchema: JsonObject, validators: Record< string, - undefined | NextCustomFieldValidator + undefined | CustomFieldValidator >, context: { apiHolder: ApiHolder; @@ -53,7 +55,7 @@ export const createAsyncValidators = ( key: string, value: JsonValue | undefined, schema: JsonObject, - uiSchema: NextFieldExtensionUiSchema, + uiSchema: FieldExtensionUiSchema, ) => { const validator = validators[validatorName]; if (validator) { @@ -82,7 +84,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/index.ts b/plugins/scaffolder-react/src/next/index.ts index 5e4c9f91c1..f13bb76d7a 100644 --- a/plugins/scaffolder-react/src/next/index.ts +++ b/plugins/scaffolder-react/src/next/index.ts @@ -14,6 +14,5 @@ * limitations under the License. */ export * from './components'; -export * from './types'; export * from './lib'; export * from './hooks'; 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/src/components/fields/EntityPicker/EntityPicker.test.tsx b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx index 300e23ee89..4329b2208b 100644 --- a/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.test.tsx @@ -23,7 +23,7 @@ import { fireEvent, screen } from '@testing-library/react'; import React from 'react'; import { EntityPicker } from './EntityPicker'; import { EntityPickerProps } from './schema'; -import { FieldProps } from '@rjsf/utils'; +import { ScaffolderRJSFFieldProps as FieldProps } from '@backstage/plugin-scaffolder-react'; const makeEntity = (kind: string, namespace: string, name: string): Entity => ({ apiVersion: 'scaffolder.backstage.io/v1beta3', @@ -40,7 +40,7 @@ describe('', () => { const rawErrors: string[] = []; const formData = undefined; - let props: FieldProps; + let props: FieldProps; const catalogApi: jest.Mocked = { getLocationById: jest.fn(), @@ -77,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..be59d4d1cf 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( ', () => { 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..e9c52907f9 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; import { RepoUrlPicker } from './RepoUrlPicker'; -import Form from '@rjsf/core'; +import { Form } from '@backstage/plu'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; import { scmIntegrationsApiRef, diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx new file mode 100644 index 0000000000..c790dbd72c --- /dev/null +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx @@ -0,0 +1,195 @@ +/* + * 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 { StreamLanguage } from '@codemirror/language'; +import { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml'; +import { + Button, + Card, + CardContent, + CardHeader, + FormControl, + IconButton, + InputLabel, + makeStyles, + MenuItem, + Select, +} from '@material-ui/core'; +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 { Form } from '@backstage/plugin-scaffolder-react/alpha'; +import { TemplateEditorForm } from './TemplateEditorForm'; +import validator from '@rjsf/validator-ajv8'; +import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha'; + +const useStyles = makeStyles(theme => ({ + root: { + gridArea: 'pageContent', + display: 'grid', + gridTemplateAreas: ` + "controls controls" + "fieldForm preview" + `, + gridTemplateRows: 'auto 1fr', + gridTemplateColumns: '1fr 1fr', + }, + controls: { + gridArea: 'controls', + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + margin: theme.spacing(1), + }, + fieldForm: { + gridArea: 'fieldForm', + }, + preview: { + gridArea: 'preview', + }, +})); + +export const CustomFieldExplorer = ({ + customFieldExtensions = [], + onClose, +}: { + customFieldExtensions?: LegacyFieldExtensionOptions[]; + onClose?: () => void; +}) => { + const classes = useStyles(); + const fieldOptions = customFieldExtensions.filter(field => !!field.schema); + const [selectedField, setSelectedField] = useState(fieldOptions[0]); + const [fieldFormState, setFieldFormState] = useState({}); + const [refreshKey, setRefreshKey] = useState(Date.now()); + const sampleFieldTemplate = useMemo( + () => + yaml.stringify({ + parameters: [ + { + title: `${selectedField.name} Example`, + properties: { + [selectedField.name]: { + type: selectedField.schema?.returnValue?.type, + 'ui:field': selectedField.name, + 'ui:options': fieldFormState, + }, + }, + }, + ], + }), + [fieldFormState, selectedField], + ); + + const fieldComponents = useMemo(() => { + return Object.fromEntries( + customFieldExtensions.map(({ name, component }) => [name, component]), + ); + }, [customFieldExtensions]); + + const handleSelectionChange = useCallback( + selection => { + setSelectedField(selection); + setFieldFormState({}); + }, + [setFieldFormState, setSelectedField], + ); + + const handleFieldConfigChange = useCallback( + state => { + setFieldFormState(state); + // Force TemplateEditorForm to re-render since some fields + // may not be responsive to ui:option changes + setRefreshKey(Date.now()); + }, + [setFieldFormState, setRefreshKey], + ); + + return ( +
+
+ + + Choose Custom Field Extension + + + + + + + +
+
+ + + + handleFieldConfigChange(e.formData)} + validator={validator} + schema={selectedField.schema?.uiOptions || {}} + > + + + + +
+
+ + + + + + + null} + /> +
+
+ ); +}; diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditor.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditor.tsx new file mode 100644 index 0000000000..f6e7b38d7d --- /dev/null +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditor.tsx @@ -0,0 +1,92 @@ +/* + * 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 { makeStyles } from '@material-ui/core'; +import React, { useState } from 'react'; +import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha'; +import { TemplateDirectoryAccess } from '../../lib/filesystem'; +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 { DryRunResults } from '../../next/TemplateEditorPage/DryRunResults'; + +const useStyles = makeStyles({ + // Reset and fix sizing to make sure scrolling behaves correctly + root: { + gridArea: 'pageContent', + + display: 'grid', + gridTemplateAreas: ` + "browser editor preview" + "results results results" + `, + gridTemplateColumns: '1fr 3fr 2fr', + gridTemplateRows: '1fr auto', + }, + browser: { + gridArea: 'browser', + overflow: 'auto', + }, + editor: { + gridArea: 'editor', + overflow: 'auto', + }, + preview: { + gridArea: 'preview', + overflow: 'auto', + }, + results: { + gridArea: 'results', + }, +}); + +export const TemplateEditor = (props: { + directory: TemplateDirectoryAccess; + fieldExtensions?: LegacyFieldExtensionOptions[]; + layouts?: LayoutOptions[]; + onClose?: () => void; +}) => { + const classes = useStyles(); + + const [errorText, setErrorText] = useState(); + + return ( + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + ); +}; diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx new file mode 100644 index 0000000000..80121c40db --- /dev/null +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx @@ -0,0 +1,236 @@ +/* + * 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 { 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 useDebounce from 'react-use/lib/useDebounce'; +import yaml from 'yaml'; +import { + FieldExtensionOptions, + LayoutOptions, + TemplateParameterSchema, +} from '@backstage/plugin-scaffolder-react'; +import { + Stepper, + LegacyFieldExtensionOptions, +} from '@backstage/plugin-scaffolder-react/alpha'; +import { useDryRun } from '../../next/TemplateEditorPage/DryRunContext'; +import { useDirectoryEditor } from '../../next/TemplateEditorPage/DirectoryEditorContext'; + +const useStyles = makeStyles({ + containerWrapper: { + position: 'relative', + width: '100%', + height: '100%', + }, + container: { + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + overflow: 'auto', + }, +}); + +interface ErrorBoundaryProps { + invalidator: unknown; + setErrorText(errorText: string | undefined): void; + children: ReactNode; +} + +interface ErrorBoundaryState { + shouldRender: boolean; +} + +class ErrorBoundary extends Component { + state = { + shouldRender: true, + }; + + componentDidUpdate(prevProps: { invalidator: unknown }) { + if (prevProps.invalidator !== this.props.invalidator) { + this.setState({ shouldRender: true }); + } + } + + componentDidCatch(error: Error) { + this.props.setErrorText(error.message); + this.setState({ shouldRender: false }); + } + + render() { + return this.state.shouldRender ? this.props.children : null; + } +} + +interface TemplateEditorFormProps { + content?: string; + /** 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?: LegacyFieldExtensionOptions[]; + layouts?: LayoutOptions[]; +} + +function isJsonObject(value: JsonValue | undefined): value is JsonObject { + return typeof value === 'object' && value !== null && !Array.isArray(value); +} + +/** Shows the a template form that is parsed from the provided content */ +export function TemplateEditorForm(props: TemplateEditorFormProps) { + const { + content, + contentIsSpec, + onDryRun, + setErrorText, + fieldExtensions = [], + layouts = [], + } = props; + const classes = useStyles(); + const apiHolder = useApiHolder(); + + const [steps, setSteps] = useState(); + + useDebounce( + () => { + try { + if (!content) { + setSteps(undefined); + return; + } + const parsed: JsonValue = yaml.parse(content); + + if (!isJsonObject(parsed)) { + setSteps(undefined); + return; + } + + let rootObj = parsed; + if (!contentIsSpec) { + const isTemplate = + String(parsed.kind).toLocaleLowerCase('en-US') === 'template'; + if (!isTemplate) { + setSteps(undefined); + return; + } + + rootObj = isJsonObject(parsed.spec) ? parsed.spec : {}; + } + + const { parameters } = rootObj; + + if (!Array.isArray(parameters)) { + setErrorText('Template parameters must be an array'); + setSteps(undefined); + return; + } + + setErrorText(); + setSteps( + parameters.flatMap(param => + isJsonObject(param) + ? [ + { + title: String(param.title), + schema: param, + }, + ] + : [], + ), + ); + } catch (e) { + setErrorText(e.message); + } + }, + 250, + [contentIsSpec, content, apiHolder], + ); + + if (!steps) { + return null; + } + + return ( +
+
+ + { + await onDryRun?.(data); + }} + layouts={layouts} + components={{ createButtonText: onDryRun && 'Try It' }} + /> + +
+
+ ); +} + +/** A version of the TemplateEditorForm that is connected to the DirectoryEditor and DryRun contexts */ +export function TemplateEditorFormDirectoryEditorDryRun( + props: Pick< + TemplateEditorFormProps, + 'setErrorText' | 'fieldExtensions' | 'layouts' + >, +) { + const { setErrorText, fieldExtensions = [], layouts } = props; + const dryRun = useDryRun(); + + const directoryEditor = useDirectoryEditor(); + const { selectedFile } = directoryEditor; + + const handleDryRun = async (values: JsonObject) => { + if (!selectedFile) { + return; + } + + try { + await dryRun.execute({ + templateContent: selectedFile.content, + values, + files: directoryEditor.files, + }); + setErrorText(); + } catch (e) { + setErrorText(String(e.cause || e)); + throw e; + } + }; + + const content = + selectedFile && selectedFile.path.match(/\.ya?ml$/) + ? selectedFile.content + : undefined; + + return ( + + ); +} + +TemplateEditorForm.DirectoryEditorDryRun = + TemplateEditorFormDirectoryEditorDryRun; diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx index e65869ad0e..127c73dcf5 100644 --- a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorPage.tsx @@ -21,10 +21,10 @@ import { } from '../../lib/filesystem'; import { type LayoutOptions } from '@backstage/plugin-scaffolder-react'; import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha'; -import { CustomFieldExplorer } from '../../next/TemplateEditorPage/CustomFieldExplorer'; -import { TemplateFormPreviewer } from '../../next/TemplateEditorPage/TemplateFormPreviewer'; -import { TemplateEditor } from '../../next/TemplateEditorPage/TemplateEditor'; import { TemplateEditorIntro } from '../../next/TemplateEditorPage/TemplateEditorIntro'; +import { TemplateEditor } from './TemplateEditor'; +import { TemplateFormPreviewer } from './TemplateFormPreviewer'; +import { CustomFieldExplorer } from './CustomFieldExplorer'; type Selection = | { diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx new file mode 100644 index 0000000000..21df43cf8c --- /dev/null +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx @@ -0,0 +1,217 @@ +/* + * 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 { Entity } from '@backstage/catalog-model'; +import { alertApiRef, useApi } from '@backstage/core-plugin-api'; +import { + catalogApiRef, + humanizeEntityRef, +} from '@backstage/plugin-catalog-react'; +import { + FormControl, + IconButton, + InputLabel, + LinearProgress, + makeStyles, + MenuItem, + Select, +} from '@material-ui/core'; +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 { LayoutOptions } from '@backstage/plugin-scaffolder-react'; +import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha'; +import { TemplateEditorTextArea } from '../../next/TemplateEditorPage/TemplateEditorTextArea'; +import { TemplateEditorForm } from './TemplateEditorForm'; + +const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI +parameters: + - title: Fill in some steps + required: + - name + properties: + name: + title: Name + type: string + description: Unique name of the component + owner: + title: Owner + type: string + description: Owner of the component + ui:field: OwnerPicker + ui:options: + catalogFilter: + kind: Group + - title: Choose a location + required: + - repoUrl + properties: + repoUrl: + title: Repository Location + type: string + ui:field: RepoUrlPicker + ui:options: + allowedHosts: + - github.com +steps: + - id: fetch-base + name: Fetch Base + action: fetch:template + input: + url: ./template + values: + name: \${{parameters.name}} +`; + +type TemplateOption = { + label: string; + value: Entity; +}; + +const useStyles = makeStyles(theme => ({ + root: { + gridArea: 'pageContent', + display: 'grid', + gridTemplateAreas: ` + "controls controls" + "textArea preview" + `, + gridTemplateRows: 'auto 1fr', + gridTemplateColumns: '1fr 1fr', + }, + controls: { + gridArea: 'controls', + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', + margin: theme.spacing(1), + }, + textArea: { + gridArea: 'textArea', + }, + preview: { + gridArea: 'preview', + }, +})); + +export const TemplateFormPreviewer = ({ + defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML, + customFieldExtensions = [], + onClose, + layouts = [], +}: { + defaultPreviewTemplate?: string; + customFieldExtensions?: LegacyFieldExtensionOptions[]; + onClose?: () => void; + layouts?: LayoutOptions[]; +}) => { + const classes = useStyles(); + const alertApi = useApi(alertApiRef); + const catalogApi = useApi(catalogApiRef); + const [selectedTemplate, setSelectedTemplate] = useState(''); + const [errorText, setErrorText] = useState(); + const [templateOptions, setTemplateOptions] = useState([]); + const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate); + + const { loading } = useAsync( + () => + catalogApi + .getEntities({ + filter: { kind: 'template' }, + fields: [ + 'kind', + 'metadata.namespace', + 'metadata.name', + 'metadata.title', + 'spec.parameters', + 'spec.steps', + 'spec.output', + ], + }) + .then(({ items }) => + setTemplateOptions( + items.map(template => ({ + label: + template.metadata.title ?? + humanizeEntityRef(template, { defaultKind: 'template' }), + value: template, + })), + ), + ) + .catch(e => + alertApi.post({ + message: `Error loading exisiting templates: ${e.message}`, + severity: 'error', + }), + ), + [catalogApi], + ); + + const handleSelectChange = useCallback( + selected => { + setSelectedTemplate(selected); + setTemplateYaml(yaml.stringify(selected.spec)); + }, + [setTemplateYaml], + ); + + return ( + <> + {loading && } +
+
+ + + Load Existing Template + + + + + + + +
+
+ +
+
+ +
+
+ + ); +}; diff --git a/plugins/scaffolder/src/legacy/index.ts b/plugins/scaffolder/src/legacy/index.ts index 83b5717fbe..2393be0f69 100644 --- a/plugins/scaffolder/src/legacy/index.ts +++ b/plugins/scaffolder/src/legacy/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { LegacyRouter, type LegacyRouterProps } from './Router'; +export { LegacyScaffolderPage } from '../plugin'; diff --git a/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx b/plugins/scaffolder/src/next/TemplateEditorPage/TemplateEditorBrowser.tsx index 177ad11c2b..996da98d4a 100644 --- a/plugins/scaffolder/src/next/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/TemplateWizardPage/TemplateWizardPage.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx index 464e23a201..3b14f2c07f 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx +++ b/plugins/scaffolder/src/next/TemplateWizardPage/TemplateWizardPage.tsx @@ -26,10 +26,11 @@ import { scaffolderApiRef, useTemplateSecrets, type LayoutOptions, + FormProps, FieldExtensionOptions, ReviewStepProps, } from '@backstage/plugin-scaffolder-react'; -import { FormProps, Workflow } from '@backstage/plugin-scaffolder-react/alpha'; +import { Workflow } from '@backstage/plugin-scaffolder-react/alpha'; import { JsonValue } from '@backstage/types'; import { Header, Page } from '@backstage/core-components'; From 660db1f39a16302a9ff16bbc8a09528d6ba7ac59 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 28 Sep 2023 13:59:54 +0200 Subject: [PATCH 04/14] chore: completeing props Signed-off-by: blam --- .../src/components/Router/Router.tsx | 6 ++++ .../MyGroupsPicker/MyGroupsPicker.test.tsx | 2 +- .../RepoUrlPicker/RepoUrlPicker.test.tsx | 30 +++++++++++++++---- 3 files changed, 31 insertions(+), 7 deletions(-) diff --git a/plugins/scaffolder/src/components/Router/Router.tsx b/plugins/scaffolder/src/components/Router/Router.tsx index ad72170bba..83c26c9130 100644 --- a/plugins/scaffolder/src/components/Router/Router.tsx +++ b/plugins/scaffolder/src/components/Router/Router.tsx @@ -73,6 +73,12 @@ export type RouterProps = { }; groups?: TemplateGroupFilter[]; templateFilter?: (entity: TemplateEntityV1beta3) => boolean; + headerOptions?: { + pageTitleOverride?: string; + title?: string; + subtitle?: string; + }; + defaultPreviewTemplate?: string; formProps?: FormProps; contextMenu?: { /** Whether to show a link to the template editor */ diff --git a/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx b/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx index be59d4d1cf..521c4029b3 100644 --- a/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/MyGroupsPicker/MyGroupsPicker.test.tsx @@ -238,7 +238,7 @@ describe('', () => { onChange, schema, required, - } as unknown as FieldProps; + } as unknown as FieldProps; const { getByRole } = render( { >
as ScaffolderRJSFField, + }} onSubmit={onSubmit} /> @@ -109,12 +115,15 @@ describe('RepoUrlPicker', () => { > , + }} /> , @@ -144,6 +153,7 @@ describe('RepoUrlPicker', () => { > { }, }, }} - fields={{ RepoUrlPicker: RepoUrlPicker }} + fields={{ + RepoUrlPicker: RepoUrlPicker as ScaffolderRJSFField, + }} /> @@ -206,6 +218,7 @@ describe('RepoUrlPicker', () => { > { }, }, }} - fields={{ RepoUrlPicker: RepoUrlPicker }} + fields={{ + RepoUrlPicker: RepoUrlPicker as ScaffolderRJSFField, + }} /> @@ -259,6 +274,7 @@ describe('RepoUrlPicker', () => { > { }, }, }} - fields={{ RepoUrlPicker: RepoUrlPicker }} + fields={{ + RepoUrlPicker: RepoUrlPicker as ScaffolderRJSFField, + }} /> From 91642181e79f31201174846600b6d0f03ff6c3c8 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 28 Sep 2023 14:03:45 +0200 Subject: [PATCH 05/14] feat: started some API report tweaks Signed-off-by: blam --- plugins/scaffolder-react/alpha-api-report.md | 108 +++++----- plugins/scaffolder-react/api-report.md | 197 ++++++++++++++++-- .../src/components/ReviewStep.tsx | 15 -- 3 files changed, 242 insertions(+), 78 deletions(-) delete mode 100644 plugins/scaffolder-react/src/components/ReviewStep.tsx diff --git a/plugins/scaffolder-react/alpha-api-report.md b/plugins/scaffolder-react/alpha-api-report.md index 11bb2c10c4..89ba75e8ef 100644 --- a/plugins/scaffolder-react/alpha-api-report.md +++ b/plugins/scaffolder-react/alpha-api-report.md @@ -6,39 +6,63 @@ /// import { ApiHolder } from '@backstage/core-plugin-api'; -import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react'; +import { ComponentType } from 'react'; +import { CustomValidator } from '@rjsf/utils'; import { Dispatch } from 'react'; +import { ElementType } from 'react'; +import { ErrorSchema } from '@rjsf/utils'; +import { ErrorTransformer } from '@rjsf/utils'; +import { Experimental_DefaultFormStateBehavior } from '@rjsf/utils'; import { Extension } from '@backstage/core-plugin-api'; -import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react'; -import { FieldProps } from '@rjsf/utils'; +import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react'; +import { FieldProps } from '@rjsf/core'; import { FieldValidation } from '@rjsf/utils'; -import { FormProps as FormProps_2 } from '@rjsf/core-v5'; +import { FieldValidation as FieldValidation_2 } from '@rjsf/core'; +import { default as Form_2 } from '@rjsf/core-v5'; +import { FormContextType } from '@rjsf/utils'; +import { FormEvent } from 'react'; +import { FormProps } from '@backstage/plugin-scaffolder-react'; +import { GenericObjectType } from '@rjsf/utils'; +import { HTMLAttributes } from 'react'; +import { IChangeEvent } from '@rjsf/core-v5'; import { IconComponent } from '@backstage/core-plugin-api'; +import { IdSchema } from '@rjsf/utils'; import { JsonObject } from '@backstage/types'; +import { JSONSchema7 } from 'json-schema'; import { JsonValue } from '@backstage/types'; import { LayoutOptions } from '@backstage/plugin-scaffolder-react'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; +import { Ref } from 'react'; +import { Registry } from '@rjsf/utils'; +import { RegistryWidgetsType } from '@rjsf/utils'; +import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; +import { RJSFSchema } from '@rjsf/utils'; +import { RJSFValidationError } from '@rjsf/utils'; import { ScaffolderStep } from '@backstage/plugin-scaffolder-react'; import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react'; import { SetStateAction } from 'react'; +import { StrictRJSFSchema } from '@rjsf/utils'; import { TaskStep } from '@backstage/plugin-scaffolder-common'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react'; -import { UIOptionsType } from '@rjsf/utils'; +import { TemplatesType } from '@rjsf/utils'; import { UiSchema } from '@rjsf/utils'; +import { ValidatorType } from '@rjsf/utils'; // @alpha export const createFieldValidation: () => FieldValidation; +// Warning: (ae-forgotten-export) The symbol "FieldExtensionComponent" needs to be exported by the entry point alpha.d.ts +// // @alpha -export function createNextScaffolderFieldExtension< +export function createLegacyScaffolderFieldExtension< TReturnValue = unknown, - TInputProps extends UIOptionsType = {}, + TInputProps = unknown, >( - options: NextFieldExtensionOptions, + options: LegacyFieldExtensionOptions, ): Extension>; // @alpha @@ -55,61 +79,46 @@ export const extractSchemaFromStep: (inputStep: JsonObject) => { schema: JsonObject; }; +// Warning: (ae-forgotten-export) The symbol "ScaffolderRJSFFormProps" needs to be exported by the entry point alpha.d.ts +// // @alpha export const Form: ( - props: PropsWithChildren, + props: PropsWithChildren, ) => React_2.JSX.Element; // @alpha -export type FormProps = Pick< - FormProps_2, - 'transformErrors' | 'noHtml5Validate' ->; - -// @alpha -export type NextCustomFieldValidator< - TFieldReturnValue, - TUiOptions = unknown, -> = ( +export type LegacyCustomFieldValidator = ( data: TFieldReturnValue, - field: FieldValidation, + field: FieldValidation_2, context: { apiHolder: ApiHolder; - formData: JsonObject; - schema: JsonObject; - uiSchema?: NextFieldExtensionUiSchema; }, ) => void | Promise; // @alpha -export interface NextFieldExtensionComponentProps< +export interface LegacyFieldExtensionComponentProps< TFieldReturnValue, - TUiOptions = {}, -> extends PropsWithChildren> { + TUiOptions = unknown, +> extends FieldProps { // (undocumented) - uiSchema?: NextFieldExtensionUiSchema; + uiSchema: FieldProps['uiSchema'] & { + 'ui:options'?: TUiOptions; + }; } // @alpha -export type NextFieldExtensionOptions< +export type LegacyFieldExtensionOptions< TFieldReturnValue = unknown, - TUiOptions = unknown, + TInputProps = unknown, > = { name: string; component: ( - props: NextFieldExtensionComponentProps, + props: LegacyFieldExtensionComponentProps, ) => JSX.Element | null; - validation?: NextCustomFieldValidator; + validation?: LegacyCustomFieldValidator; schema?: CustomFieldExtensionSchema; }; -// @alpha -export interface NextFieldExtensionUiSchema - extends UiSchema { - // (undocumented) - 'ui:options'?: TUiOptions & UIOptionsType; -} - // @alpha export interface ParsedTemplateSchema { // (undocumented) @@ -176,12 +185,13 @@ export const Stepper: (stepperProps: StepperProps) => React_2.JSX.Element; // @alpha 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; @@ -236,12 +246,6 @@ export const TemplateGroup: ( props: TemplateGroupProps, ) => React_2.JSX.Element | null; -// @alpha (undocumented) -export type TemplateGroupFilter = { - title?: React_2.ReactNode; - filter: (entity: TemplateEntityV1beta3) => boolean; -}; - // @alpha export interface TemplateGroupProps { // (undocumented) @@ -276,6 +280,8 @@ export interface TemplateGroupsProps { text: string; url: string; }[]; + // Warning: (ae-forgotten-export) The symbol "TemplateGroupFilter" needs to be exported by the entry point alpha.d.ts + // // (undocumented) groups: TemplateGroupFilter[]; // (undocumented) @@ -314,16 +320,24 @@ export type WorkflowProps = { description?: string; namespace: string; templateName: string; + components?: { + ReviewStepComponent?: React_2.ComponentType; + }; onError(error: Error | undefined): JSX.Element | null; } & Pick< StepperProps, | 'extensions' - | 'FormProps' + | 'formProps' | 'components' | 'onCreate' | 'initialState' | 'layouts' >; +// Warnings were encountered during analysis: +// +// src/legacy/extensions/types.d.ts:23:5 - (ae-forgotten-export) The symbol "CustomFieldExtensionSchema" needs to be exported by the entry point alpha.d.ts +// src/next/components/Workflow/Workflow.d.ts:13:9 - (ae-forgotten-export) The symbol "ReviewStepProps_2" needs to be exported by the entry point alpha.d.ts + // (No @packageDocumentation comment for this package) ``` diff --git a/plugins/scaffolder-react/api-report.md b/plugins/scaffolder-react/api-report.md index da95e6746e..057bb3a059 100644 --- a/plugins/scaffolder-react/api-report.md +++ b/plugins/scaffolder-react/api-report.md @@ -7,18 +7,42 @@ import { ApiHolder } from '@backstage/core-plugin-api'; import { ApiRef } from '@backstage/core-plugin-api'; +import { ComponentType } from 'react'; +import { CustomValidator } from '@rjsf/utils'; +import { ElementType } from 'react'; +import { ErrorSchema } from '@rjsf/utils'; +import { ErrorTransformer } from '@rjsf/utils'; +import { Experimental_DefaultFormStateBehavior } from '@rjsf/utils'; import { Extension } from '@backstage/core-plugin-api'; -import { FieldProps } from '@rjsf/core'; -import { FieldValidation } from '@rjsf/core'; -import type { FormProps } from '@rjsf/core-v5'; +import { FieldValidation } from '@rjsf/utils'; +import Form from '@rjsf/core-v5'; +import { FormContextType } from '@rjsf/utils'; +import { FormEvent } from 'react'; +import type { FormProps as FormProps_2 } from '@rjsf/core-v5'; +import { GenericObjectType } from '@rjsf/utils'; +import { HTMLAttributes } from 'react'; +import { IChangeEvent } from '@rjsf/core-v5'; +import { IdSchema } from '@rjsf/utils'; import { JsonObject } from '@backstage/types'; import { JSONSchema7 } from 'json-schema'; import { JsonValue } from '@backstage/types'; import { Observable } from '@backstage/types'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; +import { ReactNode } from 'react'; +import { Ref } from 'react'; +import { Registry } from '@rjsf/utils'; +import { RegistryWidgetsType } from '@rjsf/utils'; +import { RJSFSchema } from '@rjsf/utils'; +import { RJSFValidationError } from '@rjsf/utils'; +import { StrictRJSFSchema } from '@rjsf/utils'; import { TaskSpec } from '@backstage/plugin-scaffolder-common'; import { TaskStep } from '@backstage/plugin-scaffolder-common'; +import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; +import { TemplatesType } from '@rjsf/utils'; +import { UIOptionsType } from '@rjsf/utils'; +import { UiSchema } from '@rjsf/utils'; +import { ValidatorType } from '@rjsf/utils'; // @public export type Action = { @@ -40,7 +64,7 @@ export type ActionExample = { // @public export function createScaffolderFieldExtension< TReturnValue = unknown, - TInputProps = unknown, + TInputProps extends UIOptionsType = {}, >( options: FieldExtensionOptions, ): Extension>; @@ -57,11 +81,14 @@ export type CustomFieldExtensionSchema = { }; // @public -export type CustomFieldValidator = ( +export type CustomFieldValidator = ( data: TFieldReturnValue, field: FieldValidation, context: { apiHolder: ApiHolder; + formData: JsonObject; + schema: JsonObject; + uiSchema?: FieldExtensionUiSchema; }, ) => void | Promise; @@ -71,27 +98,38 @@ export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null; // @public export interface FieldExtensionComponentProps< TFieldReturnValue, - TUiOptions = unknown, -> extends FieldProps { + TUiOptions = {}, +> extends PropsWithChildren> { // (undocumented) - uiSchema: FieldProps['uiSchema'] & { - 'ui:options'?: TUiOptions; - }; + uiSchema: FieldExtensionUiSchema; } // @public 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; }; +// @public +export interface FieldExtensionUiSchema + extends UiSchema { + // (undocumented) + 'ui:options'?: TUiOptions & UIOptionsType; +} + +// @public +export type FormProps = Pick< + FormProps_2, + 'transformErrors' | 'noHtml5Validate' +>; + // @public export type LayoutComponent<_TInputProps> = () => null; @@ -105,7 +143,7 @@ export interface LayoutOptions

{ // @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/src/components/ReviewStep.tsx b/plugins/scaffolder-react/src/components/ReviewStep.tsx deleted file mode 100644 index eb2f165350..0000000000 --- a/plugins/scaffolder-react/src/components/ReviewStep.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/* - * 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. - */ From 03b0e226487808437050f2f2989431ea1107c8c2 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 2 Oct 2023 10:24:21 +0200 Subject: [PATCH 06/14] chore: woops Signed-off-by: blam --- .../TemplateEditorPage/TemplateEditorForm.tsx | 57 +++++++++++++------ 1 file changed, 41 insertions(+), 16 deletions(-) diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx index 80121c40db..766581e311 100644 --- a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx @@ -16,20 +16,19 @@ 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 { - FieldExtensionOptions, LayoutOptions, TemplateParameterSchema, } from '@backstage/plugin-scaffolder-react'; -import { - Stepper, - LegacyFieldExtensionOptions, -} from '@backstage/plugin-scaffolder-react/alpha'; + import { useDryRun } from '../../next/TemplateEditorPage/DryRunContext'; import { useDirectoryEditor } from '../../next/TemplateEditorPage/DirectoryEditorContext'; +import { MultistepJsonForm } from '../MultistepJsonForm'; +import { createValidator } from '../TemplatePage'; +import { LegacyFieldExtensionOptions } from '@backstage/plugin-scaffolder-react/alpha'; const useStyles = makeStyles({ containerWrapper: { @@ -82,7 +81,10 @@ interface TemplateEditorFormProps { content?: string; /** Setting this to true will cause the content to be parsed as if it is the template entity spec */ contentIsSpec?: boolean; + data: JsonObject; + onUpdate: (data: JsonObject) => void; setErrorText: (errorText?: string) => void; + onDryRun?: (data: JsonObject) => Promise; fieldExtensions?: LegacyFieldExtensionOptions[]; layouts?: LayoutOptions[]; @@ -97,6 +99,8 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) { const { content, contentIsSpec, + data, + onUpdate, onDryRun, setErrorText, fieldExtensions = [], @@ -107,6 +111,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 { @@ -114,7 +124,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); @@ -141,6 +154,10 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) { return; } + const fieldValidators = Object.fromEntries( + fieldExtensions.map(({ name, validation }) => [name, validation]), + ); + setErrorText(); setSteps( parameters.flatMap(param => @@ -149,6 +166,9 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) { { title: String(param.title), schema: param, + validate: createValidator(param, fieldValidators, { + apiHolder, + }), }, ] : [], @@ -170,14 +190,15 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {

- { - await onDryRun?.(data); - }} + onUpdate(e.formData)} + onReset={() => onUpdate({})} + finishButtonLabel={onDryRun && 'Try It'} + onFinish={onDryRun && (() => onDryRun(data))} layouts={layouts} - components={{ createButtonText: onDryRun && 'Try It' }} />
@@ -198,7 +219,9 @@ export function TemplateEditorFormDirectoryEditorDryRun( const directoryEditor = useDirectoryEditor(); const { selectedFile } = directoryEditor; - const handleDryRun = async (values: JsonObject) => { + const [data, setData] = useState({}); + + const handleDryRun = async () => { if (!selectedFile) { return; } @@ -206,7 +229,7 @@ export function TemplateEditorFormDirectoryEditorDryRun( try { await dryRun.execute({ templateContent: selectedFile.content, - values, + values: data, files: directoryEditor.files, }); setErrorText(); @@ -227,6 +250,8 @@ export function TemplateEditorFormDirectoryEditorDryRun( fieldExtensions={fieldExtensions} setErrorText={setErrorText} content={content} + data={data} + onUpdate={setData} layouts={layouts} /> ); From 6bfa4894a89fbd5627a0b3aa4b3137a2a5ed0985 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 2 Oct 2023 10:41:26 +0200 Subject: [PATCH 07/14] chore: fixing some missing features that got accidentally replaced Signed-off-by: blam --- .../Stepper/createAsyncValidators.ts | 1 + .../src/next/components/Stepper/index.ts | 1 + .../CustomFieldExplorer.tsx | 8 +++-- .../TemplateEditorPage/TemplateEditorForm.tsx | 2 +- .../TemplateFormPreviewer.tsx | 3 ++ .../TemplateEditorPage/TemplateEditorForm.tsx | 36 ++++++++++++++----- 6 files changed, 40 insertions(+), 11 deletions(-) diff --git a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts index a606f01d6b..8eb665911d 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts +++ b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts @@ -32,6 +32,7 @@ export type FormValidation = { [name: string]: FieldValidation | FormValidation; }; +/** @alpha */ export const createAsyncValidators = ( rootSchema: JsonObject, validators: Record< diff --git a/plugins/scaffolder-react/src/next/components/Stepper/index.ts b/plugins/scaffolder-react/src/next/components/Stepper/index.ts index daa47f078e..ebf0f7e902 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/index.ts +++ b/plugins/scaffolder-react/src/next/components/Stepper/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { Stepper, type StepperProps } from './Stepper'; +export { createAsyncValidators } from './createAsyncValidators'; diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx index c790dbd72c..de0c243e42 100644 --- a/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx @@ -74,6 +74,7 @@ export const CustomFieldExplorer = ({ const [selectedField, setSelectedField] = useState(fieldOptions[0]); const [fieldFormState, setFieldFormState] = useState({}); const [refreshKey, setRefreshKey] = useState(Date.now()); + const [formState, setFormState] = useState({}); const sampleFieldTemplate = useMemo( () => yaml.stringify({ @@ -103,8 +104,9 @@ export const CustomFieldExplorer = ({ selection => { setSelectedField(selection); setFieldFormState({}); + setFormState({}); }, - [setFieldFormState, setSelectedField], + [setFieldFormState, setSelectedField, setFormState], ); const handleFieldConfigChange = useCallback( @@ -149,7 +151,7 @@ export const CustomFieldExplorer = ({ onUpdate(e.formData)} onReset={() => onUpdate({})} - finishButtonLabel={onDryRun && 'Try It'} + finishButtonLabel={onDryRun && 'Try iIt'} onFinish={onDryRun && (() => onDryRun(data))} layouts={layouts} /> diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx index 21df43cf8c..b83acf85a5 100644 --- a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateFormPreviewer.tsx @@ -125,6 +125,7 @@ export const TemplateFormPreviewer = ({ const [errorText, setErrorText] = useState(); const [templateOptions, setTemplateOptions] = useState([]); const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate); + const [formState, setFormState] = useState({}); const { loading } = useAsync( () => @@ -204,6 +205,8 @@ export const TemplateFormPreviewer = ({
void; + onDryRun?: (data: JsonObject) => Promise; fieldExtensions?: FieldExtensionOptions[]; layouts?: LayoutOptions[]; @@ -104,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 { @@ -111,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); @@ -138,6 +151,10 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) { return; } + const fieldValidators = Object.fromEntries( + fieldExtensions.map(({ name, validation }) => [name, validation]), + ); + setErrorText(); setSteps( parameters.flatMap(param => @@ -146,6 +163,9 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) { { title: String(param.title), schema: param, + validate: createAsyncValidators(param, fieldValidators, { + apiHolder, + }), }, ] : [], @@ -170,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' }} />
@@ -195,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; } @@ -203,7 +223,7 @@ export function TemplateEditorFormDirectoryEditorDryRun( try { await dryRun.execute({ templateContent: selectedFile.content, - values, + values: data, files: directoryEditor.files, }); setErrorText(); From da462fffc70688766cd70ab51c32d195b7074380 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 2 Oct 2023 11:52:49 +0200 Subject: [PATCH 08/14] feat: make things nice here Signed-off-by: blam --- plugins/scaffolder-react/alpha-api-report.md | 56 +++++++--------- .../src/legacy/extensions/index.tsx | 2 +- .../src/legacy/extensions/types.ts | 2 +- .../src/next/components/Form/Form.tsx | 2 +- .../Stepper/createAsyncValidators.ts | 6 +- .../src/next/components/Stepper/index.ts | 5 +- .../TemplateGroups/TemplateGroups.tsx | 2 +- .../src/next/components/Workflow/Workflow.tsx | 2 +- plugins/scaffolder/alpha-api-report.md | 59 ++++++++++------- plugins/scaffolder/api-report.md | 64 +++++++++---------- .../components/OngoingTask/OngoingTask.tsx | 3 + .../src/components/Router/Router.tsx | 5 +- .../src/legacy/TaskPage/TaskPage.tsx | 2 +- 13 files changed, 106 insertions(+), 104 deletions(-) diff --git a/plugins/scaffolder-react/alpha-api-report.md b/plugins/scaffolder-react/alpha-api-report.md index 89ba75e8ef..cb45773f06 100644 --- a/plugins/scaffolder-react/alpha-api-report.md +++ b/plugins/scaffolder-react/alpha-api-report.md @@ -7,56 +7,50 @@ import { ApiHolder } from '@backstage/core-plugin-api'; import { ComponentType } from 'react'; -import { CustomValidator } from '@rjsf/utils'; +import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react'; +import { CustomFieldValidator } from '@backstage/plugin-scaffolder-react'; import { Dispatch } from 'react'; -import { ElementType } from 'react'; -import { ErrorSchema } from '@rjsf/utils'; -import { ErrorTransformer } from '@rjsf/utils'; -import { Experimental_DefaultFormStateBehavior } from '@rjsf/utils'; import { Extension } from '@backstage/core-plugin-api'; +import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react'; import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react'; import { FieldProps } from '@rjsf/core'; import { FieldValidation } from '@rjsf/utils'; import { FieldValidation as FieldValidation_2 } from '@rjsf/core'; -import { default as Form_2 } from '@rjsf/core-v5'; -import { FormContextType } from '@rjsf/utils'; -import { FormEvent } from 'react'; import { FormProps } from '@backstage/plugin-scaffolder-react'; -import { GenericObjectType } from '@rjsf/utils'; -import { HTMLAttributes } from 'react'; -import { IChangeEvent } from '@rjsf/core-v5'; import { IconComponent } from '@backstage/core-plugin-api'; -import { IdSchema } from '@rjsf/utils'; import { JsonObject } from '@backstage/types'; -import { JSONSchema7 } from 'json-schema'; import { JsonValue } from '@backstage/types'; import { LayoutOptions } from '@backstage/plugin-scaffolder-react'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; -import { Ref } from 'react'; -import { Registry } from '@rjsf/utils'; -import { RegistryWidgetsType } from '@rjsf/utils'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; -import { RJSFSchema } from '@rjsf/utils'; -import { RJSFValidationError } from '@rjsf/utils'; +import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react'; import { ScaffolderStep } from '@backstage/plugin-scaffolder-react'; import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react'; import { SetStateAction } from 'react'; -import { StrictRJSFSchema } from '@rjsf/utils'; import { TaskStep } from '@backstage/plugin-scaffolder-common'; import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; +import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react'; import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react'; -import { TemplatesType } from '@rjsf/utils'; import { UiSchema } from '@rjsf/utils'; -import { ValidatorType } from '@rjsf/utils'; + +// @alpha (undocumented) +export const createAsyncValidators: ( + rootSchema: JsonObject, + validators: Record< + string, + undefined | CustomFieldValidator + >, + context: { + apiHolder: ApiHolder; + }, +) => (formData: JsonObject) => Promise; // @alpha export const createFieldValidation: () => FieldValidation; -// Warning: (ae-forgotten-export) The symbol "FieldExtensionComponent" needs to be exported by the entry point alpha.d.ts -// // @alpha export function createLegacyScaffolderFieldExtension< TReturnValue = unknown, @@ -79,13 +73,16 @@ export const extractSchemaFromStep: (inputStep: JsonObject) => { schema: JsonObject; }; -// Warning: (ae-forgotten-export) The symbol "ScaffolderRJSFFormProps" needs to be exported by the entry point alpha.d.ts -// // @alpha export const Form: ( props: PropsWithChildren, ) => React_2.JSX.Element; +// @alpha (undocumented) +export type FormValidation = { + [name: string]: FieldValidation | FormValidation; +}; + // @alpha export type LegacyCustomFieldValidator = ( data: TFieldReturnValue, @@ -280,8 +277,6 @@ export interface TemplateGroupsProps { text: string; url: string; }[]; - // Warning: (ae-forgotten-export) The symbol "TemplateGroupFilter" needs to be exported by the entry point alpha.d.ts - // // (undocumented) groups: TemplateGroupFilter[]; // (undocumented) @@ -321,7 +316,7 @@ export type WorkflowProps = { namespace: string; templateName: string; components?: { - ReviewStepComponent?: React_2.ComponentType; + ReviewStepComponent?: React_2.ComponentType; }; onError(error: Error | undefined): JSX.Element | null; } & Pick< @@ -334,10 +329,5 @@ export type WorkflowProps = { | 'layouts' >; -// Warnings were encountered during analysis: -// -// src/legacy/extensions/types.d.ts:23:5 - (ae-forgotten-export) The symbol "CustomFieldExtensionSchema" needs to be exported by the entry point alpha.d.ts -// src/next/components/Workflow/Workflow.d.ts:13:9 - (ae-forgotten-export) The symbol "ReviewStepProps_2" needs to be exported by the entry point alpha.d.ts - // (No @packageDocumentation comment for this package) ``` diff --git a/plugins/scaffolder-react/src/legacy/extensions/index.tsx b/plugins/scaffolder-react/src/legacy/extensions/index.tsx index 5276d9d31c..870d797fc4 100644 --- a/plugins/scaffolder-react/src/legacy/extensions/index.tsx +++ b/plugins/scaffolder-react/src/legacy/extensions/index.tsx @@ -21,7 +21,7 @@ import { } from './types'; import { Extension, attachComponentData } from '@backstage/core-plugin-api'; import { FIELD_EXTENSION_KEY } from '../../extensions/keys'; -import { FieldExtensionComponent } from '../../extensions'; +import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react'; /** * Method for creating field extensions that can be used in the scaffolder diff --git a/plugins/scaffolder-react/src/legacy/extensions/types.ts b/plugins/scaffolder-react/src/legacy/extensions/types.ts index 80b2903b09..9adf1b74f6 100644 --- a/plugins/scaffolder-react/src/legacy/extensions/types.ts +++ b/plugins/scaffolder-react/src/legacy/extensions/types.ts @@ -15,7 +15,7 @@ */ import { ApiHolder } from '@backstage/core-plugin-api'; import { FieldValidation, FieldProps } from '@rjsf/core'; -import { CustomFieldExtensionSchema } from '../../extensions/types'; +import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react'; /** * Field validation type for Custom Field Extensions. diff --git a/plugins/scaffolder-react/src/next/components/Form/Form.tsx b/plugins/scaffolder-react/src/next/components/Form/Form.tsx index ec644333b9..b9f4fa4531 100644 --- a/plugins/scaffolder-react/src/next/components/Form/Form.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/Form.tsx @@ -20,7 +20,7 @@ import { PropsWithChildren } from 'react'; import { FieldTemplate } from './FieldTemplate'; import { DescriptionFieldTemplate } from './DescriptionFieldTemplate'; import { FieldProps } from '@rjsf/utils'; -import { ScaffolderRJSFFormProps } from '../../../extensions'; +import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react'; // 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 diff --git a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts index 8eb665911d..f50f44d8f5 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts +++ b/plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts @@ -22,12 +22,10 @@ import { createFieldValidation, extractSchemaFromStep } from '../../lib'; import { CustomFieldValidator, FieldExtensionUiSchema, -} from '../../../extensions'; +} from '@backstage/plugin-scaffolder-react'; import { isObject } from './utils'; -/** - * @internal - */ +/** @alpha */ export type FormValidation = { [name: string]: FieldValidation | FormValidation; }; diff --git a/plugins/scaffolder-react/src/next/components/Stepper/index.ts b/plugins/scaffolder-react/src/next/components/Stepper/index.ts index ebf0f7e902..5f33c2ff78 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/index.ts +++ b/plugins/scaffolder-react/src/next/components/Stepper/index.ts @@ -14,4 +14,7 @@ * limitations under the License. */ export { Stepper, type StepperProps } from './Stepper'; -export { createAsyncValidators } from './createAsyncValidators'; +export { + createAsyncValidators, + type FormValidation, +} from './createAsyncValidators'; diff --git a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx index ec08505c06..800ec67a16 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateGroups/TemplateGroups.tsx @@ -23,7 +23,7 @@ import { import { Progress, Link } from '@backstage/core-components'; import { Typography } from '@material-ui/core'; import { errorApiRef, IconComponent, useApi } from '@backstage/core-plugin-api'; -import { TemplateGroupFilter } from '../../../components'; +import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react'; import { TemplateGroup } from '../TemplateGroup/TemplateGroup'; /** diff --git a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx index c0d6b40333..e7c56378a7 100644 --- a/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx +++ b/plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx @@ -27,7 +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 '../../../components'; +import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; const useStyles = makeStyles(() => ({ markdown: { diff --git a/plugins/scaffolder/alpha-api-report.md b/plugins/scaffolder/alpha-api-report.md index 8cacf6105e..bf9fc5782d 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-v5'; +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/src/components/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx index b483cd27cb..cc988599a0 100644 --- a/plugins/scaffolder/src/components/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/components/Router/Router.tsx b/plugins/scaffolder/src/components/Router/Router.tsx index 83c26c9130..dede51d676 100644 --- a/plugins/scaffolder/src/components/Router/Router.tsx +++ b/plugins/scaffolder/src/components/Router/Router.tsx @@ -45,11 +45,10 @@ import { ActionsPage } from '../../components/ActionsPage'; import { ListTasksPage } from '../../components/ListTasksPage'; import { - TemplateListPage, TemplateListPageProps, - TemplateWizardPage, TemplateWizardPageProps, -} from '../../next'; +} from '@backstage/plugin-scaffolder/alpha'; +import { TemplateListPage, TemplateWizardPage } from '../../next'; import { OngoingTask } from '../OngoingTask'; import { TemplateEditorPage } from '../../next/TemplateEditorPage'; diff --git a/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx b/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx index 7ba7c2c9f7..846e5a861f 100644 --- a/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx +++ b/plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx @@ -236,7 +236,7 @@ const hasLinks = ({ links = [] }: ScaffolderTaskOutput): boolean => /** * TaskPageProps for constructing a TaskPage * @param loadingText - Optional loading text shown before a task begins executing. - * + * @public * @deprecated - this is a useless type that is no longer used. */ export type TaskPageProps = { From c04f436b616ef6936ebc9716dee9cb16a00efe4c Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 2 Oct 2023 13:51:29 +0200 Subject: [PATCH 09/14] feat: fixing tests Signed-off-by: blam --- .../components/TemplateGroups/TemplateGroups.test.tsx | 4 ++-- .../scaffolder/src/components/Router/Router.test.tsx | 11 ++++------- 2 files changed, 6 insertions(+), 9 deletions(-) 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/src/components/Router/Router.test.tsx b/plugins/scaffolder/src/components/Router/Router.test.tsx index 2dc67a76be..8c301b55fb 100644 --- a/plugins/scaffolder/src/components/Router/Router.test.tsx +++ b/plugins/scaffolder/src/components/Router/Router.test.tsx @@ -27,12 +27,9 @@ import { } 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', () => { @@ -104,9 +101,9 @@ describe('Router', () => { 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, }); From 72b7dc147f8b54f400b643182b233ab2cf651672 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 13 Oct 2023 07:56:03 +0200 Subject: [PATCH 10/14] feat: fix code review Signed-off-by: blam Signed-off-by: Patrik Oldsberg --- .../src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx | 3 +-- .../src/legacy/TemplateEditorPage/TemplateEditorForm.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx index 36fef1c91e..da86e6e4b8 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.test.tsx @@ -79,8 +79,7 @@ describe('RepoUrlPicker', () => { schema={{ type: 'string' }} uiSchema={{ 'ui:field': 'RepoUrlPicker' }} fields={{ - RepoUrlPicker: - RepoUrlPicker as ScaffolderRJSFField as ScaffolderRJSFField, + RepoUrlPicker: RepoUrlPicker as ScaffolderRJSFField, }} onSubmit={onSubmit} /> diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx index 34e1b05c98..766581e311 100644 --- a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx @@ -196,7 +196,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) { formData={data} onChange={e => onUpdate(e.formData)} onReset={() => onUpdate({})} - finishButtonLabel={onDryRun && 'Try iIt'} + finishButtonLabel={onDryRun && 'Try It'} onFinish={onDryRun && (() => onDryRun(data))} layouts={layouts} /> From fadd3ca42af8840fd308c033eeab8fccda8ed63c Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 13 Oct 2023 08:22:41 +0200 Subject: [PATCH 11/14] chore: remove old rjsf Signed-off-by: blam --- plugins/home/package.json | 4 +- .../CustomHomepage/WidgetSettingsOverlay.tsx | 5 +- plugins/scaffolder-react/alpha-api-report.md | 9 ++- plugins/scaffolder-react/api-report.md | 6 +- plugins/scaffolder-react/package.json | 6 +- .../scaffolder-react/src/components/types.ts | 2 +- .../scaffolder-react/src/extensions/rjsf.ts | 2 +- .../src/layouts/createScaffolderLayout.ts | 2 +- .../src/legacy/extensions/types.ts | 11 +-- .../src/next/components/Form/Form.tsx | 8 +-- .../src/next/components/Stepper/Stepper.tsx | 2 +- plugins/scaffolder/alpha-api-report.md | 2 +- plugins/scaffolder/package.json | 4 +- .../EntityNamePicker/validation.test.ts | 2 +- .../fields/RepoUrlPicker/validation.test.ts | 2 +- .../FieldOverrides/DescriptionField.tsx | 2 +- .../MultistepJsonForm/MultistepJsonForm.tsx | 2 + .../legacy/MultistepJsonForm/ReviewStep.tsx | 2 +- .../src/legacy/MultistepJsonForm/schema.ts | 6 +- .../TemplateEditorPage/TemplateEditorForm.tsx | 2 +- .../src/legacy/TemplatePage/TemplatePage.tsx | 2 +- .../TemplatePage/createValidator.test.ts | 8 +-- .../legacy/TemplatePage/createValidator.ts | 4 +- plugins/scaffolder/src/next/types.ts | 2 +- yarn.lock | 70 ++++--------------- 25 files changed, 62 insertions(+), 105 deletions(-) diff --git a/plugins/home/package.json b/plugins/home/package.json index 58b25eb22c..a239f1b17e 100644 --- a/plugins/home/package.json +++ b/plugins/home/package.json @@ -46,8 +46,8 @@ "@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", "@types/react": "^16.13.1 || ^17.0.0", diff --git a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx index 2c3a1d9ab9..aec4b3dcf2 100644 --- a/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx +++ b/plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx @@ -27,10 +27,11 @@ import SettingsIcon from '@material-ui/icons/Settings'; import DeleteIcon from '@material-ui/icons/Delete'; import React from 'react'; import { Widget } from './types'; -import { withTheme } from '@rjsf/core-v5'; +import { withTheme } from '@rjsf/core'; +import { Theme as MuiTheme } from '@rjsf/material-ui'; import validator from '@rjsf/validator-ajv8'; -const Form = withTheme(require('@rjsf/material-ui-v5').Theme); +const Form = withTheme(MuiTheme); const useStyles = makeStyles((theme: Theme) => createStyles({ diff --git a/plugins/scaffolder-react/alpha-api-report.md b/plugins/scaffolder-react/alpha-api-report.md index cb45773f06..a31d9b1d60 100644 --- a/plugins/scaffolder-react/alpha-api-report.md +++ b/plugins/scaffolder-react/alpha-api-report.md @@ -13,9 +13,7 @@ import { Dispatch } from 'react'; import { Extension } from '@backstage/core-plugin-api'; import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react'; import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react'; -import { FieldProps } from '@rjsf/core'; import { FieldValidation } from '@rjsf/utils'; -import { FieldValidation as FieldValidation_2 } from '@rjsf/core'; import { FormProps } from '@backstage/plugin-scaffolder-react'; import { IconComponent } from '@backstage/core-plugin-api'; import { JsonObject } from '@backstage/types'; @@ -26,6 +24,7 @@ import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { ReviewStepProps } from '@backstage/plugin-scaffolder-react'; +import { ScaffolderRJSFFieldProps } from '@backstage/plugin-scaffolder-react'; import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react'; import { ScaffolderStep } from '@backstage/plugin-scaffolder-react'; import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react'; @@ -86,7 +85,7 @@ export type FormValidation = { // @alpha export type LegacyCustomFieldValidator = ( data: TFieldReturnValue, - field: FieldValidation_2, + field: FieldValidation, context: { apiHolder: ApiHolder; }, @@ -96,9 +95,9 @@ export type LegacyCustomFieldValidator = ( export interface LegacyFieldExtensionComponentProps< TFieldReturnValue, TUiOptions = unknown, -> extends FieldProps { +> extends ScaffolderRJSFFieldProps { // (undocumented) - uiSchema: FieldProps['uiSchema'] & { + uiSchema: ScaffolderRJSFFieldProps['uiSchema'] & { 'ui:options'?: TUiOptions; }; } diff --git a/plugins/scaffolder-react/api-report.md b/plugins/scaffolder-react/api-report.md index 057bb3a059..6acc2f9812 100644 --- a/plugins/scaffolder-react/api-report.md +++ b/plugins/scaffolder-react/api-report.md @@ -15,13 +15,13 @@ import { ErrorTransformer } from '@rjsf/utils'; import { Experimental_DefaultFormStateBehavior } from '@rjsf/utils'; import { Extension } from '@backstage/core-plugin-api'; import { FieldValidation } from '@rjsf/utils'; -import Form from '@rjsf/core-v5'; +import Form from '@rjsf/core'; import { FormContextType } from '@rjsf/utils'; import { FormEvent } from 'react'; -import type { FormProps as FormProps_2 } from '@rjsf/core-v5'; +import type { FormProps as FormProps_2 } from '@rjsf/core'; import { GenericObjectType } from '@rjsf/utils'; import { HTMLAttributes } from 'react'; -import { IChangeEvent } from '@rjsf/core-v5'; +import { IChangeEvent } from '@rjsf/core'; import { IdSchema } from '@rjsf/utils'; import { JsonObject } from '@backstage/types'; import { JSONSchema7 } from 'json-schema'; 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/components/types.ts b/plugins/scaffolder-react/src/components/types.ts index f6e186a56f..597998bac4 100644 --- a/plugins/scaffolder-react/src/components/types.ts +++ b/plugins/scaffolder-react/src/components/types.ts @@ -15,7 +15,7 @@ */ import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common'; -import type { FormProps as SchemaFormProps } from '@rjsf/core-v5'; +import type { FormProps as SchemaFormProps } from '@rjsf/core'; import { UiSchema } from '@rjsf/utils'; import { JsonObject } from '@backstage/types'; diff --git a/plugins/scaffolder-react/src/extensions/rjsf.ts b/plugins/scaffolder-react/src/extensions/rjsf.ts index edacbc26aa..cacedad080 100644 --- a/plugins/scaffolder-react/src/extensions/rjsf.ts +++ b/plugins/scaffolder-react/src/extensions/rjsf.ts @@ -33,7 +33,7 @@ import { ErrorTransformer, } from '@rjsf/utils'; import { HTMLAttributes } from 'react'; -import Form, { IChangeEvent } from '@rjsf/core-v5'; +import Form, { IChangeEvent } from '@rjsf/core'; /** * The props for the `Field` components 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/legacy/extensions/types.ts b/plugins/scaffolder-react/src/legacy/extensions/types.ts index 9adf1b74f6..54c38ad2cd 100644 --- a/plugins/scaffolder-react/src/legacy/extensions/types.ts +++ b/plugins/scaffolder-react/src/legacy/extensions/types.ts @@ -14,8 +14,11 @@ * limitations under the License. */ import { ApiHolder } from '@backstage/core-plugin-api'; -import { FieldValidation, FieldProps } from '@rjsf/core'; -import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react'; +import { FieldValidation } from '@rjsf/utils'; +import { + CustomFieldExtensionSchema, + ScaffolderRJSFFieldProps, +} from '@backstage/plugin-scaffolder-react'; /** * Field validation type for Custom Field Extensions. @@ -55,8 +58,8 @@ export type LegacyFieldExtensionOptions< export interface LegacyFieldExtensionComponentProps< TFieldReturnValue, TUiOptions = unknown, -> extends FieldProps { - uiSchema: FieldProps['uiSchema'] & { +> extends ScaffolderRJSFFieldProps { + uiSchema: ScaffolderRJSFFieldProps['uiSchema'] & { 'ui:options'?: TUiOptions; }; } diff --git a/plugins/scaffolder-react/src/next/components/Form/Form.tsx b/plugins/scaffolder-react/src/next/components/Form/Form.tsx index b9f4fa4531..7398e0bb2e 100644 --- a/plugins/scaffolder-react/src/next/components/Form/Form.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/Form.tsx @@ -14,18 +14,16 @@ * limitations under the License. */ -import { 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 diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 9bb8084ac3..1e43eba770 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -23,7 +23,7 @@ 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, diff --git a/plugins/scaffolder/alpha-api-report.md b/plugins/scaffolder/alpha-api-report.md index bf9fc5782d..55d14bff75 100644 --- a/plugins/scaffolder/alpha-api-report.md +++ b/plugins/scaffolder/alpha-api-report.md @@ -8,7 +8,7 @@ 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-v5'; +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'; 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/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/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/legacy/MultistepJsonForm/FieldOverrides/DescriptionField.tsx b/plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/DescriptionField.tsx index 3c592860ef..eded38beee 100644 --- a/plugins/scaffolder/src/legacy/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/legacy/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx index eddbbff4bf..c9a9be50e0 100644 --- a/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx +++ b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx @@ -36,6 +36,7 @@ import { transformSchemaToProps } from './schema'; import cloneDeep from 'lodash/cloneDeep'; import * as fieldOverrides from './FieldOverrides'; import { ReviewStep } from './ReviewStep'; +import validator from '@rjsf/validator-ajv8'; import { extractSchemaFromStep } from '@backstage/plugin-scaffolder-react/alpha'; import { selectedTemplateRouteRef } from '../../routes'; import { @@ -180,6 +181,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => { ['ObjectFieldTemplate']; + uiSchema['ui:ObjectFieldTemplate'] = Layout; } } diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx index 766581e311..df05efc921 100644 --- a/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx @@ -192,7 +192,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) { onUpdate(e.formData)} onReset={() => onUpdate({})} diff --git a/plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx index a5cac1ef54..ffb754bae3 100644 --- a/plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx @@ -162,7 +162,7 @@ export const TemplatePage = ({ { /* 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', () => { @@ -146,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', () => { @@ -195,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/legacy/TemplatePage/createValidator.ts b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts index 04325ce5e5..ae0b834fe9 100644 --- a/plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts +++ b/plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts @@ -15,7 +15,7 @@ */ import { LegacyCustomFieldValidator } from '@backstage/plugin-scaffolder-react/alpha'; -import { FormValidation } from '@rjsf/core'; +import { FieldValidation, FormValidation } from '@rjsf/utils'; import { JsonObject, JsonValue } from '@backstage/types'; import { ApiHolder } from '@backstage/core-plugin-api'; @@ -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/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/yarn.lock b/yarn.lock index 492c512e76..a6f75ec491 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 @@ -14621,7 +14619,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: @@ -14637,26 +14635,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: @@ -14669,18 +14648,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" @@ -19611,7 +19578,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: @@ -22270,7 +22237,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: @@ -22536,7 +22503,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 @@ -30316,17 +30283,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" @@ -33243,7 +33199,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: @@ -36760,7 +36716,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 From d4f2e21386c5accffca1bef534d5c4cc3e5aff83 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 13 Oct 2023 08:48:15 +0200 Subject: [PATCH 12/14] chore: fix Signed-off-by: blam --- plugins/scaffolder-react/src/next/components/Form/Form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder-react/src/next/components/Form/Form.tsx b/plugins/scaffolder-react/src/next/components/Form/Form.tsx index 7398e0bb2e..85e75e2c0d 100644 --- a/plugins/scaffolder-react/src/next/components/Form/Form.tsx +++ b/plugins/scaffolder-react/src/next/components/Form/Form.tsx @@ -40,7 +40,7 @@ export const Form = (props: PropsWithChildren) => { ); From 445d7a305813c179bc16fa72a19f695ae9a175d2 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 13 Oct 2023 08:51:49 +0200 Subject: [PATCH 13/14] chore: fix Signed-off-by: blam --- .../src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx | 3 +-- .../src/next/TemplateEditorPage/CustomFieldExplorer.tsx | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx b/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx index de0c243e42..0ba5db560a 100644 --- a/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx +++ b/plugins/scaffolder/src/legacy/TemplateEditorPage/CustomFieldExplorer.tsx @@ -150,8 +150,7 @@ export const CustomFieldExplorer = ({ Date: Tue, 17 Oct 2023 12:51:07 +0200 Subject: [PATCH 14/14] scaffolder: type fix in MultistepJsonForm Signed-off-by: Patrik Oldsberg --- .../src/legacy/MultistepJsonForm/MultistepJsonForm.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx index c9a9be50e0..312522bc88 100644 --- a/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx +++ b/plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx @@ -29,7 +29,7 @@ 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'; @@ -189,7 +189,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => { formData={formData} formContext={{ formData }} onChange={onChange} - onSubmit={(e: ISubmitEvent) => { + onSubmit={(e: IChangeEvent) => { if (e.errors.length === 0) handleNext(); }} {...formProps}