chore: tidy up and add some docs about this

Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam
2023-03-21 13:48:55 +01:00
parent 6bd02a7fd5
commit 6afdb19016
2 changed files with 64 additions and 50 deletions
@@ -52,33 +52,54 @@ And this API should be the exact same as the previous Router, so you should be a
```tsx
<Route
path="/create"
element={
{/* highlight-remove-next-line */}
<ScaffolderPage
{/* highlight-add-next-line */}
<NextScaffolderPage
groups={[
{
title: 'Recommended',
filter: entity =>
entity?.metadata?.tags?.includes('recommended') ?? false,
},
]}
/>
}
>
<ScaffolderFieldExtensions>
<LowerCaseValuePickerFieldExtension />
{/* ... other extensions */}
</ScaffolderFieldExtensions>
<ScaffolderLayouts>
<TwoColumnLayout />
{/* ... other layouts */}
</ScaffolderLayouts>
</Route>
path="/create"
element={
{/* highlight-remove-next-line */}
<ScaffolderPage
{/* highlight-add-next-line */}
<NextScaffolderPage
groups={[
{
title: 'Recommended',
filter: entity =>
entity?.metadata?.tags?.includes('recommended') ?? false,
},
]}
/>
}
>
<ScaffolderFieldExtensions>
<LowerCaseValuePickerFieldExtension />
{/* ... other extensions */}
</ScaffolderFieldExtensions>
<ScaffolderLayouts>
<TwoColumnLayout />
{/* ... other layouts */}
</ScaffolderLayouts>
</Route>
```
Optionally, you can chose 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
<FeatureFlagged with="scaffolder-next-preview">
<Route path="/create" element={<NextScaffolderPage />}>
<ScaffolderFieldExtensions>
<DelayingComponentFieldExtension />
</ScaffolderFieldExtensions>
</Route>
</FeatureFlagged>
<FeatureFlagged without="scaffolder-next-preview">
<Route path="/create" element={<ScaffolderPage />}>
<ScaffolderFieldExtensions>
<DelayingComponentFieldExtension />
</ScaffolderFieldExtensions>
</Route>
</FeatureFlagged>
```
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`.
+18 -25
View File
@@ -208,22 +208,19 @@ const routes = (
<LightBox />
</TechDocsAddons>
</Route>
<FeatureFlagged with="scaffolder-next">
<Route
path="/create"
element={
<>
<NextScaffolderPage
groups={[
{
title: 'Recommended',
filter: entity =>
entity?.metadata?.tags?.includes('recommended') ?? false,
},
]}
/>
</>
<NextScaffolderPage
groups={[
{
title: 'Recommended',
filter: entity =>
entity?.metadata?.tags?.includes('recommended') ?? false,
},
]}
/>
}
>
<ScaffolderFieldExtensions>
@@ -234,22 +231,19 @@ const routes = (
</ScaffolderLayouts>
</Route>
</FeatureFlagged>
<FeatureFlagged without="scaffolder-next">
<Route
path="/create"
element={
<>
<ScaffolderPage
groups={[
{
title: 'Recommended',
filter: entity =>
entity?.metadata?.tags?.includes('recommended') ?? false,
},
]}
/>
</>
<ScaffolderPage
groups={[
{
title: 'Recommended',
filter: entity =>
entity?.metadata?.tags?.includes('recommended') ?? false,
},
]}
/>
}
>
<ScaffolderFieldExtensions>
@@ -260,7 +254,6 @@ const routes = (
</ScaffolderLayouts>
</Route>
</FeatureFlagged>
<Route path="/explore" element={<ExplorePage />} />
<Route
path="/tech-radar"