From 91d31703980aa7c9ce19fa856d07f7a553095cfd Mon Sep 17 00:00:00 2001 From: Sami Tiilikainen <97873007+samitiilikainen@users.noreply.github.com> Date: Thu, 13 Apr 2023 09:13:17 +0300 Subject: [PATCH] Separate injection token as package Signed-off-by: Sami Tiilikainen <97873007+samitiilikainen@users.noreply.github.com> --- packages/core/package.json | 1 + .../columns/pods-age-column.injectable.tsx | 4 +- .../pods-containers-column.injectable.tsx | 4 +- .../columns/pods-name-column.injectable.tsx | 4 +- .../pods-namespace-column.injectable.tsx | 4 +- .../columns/pods-node-column.injectable.tsx | 4 +- .../columns/pods-owners-column.injectable.tsx | 4 +- .../columns/pods-qos-column.injectable.tsx | 4 +- .../pods-restarts-column.injectable.tsx | 4 +- .../columns/pods-status-column.injectable.tsx | 4 +- .../pods-status-icon-column.injectable.tsx | 4 +- ...ect-list-layout-column-injection-token.tsx | 24 ----- .../kube-object-list-layout.tsx | 4 +- packages/core/src/renderer/library.ts | 1 - packages/list-layout/.eslintrc.js | 6 ++ packages/list-layout/.prettierrc | 1 + packages/list-layout/index.ts | 1 + packages/list-layout/jest.config.js | 1 + ...ect-list-layout-column-injection-token.tsx | 97 +++++++++++++++++++ packages/list-layout/package.json | 41 ++++++++ packages/list-layout/tsconfig.json | 4 + packages/list-layout/webpack.config.js | 1 + 22 files changed, 175 insertions(+), 47 deletions(-) delete mode 100644 packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout-column-injection-token.tsx create mode 100644 packages/list-layout/.eslintrc.js create mode 100644 packages/list-layout/.prettierrc create mode 100644 packages/list-layout/index.ts create mode 100644 packages/list-layout/jest.config.js create mode 100644 packages/list-layout/kube-object-list-layout-column-injection-token.tsx create mode 100644 packages/list-layout/package.json create mode 100644 packages/list-layout/tsconfig.json create mode 100644 packages/list-layout/webpack.config.js diff --git a/packages/core/package.json b/packages/core/package.json index 6e41cc2bca..fbfe64d93d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -115,6 +115,7 @@ "@k8slens/metrics": "^6.5.0-alpha.3", "@k8slens/node-fetch": "^6.5.0-alpha.3", "@k8slens/react-application": "^1.0.0-alpha.2", + "@k8slens/list-layout": "^6.5.0-alpha.2", "@kubernetes/client-node": "^0.18.1", "@material-ui/styles": "^4.11.5", "@sentry/electron": "^3.0.8", diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx index a2c71d3b82..b7673a58dd 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-age-column.injectable.tsx @@ -5,8 +5,8 @@ import { getInjectable } from "@ogre-tools/injectable"; import React from "react"; import type { Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; import { KubeObjectAge } from "../../kube-object/age"; export const podsAgeColumnInjectable = getInjectable({ diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx index c8c32ff562..a23f91fb6a 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-containers-column.injectable.tsx @@ -7,8 +7,8 @@ import { getInjectable } from "@ogre-tools/injectable"; import startCase from "lodash/startCase"; import React from "react"; import type { ContainerStateValues, Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; import { StatusBrick } from "../../status-brick"; function renderState(name: string, ready: boolean, key: string, data?: ContainerStateValues) { diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx index 4459ad5458..f73acbcb61 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-name-column.injectable.tsx @@ -6,8 +6,8 @@ import { getConvertedParts } from "@k8slens/utilities"; import { getInjectable } from "@ogre-tools/injectable"; import React from "react"; import type { Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; import { Tooltip } from "../../tooltip"; export const podsNameColumnInjectable = getInjectable({ diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx index 8c39eb3e61..d895fe6501 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-namespace-column.injectable.tsx @@ -6,8 +6,8 @@ import { getInjectable } from "@ogre-tools/injectable"; import React from "react"; import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge"; import type { Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; export const podsNamespaceColumnInjectable = getInjectable({ id: "pods-namespace-column", diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx index 6fa78dc427..741bd55e3c 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-node-column.injectable.tsx @@ -9,8 +9,8 @@ import nodeApiInjectable from "../../../../common/k8s-api/endpoints/node.api.inj import type { Pod } from "../../../../common/k8s-api/endpoints"; import { Badge } from "../../badge"; import getDetailsUrlInjectable from "../../kube-detail-params/get-details-url.injectable"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; import { stopPropagation } from "@k8slens/utilities"; export const podsNodeColumnInjectable = getInjectable({ diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx index dd7514f6fd..4c31d44ebf 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-owners-column.injectable.tsx @@ -10,8 +10,8 @@ import apiManagerInjectable from "../../../../common/k8s-api/api-manager/manager import type { Pod } from "../../../../common/k8s-api/endpoints"; import { Badge } from "../../badge"; import getDetailsUrlInjectable from "../../kube-detail-params/get-details-url.injectable"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; export const podsOwnersColumnInjectable = getInjectable({ id: "pods-owners-column", diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx index 39199512a6..a3729dba26 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-qos-column.injectable.tsx @@ -4,8 +4,8 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import type { Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; export const podsQosColumnInjectable = getInjectable({ id: "pods-qos-column", diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx index c69449d0af..abf4d00df8 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-restarts-column.injectable.tsx @@ -4,8 +4,8 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import type { Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; export const podsRestartsColumnInjectable = getInjectable({ id: "pods-restarts-column", diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx index 49ceda7d1f..88c9c5d01e 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-column.injectable.tsx @@ -5,8 +5,8 @@ import { getInjectable } from "@ogre-tools/injectable"; import { kebabCase } from "lodash"; import type { Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; export const podsStatusColumnInjectable = getInjectable({ id: "pods-status-column", diff --git a/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx index 92fded0be8..b0fc995941 100644 --- a/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx +++ b/packages/core/src/renderer/components/+workloads-pods/columns/pods-status-icon-column.injectable.tsx @@ -5,8 +5,8 @@ import { getInjectable } from "@ogre-tools/injectable"; import React from "react"; import type { Pod } from "../../../../common/k8s-api/endpoints"; -import type { KubeObjectListLayoutColumn } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; -import { kubeObjectListLayoutColumnInjectionToken } from "../../kube-object-list-layout/kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; import { KubeObjectStatusIcon } from "../../kube-object-status-icon"; export const podsQosColumnInjectable = getInjectable({ diff --git a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout-column-injection-token.tsx b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout-column-injection-token.tsx deleted file mode 100644 index 0180531d68..0000000000 --- a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout-column-injection-token.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ -import type { ReactNode } from "react"; -import type { SearchFilter } from "../item-object-list/list-layout"; -import type { TableCellProps, TableSortCallback } from "../table"; -import type { ItemObject } from "../../../common/item.store"; -import { getInjectionToken } from "@ogre-tools/injectable"; - -export interface KubeObjectListLayoutColumn { - id: string; - kind: string; - apiVersion: string; - priority: number; - sortingCallBack?: TableSortCallback; - searchFilter?: SearchFilter; - header: (TableCellProps | undefined | null); - content: (item: Item) => (ReactNode | TableCellProps); -} - -export const kubeObjectListLayoutColumnInjectionToken = getInjectionToken>({ - id: "kube-object-list-layout-column", -}); 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 1efddc3afa..0bcd5e6e23 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 @@ -29,9 +29,9 @@ import type { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details import kubeSelectedUrlParamInjectable from "../kube-detail-params/kube-selected-url.injectable"; import toggleKubeDetailsPaneInjectable from "../kube-detail-params/toggle-details.injectable"; import type { ClusterContext } from "../../cluster-frame-context/cluster-frame-context"; -import type { KubeObjectListLayoutColumn } from "./kube-object-list-layout-column-injection-token"; +import type { KubeObjectListLayoutColumn } from "@k8slens/list-layout"; import type { ItemObject } from "../../../common/item.store"; -import { kubeObjectListLayoutColumnInjectionToken } from "./kube-object-list-layout-column-injection-token"; +import { kubeObjectListLayoutColumnInjectionToken } from "@k8slens/list-layout"; import { sortBy } from "lodash"; export interface KubeObjectListLayoutProps< diff --git a/packages/core/src/renderer/library.ts b/packages/core/src/renderer/library.ts index 2b69cfe05e..1af4714943 100644 --- a/packages/core/src/renderer/library.ts +++ b/packages/core/src/renderer/library.ts @@ -10,7 +10,6 @@ import setStatusBarStatusInjectable from "./components/status-bar/set-status-bar // @experimental export type { Environments } from "../extensions/as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api"; export { nodeEnvInjectionToken } from "../common/vars/node-env-injection-token"; -export * from "./components/kube-object-list-layout/kube-object-list-layout-column-injection-token"; export { registerLensCore } from "./register-lens-core"; export { React, diff --git a/packages/list-layout/.eslintrc.js b/packages/list-layout/.eslintrc.js new file mode 100644 index 0000000000..19a14e85a4 --- /dev/null +++ b/packages/list-layout/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: "@k8slens/eslint-config/eslint", + parserOptions: { + project: "./tsconfig.json", + }, +}; \ No newline at end of file diff --git a/packages/list-layout/.prettierrc b/packages/list-layout/.prettierrc new file mode 100644 index 0000000000..edd47b479e --- /dev/null +++ b/packages/list-layout/.prettierrc @@ -0,0 +1 @@ +"@k8slens/eslint-config/prettier" diff --git a/packages/list-layout/index.ts b/packages/list-layout/index.ts new file mode 100644 index 0000000000..564641a4a2 --- /dev/null +++ b/packages/list-layout/index.ts @@ -0,0 +1 @@ +export * from "./kube-object-list-layout-column-injection-token"; diff --git a/packages/list-layout/jest.config.js b/packages/list-layout/jest.config.js new file mode 100644 index 0000000000..38d54ab7b6 --- /dev/null +++ b/packages/list-layout/jest.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact; diff --git a/packages/list-layout/kube-object-list-layout-column-injection-token.tsx b/packages/list-layout/kube-object-list-layout-column-injection-token.tsx new file mode 100644 index 0000000000..a1827ff502 --- /dev/null +++ b/packages/list-layout/kube-object-list-layout-column-injection-token.tsx @@ -0,0 +1,97 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import type { ReactNode } from "react"; +import type { SingleOrMany } from "@k8slens/utilities"; +import { getInjectionToken } from "@ogre-tools/injectable"; + +export interface ItemObject { + getId(): string; + getName(): string; +} + +export type TableSortBy = string; +export type TableOrderBy = "asc" | "desc"; +export interface TableSortParams { + sortBy: TableSortBy; + orderBy: TableOrderBy; +} + +export type TableSortCallback = (data: Item) => undefined | string | number | (string | number)[]; +export type TableSortCallbacks = Record>; + +export type SearchFilter = (item: I) => SingleOrMany; + +export interface TableCellProps extends React.DOMAttributes { + /** + * used for configuration visibility of columns + */ + id?: string; + + /** + * Any css class names for this table cell. Only used if `title` is a "simple" react node + */ + className?: string; + + /** + * The actual value of the cell + */ + title?: ReactNode; + + /** + * content inside could be scrolled + */ + scrollable?: boolean; + + /** + * render cell with a checkbox + */ + checkbox?: boolean; + + /** + * mark checkbox as checked or not + */ + isChecked?: boolean; + + /** + * column name, must be same as key in sortable object + */ + sortBy?: TableSortBy; + + /** + * id of the column which follow same visibility rules + */ + showWithColumn?: string; + + /** + * @internal + */ + _sorting?: Partial; + + /** + * @internal + */ + _sort?(sortBy: TableSortBy): void; + + /** + * @internal + * indicator, might come from parent , don't use this prop outside (!) + */ + _nowrap?: boolean; +} + +export interface KubeObjectListLayoutColumn { + id: string; + kind: string; + apiVersion: string; + priority: number; + sortingCallBack?: TableSortCallback; + searchFilter?: SearchFilter; + header: TableCellProps | undefined | null; + content: (item: Item) => ReactNode | TableCellProps; +} + +export const kubeObjectListLayoutColumnInjectionToken = getInjectionToken>({ + id: "kube-object-list-layout-column", +}); diff --git a/packages/list-layout/package.json b/packages/list-layout/package.json new file mode 100644 index 0000000000..73a6a08fb5 --- /dev/null +++ b/packages/list-layout/package.json @@ -0,0 +1,41 @@ +{ + "name": "@k8slens/list-layout", + "private": false, + "version": "6.5.0-alpha.2", + "description": "Injection tokens for list layout", + "type": "commonjs", + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + }, + "files": [ + "dist" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/lensapp/lens.git" + }, + "main": "dist/index.js", + "types": "dist/index.d.ts", + "author": { + "name": "OpenLens Authors", + "email": "info@k8slens.dev" + }, + "license": "MIT", + "homepage": "https://github.com/lensapp/lens", + "scripts": { + "build": "webpack", + "clean": "rimraf dist/", + "dev": "webpack --mode=development --watch", + "test": "jest --coverage --runInBand", + "lint": "lens-lint", + "lint:fix": "lens-lint --fix" + }, + "peerDependencies": { + "@ogre-tools/injectable": "^15.1.2", + "react": "^17.0.2" + }, + "devDependencies": { + "@k8slens/eslint-config": "6.5.0-alpha.1" + } +} \ No newline at end of file diff --git a/packages/list-layout/tsconfig.json b/packages/list-layout/tsconfig.json new file mode 100644 index 0000000000..1819203dc1 --- /dev/null +++ b/packages/list-layout/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@k8slens/typescript/config/base.json", + "include": ["**/*.ts"] +} diff --git a/packages/list-layout/webpack.config.js b/packages/list-layout/webpack.config.js new file mode 100644 index 0000000000..b54738d0a7 --- /dev/null +++ b/packages/list-layout/webpack.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/webpack").configForReact; \ No newline at end of file