From 61ded2a8639d005f545de08477a5206427fafa22 Mon Sep 17 00:00:00 2001 From: Djamaile Rahamat Date: Mon, 17 Jan 2022 16:47:21 +0100 Subject: [PATCH 1/3] chore(catalog): export RelatedEntitiesCard component Signed-off-by: djamaile --- .changeset/poor-eggs-destroy.md | 5 +++++ .../RelatedEntitiesCard/RelatedEntitiesCard.tsx | 2 +- plugins/catalog/src/plugin.ts | 12 ++++++++++++ 3 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 .changeset/poor-eggs-destroy.md 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/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx index 13dc4c9d55..873a22adfc 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx @@ -34,7 +34,7 @@ type Props = { variant?: 'gridItem'; title: string; columns: TableColumn[]; - entityKind: string; + entityKind?: string; relationType: string; emptyMessage: string; emptyHelpLink: string; diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 66fdf4638f..9559a707c3 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -186,3 +186,15 @@ export const EntitySystemDiagramCard = catalogPlugin.provide( }, }), ); + +export const EntityGenericRelationshipCard = catalogPlugin.provide( + createComponentExtension({ + name: 'EntityGenericRelationshipCard', + component: { + lazy: () => + import('./components/RelatedEntitiesCard').then( + m => m.RelatedEntitiesCard, + ), + }, + }), +); From 440c534dd8c61db83edde221aec7c2adb4c31c95 Mon Sep 17 00:00:00 2001 From: djamaile Date: Wed, 19 Jan 2022 12:34:15 +0100 Subject: [PATCH 2/3] chore: change exported component name Signed-off-by: djamaile --- plugins/catalog/api-report.md | 10 ++++++++-- plugins/catalog/src/index.ts | 1 + plugins/catalog/src/plugin.ts | 4 ++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index c046e031de..fbba6ab686 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -44,7 +44,7 @@ export function AboutCard({ variant }: AboutCardProps): JSX.Element; // Warning: (ae-missing-release-tag) "AboutContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const AboutContent: ({ entity }: Props) => JSX.Element; +export const AboutContent: ({ entity }: Props_2) => JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "AboutField" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -55,7 +55,7 @@ export const AboutField: ({ value, gridSizes, children, -}: Props_2) => JSX.Element; +}: Props_3) => JSX.Element; // @public (undocumented) export type BackstageOverrides = Overrides & { @@ -444,6 +444,12 @@ export type PluginCatalogComponentsNameToClassKey = { PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; }; +// Warning: (ae-forgotten-export) The symbol "RelatedEntitiesCard" needs to be exported by the entry point index.d.ts +// 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: RelatedEntitiesCard_2; + // 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/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 9559a707c3..03806a2aa2 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -187,9 +187,9 @@ export const EntitySystemDiagramCard = catalogPlugin.provide( }), ); -export const EntityGenericRelationshipCard = catalogPlugin.provide( +export const RelatedEntitiesCard = catalogPlugin.provide( createComponentExtension({ - name: 'EntityGenericRelationshipCard', + name: 'RelatedEntitiesCard', component: { lazy: () => import('./components/RelatedEntitiesCard').then( From 3a5eba94647445b36e7b13df249fa717494def5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Wed, 19 Jan 2022 13:59:09 +0100 Subject: [PATCH 3/3] fixup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- plugins/catalog/api-report.md | 16 ++++++--- .../RelatedEntitiesCard.tsx | 36 +++++++++++++------ 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index fbba6ab686..23771d3ec9 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -44,7 +44,7 @@ export function AboutCard({ variant }: AboutCardProps): JSX.Element; // Warning: (ae-missing-release-tag) "AboutContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const AboutContent: ({ entity }: Props_2) => JSX.Element; +export const AboutContent: ({ entity }: Props) => JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "AboutField" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -55,7 +55,7 @@ export const AboutField: ({ value, gridSizes, children, -}: Props_3) => JSX.Element; +}: Props_2) => JSX.Element; // @public (undocumented) export type BackstageOverrides = Overrides & { @@ -444,11 +444,19 @@ export type PluginCatalogComponentsNameToClassKey = { PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; }; -// Warning: (ae-forgotten-export) The symbol "RelatedEntitiesCard" needs to be exported by the entry point index.d.ts // 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: RelatedEntitiesCard_2; +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) // diff --git a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx index 873a22adfc..ec6ea696e2 100644 --- a/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx +++ b/plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx @@ -41,16 +41,30 @@ type Props = { 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 || [])} /> ); -} +};