Table component injection tokens

open-lens/src/renderer/index.ts

@@ -9,7 +9,8 @@ import {
   rendererExtensionApi as Renderer,
   commonExtensionApi as Common,
   registerLensCore,
-  metricsFeature
+  metricsFeature,
+  tableFeature,
 } from "@k8slens/core/renderer";
 import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
 import { registerFeature } from "@k8slens/feature-core";
@@ -49,7 +50,8 @@ runInAction(() => {
     keyboardShortcutsFeature,
     reactApplicationFeature,
     routingFeature,
-    metricsFeature
+    metricsFeature,
+    tableFeature,
   );
 
   autoRegister({

packages/core/package.json

@@ -308,6 +308,7 @@
     "@k8slens/routing": "^1.0.0-alpha.5",
     "@k8slens/run-many": "^1.0.0-alpha.1",
     "@k8slens/startable-stoppable": "^1.0.0-alpha.1",
+    "@k8slens/table-tokens": "^6.5.0-alpha.7",
     "@k8slens/test-utils": "^1.0.0-alpha.3",
     "@k8slens/tooltip": "^1.0.0-alpha.5",
     "@k8slens/utilities": "^1.0.0-alpha.1",

packages/core/src/features/table/table-component.injectable.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { tableComponentInjectionToken } from "@k8slens/table-tokens";
+import { getInjectable } from "@ogre-tools/injectable";
+import { Table } from "../../renderer/components/table/table";
+
+const tableComponentInjectable = getInjectable({
+  id: "table-component",
+  instantiate: () => ({ Component: Table }),
+  injectionToken: tableComponentInjectionToken,
+});
+
+export default tableComponentInjectable;

packages/core/src/features/table/table-feature.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getFeature } from "@k8slens/feature-core";
+import tableComponentInjectable from "./table-component.injectable";
+
+export const tableFeature = getFeature({
+  id: "core-table-feature",
+
+  register: (di) => {
+    di.register(tableComponentInjectable);
+  },
+});

packages/core/src/renderer/components/config-pod-disruption-budgets/__tests__/pod-distruption-budgets.test.tsx

@@ -18,6 +18,9 @@ import { Cluster } from "../../../../common/cluster/cluster";
 import hostedClusterInjectable from "../../../cluster-frame-context/hosted-cluster.injectable";
 import userPreferencesStateInjectable from "../../../../features/user-preferences/common/state.injectable";
 import type { DiContainer } from "@ogre-tools/injectable";
+import { registerFeature } from "@k8slens/feature-core";
+import { runInAction } from "mobx";
+import { tableFeature } from "../../../library";
 
 describe("<PodDisruptionBudgets />", () => {
   let di: DiContainer;
@@ -69,6 +72,10 @@ describe("<PodDisruptionBudgets />", () => {
         }),
       } as any,
     }));
+
+    runInAction(() => {
+      registerFeature(di, tableFeature);
+    });
   });
 
   describe("PDB with minAvailable 0", () => {

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

@@ -11,7 +11,7 @@ import { computed, makeObservable } from "mobx";
 import { Observer, observer } from "mobx-react";
 import type { ConfirmDialogParams } from "../confirm-dialog";
 import type { TableProps, TableRowProps, TableSortCallbacks } from "../table";
-import { Table, TableCell, TableHead, TableRow } from "../table";
+import { TableCell, TableHead, TableRow } from "../table";
 import type { IClassName, StrictReactNode } from "@k8slens/utilities";
 import { cssNames, isDefined, isReactNode, noop, prevDefault, stopPropagation } from "@k8slens/utilities";
 import type { AddRemoveButtonsProps } from "../add-remove-buttons";
@@ -35,6 +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";
 
 export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStores extends boolean> {
   getFilters: () => Filter[];
@@ -79,13 +81,17 @@ interface Dependencies {
   openConfirmDialog: OpenConfirmDialog;
   toggleTableColumnVisibility: ToggleTableColumnVisibility;
   isTableColumnHidden: IsTableColumnHidden;
+  table: TableComponent;
 }
 
 @observer
 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);
@@ -299,6 +305,7 @@ class NonInjectedItemListLayoutContent<
     const {
       store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks,
       detailsItem, className, tableProps = {}, tableId, getItems, activeTheme,
+      table,
     } = this.props;
     const selectedItemId = detailsItem && detailsItem.getId();
     const classNames = cssNames(className, "box", "grow", activeTheme.get().type);
@@ -307,8 +314,9 @@ class NonInjectedItemListLayoutContent<
 
     return (
       <div className="items box grow flex column">
-        <Table
+        <table.Component
           tableId={tableId}
+          columns={this.context.columns}
           virtual={virtual}
           selectable={hasDetailsView}
           sortable={sortingCallbacks}
@@ -322,7 +330,7 @@ class NonInjectedItemListLayoutContent<
         >
           {this.renderTableHeader()}
           {this.renderItems()}
-        </Table>
+        </table.Component>
 
         <Observer>
           {() => (
@@ -385,5 +393,6 @@ export const ItemListLayoutContent = withInjectables<Dependencies, ItemListLayou
     openConfirmDialog: di.inject(openConfirmDialogInjectable),
     toggleTableColumnVisibility: di.inject(toggleTableColumnVisibilityInjectable),
     isTableColumnHidden: di.inject(isTableColumnHiddenInjectable),
+    table: di.inject(tableComponentInjectionToken),
   }),
 }) as <Item extends ItemObject, PreLoadStores extends boolean>(props: ItemListLayoutContentProps<Item, PreLoadStores>) => React.ReactElement;

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

@@ -23,6 +23,9 @@ import type { PodStore } from "../workloads-pods/store";
 import { Cluster } from "../../../common/cluster/cluster";
 import isTableColumnHiddenInjectable from "../../../features/user-preferences/common/is-table-column-hidden.injectable";
 import { podListLayoutColumnInjectionToken } from "@k8slens/list-layout";
+import { registerFeature } from "@k8slens/feature-core";
+import { runInAction } from "mobx";
+import { tableFeature } from "../../library";
 
 describe("kube-object-list-layout", () => {
   let di: DiContainer;
@@ -54,6 +57,10 @@ describe("kube-object-list-layout", () => {
       get: () => ({}),
     }));
 
+    runInAction(() => {
+      registerFeature(di, tableFeature);
+    });
+
     podStore = di.inject(podStoreInjectable);
   });
 

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

@@ -31,6 +31,7 @@ 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;
@@ -186,7 +187,7 @@ class NonInjectedKubeObjectListLayout<
       ...targetColumns,
     ], (v) => -v.priority).map((col) => col.header);
 
-    return (
+    const itemsListLayout = (
       <ItemListLayout<K, false>
         className={cssNames("KubeObjectListLayout", className)}
         store={store}
@@ -233,6 +234,15 @@ class NonInjectedKubeObjectListLayout<
         {...layoutProps}
       />
     );
+
+    return (
+      <TableDataContext.Provider
+        value={{
+          columns: targetColumns as GeneralKubeObjectListLayoutColumn[],
+        }}>
+        {itemsListLayout}
+      </TableDataContext.Provider>
+    );
   }
 }
 

packages/core/src/renderer/components/test-utils/get-application-builder.tsx

@@ -72,6 +72,7 @@ import { sendMessageToChannelInjectionToken } from "@k8slens/messaging";
 import { getMessageBridgeFake } from "@k8slens/messaging-fake-bridge";
 import { historyInjectionToken } from "@k8slens/routing";
 import writeJsonSyncInjectable from "../../../common/fs/write-json-sync.injectable";
+import { tableFeature } from "../../library";
 
 type MainDiCallback = (container: { mainDi: DiContainer }) => void | Promise<void>;
 type WindowDiCallback = (container: { windowDi: DiContainer }) => void | Promise<void>;
@@ -256,6 +257,7 @@ export const getApplicationBuilder = () => {
       registerFeature(
         windowDi,
         applicationFeature,
+        tableFeature,
       );
 
       windowDi.register(rendererExtensionsStateInjectable);

packages/core/src/renderer/library.ts

@@ -22,3 +22,4 @@ export * as ReactRouterDom from "react-router-dom";
 export * as rendererExtensionApi from "../extensions/renderer-api";
 export * as commonExtensionApi from "../extensions/common-api";
 export { metricsFeature } from "../features/metrics/metrics-feature";
+export { tableFeature } from "../features/table/table-feature";

packages/logger/src/logger.injectable.ts

@@ -63,7 +63,10 @@ export const logSillyInjectionToken = getInjectionToken<LogFunction>({
 
 const screamingKebabCase = (str: string) => pipeline(str, kebabCase, toUpper);
 
-const getLogFunctionFor = (scenario: keyof Logger, namespace: string | undefined) => {
+const getLogFunctionFor = (
+  scenario: keyof Logger,
+  namespace: string | undefined
+) => {
   const prefix = namespace
     ? `[${screamingKebabCase(namespace.replace(/-feature$/, ""))}]: `
     : "";

packages/logger/src/logger.test.ts

@@ -90,7 +90,6 @@ describe("logger", () => {
         instantiate: (di) => di.inject(injectionToken),
       });
 
-
       const someFeature = getFeature({
         id: "some-feature",
 
@@ -124,11 +123,13 @@ describe("logger", () => {
 
     registerFeature(di, loggerFeature);
 
-    di.register(getInjectable({
-      id: "some-transport",
-      instantiate: () => new TransportStream({ log }),
-      injectionToken: loggerTransportInjectionToken,
-    }))
+    di.register(
+      getInjectable({
+        id: "some-transport",
+        instantiate: () => new TransportStream({ log }),
+        injectionToken: loggerTransportInjectionToken,
+      })
+    );
 
     const logger = di.inject(loggerInjectable);
 

packages/logger/src/transports.ts

@@ -6,6 +6,8 @@
 import { getInjectionToken } from "@ogre-tools/injectable";
 import type TransportStream from "winston-transport";
 
-export const loggerTransportInjectionToken = getInjectionToken<TransportStream>({
-  id: "logger-transport",
-});
+export const loggerTransportInjectionToken = getInjectionToken<TransportStream>(
+  {
+    id: "logger-transport",
+  }
+);

packages/table/README.md

@@ -0,0 +1,3 @@
+# Description
+
+The package exports tokens needed for external table configuration.

packages/table/index.ts

@@ -0,0 +1,37 @@
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { KubeObject } from "@k8slens/kube-object/src/kube-object";
+import type {
+  BaseKubeObjectListLayoutColumn,
+  GeneralKubeObjectListLayoutColumn,
+  SpecificKubeListLayoutColumn,
+} from "@k8slens/list-layout";
+import React from "react";
+
+type Column = (
+  | BaseKubeObjectListLayoutColumn<KubeObject>
+  | SpecificKubeListLayoutColumn<KubeObject>
+  | GeneralKubeObjectListLayoutColumn
+);
+
+export interface TableComponentProps {
+  tableId?: string;
+  columns?: Column[];
+  save?: (state: object) => void;
+  load?: (tableId: string) => object;
+}
+
+export interface TableDataContextValue {
+  columns?: Column[];
+}
+
+export const TableDataContext = React.createContext<TableDataContextValue>({
+  columns: [],
+});
+
+export interface TableComponent {
+  Component: React.ComponentType<TableComponentProps>;
+}
+
+export const tableComponentInjectionToken = getInjectionToken<TableComponent>({
+  id: "table-component-injection-token",
+});

packages/table/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@k8slens/table-tokens",
+  "version": "6.5.0-alpha.7",
+  "description": "Injection token exporter for table components",
+  "license": "MIT",
+  "type": "commonjs",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist/",
+    "build": "lens-webpack-build"
+  },
+  "devDependencies": {
+    "@k8slens/webpack": "^6.5.0-alpha.8",
+    "rimraf": "^4.4.1"
+  },
+  "peerDependencies": {
+    "@ogre-tools/injectable": "^16.1.0",
+    "react": "^17.0.2"
+  }
+}

packages/table/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts"]
+}

packages/table/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForNode;