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