chore: making the changes backwards compatible with default extensions being rendered when nothing supplied, and updating changeset to reflect This

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

.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 {
   <ScaffolderFieldExtensions>
     <RepoUrlPickerFieldExtension />
     <OwnerPickerFieldExtension />
+
+    {/*Any other extensions you want to provide*/}
   </ScaffolderFieldExtensions>
 </Route>;
 ```
 
-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.

packages/app/src/App.tsx

@@ -113,12 +113,7 @@ const routes = (
     </Route>
     <Route path="/catalog-import" element={<CatalogImportPage />} />
     <Route path="/docs" element={<TechdocsPage />} />
-    <Route path="/create" element={<ScaffolderPage />}>
-      <ScaffolderFieldExtensions>
-        <RepoUrlPickerFieldExtension />
-        <OwnerPickerFieldExtension />
-      </ScaffolderFieldExtensions>
-    </Route>
+    <Route path="/create" element={<ScaffolderPage />} />
     <Route path="/explore" element={<ExplorePage />} />
     <Route
       path="/tech-radar"

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -14,9 +14,6 @@ import {
 } from '@backstage/plugin-catalog';
 import {CatalogImportPage, catalogImportPlugin} from '@backstage/plugin-catalog-import';
 import { 
-  OwnerPickerFieldExtension, 
-  RepoUrlPickerFieldExtension, 
-  ScaffolderFieldExtensions, 
   ScaffolderPage, 
   scaffolderPlugin 
 } from '@backstage/plugin-scaffolder';
@@ -57,12 +54,7 @@ const routes = (
       {entityPage}
     </Route>
     <Route path="/docs" element={<TechdocsPage />} />
-    <Route path="/create" element={<ScaffolderPage />}>
-      <ScaffolderFieldExtensions>
-        <RepoUrlPickerFieldExtension />
-        <OwnerPickerFieldExtension />
-      </ScaffolderFieldExtensions>
-    </Route>
+    <Route path="/create" element={<ScaffolderPage />} />
     <Route path="/api-docs" element={<ApiExplorerPage />} />
     <Route
       path="/tech-radar"

plugins/scaffolder/src/components/Router.tsx

@@ -25,20 +25,23 @@ import {
   FieldExtensionOptions,
   FIELD_EXTENSION_WRAPPER_KEY,
   FIELD_EXTENSION_KEY,
+  DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS,
 } from '../extensions';
 import { collectComponentData, collectChildren } from '../extensions/helpers';
 
 export const Router = () => {
   const outlet = useOutlet();
 
-  const fieldExtensions = useMemo(
-    () =>
-      collectComponentData<FieldExtensionOptions>(
-        collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(),
-        FIELD_EXTENSION_KEY,
-      ),
-    [outlet],
-  );
+  const fieldExtensions = useMemo(() => {
+    const registeredExtensions = collectComponentData<FieldExtensionOptions>(
+      collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(),
+      FIELD_EXTENSION_KEY,
+    );
+
+    return registeredExtensions.length
+      ? registeredExtensions
+      : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
+  }, [outlet]);
 
   return (
     <Routes>

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',
+  },
+];

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<T = any> = {
-  name: string;
-  component: (props: FieldProps<T>) => 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';

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<T = any> = {
+  name: string;
+  component: (props: FieldProps<T>) => JSX.Element | null;
+  validation?: (data: T, field: FieldValidation) => void;
+};