Added emptyContent to properties of Catalog Table

Signed-off-by: irma12 <irma@roadie.io>

.changeset/many-kangaroos-raise.md

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

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

@@ -32,14 +32,14 @@ import {
   useEntityList,
   useStarredEntities,
 } from '@backstage/plugin-catalog-react';
-import { Typography } from '@material-ui/core';
+import { makeStyles, Typography } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import Edit from '@material-ui/icons/Edit';
 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,9 +52,18 @@ export interface CatalogTableProps {
   columns?: TableColumn<CatalogTableRow>[];
   actions?: TableProps<CatalogTableRow>['actions'];
   tableOptions?: TableProps<CatalogTableRow>['options'];
+  emptyContent?: ReactNode;
   subtitle?: string;
 }
 
+const useStyles = makeStyles(theme => ({
+  empty: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}));
+
 const YellowStar = withStyles({
   root: {
     color: '#f3ba37',
@@ -63,9 +72,10 @@ 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();
+  const classes = useStyles();
 
   const defaultColumns: TableColumn<CatalogTableRow>[] = useMemo(() => {
     return [
@@ -228,6 +238,9 @@ export const CatalogTable = (props: CatalogTableProps) => {
       data={rows}
       actions={actions || defaultActions}
       subtitle={subtitle}
+      emptyContent={
+        emptyContent && <div className={classes.empty}>{emptyContent}</div>
+      }
     />
   );
 };