- 0f37fa8:
entityRouteParams now also accepts entity refs, and can help with encoding the resulting parameters.
61d350f: BREAKING ALPHA: CatalogFilterBlueprint, used in the new frontend system, is now exported under plugin-catalog-react instead of plugin-catalog.
+ import { CatalogFilterBlueprint } from '@backstage/plugin-catalog-react/alpha';
- import { CatalogFilterBlueprint } from '@backstage/plugin-catalog/alpha';
09afd67: Adds EntityContextMenuItemBlueprint to enable extending the entity page's context menu with user defined items.
For example:
import { EntityContextMenuItemBlueprint } from '@backstage/plugin-catalog-react/alpha';
const myCustomHref = EntityContextMenuItemBlueprint.make({
name: 'test-href',
params: {
icon: <span>Example Icon</span>,
useProps: () => ({
title: 'Example Href',
href: '/example-path',
disabled: false,
component: 'a',
}),
},
});
const myCustomOnClick = EntityContextMenuItemBlueprint.make({
name: 'test-click',
params: {
icon: <span>Test Icon</span>,
useProps: () => ({
title: 'Example onClick',
onClick: () => window.alert('Hello world!'),
disabled: false,
}),
},
});
61d350f: BREAKING ALPHA: CatalogFilterBlueprint, used in the new frontend system, is now exported under plugin-catalog-react instead of plugin-catalog.
+ import { CatalogFilterBlueprint } from '@backstage/plugin-catalog-react/alpha';
- import { CatalogFilterBlueprint } from '@backstage/plugin-catalog/alpha';
09afd67: Adds EntityContextMenuItemBlueprint to enable extending the entity page's context menu with user defined items.
For example:
import { EntityContextMenuItemBlueprint } from '@backstage/plugin-catalog-react/alpha';
const myCustomHref = EntityContextMenuItemBlueprint.make({
name: 'test-href',
params: {
icon: <span>Example Icon</span>,
useProps: () => ({
title: 'Example Href',
href: '/example-path',
disabled: false,
component: 'a',
}),
},
});
const myCustomOnClick = EntityContextMenuItemBlueprint.make({
name: 'test-click',
params: {
icon: <span>Test Icon</span>,
useProps: () => ({
title: 'Example onClick',
onClick: () => window.alert('Hello world!'),
disabled: false,
}),
},
});
- 7f57365: Add support for a new entity predicate syntax when defining
filters related to the blueprints exported via /alpha for the new frontend system. For more information, see the entity filters documentation.
ba9649a: Add a new defaultGroup parameter to the EntityContentBlueprint, here are usage examples:
Set a default group while creating the extension:
const entityKubernetesContent = EntityContentBlueprint.make({
name: 'kubernetes',
params: {
defaultPath: '/kubernetes',
defaultTitle: 'Kubernetes',
+ defaultGroup: 'deployment',
filter: 'kind:component,resource',
loader: () =>
import('./KubernetesContentPage').then(m =>
compatWrapper(<m.KubernetesContentPage />),
),
},
});
Disassociate an entity content from a default group:
# app-config.yaml
app:
extensions:
# Entity page content
- - entity-content:kubernetes/kubernetes
+ - entity-content:kubernetes/kubernetes:
+ config:
+ group: false
Associate an entity content with a different default or custom group than the one defined in code when the extension was created:
app:
extensions:
- - entity-content:kubernetes/kubernetes
+ - entity-content:kubernetes/kubernetes:
+ config:
+ group: custom
247a40b: Introduces a new EntityHeaderBlueprint that allows you to override the default entity page header.
import { EntityHeaderBlueprint } from '@backstage/plugin-catalog-react/alpha';
EntityHeaderBlueprint.make({
name: 'my-default-header',
params: {
loader: () =>
import('./MyDefaultHeader').then(m => <m.MyDefaultHeader />),
},
});
a3d93ca: Introduces a new EntityContentLayoutBlueprint that creates custom entity content layouts.
The layout components receive card elements and can render them as they see fit. Cards is an array of objects with the following properties:
- element:
JSx.Element;
- type:
"peek" | "info" | "full" | undefined;
Usage example
Creating a custom overview tab layout:
import {
EntityContentLayoutProps,
EntityContentLayoutBlueprint,
} from '@backstage/plugin-catalog-react/alpha';
function StickyEntityContentOverviewLayout(props: EntityContentLayoutProps) {
const { cards } = props;
const classes = useStyles();
return (
<Grid container spacing={3}>
<Grid
className={classes.infoArea}
xs={12}
md={4}
item
>
<Grid container spacing={3}>
{cards
.filter(card => card.type === 'info')
.map((card, index) => (
<Grid key={index} xs={12} item>
{card.element}
</Grid>
))}
</Grid>
</Grid>
<Grid xs={12} md={8} item>
<Grid container spacing={3}>
{cards
.filter(card => card.type === 'peek')
.map((card, index) => (
<Grid key={index} className={classes.card} xs={12} md={6} item>
{card.element}
</Grid>
))}
{cards
.filter(card => !card.type || card.type === 'full')
.map((card, index) => (
<Grid key={index} className={classes.card} xs={12} md={6} item>
{card.element}
</Grid>
))}
</Grid>
</Grid>
</Grid>
);
}
export const customEntityContentOverviewStickyLayoutModule = createFrontendModule({
pluginId: 'app',
extensions: [
EntityContentLayoutBlueprint.make({
name: 'sticky',
params: {
defaultFilter: 'kind:template'
loader: async () => StickyEntityContentOverviewLayout,
},
}),
],
Disabling the custom layout:
app:
extensions:
- entity-content-layout:app/sticky: false
Overriding the custom layout filter:
app:
extensions:
- entity-content-layout:app/sticky:
config:
filter: 'kind:component'
d78bb71: Added hidden prop to EntityTagPicker, EntityAutocompletePicker and UserListPicker.
Added initialFilter prop to EntityTagPicker to set an initial filter for the picker.
Added alwaysKeepFilters prop to UserListPicker to prevent filters from resetting when no entities match the initial filters.
a3d93ca: Add an optional type parameter to EntityCard extensions. A card's type determines characteristics such as its expected size and where it will be rendered by the entity content layout.
Initially the following three types are supported:
peek: small vertical cards that provide information at a glance, for example recent builds, deployments, and service health.info: medium size cards with high priority and frequently used information such as common actions, entity metadata, and links.full: Large cards that are more feature rich with more information, typically used by plugins that don't quite need the full content view and want to show a card instead.
Usage examples
Defining a default type when creating a card:
const myCard = EntityCardBlueprint.make({
name: 'myCard',
params: {
+ type: 'info',
loader: import('./MyCard).then(m => { default: m.MyCard }),
},
});
Changing the card type via app-config.yaml file:
app:
extensions:
+ - entity-card:myPlugin/myCard:
+ config:
+ type: info
ba9649a: Add a new defaultGroup parameter to the EntityContentBlueprint, here are usage examples:
Set a default group while creating the extension:
const entityKubernetesContent = EntityContentBlueprint.make({
name: 'kubernetes',
params: {
defaultPath: '/kubernetes',
defaultTitle: 'Kubernetes',
+ defaultGroup: 'deployment',
filter: 'kind:component,resource',
loader: () =>
import('./KubernetesContentPage').then(m =>
compatWrapper(<m.KubernetesContentPage />),
),
},
});
Disassociate an entity content from a default group:
# app-config.yaml
app:
extensions:
# Entity page content
- - entity-content:kubernetes/kubernetes
+ - entity-content:kubernetes/kubernetes:
+ config:
+ group: false
Associate an entity content with a different default or custom group than the one defined in code when the extension was created:
app:
extensions:
- - entity-content:kubernetes/kubernetes
+ - entity-content:kubernetes/kubernetes:
+ config:
+ group: custom
a3d93ca: Introduces a new EntityContentLayoutBlueprint that creates custom entity content layouts.
The layout components receive card elements and can render them as they see fit. Cards is an array of objects with the following properties:
- element:
JSx.Element;
- type:
"summary" | "info" | "content" | undefined;
Usage example
Creating a custom overview tab layout:
import {
EntityContentLayoutProps,
EntityContentLayoutBlueprint,
} from '@backstage/plugin-catalog-react/alpha';
function StickyEntityContentOverviewLayout(props: EntityContentLayoutProps) {
const { cards } = props;
const classes = useStyles();
return (
<Grid container spacing={3}>
<Grid
className={classes.infoArea}
xs={12}
md={4}
item
>
<Grid container spacing={3}>
{cards
.filter(card => card.type === 'info')
.map((card, index) => (
<Grid key={index} xs={12} item>
{card.element}
</Grid>
))}
</Grid>
</Grid>
<Grid xs={12} md={8} item>
<Grid container spacing={3}>
{cards
.filter(card => card.type === 'summary')
.map((card, index) => (
<Grid key={index} className={classes.card} xs={12} md={6} item>
{card.element}
</Grid>
))}
{cards
.filter(card => !card.type || card.type === 'content')
.map((card, index) => (
<Grid key={index} className={classes.card} xs={12} md={6} item>
{card.element}
</Grid>
))}
</Grid>
</Grid>
</Grid>
);
}
export const customEntityContentOverviewStickyLayoutModule = createFrontendModule({
pluginId: 'app',
extensions: [
EntityContentLayoutBlueprint.make({
name: 'sticky',
params: {
defaultFilter: 'kind:template'
loader: async () => StickyEntityContentOverviewLayout,
},
}),
],
Disabling the custom layout:
app:
extensions:
- entity-content-layout:app/sticky: false
Overriding the custom layout filter:
app:
extensions:
- entity-content-layout:app/sticky:
config:
filter: 'kind:component'
d78bb71: Added hidden prop to EntityTagPicker, EntityAutocompletePicker and UserListPicker.
Added initialFilter prop to EntityTagPicker to set an initial filter for the picker.
Added alwaysKeepFilters prop to UserListPicker to prevent filters from resetting when no entities match the initial filters.
a3d93ca: Add an optional type parameter to EntityCard extensions. A card's type determines characteristics such as its expected size and where it will be rendered by the entity content layout.
Initially the following three types are supported:
summary: small vertical cards that provide information at a glance, for example recent builds, deployments, and service health.info: medium size cards with high priority and frequently used information such as common actions, entity metadata, and links.content: Large cards that are more feature rich with more information, typically used by plugins that don't quite need the content content view and want to show a card instead.
Usage examples
Defining a default type when creating a card:
const myCard = EntityCardBlueprint.make({
name: 'myCard',
params: {
+ type: 'info',
loader: import('./MyCard).then(m => { default: m.MyCard }),
},
});
Changing the card type via app-config.yaml file:
app:
extensions:
+ - entity-card:myPlugin/myCard:
+ config:
+ type: info
1e5b7d993a: Added an EntityPresentationApi and associated entityPresentationApiRef. This
API lets you control how references to entities (e.g. in links, headings,
iconography etc) are represented in the user interface.
Usage of this API is initially added to the EntityRefLink and EntityRefLinks
components, so that they can render richer, more correct representation of
entity refs. There's also a new EntityDisplayName component, which works just like
the EntityRefLink but without the link.
Along with that change, the fetchEntities and getTitle props of
EntityRefLinksProps are deprecated and no longer used, since the same need
instead is fulfilled (and by default always enabled) by the
entityPresentationApiRef.
1fd53fa0c6: The UserListPicker component has undergone improvements to enhance its performance.
The previous implementation inferred the number of owned and starred entities based on the entities available in the EntityListContext. The updated version no longer relies on the EntityListContext for inference, allowing for better decoupling.
The component now loads the entities' count asynchronously, resulting in improved performance and responsiveness. For this purpose, some of the exported filters such as EntityTagFilter, EntityOwnerFilter, EntityLifecycleFilter and EntityNamespaceFilter have now the getCatalogFilters method implemented.
1e5b7d993a: Added an EntityPresentationApi and associated entityPresentationApiRef. This
API lets you control how references to entities (e.g. in links, headings,
iconography etc) are represented in the user interface.
Usage of this API is initially added to the EntityRefLink and EntityRefLinks
components, so that they can render richer, more correct representation of
entity refs. There's also a new EntityDisplayName component, which works just like
the EntityRefLink but without the link.
Along with that change, the fetchEntities and getTitle props of
EntityRefLinksProps are deprecated and no longer used, since the same need
instead is fulfilled (and by default always enabled) by the
entityPresentationApiRef.
1fd53fa0c6: The UserListPicker component has undergone improvements to enhance its performance.
The previous implementation inferred the number of owned and starred entities based on the entities available in the EntityListContext. The updated version no longer relies on the EntityListContext for inference, allowing for better decoupling.
The component now loads the entities' count asynchronously, resulting in improved performance and responsiveness. For this purpose, some of the exported filters such as EntityTagFilter, EntityOwnerFilter, EntityLifecycleFilter and EntityNamespaceFilter have now the getCatalogFilters method implemented.
backstage
