1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Show custom noItemsMessage

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-18 15:14:20 +03:00
parent ed17e064ce
commit fe9ead8ea1
3 changed files with 17 additions and 3 deletions

View File

@ -264,6 +264,7 @@ class NonInjectedCatalog extends React.Component<Props & Dependencies> {
store={catalogEntityStore} store={catalogEntityStore}
getItems={() => catalogEntityStore.entities} getItems={() => catalogEntityStore.entities}
showEmptyTablePlaceholder showEmptyTablePlaceholder
noItemsMessage="There are no Dev Clusters in this space"
customizeTableRowProps={entity => ({ customizeTableRowProps={entity => ({
disabled: !entity.isEnabled(), disabled: !entity.isEnabled(),
})} })}

View File

@ -41,7 +41,18 @@ interface ItemListLayoutContentProps<I extends ItemObject> {
customizeTableRowProps?: (item: I) => Partial<TableRowProps>; customizeTableRowProps?: (item: I) => Partial<TableRowProps>;
addRemoveButtons?: Partial<AddRemoveButtonsProps>; addRemoveButtons?: Partial<AddRemoveButtonsProps>;
virtual?: boolean; 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 // item details view
hasDetailsView?: boolean; hasDetailsView?: boolean;
@ -192,13 +203,13 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
<> <>
<Placeholder renderTableHeader={this.props.renderTableHeader} tableId={this.props.tableId}/> <Placeholder renderTableHeader={this.props.renderTableHeader} tableId={this.props.tableId}/>
<div className="noItemsHolder"> <div className="noItemsHolder">
<NoItems /> <NoItems>{this.props.noItemsMessage}</NoItems>
</div> </div>
</> </>
); );
} }
return <NoItems />; return <NoItems>{this.props.noItemsMessage}</NoItems>;
} }
renderItems() { renderItems() {

View File

@ -79,6 +79,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>; customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>;
renderFooter?: (parent: NonInjectedItemListLayout<I>) => React.ReactNode; renderFooter?: (parent: NonInjectedItemListLayout<I>) => React.ReactNode;
showEmptyTablePlaceholder?: boolean; showEmptyTablePlaceholder?: boolean;
noItemsMessage?: React.ReactNode;
/** /**
* Message to display when a store failed to load * 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} customizeRemoveDialog={this.props.customizeRemoveDialog}
failedToLoadMessage={this.props.failedToLoadMessage} failedToLoadMessage={this.props.failedToLoadMessage}
showEmptyTablePlaceholder={this.props.showEmptyTablePlaceholder} showEmptyTablePlaceholder={this.props.showEmptyTablePlaceholder}
noItemsMessage={this.props.noItemsMessage}
/> />
{this.props.renderFooter?.(this)} {this.props.renderFooter?.(this)}