Merge pull request #14003 from RoadieHQ/allow-emptyContent-in-Catalog-table

Added emptyContent to properties of Catalog Table

.changeset/many-kangaroos-raise.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Added `emptyContent` property to CatalogTable and DefaultCatalogPage to support customization of the Catalog Table.

plugins/catalog/api-report.md

@@ -167,6 +167,8 @@ export interface CatalogTableProps {
   // (undocumented)
   columns?: TableColumn<CatalogTableRow>[];
   // (undocumented)
+  emptyContent?: ReactNode;
+  // (undocumented)
   subtitle?: string;
   // (undocumented)
   tableOptions?: TableProps<CatalogTableRow>['options'];
@@ -196,6 +198,8 @@ export interface DefaultCatalogPageProps {
   // (undocumented)
   columns?: TableColumn<CatalogTableRow>[];
   // (undocumented)
+  emptyContent?: ReactNode;
+  // (undocumented)
   initialKind?: string;
   // (undocumented)
   initiallySelectedFilter?: UserListFilterKind;

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx

@@ -36,7 +36,7 @@ import {
   UserListPicker,
   EntityKindPicker,
 } from '@backstage/plugin-catalog-react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { createComponentRouteRef } from '../../routes';
 import { CatalogTable, CatalogTableRow } from '../CatalogTable';
 import { CatalogKindHeader } from '../CatalogKindHeader';
@@ -53,6 +53,7 @@ export interface DefaultCatalogPageProps {
   actions?: TableProps<CatalogTableRow>['actions'];
   initialKind?: string;
   tableOptions?: TableProps<CatalogTableRow>['options'];
+  emptyContent?: ReactNode;
 }
 
 export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
@@ -62,6 +63,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
     initiallySelectedFilter = 'owned',
     initialKind = 'component',
     tableOptions = {},
+    emptyContent,
   } = props;
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
@@ -97,6 +99,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
                 columns={columns}
                 actions={actions}
                 tableOptions={tableOptions}
+                emptyContent={emptyContent}
               />
             </CatalogFilterLayout.Content>
           </CatalogFilterLayout>

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -39,7 +39,7 @@ import OpenInNew from '@material-ui/icons/OpenInNew';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import { capitalize } from 'lodash';
-import React, { useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { columnFactories } from './columns';
 import { CatalogTableRow } from './types';
 
@@ -52,6 +52,7 @@ export interface CatalogTableProps {
   columns?: TableColumn<CatalogTableRow>[];
   actions?: TableProps<CatalogTableRow>['actions'];
   tableOptions?: TableProps<CatalogTableRow>['options'];
+  emptyContent?: ReactNode;
   subtitle?: string;
 }
 
@@ -63,7 +64,7 @@ const YellowStar = withStyles({
 
 /** @public */
 export const CatalogTable = (props: CatalogTableProps) => {
-  const { columns, actions, tableOptions, subtitle } = props;
+  const { columns, actions, tableOptions, subtitle, emptyContent } = props;
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const { loading, error, entities, filters } = useEntityList();
 
@@ -228,6 +229,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
       data={rows}
       actions={actions || defaultActions}
       subtitle={subtitle}
+      emptyContent={emptyContent}
     />
   );
 };