From 007a0174f0252cee86a533633e4de3fbbfa2838a Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:00:21 +0300 Subject: [PATCH 01/24] Add table and add-remove buttons injection tokens Signed-off-by: Alex Andreev --- packages/table/index.ts | 56 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 packages/table/index.ts diff --git a/packages/table/index.ts b/packages/table/index.ts new file mode 100644 index 0000000000..67a48d618b --- /dev/null +++ b/packages/table/index.ts @@ -0,0 +1,56 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import type { KubeObject } from "@k8slens/kube-object"; +import type { + BaseKubeObjectListLayoutColumn, + GeneralKubeObjectListLayoutColumn, + SpecificKubeListLayoutColumn, +} from "@k8slens/list-layout"; +import { getInjectionToken } from "@ogre-tools/injectable"; +import type { IComputedValue, IObservableValue } from "mobx"; + +type Column = ( + | BaseKubeObjectListLayoutColumn + | SpecificKubeListLayoutColumn + | GeneralKubeObjectListLayoutColumn +); + +export interface TableComponentProps { + tableId?: string; + columns?: Column[]; + save?: (state: object) => void; + load?: (tableId: string) => object; + initialState?: { + dataItems: IComputedValue; + headingColumns: object[]; + customizeRows?: (row: object) => object; + getRowId?: (dataItem: any) => string | number | symbol; + searchBox?: IComputedValue | IObservableValue; + } +} + +export interface TableComponent { + Component: React.ComponentType; +} + +export interface AddRemoveButtonsProps extends React.HTMLAttributes { + onAdd?: () => void; + onRemove?: () => void; + addTooltip?: React.ReactNode; + removeTooltip?: React.ReactNode; +} + +export interface AddOrRemoveButtons { + Component: React.ComponentType; +} + +export const tableComponentInjectionToken = getInjectionToken({ + id: "table-component-injection-token", +}); + +export const addOrRemoveButtonsInjectionToken = getInjectionToken({ + id: "add-or-remove-buttons-injection-token", +}); \ No newline at end of file From 471a51549dabcf8974492462864a770d72baf141 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:02:43 +0300 Subject: [PATCH 02/24] Add table package.json Signed-off-by: Alex Andreev --- packages/table/package.json | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 packages/table/package.json diff --git a/packages/table/package.json b/packages/table/package.json new file mode 100644 index 0000000000..c82a198ce8 --- /dev/null +++ b/packages/table/package.json @@ -0,0 +1,28 @@ +{ + "name": "@k8slens/table", + "version": "6.5.0", + "description": "Injection tokens for table and related 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" + } +} \ No newline at end of file From 6e6e540a3537117707d55e26ee56164f63048d16 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:05:39 +0300 Subject: [PATCH 03/24] Add table package tsconfig and webpack.config Signed-off-by: Alex Andreev --- packages/table/tsconfig.json | 4 ++++ packages/table/webpack.config.js | 1 + 2 files changed, 5 insertions(+) create mode 100644 packages/table/tsconfig.json create mode 100644 packages/table/webpack.config.js diff --git a/packages/table/tsconfig.json b/packages/table/tsconfig.json new file mode 100644 index 0000000000..c440e25379 --- /dev/null +++ b/packages/table/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@k8slens/typescript/config/base.json", + "include": ["**/*.ts"] +} \ No newline at end of file diff --git a/packages/table/webpack.config.js b/packages/table/webpack.config.js new file mode 100644 index 0000000000..c1089b1b44 --- /dev/null +++ b/packages/table/webpack.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/webpack").configForNode; \ No newline at end of file From 547722fcc57facb1aa2428af33c1c02687d486e6 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:06:24 +0300 Subject: [PATCH 04/24] Add simple README Signed-off-by: Alex Andreev --- packages/table/README.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/table/README.md diff --git a/packages/table/README.md b/packages/table/README.md new file mode 100644 index 0000000000..bd25eb4ad7 --- /dev/null +++ b/packages/table/README.md @@ -0,0 +1,3 @@ +# Description + +The package exports tokens needed for table configuration. \ No newline at end of file From a2cd784d405f7c5188f2155935dff76d522c3355 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:24:19 +0300 Subject: [PATCH 05/24] Bump @ogre-tools/injectable version Signed-off-by: Alex Andreev --- packages/table/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/table/package.json b/packages/table/package.json index c82a198ce8..bb8a327735 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -23,6 +23,6 @@ "rimraf": "^4.4.1" }, "peerDependencies": { - "@ogre-tools/injectable": "^16.1.0" + "@ogre-tools/injectable": "^17.1.0" } } \ No newline at end of file From f9978f3b01cf5c56b3c5db230fe75f5dfcb9595c Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:24:42 +0300 Subject: [PATCH 06/24] Use table from injection token Signed-off-by: Alex Andreev --- package-lock.json | 15 +++++++++++++++ .../components/item-object-list/content.tsx | 14 ++++++++++---- .../components/item-object-list/list-layout.tsx | 3 ++- .../kube-object-list-layout.tsx | 3 ++- 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 237ae036d6..3ad409bb83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3854,6 +3854,10 @@ "resolved": "packages/utility-features/startable-stoppable", "link": true }, + "node_modules/@k8slens/table": { + "resolved": "packages/table", + "link": true + }, "node_modules/@k8slens/test-utils": { "resolved": "packages/utility-features/test-utils", "link": true @@ -35355,6 +35359,17 @@ "rimraf": "^4.4.1" } }, + "packages/table": { + "version": "6.5.0", + "license": "MIT", + "devDependencies": { + "@k8slens/webpack": "^6.5.0-alpha.8", + "rimraf": "^4.4.1" + }, + "peerDependencies": { + "@ogre-tools/injectable": "^17.1.0" + } + }, "packages/technical-features/application/agnostic": { "name": "@k8slens/application", "version": "6.5.0", diff --git a/packages/core/src/renderer/components/item-object-list/content.tsx b/packages/core/src/renderer/components/item-object-list/content.tsx index de19c1c058..5f7fce51c1 100644 --- a/packages/core/src/renderer/components/item-object-list/content.tsx +++ b/packages/core/src/renderer/components/item-object-list/content.tsx @@ -11,14 +11,14 @@ 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"; 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,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 } from "@k8slens/table"; +import { tableComponentInjectionToken } from "@k8slens/table"; export interface ItemListLayoutContentProps { getFilters: () => Filter[]; @@ -54,6 +56,7 @@ export interface ItemListLayoutContentProps Partial>; addRemoveButtons?: Partial; virtual?: boolean; + columns?: GeneralKubeObjectListLayoutColumn[]; // item details view hasDetailsView?: boolean; @@ -79,6 +82,7 @@ interface Dependencies { openConfirmDialog: OpenConfirmDialog; toggleTableColumnVisibility: ToggleTableColumnVisibility; isTableColumnHidden: IsTableColumnHidden; + table: TableComponent; } @observer @@ -299,6 +303,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,7 +312,7 @@ class NonInjectedItemListLayoutContent< return (
- {this.renderTableHeader()} {this.renderItems()} -
+ {() => ( @@ -385,5 +390,6 @@ export const ItemListLayoutContent = withInjectables(props: ItemListLayoutContentProps) => React.ReactElement; diff --git a/packages/core/src/renderer/components/item-object-list/list-layout.tsx b/packages/core/src/renderer/components/item-object-list/list-layout.tsx index 32f46e7a2a..2bbf95e45c 100644 --- a/packages/core/src/renderer/components/item-object-list/list-layout.tsx +++ b/packages/core/src/renderer/components/item-object-list/list-layout.tsx @@ -13,7 +13,7 @@ import type { TableProps, TableRowProps, TableSortCallbacks } from "../table"; import type { IClassName, StrictReactNode, SingleOrMany } from "@k8slens/utilities"; import { cssNames, noop } from "@k8slens/utilities"; import type { AddRemoveButtonsProps } from "../add-remove-buttons"; -import type { ItemObject, TableCellProps } from "@k8slens/list-layout"; +import type { ItemObject, TableCellProps, GeneralKubeObjectListLayoutColumn } from "@k8slens/list-layout"; import type { SearchInputUrlProps } from "../input"; import type { PageFiltersStore } from "./page-filters/store"; import { FilterType } from "./page-filters/store"; @@ -98,6 +98,7 @@ export type ItemListLayoutProps; customizeHeader?: HeaderCustomizer | HeaderCustomizer[]; + columns?: GeneralKubeObjectListLayoutColumn[]; // items list configuration isReady?: boolean; // show loading indicator while not ready diff --git a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx index 9280d55ac8..2bbadc144e 100644 --- a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx +++ b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx @@ -42,7 +42,7 @@ export interface KubeObjectListLayoutProps< // eslint-disable-next-line unused-imports/no-unused-vars-ts, @typescript-eslint/no-unused-vars A extends KubeApi, D extends KubeJsonApiDataFor, -> extends Omit, "getItems" | "dependentStores" | "preloadStores"> { +> extends Omit, "getItems" | "dependentStores" | "preloadStores" | "columns"> { items?: K[]; getItems?: () => K[]; store: KubeItemListStore; @@ -193,6 +193,7 @@ class NonInjectedKubeObjectListLayout< 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: ( From c48b88eed0a052a501d279795767184fb5a4a9ac Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:30:58 +0300 Subject: [PATCH 07/24] Using AddOrRemoveButtons component from injection token Signed-off-by: Alex Andreev --- .../renderer/components/item-object-list/content.tsx | 10 +++++----- packages/table/index.ts | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/renderer/components/item-object-list/content.tsx b/packages/core/src/renderer/components/item-object-list/content.tsx index 5f7fce51c1..601e9cf442 100644 --- a/packages/core/src/renderer/components/item-object-list/content.tsx +++ b/packages/core/src/renderer/components/item-object-list/content.tsx @@ -14,8 +14,6 @@ import type { TableProps, TableRowProps, TableSortCallbacks } 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"; -import { AddRemoveButtons } from "../add-remove-buttons"; import { NoItems } from "../no-items"; import { Spinner } from "../spinner"; import type { GeneralKubeObjectListLayoutColumn, ItemObject, TableCellProps } from "@k8slens/list-layout"; @@ -35,7 +33,7 @@ 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 } from "@k8slens/table"; +import { AddOrRemoveButtons, AddRemoveButtonsProps, TableComponent, addOrRemoveButtonsInjectionToken } from "@k8slens/table"; import { tableComponentInjectionToken } from "@k8slens/table"; export interface ItemListLayoutContentProps { @@ -83,6 +81,7 @@ interface Dependencies { toggleTableColumnVisibility: ToggleTableColumnVisibility; isTableColumnHidden: IsTableColumnHidden; table: TableComponent; + addOrRemoveButtons: AddOrRemoveButtons; } @observer @@ -303,7 +302,7 @@ class NonInjectedItemListLayoutContent< const { store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem, className, tableProps = {}, tableId, getItems, activeTheme, - table, + table, addOrRemoveButtons } = this.props; const selectedItemId = detailsItem && detailsItem.getId(); const classNames = cssNames(className, "box", "grow", activeTheme.get().type); @@ -331,7 +330,7 @@ class NonInjectedItemListLayoutContent< {() => ( - 0 ? () => this.removeItemsDialog(selectedItems) @@ -391,5 +390,6 @@ export const ItemListLayoutContent = withInjectables(props: ItemListLayoutContentProps) => React.ReactElement; diff --git a/packages/table/index.ts b/packages/table/index.ts index 67a48d618b..099926bd01 100644 --- a/packages/table/index.ts +++ b/packages/table/index.ts @@ -51,6 +51,6 @@ export const tableComponentInjectionToken = getInjectionToken({ id: "table-component-injection-token", }); -export const addOrRemoveButtonsInjectionToken = getInjectionToken({ +export const addOrRemoveButtonsInjectionToken = getInjectionToken({ id: "add-or-remove-buttons-injection-token", }); \ No newline at end of file From 60c439198b2b23705c2d9d38d8e8b93aa36ade81 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 11:57:25 +0300 Subject: [PATCH 08/24] Creating tableComponentInjectable in open-lens Signed-off-by: Alex Andreev --- open-lens/src/renderer/table.injectable.ts | 11 +++++++++++ packages/core/src/renderer/library.ts | 1 + 2 files changed, 12 insertions(+) create mode 100644 open-lens/src/renderer/table.injectable.ts diff --git a/open-lens/src/renderer/table.injectable.ts b/open-lens/src/renderer/table.injectable.ts new file mode 100644 index 0000000000..c07f60ea6d --- /dev/null +++ b/open-lens/src/renderer/table.injectable.ts @@ -0,0 +1,11 @@ +import { tableComponentInjectionToken } from "@k8slens/table"; +import { getInjectable } from "@ogre-tools/injectable"; +import { Table } from "@k8slens/core/renderer"; + +const tableComponentInjectable = getInjectable({ + id: "table-component", + instantiate: () => ({ Component: Table }), + injectionToken: tableComponentInjectionToken, +}); + +export default tableComponentInjectable \ No newline at end of file diff --git a/packages/core/src/renderer/library.ts b/packages/core/src/renderer/library.ts index 8ed023c559..8b20dab6e0 100644 --- a/packages/core/src/renderer/library.ts +++ b/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 * from "./components/table"; \ No newline at end of file From c7f4d1cf9e5dbe7ce391dafc1f4b8734ae89979b Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 13:38:12 +0300 Subject: [PATCH 09/24] Adding addRemoveButtonsInjectable Signed-off-by: Alex Andreev --- .../src/renderer/add-remove-buttons.injectable.ts | 11 +++++++++++ packages/core/src/renderer/library.ts | 3 ++- 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 open-lens/src/renderer/add-remove-buttons.injectable.ts diff --git a/open-lens/src/renderer/add-remove-buttons.injectable.ts b/open-lens/src/renderer/add-remove-buttons.injectable.ts new file mode 100644 index 0000000000..e75843851c --- /dev/null +++ b/open-lens/src/renderer/add-remove-buttons.injectable.ts @@ -0,0 +1,11 @@ +import { getInjectable } from "@ogre-tools/injectable"; +import { AddRemoveButtons } from "@k8slens/core/renderer"; +import { addOrRemoveButtonsInjectionToken } from "@k8slens/table"; + +const addRemoveButtonsInjectable = getInjectable({ + id: "add-remove-buttons-component", + instantiate: () => ({ Component: AddRemoveButtons }), + injectionToken: addOrRemoveButtonsInjectionToken, +}); + +export default addRemoveButtonsInjectable \ No newline at end of file diff --git a/packages/core/src/renderer/library.ts b/packages/core/src/renderer/library.ts index 8b20dab6e0..7652e8e446 100644 --- a/packages/core/src/renderer/library.ts +++ b/packages/core/src/renderer/library.ts @@ -22,4 +22,5 @@ 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 * from "./components/table"; \ No newline at end of file +export * from "./components/table"; +export * from "./components/add-remove-buttons"; \ No newline at end of file From 9aae3ffd33c1408fee60b13acbabe05a745b93ce Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 13:40:01 +0300 Subject: [PATCH 10/24] Adding @k8slens/table as dependencies to core and open-lens Signed-off-by: Alex Andreev --- open-lens/package.json | 1 + packages/core/package.json | 2 ++ 2 files changed, 3 insertions(+) diff --git a/open-lens/package.json b/open-lens/package.json index 54eb19bce8..6255de8f6c 100644 --- a/open-lens/package.json +++ b/open-lens/package.json @@ -212,6 +212,7 @@ "@k8slens/routing": "^1.0.0", "@k8slens/run-many": "^1.0.0", "@k8slens/startable-stoppable": "^1.0.0", + "@k8slens/table": "6.5.0", "@k8slens/tooltip": "^1.0.0", "@k8slens/utilities": "^1.0.0", "@kubernetes/client-node": "^0.18.1", diff --git a/packages/core/package.json b/packages/core/package.json index 988f573300..b07b4c5370 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -51,6 +51,7 @@ "author": "OpenLens Authors ", "scripts": { "build": "cross-env NODE_ENV=production webpack --config webpack/library-bundle.ts --progress && linkable-push", + "dev": "cross-env NODE_ENV=development webpack --config webpack/library-bundle.ts --progress --watch", "clean": "rimraf dist static/build", "test:unit": "jest --testPathIgnorePatterns integration", "test:watch": "func() { jest ${1} --watch --testPathIgnorePatterns integration; }; func", @@ -234,6 +235,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": "6.5.0", "@k8slens/tooltip": "^1.0.0-alpha.5", "@k8slens/utilities": "^1.0.0-alpha.1", "@kubernetes/client-node": "^0.18.1", From 1855b2ab4f4a0ec98eb18cea600585cf771207f7 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 14:05:08 +0300 Subject: [PATCH 11/24] Create injectables in test-env also Signed-off-by: Alex Andreev --- .../src/test-env/add-remove-buttons.injectable.ts | 11 +++++++++++ packages/core/src/test-env/table.injectable.ts | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 packages/core/src/test-env/add-remove-buttons.injectable.ts create mode 100644 packages/core/src/test-env/table.injectable.ts diff --git a/packages/core/src/test-env/add-remove-buttons.injectable.ts b/packages/core/src/test-env/add-remove-buttons.injectable.ts new file mode 100644 index 0000000000..e75843851c --- /dev/null +++ b/packages/core/src/test-env/add-remove-buttons.injectable.ts @@ -0,0 +1,11 @@ +import { getInjectable } from "@ogre-tools/injectable"; +import { AddRemoveButtons } from "@k8slens/core/renderer"; +import { addOrRemoveButtonsInjectionToken } from "@k8slens/table"; + +const addRemoveButtonsInjectable = getInjectable({ + id: "add-remove-buttons-component", + instantiate: () => ({ Component: AddRemoveButtons }), + injectionToken: addOrRemoveButtonsInjectionToken, +}); + +export default addRemoveButtonsInjectable \ No newline at end of file diff --git a/packages/core/src/test-env/table.injectable.ts b/packages/core/src/test-env/table.injectable.ts new file mode 100644 index 0000000000..c07f60ea6d --- /dev/null +++ b/packages/core/src/test-env/table.injectable.ts @@ -0,0 +1,11 @@ +import { tableComponentInjectionToken } from "@k8slens/table"; +import { getInjectable } from "@ogre-tools/injectable"; +import { Table } from "@k8slens/core/renderer"; + +const tableComponentInjectable = getInjectable({ + id: "table-component", + instantiate: () => ({ Component: Table }), + injectionToken: tableComponentInjectionToken, +}); + +export default tableComponentInjectable \ No newline at end of file From 41732254f12c1b9bd8cf66df82fe7c53b3115a97 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 14:05:37 +0300 Subject: [PATCH 12/24] Remove "dev" command Signed-off-by: Alex Andreev --- packages/core/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index b07b4c5370..8245491d07 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -51,7 +51,6 @@ "author": "OpenLens Authors ", "scripts": { "build": "cross-env NODE_ENV=production webpack --config webpack/library-bundle.ts --progress && linkable-push", - "dev": "cross-env NODE_ENV=development webpack --config webpack/library-bundle.ts --progress --watch", "clean": "rimraf dist static/build", "test:unit": "jest --testPathIgnorePatterns integration", "test:watch": "func() { jest ${1} --watch --testPathIgnorePatterns integration; }; func", From 0f4155672c6806ec71e3c1189c74d52ed1235d47 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 1 Jun 2023 14:09:38 +0300 Subject: [PATCH 13/24] Linter fixes Signed-off-by: Alex Andreev --- .../src/renderer/components/item-object-list/content.tsx | 8 ++++---- packages/core/src/renderer/library.ts | 2 +- .../core/src/test-env/add-remove-buttons.injectable.ts | 6 +++++- packages/core/src/test-env/table.injectable.ts | 6 +++++- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/core/src/renderer/components/item-object-list/content.tsx b/packages/core/src/renderer/components/item-object-list/content.tsx index 601e9cf442..0f7c683ec0 100644 --- a/packages/core/src/renderer/components/item-object-list/content.tsx +++ b/packages/core/src/renderer/components/item-object-list/content.tsx @@ -33,8 +33,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 { AddOrRemoveButtons, AddRemoveButtonsProps, TableComponent, addOrRemoveButtonsInjectionToken } from "@k8slens/table"; -import { tableComponentInjectionToken } from "@k8slens/table"; +import type { AddOrRemoveButtons, AddRemoveButtonsProps, TableComponent } from "@k8slens/table"; +import { addOrRemoveButtonsInjectionToken, tableComponentInjectionToken } from "@k8slens/table"; export interface ItemListLayoutContentProps { getFilters: () => Filter[]; @@ -302,7 +302,7 @@ class NonInjectedItemListLayoutContent< const { store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem, className, tableProps = {}, tableId, getItems, activeTheme, - table, addOrRemoveButtons + table, addOrRemoveButtons, } = this.props; const selectedItemId = detailsItem && detailsItem.getId(); const classNames = cssNames(className, "box", "grow", activeTheme.get().type); @@ -326,7 +326,7 @@ class NonInjectedItemListLayoutContent< > {this.renderTableHeader()} {this.renderItems()} - + {() => ( diff --git a/packages/core/src/renderer/library.ts b/packages/core/src/renderer/library.ts index 7652e8e446..ba2c7c2300 100644 --- a/packages/core/src/renderer/library.ts +++ b/packages/core/src/renderer/library.ts @@ -23,4 +23,4 @@ export * as rendererExtensionApi from "../extensions/renderer-api"; export * as commonExtensionApi from "../extensions/common-api"; export { metricsFeature } from "../features/metrics/metrics-feature"; export * from "./components/table"; -export * from "./components/add-remove-buttons"; \ No newline at end of file +export * from "./components/add-remove-buttons"; diff --git a/packages/core/src/test-env/add-remove-buttons.injectable.ts b/packages/core/src/test-env/add-remove-buttons.injectable.ts index e75843851c..4395dff32e 100644 --- a/packages/core/src/test-env/add-remove-buttons.injectable.ts +++ b/packages/core/src/test-env/add-remove-buttons.injectable.ts @@ -1,3 +1,7 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ import { getInjectable } from "@ogre-tools/injectable"; import { AddRemoveButtons } from "@k8slens/core/renderer"; import { addOrRemoveButtonsInjectionToken } from "@k8slens/table"; @@ -8,4 +12,4 @@ const addRemoveButtonsInjectable = getInjectable({ injectionToken: addOrRemoveButtonsInjectionToken, }); -export default addRemoveButtonsInjectable \ No newline at end of file +export default addRemoveButtonsInjectable; diff --git a/packages/core/src/test-env/table.injectable.ts b/packages/core/src/test-env/table.injectable.ts index c07f60ea6d..c03994cbf9 100644 --- a/packages/core/src/test-env/table.injectable.ts +++ b/packages/core/src/test-env/table.injectable.ts @@ -1,3 +1,7 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ import { tableComponentInjectionToken } from "@k8slens/table"; import { getInjectable } from "@ogre-tools/injectable"; import { Table } from "@k8slens/core/renderer"; @@ -8,4 +12,4 @@ const tableComponentInjectable = getInjectable({ injectionToken: tableComponentInjectionToken, }); -export default tableComponentInjectable \ No newline at end of file +export default tableComponentInjectable; From 2a629ff8b7d0bec750cf75f6f7b202ef8a093ab8 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Jun 2023 11:15:37 +0300 Subject: [PATCH 14/24] Adding createTableStateInjectionToken Signed-off-by: Alex Andreev --- packages/table/index.ts | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/table/index.ts b/packages/table/index.ts index 099926bd01..88958b6738 100644 --- a/packages/table/index.ts +++ b/packages/table/index.ts @@ -23,17 +23,10 @@ export interface TableComponentProps { columns?: Column[]; save?: (state: object) => void; load?: (tableId: string) => object; - initialState?: { - dataItems: IComputedValue; - headingColumns: object[]; - customizeRows?: (row: object) => object; - getRowId?: (dataItem: any) => string | number | symbol; - searchBox?: IComputedValue | IObservableValue; - } } export interface TableComponent { - Component: React.ComponentType; + Component: React.ComponentType; } export interface AddRemoveButtonsProps extends React.HTMLAttributes { @@ -47,10 +40,22 @@ export interface AddOrRemoveButtons { Component: React.ComponentType; } +export type CreateTableState = (params: { + dataItems: IComputedValue; + headingColumns: object[]; + customizeRows?: (row: object) => object; + getRowId?: (dataItem: any) => string | number | symbol; + searchBox?: IComputedValue | IObservableValue; +}) => any; + export const tableComponentInjectionToken = getInjectionToken({ id: "table-component-injection-token", }); export const addOrRemoveButtonsInjectionToken = getInjectionToken({ id: "add-or-remove-buttons-injection-token", -}); \ No newline at end of file +}); + +export const createTableStateInjectionToken = getInjectionToken({ + id: "create-table-state-injection-token", +}) \ No newline at end of file From 365cf5c4aae1a2dec4801dba794c87c18073bbbd Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Jun 2023 11:16:30 +0300 Subject: [PATCH 15/24] Update package-lock.json Signed-off-by: Alex Andreev --- package-lock.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package-lock.json b/package-lock.json index 3ad409bb83..59d4ad1949 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34029,6 +34029,7 @@ "@k8slens/routing": "^1.0.0", "@k8slens/run-many": "^1.0.0", "@k8slens/startable-stoppable": "^1.0.0", + "@k8slens/table": "6.5.0", "@k8slens/tooltip": "^1.0.0", "@k8slens/utilities": "^1.0.0", "@kubernetes/client-node": "^0.18.1", @@ -34232,6 +34233,7 @@ "packages/core": { "name": "@k8slens/core", "version": "6.5.0", + "hasInstallScript": true, "license": "MIT", "devDependencies": { "@async-fn/jest": "1.6.4", @@ -34370,6 +34372,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": "6.5.0", "@k8slens/tooltip": "^1.0.0-alpha.5", "@k8slens/utilities": "^1.0.0-alpha.1", "@kubernetes/client-node": "^0.18.1", @@ -35360,6 +35363,7 @@ } }, "packages/table": { + "name": "@k8slens/table", "version": "6.5.0", "license": "MIT", "devDependencies": { From 71ebf6e0ddb29bc7cd30e0824a1533cb17a50cc1 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Jun 2023 11:17:02 +0300 Subject: [PATCH 16/24] Add linkable command to core package Signed-off-by: Alex Andreev --- packages/core/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index 8245491d07..fb612431b1 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -55,7 +55,8 @@ "test:unit": "jest --testPathIgnorePatterns integration", "test:watch": "func() { jest ${1} --watch --testPathIgnorePatterns integration; }; func", "lint": "PROD=true eslint --ext js,ts,tsx --max-warnings=0 .", - "lint:fix": "npm run lint -- --fix" + "lint:fix": "npm run lint -- --fix", + "postinstall": "linkable" }, "config": { "k8sProxyVersion": "0.3.0", @@ -101,6 +102,7 @@ "runtime": "@side/jest-runtime" }, "devDependencies": { + "lens-table": "1.0.0", "@async-fn/jest": "1.6.4", "@k8slens/messaging-fake-bridge": "^1.0.0", "@k8slens/react-testing-library-discovery": "^1.0.0", From da3946b986e659947e90af44a8967ca4729bd840 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Jun 2023 11:27:33 +0300 Subject: [PATCH 17/24] Adding tableStateInjectable and context Signed-off-by: Alex Andreev --- .../components/table/table-data-context.ts | 43 +++++ .../table/table-state.injectable.tsx | 177 ++++++++++++++++++ 2 files changed, 220 insertions(+) create mode 100644 packages/core/src/renderer/components/table/table-data-context.ts create mode 100644 packages/core/src/renderer/components/table/table-state.injectable.tsx diff --git a/packages/core/src/renderer/components/table/table-data-context.ts b/packages/core/src/renderer/components/table/table-data-context.ts new file mode 100644 index 0000000000..e84e536676 --- /dev/null +++ b/packages/core/src/renderer/components/table/table-data-context.ts @@ -0,0 +1,43 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import React from "react"; +import type { KubeObject } from "@k8slens/kube-object"; +import type { + BaseKubeObjectListLayoutColumn, + GeneralKubeObjectListLayoutColumn, + SpecificKubeListLayoutColumn, +} from "@k8slens/list-layout"; +import type { ItemListLayoutContentProps } from "../item-object-list/content"; + +export type TableContextRequiredDataFromComponentsLayerAbove< + K extends KubeObject +> = Pick< + ItemListLayoutContentProps, + | "tableId" + | "getFilters" + | "renderItemMenu" + | "store" + | "onDetails" + | "hasDetailsView" + | "getItems" + | "renderTableHeader" + | "renderTableContents" + | "sortingCallbacks" + | "isSelectable" +>; + +export interface TableDataContextValue + extends TableContextRequiredDataFromComponentsLayerAbove { + columns?: ( + | BaseKubeObjectListLayoutColumn + | SpecificKubeListLayoutColumn + | GeneralKubeObjectListLayoutColumn + )[]; +} + +export const TableDataContext = React.createContext< + TableDataContextValue +>({} as any); \ No newline at end of file diff --git a/packages/core/src/renderer/components/table/table-state.injectable.tsx b/packages/core/src/renderer/components/table/table-state.injectable.tsx new file mode 100644 index 0000000000..b6eb0a0d2f --- /dev/null +++ b/packages/core/src/renderer/components/table/table-state.injectable.tsx @@ -0,0 +1,177 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import { MenuActions, MenuItem } from "../menu"; +import React from "react"; +import { action, computed } from "mobx"; +import { isReactNode, stopPropagation } from "@k8slens/utilities"; +import type { KubeObject } from "@k8slens/kube-object"; +import { Checkbox } from "../checkbox"; +import type { TableCellProps } from "@k8slens/list-layout"; +import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; +import type { TableDataContextValue } from "./table-data-context"; +import { CreateTableState, createTableStateInjectionToken } from "@k8slens/table"; + +type TableDataColumn = object; + +export function createLensTableState({ + tableId, + getFilters, + renderItemMenu, + store, + onDetails, + hasDetailsView, + getItems, + renderTableHeader, + renderTableContents, + sortingCallbacks, + isSelectable, + columns: contextColumns, +}: TableDataContextValue, createState: CreateTableState) { + const headers = renderTableHeader as Required[]; + + + let headingColumns: TableDataColumn[] = headers.map( + ({ id: columnId, className, title }, index) => ({ + id: columnId ?? className, + className, + resizable: !!columnId, + sortable: !!columnId, + draggable: !!columnId, // e.g. warning-icon column in pods + title, + renderValue(row: any, col: any) { + const content = + renderTableContents?.(row.data)[index] ?? + contextColumns + ?.find((col) => col.id === columnId) + ?.content?.(row.data); + + if (isReactNode(content)) { + return content; + } else { + const { className, title } = content as TableCellProps; + + return
{title}
; + } + }, + sortValue(row: any, col: any) { + return sortingCallbacks?.[col.id]?.(row.data) as string; + }, + }) + ); + + const checkboxColumn: TableDataColumn = { + id: "checkbox", + className: "checkbox", + draggable: false, + sortable: false, + resizable: false, + get title() { + return ( +
+ tableState.toggleRowSelectionAll()} + /> +
+ ); + }, + renderValue({ id: rowId }: { id: string | number | symbol }) { + return ( +
+ { + if (tableState.selectedRowsId.has(rowId)) { + tableState.selectedRowsId.delete(rowId); + } else { + tableState.selectedRowsId.add(rowId); + } + })} + /> +
+ ); + }, + }; + + const menuColumn: TableDataColumn = { + id: "menu", + className: "menu", + resizable: false, + sortable: false, + draggable: false, + get title() { + return ( + + {headers + .filter((headerCell) => !headerCell.showWithColumn) + .map(({ id: columnId, title, className }) => ( + + { + if (tableState.hiddenColumns.has(columnId)) { + tableState.hiddenColumns.delete(columnId); + } else { + tableState.hiddenColumns.add(columnId); + } + })} + /> + + ))} + + ); + }, + renderValue(row: any, col: any) { + return ( +
{renderItemMenu?.(row.data, store)}
+ ); + }, + }; + + if (isSelectable) { + headingColumns = [checkboxColumn, ...headingColumns]; + } + + const tableState = createState({ + dataItems: computed(getItems), + headingColumns: [...headingColumns, menuColumn], + + searchBox: computed(() => { + return getFilters().find((item) => item.type === "search")?.value ?? ""; + }), + + customizeRows: () => ({ + className: `${hasDetailsView ? "withDetails" : ""}`, + onSelect(row: any, evt: any) { + if (evt.isPropagationStopped()) { + return; // e.g. click on `checkbox` (== select row) + } + + evt.stopPropagation(); + evt.preventDefault(); + onDetails?.(row.data); + }, + }), + }); + + return tableState; +} + +export const tableStateInjectable = getInjectable({ + id: "table-state", + instantiate(di, context: TableDataContextValue) { + const createState = di.inject(createTableStateInjectionToken); + + return createLensTableState(context, createState); + }, + lifecycle: lifecycleEnum.transient, +}); \ No newline at end of file From 4fa2cceb466c55c79fef35c63dbbad83679a879f Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Jun 2023 11:29:38 +0300 Subject: [PATCH 18/24] Using tableStateInjectable in content.tsx Signed-off-by: Alex Andreev --- .../src/renderer/components/item-object-list/content.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/src/renderer/components/item-object-list/content.tsx b/packages/core/src/renderer/components/item-object-list/content.tsx index 0f7c683ec0..29b87bda22 100644 --- a/packages/core/src/renderer/components/item-object-list/content.tsx +++ b/packages/core/src/renderer/components/item-object-list/content.tsx @@ -35,6 +35,7 @@ import type { IsTableColumnHidden } from "../../../features/user-preferences/com import isTableColumnHiddenInjectable from "../../../features/user-preferences/common/is-table-column-hidden.injectable"; import type { AddOrRemoveButtons, AddRemoveButtonsProps, TableComponent } from "@k8slens/table"; import { addOrRemoveButtonsInjectionToken, tableComponentInjectionToken } from "@k8slens/table"; +import { tableStateInjectable } from "../table/table-state.injectable"; export interface ItemListLayoutContentProps { getFilters: () => Filter[]; @@ -82,6 +83,7 @@ interface Dependencies { isTableColumnHidden: IsTableColumnHidden; table: TableComponent; addOrRemoveButtons: AddOrRemoveButtons; + tableState: object; } @observer @@ -302,7 +304,7 @@ class NonInjectedItemListLayoutContent< const { store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem, className, tableProps = {}, tableId, getItems, activeTheme, - table, addOrRemoveButtons, + table, addOrRemoveButtons, tableState } = this.props; const selectedItemId = detailsItem && detailsItem.getId(); const classNames = cssNames(className, "box", "grow", activeTheme.get().type); @@ -322,6 +324,7 @@ class NonInjectedItemListLayoutContent< selectedItemId={selectedItemId} noItems={this.renderNoItems()} className={classNames} + state={tableState} {...tableProps} > {this.renderTableHeader()} @@ -391,5 +394,6 @@ export const ItemListLayoutContent = withInjectables(props: ItemListLayoutContentProps) => React.ReactElement; From e4c4f546218cbfaa75dc2b6e8a91bda8c063607b Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Jun 2023 11:40:16 +0300 Subject: [PATCH 19/24] Adding createTableStateInjectable Signed-off-by: Alex Andreev --- .../src/renderer/create-table-state.injectable.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 open-lens/src/renderer/create-table-state.injectable.ts diff --git a/open-lens/src/renderer/create-table-state.injectable.ts b/open-lens/src/renderer/create-table-state.injectable.ts new file mode 100644 index 0000000000..a183a92b64 --- /dev/null +++ b/open-lens/src/renderer/create-table-state.injectable.ts @@ -0,0 +1,10 @@ +import { createTableStateInjectionToken } from "@k8slens/table"; +import { getInjectable } from "@ogre-tools/injectable"; + +const createTableStateInjectable = getInjectable({ + id: "open-lens-table-state", + instantiate: () => () => {}, + injectionToken: createTableStateInjectionToken, +}); + +export default createTableStateInjectable \ No newline at end of file From 0ac0157e24b7d291f6ae9ee0129ea9d2692aa2a9 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Jun 2023 11:42:56 +0300 Subject: [PATCH 20/24] Linter fixes Signed-off-by: Alex Andreev --- .../src/renderer/components/item-object-list/content.tsx | 2 +- .../src/renderer/components/table/table-data-context.ts | 4 ++-- .../renderer/components/table/table-state.injectable.tsx | 7 ++++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/core/src/renderer/components/item-object-list/content.tsx b/packages/core/src/renderer/components/item-object-list/content.tsx index 29b87bda22..a60dce9b7e 100644 --- a/packages/core/src/renderer/components/item-object-list/content.tsx +++ b/packages/core/src/renderer/components/item-object-list/content.tsx @@ -304,7 +304,7 @@ class NonInjectedItemListLayoutContent< const { store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem, className, tableProps = {}, tableId, getItems, activeTheme, - table, addOrRemoveButtons, tableState + table, addOrRemoveButtons, tableState, } = this.props; const selectedItemId = detailsItem && detailsItem.getId(); const classNames = cssNames(className, "box", "grow", activeTheme.get().type); diff --git a/packages/core/src/renderer/components/table/table-data-context.ts b/packages/core/src/renderer/components/table/table-data-context.ts index e84e536676..162ad6f668 100644 --- a/packages/core/src/renderer/components/table/table-data-context.ts +++ b/packages/core/src/renderer/components/table/table-data-context.ts @@ -13,7 +13,7 @@ import type { import type { ItemListLayoutContentProps } from "../item-object-list/content"; export type TableContextRequiredDataFromComponentsLayerAbove< - K extends KubeObject + K extends KubeObject, > = Pick< ItemListLayoutContentProps, | "tableId" @@ -40,4 +40,4 @@ export interface TableDataContextValue export const TableDataContext = React.createContext< TableDataContextValue ->({} as any); \ No newline at end of file +>({} as any); diff --git a/packages/core/src/renderer/components/table/table-state.injectable.tsx b/packages/core/src/renderer/components/table/table-state.injectable.tsx index b6eb0a0d2f..e36f96d023 100644 --- a/packages/core/src/renderer/components/table/table-state.injectable.tsx +++ b/packages/core/src/renderer/components/table/table-state.injectable.tsx @@ -12,7 +12,8 @@ import { Checkbox } from "../checkbox"; import type { TableCellProps } from "@k8slens/list-layout"; import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; import type { TableDataContextValue } from "./table-data-context"; -import { CreateTableState, createTableStateInjectionToken } from "@k8slens/table"; +import type { CreateTableState } from "@k8slens/table"; +import { createTableStateInjectionToken } from "@k8slens/table"; type TableDataColumn = object; @@ -59,7 +60,7 @@ export function createLensTableState({ sortValue(row: any, col: any) { return sortingCallbacks?.[col.id]?.(row.data) as string; }, - }) + }), ); const checkboxColumn: TableDataColumn = { @@ -174,4 +175,4 @@ export const tableStateInjectable = getInjectable({ return createLensTableState(context, createState); }, lifecycle: lifecycleEnum.transient, -}); \ No newline at end of file +}); From fc22241dd543813774572a006a7a7706d32d1d5d Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 6 Jun 2023 12:40:19 +0300 Subject: [PATCH 21/24] Remove unused dev dependency from core Signed-off-by: Alex Andreev --- packages/core/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index 6a4efab2aa..815cdc936b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -102,7 +102,6 @@ "runtime": "@side/jest-runtime" }, "devDependencies": { - "lens-table": "1.0.0", "@async-fn/jest": "1.6.4", "@k8slens/messaging-fake-bridge": "^1.0.0", "@k8slens/react-testing-library-discovery": "^1.0.0", From 3b174902690fb902b663340f39bdf78c9acfa079 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 6 Jun 2023 13:05:37 +0300 Subject: [PATCH 22/24] Changing paths for test-env injectables Signed-off-by: Alex Andreev --- packages/core/src/test-env/add-remove-buttons.injectable.ts | 2 +- packages/core/src/test-env/table.injectable.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/test-env/add-remove-buttons.injectable.ts b/packages/core/src/test-env/add-remove-buttons.injectable.ts index 4395dff32e..c1f0284331 100644 --- a/packages/core/src/test-env/add-remove-buttons.injectable.ts +++ b/packages/core/src/test-env/add-remove-buttons.injectable.ts @@ -3,8 +3,8 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { AddRemoveButtons } from "@k8slens/core/renderer"; import { addOrRemoveButtonsInjectionToken } from "@k8slens/table"; +import { AddRemoveButtons } from "../renderer/components/add-remove-buttons"; const addRemoveButtonsInjectable = getInjectable({ id: "add-remove-buttons-component", diff --git a/packages/core/src/test-env/table.injectable.ts b/packages/core/src/test-env/table.injectable.ts index c03994cbf9..1c2e603535 100644 --- a/packages/core/src/test-env/table.injectable.ts +++ b/packages/core/src/test-env/table.injectable.ts @@ -4,7 +4,7 @@ */ import { tableComponentInjectionToken } from "@k8slens/table"; import { getInjectable } from "@ogre-tools/injectable"; -import { Table } from "@k8slens/core/renderer"; +import { Table } from "../renderer/components/table"; const tableComponentInjectable = getInjectable({ id: "table-component", From ddc104899b456ac9d20be2e548d8d2e6b79751ec Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 6 Jun 2023 13:40:20 +0300 Subject: [PATCH 23/24] Adding TableDataColumn and TableDataRow types Signed-off-by: Alex Andreev --- .../table/table-state.injectable.tsx | 39 ++++++++++++++----- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/core/src/renderer/components/table/table-state.injectable.tsx b/packages/core/src/renderer/components/table/table-state.injectable.tsx index e36f96d023..ee38d81bdc 100644 --- a/packages/core/src/renderer/components/table/table-state.injectable.tsx +++ b/packages/core/src/renderer/components/table/table-state.injectable.tsx @@ -15,7 +15,27 @@ import type { TableDataContextValue } from "./table-data-context"; import type { CreateTableState } from "@k8slens/table"; import { createTableStateInjectionToken } from "@k8slens/table"; -type TableDataColumn = object; +interface TableDataRow { + id: string; + data: DataItem; + index?: number; + className?: string; +} + +interface TableDataColumn { + id: string; + title: React.ReactNode; + className?: string; + style?: React.CSSProperties; + size?: string; + minSize?: number; + resizable?: boolean; + draggable?: boolean; + sortable?: boolean; + renderValue?: (row: TableDataRow) => React.ReactNode; + sortValue?: (row: TableDataRow, col: TableDataColumn) => string | number; + searchValue?: (row: TableDataRow) => string; +} export function createLensTableState({ tableId, @@ -33,8 +53,7 @@ export function createLensTableState({ }: TableDataContextValue, createState: CreateTableState) { const headers = renderTableHeader as Required[]; - - let headingColumns: TableDataColumn[] = headers.map( + let headingColumns: TableDataColumn[] = headers.map( ({ id: columnId, className, title }, index) => ({ id: columnId ?? className, className, @@ -42,7 +61,7 @@ export function createLensTableState({ sortable: !!columnId, draggable: !!columnId, // e.g. warning-icon column in pods title, - renderValue(row: any, col: any) { + renderValue(row: TableDataRow) { const content = renderTableContents?.(row.data)[index] ?? contextColumns @@ -57,13 +76,13 @@ export function createLensTableState({ return
{title}
; } }, - sortValue(row: any, col: any) { + sortValue(row: TableDataRow, col: any) { return sortingCallbacks?.[col.id]?.(row.data) as string; }, }), ); - const checkboxColumn: TableDataColumn = { + const checkboxColumn: TableDataColumn = { id: "checkbox", className: "checkbox", draggable: false, @@ -84,7 +103,7 @@ export function createLensTableState({
{ + onChange={action(() => { if (tableState.selectedRowsId.has(rowId)) { tableState.selectedRowsId.delete(rowId); } else { @@ -97,7 +116,7 @@ export function createLensTableState({ }, }; - const menuColumn: TableDataColumn = { + const menuColumn: TableDataColumn = { id: "menu", className: "menu", resizable: false, @@ -118,7 +137,7 @@ export function createLensTableState({ { + onChange={action(() => { if (tableState.hiddenColumns.has(columnId)) { tableState.hiddenColumns.delete(columnId); } else { @@ -131,7 +150,7 @@ export function createLensTableState({ ); }, - renderValue(row: any, col: any) { + renderValue(row: any) { return (
{renderItemMenu?.(row.data, store)}
); From 67370c14ca2b0c483acff38854369fe843a78631 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 6 Jun 2023 14:24:26 +0300 Subject: [PATCH 24/24] Adding create-table-state.injectable.ts into test-env folder Signed-off-by: Alex Andreev --- .../src/test-env/create-table-state.injectable.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 packages/core/src/test-env/create-table-state.injectable.ts diff --git a/packages/core/src/test-env/create-table-state.injectable.ts b/packages/core/src/test-env/create-table-state.injectable.ts new file mode 100644 index 0000000000..c8eee23150 --- /dev/null +++ b/packages/core/src/test-env/create-table-state.injectable.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 { createTableStateInjectionToken } from "@k8slens/table"; +import { getInjectable } from "@ogre-tools/injectable"; + +const createTableStateInjectable = getInjectable({ + id: "open-lens-table-state", + instantiate: () => () => {}, + injectionToken: createTableStateInjectionToken, +}); + +export default createTableStateInjectable;