From fe9ead8ea10dd8b4c74cceb24e5ba90c65a33625 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 18 Feb 2022 15:14:20 +0300
Subject: [PATCH] Show custom noItemsMessage

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+catalog/catalog.tsx    |  1 +
 .../components/item-object-list/content.tsx     | 17 ++++++++++++++---
 .../components/item-object-list/list-layout.tsx |  2 ++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index 8a611d4990..8140fdf817 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -264,6 +264,7 @@ class NonInjectedCatalog extends React.Component<Props & Dependencies> {
         store={catalogEntityStore}
         getItems={() => catalogEntityStore.entities}
         showEmptyTablePlaceholder
+        noItemsMessage="There are no Dev Clusters in this space"
         customizeTableRowProps={entity => ({
           disabled: !entity.isEnabled(),
         })}
diff --git a/src/renderer/components/item-object-list/content.tsx b/src/renderer/components/item-object-list/content.tsx
index 018786c510..1482b33b61 100644
--- a/src/renderer/components/item-object-list/content.tsx
+++ b/src/renderer/components/item-object-list/content.tsx
@@ -41,7 +41,18 @@ interface ItemListLayoutContentProps<I extends ItemObject> {
   customizeTableRowProps?: (item: I) => Partial<TableRowProps>;
   addRemoveButtons?: Partial<AddRemoveButtonsProps>;
   virtual?: boolean;
-  showEmptyTablePlaceholder?: boolean; // show fading lines down the header
+
+  /**
+   * Message to display when no items available
+   *
+   * @default "Item list is empty"
+   */
+  noItemsMessage?: React.ReactNode;
+
+  /**
+   * Flag indicating striped lines should be displayed when no items provided
+   */
+  showEmptyTablePlaceholder?: boolean;
 
   // item details view
   hasDetailsView?: boolean;
@@ -192,13 +203,13 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
         <>
           <Placeholder renderTableHeader={this.props.renderTableHeader} tableId={this.props.tableId}/>
           <div className="noItemsHolder">
-            <NoItems />
+            <NoItems>{this.props.noItemsMessage}</NoItems>
           </div>
         </>
       );
     }
 
-    return <NoItems />;
+    return <NoItems>{this.props.noItemsMessage}</NoItems>;
   }
 
   renderItems() {
diff --git a/src/renderer/components/item-object-list/list-layout.tsx b/src/renderer/components/item-object-list/list-layout.tsx
index 56e9e4af06..a32dfe7034 100644
--- a/src/renderer/components/item-object-list/list-layout.tsx
+++ b/src/renderer/components/item-object-list/list-layout.tsx
@@ -79,6 +79,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
   customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>;
   renderFooter?: (parent: NonInjectedItemListLayout<I>) => React.ReactNode;
   showEmptyTablePlaceholder?: boolean;
+  noItemsMessage?: React.ReactNode;
 
   /**
    * Message to display when a store failed to load
@@ -266,6 +267,7 @@ class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<It
           customizeRemoveDialog={this.props.customizeRemoveDialog}
           failedToLoadMessage={this.props.failedToLoadMessage}
           showEmptyTablePlaceholder={this.props.showEmptyTablePlaceholder}
+          noItemsMessage={this.props.noItemsMessage}
         />
 
         {this.props.renderFooter?.(this)}