Extend certain entity tables to accept a columns prop

Prevents a user fromhaving to spin out a custom component that is essentially an exact duplicate of the Backstage-provided components just to remove or add columns. Our (Epic) implementation doesn't care about system or description for these cards, but it's annoying to maintain a seperate component for the sole purpose of different columns.

Signed-off-by: Blake Stoddard <blake.stoddard@epicgames.com>

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/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,
@@ -28,17 +28,22 @@ import {
 export interface DependsOnResourcesCardProps {
   variant?: InfoCardVariants;
   title?: string;
+  columns?: TableColumn<ResourceEntity>[];
 }
 
 export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
-  const { variant = 'gridItem', title = 'Depends on resources' } = props;
+  const {
+    variant = 'gridItem',
+    title = 'Depends on resources',
+    columns = resourceEntityColumns,
+  } = props;
   return (
     <RelatedEntitiesCard
       variant={variant}
       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}