Merge pull request #18504 from Abhay-soni-developer/feature/entity-dependencies-card-enhancements

Feature/entity dependencies card enhancements

.changeset/popular-icons-doubt.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog-react': minor
+'@backstage/plugin-catalog': minor
+---
+
+Tables which use `EntityTableProps` now have an additional `tableOptions` prop which can be used to provide additional table options to these components.

plugins/catalog-react/api-report.md

@@ -25,6 +25,7 @@ import { ScmIntegrationRegistry } from '@backstage/integration';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
 import { SystemEntity } from '@backstage/catalog-model';
 import { TableColumn } from '@backstage/core-components';
+import { TableOptions } from '@backstage/core-components';
 
 // @public
 export const AsyncEntityProvider: (
@@ -395,6 +396,8 @@ export interface EntityTableProps<T extends Entity> {
   // (undocumented)
   entities: T[];
   // (undocumented)
+  tableOptions?: TableOptions;
+  // (undocumented)
   title: string;
   // (undocumented)
   variant?: InfoCardVariants;

plugins/catalog-react/src/components/EntityTable/EntityTable.tsx

@@ -23,6 +23,7 @@ import {
   InfoCardVariants,
   Table,
   TableColumn,
+  TableOptions,
 } from '@backstage/core-components';
 
 /**
@@ -36,6 +37,7 @@ export interface EntityTableProps<T extends Entity> {
   entities: T[];
   emptyContent?: ReactNode;
   columns: TableColumn<T>[];
+  tableOptions?: TableOptions;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -59,6 +61,7 @@ export const EntityTable = <T extends Entity>(props: EntityTableProps<T>) => {
     emptyContent,
     variant = 'gridItem',
     columns,
+    tableOptions = {},
   } = props;
 
   const classes = useStyles();
@@ -86,6 +89,7 @@ export const EntityTable = <T extends Entity>(props: EntityTableProps<T>) => {
         actionsColumnIndex: -1,
         padding: 'dense',
         draggable: false,
+        ...tableOptions,
       }}
       data={entities}
     />

plugins/catalog/api-report.md

@@ -27,6 +27,7 @@ import { StarredEntitiesApi } from '@backstage/plugin-catalog-react';
 import { StorageApi } from '@backstage/core-plugin-api';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
 import { TableColumn } from '@backstage/core-components';
+import { TableOptions } from '@backstage/core-components';
 import { TableProps } from '@backstage/core-components';
 import { TabProps } from '@material-ui/core';
 import { UserListFilterKind } from '@backstage/plugin-catalog-react';
@@ -243,6 +244,8 @@ export interface DependsOnComponentsCardProps {
   // (undocumented)
   columns?: TableColumn<ComponentEntity>[];
   // (undocumented)
+  tableOptions?: TableOptions;
+  // (undocumented)
   title?: string;
   // (undocumented)
   variant?: InfoCardVariants;
@@ -253,6 +256,8 @@ export interface DependsOnResourcesCardProps {
   // (undocumented)
   columns?: TableColumn<ResourceEntity>[];
   // (undocumented)
+  tableOptions?: TableOptions;
+  // (undocumented)
   title?: string;
   // (undocumented)
   variant?: InfoCardVariants;
@@ -448,6 +453,8 @@ export interface HasResourcesCardProps {
 
 // @public (undocumented)
 export interface HasSubcomponentsCardProps {
+  // (undocumented)
+  tableOptions?: TableOptions;
   // (undocumented)
   variant?: InfoCardVariants;
 }
@@ -506,6 +513,7 @@ export type RelatedEntitiesCardProps<T extends Entity> = {
   emptyMessage: string;
   emptyHelpLink: string;
   asRenderableEntities: (entities: Entity[]) => T[];
+  tableOptions?: TableOptions;
 };
 
 // @public (undocumented)

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

@@ -15,7 +15,11 @@
  */
 
 import { RELATION_DEPENDS_ON, ComponentEntity } from '@backstage/catalog-model';
-import { InfoCardVariants, TableColumn } from '@backstage/core-components';
+import {
+  InfoCardVariants,
+  TableColumn,
+  TableOptions,
+} from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -29,6 +33,7 @@ export interface DependsOnComponentsCardProps {
   variant?: InfoCardVariants;
   title?: string;
   columns?: TableColumn<ComponentEntity>[];
+  tableOptions?: TableOptions;
 }
 
 export function DependsOnComponentsCard(props: DependsOnComponentsCardProps) {
@@ -36,6 +41,7 @@ export function DependsOnComponentsCard(props: DependsOnComponentsCardProps) {
     variant = 'gridItem',
     title = 'Depends on components',
     columns = componentEntityColumns,
+    tableOptions = {},
   } = props;
   return (
     <RelatedEntitiesCard
@@ -47,6 +53,7 @@ export function DependsOnComponentsCard(props: DependsOnComponentsCardProps) {
       emptyMessage="No component is a dependency of this component"
       emptyHelpLink={componentEntityHelpLink}
       asRenderableEntities={asComponentEntities}
+      tableOptions={tableOptions}
     />
   );
 }

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

@@ -15,7 +15,11 @@
  */
 
 import { RELATION_DEPENDS_ON, ResourceEntity } from '@backstage/catalog-model';
-import { InfoCardVariants, TableColumn } from '@backstage/core-components';
+import {
+  InfoCardVariants,
+  TableColumn,
+  TableOptions,
+} from '@backstage/core-components';
 import React from 'react';
 import {
   asResourceEntities,
@@ -29,6 +33,7 @@ export interface DependsOnResourcesCardProps {
   variant?: InfoCardVariants;
   title?: string;
   columns?: TableColumn<ResourceEntity>[];
+  tableOptions?: TableOptions;
 }
 
 export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
@@ -36,6 +41,7 @@ export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
     variant = 'gridItem',
     title = 'Depends on resources',
     columns = resourceEntityColumns,
+    tableOptions = {},
   } = props;
   return (
     <RelatedEntitiesCard
@@ -47,6 +53,7 @@ export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
       emptyMessage="No resource is a dependency of this component"
       emptyHelpLink={componentEntityHelpLink}
       asRenderableEntities={asResourceEntities}
+      tableOptions={tableOptions}
     />
   );
 }

plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
-import { InfoCardVariants } from '@backstage/core-components';
+import { InfoCardVariants, TableOptions } from '@backstage/core-components';
 import React from 'react';
 import {
   asComponentEntities,
@@ -26,10 +26,11 @@ import {
 /** @public */
 export interface HasSubcomponentsCardProps {
   variant?: InfoCardVariants;
+  tableOptions?: TableOptions;
 }
 
 export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {
-  const { variant = 'gridItem' } = props;
+  const { variant = 'gridItem', tableOptions = {} } = props;
   return (
     <RelatedEntitiesCard
       variant={variant}
@@ -40,6 +41,7 @@ export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {
       asRenderableEntities={asComponentEntities}
       emptyMessage="No subcomponent is part of this component"
       emptyHelpLink="https://backstage.io/docs/features/software-catalog/descriptor-format#specsubcomponentof-optional"
+      tableOptions={tableOptions}
     />
   );
 }

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

@@ -29,6 +29,7 @@ import {
   Progress,
   ResponseErrorPanel,
   TableColumn,
+  TableOptions,
 } from '@backstage/core-components';
 
 /** @public */
@@ -41,6 +42,7 @@ export type RelatedEntitiesCardProps<T extends Entity> = {
   emptyMessage: string;
   emptyHelpLink: string;
   asRenderableEntities: (entities: Entity[]) => T[];
+  tableOptions?: TableOptions;
 };
 
 /**
@@ -67,6 +69,7 @@ export function RelatedEntitiesCard<T extends Entity>(
     emptyMessage,
     emptyHelpLink,
     asRenderableEntities,
+    tableOptions = {},
   } = props;
 
   const { entity } = useEntity();
@@ -105,6 +108,7 @@ export function RelatedEntitiesCard<T extends Entity>(
       }
       columns={columns}
       entities={asRenderableEntities(entities || [])}
+      tableOptions={tableOptions}
     />
   );
 }