chore: re-add the attachComponentData again, it's a little nicer for now

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

plugins/scaffolder/src/components/Router.tsx

@@ -21,7 +21,7 @@ import { TemplatePage } from './TemplatePage';
 import { TaskPage } from './TaskPage';
 import { ActionsPage } from './ActionsPage';
 
-export const Router = ({ children }: React.PropsWithChildren<{}>) => {
+export const Router = () => {
   return (
     <>
       <Routes>
@@ -30,7 +30,6 @@ export const Router = ({ children }: React.PropsWithChildren<{}>) => {
         <Route path="/tasks/:taskId" element={<TaskPage />} />
         <Route path="/actions" element={<ActionsPage />} />
       </Routes>
-      {children}
     </>
   );
 };

plugins/scaffolder/src/extensions/index.tsx

@@ -13,29 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { JsonValue } from '@backstage/config';
-import { Extension, useApi } from '@backstage/core';
-import { FieldValidation, Field } from '@rjsf/core';
-import { scaffolderApiRef } from '../api';
+import { Extension, attachComponentData } from '@backstage/core';
+import { FieldValidation, FieldProps } from '@rjsf/core';
 
-export type FieldExtensionOptions = {
+export type FieldExtensionOptions<T = any> = {
   name: string;
-  component: Field;
-  validation: (data: JsonValue, field: FieldValidation) => void;
+  component: (props: FieldProps<T>) => JSX.Element | null;
+  validation?: (data: T, field: FieldValidation) => void;
 };
 
-export function createScaffolderFieldExtension(
-  options: FieldExtensionOptions,
-): Extension<Field> {
-  const WrappingRegister = () => {
-    const scaffolderApi = useApi(scaffolderApiRef);
-    scaffolderApi.registerCustomField(options);
-    return null;
-  };
-
+export function createScaffolderFieldExtension<T = any>(
+  options: FieldExtensionOptions<T>,
+): Extension<void> {
   return {
     expose() {
-      return WrappingRegister;
+      const FieldExtensionDataHolder: any = () => null;
+
+      attachComponentData(
+        FieldExtensionDataHolder,
+        'scaffolder.extensions.field.v1',
+        options,
+      );
+
+      return FieldExtensionDataHolder;
     },
   };
 }

plugins/scaffolder/src/plugin.ts

@@ -22,8 +22,8 @@ import {
   discoveryApiRef,
   identityApiRef,
 } from '@backstage/core';
-import { OwnerPicker as OwnerPickerComponent } from './components/fields/OwnerPicker';
-import { RepoUrlPicker as RepoUrlPickerComponent } from './components/fields/RepoUrlPicker';
+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 } from './extensions';
@@ -51,12 +51,12 @@ export const scaffolderPlugin = createPlugin({
   },
 });
 
-export const RepoUrlPicker = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
-    // TODO: work out how to type this component part so we can enforce FieldComponent from RJSF
-    component: RepoUrlPickerComponent,
+export const RepoUrlPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension<string>({
+    // TODO(blam): work out how to fix these types properly.
+    component: RepoUrlPicker,
     name: 'RepoUrlPicker',
-    validation: (value: JsonValue, validation) => {
+    validation: (value, validation) => {
       try {
         const { host, searchParams } = new URL(`https://${value}`);
         if (!host || !searchParams.get('owner') || !searchParams.get('repo')) {
@@ -69,11 +69,11 @@ export const RepoUrlPicker = scaffolderPlugin.provide(
   }),
 );
 
-export const OwnerPicker = scaffolderPlugin.provide(
-  createScaffolderFieldExtension({
-    component: OwnerPickerComponent,
+export const OwnerPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension<string>({
+    // TODO(blam): work out how to fix these types properly.
+    component: OwnerPicker,
     name: 'OwnerPicker',
-    validation: () => {},
   }),
 );
 export const ScaffolderPage = scaffolderPlugin.provide(