chore: reworking a little more to simplify again

Signed-off-by: blam <ben@blam.sh>

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<FieldExtensionOptions>(
+  const fieldExtensions = collectComponentData<FieldExtensionOptions>(
     collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(),
     FIELD_EXTENSION_KEY,
   );

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<string>) => {
   const allowedKinds = (uiSchema['ui:options']?.allowedKinds || [
     'Group',
     'User',

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<string>) => {
   const api = useApi(scaffolderApiRef);
   const allowedHosts = uiSchema['ui:options']?.allowedHosts as string[];
 

plugins/scaffolder/src/extensions/helpers.ts

@@ -16,7 +16,7 @@
 import React from 'react';
 import { getComponentData } from '@backstage/core';
 
-export const collect = <T>(
+export const collectComponentData = <T>(
   children: React.ReactNode,
   componentDataKey: string,
 ) => {

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<T = any> = {
   name: string;
@@ -43,18 +45,5 @@ export function createScaffolderFieldExtension<T = any>(
   };
 }
 
-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);

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';

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<string>({
-    // 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<string>({
-    // 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(),
-);