Merge pull request #8967 from djamaile/master

chore(catalog): export RelatedEntitiesCard component

.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

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: <T extends Entity>(props: {
+  variant?: 'gridItem' | undefined;
+  title: string;
+  columns: TableColumn<T>[];
+  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)

plugins/catalog/src/components/RelatedEntitiesCard/RelatedEntitiesCard.tsx

@@ -34,23 +34,37 @@ type Props<T extends Entity> = {
   variant?: 'gridItem';
   title: string;
   columns: TableColumn<T>[];
-  entityKind: string;
+  entityKind?: string;
   relationType: string;
   emptyMessage: string;
   emptyHelpLink: string;
   asRenderableEntities: (entities: Entity[]) => T[];
 };
 
-export function RelatedEntitiesCard<T extends Entity>({
-  variant = 'gridItem',
-  title,
-  columns,
-  entityKind,
-  relationType,
-  emptyMessage,
-  emptyHelpLink,
-  asRenderableEntities,
-}: Props<T>) {
+/**
+ * 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 = <T extends Entity>(props: Props<T>) => {
+  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<T extends Entity>({
       entities={asRenderableEntities(entities || [])}
     />
   );
-}
+};

plugins/catalog/src/index.ts

@@ -50,6 +50,7 @@ export {
   EntityHasSystemsCard,
   EntityLinksCard,
   EntitySystemDiagramCard,
+  RelatedEntitiesCard,
 } from './plugin';
 
 export type { EntityLinksEmptyStateClassKey } from './components/EntityLinksCard';

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,
+        ),
+    },
+  }),
+);