paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 45 Packages Projects Releases Wiki Activity

feat: updating name for default swappable refs

Browse Source 
Signed-off-by: benjdlambert <ben@blam.sh>
This commit is contained in:
benjdlambert
2025-08-11 13:41:02 +02:00
parent 4de73c5c18
commit d274e0c90e
8 changed files with 34 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/frontend-system/building-apps/03-built-in-extensions.md
+5 -5
View File
@@ -59,11 +59,11 @@ Extensions that provides default theme inputs for the `App` extension.
Extensions that provides default components inputs for the `App` extension.
| kind | namespace | name | id |
| :--------: | :-------: | :-------------------------------: | :------------------------------------------------: |
| components | app | core.components.progress | `components:app/core.components.progress` |
| components | app | core.components.notFoundErrorPage | `components:app/core.components.notFoundErrorPage` |
| components | app | core.components.errorDisplay | `components:app/core.components.errorDisplay` |
| kind | namespace | name | id |
| :--------: | :-------: | :-----------------------: | :----------------------------------------: |
| components | app | core-progress | `components:app/core-progress` |
| components | app | core-not-found-error-page | `components:app/core-not-found-error-page` |
| components | app | core-error-display | `components:app/core-error-display` |
#### Default apis extensions
docs/frontend-system/building-plugins/06-swappable-components.md
+9 -24
View File
@@ -49,7 +49,7 @@ import { ExampleSwappableComponent } from '@internal/plugin-example-react';
## Overriding a Swappable Component
In order to override a Swappable Component, you need to create a `SwappableComponentBlueprint` and install it with the `app` plugin.
There's two different ways to add extensions to the `app` plugin, both are documented below in an example of overriding the `Progress` Swappable Component.
There are two different ways to add extensions to the `app` plugin, both are documented below in an example of overriding the `Progress` Swappable Component.
```tsx title="in packages/app/src/App.tsx"
import {
@@ -63,25 +63,12 @@ import appPlugin from '@backstage/plugin-app';
const app = createApp({
features: [
// Override an existing extension by ID provided by the app plugin:
appPlugin.withOverrides({
extensions: [
appPlugin
.getExtension('component:app/core.components.progress')
.override({
params: defineParams =>
defineParams({
component: Progress,
loader: () => MyCustomProgress,
}),
}),
],
}),
// OR: Add another extension but with the same component ID:
appPlugin.withOverrides({
// Using a module to provide the extenion to the app
createFrontendModule({
pluginId: 'app',
extensions: [
SwappableComponentBlueprint.make({
name: 'core.components.progress',
name: 'core-progress',
params: defineParams =>
defineParams({
component: Progress,
@@ -90,12 +77,10 @@ const app = createApp({
}),
],
}),
// OR: Use a module for the app plugin:
createFrontendModule({
pluginId: 'app',
// Core components that already ship with the app plugin can be overriden using getExtension()
appPlugin.withOverrides({
extensions: [
SwappableComponentBlueprint.make({
name: 'core.components.progress',
appPlugin.getExtension('component:app/core-progress').override({
params: defineParams =>
defineParams({
component: Progress,
@@ -110,7 +95,7 @@ const app = createApp({
## Default Swappable Components
Currently there is only three different built-in Swappable Components that you can replace the implementations of, and these live in `@backstage/frontend-plugin-api`. They are as follows:
Currently there are only three different built-in Swappable Components that you can replace the implementations of, and these live in `@backstage/frontend-plugin-api`. They are as follows:
- `<Progress />
- `<ErrorDisplay />