From fc5ba6d12a5f4204ea722dd9fca74f8428f04149 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 16 Jul 2021 13:55:48 -0700
Subject: [PATCH] Fix TableContainer empty state bug (#1406)

---
 frontend/components/TableContainer/TableContainer.tsx  |  2 +-
 .../hosts/HostDetailsPage/EmptySoftware/_styles.scss   |  1 +
 .../pages/hosts/HostDetailsPage/HostDetailsPage.jsx    | 10 +++-------
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx
index f093f9ef21..f78945e008 100644
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/frontend/components/TableContainer/TableContainer.tsx
@@ -232,7 +232,7 @@ const TableContainer = ({
       </div>
       <div className={`${baseClass}__data-table-container`}>
         {/* No entities for this result. */}
-        {!isLoading && !data ? (
+        {!isLoading && data.length === 0 ? (
           <EmptyComponent />
         ) : (
           <>
diff --git a/frontend/pages/hosts/HostDetailsPage/EmptySoftware/_styles.scss b/frontend/pages/hosts/HostDetailsPage/EmptySoftware/_styles.scss
index 5397584b95..a0f1dae7a5 100644
--- a/frontend/pages/hosts/HostDetailsPage/EmptySoftware/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/EmptySoftware/_styles.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   margin-top: 80px;
+  margin-bottom: 80px;
 
   &__inner {
     display: flex;
diff --git a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
index cfa3e3f5a7..8c8546dc2a 100644
--- a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
+++ b/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx
@@ -83,7 +83,7 @@ export class HostDetailsPage extends Component {
       showQueryHostModal: false,
       showTransferHostModal: false,
       showRefetchLoadingSpinner: false,
-      softwareState: props.host.software,
+      softwareState: [],
     };
   }
 
@@ -495,14 +495,10 @@ export class HostDetailsPage extends Component {
     // const { EmptySoftware } = this;
     const { onQueryChange } = this;
     const { softwareState } = this.state;
-    const { host } = this.props;
-    const wrapperClassName = `${baseClass}__table`;
+    const { host, isLoadingHost } = this.props;
 
     const tableHeaders = generateTableHeaders();
 
-    // Hardcoded in false for loading table data
-    const loadingTableData = false;
-
     return (
       <div className="section section--software">
         <p className="section__header">Software</p>
@@ -524,7 +520,7 @@ export class HostDetailsPage extends Component {
               <TableContainer
                 columns={tableHeaders}
                 data={generateDataSet(softwareState)}
-                isLoading={loadingTableData}
+                isLoading={isLoadingHost}
                 defaultSortHeader={"name"}
                 defaultSortDirection={"asc"}
                 inputPlaceHolder={"Filter software"}