feat: provide table options everywhere and add title to api tables

Signed-off-by: David Weber <david.weber@w3tec.ch>
Signed-off-by: David Weber <david.weber.schenker@gmail.com>

plugins/api-docs/api-report.md

@@ -16,6 +16,7 @@ import { JSX as JSX_2 } from 'react';
 import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { TableColumn } from '@backstage/core-components';
+import { TableOptions } from '@backstage/core-components';
 import { TableProps } from '@backstage/core-components';
 import { UserListFilterKind } from '@backstage/plugin-catalog-react';
 
@@ -88,7 +89,9 @@ export type AsyncApiDefinitionWidgetProps = {
 // @public (undocumented)
 export const ConsumedApisCard: (props: {
   variant?: InfoCardVariants;
+  title?: string;
   columns?: TableColumn<ApiEntity>[];
+  tableOptions?: TableOptions;
 }) => React_2.JSX.Element;
 
 // @public (undocumented)
@@ -118,7 +121,9 @@ export const EntityApiDefinitionCard: () => JSX_2.Element;
 // @public (undocumented)
 export const EntityConsumedApisCard: (props: {
   variant?: InfoCardVariants | undefined;
+  title?: string | undefined;
   columns?: TableColumn<ApiEntity>[] | undefined;
+  tableOptions?: TableOptions<{}> | undefined;
 }) => JSX_2.Element;
 
 // @public (undocumented)
@@ -129,13 +134,17 @@ export const EntityConsumingComponentsCard: (props: {
 // @public (undocumented)
 export const EntityHasApisCard: (props: {
   variant?: InfoCardVariants | undefined;
+  title?: string | undefined;
   columns?: TableColumn<ApiEntity>[] | undefined;
+  tableOptions?: TableOptions<{}> | undefined;
 }) => JSX_2.Element;
 
 // @public (undocumented)
 export const EntityProvidedApisCard: (props: {
   variant?: InfoCardVariants | undefined;
+  title?: string | undefined;
   columns?: TableColumn<ApiEntity>[] | undefined;
+  tableOptions?: TableOptions<{}> | undefined;
 }) => JSX_2.Element;
 
 // @public (undocumented)
@@ -156,7 +165,9 @@ export type GraphQlDefinitionWidgetProps = {
 // @public (undocumented)
 export const HasApisCard: (props: {
   variant?: InfoCardVariants;
+  title?: string;
   columns?: TableColumn<ApiEntity>[];
+  tableOptions?: TableOptions;
 }) => React_2.JSX.Element;
 
 // @public (undocumented)
@@ -185,7 +196,9 @@ export type PlainApiDefinitionWidgetProps = {
 // @public (undocumented)
 export const ProvidedApisCard: (props: {
   variant?: InfoCardVariants;
+  title?: string;
   columns?: TableColumn<ApiEntity>[];
+  tableOptions?: TableOptions;
 }) => React_2.JSX.Element;
 
 // @public (undocumented)

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

@@ -30,6 +30,7 @@ import {
   Link,
   Progress,
   TableColumn,
+  TableOptions,
   WarningPanel,
 } from '@backstage/core-components';
 
@@ -38,9 +39,16 @@ import {
  */
 export const ConsumedApisCard = (props: {
   variant?: InfoCardVariants;
+  title?: string;
   columns?: TableColumn<ApiEntity>[];
+  tableOptions?: TableOptions;
 }) => {
-  const { variant = 'gridItem', columns = apiEntityColumns } = props;
+  const {
+    variant = 'gridItem',
+    title = 'Consumed APIs',
+    columns = apiEntityColumns,
+    tableOptions = {},
+  } = props;
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_CONSUMES_API,
@@ -48,7 +56,7 @@ export const ConsumedApisCard = (props: {
 
   if (loading) {
     return (
-      <InfoCard variant={variant} title="Consumed APIs">
+      <InfoCard variant={variant} title={title}>
         <Progress />
       </InfoCard>
     );
@@ -56,7 +64,7 @@ export const ConsumedApisCard = (props: {
 
   if (error || !entities) {
     return (
-      <InfoCard variant={variant} title="Consumed APIs">
+      <InfoCard variant={variant} title={title}>
         <WarningPanel
           severity="error"
           title="Could not load APIs"
@@ -68,7 +76,7 @@ export const ConsumedApisCard = (props: {
 
   return (
     <EntityTable
-      title="Consumed APIs"
+      title={title}
       variant={variant}
       emptyContent={
         <div style={{ textAlign: 'center' }}>
@@ -84,6 +92,7 @@ export const ConsumedApisCard = (props: {
         </div>
       }
       columns={columns}
+      tableOptions={tableOptions}
       entities={entities as ApiEntity[]}
     />
   );

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

@@ -30,6 +30,7 @@ import {
   Link,
   Progress,
   TableColumn,
+  TableOptions,
   WarningPanel,
 } from '@backstage/core-components';
 
@@ -46,9 +47,16 @@ const presetColumns: TableColumn<ApiEntity>[] = [
  */
 export const HasApisCard = (props: {
   variant?: InfoCardVariants;
+  title?: string;
   columns?: TableColumn<ApiEntity>[];
+  tableOptions?: TableOptions;
 }) => {
-  const { variant = 'gridItem', columns = presetColumns } = props;
+  const {
+    variant = 'gridItem',
+    title = 'APIs',
+    columns = presetColumns,
+    tableOptions = {},
+  } = props;
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_HAS_PART,
@@ -57,7 +65,7 @@ export const HasApisCard = (props: {
 
   if (loading) {
     return (
-      <InfoCard variant={variant} title="APIs">
+      <InfoCard variant={variant} title={title}>
         <Progress />
       </InfoCard>
     );
@@ -65,7 +73,7 @@ export const HasApisCard = (props: {
 
   if (error || !entities) {
     return (
-      <InfoCard variant={variant} title="APIs">
+      <InfoCard variant={variant} title={title}>
         <WarningPanel
           severity="error"
           title="Could not load APIs"
@@ -77,7 +85,7 @@ export const HasApisCard = (props: {
 
   return (
     <EntityTable
-      title="APIs"
+      title={title}
       variant={variant}
       emptyContent={
         <div style={{ textAlign: 'center' }}>
@@ -93,6 +101,7 @@ export const HasApisCard = (props: {
         </div>
       }
       columns={columns}
+      tableOptions={tableOptions}
       entities={entities as ApiEntity[]}
     />
   );

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

@@ -30,6 +30,7 @@ import {
   Link,
   Progress,
   TableColumn,
+  TableOptions,
   WarningPanel,
 } from '@backstage/core-components';
 
@@ -38,9 +39,16 @@ import {
  */
 export const ProvidedApisCard = (props: {
   variant?: InfoCardVariants;
+  title?: string;
   columns?: TableColumn<ApiEntity>[];
+  tableOptions?: TableOptions;
 }) => {
-  const { variant = 'gridItem', columns = apiEntityColumns } = props;
+  const {
+    variant = 'gridItem',
+    title = 'Provided APIs',
+    columns = apiEntityColumns,
+    tableOptions = {},
+  } = props;
   const { entity } = useEntity();
   const { entities, loading, error } = useRelatedEntities(entity, {
     type: RELATION_PROVIDES_API,
@@ -48,7 +56,7 @@ export const ProvidedApisCard = (props: {
 
   if (loading) {
     return (
-      <InfoCard variant={variant} title="Provided APIs">
+      <InfoCard variant={variant} title={title}>
         <Progress />
       </InfoCard>
     );
@@ -56,7 +64,7 @@ export const ProvidedApisCard = (props: {
 
   if (error || !entities) {
     return (
-      <InfoCard variant={variant} title="Provided APIs">
+      <InfoCard variant={variant} title={title}>
         <WarningPanel
           severity="error"
           title="Could not load APIs"
@@ -68,7 +76,7 @@ export const ProvidedApisCard = (props: {
 
   return (
     <EntityTable
-      title="Provided APIs"
+      title={title}
       variant={variant}
       emptyContent={
         <div style={{ textAlign: 'center' }}>
@@ -84,6 +92,7 @@ export const ProvidedApisCard = (props: {
         </div>
       }
       columns={columns}
+      tableOptions={tableOptions}
       entities={entities as ApiEntity[]}
     />
   );