From 418739e004f3484c7e196ad9537fa8316029e7a3 Mon Sep 17 00:00:00 2001
From: kmalyjur <kmalyjur@github.com>
Date: Thu, 26 Sep 2024 13:56:14 +0000
Subject: [PATCH] Fixes #37836 - Add possibility to display action when table
 is empty

---
 .../PF4/TableIndexPage/Table/Table.js         | 30 ++++++++++++++-----
 .../routes/common/EmptyPage/index.js          |  4 ++-
 2 files changed, 26 insertions(+), 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
index fa815eff493..03de88ed0e8 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,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
index ca8fc2c0a82..f23202ae2ed 100644
--- 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,
   }),
 };