frontend-plugin-api,catalog-react: remove default* prefix from blueprint params

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2025-08-01 14:41:21 +02:00
parent 9ad8a1d30e
commit e4ddf22854
68 changed files with 275 additions and 176 deletions
@@ -21,7 +21,7 @@ Frontend plugin instances are created with the `createFrontendPlugin` function,
// This creates a new extension, see "Extension Blueprints" documentation for more details
const myPage = PageBlueprint.make({
params: {
defaultPath: '/my-page',
path: '/my-page',
loader: () => import('./MyPage').then(m => <m.MyPage />),
},
});
@@ -107,7 +107,7 @@ export default plugin.withOverrides({
// Override the catalog index page with a completely custom implementation
PageBlueprint.make({
params: {
defaultPath: '/catalog',
path: '/catalog',
routeRef: plugin.routes.catalogIndex,
loader: () => import('./CustomCatalogIndexPage').then(m => <m.Page />),
},
@@ -18,7 +18,7 @@ The following is a simple example of how one might use the blueprint `make` meth
```tsx
const myPageExtension = PageBlueprint.make({
params: {
defaultPath: '/my-page',
path: '/my-page',
loader: () => import('./components/MyPage').then(m => <m.MyPage />),
},
});
@@ -44,7 +44,7 @@ const myPageExtension = PageBlueprint.makeWithOverrides({
// Call and forward the result from the original factory, providing
// the blueprint parameters as the first argument.
return originalFactory({
defaultPath: '/my-page',
path: '/my-page',
loader: () =>
import('./components/MyPage').then(m => (
// We can now access values from the factory context when providing
@@ -101,7 +101,7 @@ The following is an example of how one might create a new extension blueprint:
```tsx
export interface MyWidgetBlueprintParams {
defaultTitle: string;
title: string;
element: JSX.Element;
}
@@ -119,7 +119,7 @@ export const MyWidgetBlueprint = createExtensionBlueprint({
// Note that while this is a valid pattern, you might often want to
// return separate pieces of data instead, more on that below.
coreExtensionData.reactElement(
<MyWidgetContainer title={config.title ?? params.defaultTitle}>
<MyWidgetContainer title={config.title ?? params.title}>
{params.element}
</MyWidgetContainer>,
),
@@ -175,7 +175,7 @@ To do that, we create a new extension data reference for our widget title. This
```tsx
export interface MyWidgetBlueprintParams {
defaultTitle: string;
title: string;
element: JSX.Element;
}
@@ -194,7 +194,7 @@ export const MyWidgetBlueprint = createExtensionBlueprint({
output: [widgetTitleRef, coreExtensionData.reactElement],
factory(params: MyWidgetBlueprintParams, { config }) {
return [
widgetTitleRef(config.title ?? params.defaultTitle),
widgetTitleRef(config.title ?? params.title),
coreExtensionData.reactElement(params.element),
];
},
@@ -89,7 +89,7 @@ const exampleExtension = PageBlueprint.make({
params: {
loader: () =>
import('./components/ExamplePage').then(m => <m.ExamplePage />),
defaultPath: '/example',
path: '/example',
},
});
```
@@ -318,7 +318,7 @@ import {
const customSearchPage = PageBlueprint.make({
params: {
defaultPath: '/search',
path: '/search',
loader: () =>
import('./CustomSearchPage').then(m => <m.CustomSearchPage />),
},
@@ -47,7 +47,7 @@ import { indexRouteRef } from './routes';
const catalogIndexPage = createPageExtension({
// The `name` option is omitted because this is an index page
defaultPath: '/entities',
path: '/entities',
// highlight-next-line
routeRef: indexRouteRef,
loader: () => import('./components').then(m => <m.IndexPage />),
@@ -197,7 +197,7 @@ import {
import { indexRouteRef, createComponentExternalRouteRef } from './routes';
const catalogIndexPage = createPageExtension({
defaultPath: '/entities',
path: '/entities',
routeRef: indexRouteRef,
loader: () => import('./components').then(m => <m.IndexPage />),
});
@@ -404,7 +404,7 @@ import {
import { indexRouteRef, detailsSubRouteRef } from './routes';
const catalogIndexPage = createPageExtension({
defaultPath: '/entities',
path: '/entities',
routeRef: indexRouteRef,
loader: () => import('./components').then(m => <m.IndexPage />),
});
@@ -42,7 +42,7 @@ The conversion functions such as `convertLegacyPageExtension` will attempt to in
```ts
const convertedIndexPage = convertLegacyPageExtension(TechDocsIndexPage, {
name: 'index',
defaultPath: '/docs',
path: '/docs',
});
```
@@ -72,10 +72,10 @@ const convertedTechdocsPlugin = convertLegacyPlugin(techdocsPlugin, {
extensions: [
convertLegacyPageExtension(TechDocsIndexPage, {
name: 'index',
defaultPath: '/docs',
path: '/docs',
}),
convertLegacyPageExtension(TechDocsReaderPage, {
defaultPath: '/docs/:namespace/:kind/:name/*',
path: '/docs/:namespace/:kind/:name/*',
}),
convertLegacyEntityContentExtension(EntityTechdocsContent),
],
@@ -75,7 +75,7 @@ const examplePage = PageBlueprint.make({
routeRef: rootRouteRef,
// This is the default path of this page, but integrators are free to override it
defaultPath: '/example',
path: '/example',
// Page extensions are always dynamically loaded using React.lazy().
// All of the functionality of this page is implemented in the
@@ -198,8 +198,8 @@ import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';
// route reference if you want to be able to generate a URL that links to the content.
const exampleEntityContent = EntityContentBlueprint.make({
params: {
defaultPath: 'example',
defaultTitle: 'Example',
path: 'example',
title: 'Example',
loader: () =>
import('./components/ExampleEntityContent').then(m => (
<m.ExampleEntityContent />
@@ -119,7 +119,7 @@ const fooPage = PageBlueprint.make({
params: {
// This is the path that was previously defined in the app code.
// It's labelled as the default one because it can be changed via configuration.
defaultPath: '/foo',
path: '/foo',
// You can reuse the existing routeRef by wrapping it with convertLegacyRouteRef.
routeRef: convertLegacyRouteRef(rootRouteRef),
// these inputs usually match the props required by the component.