Removing table context. Pass columns through the props

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -18,7 +18,7 @@ import type { AddRemoveButtonsProps } from "../add-remove-buttons";
 import { AddRemoveButtons } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
-import type { ItemObject, TableCellProps } from "@k8slens/list-layout";
+import type { GeneralKubeObjectListLayoutColumn, ItemObject, TableCellProps } from "@k8slens/list-layout";
 import type { Filter, PageFiltersStore } from "./page-filters/store";
 import type { LensTheme } from "../../themes/lens-theme";
 import { MenuActions } from "../menu/menu-actions";
@@ -35,8 +35,8 @@ import type { ToggleTableColumnVisibility } from "../../../features/user-prefere
 import toggleTableColumnVisibilityInjectable from "../../../features/user-preferences/common/toggle-table-column-visibility.injectable";
 import type { IsTableColumnHidden } from "../../../features/user-preferences/common/is-table-column-hidden.injectable";
 import isTableColumnHiddenInjectable from "../../../features/user-preferences/common/is-table-column-hidden.injectable";
-import type { TableComponent, TableDataContextValue } from "@k8slens/table-tokens";
-import { TableDataContext, tableComponentInjectionToken } from "@k8slens/table-tokens";
+import type { TableComponent } from "@k8slens/table-tokens";
+import { tableComponentInjectionToken } from "@k8slens/table-tokens";
 
 export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStores extends boolean> {
   getFilters: () => Filter[];
@@ -56,6 +56,7 @@ export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStor
   customizeTableRowProps?: (item: Item) => Partial<TableRowProps<Item>>;
   addRemoveButtons?: Partial<AddRemoveButtonsProps>;
   virtual?: boolean;
+  columns?: GeneralKubeObjectListLayoutColumn[];
 
   // item details view
   hasDetailsView?: boolean;
@@ -89,9 +90,6 @@ class NonInjectedItemListLayoutContent<
   Item extends ItemObject,
   PreLoadStores extends boolean,
 > extends React.Component<ItemListLayoutContentProps<Item, PreLoadStores> & Dependencies> {
-  static contextType = TableDataContext;
-  declare context: TableDataContextValue;
-
   constructor(props: ItemListLayoutContentProps<Item, PreLoadStores> & Dependencies) {
     super(props);
     makeObservable(this);
@@ -316,7 +314,7 @@ class NonInjectedItemListLayoutContent<
       <div className="items box grow flex column">
         <table.Component
           tableId={tableId}
-          columns={this.context.columns}
+          columns={this.props.columns}
           virtual={virtual}
           selectable={hasDetailsView}
           sortable={sortingCallbacks}

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

@@ -31,6 +31,9 @@ import selectedFilterNamespacesInjectable from "../../../common/k8s-api/selected
 import pageFiltersStoreInjectable from "./page-filters/store.injectable";
 import type { StorageLayer } from "../../utils/storage-helper";
 import autoBindReact from "auto-bind/react";
+import type {
+  GeneralKubeObjectListLayoutColumn
+} from "@k8slens/list-layout";
 
 export type SearchFilter<I extends ItemObject> = (item: I) => SingleOrMany<string | number | undefined | null>;
 export type SearchFilters<I extends ItemObject> = Record<string, SearchFilter<I>>;
@@ -98,6 +101,7 @@ export type ItemListLayoutProps<Item extends ItemObject, PreLoadStores extends b
   headerClassName?: IClassName;
   renderHeaderTitle?: RenderHeaderTitle<Item, PreLoadStores>;
   customizeHeader?: HeaderCustomizer | HeaderCustomizer[];
+  columns?: GeneralKubeObjectListLayoutColumn[];
 
   // items list configuration
   isReady?: boolean; // show loading indicator while not ready
@@ -304,6 +308,7 @@ class NonInjectedItemListLayout<I extends ItemObject, PreLoadStores extends bool
         />
 
         <ItemListLayoutContent<I, PreLoadStores>
+          columns={this.props.columns}
           getItems={() => this.items}
           getFilters={() => this.filters}
           tableId={this.props.tableId}

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

@@ -31,7 +31,6 @@ import type { ClusterContext } from "../../cluster-frame-context/cluster-frame-c
 import type { GeneralKubeObjectListLayoutColumn, SpecificKubeListLayoutColumn } from "@k8slens/list-layout";
 import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout";
 import { sortBy } from "lodash";
-import { TableDataContext } from "@k8slens/table-tokens";
 
 export type KubeItemListStore<K extends KubeObject> = ItemListStore<K, false> & SubscribableStore & {
   getByPath: (path: string) => K | undefined;
@@ -43,7 +42,7 @@ export interface KubeObjectListLayoutProps<
   // eslint-disable-next-line unused-imports/no-unused-vars-ts, @typescript-eslint/no-unused-vars
   A extends KubeApi<K, D>,
   D extends KubeJsonApiDataFor<K>,
-> extends Omit<ItemListLayoutProps<K, false>, "getItems" | "dependentStores" | "preloadStores"> {
+> extends Omit<ItemListLayoutProps<K, false>, "getItems" | "dependentStores" | "preloadStores" | "columns"> {
   items?: K[];
   getItems?: () => K[];
   store: KubeItemListStore<K>;
@@ -187,13 +186,14 @@ class NonInjectedKubeObjectListLayout<
       ...targetColumns,
     ], (v) => -v.priority).map((col) => col.header);
 
-    const itemsListLayout = (
+    return (
       <ItemListLayout<K, false>
         className={cssNames("KubeObjectListLayout", className)}
         store={store}
         getItems={() => this.props.items || store.contextItems}
         preloadStores={false} // loading handled in kubeWatchApi.subscribeStores()
         detailsItem={this.selectedItem}
+        columns={targetColumns as GeneralKubeObjectListLayoutColumn[]}
         customizeHeader={[
           ({ filters, searchProps, info, ...headerPlaceHolders }) => ({
             filters: (
@@ -234,15 +234,6 @@ class NonInjectedKubeObjectListLayout<
         {...layoutProps}
       />
     );
-
-    return (
-      <TableDataContext.Provider
-        value={{
-          columns: targetColumns as GeneralKubeObjectListLayoutColumn[],
-        }}>
-        {itemsListLayout}
-      </TableDataContext.Provider>
-    );
   }
 }
 

packages/table/index.ts

@@ -5,7 +5,6 @@ import type {
   GeneralKubeObjectListLayoutColumn,
   SpecificKubeListLayoutColumn,
 } from "@k8slens/list-layout";
-import React from "react";
 
 type Column = (
   | BaseKubeObjectListLayoutColumn<KubeObject>
@@ -20,14 +19,6 @@ export interface TableComponentProps {
   load?: (tableId: string) => object;
 }
 
-export interface TableDataContextValue {
-  columns?: Column[];
-}
-
-export const TableDataContext = React.createContext<TableDataContextValue>({
-  columns: [],
-});
-
 export interface TableComponent {
   Component: React.ComponentType<TableComponentProps>;
 }

packages/table/package.json

@@ -23,7 +23,6 @@
     "rimraf": "^4.4.1"
   },
   "peerDependencies": {
-    "@ogre-tools/injectable": "^16.1.0",
-    "react": "^17.0.2"
+    "@ogre-tools/injectable": "^16.1.0"
   }
 }