406acb6: Introduces a new EntityIconLinkBlueprint that customizes the About card icon links on the Catalog entity page.
The blueprint currently accepts a useProps hook as param and this function returns the following props that will be passed to the icon link component:
| Name | Description | Type | Default Value |
| ---------- | --------------------------------------------------- | ------------- | ------------- |
| icon | The icon to display. | JSX.Element | N/A |
| label | The label for the element. | string | N/A |
| title | The title for the element. | string | N/A |
| disabled | Whether the element is disabled. | boolean | false |
| href | The URL to navigate to when the element is clicked. | string | N/A |
| onClick | A function to call when the element is clicked. | () => void | N/A |
Here is an usage example:
import { EntityIconLinkBlueprint } from '@backstage/plugin-catalog-react/alpha';
//...
EntityIconLinkBlueprint.make({
name: 'my-icon-link',
params: {
useProps() {
const { t } = useTranslationRef(myIconLinkTranslationRef);
return {
label: t('myIconLink.label'),
icon: <MyIconLinkIcon />,
href: '/my-plugin',
};
},
},
});
Additionally, the app-config.yaml file allows you to override some of the default icon link parameters, including label and title values. Here's how to set them:
app:
extensions:
- entity-icon-link:my-plugin/my-icon-link:
config:
label: 'My Custom Icon Link label'
Finally, you can disable all links if you want to hide the About card header completely (useful, for example, when links are displayed on separate cards). The header is hidden when no icon links extensions are enabled.
406acb6: Introduces a new EntityIconLinkBlueprint that customizes the About card icon links on the Catalog entity page.
The blueprint currently accepts a useProps hook as param and this function returns the following props that will be passed to the icon link component:
| Name | Description | Type | Default Value |
| ---------- | --------------------------------------------------- | ------------- | ------------- |
| icon | The icon to display. | JSX.Element | N/A |
| label | The label for the element. | string | N/A |
| title | The title for the element. | string | N/A |
| disabled | Whether the element is disabled. | boolean | false |
| href | The URL to navigate to when the element is clicked. | string | N/A |
| onClick | A function to call when the element is clicked. | () => void | N/A |
Here is an usage example:
import { EntityIconLinkBlueprint } from '@backstage/plugin-catalog-react/alpha';
//...
EntityIconLinkBlueprint.make({
name: 'my-icon-link',
params: {
useProps() {
const { t } = useTranslationRef(myIconLinkTranslationRef);
return {
label: t('myIconLink.label'),
icon: <MyIconLinkIcon />,
href: '/my-plugin',
};
},
},
});
Additionally, the app-config.yaml file allows you to override some of the default icon link parameters, including label and title values. Here's how to set them:
app:
extensions:
- entity-icon-link:my-plugin/my-icon-link:
config:
label: 'My Custom Icon Link label'
Finally, you can disable all links if you want to hide the About card header completely (useful, for example, when links are displayed on separate cards). The header is hidden when no icon links extensions are enabled.
- 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-config.yaml
app:
extensions:
# Entity page content
- - entity-content:kubernetes/kubernetes
+ - entity-content:kubernetes/kubernetes:
+ config:
+ group: custom # associating this extension with a custom group id, the group should have previously been created via entity page configuration
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: {
// (optional) defaults the `() => false` filter function
defaultFilter: 'kind:template'
loader: async () => StickyEntityContentOverviewLayout,
},
}),
],
Disabling the custom layout:
# app-config.yaml
app:
extensions:
- entity-content-layout:app/sticky: false
Overriding the custom layout filter:
# app-config.yaml
app:
extensions:
- entity-content-layout:app/sticky:
config:
# This layout will be used only with component entities
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-config.yaml
app:
extensions:
# Entity page content
- - entity-content:kubernetes/kubernetes
+ - entity-content:kubernetes/kubernetes:
+ config:
+ group: custom # associating this extension with a custom group id, the group should have previously been created via entity page configuration
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: {
// (optional) defaults the `() => false` filter function
defaultFilter: 'kind:template'
loader: async () => StickyEntityContentOverviewLayout,
},
}),
],
Disabling the custom layout:
# app-config.yaml
app:
extensions:
- entity-content-layout:app/sticky: false
Overriding the custom layout filter:
# app-config.yaml
app:
extensions:
- entity-content-layout:app/sticky:
config:
# This layout will be used only with component entities
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
