From 1a5c1b9b2b35f88a8ec177bd76ae5d3e280a7d81 Mon Sep 17 00:00:00 2001
From: kmalyjur <kmalyjur@github.com>
Date: Thu, 12 Sep 2024 09:31:54 +0000
Subject: [PATCH] Fixes #37805 - Add possibility to display message when table
 is empty

---
 .../components/PF4/TableIndexPage/Table/Table.js         | 9 ++++++---
 .../components/PF4/TableIndexPage/Table/Table.test.js    | 3 ++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
index b68ce8240ea..fa815eff493 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
@@ -19,6 +19,7 @@ import { getColumnHelpers } from './helpers';
 
 export const Table = ({
   columns,
+  emptyMessage,
   errorMessage,
   getActions,
   isDeleteable,
@@ -133,10 +134,10 @@ export const Table = ({
               </Td>
             </Tr>
           )}
-          {!isPending && !errorMessage && results.length === 0 && (
+          {!isPending && results.length === 0 && !errorMessage && (
             <Tr ouiaId="table-empty">
               <Td colSpan={100}>
-                <EmptyPage />
+                <EmptyPage message={{ type: 'empty', text: emptyMessage }} />
               </Td>
             </Tr>
           )}
@@ -177,7 +178,7 @@ export const Table = ({
             })}
         </Tbody>
       </TableComposable>
-      {results.length > 0 && !errorMessage && bottomPagination}
+      {results.length > 0 && !errorMessage && !emptyMessage && bottomPagination}
     </>
   );
 };
@@ -190,6 +191,7 @@ Table.propTypes = {
     perPage: PropTypes.number,
     order: PropTypes.string,
   }).isRequired,
+  emptyMessage: PropTypes.string,
   errorMessage: PropTypes.string,
   getActions: PropTypes.func,
   isDeleteable: PropTypes.bool,
@@ -210,6 +212,7 @@ Table.propTypes = {
 
 Table.defaultProps = {
   children: null,
+  emptyMessage: null,
   errorMessage: null,
   isDeleteable: false,
   itemCount: 0,
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js
index 8a45ac45e16..9ac59eb501c 100644
--- a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js
+++ b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.test.js
@@ -179,6 +179,7 @@ describe('Table', () => {
           setParams={setParams}
           refreshData={refreshData}
           results={[]}
+          errorMessage="Empty test"
           isDeleteable={true}
           url="/users"
           isPending={false}
@@ -186,7 +187,7 @@ describe('Table', () => {
       </Provider>
     );
     expect(screen.queryAllByText('items')).toHaveLength(0);
-    expect(screen.queryAllByText('No Results')).toHaveLength(2);
+    expect(screen.queryAllByText('Empty test')).toHaveLength(1);
     expect(screen.queryAllByText('Loading...')).toHaveLength(0);
   });
   test('show empty state while loading', () => {