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