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

theforeman · Sep 26, 2024 · 418739e · 418739e
1 parent 1a5c1b9
commit 418739e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 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,8 @@ import { getColumnHelpers } from './helpers';
 
 export const Table = ({
   columns,
+  customEmptyState,
+  emptyAction,
   emptyMessage,
   errorMessage,
   getActions,
@@ -134,13 +136,23 @@ export const Table = ({
               </Td>
             </Tr>
           )}
-          {!isPending && results.length === 0 && !errorMessage && (
-            <Tr ouiaId="table-empty">
-              <Td colSpan={100}>
-                <EmptyPage message={{ type: 'empty', text: emptyMessage }} />
-              </Td>
-            </Tr>
-          )}
+          {!customEmptyState &&
+            !isPending &&
+            results.length === 0 &&
+            !errorMessage && (
+              <Tr ouiaId="table-empty">
+                <Td colSpan={100}>
+                  <EmptyPage
+                    message={{
+                      type: 'empty',
+                      text: emptyMessage,
+                      action: emptyAction,
+                    }}
+                  />
+                </Td>
+              </Tr>
+            )}
+          {customEmptyState}
           {errorMessage && (
             <Tr ouiaId="table-error">
               <Td colSpan={100}>
@@ -186,11 +198,13 @@ export const Table = ({
 Table.propTypes = {
   children: PropTypes.node,
   columns: PropTypes.object.isRequired,
+  customEmptyState: PropTypes.object,
   params: PropTypes.shape({
     page: PropTypes.number,
     perPage: PropTypes.number,
     order: PropTypes.string,
   }).isRequired,
+  emptyAction: PropTypes.object,
   emptyMessage: PropTypes.string,
   errorMessage: PropTypes.string,
   getActions: PropTypes.func,
@@ -212,6 +226,8 @@ Table.propTypes = {
 
 Table.defaultProps = {
   children: null,
+  customEmptyState: 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,
   }),
 };