From acd4f9b20bed06dbe24dd75d4bbdfb00c3b74501 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Sun, 29 Jan 2023 14:35:34 +0100 Subject: [PATCH] scaffolder-react: refactor for cleaner separation between stable and next Signed-off-by: Patrik Oldsberg --- .changeset/forty-bulldogs-build.md | 5 ++++ plugins/scaffolder-react/api-report.md | 2 +- .../src/hooks/useCustomLayouts.ts | 4 +-- plugins/scaffolder-react/src/index.ts | 2 +- .../createScaffolderLayout.ts} | 25 ++++++++++++++++--- .../scaffolder-react/src/layouts/index.tsx | 25 +++++++++++++++++++ .../src/{next => }/layouts/keys.ts | 0 .../next/components/Stepper/Stepper.test.tsx | 2 +- .../src/next/components/Stepper/Stepper.tsx | 3 ++- .../next/hooks/useTransformSchemaToProps.ts | 2 +- plugins/scaffolder-react/src/next/index.ts | 2 -- plugins/scaffolder-react/src/next/types.ts | 23 +++-------------- 12 files changed, 63 insertions(+), 32 deletions(-) create mode 100644 .changeset/forty-bulldogs-build.md rename plugins/scaffolder-react/src/{next/layouts/index.tsx => layouts/createScaffolderLayout.ts} (76%) create mode 100644 plugins/scaffolder-react/src/layouts/index.tsx rename plugins/scaffolder-react/src/{next => }/layouts/keys.ts (100%) diff --git a/.changeset/forty-bulldogs-build.md b/.changeset/forty-bulldogs-build.md new file mode 100644 index 0000000000..aa7954a2c2 --- /dev/null +++ b/.changeset/forty-bulldogs-build.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +The `FormProps` type is now correctly only available as an `/alpha` export. diff --git a/plugins/scaffolder-react/api-report.md b/plugins/scaffolder-react/api-report.md index deead4366c..7068bbbd4f 100644 --- a/plugins/scaffolder-react/api-report.md +++ b/plugins/scaffolder-react/api-report.md @@ -121,7 +121,7 @@ export type FieldExtensionOptions< schema?: CustomFieldExtensionSchema; }; -// @public +// @alpha export type FormProps = Pick< FormProps_2, 'transformErrors' | 'noHtml5Validate' diff --git a/plugins/scaffolder-react/src/hooks/useCustomLayouts.ts b/plugins/scaffolder-react/src/hooks/useCustomLayouts.ts index afcc45cd48..461b89f808 100644 --- a/plugins/scaffolder-react/src/hooks/useCustomLayouts.ts +++ b/plugins/scaffolder-react/src/hooks/useCustomLayouts.ts @@ -14,8 +14,8 @@ * limitations under the License. */ import { useElementFilter } from '@backstage/core-plugin-api'; -import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../next/layouts/keys'; -import { type LayoutOptions } from '../next/types'; +import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from '../layouts/keys'; +import { LayoutOptions } from '../layouts'; /** * Hook that returns all custom field extensions from the current outlet. diff --git a/plugins/scaffolder-react/src/index.ts b/plugins/scaffolder-react/src/index.ts index 41a1298b37..67703e3ed1 100644 --- a/plugins/scaffolder-react/src/index.ts +++ b/plugins/scaffolder-react/src/index.ts @@ -19,6 +19,6 @@ export * from './types'; export * from './secrets'; export * from './api'; export * from './hooks'; +export * from './layouts'; export * from './next'; -export type { FormProps } from './next'; diff --git a/plugins/scaffolder-react/src/next/layouts/index.tsx b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts similarity index 76% rename from plugins/scaffolder-react/src/next/layouts/index.tsx rename to plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts index 0b1533c7c8..328f366007 100644 --- a/plugins/scaffolder-react/src/next/layouts/index.tsx +++ b/plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts @@ -1,6 +1,3 @@ -import { LayoutOptions } from '../types'; -import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from './keys'; - /* * Copyright 2023 The Backstage Authors * @@ -16,7 +13,29 @@ import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from './keys'; * See the License for the specific language governing permissions and * limitations under the License. */ + +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'; + +/** + * The field template from `@rjsf/core` which is a react component that gets passed `@rjsf/core` field related props. + * + * @public + */ +export type LayoutTemplate = NonNullable< + SchemaFormProps['uiSchema'] +>['ui:ObjectFieldTemplate']; + +/** + * The type of layouts that is passed to the TemplateForms + * + * @public + */ +export interface LayoutOptions

{ + name: string; + component: LayoutTemplate

; +} /** * A type used to wrap up the FieldExtension to embed the ReturnValue and the InputProps diff --git a/plugins/scaffolder-react/src/layouts/index.tsx b/plugins/scaffolder-react/src/layouts/index.tsx new file mode 100644 index 0000000000..ab3c30e1cb --- /dev/null +++ b/plugins/scaffolder-react/src/layouts/index.tsx @@ -0,0 +1,25 @@ +/* + * 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 { + ScaffolderLayouts, + createScaffolderLayout, +} from './createScaffolderLayout'; +export type { + LayoutComponent, + LayoutTemplate, + LayoutOptions, +} from './createScaffolderLayout'; diff --git a/plugins/scaffolder-react/src/next/layouts/keys.ts b/plugins/scaffolder-react/src/layouts/keys.ts similarity index 100% rename from plugins/scaffolder-react/src/next/layouts/keys.ts rename to plugins/scaffolder-react/src/layouts/keys.ts 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 5995d0e419..0b17c550a0 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx @@ -21,7 +21,7 @@ import { act, fireEvent } from '@testing-library/react'; import type { RJSFValidationError } from '@rjsf/utils'; import { JsonValue } from '@backstage/types'; import { NextFieldExtensionComponentProps } from '../../extensions'; -import { LayoutTemplate } from '../../types'; +import { LayoutTemplate } from '../../../layouts'; describe('Stepper', () => { it('should render the step titles for each step of the manifest', async () => { diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 096173deb7..c97d31c487 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -32,7 +32,8 @@ import { ReviewState, type ReviewStateProps } from '../ReviewState'; import { useTemplateSchema } from '../../hooks/useTemplateSchema'; import validator from '@rjsf/validator-ajv8'; import { useFormDataFromQuery } from '../../hooks'; -import type { FormProps, LayoutOptions } from '../../types'; +import { FormProps } from '../../types'; +import { LayoutOptions } from '../../../layouts'; import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps'; const useStyles = makeStyles(theme => ({ diff --git a/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.ts b/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.ts index ffae1df8bf..881c4f90c5 100644 --- a/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.ts +++ b/plugins/scaffolder-react/src/next/hooks/useTransformSchemaToProps.ts @@ -14,7 +14,7 @@ * limitations under the License. */ import { type ParsedTemplateSchema } from './useTemplateSchema'; -import { type LayoutOptions } from '../types'; +import { type LayoutOptions } from '../../layouts'; interface Options { layouts?: LayoutOptions[]; diff --git a/plugins/scaffolder-react/src/next/index.ts b/plugins/scaffolder-react/src/next/index.ts index 4674c1f70a..a18649f506 100644 --- a/plugins/scaffolder-react/src/next/index.ts +++ b/plugins/scaffolder-react/src/next/index.ts @@ -15,8 +15,6 @@ */ export * from './components'; export * from './extensions'; -export * from './layouts'; export * from './types'; export * from './lib'; export * from './hooks'; -export * from './layouts'; diff --git a/plugins/scaffolder-react/src/next/types.ts b/plugins/scaffolder-react/src/next/types.ts index 40ba511dbe..f048b33ded 100644 --- a/plugins/scaffolder-react/src/next/types.ts +++ b/plugins/scaffolder-react/src/next/types.ts @@ -13,32 +13,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import type { FormProps as SchemaFormProps } from '@rjsf/core-v5'; + /** * Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderpage` * - * @public + * @alpha */ export type FormProps = Pick< SchemaFormProps, 'transformErrors' | 'noHtml5Validate' >; - -/** - * The field template from `@rjsf/core` which is a react component that gets passed `@rjsf/core` field related props. - * - * @public - */ -export type LayoutTemplate = NonNullable< - SchemaFormProps['uiSchema'] ->['ui:ObjectFieldTemplate']; - -/** - * The type of layouts that is passed to the TemplateForms - * - * @public - */ -export interface LayoutOptions

{ - name: string; - component: LayoutTemplate

; -}