From 8ae993d8eae7b309886547a74900d96ed74093cd Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 25 Aug 2022 10:51:23 +0300
Subject: [PATCH] Fix compile errors

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+extensions/installed-extensions.tsx      | 128 +++++++++---------
 .../components/+workloads-pods/pods.tsx       |   7 +-
 2 files changed, 65 insertions(+), 70 deletions(-)

diff --git a/src/renderer/components/+extensions/installed-extensions.tsx b/src/renderer/components/+extensions/installed-extensions.tsx
index a7fe14f35c..e3dab8f3e4 100644
--- a/src/renderer/components/+extensions/installed-extensions.tsx
+++ b/src/renderer/components/+extensions/installed-extensions.tsx
@@ -10,12 +10,11 @@ import type {
   InstalledExtension,
 } from "../../../extensions/extension-discovery/extension-discovery";
 import { Icon } from "../icon";
-import { List } from "../list/list";
 import { MenuActions, MenuItem } from "../menu";
 import { Spinner } from "../spinner";
 import { cssNames } from "../../utils";
 import { observer } from "mobx-react";
-import type { Row } from "react-table";
+import { ColumnDef, useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";
 import type { LensExtensionId } from "../../../extensions/lens-extension";
 import extensionDiscoveryInjectable
   from "../../../extensions/extension-discovery/extension-discovery.injectable";
@@ -24,6 +23,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import extensionInstallationStateStoreInjectable
   from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
+import { Table } from "../table/react-table";
 
 export interface InstalledExtensionsProps {
   extensions: InstalledExtension[];
@@ -46,62 +46,58 @@ function getStatus(extension: InstalledExtension) {
 }
 
 const NonInjectedInstalledExtensions = observer(({ extensionDiscovery, extensionInstallationStateStore, extensions, uninstall, enable, disable }: Dependencies & InstalledExtensionsProps) => {
-  const columns = useMemo(
-    () => [
-      {
-        Header: "Name",
-        accessor: "extension",
-        width: 200,
-        sortType: (rowA: Row, rowB: Row) => { // Custom sorting for extension name
-          const nameA = extensions[rowA.index].manifest.name;
-          const nameB = extensions[rowB.index].manifest.name;
+  const cols = useMemo<ColumnDef<InstalledExtension>[]>(() => ([
+    {
+      id: "name",
+      header: "Name",
+      size: 200,
+      sortingFn: (a, b) => { // Custom sorting for extension name
+        const nameA = extensions[a.index].manifest.name;
+        const nameB = extensions[b.index].manifest.name;
 
-          if (nameA > nameB) return -1;
-          if (nameB > nameA) return 1;
+        if (nameA > nameB) return -1;
+        if (nameB > nameA) return 1;
 
-          return 0;
-        },
+        return 0;
       },
-      {
-        Header: "Version",
-        accessor: "version",
-      },
-      {
-        Header: "Status",
-        accessor: "status",
-      },
-      {
-        Header: "",
-        accessor: "actions",
-        disableSortBy: true,
-        width: 20,
-        className: "actions",
-      },
-    ], [],
-  );
-
-  const data = useMemo(
-    () => extensions.map(extension => {
-      const { id, isEnabled, isCompatible, manifest } = extension;
-      const { name, description, version } = manifest;
-      const isUninstalling = extensionInstallationStateStore.isExtensionUninstalling(id);
-
-      return {
-        extension: (
-          <div className={"flex items-start"}>
-            <div>
-              <div className={styles.extensionName}>{name}</div>
-              <div className={styles.extensionDescription}>{description}</div>
-            </div>
+      cell: (cell) => (
+        <div className={"flex items-start"}>
+          <div>
+            <div className={styles.extensionName}>{cell.row.original.manifest.name}</div>
+            <div className={styles.extensionDescription}></div>
           </div>
-        ),
-        version,
-        status: (
+        </div>
+      )
+    },
+    {
+      id: "version",
+      header: "Version",
+      cell: (cell) => cell.row.original.manifest.version
+    },
+    {
+      id: "status",
+      header: "Status",
+      accessorFn: (row) => row,
+      cell: (cell) => {
+        const extension = cell.row.original;
+        const { isEnabled, isCompatible } = extension;
+        
+        return (
           <div className={cssNames({ [styles.enabled]: isEnabled, [styles.invalid]: !isCompatible })}>
             {getStatus(extension)}
           </div>
-        ),
-        actions: (
+        )
+      }
+    },
+    {
+      id: "actions",
+      enableSorting: false,
+      size: 30,
+      cell: (cell) => {
+        const extension = cell.row.original;
+        const { id, isEnabled, isCompatible } = extension;
+        const isUninstalling = extensionInstallationStateStore.isExtensionUninstalling(id);
+        return (
           <MenuActions
             id={`menu-actions-for-installed-extensions-for-${id}`}
             usePortal
@@ -136,10 +132,17 @@ const NonInjectedInstalledExtensions = observer(({ extensionDiscovery, extension
               <span className="title" aria-disabled={isUninstalling}>Uninstall</span>
             </MenuItem>
           </MenuActions>
-        ),
-      };
-    }), [extensions, extensionInstallationStateStore.anyUninstalling],
-  );
+        )
+      }
+    }
+  ]), []);
+
+  const table = useReactTable({
+    data: extensions,
+    columns: cols,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
 
   if (!extensionDiscovery.isLoaded) {
     return <div><Spinner center /></div>;
@@ -159,17 +162,10 @@ const NonInjectedInstalledExtensions = observer(({ extensionDiscovery, extension
 
   return (
     <section data-testid="extensions-table">
-      <List
-        title={<h2 className={styles.title}>Installed extensions</h2>}
-        columns={columns}
-        data={data}
-        items={extensions}
-        filters={[
-          (extension) => extension.manifest.name,
-          (extension) => getStatus(extension),
-          (extension) => extension.manifest.version,
-        ]}
-      />
+      <div>
+        <h2 className={styles.title}>Installed extensions</h2> 
+      </div>
+      <Table table={table} />
     </section>
   );
 });
diff --git a/src/renderer/components/+workloads-pods/pods.tsx b/src/renderer/components/+workloads-pods/pods.tsx
index f7c3dfb785..845852d281 100644
--- a/src/renderer/components/+workloads-pods/pods.tsx
+++ b/src/renderer/components/+workloads-pods/pods.tsx
@@ -11,7 +11,7 @@ import { Link } from "react-router-dom";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
 import { StatusBrick } from "../status-brick";
-import { cssNames, Disposer, getConvertedParts, object, stopPropagation } from "../../utils";
+import { cssNames, getConvertedParts, object, stopPropagation } from "../../utils";
 import startCase from "lodash/startCase";
 import kebabCase from "lodash/kebabCase";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
@@ -29,9 +29,8 @@ import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.inject
 import eventStoreInjectable from "../+events/store.injectable";
 import podStoreInjectable from "./store.injectable";
 import { List } from "../list/list";
-import { ColumnDef, createColumnHelper, getCoreRowModel } from '@tanstack/react-table'
-import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
-import type { SubscribableStore, SubscribeStores } from "../../kube-watch-api/kube-watch-api";
+import { createColumnHelper, getCoreRowModel } from '@tanstack/react-table'
+import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
 import subscribeToStoresDisposersInjectable from "../../kube-watch-api/subscribe-to-stores-disposers.injectable";
 import { KubeObjectMenu } from "../kube-object-menu";
 import toggleKubeDetailsPaneInjectable, { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details.injectable";