diff --git a/.changeset/poor-eggs-destroy.md b/.changeset/poor-eggs-destroy.md new file mode 100644 index 0000000000..a15aa66294 --- /dev/null +++ b/.changeset/poor-eggs-destroy.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Export the `RelatedEntitiesCard` component which is helpful in case you want to model custom relations between entities diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index c046e031de..23771d3ec9 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -444,6 +444,20 @@ export type PluginCatalogComponentsNameToClassKey = { PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; }; +// Warning: (ae-missing-release-tag) "RelatedEntitiesCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const RelatedEntitiesCard: (props: { + variant?: 'gridItem' | undefined; + title: string; + columns: TableColumn[]; + entityKind?: string | undefined; + relationType: string; + emptyMessage: string; + emptyHelpLink: string; + asRenderableEntities: (entities: Entity[]) => T[]; +}) => JSX.Element; + // Warning: (ae-missing-release-tag) "Router" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public @deprecated (undocumented) diff --git a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx index 13dc4c9d55..ec6ea696e2 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx @@ -34,23 +34,37 @@ type Props = { variant?: 'gridItem'; title: string; columns: TableColumn[]; - entityKind: string; + entityKind?: string; relationType: string; emptyMessage: string; emptyHelpLink: string; asRenderableEntities: (entities: Entity[]) => T[]; }; -export function RelatedEntitiesCard({ - variant = 'gridItem', - title, - columns, - entityKind, - relationType, - emptyMessage, - emptyHelpLink, - asRenderableEntities, -}: Props) { +/** + * A low level card component that can be used as a building block for more + * specific cards. + * + * @remarks + * + * You probably want to make a dedicated component for your needs, which renders + * this card as its implementation with some of the props set to the appropriate + * values. + * + * @public + */ +export const RelatedEntitiesCard = (props: Props) => { + const { + variant = 'gridItem', + title, + columns, + entityKind, + relationType, + emptyMessage, + emptyHelpLink, + asRenderableEntities, + } = props; + const { entity } = useEntity(); const { entities, loading, error } = useRelatedEntities(entity, { type: relationType, @@ -89,4 +103,4 @@ export function RelatedEntitiesCard({ entities={asRenderableEntities(entities || [])} /> ); -} +}; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 56cae80b6a..57dd911b2d 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -50,6 +50,7 @@ export { EntityHasSystemsCard, EntityLinksCard, EntitySystemDiagramCard, + RelatedEntitiesCard, } from './plugin'; export type { EntityLinksEmptyStateClassKey } from './components/EntityLinksCard'; diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 66fdf4638f..03806a2aa2 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -186,3 +186,15 @@ export const EntitySystemDiagramCard = catalogPlugin.provide( }, }), ); + +export const RelatedEntitiesCard = catalogPlugin.provide( + createComponentExtension({ + name: 'RelatedEntitiesCard', + component: { + lazy: () => + import('./components/RelatedEntitiesCard').then( + m => m.RelatedEntitiesCard, + ), + }, + }), +);