Merge pull request #16469 from blakestoddard/card-prop-extension

Extend RelatedEntitiesCard usages to allow custom columns

plugins/api-docs/api-report.md

@@ -85,6 +85,7 @@ export type AsyncApiDefinitionWidgetProps = {
 // @public (undocumented)
 export const ConsumedApisCard: (props: {
   variant?: InfoCardVariants;
+  columns?: TableColumn<ApiEntity>[];
 }) => JSX.Element;
 
 // @public (undocumented)
@@ -113,6 +114,7 @@ export const EntityApiDefinitionCard: () => JSX.Element;
 // @public (undocumented)
 export const EntityConsumedApisCard: (props: {
   variant?: InfoCardVariants | undefined;
+  columns?: TableColumn<ApiEntity>[] | undefined;
 }) => JSX.Element;
 
 // @public (undocumented)
@@ -123,11 +125,13 @@ export const EntityConsumingComponentsCard: (props: {
 // @public (undocumented)
 export const EntityHasApisCard: (props: {
   variant?: InfoCardVariants | undefined;
+  columns?: TableColumn<ApiEntity>[] | undefined;
 }) => JSX.Element;
 
 // @public (undocumented)
 export const EntityProvidedApisCard: (props: {
   variant?: InfoCardVariants | undefined;
+  columns?: TableColumn<ApiEntity>[] | undefined;
 }) => JSX.Element;
 
 // @public (undocumented)
@@ -148,6 +152,7 @@ export type GraphQlDefinitionWidgetProps = {
 // @public (undocumented)
 export const HasApisCard: (props: {
   variant?: InfoCardVariants;
+  columns?: TableColumn<ApiEntity>[];
 }) => JSX.Element;
 
 // @public (undocumented)
@@ -174,6 +179,7 @@ export type PlainApiDefinitionWidgetProps = {
 // @public (undocumented)
 export const ProvidedApisCard: (props: {
   variant?: InfoCardVariants;
+  columns?: TableColumn<ApiEntity>[];
 }) => JSX.Element;
 
 // @public (undocumented)

plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx

@@ -29,14 +29,18 @@ import {
   InfoCardVariants,
   Link,
   Progress,
+  TableColumn,
   WarningPanel,
 } from '@backstage/core-components';
 
 /**
  * @public
  */
-export const ConsumedApisCard = (props: { variant?: InfoCardVariants }) => {
-  const { variant = 'gridItem' } = props;
+export const ConsumedApisCard = (props: {
+  variant?: InfoCardVariants;
+  columns?: TableColumn<ApiEntity>[];
+}) => {
+  const { variant = 'gridItem', columns = apiEntityColumns } = props;
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_CONSUMES_API,
@@ -79,7 +83,7 @@ export const ConsumedApisCard = (props: { variant?: InfoCardVariants }) => {
           </Typography>
         </div>
       }
-      columns={apiEntityColumns}
+      columns={columns}
       entities={entities as ApiEntity[]}
     />
   );

plugins/api-docs/src/components/ApisCards/HasApisCard.tsx

@@ -33,7 +33,7 @@ import {
   WarningPanel,
 } from '@backstage/core-components';
 
-const columns: TableColumn<ApiEntity>[] = [
+const presetColumns: TableColumn<ApiEntity>[] = [
   EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),
   EntityTable.columns.createOwnerColumn(),
   createSpecApiTypeColumn(),
@@ -44,8 +44,11 @@ const columns: TableColumn<ApiEntity>[] = [
 /**
  * @public
  */
-export const HasApisCard = (props: { variant?: InfoCardVariants }) => {
-  const { variant = 'gridItem' } = props;
+export const HasApisCard = (props: {
+  variant?: InfoCardVariants;
+  columns?: TableColumn<ApiEntity>[];
+}) => {
+  const { variant = 'gridItem', columns = presetColumns } = props;
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_HAS_PART,

plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx

@@ -29,14 +29,18 @@ import {
   InfoCardVariants,
   Link,
   Progress,
+  TableColumn,
   WarningPanel,
 } from '@backstage/core-components';
 
 /**
  * @public
  */
-export const ProvidedApisCard = (props: { variant?: InfoCardVariants }) => {
-  const { variant = 'gridItem' } = props;
+export const ProvidedApisCard = (props: {
+  variant?: InfoCardVariants;
+  columns?: TableColumn<ApiEntity>[];
+}) => {
+  const { variant = 'gridItem', columns = apiEntityColumns } = props;
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_PROVIDES_API,
@@ -79,7 +83,7 @@ export const ProvidedApisCard = (props: { variant?: InfoCardVariants }) => {
           </Typography>
         </div>
       }
-      columns={apiEntityColumns}
+      columns={columns}
       entities={entities as ApiEntity[]}
     />
   );