Rename emptyComponent to emptyContent

.changeset/violet-maps-occur.md

@@ -4,5 +4,5 @@
 
 Add support for custom empty state of `Table` components.
 
-You can now optionally pass `emptyComponent` to `Table` that is displayed
+You can now optionally pass `emptyContent` to `Table` that is displayed
 if the table has now rows.

packages/core/src/components/Table/Table.stories.tsx

@@ -119,7 +119,7 @@ export const EmptyTable = () => {
         options={{ paging: false }}
         data={[]}
         columns={columns}
-        emptyComponent={
+        emptyContent={
           <div className={classes.empty}>
             No data was added yet,&nbsp;
             <Link to="http://backstage.io/">learn how to add data</Link>.

packages/core/src/components/Table/Table.test.tsx

@@ -58,7 +58,7 @@ describe('<Table />', () => {
     const rendered = await renderInTestApp(
       <Table
         subtitle="subtitle"
-        emptyComponent={<div>EMPTY</div>}
+        emptyContent={<div>EMPTY</div>}
         columns={minProps.columns}
         data={[]}
       />,

packages/core/src/components/Table/Table.tsx

@@ -49,6 +49,7 @@ import MTable, {
 } from 'material-table';
 import React, {
   forwardRef,
+  ReactNode,
   useCallback,
   useEffect,
   useRef,
@@ -203,7 +204,7 @@ export interface TableProps<T extends object = {}>
   subtitle?: string;
   filters?: TableFilter[];
   initialState?: TableState;
-  emptyComponent?: JSX.Element;
+  emptyContent?: ReactNode;
   onStateChange?: (state: TableState) => any;
 }
 
@@ -214,7 +215,7 @@ export function Table<T extends object = {}>({
   subtitle,
   filters,
   initialState,
-  emptyComponent,
+  emptyContent,
   onStateChange,
   ...props
 }: TableProps<T>) {
@@ -428,11 +429,11 @@ export function Table<T extends object = {}>({
 
   const Body = useCallback(
     bodyProps => {
-      if (emptyComponent && data.length === 0) {
+      if (emptyContent && data.length === 0) {
         return (
           <tbody>
             <tr>
-              <td colSpan={columns.length}>{emptyComponent}</td>
+              <td colSpan={columns.length}>{emptyContent}</td>
             </tr>
           </tbody>
         );
@@ -440,7 +441,7 @@ export function Table<T extends object = {}>({
 
       return <MTableBody {...bodyProps} />;
     },
-    [data, emptyComponent, columns],
+    [data, emptyContent, columns],
   );
 
   return (

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

@@ -81,7 +81,7 @@ export const ConsumedApisCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="Consumed APIs"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No Component consumes this API.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional">

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

@@ -76,7 +76,7 @@ export const HasApisCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="APIs"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No API is part of this system.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api">

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

@@ -81,7 +81,7 @@ export const ProvidedApisCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="Provided APIs"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No Component provides this API.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional">

plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx

@@ -80,7 +80,7 @@ export const ConsumingComponentsCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="Consumers"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No component consumes this API.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional">

plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx

@@ -80,7 +80,7 @@ export const ProvidingComponentsCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="Providers"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No component provides this API.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional">

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

@@ -26,7 +26,7 @@ describe('<EntityTable />', () => {
       <EntityTable
         title="Entities"
         entities={[]}
-        emptyComponent={<div>EMPTY</div>}
+        emptyContent={<div>EMPTY</div>}
         columns={[]}
       />,
     );
@@ -51,7 +51,7 @@ describe('<EntityTable />', () => {
       <EntityTable
         title="Entities"
         entities={entities}
-        emptyComponent={<div>EMPTY</div>}
+        emptyContent={<div>EMPTY</div>}
         columns={[
           {
             title: 'Name',

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

@@ -17,7 +17,7 @@
 import { Entity } from '@backstage/catalog-model';
 import { Table, TableColumn } from '@backstage/core';
 import { makeStyles } from '@material-ui/core';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import * as columnFactories from './columns';
 import { componentEntityColumns, systemEntityColumns } from './presets';
 
@@ -25,7 +25,7 @@ type Props<T extends Entity> = {
   title: string;
   variant?: string;
   entities: T[];
-  emptyComponent?: JSX.Element;
+  emptyContent?: ReactNode;
   columns: TableColumn<T>[];
 };
 
@@ -40,7 +40,7 @@ const useStyles = makeStyles(theme => ({
 export function EntityTable<T extends Entity>({
   entities,
   title,
-  emptyComponent,
+  emptyContent,
   variant = 'gridItem',
   columns,
 }: Props<T>) {
@@ -59,8 +59,8 @@ export function EntityTable<T extends Entity>({
       columns={columns}
       title={title}
       style={tableStyle}
-      emptyComponent={
-        emptyComponent && <div className={classes.empty}>{emptyComponent}</div>
+      emptyContent={
+        emptyContent && <div className={classes.empty}>{emptyContent}</div>
       }
       options={{
         // TODO: Toolbar padding if off compared to other cards, should be: padding: 16px 24px;

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

@@ -65,7 +65,7 @@ describe('systemEntityColumns', () => {
       <EntityTable
         title="My Systems"
         entities={entities}
-        emptyComponent={<div>EMPTY</div>}
+        emptyContent={<div>EMPTY</div>}
         columns={systemEntityColumns}
       />,
     );
@@ -120,7 +120,7 @@ describe('componentEntityColumns', () => {
       <EntityTable
         title="My Components"
         entities={entities}
-        emptyComponent={<div>EMPTY</div>}
+        emptyContent={<div>EMPTY</div>}
         columns={componentEntityColumns}
       />,
     );

plugins/catalog/src/components/ComponentsCard/HasComponentsCard.tsx

@@ -75,7 +75,7 @@ export const HasComponentsCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="Components"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No component is part of this system.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-component">

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

@@ -75,7 +75,7 @@ export const HasSubcomponentsCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="Subcomponents"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No subcomponent is part of this component.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#specsubcomponentof-optional">

plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx

@@ -74,7 +74,7 @@ export const HasSystemsCard = ({ variant = 'gridItem' }: Props) => {
     <EntityTable
       title="Systems"
       variant={variant}
-      emptyComponent={
+      emptyContent={
         <div>
           No system is part of this domain.{' '}
           <Link to="https://backstage.io/docs/features/software-catalog/descriptor-format#kind-system">