Fixes #37805 - Add possibility to display message when table is empty

theforeman · Sep 12, 2024 · 1a5c1b9 · 1a5c1b9
1 parent fbbf6c6
commit 1a5c1b9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -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
@@ -179,14 +179,15 @@ describe('Table', () => {
           setParams={setParams}
           refreshData={refreshData}
           results={[]}
+          errorMessage="Empty test"
           isDeleteable={true}
           url="/users"
           isPending={false}
         />
       </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', () => {