Fix bugs in ItemListLayouts/KubeObjectListLayouts (#4792)

* Fix virtual list behaviour in item list layout by making table rows observer

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

* Make selecting item in ItemListLayout not scroll to top

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

* Fix scrolling to top when selecting all items in item list layout

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

* Fix refreshing release values when release is unselected

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

* Remove noisy debugging

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

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

* Fix sorting of table rows

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

* Replace avoidable asyncComputed with normal computed

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

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

* Revert unnecessary code style changes

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

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

* Fix render-storm in Events

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

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

* Fix missing key in React array

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

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

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

@@ -7,7 +7,7 @@ import "./item-list-layout.scss";
 
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
-import { observer } from "mobx-react";
+import { Observer, 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";
@@ -70,58 +70,68 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
 
   @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];
+      <div key={uid}>
+        <Observer>
+          {() => {
+            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 (copyClassNameFromHeadCells && headCell) {
-              cellProps.className = cssNames(cellProps.className, headCell.className);
-            }
+            if (!item) return null;
+            const itemId = item.getId();
 
-            if (!headCell || this.showColumn(headCell)) {
-              return <TableCell key={index} {...cellProps} />;
-            }
+            return (
+              <TableRow
+                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];
 
-            return null;
-          })
-        }
-        {renderItemMenu && (
-          <TableCell className="menu">
-            <div onClick={stopPropagation}>
-              {renderItemMenu(item, store)}
-            </div>
-          </TableCell>
-        )}
-      </TableRow>
+                  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>
+            );
+          }}
+        </Observer>
+      </div>
     );
   }
 
@@ -190,11 +200,15 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
     return (
       <TableHead showTopLine nowrap>
         {isSelectable && (
-          <TableCell
-            checkbox
-            isChecked={store.isSelectedAll(enabledItems)}
-            onClick={prevDefault(() => store.toggleSelectionAll(enabledItems))}
-          />
+          <Observer>
+            {() => (
+              <TableCell
+                checkbox
+                isChecked={store.isSelectedAll(enabledItems)}
+                onClick={prevDefault(() => store.toggleSelectionAll(enabledItems))}
+              />
+            )}
+          </Observer>
         )}
         {renderTableHeader.map((cellProps, index) => (
           this.showColumn(cellProps) && (
@@ -213,7 +227,6 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
       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);
 
@@ -234,11 +247,18 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
           {this.renderTableHeader()}
           {this.renderItems()}
         </Table>
-        <AddRemoveButtons
-          onRemove={selectedItems.length ? this.removeItemsDialog : null}
-          removeTooltip={`Remove selected items (${selectedItems.length})`}
-          {...addRemoveButtons}
-        />
+
+        <Observer>
+          {() => (
+            <AddRemoveButtons
+              onRemove={
+                store.selectedItems.length ? this.removeItemsDialog : null
+              }
+              removeTooltip={`Remove selected items (${store.selectedItems.length})`}
+              {...addRemoveButtons}
+            />
+          )}
+        </Observer>
       </div>
     );
   }