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

Extend RelatedEntitiesCard usages to allow custom columns

.changeset/warm-vans-fail.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Add a `columns` prop to certain components that use the `EntityTable` for easier extensibility.

.changeset/wild-ads-pull.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Add a `columns` prop to certain components that use the `EntityTable` for easier extensibility.

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[]}
     />
   );

plugins/catalog/api-report.md

@@ -7,6 +7,7 @@
 
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { ComponentEntity } from '@backstage/catalog-model';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { Entity } from '@backstage/catalog-model';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
@@ -17,6 +18,7 @@ import { Observable } from '@backstage/types';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { ResourceEntity } from '@backstage/catalog-model';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';
@@ -227,6 +229,8 @@ export interface DependencyOfComponentsCardProps {
 
 // @public (undocumented)
 export interface DependsOnComponentsCardProps {
+  // (undocumented)
+  columns?: TableColumn<ComponentEntity>[];
   // (undocumented)
   title?: string;
   // (undocumented)
@@ -235,6 +239,10 @@ export interface DependsOnComponentsCardProps {
 
 // @public (undocumented)
 export interface DependsOnResourcesCardProps {
+  // (undocumented)
+  columns?: TableColumn<ResourceEntity>[];
+  // (undocumented)
+  title?: string;
   // (undocumented)
   variant?: InfoCardVariants;
 }

plugins/catalog/src/components/DependsOnComponentsCard/DependsOnComponentsCard.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
-import { InfoCardVariants } from '@backstage/core-components';
+import { RELATION_DEPENDS_ON, ComponentEntity } from '@backstage/catalog-model';
+import { InfoCardVariants, TableColumn } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -28,17 +28,22 @@ import {
 export interface DependsOnComponentsCardProps {
   variant?: InfoCardVariants;
   title?: string;
+  columns?: TableColumn<ComponentEntity>[];
 }
 
 export function DependsOnComponentsCard(props: DependsOnComponentsCardProps) {
-  const { variant = 'gridItem', title = 'Depends on components' } = props;
+  const {
+    variant = 'gridItem',
+    title = 'Depends on components',
+    columns = componentEntityColumns,
+  } = props;
   return (
     <RelatedEntitiesCard
       variant={variant}
       title={title}
       entityKind="Component"
       relationType={RELATION_DEPENDS_ON}
-      columns={componentEntityColumns}
+      columns={columns}
       emptyMessage="No component is a dependency of this component"
       emptyHelpLink={componentEntityHelpLink}
       asRenderableEntities={asComponentEntities}

plugins/catalog/src/components/DependsOnResourcesCard/DependsOnResourcesCard.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
-import { InfoCardVariants } from '@backstage/core-components';
+import { RELATION_DEPENDS_ON, ResourceEntity } from '@backstage/catalog-model';
+import { InfoCardVariants, TableColumn } from '@backstage/core-components';
 import React from 'react';
 import {
   asResourceEntities,
@@ -27,17 +27,23 @@ import {
 /** @public */
 export interface DependsOnResourcesCardProps {
   variant?: InfoCardVariants;
+  title?: string;
+  columns?: TableColumn<ResourceEntity>[];
 }
 
 export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
-  const { variant = 'gridItem' } = props;
+  const {
+    variant = 'gridItem',
+    title = 'Depends on resources',
+    columns = resourceEntityColumns,
+  } = props;
   return (
     <RelatedEntitiesCard
       variant={variant}
-      title="Depends on resources"
+      title={title}
       entityKind="Resource"
       relationType={RELATION_DEPENDS_ON}
-      columns={resourceEntityColumns}
+      columns={columns}
       emptyMessage="No resource is a dependency of this component"
       emptyHelpLink={componentEntityHelpLink}
       asRenderableEntities={asResourceEntities}