From c2c83f46a78ece5ab0d3d57b39e4a231c7b8af65 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 31 May 2021 10:58:21 +0200 Subject: [PATCH] chore: making the changes backwards compatible with default extensions being rendered when nothing supplied, and updating changeset to reflect This Signed-off-by: blam --- .changeset/brave-lemons-hope.md | 9 +++-- packages/app/src/App.tsx | 7 +--- .../default-app/packages/app/src/App.tsx | 10 +----- plugins/scaffolder/src/components/Router.tsx | 19 ++++++----- plugins/scaffolder/src/extensions/default.ts | 33 +++++++++++++++++++ plugins/scaffolder/src/extensions/index.tsx | 12 +++---- plugins/scaffolder/src/extensions/types.ts | 22 +++++++++++++ 7 files changed, 77 insertions(+), 35 deletions(-) create mode 100644 plugins/scaffolder/src/extensions/default.ts create mode 100644 plugins/scaffolder/src/extensions/types.ts diff --git a/.changeset/brave-lemons-hope.md b/.changeset/brave-lemons-hope.md index c1e2e3f3bd..64c0d59538 100644 --- a/.changeset/brave-lemons-hope.md +++ b/.changeset/brave-lemons-hope.md @@ -1,9 +1,8 @@ --- -'@backstage/plugin-scaffolder': minor -'@backstage/create-app': patch +'@backstage/plugin-scaffolder': patch --- -Scaffolder Field Extensions are here! This means you'll now have to change how the `ScaffolderPage` is wired up in your `app/src/App.tsx` to pass in the custom fields to the Scaffolder. +Scaffolder Field Extensions are here! This means you'll now the ability to create custom field extensions and have the Scaffolder use the components when collecting information from the user in the wizard. By default we supply the `RepoUrlPicker` and the `OwnerPicker`, but if you want to provide some more extensions or override the built on ones you will have to change how the `ScaffolderPage` is wired up in your `app/src/App.tsx` to pass in the custom fields to the Scaffolder. You'll need to move this: @@ -24,10 +23,10 @@ import { + + {/*Any other extensions you want to provide*/} ; ``` -Failure to do this will result in no component being rendered for the custom field's like `OwnerPicker` and `RepoUrlPicker`. - More documentation on how to write your own `FieldExtensions` to follow. diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 90d5463c59..191814ca5a 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -113,12 +113,7 @@ const routes = ( } /> } /> - }> - - - - - + } /> } /> } /> - }> - - - - - + } /> } /> { const outlet = useOutlet(); - const fieldExtensions = useMemo( - () => - collectComponentData( - collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(), - FIELD_EXTENSION_KEY, - ), - [outlet], - ); + const fieldExtensions = useMemo(() => { + const registeredExtensions = collectComponentData( + collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(), + FIELD_EXTENSION_KEY, + ); + + return registeredExtensions.length + ? registeredExtensions + : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS; + }, [outlet]); return ( diff --git a/plugins/scaffolder/src/extensions/default.ts b/plugins/scaffolder/src/extensions/default.ts new file mode 100644 index 0000000000..2da0dc57ba --- /dev/null +++ b/plugins/scaffolder/src/extensions/default.ts @@ -0,0 +1,33 @@ +/* + * Copyright 2021 Spotify AB + * + * 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 { OwnerPicker } from '../components/fields/OwnerPicker'; +import { + RepoUrlPicker, + repoPickerValidation, +} from '../components/fields/RepoUrlPicker'; +import { FieldExtensionOptions } from './types'; + +export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS: FieldExtensionOptions[] = [ + { + component: RepoUrlPicker, + name: 'RepoUrlPicker', + validation: repoPickerValidation, + }, + { + component: OwnerPicker, + name: 'OwnerPicker', + }, +]; diff --git a/plugins/scaffolder/src/extensions/index.tsx b/plugins/scaffolder/src/extensions/index.tsx index 874c6c3a18..bb53329342 100644 --- a/plugins/scaffolder/src/extensions/index.tsx +++ b/plugins/scaffolder/src/extensions/index.tsx @@ -15,14 +15,8 @@ */ import { Extension, attachComponentData } from '@backstage/core'; -import { FieldValidation, FieldProps } from '@rjsf/core'; import React from 'react'; - -export type FieldExtensionOptions = { - name: string; - component: (props: FieldProps) => JSX.Element | null; - validation?: (data: T, field: FieldValidation) => void; -}; +import { FieldExtensionOptions } from './types'; export const FIELD_EXTENSION_WRAPPER_KEY = 'scaffolder.extensions.wrapper.v1'; export const FIELD_EXTENSION_KEY = 'scaffolder.extensions.field.v1'; @@ -51,3 +45,7 @@ attachComponentData( FIELD_EXTENSION_WRAPPER_KEY, true, ); + +export type { FieldExtensionOptions }; + +export { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from './default'; diff --git a/plugins/scaffolder/src/extensions/types.ts b/plugins/scaffolder/src/extensions/types.ts new file mode 100644 index 0000000000..5e7de9087f --- /dev/null +++ b/plugins/scaffolder/src/extensions/types.ts @@ -0,0 +1,22 @@ +/* + * Copyright 2021 Spotify AB + * + * 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 { FieldValidation, FieldProps } from '@rjsf/core'; + +export type FieldExtensionOptions = { + name: string; + component: (props: FieldProps) => JSX.Element | null; + validation?: (data: T, field: FieldValidation) => void; +};