Fix involuntary re-renders in item list layout

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/+apps-releases/releases.tsx

@@ -23,10 +23,8 @@ import { ReleaseRollbackDialog } from "./release-rollback-dialog";
 import { ReleaseDetails } from "./release-details/release-details";
 import removableReleasesInjectable from "./removable-releases.injectable";
 import type { RemovableHelmRelease } from "./removable-releases";
-import { observer } from "mobx-react";
 import type { IComputedValue } from "mobx";
 import releasesInjectable from "./releases.injectable";
-import { Spinner } from "../spinner";
 
 enum columnId {
   name = "name",
@@ -48,7 +46,6 @@ interface Dependencies {
   selectNamespace: (namespace: string) => void
 }
 
-@observer
 class NonInjectedHelmReleases extends Component<Dependencies & Props> {
   componentDidMount() {
     const { match: { params: { namespace }}} = this.props;
@@ -89,12 +86,8 @@ class NonInjectedHelmReleases extends Component<Dependencies & Props> {
   }
 
   render() {
-    if (this.props.releasesArePending.get()) {
-      // TODO: Make Spinner "center" work properly
-      return <div className="flex center" style={{ height: "100%" }}><Spinner /></div>;
-    }
-
     const releases = this.props.releases;
+    const releasesArePending = this.props.releasesArePending;
 
     // TODO: Implement ItemListLayout without stateful stores
     const legacyReleaseStore = {
@@ -103,7 +96,11 @@ class NonInjectedHelmReleases extends Component<Dependencies & Props> {
       },
 
       loadAll: () => Promise.resolve(),
-      isLoaded: true,
+
+      get isLoaded() {
+        return !releasesArePending.get();
+      },
+
       failedLoading: false,
 
       getTotalCount: () => releases.get().length,

src/renderer/components/item-object-list/item-list-layout-content/item-list-layout-content.tsx

@@ -0,0 +1,271 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "../item-list-layout.scss";
+
+import React, { ReactNode } from "react";
+import { computed, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import { ConfirmDialog, ConfirmDialogParams } from "../../confirm-dialog";
+import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../../table";
+import { boundMethod, cssNames, IClassName, isReactNode, prevDefault, stopPropagation } from "../../../utils";
+import { AddRemoveButtons, AddRemoveButtonsProps } from "../../add-remove-buttons";
+import { NoItems } from "../../no-items";
+import { Spinner } from "../../spinner";
+import type { ItemObject, ItemStore } from "../../../../common/item.store";
+import { Filter, pageFilters } from "../page-filters.store";
+import { ThemeStore } from "../../../theme.store";
+import { MenuActions } from "../../menu/menu-actions";
+import { MenuItem } from "../../menu";
+import { Checkbox } from "../../checkbox";
+import { UserStore } from "../../../../common/user-store";
+
+interface ItemListLayoutContentProps<I extends ItemObject> {
+  getFilters: () => Filter[]
+  tableId?: string;
+  className: IClassName;
+  getItems: () => I[];
+  store: ItemStore<I>;
+  getIsReady: () => boolean; // show loading indicator while not ready
+  isSelectable?: boolean; // show checkbox in rows for selecting items
+  isConfigurable?: boolean;
+  copyClassNameFromHeadCells?: boolean;
+  sortingCallbacks?: TableSortCallbacks<I>;
+  tableProps?: Partial<TableProps<I>>; // low-level table configuration
+  renderTableHeader: TableCellProps[] | null;
+  renderTableContents: (item: I) => (ReactNode | TableCellProps)[];
+  renderItemMenu?: (item: I, store: ItemStore<I>) => ReactNode;
+  customizeTableRowProps?: (item: I) => Partial<TableRowProps>;
+  addRemoveButtons?: Partial<AddRemoveButtonsProps>;
+  virtual?: boolean;
+
+  // item details view
+  hasDetailsView?: boolean;
+  detailsItem?: I;
+  onDetails?: (item: I) => void;
+
+  // other
+  customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>;
+
+  /**
+   * Message to display when a store failed to load
+   *
+   * @default "Failed to load items"
+   */
+  failedToLoadMessage?: React.ReactNode;
+}
+
+@observer
+export class ItemListLayoutContent<I extends ItemObject> extends React.Component<ItemListLayoutContentProps<I>> {
+  constructor(props: ItemListLayoutContentProps<I>) {
+    super(props);
+    makeObservable(this);
+  }
+
+  @computed get failedToLoad() {
+    return this.props.store.failedLoading;
+  }
+
+  @boundMethod
+  getRow(uid: string) {
+    const {
+      isSelectable, renderTableHeader, renderTableContents, renderItemMenu,
+      store, hasDetailsView, onDetails,
+      copyClassNameFromHeadCells, customizeTableRowProps, detailsItem,
+    } = this.props;
+    const { isSelected } = store;
+    const item = this.props.getItems().find(item => item.getId() == uid);
+
+    if (!item) return null;
+    const itemId = item.getId();
+
+    return (
+      <TableRow
+        key={itemId}
+        nowrap
+        searchItem={item}
+        sortItem={item}
+        selected={detailsItem && detailsItem.getId() === itemId}
+        onClick={hasDetailsView ? prevDefault(() => onDetails(item)) : undefined}
+        {...customizeTableRowProps(item)}
+      >
+        {isSelectable && (
+          <TableCell
+            checkbox
+            isChecked={isSelected(item)}
+            onClick={prevDefault(() => store.toggleSelection(item))}
+          />
+        )}
+        {
+          renderTableContents(item).map((content, index) => {
+            const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content;
+            const headCell = renderTableHeader?.[index];
+
+            if (copyClassNameFromHeadCells && headCell) {
+              cellProps.className = cssNames(cellProps.className, headCell.className);
+            }
+
+            if (!headCell || this.showColumn(headCell)) {
+              return <TableCell key={index} {...cellProps} />;
+            }
+
+            return null;
+          })
+        }
+        {renderItemMenu && (
+          <TableCell className="menu">
+            <div onClick={stopPropagation}>
+              {renderItemMenu(item, store)}
+            </div>
+          </TableCell>
+        )}
+      </TableRow>
+    );
+  }
+
+  @boundMethod
+  removeItemsDialog() {
+    const { customizeRemoveDialog, store } = this.props;
+    const { selectedItems, removeSelectedItems } = store;
+    const visibleMaxNamesCount = 5;
+    const selectedNames = selectedItems.map(ns => ns.getName()).slice(0, visibleMaxNamesCount).join(", ");
+    const dialogCustomProps = customizeRemoveDialog ? customizeRemoveDialog(selectedItems) : {};
+    const selectedCount = selectedItems.length;
+    const tailCount = selectedCount > visibleMaxNamesCount ? selectedCount - visibleMaxNamesCount : 0;
+    const tail = tailCount > 0 ? <>, and <b>{tailCount}</b> more</> : null;
+    const message = selectedCount <= 1 ? <p>Remove item <b>{selectedNames}</b>?</p> : <p>Remove <b>{selectedCount}</b> items <b>{selectedNames}</b>{tail}?</p>;
+
+    ConfirmDialog.open({
+      ok: removeSelectedItems,
+      labelOk: "Remove",
+      message,
+      ...dialogCustomProps,
+    });
+  }
+
+  renderNoItems() {
+    if (this.failedToLoad) {
+      return <NoItems>{this.props.failedToLoadMessage}</NoItems>;
+    }
+
+    if (!this.props.getIsReady()) {
+      return <Spinner center />;
+    }
+
+    if (this.props.getFilters().length > 0) {
+      return (
+        <NoItems>
+          No items found.
+          <p>
+            <a onClick={() => pageFilters.reset()} className="contrast">
+              Reset filters?
+            </a>
+          </p>
+        </NoItems>
+      );
+    }
+
+    return <NoItems />;
+  }
+
+  renderItems() {
+    if (this.props.virtual) {
+      return null;
+    }
+
+    return this.props.getItems().map(item => this.getRow(item.getId()));
+  }
+
+  renderTableHeader() {
+    const { customizeTableRowProps, renderTableHeader, isSelectable, isConfigurable, store } = this.props;
+
+    if (!renderTableHeader) {
+      return null;
+    }
+
+    const enabledItems = this.props.getItems().filter(item => !customizeTableRowProps(item).disabled);
+
+    return (
+      <TableHead showTopLine nowrap>
+        {isSelectable && (
+          <TableCell
+            checkbox
+            isChecked={store.isSelectedAll(enabledItems)}
+            onClick={prevDefault(() => store.toggleSelectionAll(enabledItems))}
+          />
+        )}
+        {renderTableHeader.map((cellProps, index) => (
+          this.showColumn(cellProps) && (
+            <TableCell key={cellProps.id ?? index} {...cellProps} />
+          )
+        ))}
+        <TableCell className="menu">
+          {isConfigurable && this.renderColumnVisibilityMenu()}
+        </TableCell>
+      </TableHead>
+    );
+  }
+
+  render() {
+    const {
+      store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks,
+      detailsItem, className, tableProps = {}, tableId,
+    } = this.props;
+    const { selectedItems } = store;
+    const selectedItemId = detailsItem && detailsItem.getId();
+    const classNames = cssNames(className, "box", "grow", ThemeStore.getInstance().activeTheme.type);
+
+    return (
+      <div className="items box grow flex column">
+        <Table
+          tableId={tableId}
+          virtual={virtual}
+          selectable={hasDetailsView}
+          sortable={sortingCallbacks}
+          getTableRow={this.getRow}
+          items={this.props.getItems()}
+          selectedItemId={selectedItemId}
+          noItems={this.renderNoItems()}
+          className={classNames}
+          {...tableProps}
+        >
+          {this.renderTableHeader()}
+          {this.renderItems()}
+        </Table>
+        <AddRemoveButtons
+          onRemove={selectedItems.length ? this.removeItemsDialog : null}
+          removeTooltip={`Remove selected items (${selectedItems.length})`}
+          {...addRemoveButtons}
+        />
+      </div>
+    );
+  }
+
+  showColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
+    const { tableId, isConfigurable } = this.props;
+
+    return !isConfigurable || !UserStore.getInstance().isTableColumnHidden(tableId, columnId, showWithColumn);
+  }
+
+  renderColumnVisibilityMenu() {
+    const { renderTableHeader, tableId } = this.props;
+
+    return (
+      <MenuActions className="ItemListLayoutVisibilityMenu" toolbar={false} autoCloseOnSelect={false}>
+        {renderTableHeader.map((cellProps, index) => (
+          !cellProps.showWithColumn && (
+            <MenuItem key={index} className="input">
+              <Checkbox
+                label={cellProps.title ?? `<${cellProps.className}>`}
+                value={this.showColumn(cellProps)}
+                onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id)}
+              />
+            </MenuItem>
+          )
+        ))}
+      </MenuActions>
+    );
+  }
+}

src/renderer/components/item-object-list/item-list-layout-filters/item-list-layout-filters.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "../item-list-layout.scss";
+
+import React from "react";
+import { PageFiltersList } from "../page-filters-list";
+import { observer } from "mobx-react";
+import type { Filter } from "../page-filters.store";
+
+interface ItemListLayoutFilterProps {
+  getIsReady: () => boolean
+  getFilters: () => Filter[]
+  getFiltersAreShown: () => boolean
+  hideFilters: boolean
+}
+
+@observer
+export class ItemListLayoutFilters extends React.Component<ItemListLayoutFilterProps> {
+  render() {
+    const filters = this.props.getFilters();
+
+    if (!this.props.getIsReady() || !filters.length || this.props.hideFilters || !this.props.getFiltersAreShown()) {
+      return null;
+    }
+
+    return <PageFiltersList filters={filters} />;
+  }
+}
+

src/renderer/components/item-object-list/item-list-layout-header/item-list-layout-header-filters/item-list-layout-header-filters.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { observer } from "mobx-react";
+import React from "react";
+import type { HeaderPlaceholders } from "../../item-list-layout";
+
+interface ItemListLayoutHeaderFiltersProps {
+  headerPlaceholders: HeaderPlaceholders
+}
+
+export const ItemListLayoutHeaderFilters = observer(
+  ({ headerPlaceholders }: ItemListLayoutHeaderFiltersProps) => (
+    <>{headerPlaceholders.filters}</>
+  ),
+);

src/renderer/components/item-object-list/item-list-layout-header/item-list-layout-header-info/item-list-layout-header-info.tsx

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { observer } from "mobx-react";
+import type { ItemObject, ItemStore } from "../../../../../common/item.store";
+import type { Filter } from "../../page-filters.store";
+import type { HeaderPlaceholders } from "../../item-list-layout";
+
+interface ItemListLayoutHeaderInfoProps<I extends ItemObject> {
+  headerPlaceholders: HeaderPlaceholders;
+  getItems: () => I[];
+  store: ItemStore<I>;
+  getFilters: () => Filter[]
+  toggleFilters: () => void
+}
+
+export const ItemListLayoutHeaderInfo = observer(
+  <I extends ItemObject>({
+    headerPlaceholders,
+    getItems,
+    getFilters,
+    store,
+    toggleFilters,
+  }: ItemListLayoutHeaderInfoProps<I>) => {
+    const renderInfo = () => {
+      const allItemsCount = store.getTotalCount();
+      const itemsCount = getItems().length;
+
+      if (getFilters().length > 0) {
+        return (
+          <>
+            <a onClick={toggleFilters}>Filtered</a>: {itemsCount} /{" "}
+            {allItemsCount}
+          </>
+        );
+      }
+
+      return allItemsCount === 1
+        ? `${allItemsCount} item`
+        : `${allItemsCount} items`;
+    };
+
+    const info = headerPlaceholders.info === undefined
+      ? renderInfo()
+      : headerPlaceholders.info;
+
+    if (!info) {
+      return null;
+    }
+
+    return <div className="info-panel box grow">{info}</div>;
+  },
+);

src/renderer/components/item-object-list/item-list-layout-header/item-list-layout-header-search/item-list-layout-header-search.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { observer } from "mobx-react";
+import type { ItemObject } from "../../../../../common/item.store";
+import { SearchInputUrl } from "../../../input";
+import React from "react";
+import type { HeaderPlaceholders, SearchFilter } from "../../item-list-layout";
+
+interface ItemListLayoutHeaderSearchProps<I extends ItemObject> {
+  searchFilters: SearchFilter<I>[];
+  headerPlaceholders: HeaderPlaceholders;
+}
+
+export const ItemListLayoutHeaderSearch = observer(
+  <I extends ItemObject>({
+    searchFilters,
+    headerPlaceholders,
+  }: ItemListLayoutHeaderSearchProps<I>) => {
+    const searchProps =
+      headerPlaceholders.searchProps !== undefined
+        ? headerPlaceholders.searchProps
+        : {};
+
+    if (searchFilters.length === 0 || !searchProps) {
+      return null;
+    }
+
+    return <SearchInputUrl {...searchProps} />;
+  },
+);

src/renderer/components/item-object-list/item-list-layout-header/item-list-layout-header-title/item-list-layout-header-title.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { observer } from "mobx-react";
+import React from "react";
+import type { HeaderPlaceholders } from "../../item-list-layout";
+
+interface ItemListLayoutHeaderTitleProps {
+  renderHeaderTitle: React.ReactNode | (() => React.ReactNode); // MIKKO: "this" parameter
+  headerPlaceholders: HeaderPlaceholders;
+}
+
+export const ItemListLayoutHeaderTitle = observer(({ renderHeaderTitle, headerPlaceholders }: ItemListLayoutHeaderTitleProps) => {
+  if (headerPlaceholders.title) {
+    return <>{headerPlaceholders.title}</>;
+  }
+
+  const title =
+    typeof renderHeaderTitle === "function"
+      ? renderHeaderTitle()
+      : renderHeaderTitle;
+
+  return <h5 className="title">{title}</h5>;
+});

src/renderer/components/item-object-list/item-list-layout-header/item-list-layout-header.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "../item-list-layout.scss";
+
+import React, { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { cssNames, IClassName } from "../../../utils";
+import type { ItemObject, ItemStore } from "../../../../common/item.store";
+import type { Filter } from "../page-filters.store";
+import { ItemListLayoutHeaderTitle } from "./item-list-layout-header-title/item-list-layout-header-title";
+import { ItemListLayoutHeaderInfo } from "./item-list-layout-header-info/item-list-layout-header-info";
+import { ItemListLayoutHeaderFilters } from "./item-list-layout-header-filters/item-list-layout-header-filters";
+import { ItemListLayoutHeaderSearch } from "./item-list-layout-header-search/item-list-layout-header-search";
+import type { HeaderCustomizer, SearchFilter } from "../item-list-layout";
+
+interface ItemListLayoutHeaderProps<I extends ItemObject> {
+  getItems: () => I[];
+  getFilters: () => Filter[];
+  toggleFilters: () => void;
+
+  store: ItemStore<I>;
+  searchFilters?: SearchFilter<I>[];
+
+  // header (title, filtering, searching, etc.)
+  showHeader?: boolean;
+  headerClassName?: IClassName;
+  renderHeaderTitle?:
+    | ReactNode
+    | ((parent: ItemListLayoutHeader<I>) => ReactNode);
+  customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
+}
+
+@observer
+export class ItemListLayoutHeader<I extends ItemObject> extends React.Component<
+  ItemListLayoutHeaderProps<I>
+> {
+  render() {
+    const {
+      showHeader,
+      customizeHeader,
+      renderHeaderTitle,
+      headerClassName,
+      searchFilters,
+    } = this.props;
+
+    if (!showHeader) {
+      return null;
+    }
+
+    const customizeHeaders = [customizeHeader].flat().filter(Boolean);
+
+    const headerPlaceholders = customizeHeaders.reduce(
+      (prevPlaceholders, customizer) => customizer(prevPlaceholders),
+      {},
+    );
+
+
+    return (
+      <div
+        className={cssNames("header flex gaps align-center", headerClassName)}
+      >
+        <ItemListLayoutHeaderTitle
+          renderHeaderTitle={renderHeaderTitle}
+          headerPlaceholders={headerPlaceholders}
+        />
+
+        <ItemListLayoutHeaderInfo
+          headerPlaceholders={headerPlaceholders}
+          getItems={this.props.getItems}
+          store={this.props.store}
+          getFilters={this.props.getFilters}
+          toggleFilters={this.props.toggleFilters}
+        />
+
+        <ItemListLayoutHeaderFilters headerPlaceholders={headerPlaceholders} />
+
+        <ItemListLayoutHeaderSearch
+          headerPlaceholders={headerPlaceholders}
+          searchFilters={searchFilters}
+        />
+      </div>
+    );
+  }
+}

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -4,42 +4,40 @@
  */
 
 import "./item-list-layout.scss";
-import groupBy from "lodash/groupBy";
 
 import React, { ReactNode } from "react";
-import { computed, makeObservable } from "mobx";
-import { observer } from "mobx-react";
-import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
-import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallbacks } from "../table";
+import { computed, makeObservable, untracked } from "mobx";
+import type { ConfirmDialogParams } from "../confirm-dialog";
+import type {
+  TableCellProps,
+  TableProps,
+  TableRowProps,
+  TableSortCallbacks,
+} from "../table";
 import {
   boundMethod,
   cssNames,
   IClassName,
-  isReactNode,
   noop,
   ObservableToggleSet,
-  prevDefault,
-  stopPropagation,
   StorageHelper,
 } from "../../utils";
-import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
-import { NoItems } from "../no-items";
-import { Spinner } from "../spinner";
+import type { AddRemoveButtonsProps } from "../add-remove-buttons";
 import type { ItemObject, ItemStore } from "../../../common/item.store";
-import { SearchInputUrlProps, SearchInputUrl } from "../input";
+import type { SearchInputUrlProps } from "../input";
 import { Filter, FilterType, pageFilters } from "./page-filters.store";
 import { PageFiltersList } from "./page-filters-list";
-import { ThemeStore } from "../../theme.store";
-import { MenuActions } from "../menu/menu-actions";
-import { MenuItem } from "../menu";
-import { Checkbox } from "../checkbox";
 import { UserStore } from "../../../common/user-store";
 import type { NamespaceStore } from "../+namespaces/namespace-store/namespace.store";
 import namespaceStoreInjectable from "../+namespaces/namespace-store/namespace-store.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import itemListLayoutStorageInjectable
   from "./item-list-layout-storage/item-list-layout-storage.injectable";
-
+import { ItemListLayoutContent } from "./item-list-layout-content/item-list-layout-content";
+import { ItemListLayoutHeader } from "./item-list-layout-header/item-list-layout-header";
+import groupBy from "lodash/groupBy";
+import { ItemListLayoutFilters } from "./item-list-layout-filters/item-list-layout-filters";
+import { observer } from "mobx-react";
 
 export type SearchFilter<I extends ItemObject> = (item: I) => string | number | (string | number)[];
 export type SearchFilters<I extends ItemObject> = Record<string, SearchFilter<I>>;
@@ -58,6 +56,7 @@ export interface ItemListLayoutProps<I extends ItemObject> {
   tableId?: string;
   className: IClassName;
   items?: I[];
+  getItems?: () => I[];
   store: ItemStore<I>;
   dependentStores?: ItemStore<ItemObject>[];
   preloadStores?: boolean;
@@ -136,14 +135,6 @@ class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<It
     makeObservable(this);
   }
 
-  get showFilters(): boolean {
-    return this.props.itemListLayoutStorage.get().showFilters;
-  }
-
-  set showFilters(showFilters: boolean) {
-    this.props.itemListLayoutStorage.merge({ showFilters });
-  }
-
   async componentDidMount() {
     const { isConfigurable, tableId, preloadStores } = this.props;
 
@@ -167,6 +158,45 @@ class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<It
     stores.forEach(store => store.loadAll(this.props.namespaceStore.contextNamespaces));
   }
 
+  get showFilters(): boolean {
+    return this.props.itemListLayoutStorage.get().showFilters;
+  }
+
+  set showFilters(showFilters: boolean) {
+    this.props.itemListLayoutStorage.merge({ showFilters });
+  }
+
+  @computed get filters() {
+    let { activeFilters } = pageFilters;
+    const { searchFilters } = this.props;
+
+    if (searchFilters.length === 0) {
+      activeFilters = activeFilters.filter(({ type }) => type !== FilterType.SEARCH);
+    }
+
+    return activeFilters;
+  }
+
+  @boundMethod
+  toggleFilters() {
+    this.showFilters = !this.showFilters;
+  }
+
+  @computed get isReady() {
+    return this.props.isReady ?? this.props.store.isLoaded;
+  }
+
+  renderFilters() {
+    const { hideFilters } = this.props;
+    const { isReady, filters } = this;
+
+    if (!isReady || !filters.length || hideFilters || !this.showFilters) {
+      return null;
+    }
+
+    return <PageFiltersList filters={filters} />;
+  }
+
   private filterCallbacks: ItemsFilters<I> = {
     [FilterType.SEARCH]: items => {
       const { searchFilters } = this.props;
@@ -189,341 +219,76 @@ class NonInjectedItemListLayout<I extends ItemObject> extends React.Component<It
     },
   };
 
-  @computed get isReady() {
-    return this.props.isReady ?? this.props.store.isLoaded;
-  }
-
-  @computed get failedToLoad() {
-    return this.props.store.failedLoading;
-  }
-
-  @computed get filters() {
-    let { activeFilters } = pageFilters;
-    const { searchFilters } = this.props;
-
-    if (searchFilters.length === 0) {
-      activeFilters = activeFilters.filter(({ type }) => type !== FilterType.SEARCH);
-    }
-
-    return activeFilters;
-  }
-
-  applyFilters(filters: ItemsFilter<I>[], items: I[]): I[] {
-    if (!filters || !filters.length) return items;
-
-    return filters.reduce((items, filter) => filter(items), items);
-  }
-
   @computed get items() {
-    const { filters, filterCallbacks, props } = this;
-    const filterGroups = groupBy<Filter>(filters, ({ type }) => type);
+    const filterGroups = groupBy<Filter>(this.filters, ({ type }) => type);
 
     const filterItems: ItemsFilter<I>[] = [];
 
     Object.entries(filterGroups).forEach(([type, filtersGroup]) => {
-      const filterCallback = filterCallbacks[type] ?? props.filterCallbacks?.[type];
+      const filterCallback = this.filterCallbacks[type] ?? this.props.filterCallbacks?.[type];
 
       if (filterCallback && filtersGroup.length > 0) {
         filterItems.push(filterCallback);
       }
     });
 
-    const items = this.props.items ?? this.props.store.items;
+    const items = this.props.getItems ? this.props.getItems() : (this.props.items ?? this.props.store.items);
 
-    return this.applyFilters(filterItems.concat(this.props.filterItems), items);
-  }
-
-  @boundMethod
-  getRow(uid: string) {
-    const {
-      isSelectable, renderTableHeader, renderTableContents, renderItemMenu,
-      store, hasDetailsView, onDetails,
-      copyClassNameFromHeadCells, customizeTableRowProps, detailsItem,
-    } = this.props;
-    const { isSelected } = store;
-    const item = this.items.find(item => item.getId() == uid);
-
-    if (!item) return null;
-    const itemId = item.getId();
-
-    return (
-      <TableRow
-        key={itemId}
-        nowrap
-        searchItem={item}
-        sortItem={item}
-        selected={detailsItem && detailsItem.getId() === itemId}
-        onClick={hasDetailsView ? prevDefault(() => onDetails(item)) : undefined}
-        {...customizeTableRowProps(item)}
-      >
-        {isSelectable && (
-          <TableCell
-            checkbox
-            isChecked={isSelected(item)}
-            onClick={prevDefault(() => store.toggleSelection(item))}
-          />
-        )}
-        {
-          renderTableContents(item).map((content, index) => {
-            const cellProps: TableCellProps = isReactNode(content) ? { children: content } : content;
-            const headCell = renderTableHeader?.[index];
-
-            if (copyClassNameFromHeadCells && headCell) {
-              cellProps.className = cssNames(cellProps.className, headCell.className);
-            }
-
-            if (!headCell || this.showColumn(headCell)) {
-              return <TableCell key={index} {...cellProps} />;
-            }
-
-            return null;
-          })
-        }
-        {renderItemMenu && (
-          <TableCell className="menu">
-            <div onClick={stopPropagation}>
-              {renderItemMenu(item, store)}
-            </div>
-          </TableCell>
-        )}
-      </TableRow>
-    );
-  }
-
-  @boundMethod
-  removeItemsDialog() {
-    const { customizeRemoveDialog, store } = this.props;
-    const { selectedItems, removeSelectedItems } = store;
-    const visibleMaxNamesCount = 5;
-    const selectedNames = selectedItems.map(ns => ns.getName()).slice(0, visibleMaxNamesCount).join(", ");
-    const dialogCustomProps = customizeRemoveDialog ? customizeRemoveDialog(selectedItems) : {};
-    const selectedCount = selectedItems.length;
-    const tailCount = selectedCount > visibleMaxNamesCount ? selectedCount - visibleMaxNamesCount : 0;
-    const tail = tailCount > 0 ? <>, and <b>{tailCount}</b> more</> : null;
-    const message = selectedCount <= 1 ? <p>Remove item <b>{selectedNames}</b>?</p> : <p>Remove <b>{selectedCount}</b> items <b>{selectedNames}</b>{tail}?</p>;
-
-    ConfirmDialog.open({
-      ok: removeSelectedItems,
-      labelOk: "Remove",
-      message,
-      ...dialogCustomProps,
-    });
-  }
-
-  @boundMethod
-  toggleFilters() {
-    this.showFilters = !this.showFilters;
-  }
-
-  renderFilters() {
-    const { hideFilters } = this.props;
-    const { isReady, filters } = this;
-
-    if (!isReady || !filters.length || hideFilters || !this.showFilters) {
-      return null;
-    }
-
-    return <PageFiltersList filters={filters} />;
-  }
-
-  renderNoItems() {
-    if (this.failedToLoad) {
-      return <NoItems>{this.props.failedToLoadMessage}</NoItems>;
-    }
-
-    if (!this.isReady) {
-      return <Spinner center />;
-    }
-
-    if (this.filters.length > 0) {
-      return (
-        <NoItems>
-          No items found.
-          <p>
-            <a onClick={() => pageFilters.reset()} className="contrast">
-              Reset filters?
-            </a>
-          </p>
-        </NoItems>
-      );
-    }
-
-    return <NoItems />;
-  }
-
-  renderItems() {
-    if (this.props.virtual) {
-      return null;
-    }
-
-    return this.items.map(item => this.getRow(item.getId()));
-  }
-
-  renderHeaderContent(placeholders: HeaderPlaceholders): ReactNode {
-    const { searchFilters } = this.props;
-    const { title, filters, searchProps, info } = placeholders;
-
-    return (
-      <>
-        {title}
-        {
-          info && (
-            <div className="info-panel box grow">
-              {info}
-            </div>
-          )
-        }
-        {filters}
-        {searchFilters.length > 0 && searchProps && <SearchInputUrl {...searchProps} />}
-      </>
-    );
-  }
-
-  renderInfo() {
-    const { items, filters } = this;
-    const allItemsCount = this.props.store.getTotalCount();
-    const itemsCount = items.length;
-
-    if (filters.length > 0) {
-      return (
-        <><a onClick={this.toggleFilters}>Filtered</a>: {itemsCount} / {allItemsCount}</>
-      );
-    }
-
-    return allItemsCount === 1 ? `${allItemsCount} item` : `${allItemsCount} items`;
-  }
-
-  renderHeader() {
-    const { showHeader, customizeHeader, renderHeaderTitle, headerClassName } = this.props;
-
-    if (!showHeader) {
-      return null;
-    }
-
-    const title = typeof renderHeaderTitle === "function" ? renderHeaderTitle(this) : renderHeaderTitle;
-    const customizeHeaders = [customizeHeader].flat().filter(Boolean);
-    const initialPlaceholders: HeaderPlaceholders = {
-      title: <h5 className="title">{title}</h5>,
-      info: this.renderInfo(),
-      searchProps: {},
-    };
-    const headerPlaceholders = customizeHeaders.reduce((prevPlaceholders, customizer) => customizer(prevPlaceholders), initialPlaceholders);
-    const header = this.renderHeaderContent(headerPlaceholders);
-
-    return (
-      <div className={cssNames("header flex gaps align-center", headerClassName)}>
-        {header}
-      </div>
-    );
-  }
-
-  renderTableHeader() {
-    const { customizeTableRowProps, renderTableHeader, isSelectable, isConfigurable, store } = this.props;
-
-    if (!renderTableHeader) {
-      return null;
-    }
-
-    const enabledItems = this.items.filter(item => !customizeTableRowProps(item).disabled);
-
-    return (
-      <TableHead showTopLine nowrap>
-        {isSelectable && (
-          <TableCell
-            checkbox
-            isChecked={store.isSelectedAll(enabledItems)}
-            onClick={prevDefault(() => store.toggleSelectionAll(enabledItems))}
-          />
-        )}
-        {renderTableHeader.map((cellProps, index) => (
-          this.showColumn(cellProps) && (
-            <TableCell key={cellProps.id ?? index} {...cellProps} />
-          )
-        ))}
-        <TableCell className="menu">
-          {isConfigurable && this.renderColumnVisibilityMenu()}
-        </TableCell>
-      </TableHead>
-    );
-  }
-
-  renderList() {
-    const {
-      store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks,
-      detailsItem, className, tableProps = {}, tableId,
-    } = this.props;
-    const { removeItemsDialog, items } = this;
-    const { selectedItems } = store;
-    const selectedItemId = detailsItem && detailsItem.getId();
-    const classNames = cssNames(className, "box", "grow", ThemeStore.getInstance().activeTheme.type);
-
-    return (
-      <div className="items box grow flex column">
-        <Table
-          tableId={tableId}
-          virtual={virtual}
-          selectable={hasDetailsView}
-          sortable={sortingCallbacks}
-          getTableRow={this.getRow}
-          items={items}
-          selectedItemId={selectedItemId}
-          noItems={this.renderNoItems()}
-          className={classNames}
-          {...tableProps}
-        >
-          {this.renderTableHeader()}
-          {this.renderItems()}
-        </Table>
-        <AddRemoveButtons
-          onRemove={selectedItems.length ? removeItemsDialog : null}
-          removeTooltip={`Remove selected items (${selectedItems.length})`}
-          {...addRemoveButtons}
-        />
-      </div>
-    );
-  }
-
-  showColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
-    const { tableId, isConfigurable } = this.props;
-
-    return !isConfigurable || !UserStore.getInstance().isTableColumnHidden(tableId, columnId, showWithColumn);
-  }
-
-  renderColumnVisibilityMenu() {
-    const { renderTableHeader, tableId } = this.props;
-
-    return (
-      <MenuActions className="ItemListLayoutVisibilityMenu" toolbar={false} autoCloseOnSelect={false}>
-        {renderTableHeader.map((cellProps, index) => (
-          !cellProps.showWithColumn && (
-            <MenuItem key={index} className="input">
-              <Checkbox
-                label={cellProps.title ?? `<${cellProps.className}>`}
-                value={this.showColumn(cellProps)}
-                onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id)}
-              />
-            </MenuItem>
-          )
-        ))}
-      </MenuActions>
-    );
-  }
-
-  renderFooter() {
-    return this.props.renderFooter?.(this);
+    return applyFilters(filterItems.concat(this.props.filterItems), items);
   }
 
   render() {
-    const { className } = this.props;
+    return untracked(() => (
+      <div
+        className={cssNames("ItemListLayout flex column", this.props.className)}
+      >
+        <ItemListLayoutHeader
+          getItems={() => this.items}
+          getFilters={() => this.filters}
+          toggleFilters={this.toggleFilters}
+          store={this.props.store}
+          searchFilters={this.props.searchFilters}
+          showHeader={this.props.showHeader}
+          headerClassName={this.props.headerClassName}
+          renderHeaderTitle={this.props.renderHeaderTitle}
+          customizeHeader={this.props.customizeHeader}
+        />
 
-    return (
-      <div className={cssNames("ItemListLayout flex column", className)}>
-        {this.renderHeader()}
-        {this.renderFilters()}
-        {this.renderList()}
-        {this.renderFooter()}
+        <ItemListLayoutFilters
+          getIsReady={() => this.isReady}
+          getFilters={() => this.filters}
+          getFiltersAreShown={() => this.showFilters}
+          hideFilters={this.props.hideFilters}
+        />
+
+        <ItemListLayoutContent
+          getItems={() => this.items}
+          getFilters={() => this.filters}
+          tableId={this.props.tableId}
+          className={this.props.className}
+          store={this.props.store}
+          getIsReady={() => this.isReady}
+          isSelectable={this.props.isSelectable}
+          isConfigurable={this.props.isConfigurable}
+          copyClassNameFromHeadCells={this.props.copyClassNameFromHeadCells}
+          sortingCallbacks={this.props.sortingCallbacks}
+          tableProps={this.props.tableProps}
+          renderTableHeader={this.props.renderTableHeader}
+          renderTableContents={this.props.renderTableContents}
+          renderItemMenu={this.props.renderItemMenu}
+          customizeTableRowProps={this.props.customizeTableRowProps}
+          addRemoveButtons={this.props.addRemoveButtons}
+          virtual={this.props.virtual}
+          hasDetailsView={this.props.hasDetailsView}
+          detailsItem={this.props.detailsItem}
+          onDetails={this.props.onDetails}
+          customizeRemoveDialog={this.props.customizeRemoveDialog}
+          failedToLoadMessage={this.props.failedToLoadMessage}
+        />
+
+        {this.props.renderFooter && this.props.renderFooter(this)}
       </div>
-    );
+    ));
   }
 }
 
@@ -547,3 +312,12 @@ export function ItemListLayout<I extends ItemObject>(
 
   return <InjectedItemListLayout {...props} />;
 }
+
+const applyFilters = <I extends ItemObject>(
+  filters: ItemsFilter<I>[],
+  items: I[],
+): I[] => {
+  if (!filters || !filters.length) return items;
+
+  return filters.reduce((items, filter) => filter(items), items);
+};

src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx

@@ -99,7 +99,7 @@ class NonInjectedKubeObjectListLayout<K extends KubeObject> extends React.Compon
   }
 
   render() {
-    const { className, customizeHeader, store, items = store.contextItems, ...layoutProps } = this.props;
+    const { className, customizeHeader, store, items, ...layoutProps } = this.props;
     const placeholderString = ResourceNames[ResourceKindMap[store.api.kind]] || store.api.kind;
 
     return (
@@ -107,7 +107,7 @@ class NonInjectedKubeObjectListLayout<K extends KubeObject> extends React.Compon
         {...layoutProps}
         className={cssNames("KubeObjectListLayout", className)}
         store={store}
-        items={items}
+        getItems={() => this.props.items || store.contextItems}
         preloadStores={false} // loading handled in kubeWatchApi.subscribeStores()
         detailsItem={this.selectedItem}
         customizeHeader={[