Fixes #37836 - Add possibility to display action when table is empty

theforeman · Sep 18, 2024 · 13482b3 · 13482b3
1 parent 1a5c1b9
commit 13482b3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 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,
+  emptyAction,
   emptyMessage,
   errorMessage,
   getActions,
@@ -137,7 +138,13 @@ export const Table = ({
           {!isPending && results.length === 0 && !errorMessage && (
             <Tr ouiaId="table-empty">
               <Td colSpan={100}>
-                <EmptyPage message={{ type: 'empty', text: emptyMessage }} />
+                <EmptyPage
+                  message={{
+                    type: 'empty',
+                    text: emptyMessage,
+                    action: emptyAction,
+                  }}
+                />
               </Td>
             </Tr>
           )}
@@ -191,6 +198,7 @@ Table.propTypes = {
     perPage: PropTypes.number,
     order: PropTypes.string,
   }).isRequired,
+  emptyAction: PropTypes.object,
   emptyMessage: PropTypes.string,
   errorMessage: PropTypes.string,
   getActions: PropTypes.func,
@@ -212,6 +220,7 @@ Table.propTypes = {
 
 Table.defaultProps = {
   children: null,
+  emptyAction: null,
   emptyMessage: null,
   errorMessage: null,
   isDeleteable: false,

diff --git a/webpack/assets/javascripts/react_app/routes/common/EmptyPage/index.js b/webpack/assets/javascripts/react_app/routes/common/EmptyPage/index.js
@@ -4,7 +4,7 @@ import { translate as __ } from '../../../common/I18n';
 import DefaultEmptyState from '../../../components/common/EmptyState';
 import './emptypage.scss';
 
-const EmptyPage = ({ message: { type, text } }) => {
+const EmptyPage = ({ message: { type, text, action } }) => {
   const headerTextMap = {
     empty: __('No Results'),
     error: __('Error'),
@@ -16,6 +16,7 @@ const EmptyPage = ({ message: { type, text } }) => {
       icon={type === 'error' ? 'error-circle-o' : 'add-circle-o'}
       header={headerText}
       description={text}
+      action={action}
     />
   );
 };
@@ -24,6 +25,7 @@ EmptyPage.propTypes = {
   message: PropTypes.shape({
     type: PropTypes.oneOf(['empty', 'error', 'loading']),
     text: PropTypes.string,
+    action: PropTypes.object,
   }),
 };