From 5a892f9dc8bd6aa08839937edf00e3e998839202 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Tue, 16 Feb 2021 12:15:16 +0100
Subject: [PATCH] Rename emptyComponent to emptyContent

---
 .changeset/violet-maps-occur.md                       |  2 +-
 packages/core/src/components/Table/Table.stories.tsx  |  2 +-
 packages/core/src/components/Table/Table.test.tsx     |  2 +-
 packages/core/src/components/Table/Table.tsx          | 11 ++++++-----
 .../src/components/ApisCards/ConsumedApisCard.tsx     |  2 +-
 .../api-docs/src/components/ApisCards/HasApisCard.tsx |  2 +-
 .../src/components/ApisCards/ProvidedApisCard.tsx     |  2 +-
 .../ComponentsCards/ConsumingComponentsCard.tsx       |  2 +-
 .../ComponentsCards/ProvidingComponentsCard.tsx       |  2 +-
 .../src/components/EntityTable/EntityTable.test.tsx   |  4 ++--
 .../src/components/EntityTable/EntityTable.tsx        | 10 +++++-----
 .../src/components/EntityTable/presets.test.tsx       |  4 ++--
 .../components/ComponentsCard/HasComponentsCard.tsx   |  2 +-
 .../HasSubcomponentsCard/HasSubcomponentsCard.tsx     |  2 +-
 .../src/components/HasSystemsCard/HasSystemsCard.tsx  |  2 +-
 15 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/.changeset/violet-maps-occur.md b/.changeset/violet-maps-occur.md
index e746ca3323..112095d257 100644
--- a/.changeset/violet-maps-occur.md
+++ b/.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.
diff --git a/packages/core/src/components/Table/Table.stories.tsx b/packages/core/src/components/Table/Table.stories.tsx
index fe3fe89941..64ceb761f8 100644
--- a/packages/core/src/components/Table/Table.stories.tsx
+++ b/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>.
diff --git a/packages/core/src/components/Table/Table.test.tsx b/packages/core/src/components/Table/Table.test.tsx
index 3c29f0b65d..3ba1c12ebd 100644
--- a/packages/core/src/components/Table/Table.test.tsx
+++ b/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={[]}
       />,
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index 033ec01d3c..3892d82bb3 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/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 (
diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
index 922a133fde..256e55eb5f 100644
--- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
+++ b/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">
diff --git a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
index a0e1dce052..9682d64c09 100644
--- a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
+++ b/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">
diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
index 191eb0465c..96b6fd56cf 100644
--- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
+++ b/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">
diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
index a35c10b5cc..5c4afebb82 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
+++ b/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">
diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
index 04239085f0..9ebc2804ec 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
+++ b/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">
diff --git a/plugins/catalog-react/src/components/EntityTable/EntityTable.test.tsx b/plugins/catalog-react/src/components/EntityTable/EntityTable.test.tsx
index 8752b6af6a..33bbbd007d 100644
--- a/plugins/catalog-react/src/components/EntityTable/EntityTable.test.tsx
+++ b/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',
diff --git a/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx b/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx
index 18de1ec9ab..ad1496f480 100644
--- a/plugins/catalog-react/src/components/EntityTable/EntityTable.tsx
+++ b/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;
diff --git a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx
index 3edce87dac..b6b8c26e37 100644
--- a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx
+++ b/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}
       />,
     );
diff --git a/plugins/catalog/src/components/ComponentsCard/HasComponentsCard.tsx b/plugins/catalog/src/components/ComponentsCard/HasComponentsCard.tsx
index c2652f8cff..aebc2e806e 100644
--- a/plugins/catalog/src/components/ComponentsCard/HasComponentsCard.tsx
+++ b/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">
diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
index 6bc555efc2..dfa22041be 100644
--- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
+++ b/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">
diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
index 339f83c624..0fe5931c9c 100644
--- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
+++ b/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">