diff --git a/docs/features/software-templates/testing-scaffolder-alpha.md b/docs/features/software-templates/testing-scaffolder-alpha.md
index c0b97e897c..138f4621d8 100644
--- a/docs/features/software-templates/testing-scaffolder-alpha.md
+++ b/docs/features/software-templates/testing-scaffolder-alpha.md
@@ -52,33 +52,54 @@ And this API should be the exact same as the previous Router, so you should be a
```tsx
- entity?.metadata?.tags?.includes('recommended') ?? false,
- },
- ]}
- />
- }
- >
-
-
- {/* ... other extensions */}
-
-
-
- {/* ... other layouts */}
-
-
+ path="/create"
+ element={
+ {/* highlight-remove-next-line */}
+
+ entity?.metadata?.tags?.includes('recommended') ?? false,
+ },
+ ]}
+ />
+ }
+>
+
+
+ {/* ... other extensions */}
+
+
+
+ {/* ... other layouts */}
+
+
```
+Optionally, you can choose to run the two side by side by using `FeatureFlags` in your `App.tsx` if you wish, but, we would also recommend duplicating any `CustomFieldExtensions` too as the new `CustomFieldExtensions` might not be compatible with the old form.
+
+```tsx
+
+ }>
+
+
+
+
+
+
+ }>
+
+
+
+
+
+```
+
+You should then be able to enable the `scaffolder-next-preview` feature flag under `/settings/feature-flags` in Backstage.
+
### Make the required changes to your `CustomFieldExtensions`
There's differently named function for creating field extensions part of the `/alpha` exports as these are the ones that can contain breaking changes because of the breaking changes that have been applied in `react-jsonschema-form`.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 4dacbbc007..1ee6978a87 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -27,7 +27,7 @@ import {
RELATION_PROVIDES_API,
} from '@backstage/catalog-model';
import { createApp } from '@backstage/app-defaults';
-import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
+import { AppRouter, FeatureFlagged, FlatRoutes } from '@backstage/core-app-api';
import {
AlertDisplay,
OAuthRequestDialog,
@@ -117,10 +117,13 @@ const app = createApp({
// Custom icon example
alert: AlarmIcon,
},
- // Example of application level feature flag
- // featureFlags: [
- // { name: 'tech-radar', description: 'Enables the tech radar plugin' },
- // ],
+ featureFlags: [
+ {
+ name: 'scaffolder-next-preview',
+ description: 'Preview the new Scaffolder Next',
+ pluginId: '',
+ },
+ ],
components: {
SignInPage: props => {
return (
@@ -208,49 +211,53 @@ const routes = (
-
- entity?.metadata?.tags?.includes('recommended') ?? false,
- },
- ]}
- />
- }
- >
-
-
-
-
-
-
-
-
- entity?.metadata?.tags?.includes('recommended') ?? false,
- },
- ]}
- />
- }
- >
-
-
-
-
-
-
-
+
+
+ entity?.metadata?.tags?.includes('recommended') ?? false,
+ },
+ ]}
+ />
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+ entity?.metadata?.tags?.includes('recommended') ?? false,
+ },
+ ]}
+ />
+ }
+ >
+
+
+
+
+
+
+
+
} />