From 5a6ba065adf84157f1f14a1905cb5a09c60e3bad Mon Sep 17 00:00:00 2001 From: blam Date: Wed, 19 May 2021 14:41:43 +0200 Subject: [PATCH] chore: reworking a little more to simplify again Signed-off-by: blam --- .../core-api/src/extensions/extensions.tsx | 2 +- plugins/scaffolder/src/components/Router.tsx | 5 +++-- .../fields/OwnerPicker/OwnerPicker.tsx | 6 +++--- .../fields/RepoUrlPicker/RepoUrlPicker.tsx | 6 +++--- plugins/scaffolder/src/extensions/helpers.ts | 2 +- plugins/scaffolder/src/extensions/index.tsx | 19 ++++--------------- plugins/scaffolder/src/index.ts | 2 +- plugins/scaffolder/src/plugin.ts | 16 +++------------- 8 files changed, 19 insertions(+), 39 deletions(-) diff --git a/packages/core-api/src/extensions/extensions.tsx b/packages/core-api/src/extensions/extensions.tsx index d16f24c229..9f6412f960 100644 --- a/packages/core-api/src/extensions/extensions.tsx +++ b/packages/core-api/src/extensions/extensions.tsx @@ -20,7 +20,7 @@ import { BackstagePlugin, Extension } from '../plugin/types'; import { RouteRef, useRouteRef } from '../routing'; import { attachComponentData } from './componentData'; -export type ComponentLoader = +type ComponentLoader = | { lazy: () => Promise; } diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx index 8561da1421..d80e75cd38 100644 --- a/plugins/scaffolder/src/components/Router.tsx +++ b/plugins/scaffolder/src/components/Router.tsx @@ -20,17 +20,18 @@ import { ScaffolderPage } from './ScaffolderPage'; import { TemplatePage } from './TemplatePage'; import { TaskPage } from './TaskPage'; import { ActionsPage } from './ActionsPage'; + import { FieldExtensionOptions, FIELD_EXTENSION_WRAPPER_KEY, FIELD_EXTENSION_KEY, } from '../extensions'; -import { collect, collectChildren } from '../extensions/helpers'; +import { collectComponentData, collectChildren } from '../extensions/helpers'; export const Router = () => { const outlet = useOutlet(); - const fieldExtensions = collect( + const fieldExtensions = collectComponentData( collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(), FIELD_EXTENSION_KEY, ); diff --git a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx index 0091a6741e..39183a856f 100644 --- a/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx +++ b/plugins/scaffolder/src/components/fields/OwnerPicker/OwnerPicker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React from 'react'; -import { Field } from '@rjsf/core'; +import { FieldProps } from '@rjsf/core'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; import { useApi } from '@backstage/core'; import { useAsync } from 'react-use'; @@ -39,14 +39,14 @@ const entityRef = (entity: Entity | undefined): string => { return `${kindPart}${namespacePart}${name}`; }; -export const OwnerPicker: Field = ({ +export const OwnerPicker = ({ onChange, schema: { title = 'Owner', description = 'The owner of the component' }, required, uiSchema, rawErrors, formData, -}) => { +}: FieldProps) => { const allowedKinds = (uiSchema['ui:options']?.allowedKinds || [ 'Group', 'User', diff --git a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx index 31b4c4fa9b..49d16169ac 100644 --- a/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx +++ b/plugins/scaffolder/src/components/fields/RepoUrlPicker/RepoUrlPicker.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React, { useCallback, useEffect } from 'react'; -import { Field } from '@rjsf/core'; +import { FieldProps } from '@rjsf/core'; import { useApi, Progress } from '@backstage/core'; import { scaffolderApiRef } from '../../../api'; import { useAsync } from 'react-use'; @@ -69,12 +69,12 @@ function serializeFormData(data: { return `${data.host}?${params.toString()}`; } -export const RepoUrlPicker: Field = ({ +export const RepoUrlPicker = ({ onChange, uiSchema, rawErrors, formData, -}) => { +}: FieldProps) => { const api = useApi(scaffolderApiRef); const allowedHosts = uiSchema['ui:options']?.allowedHosts as string[]; diff --git a/plugins/scaffolder/src/extensions/helpers.ts b/plugins/scaffolder/src/extensions/helpers.ts index 92fa06d372..2eac9780e5 100644 --- a/plugins/scaffolder/src/extensions/helpers.ts +++ b/plugins/scaffolder/src/extensions/helpers.ts @@ -16,7 +16,7 @@ import React from 'react'; import { getComponentData } from '@backstage/core'; -export const collect = ( +export const collectComponentData = ( children: React.ReactNode, componentDataKey: string, ) => { diff --git a/plugins/scaffolder/src/extensions/index.tsx b/plugins/scaffolder/src/extensions/index.tsx index 3a43c713d7..d794ac71e4 100644 --- a/plugins/scaffolder/src/extensions/index.tsx +++ b/plugins/scaffolder/src/extensions/index.tsx @@ -13,8 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { Extension, attachComponentData } from '@backstage/core'; import { FieldValidation, FieldProps } from '@rjsf/core'; +import React from 'react'; export type FieldExtensionOptions = { name: string; @@ -43,18 +45,5 @@ export function createScaffolderFieldExtension( }; } -export function createScaffolderFieldExtensionWrapper(): Extension<() => null> { - return { - expose() { - const FieldExtensionWrapperDataHolder: any = () => null; - - attachComponentData( - FieldExtensionWrapperDataHolder, - FIELD_EXTENSION_WRAPPER_KEY, - true, - ); - - return FieldExtensionWrapperDataHolder; - }, - }; -} +export const ScaffolderCustomFields: React.ComponentType = () => null; +attachComponentData(ScaffolderCustomFields, FIELD_EXTENSION_WRAPPER_KEY, true); diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts index 8e4415e3c1..b92fd9d4bc 100644 --- a/plugins/scaffolder/src/index.ts +++ b/plugins/scaffolder/src/index.ts @@ -20,7 +20,7 @@ export { ScaffolderPage, OwnerPickerFieldExtension, RepoUrlPickerFieldExtension, - ScaffolderCustomFields, } from './plugin'; +export { ScaffolderCustomFields } from './extensions'; export type { ScaffolderApi } from './api'; export { ScaffolderClient, scaffolderApiRef } from './api'; diff --git a/plugins/scaffolder/src/plugin.ts b/plugins/scaffolder/src/plugin.ts index 796882be03..1ffe3bdb81 100644 --- a/plugins/scaffolder/src/plugin.ts +++ b/plugins/scaffolder/src/plugin.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -import { JsonValue } from '@backstage/config'; import { createApiFactory, createPlugin, @@ -26,10 +25,7 @@ import { OwnerPicker } from './components/fields/OwnerPicker'; import { RepoUrlPicker } from './components/fields/RepoUrlPicker'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; import { scaffolderApiRef, ScaffolderClient } from './api'; -import { - createScaffolderFieldExtension, - createScaffolderFieldExtensionWrapper, -} from './extensions'; +import { createScaffolderFieldExtension } from './extensions'; import { rootRouteRef, registerComponentRouteRef } from './routes'; export const scaffolderPlugin = createPlugin({ @@ -55,8 +51,7 @@ export const scaffolderPlugin = createPlugin({ }); export const RepoUrlPickerFieldExtension = scaffolderPlugin.provide( - createScaffolderFieldExtension({ - // TODO(blam): work out how to fix these types properly. + createScaffolderFieldExtension({ component: RepoUrlPicker, name: 'RepoUrlPicker', validation: (value, validation) => { @@ -73,8 +68,7 @@ export const RepoUrlPickerFieldExtension = scaffolderPlugin.provide( ); export const OwnerPickerFieldExtension = scaffolderPlugin.provide( - createScaffolderFieldExtension({ - // TODO(blam): work out how to fix these types properly. + createScaffolderFieldExtension({ component: OwnerPicker, name: 'OwnerPicker', }), @@ -86,7 +80,3 @@ export const ScaffolderPage = scaffolderPlugin.provide( mountPoint: rootRouteRef, }), ); - -export const ScaffolderCustomFields = scaffolderPlugin.provide( - createScaffolderFieldExtensionWrapper(), -);