From 500ac15703c371afdd7a64600e446f66d004b6a3 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Fri, 12 May 2023 09:46:48 -0400 Subject: [PATCH] chore: Extract sidebar item injection token into separate package - Add unit tests to cover custom resources sidebar items Signed-off-by: Sebastian Malton --- open-lens/package.json | 1 + open-lens/src/main/index.ts | 11 +- open-lens/src/renderer/index.ts | 2 + package-lock.json | 26 + packages/cluster-sidebar/.eslintrc.js | 6 + packages/cluster-sidebar/.prettierrc | 1 + packages/cluster-sidebar/index.ts | 8 + packages/cluster-sidebar/jest.config.js | 1 + packages/cluster-sidebar/package.json | 48 + packages/cluster-sidebar/src/feature.ts | 14 + .../src/sidebar-items.injectable.ts | 62 + packages/cluster-sidebar/src/tokens.ts | 37 + packages/cluster-sidebar/tsconfig.json | 4 + packages/cluster-sidebar/webpack.config.js | 1 + packages/core/package.json | 1 + .../crd-list/crd-list-route.injectable.ts | 21 - .../custom-resource-definitions.injectable.ts | 24 + .../custom-resources-route.injectable.ts | 4 +- ...custom-resource-definitions.injectable.ts} | 4 +- ...navigate-to-custom-resources.injectable.ts | 5 +- .../ingress-classes-route.injectable.ts | 24 + .../ingress-classeses-route.injectable.ts | 30 - .../navigate-to-ingress-classes.injectable.ts | 4 +- .../orderable/orderable.ts | 25 - ...lication-menu-item-composite.injectable.ts | 61 +- .../application-menu-item-injection-token.ts | 2 +- .../custom-resources-in-sidebar.test.tsx.snap | 3847 +++++++++++++++++ .../custom-resources-in-sidebar.test.tsx | 244 ++ .../cluster/order-of-sidebar-items.test.tsx | 134 +- ...debar-and-tab-navigation-for-core.test.tsx | 58 +- .../visibility-of-sidebar-items.test.tsx | 25 +- .../preference-item-injection-token.ts | 4 +- .../preference-items/preference-tab-root.tsx | 5 +- .../preferences-composite.injectable.ts | 35 +- .../request-api-resources.injectable.ts | 2 +- .../entity-details/detail-items.injectable.ts | 2 +- ...ster-overview-sidebar-items.injectable.tsx | 39 +- .../components/cluster/cluster-overview.tsx | 9 +- .../internal-commands.injectable.tsx | 2 +- .../sidebar-items.injectable.tsx | 36 +- .../leases-sidebar-items.injectable.tsx | 35 +- .../limit-ranges-sidebar-items.injectable.tsx | 35 +- .../config-maps-sidebar-items.injectable.tsx | 35 +- ...configurations-sidebar-items.injectable.ts | 41 +- ...ption-budgets-sidebar-items.injectable.tsx | 35 +- .../priority-classes-items.injectable.tsx | 35 +- ...source-quotas-sidebar-items.injectable.tsx | 35 +- .../runtime-classes-items.injectable.tsx | 38 - ...ntime-classes-sidebar-items.injectable.tsx | 33 + .../secrets-sidebar-items.injectable.tsx | 35 +- ...configurations-sidebar-items.injectable.ts | 41 +- ...-auto-scalers-sidebar-items.injectable.tsx | 36 +- .../config-sidebar-items.injectable.tsx | 36 +- .../crd-list-route-component.injectable.ts | 2 +- ...roups-sidebar-items-computed.injectable.ts | 86 + ...ps-sidebar-items-registrator.injectable.ts | 29 + ...rce-definitions-sidebar-item.injectable.ts | 30 + ...stom-resource-sidebar-items.injectable.tsx | 59 - ...om-resources-route-component.injectable.ts | 2 +- ...m-resources-route-parameters.injectable.ts | 2 +- ...tom-resources-sidebar-items.injectable.tsx | 24 + ...-items-for-definition-groups.injectable.ts | 81 - .../entity-settings/active-tabs.injectable.ts | 2 +- .../entity-settings/settings.injectable.ts | 2 +- .../events-sidebar-items.injectable.tsx | 39 +- .../helm-charts-sidebar-items.injectable.tsx | 35 +- ...helm-releases-sidebar-items.injectable.tsx | 35 +- .../helm/helm-sidebar-items.injectable.tsx | 36 +- ...on-sidebar-item-registrator.injectable.tsx | 114 +- .../layout/siblings-in-tab-layout.tsx | 2 +- .../components/layout/sidebar-item.tsx | 142 +- .../layout/sidebar-items.injectable.ts | 80 - .../renderer/components/layout/sidebar.tsx | 4 +- .../components/layout/tab-layout-2.tsx | 2 +- .../namespaces-sidebar-items.injectable.tsx | 39 +- .../endpoints-sidebar-items.injectable.tsx | 35 +- ...ngress-class-route-component.injectable.ts | 9 +- ...ingress-classes-sidebar-item.injectable.ts | 30 + .../ingresses-sidebar-items.injectable.ts | 30 + .../ingresses-sidebar-items.injectable.tsx | 56 - ...work-policies-sidebar-items.injectable.tsx | 35 +- ...port-forwards-sidebar-items.injectable.tsx | 36 +- .../services-sidebar-items.injectable.tsx | 35 +- .../network-sidebar-items.injectable.tsx | 36 +- .../nodes/nodes-sidebar-items.injectable.tsx | 39 +- ...rity-policies-sidebar-items.injectable.tsx | 35 +- ...orage-classes-sidebar-items.injectable.tsx | 35 +- ...volume-claims-sidebar-items.injectable.tsx | 35 +- ...stent-volumes-sidebar-items.injectable.tsx | 35 +- .../storage-sidebar-items.injectable.tsx | 36 +- ...role-bindings-sidebar-items.injectable.tsx | 35 +- ...cluster-roles-sidebar-items.injectable.tsx | 35 +- ...role-bindings-sidebar-items.injectable.tsx | 35 +- .../roles/roles-sidebar-items.injectable.tsx | 36 +- ...vice-accounts-sidebar-items.injectable.tsx | 35 +- ...er-management-sidebar-items.injectable.tsx | 36 +- .../cron-jobs-sidebar-items.injectable.tsx | 36 +- .../daemonsets-sidebar-items.injectable.tsx | 35 +- .../deployments-sidebar-items.injectable.tsx | 35 +- .../jobs-sidebar-items.injectable.tsx | 35 +- ...oads-overview-sidebar-items.injectable.tsx | 35 +- .../workloads/workloads.injectable.ts | 2 +- .../pods-sidebar-items.injectable.ts | 35 +- .../replicasets-sidebar-items.injectable.tsx | 35 +- ...on-controller-sidebar-items.injectable.tsx | 35 +- .../statefulsets-sidebar-items.injectable.tsx | 35 +- .../workloads-sidebar-items.injectable.tsx | 36 +- .../core/src/renderer/getDiForUnitTesting.tsx | 2 + .../routes/sibling-tabs.injectable.ts | 15 +- packages/utility-features/utilities/index.ts | 3 +- .../{computed-or.ts => computed-helpers.ts} | 4 + .../utility-features/utilities/src/iter.ts | 19 +- .../utilities/src/orderable.ts | 14 + 113 files changed, 5645 insertions(+), 1681 deletions(-) create mode 100644 packages/cluster-sidebar/.eslintrc.js create mode 100644 packages/cluster-sidebar/.prettierrc create mode 100644 packages/cluster-sidebar/index.ts create mode 100644 packages/cluster-sidebar/jest.config.js create mode 100644 packages/cluster-sidebar/package.json create mode 100644 packages/cluster-sidebar/src/feature.ts create mode 100644 packages/cluster-sidebar/src/sidebar-items.injectable.ts create mode 100644 packages/cluster-sidebar/src/tokens.ts create mode 100644 packages/cluster-sidebar/tsconfig.json create mode 100644 packages/cluster-sidebar/webpack.config.js delete mode 100644 packages/core/src/common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable.ts create mode 100644 packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable.ts rename packages/core/src/common/front-end-routing/routes/cluster/custom-resources/{custom-resources => }/custom-resources-route.injectable.ts (80%) rename packages/core/src/common/front-end-routing/routes/cluster/custom-resources/{crd-list/navigate-to-crd-list.injectable.ts => navigate-to-custom-resource-definitions.injectable.ts} (75%) rename packages/core/src/common/front-end-routing/routes/cluster/custom-resources/{custom-resources => }/navigate-to-custom-resources.injectable.ts (77%) create mode 100644 packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable.ts delete mode 100644 packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable.ts delete mode 100644 packages/core/src/common/utils/composable-responsibilities/orderable/orderable.ts create mode 100644 packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap create mode 100644 packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx delete mode 100644 packages/core/src/renderer/components/config-runtime-classes/runtime-classes-items.injectable.tsx create mode 100644 packages/core/src/renderer/components/config-runtime-classes/runtime-classes-sidebar-items.injectable.tsx create mode 100644 packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts create mode 100644 packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-registrator.injectable.ts create mode 100644 packages/core/src/renderer/components/custom-resources/custom-resource-definitions-sidebar-item.injectable.ts delete mode 100644 packages/core/src/renderer/components/custom-resources/custom-resource-sidebar-items.injectable.tsx create mode 100644 packages/core/src/renderer/components/custom-resources/custom-resources-sidebar-items.injectable.tsx delete mode 100644 packages/core/src/renderer/components/custom-resources/sidebar-items-for-definition-groups.injectable.ts delete mode 100644 packages/core/src/renderer/components/layout/sidebar-items.injectable.ts create mode 100644 packages/core/src/renderer/components/network-ingresses/ingress-classes-sidebar-item.injectable.ts create mode 100644 packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.ts delete mode 100644 packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.tsx rename packages/utility-features/utilities/src/{computed-or.ts => computed-helpers.ts} (73%) create mode 100644 packages/utility-features/utilities/src/orderable.ts diff --git a/open-lens/package.json b/open-lens/package.json index 278fa6980d..1e2d4a6062 100644 --- a/open-lens/package.json +++ b/open-lens/package.json @@ -184,6 +184,7 @@ "@k8slens/application-for-electron-main": "^6.5.0", "@k8slens/button": "^1.0.0", "@k8slens/cluster-settings": "^6.5.0", + "@k8slens/cluster-sidebar": "^1.0.0-alpha.0", "@k8slens/core": "^6.5.0", "@k8slens/ensure-binaries": "^6.5.0", "@k8slens/error-boundary": "^1.0.0", diff --git a/open-lens/src/main/index.ts b/open-lens/src/main/index.ts index 190fbe7201..6eaac3e1db 100644 --- a/open-lens/src/main/index.ts +++ b/open-lens/src/main/index.ts @@ -25,13 +25,14 @@ runInAction(() => { registerLensCore(di, environment); registerFeature(di, - loggerFeature, + loggerFeature, ); - registerFeature(di, - applicationFeature, - applicationFeatureForElectronMain, - messagingFeatureForMain, + registerFeature( + di, + applicationFeature, + applicationFeatureForElectronMain, + messagingFeatureForMain, ); try { diff --git a/open-lens/src/renderer/index.ts b/open-lens/src/renderer/index.ts index 9c2c90d6bb..19ce93e220 100644 --- a/open-lens/src/renderer/index.ts +++ b/open-lens/src/renderer/index.ts @@ -28,6 +28,7 @@ import { reactApplicationFeature } from "@k8slens/react-application"; import { routingFeature } from "@k8slens/routing"; import { loggerFeature } from "@k8slens/logger"; import { animateFeature } from "@k8slens/animate"; +import { clusterSidebarFeature } from "@k8slens/cluster-sidebar"; const environment = "renderer"; @@ -54,6 +55,7 @@ runInAction(() => { routingFeature, metricsFeature, animateFeature, + clusterSidebarFeature, ); autoRegister({ diff --git a/package-lock.json b/package-lock.json index 150ae619f2..80e6a9edaa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3702,6 +3702,10 @@ "resolved": "packages/cluster-settings", "link": true }, + "node_modules/@k8slens/cluster-sidebar": { + "resolved": "packages/cluster-sidebar", + "link": true + }, "node_modules/@k8slens/computed-channel": { "resolved": "packages/technical-features/messaging/computed-channel", "link": true @@ -33993,6 +33997,7 @@ "@k8slens/application-for-electron-main": "^6.5.0", "@k8slens/button": "^1.0.0", "@k8slens/cluster-settings": "^6.5.0", + "@k8slens/cluster-sidebar": "^1.0.0-alpha.0", "@k8slens/core": "^6.5.0", "@k8slens/ensure-binaries": "^6.5.0", "@k8slens/error-boundary": "^1.0.0", @@ -34200,6 +34205,26 @@ "@ogre-tools/injectable": "^17.1.0" } }, + "packages/cluster-sidebar": { + "name": "@k8slens/cluster-sidebar", + "version": "1.0.0-alpha.0", + "license": "MIT", + "devDependencies": { + "@k8slens/eslint-config": "^6.5.0-alpha.3", + "@k8slens/jest": "^6.5.0-alpha.5", + "@k8slens/typescript": "^6.5.0-alpha.2", + "@k8slens/webpack": "^6.5.0-alpha.5" + }, + "peerDependencies": { + "@k8slens/feature-core": "^6.5.0-alpha.4", + "@k8slens/utilities": "^1.0.0-alpha.3", + "@ogre-tools/injectable": "^15.8.1", + "@ogre-tools/injectable-extension-for-auto-registration": "^15.8.1", + "@ogre-tools/injectable-extension-for-mobx": "^15.8.1", + "mobx": "^6.9.0", + "react": "^17.0.2" + } + }, "packages/core": { "name": "@k8slens/core", "version": "6.5.0", @@ -34318,6 +34343,7 @@ "@k8slens/application-for-electron-main": "^6.5.0-alpha.0", "@k8slens/button": "^1.0.0-alpha.5", "@k8slens/cluster-settings": "^6.5.0-alpha.1", + "@k8slens/cluster-sidebar": "^1.0.0-alpha.0", "@k8slens/error-boundary": "^1.0.0-alpha.5", "@k8slens/event-emitter": "^1.0.0-alpha.1", "@k8slens/icon": "^1.0.0-alpha.7", diff --git a/packages/cluster-sidebar/.eslintrc.js b/packages/cluster-sidebar/.eslintrc.js new file mode 100644 index 0000000000..f404cf0ace --- /dev/null +++ b/packages/cluster-sidebar/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: "@k8slens/eslint-config/eslint", + parserOptions: { + project: "./tsconfig.json", + }, + }; diff --git a/packages/cluster-sidebar/.prettierrc b/packages/cluster-sidebar/.prettierrc new file mode 100644 index 0000000000..edd47b479e --- /dev/null +++ b/packages/cluster-sidebar/.prettierrc @@ -0,0 +1 @@ +"@k8slens/eslint-config/prettier" diff --git a/packages/cluster-sidebar/index.ts b/packages/cluster-sidebar/index.ts new file mode 100644 index 0000000000..4d072e91b2 --- /dev/null +++ b/packages/cluster-sidebar/index.ts @@ -0,0 +1,8 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +export * from "./src/tokens"; +export * from "./src/feature"; +export { default as sidebarItemsInjectable } from "./src/sidebar-items.injectable"; diff --git a/packages/cluster-sidebar/jest.config.js b/packages/cluster-sidebar/jest.config.js new file mode 100644 index 0000000000..38d54ab7b6 --- /dev/null +++ b/packages/cluster-sidebar/jest.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact; diff --git a/packages/cluster-sidebar/package.json b/packages/cluster-sidebar/package.json new file mode 100644 index 0000000000..34a6a8a212 --- /dev/null +++ b/packages/cluster-sidebar/package.json @@ -0,0 +1,48 @@ +{ + "name": "@k8slens/cluster-sidebar", + "private": false, + "version": "1.0.0-alpha.0", + "description": "Injection tokens for adding new sidebar items within the Cluster View", + "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": "lens-webpack-build", + "clean": "rimraf dist/", + "test": "jest --coverage --runInBand", + "lint": "lens-lint", + "lint:fix": "lens-lint --fix" + }, + "peerDependencies": { + "@k8slens/feature-core": "^6.5.0-alpha.4", + "@k8slens/utilities": "^1.0.0-alpha.3", + "@ogre-tools/injectable": "^15.8.1", + "@ogre-tools/injectable-extension-for-auto-registration": "^15.8.1", + "@ogre-tools/injectable-extension-for-mobx": "^15.8.1", + "mobx": "^6.9.0", + "react": "^17.0.2" + }, + "devDependencies": { + "@k8slens/eslint-config": "^6.5.0-alpha.3", + "@k8slens/jest": "^6.5.0-alpha.5", + "@k8slens/typescript": "^6.5.0-alpha.2", + "@k8slens/webpack": "^6.5.0-alpha.5" + } +} diff --git a/packages/cluster-sidebar/src/feature.ts b/packages/cluster-sidebar/src/feature.ts new file mode 100644 index 0000000000..d51e46c524 --- /dev/null +++ b/packages/cluster-sidebar/src/feature.ts @@ -0,0 +1,14 @@ +import { getFeature } from "@k8slens/feature-core"; +import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration"; + +export const clusterSidebarFeature = getFeature({ + id: "cluster-side-feature", + + register: (di) => { + autoRegister({ + di, + targetModule: module, + getRequireContexts: () => [require.context("./", true, /\.injectable\.(ts|tsx)$/)], + }); + }, +}); diff --git a/packages/cluster-sidebar/src/sidebar-items.injectable.ts b/packages/cluster-sidebar/src/sidebar-items.injectable.ts new file mode 100644 index 0000000000..6cef399fdd --- /dev/null +++ b/packages/cluster-sidebar/src/sidebar-items.injectable.ts @@ -0,0 +1,62 @@ +/* eslint-disable prettier/prettier */ + +import { getInjectable } from "@ogre-tools/injectable"; +import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; +import { HierarchicalSidebarItem, sidebarItemInjectionToken, SidebarItemRegistration } from "./tokens"; +import { computed } from "mobx"; +import { byOrderNumber } from "@k8slens/utilities"; + +const getSidebarItemsHierarchy = ( + registrations: SidebarItemRegistration[], + parentId: string | null, +): HierarchicalSidebarItem[] => ( + registrations + .filter((item) => item.parentId === parentId) + .map(({ + isActive, + isVisible, + ...registration + }) => { + const children = getSidebarItemsHierarchy(registrations, registration.id); + + return { + ...registration, + children, + isVisible: computed(() => { + if (children.length === 0) { + if (isVisible) { + return isVisible.get(); + } + + return true; + } + + return children.some((child) => child.isVisible.get()); + }), + isActive: computed(() => { + if (children.length === 0) { + if (isActive) { + return isActive.get(); + } + + return false; + } + + return children.some((child) => child.isActive.get()); + }), + }; + }) + .sort(byOrderNumber) +); + +const sidebarItemsInjectable = getInjectable({ + id: "sidebar-items", + instantiate: (di) => { + const computedInjectMany = di.inject(computedInjectManyInjectable); + const sidebarItemRegistrations = computedInjectMany(sidebarItemInjectionToken); + + return computed(() => getSidebarItemsHierarchy(sidebarItemRegistrations.get(), null)); + }, +}); + +export default sidebarItemsInjectable; diff --git a/packages/cluster-sidebar/src/tokens.ts b/packages/cluster-sidebar/src/tokens.ts new file mode 100644 index 0000000000..3edbd0468e --- /dev/null +++ b/packages/cluster-sidebar/src/tokens.ts @@ -0,0 +1,37 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import { getInjectionToken } from "@ogre-tools/injectable"; +import type { IComputedValue } from "mobx"; +import type { StrictReactNode } from "@k8slens/utilities"; + +export interface SidebarItemRegistration { + id: string; + parentId: string | null; + title: StrictReactNode; + onClick: () => void; + getIcon?: () => StrictReactNode; + isActive?: IComputedValue; + isVisible?: IComputedValue; + orderNumber: number; +} + +export interface SidebarItem { + id: string; + parentId: string | null; + title: StrictReactNode; + onClick: () => void; + getIcon?: () => StrictReactNode; + isActive: IComputedValue; + isVisible: IComputedValue; +} + +export interface HierarchicalSidebarItem extends SidebarItem { + children: HierarchicalSidebarItem[]; +} + +export const sidebarItemInjectionToken = getInjectionToken({ + id: "sidebar-item-injection-token", +}); diff --git a/packages/cluster-sidebar/tsconfig.json b/packages/cluster-sidebar/tsconfig.json new file mode 100644 index 0000000000..2b0f0e5603 --- /dev/null +++ b/packages/cluster-sidebar/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@k8slens/typescript/config/base.json", + "include": ["**/*.ts"] + } diff --git a/packages/cluster-sidebar/webpack.config.js b/packages/cluster-sidebar/webpack.config.js new file mode 100644 index 0000000000..1cda407f5a --- /dev/null +++ b/packages/cluster-sidebar/webpack.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/webpack").configForReact; diff --git a/packages/core/package.json b/packages/core/package.json index becbf86a71..49cf673309 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -211,6 +211,7 @@ "@k8slens/application-for-electron-main": "^6.5.0-alpha.0", "@k8slens/button": "^1.0.0-alpha.5", "@k8slens/cluster-settings": "^6.5.0-alpha.1", + "@k8slens/cluster-sidebar": "^1.0.0-alpha.0", "@k8slens/error-boundary": "^1.0.0-alpha.5", "@k8slens/event-emitter": "^1.0.0-alpha.1", "@k8slens/kube-api": "^1.0.0-alpha.1", diff --git a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable.ts deleted file mode 100644 index 854b3a8c3a..0000000000 --- a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * 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 { computed } from "mobx"; -import { frontEndRouteInjectionToken } from "../../../../front-end-route-injection-token"; - -const crdListRouteInjectable = getInjectable({ - id: "crd-list-route", - - instantiate: () => ({ - path: "/crd/definitions", - clusterFrame: true, - isEnabled: computed(() => true), - }), - - injectionToken: frontEndRouteInjectionToken, -}); - -export default crdListRouteInjectable; diff --git a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable.ts new file mode 100644 index 0000000000..74251a6499 --- /dev/null +++ b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable.ts @@ -0,0 +1,24 @@ +/** + * 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 { shouldShowResourceInjectionToken } from "../../../../../features/cluster/showing-kube-resources/common/allowed-resources-injection-token"; +import { frontEndRouteInjectionToken } from "../../../front-end-route-injection-token"; + +const customResourceDefinitionsRouteInjectable = getInjectable({ + id: "custom-resource-definitions-route", + + instantiate: (di) => ({ + path: "/crd/definitions", + clusterFrame: true, + isEnabled: di.inject(shouldShowResourceInjectionToken, { + group: "apiextensions.k8s.io", + apiName: "customresourcedefinitions", + }), + }), + + injectionToken: frontEndRouteInjectionToken, +}); + +export default customResourceDefinitionsRouteInjectable; diff --git a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable.ts similarity index 80% rename from packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable.ts rename to packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable.ts index cc7d9b40be..5f0c35c76d 100644 --- a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable.ts +++ b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable.ts @@ -4,8 +4,8 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; -import type { Route } from "../../../../front-end-route-injection-token"; -import { frontEndRouteInjectionToken } from "../../../../front-end-route-injection-token"; +import type { Route } from "../../../front-end-route-injection-token"; +import { frontEndRouteInjectionToken } from "../../../front-end-route-injection-token"; export interface CustomResourcesPathParameters { group?: string; diff --git a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/crd-list/navigate-to-crd-list.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resource-definitions.injectable.ts similarity index 75% rename from packages/core/src/common/front-end-routing/routes/cluster/custom-resources/crd-list/navigate-to-crd-list.injectable.ts rename to packages/core/src/common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resource-definitions.injectable.ts index bd78dd1174..adf22eff34 100644 --- a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/crd-list/navigate-to-crd-list.injectable.ts +++ b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resource-definitions.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 crdListRouteInjectable from "./crd-list-route.injectable"; -import { navigateToRouteInjectionToken } from "../../../../navigate-to-route-injection-token"; +import { navigateToRouteInjectionToken } from "../../../navigate-to-route-injection-token"; +import crdListRouteInjectable from "./custom-resource-definitions.injectable"; const navigateToCrdListInjectable = getInjectable({ id: "navigate-to-crd-list", diff --git a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable.ts similarity index 77% rename from packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable.ts rename to packages/core/src/common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable.ts index 9df8cd6e2c..d8206324e2 100644 --- a/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable.ts +++ b/packages/core/src/common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable.ts @@ -3,9 +3,9 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; +import { navigateToRouteInjectionToken } from "../../../navigate-to-route-injection-token"; import type { CustomResourcesPathParameters } from "./custom-resources-route.injectable"; import customResourcesRouteInjectable from "./custom-resources-route.injectable"; -import { navigateToRouteInjectionToken } from "../../../../navigate-to-route-injection-token"; const navigateToCustomResourcesInjectable = getInjectable({ id: "navigate-to-custom-resources", @@ -14,8 +14,7 @@ const navigateToCustomResourcesInjectable = getInjectable({ const navigateToRoute = di.inject(navigateToRouteInjectionToken); const route = di.inject(customResourcesRouteInjectable); - return (parameters?: CustomResourcesPathParameters) => - navigateToRoute(route, { parameters }); + return (parameters?: CustomResourcesPathParameters) => navigateToRoute(route, { parameters }); }, }); diff --git a/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable.ts new file mode 100644 index 0000000000..6ea8ffd736 --- /dev/null +++ b/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable.ts @@ -0,0 +1,24 @@ +/** + * 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 { frontEndRouteInjectionToken } from "../../../../front-end-route-injection-token"; +import { shouldShowResourceInjectionToken } from "../../../../../../features/cluster/showing-kube-resources/common/allowed-resources-injection-token"; + +const ingressClassesRouteInjectable = getInjectable({ + id: "ingress-classes-route", + + instantiate: (di) => ({ + path: "/ingress-classes", + clusterFrame: true, + isEnabled: di.inject(shouldShowResourceInjectionToken, { + apiName: "ingressclasses", + group: "networking.k8s.io", + }), + }), + + injectionToken: frontEndRouteInjectionToken, +}); + +export default ingressClassesRouteInjectable; diff --git a/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable.ts deleted file mode 100644 index efde1d8d7a..0000000000 --- a/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * 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 { frontEndRouteInjectionToken } from "../../../../front-end-route-injection-token"; -import { - shouldShowResourceInjectionToken, -} from "../../../../../../features/cluster/showing-kube-resources/common/allowed-resources-injection-token"; - -const ingressClassesesRouteInjectable = getInjectable({ - id: "ingress-classes-route", - - instantiate: (di) => { - const isEnabled = di.inject(shouldShowResourceInjectionToken, { - apiName: "ingressclasses", - group: "networking.k8s.io", - }); - - return { - path: "/ingress-classes", - clusterFrame: true, - isEnabled, - }; - }, - - injectionToken: frontEndRouteInjectionToken, -}); - -export default ingressClassesesRouteInjectable; diff --git a/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable.ts b/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable.ts index 22c666d5ae..1cc241ef7e 100644 --- a/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable.ts +++ b/packages/core/src/common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable.ts @@ -4,14 +4,14 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { navigateToRouteInjectionToken } from "../../../../navigate-to-route-injection-token"; -import ingressClassesesRouteInjectable from "./ingress-classeses-route.injectable"; +import ingressClassesRouteInjectable from "./ingress-classes-route.injectable"; const navigateToIngressesInjectable = getInjectable({ id: "navigate-to-ingress-classes", instantiate: (di) => { const navigateToRoute = di.inject(navigateToRouteInjectionToken); - const route = di.inject(ingressClassesesRouteInjectable); + const route = di.inject(ingressClassesRouteInjectable); return () => navigateToRoute(route); }, diff --git a/packages/core/src/common/utils/composable-responsibilities/orderable/orderable.ts b/packages/core/src/common/utils/composable-responsibilities/orderable/orderable.ts deleted file mode 100644 index 2b4d95b3f4..0000000000 --- a/packages/core/src/common/utils/composable-responsibilities/orderable/orderable.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ - -import { sortBy } from "lodash/fp"; - -export interface Orderable { - readonly orderNumber: number; -} - -export type MaybeOrderable = Orderable | object; - -export const orderByOrderNumber = (maybeOrderables: T[]) => - sortBy( - (orderable) => - "orderNumber" in orderable - ? orderable.orderNumber - : Number.MAX_SAFE_INTEGER, - maybeOrderables, - ); - -export const byOrderNumber = (left: T, right: T) => ( - left.orderNumber - right.orderNumber -); diff --git a/packages/core/src/features/application-menu/main/application-menu-item-composite.injectable.ts b/packages/core/src/features/application-menu/main/application-menu-item-composite.injectable.ts index b9012fb67b..53a34338ba 100644 --- a/packages/core/src/features/application-menu/main/application-menu-item-composite.injectable.ts +++ b/packages/core/src/features/application-menu/main/application-menu-item-composite.injectable.ts @@ -4,18 +4,17 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import applicationMenuItemsInjectable from "./application-menu-items.injectable"; -import type { Composite } from "../../../common/utils/composite/get-composite/get-composite"; import { getCompositeFor } from "../../../common/utils/composite/get-composite/get-composite"; import { computed } from "mobx"; -import { pipeline } from "@ogre-tools/fp"; import type { ApplicationMenuItemTypes } from "./menu-items/application-menu-item-injection-token"; import type { RootComposite } from "../../../common/utils/composite/interfaces"; import type { Discriminable } from "../../../common/utils/composable-responsibilities/discriminable/discriminable"; -import { orderByOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable"; import logErrorInjectable from "../../../common/log-error.injectable"; import { isShown } from "../../../common/utils/composable-responsibilities/showable/showable"; +import type { Orderable } from "@k8slens/utilities"; +import { byOrderNumber } from "@k8slens/utilities"; -export type MenuItemRoot = Discriminable<"root"> & RootComposite<"root">; +export type MenuItemRoot = Discriminable<"root"> & RootComposite<"root"> & Orderable; const applicationMenuItemCompositeInjectable = getInjectable({ id: "application-menu-item-composite", @@ -24,40 +23,30 @@ const applicationMenuItemCompositeInjectable = getInjectable({ const menuItems = di.inject(applicationMenuItemsInjectable); const logError = di.inject(logErrorInjectable); - return computed((): Composite => { - const items = menuItems.get(); + const getComposite = getCompositeFor({ + getId: (x) => x.id, + getParentId: (x) => x.parentId, + transformChildren: (children) => ( + [...children] + .sort(byOrderNumber) + .filter(isShown) + ), + handleMissingParentIds: ({ missingParentIds }) => { + const ids = missingParentIds.join('", "'); - return pipeline( - [ - { - parentId: undefined, - id: "root", - kind: "root", - } as const, - - ...items, - ], - - getCompositeFor({ - getId: (x) => x.id, - getParentId: (x) => x.parentId, - transformChildren: (children) => - pipeline( - children, - orderByOrderNumber, - (children) => children.filter(isShown), - ), - - handleMissingParentIds: ({ missingParentIds }) => { - logError( - `[MENU]: cannot render menu item for missing parentIds: "${missingParentIds.join( - '", "', - )}"`, - ); - }, - }), - ); + logError(`[MENU]: cannot render menu item for missing parentIds: "${ids}"`); + }, }); + + return computed(() => getComposite([ + { + parentId: undefined, + id: "root", + kind: "root", + orderNumber: -Infinity, + } as const, + ...menuItems.get(), + ])); }, }); diff --git a/packages/core/src/features/application-menu/main/menu-items/application-menu-item-injection-token.ts b/packages/core/src/features/application-menu/main/menu-items/application-menu-item-injection-token.ts index b90e5e1612..1da1bc00b7 100644 --- a/packages/core/src/features/application-menu/main/menu-items/application-menu-item-injection-token.ts +++ b/packages/core/src/features/application-menu/main/menu-items/application-menu-item-injection-token.ts @@ -8,7 +8,7 @@ import type { SetOptional } from "type-fest"; import type { ChildOfParentComposite, ParentOfChildComposite } from "../../../../common/utils/composite/interfaces"; import type { MaybeShowable } from "../../../../common/utils/composable-responsibilities/showable/showable"; import type { Discriminable } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable"; -import type { Orderable } from "../../../../common/utils/composable-responsibilities/orderable/orderable"; +import type { Orderable } from "@k8slens/utilities"; export interface MayHaveKeyboardShortcut { keyboardShortcut?: string; diff --git a/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap new file mode 100644 index 0000000000..7ec3ae37ee --- /dev/null +++ b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap @@ -0,0 +1,3847 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`cluster - custom resources in sidebar renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[`cluster - custom resources in sidebar when custom resource definitions are an allowed resource renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[`cluster - custom resources in sidebar when custom resource exists renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[`cluster - custom resources in sidebar when custom resource exists when custom resource definitions are an allowed resource renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[`cluster - custom resources in sidebar when custom resource exists when custom resource definitions are an allowed resource when custom resources sidebar item is expanded renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_up + + + +
+
+ + + Definitions + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[`cluster - custom resources in sidebar when custom resource exists when specific custom resource is an allowed resource renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[`cluster - custom resources in sidebar when custom resource exists when specific custom resource is an allowed resource when custom resources sidebar item is expanded renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_up + + + +
+
+ + + some-group + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[`cluster - custom resources in sidebar when custom resource exists when specific custom resource is an allowed resource when custom resources sidebar item is expanded when custom resources group sidebar item is expanded renders 1`] = ` +
+
+
+
+
+ +
+ + + close + + +
+ Close +
+
+
+
+
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_up + + + +
+
+ + + some-group + + + + keyboard_arrow_up + + + +
+
+ + + SomeResource + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; diff --git a/packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx b/packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx new file mode 100644 index 0000000000..c9199aba42 --- /dev/null +++ b/packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx @@ -0,0 +1,244 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import type { RenderResult } from "@testing-library/react"; +import { CustomResourceDefinition } from "../../extensions/common-api/k8s-api"; +import type { CustomResourceDefinitionStore } from "../../renderer/components/custom-resources/definition.store"; +import customResourceDefinitionStoreInjectable from "../../renderer/components/custom-resources/definition.store.injectable"; +import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; +import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; + +describe("cluster - custom resources in sidebar", () => { + let builder: ApplicationBuilder; + let result: RenderResult; + let customResourceDefinitionStore: CustomResourceDefinitionStore; + let customResourceDefinition: CustomResourceDefinition; + + beforeEach(async () => { + builder = getApplicationBuilder(); + builder.setEnvironmentToClusterFrame(); + + builder.afterWindowStart(({ windowDi }) => { + customResourceDefinitionStore = windowDi.inject(customResourceDefinitionStoreInjectable); + customResourceDefinition = new CustomResourceDefinition({ + apiVersion: "apiextensions.k8s.io/v1", + kind: "CustomResourceDefinition", + metadata: { + name: "some-crd", + selfLink: "/apis/apiextensions.k8s.io/v1/customresourcedefinitions/some-crd", + uid: "some-uid", + resourceVersion: "1", + }, + spec: { + group: "some-group", + scope: "Cluster", + names: { + kind: "SomeResource", + plural: "some-resources", + singular: "some-resource", + }, + versions: [ + { + storage: true, + name: "v1", + served: true, + additionalPrinterColumns: [ + { + name: "Some Column", + type: "string", + description: "Some description", + jsonPath: ".spec.someColumn", + }, + ], + }, + ], + }, + }); + }); + + result = await builder.render(); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("shows the sidebar", () => { + expect(result.getByTestId("cluster-sidebar")).toBeInTheDocument(); + }); + + it("does not show Custom Resources section", () => { + expect(result.queryByTestId("sidebar-item-custom-resources")).not.toBeInTheDocument(); + }); + + describe("when custom resource exists", () => { + beforeEach(() => { + customResourceDefinitionStore.items.replace([ + customResourceDefinition, + ]); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("still does not show Custom Resources sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resources")).not.toBeInTheDocument(); + }); + + describe("when specific custom resource is an allowed resource", () => { + beforeEach(() => { + builder.allowKubeResource({ + apiName: "some-resources", + group: "some-group", + }); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("shows Custom Resources sidebar", () => { + expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument(); + }); + + it("shows Custom Resources sidebar as expandable", () => { + expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument(); + }); + + it("does not show SomeResources sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument(); + }); + + it("does not show Custom Resources Definitions sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument(); + }); + + describe("when custom resources sidebar item is expanded", () => { + beforeEach(() => { + result.getByTestId("sidebar-item-expand-icon-for-custom-resources").click(); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("shows Custom Resources sidebar", () => { + expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument(); + }); + + it("shows Custom Resources sidebar as expandable", () => { + expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument(); + }); + + it("shows some-group group sidebar item", () => { + expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument(); + }); + + it("does not show Custom Resources Definitions sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument(); + }); + + describe("when custom resources group sidebar item is expanded", () => { + beforeEach(() => { + result.getByTestId("sidebar-item-expand-icon-for-custom-resource-group-some-group").click(); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("shows some-group group sidebar item", () => { + expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument(); + }); + + it("shows some-resources group sidebar item", () => { + expect(result.getByTestId("sidebar-item-custom-resource-group-some-group/some-resources")).toBeInTheDocument(); + }); + }); + }); + }); + + describe("when custom resource definitions are an allowed resource", () => { + beforeEach(() => { + builder.allowKubeResource({ + apiName: "customresourcedefinitions", + group: "apiextensions.k8s.io", + }); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("shows Custom Resources sidebar", () => { + expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument(); + }); + + it("shows Custom Resources sidebar as expandable", () => { + expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument(); + }); + + it("does not show SomeResources sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument(); + }); + + it("does not show Custom Resources Definitions sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument(); + }); + + describe("when custom resources sidebar item is expanded", () => { + beforeEach(() => { + result.getByTestId("sidebar-item-expand-icon-for-custom-resources").click(); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("shows Custom Resources sidebar", () => { + expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument(); + }); + + it("shows Custom Resources sidebar as expandable", () => { + expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument(); + }); + + it("does not show SomeResources sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument(); + }); + + it("shows Custom Resources Definitions sidebar", () => { + expect(result.getByTestId("sidebar-item-custom-resource-definitions")).toBeInTheDocument(); + }); + }); + }); + }); + + describe("when custom resource definitions are an allowed resource", () => { + beforeEach(() => { + builder.allowKubeResource({ + apiName: "customresourcedefinitions", + group: "apiextensions.k8s.io", + }); + }); + + it("renders", () => { + expect(result.container).toMatchSnapshot(); + }); + + it("shows Custom Resources sidebar", () => { + expect(result.getByTestId("sidebar-item-custom-resources")).toBeInTheDocument(); + }); + + it("shows Custom Resources sidebar as expandable", () => { + expect(result.getByTestId("sidebar-item-expand-icon-for-custom-resources")).toBeInTheDocument(); + }); + + it("does not show Custom Resources Definitions sidebar", () => { + expect(result.queryByTestId("sidebar-item-custom-resource-definitions")).not.toBeInTheDocument(); + }); + }); +}); diff --git a/packages/core/src/features/cluster/order-of-sidebar-items.test.tsx b/packages/core/src/features/cluster/order-of-sidebar-items.test.tsx index 2b24c3a5b1..244a2b6960 100644 --- a/packages/core/src/features/cluster/order-of-sidebar-items.test.tsx +++ b/packages/core/src/features/cluster/order-of-sidebar-items.test.tsx @@ -5,9 +5,8 @@ import { getInjectable } from "@ogre-tools/injectable"; import type { RenderResult } from "@testing-library/react"; import { fireEvent } from "@testing-library/react"; -import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable"; -import { computed, runInAction } from "mobx"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import { runInAction } from "mobx"; import { noop } from "lodash/fp"; import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; @@ -23,7 +22,14 @@ describe("cluster - order of sidebar items", () => { builder.beforeWindowStart(({ windowDi }) => { runInAction(() => { - windowDi.register(testSidebarItemsInjectable); + windowDi.register( + someParentSidebarItemInjectable, + someOtherParentSidebarItemInjectable, + someAnotherParentSidebarItemInjectable, + someChildSidebarItemInjectable, + someOtherChildSidebarItemInjectable, + someAnotherChildSidebarItemInjectable, + ); }); }); }); @@ -78,54 +84,74 @@ describe("cluster - order of sidebar items", () => { }); }); -const testSidebarItemsInjectable = getInjectable({ - id: "some-sidebar-item-injectable", - - instantiate: () => - computed((): SidebarItemRegistration[] => [ - { - id: "some-parent-id", - parentId: null, - title: "Some parent", - onClick: noop, - orderNumber: 42, - }, - { - id: "some-other-parent-id", - parentId: null, - title: "Some other parent", - onClick: noop, - orderNumber: 126, - }, - { - id: "some-another-parent-id", - parentId: null, - title: "Some another parent", - onClick: noop, - orderNumber: 84, - }, - { - id: "some-child-id", - parentId: "some-parent-id", - title: "Some child", - onClick: noop, - orderNumber: 168, - }, - { - id: "some-other-child-id", - parentId: "some-parent-id", - title: "Some other child", - onClick: noop, - orderNumber: 252, - }, - { - id: "some-another-child-id", - parentId: "some-parent-id", - title: "Some another child", - onClick: noop, - orderNumber: 210, - }, - ]), - - injectionToken: sidebarItemsInjectionToken, +const someParentSidebarItemInjectable = getInjectable({ + id: "some-parent-sidebar-item", + instantiate: () => ({ + id: "some-parent-id", + parentId: null, + title: "Some parent", + onClick: noop, + orderNumber: 42, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someOtherParentSidebarItemInjectable = getInjectable({ + id: "some-other-parent-sidebar-item", + instantiate: () => ({ + id: "some-other-parent-id", + parentId: null, + title: "Some other parent", + onClick: noop, + orderNumber: 126, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someAnotherParentSidebarItemInjectable = getInjectable({ + id: "some-another-parent-sidebar-item", + instantiate: () => ({ + id: "some-another-parent-id", + parentId: null, + title: "Some another parent", + onClick: noop, + orderNumber: 84, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someChildSidebarItemInjectable = getInjectable({ + id: "some-child-sidebar-item", + instantiate: (di) => ({ + id: "some-child-id", + parentId: di.inject(someParentSidebarItemInjectable).id, + title: "Some child", + onClick: noop, + orderNumber: 168, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someOtherChildSidebarItemInjectable = getInjectable({ + id: "some-other-child-sidebar-item", + instantiate: (di) => ({ + id: "some-other-child-id", + parentId: di.inject(someParentSidebarItemInjectable).id, + title: "Some other child", + onClick: noop, + orderNumber: 252, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someAnotherChildSidebarItemInjectable = getInjectable({ + id: "some-another-child-sidebar-item", + instantiate: (di) => ({ + id: "some-another-child-id", + parentId: di.inject(someParentSidebarItemInjectable).id, + title: "Some another child", + onClick: noop, + orderNumber: 210, + }), + injectionToken: sidebarItemInjectionToken, }); diff --git a/packages/core/src/features/cluster/sidebar-and-tab-navigation-for-core.test.tsx b/packages/core/src/features/cluster/sidebar-and-tab-navigation-for-core.test.tsx index 4bd3234d13..d682e3ca16 100644 --- a/packages/core/src/features/cluster/sidebar-and-tab-navigation-for-core.test.tsx +++ b/packages/core/src/features/cluster/sidebar-and-tab-navigation-for-core.test.tsx @@ -8,8 +8,7 @@ import React from "react"; import type { RenderResult } from "@testing-library/react"; import { fireEvent } from "@testing-library/react"; import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token"; -import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { computed, runInAction } from "mobx"; import { noop } from "lodash/fp"; import routeIsActiveInjectable from "../../renderer/routes/route-is-active.injectable"; @@ -44,9 +43,12 @@ describe("cluster - sidebar and tab navigation for core", () => { beforeEach(() => { builder.beforeWindowStart(({ windowDi }) => { runInAction(() => { - windowDi.register(testRouteInjectable); - windowDi.register(testRouteComponentInjectable); - windowDi.register(testSidebarItemsInjectable); + windowDi.register( + testRouteInjectable, + testRouteComponentInjectable, + someParentSidebarItemInjectable, + someChildSidebarItemInjectable, + ); }); }); }); @@ -292,36 +294,36 @@ describe("cluster - sidebar and tab navigation for core", () => { }); }); -const testSidebarItemsInjectable = getInjectable({ - id: "some-sidebar-items-injectable", +const someParentSidebarItemInjectable = getInjectable({ + id: "some-parent-sidebar-item", + instantiate: () => ({ + id: "some-parent-id", + parentId: null, + title: "Some parent", + onClick: noop, + getIcon: () =>
, + orderNumber: 42, + }), + injectionToken: sidebarItemInjectionToken, +}); +const someChildSidebarItemInjectable = getInjectable({ + id: "some-child-sidebar-item", instantiate: (di) => { const route = di.inject(testRouteInjectable); const navigateToRoute = di.inject(navigateToRouteInjectionToken); const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed((): SidebarItemRegistration[] => [ - { - id: "some-parent-id", - parentId: null, - title: "Some parent", - onClick: noop, - getIcon: () =>
, - orderNumber: 42, - }, - - { - id: "some-child-id", - parentId: "some-parent-id", - title: "Some child", - onClick: () => navigateToRoute(route), - isActive: routeIsActive, - orderNumber: 42, - }, - ]); + return { + id: "some-child-id", + parentId: di.inject(someParentSidebarItemInjectable).id, + title: "Some child", + onClick: () => navigateToRoute(route), + isActive: routeIsActive, + orderNumber: 168, + }; }, - - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); const testRouteInjectable = getInjectable({ diff --git a/packages/core/src/features/cluster/visibility-of-sidebar-items.test.tsx b/packages/core/src/features/cluster/visibility-of-sidebar-items.test.tsx index 46a8916241..4146e25ed7 100644 --- a/packages/core/src/features/cluster/visibility-of-sidebar-items.test.tsx +++ b/packages/core/src/features/cluster/visibility-of-sidebar-items.test.tsx @@ -4,9 +4,8 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import type { RenderResult } from "@testing-library/react"; -import type { SidebarItemRegistration } from "../../renderer/components/layout/sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../renderer/components/layout/sidebar-items.injectable"; -import { computed, runInAction } from "mobx"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import { runInAction } from "mobx"; import { routeSpecificComponentInjectionToken } from "../../renderer/routes/route-specific-component-injection-token"; import React from "react"; import { frontEndRouteInjectionToken } from "../../common/front-end-routing/front-end-route-injection-token"; @@ -102,18 +101,16 @@ const testSidebarItemsInjectable = getInjectable({ const testRoute = di.inject(testRouteInjectable); const navigateToRoute = di.inject(navigateToRouteInjectionToken); - return computed((): SidebarItemRegistration[] => [ - { - id: "some-item-id", - parentId: null, - title: "Some item", - onClick: () => navigateToRoute(testRoute), - isVisible: testRoute.isEnabled, - orderNumber: 42, - }, - ]); + return { + id: "some-item-id", + parentId: null, + title: "Some item", + onClick: () => navigateToRoute(testRoute), + isVisible: testRoute.isEnabled, + orderNumber: 42, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); diff --git a/packages/core/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts b/packages/core/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts index 38eb14aad8..71787b3fdf 100644 --- a/packages/core/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts +++ b/packages/core/src/features/preferences/renderer/preference-items/preference-item-injection-token.ts @@ -8,7 +8,7 @@ import type { ChildOfParentComposite, ParentOfChildComposite } from "../../../.. import type { Discriminable } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable"; import type { Labelable } from "../../../../common/utils/composable-responsibilities/labelable/labelable"; import type { MaybeShowable } from "../../../../common/utils/composable-responsibilities/showable/showable"; -import type { Orderable } from "../../../../common/utils/composable-responsibilities/orderable/orderable"; +import type { Orderable, MaybeOrderable } from "@k8slens/utilities"; import type { GetSeparator } from "../../../../common/utils/add-separator/add-separator"; import type { Composite } from "../../../../common/utils/composite/get-composite/get-composite"; @@ -50,6 +50,7 @@ export type PreferencePage = & Discriminable<"page"> & ParentOfChildComposite & ChildOfParentComposite + & MaybeOrderable & MaybeShowable & RenderableWithSiblings; @@ -57,6 +58,7 @@ export type PreferenceBlock = & Discriminable<"block"> & ParentOfChildComposite & ChildOfParentComposite + & MaybeOrderable & MaybeShowable & RenderableWithSiblings; diff --git a/packages/core/src/features/preferences/renderer/preference-items/preference-tab-root.tsx b/packages/core/src/features/preferences/renderer/preference-items/preference-tab-root.tsx index 2847c07515..e95e8680eb 100644 --- a/packages/core/src/features/preferences/renderer/preference-items/preference-tab-root.tsx +++ b/packages/core/src/features/preferences/renderer/preference-items/preference-tab-root.tsx @@ -8,16 +8,19 @@ import type { RootComposite } from "../../../../common/utils/composite/interface import type { Discriminable } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable"; import type { ChildrenAreSeparated } from "./preference-item-injection-token"; import styles from "./preference-tab-root.module.scss"; +import type { Orderable } from "@k8slens/utilities"; export type PreferenceTabsRoot = & Discriminable<"preference-tabs-root"> & RootComposite - & ChildrenAreSeparated; + & ChildrenAreSeparated + & Orderable; export const preferenceTabsRoot: PreferenceTabsRoot = { kind: "preference-tabs-root" as const, id: "preference-tabs", parentId: undefined, + orderNumber: Infinity, childSeparator: () => (
diff --git a/packages/core/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts b/packages/core/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts index dd1ffd1ed8..576dfd1cb7 100644 --- a/packages/core/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts +++ b/packages/core/src/features/preferences/renderer/preference-items/preferences-composite.injectable.ts @@ -7,13 +7,12 @@ import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-f import { computed } from "mobx"; import type { PreferenceItemTypes } from "./preference-item-injection-token"; import { preferenceItemInjectionToken } from "./preference-item-injection-token"; -import { pipeline } from "@ogre-tools/fp"; import type { PreferenceTabsRoot } from "./preference-tab-root"; import { preferenceTabsRoot } from "./preference-tab-root"; import logErrorInjectable from "../../../../common/log-error.injectable"; import { isShown } from "../../../../common/utils/composable-responsibilities/showable/showable"; -import { orderByOrderNumber } from "../../../../common/utils/composable-responsibilities/orderable/orderable"; import { getCompositeFor } from "../../../../common/utils/composite/get-composite/get-composite"; +import { byOrderNumber } from "@k8slens/utilities"; const preferencesCompositeInjectable = getInjectable({ id: "preferences-composite", @@ -27,27 +26,25 @@ const preferencesCompositeInjectable = getInjectable({ getId: (x) => x.id, getParentId: (x) => x.parentId, - handleMissingParentIds: (ids) => { - logError( - `Tried to create preferences, but encountered references to unknown ids: "${ids.missingParentIds.join( - '", "', - )}".\n\nAvailable ids are:\n\n${ids.availableParentIds.join("\n")}`, - ); + handleMissingParentIds: ({ missingParentIds, availableParentIds }) => { + const missingIds = missingParentIds.join('", "'); + const availableIds = availableParentIds.join("\n"); + + logError([ + `Tried to create preferences, but encountered references to unknown ids: "${missingIds}".`, + "Available ids are:", + availableIds, + ].join("\n\n")); }, - transformChildren: (children) => - pipeline( - children.filter(isShown), - orderByOrderNumber, - ), + transformChildren: (children) => ( + children + .filter(isShown) + .sort(byOrderNumber) + ), }); - return computed(() => - pipeline( - [preferenceTabsRoot, ...preferenceItems.get()], - getComposite, - ), - ); + return computed(() => getComposite([preferenceTabsRoot, ...preferenceItems.get()])); }, }); diff --git a/packages/core/src/main/cluster/request-api-resources.injectable.ts b/packages/core/src/main/cluster/request-api-resources.injectable.ts index 3d8180b7a6..1de88b5f60 100644 --- a/packages/core/src/main/cluster/request-api-resources.injectable.ts +++ b/packages/core/src/main/cluster/request-api-resources.injectable.ts @@ -12,7 +12,7 @@ import { backoffCaller, withConcurrencyLimit } from "@k8slens/utilities"; import requestKubeApiResourcesForInjectable from "./request-kube-api-resources-for.injectable"; import type { AsyncResult } from "@k8slens/utilities"; import broadcastConnectionUpdateInjectable from "./broadcast-connection-update.injectable"; -import { byOrderNumber } from "../../common/utils/composable-responsibilities/orderable/orderable"; +import { byOrderNumber } from "@k8slens/utilities"; export type RequestApiResources = (cluster: Cluster) => AsyncResult; diff --git a/packages/core/src/renderer/components/catalog/entity-details/detail-items.injectable.ts b/packages/core/src/renderer/components/catalog/entity-details/detail-items.injectable.ts index 7ef414d988..ee0630f571 100644 --- a/packages/core/src/renderer/components/catalog/entity-details/detail-items.injectable.ts +++ b/packages/core/src/renderer/components/catalog/entity-details/detail-items.injectable.ts @@ -5,7 +5,7 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; import { computed } from "mobx"; -import { byOrderNumber } from "../../../../common/utils/composable-responsibilities/orderable/orderable"; +import { byOrderNumber } from "@k8slens/utilities"; import type { CatalogEntity } from "../../../api/catalog-entity"; import { catalogEntityDetailItemInjectionToken } from "./token"; diff --git a/packages/core/src/renderer/components/cluster/cluster-overview-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/cluster/cluster-overview-sidebar-items.injectable.tsx index 5232f36153..6df3a67382 100644 --- a/packages/core/src/renderer/components/cluster/cluster-overview-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/cluster/cluster-overview-sidebar-items.injectable.tsx @@ -5,39 +5,30 @@ import { getInjectable } from "@ogre-tools/injectable"; import { Icon } from "@k8slens/icon"; import React from "react"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; -import { computed } from "mobx"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import clusterOverviewRouteInjectable from "../../../common/front-end-routing/routes/cluster/overview/cluster-overview-route.injectable"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToClusterOverviewInjectable from "../../../common/front-end-routing/routes/cluster/overview/navigate-to-cluster-overview.injectable"; -const clusterOverviewSidebarItemsInjectable = getInjectable({ - id: "cluster-overview-sidebar-items", +const clusterOverviewSidebarItemInjectable = getInjectable({ + id: "cluster-overview-sidebar-item", instantiate: (di) => { const route = di.inject(clusterOverviewRouteInjectable); - const navigateToClusterOverview = di.inject(navigateToClusterOverviewInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed((): SidebarItemRegistration[] => [ - { - id: "cluster-overview", - parentId: null, - title: "Cluster", - getIcon: () => , - onClick: navigateToClusterOverview, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 10, - }, - ]); + return { + id: "cluster-overview", + parentId: null, + title: "Cluster", + getIcon: () => , + onClick: di.inject(navigateToClusterOverviewInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 10, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default clusterOverviewSidebarItemsInjectable; +export default clusterOverviewSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/cluster/cluster-overview.tsx b/packages/core/src/renderer/components/cluster/cluster-overview.tsx index f14c8fea2e..f2c5c1dace 100644 --- a/packages/core/src/renderer/components/cluster/cluster-overview.tsx +++ b/packages/core/src/renderer/components/cluster/cluster-overview.tsx @@ -10,6 +10,7 @@ import type { IComputedValue } from "mobx"; import { disposeOnUnmount, observer } from "mobx-react"; import type { NodeStore } from "../nodes/store"; import type { PodStore } from "../workloads-pods/store"; +import { byOrderNumber } from "@k8slens/utilities"; import { TabLayout } from "../layout/tab-layout"; import { Spinner } from "../spinner"; import { ClusterIssues } from "./cluster-issues"; @@ -25,7 +26,6 @@ import nodeStoreInjectable from "../nodes/store.injectable"; import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable"; import type { ClusterOverviewUIBlock } from "@k8slens/metrics"; import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics"; -import { orderByOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable"; import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; import type { ClusterMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable"; import clusterOverviewMetricsInjectable from "./cluster-metrics.injectable"; @@ -56,10 +56,9 @@ class NonInjectedClusterOverview extends React.Component { return ( <> { - orderByOrderNumber(this.props.uiBlocks.get()) - .map((block) => ( - - )) + [...this.props.uiBlocks.get()] + .sort(byOrderNumber) + .map(block => ) } diff --git a/packages/core/src/renderer/components/command-palette/registered-commands/internal-commands.injectable.tsx b/packages/core/src/renderer/components/command-palette/registered-commands/internal-commands.injectable.tsx index 578b5fc867..e160e1b49c 100644 --- a/packages/core/src/renderer/components/command-palette/registered-commands/internal-commands.injectable.tsx +++ b/packages/core/src/renderer/components/command-palette/registered-commands/internal-commands.injectable.tsx @@ -34,7 +34,7 @@ import navigateToDaemonsetsInjectable from "../../../../common/front-end-routing import navigateToStatefulsetsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/statefulsets/navigate-to-statefulsets.injectable"; import navigateToJobsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/jobs/navigate-to-jobs.injectable"; import navigateToCronJobsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/navigate-to-cron-jobs.injectable"; -import navigateToCustomResourcesInjectable from "../../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable"; +import navigateToCustomResourcesInjectable from "../../../../common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable"; import navigateToEntitySettingsInjectable from "../../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable"; // TODO: Importing from features is not OK. Make commands to comply with Open Closed Principle to allow moving implementation under a feature diff --git a/packages/core/src/renderer/components/config-horizontal-pod-autoscalers/sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-horizontal-pod-autoscalers/sidebar-items.injectable.tsx index f8aaf99984..0415fb7d5c 100644 --- a/packages/core/src/renderer/components/config-horizontal-pod-autoscalers/sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-horizontal-pod-autoscalers/sidebar-items.injectable.tsx @@ -3,36 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import horizontalPodAutoscalersRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/horizontal-pod-autoscalers/horizontal-pod-autoscalers-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToHorizontalPodAutoscalersInjectable from "../../../common/front-end-routing/routes/cluster/config/horizontal-pod-autoscalers/navigate-to-horizontal-pod-autoscalers.injectable"; -const horizontalPodAutoScalersSidebarItemsInjectable = getInjectable({ - id: "horizontal-pod-auto-scalers-sidebar-items", +const horizontalPodAutoScalersSidebarItemInjectable = getInjectable({ + id: "horizontal-pod-auto-scalers-sidebar-item", instantiate: (di) => { const route = di.inject(horizontalPodAutoscalersRouteInjectable); - const navigateToHorizontalPodAutoscalers = di.inject(navigateToHorizontalPodAutoscalersInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed((): SidebarItemRegistration[] => [ - { - id: "horizontal-pod-auto-scalers", - parentId: configSidebarItemId, - title: "HPA", - onClick: navigateToHorizontalPodAutoscalers, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 50, - }, - ]); + return { + id: "horizontal-pod-auto-scalers", + parentId: di.inject(configSidebarItemInjectable).id, + title: "HPA", + onClick: di.inject(navigateToHorizontalPodAutoscalersInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 50, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default horizontalPodAutoScalersSidebarItemsInjectable; +export default horizontalPodAutoScalersSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-leases/leases-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-leases/leases-sidebar-items.injectable.tsx index 806749664a..c2031ff11b 100644 --- a/packages/core/src/renderer/components/config-leases/leases-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-leases/leases-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import leasesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/leases/leases-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToLeasesInjectable from "../../../common/front-end-routing/routes/cluster/config/leases/navigate-to-leases.injectable"; -const leasesSidebarItemsInjectable = getInjectable({ - id: "leases-sidebar-items", +const leasesSidebarItemInjectable = getInjectable({ + id: "leases-sidebar-item", instantiate: (di) => { const route = di.inject(leasesRouteInjectable); - const navigateToLeases = di.inject(navigateToLeasesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "leases", - parentId: configSidebarItemId, - title: "Leases", - onClick: navigateToLeases, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 80, - }, - ]); + return { + id: "leases", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Leases", + onClick: di.inject(navigateToLeasesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 80, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default leasesSidebarItemsInjectable; +export default leasesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-limit-ranges/limit-ranges-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-limit-ranges/limit-ranges-sidebar-items.injectable.tsx index 55b6297370..d9e627a0a1 100644 --- a/packages/core/src/renderer/components/config-limit-ranges/limit-ranges-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-limit-ranges/limit-ranges-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import limitRangesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/limit-ranges/limit-ranges-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToLimitRangesInjectable from "../../../common/front-end-routing/routes/cluster/config/limit-ranges/navigate-to-limit-ranges.injectable"; -const limitRangesSidebarItemsInjectable = getInjectable({ - id: "limit-ranges-sidebar-items", +const limitRangesSidebarItemInjectable = getInjectable({ + id: "limit-ranges-sidebar-item", instantiate: (di) => { const route = di.inject(limitRangesRouteInjectable); - const navigateToLimitRanges = di.inject(navigateToLimitRangesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "limit-ranges", - parentId: configSidebarItemId, - title: "Limit Ranges", - onClick: navigateToLimitRanges, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 40, - }, - ]); + return { + id: "limit-ranges", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Limit Ranges", + onClick: di.inject(navigateToLimitRangesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 40, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default limitRangesSidebarItemsInjectable; +export default limitRangesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-maps/config-maps-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-maps/config-maps-sidebar-items.injectable.tsx index 90f776f1c3..53ff516c53 100644 --- a/packages/core/src/renderer/components/config-maps/config-maps-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-maps/config-maps-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import configMapsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/config-maps/config-maps-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToConfigMapsInjectable from "../../../common/front-end-routing/routes/cluster/config/config-maps/navigate-to-config-maps.injectable"; -const configMapsSidebarItemsInjectable = getInjectable({ - id: "config-maps-sidebar-items", +const configMapsSidebarItemInjectable = getInjectable({ + id: "config-maps-sidebar-item", instantiate: (di) => { const route = di.inject(configMapsRouteInjectable); - const navigateToConfigMaps = di.inject(navigateToConfigMapsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "config-maps", - parentId: configSidebarItemId, - title: "ConfigMaps", - onClick: navigateToConfigMaps, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 10, - }, - ]); + return { + id: "config-maps", + parentId: di.inject(configSidebarItemInjectable).id, + title: "ConfigMaps", + onClick: di.inject(navigateToConfigMapsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 10, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default configMapsSidebarItemsInjectable; +export default configMapsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-sidebar-items.injectable.ts b/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-sidebar-items.injectable.ts index a897adbfa3..8dc30d90a4 100644 --- a/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-sidebar-items.injectable.ts +++ b/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-sidebar-items.injectable.ts @@ -3,37 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; -import mutatingWebhookConfigurationsRouteInjectable - from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/mutating-webhook-configurations-route.injectable"; -import navigateToMutatingWebhookConfigurationsInjectable - from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/navigate-to-mutating-webhook-configurations.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; +import mutatingWebhookConfigurationsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/mutating-webhook-configurations-route.injectable"; +import navigateToMutatingWebhookConfigurationsInjectable from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/navigate-to-mutating-webhook-configurations.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; -const mutatingWebhookConfigurationsSidebarItemsInjectable = getInjectable({ - id: "mutating-webhook-configurations-sidebar-items", +const mutatingWebhookConfigurationsSidebarItemInjectable = getInjectable({ + id: "mutating-webhook-configurations-sidebar-item", instantiate: (di) => { const route = di.inject(mutatingWebhookConfigurationsRouteInjectable); - const navigateToPage = di.inject(navigateToMutatingWebhookConfigurationsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "mutating-webhook-configurations", - parentId: configSidebarItemId, - title: "Mutating Webhook Configs", - onClick: navigateToPage, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 100, - }, - ]); + return { + id: "mutating-webhook-configurations", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Mutating Webhook Configs", + onClick: di.inject(navigateToMutatingWebhookConfigurationsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 100, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default mutatingWebhookConfigurationsSidebarItemsInjectable; +export default mutatingWebhookConfigurationsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-sidebar-items.injectable.tsx index 51f6fd70a9..a44ce1b9b9 100644 --- a/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import podDisruptionBudgetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/pod-disruption-budgets/pod-disruption-budgets-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToPodDisruptionBudgetsInjectable from "../../../common/front-end-routing/routes/cluster/config/pod-disruption-budgets/navigate-to-pod-disruption-budgets.injectable"; -const podDisruptionBudgetsSidebarItemsInjectable = getInjectable({ - id: "pod-disruption-budgets-sidebar-items", +const podDisruptionBudgetsSidebarItemInjectable = getInjectable({ + id: "pod-disruption-budgets-sidebar-item", instantiate: (di) => { const route = di.inject(podDisruptionBudgetsRouteInjectable); - const navigateToPodDisruptionBudgets = di.inject(navigateToPodDisruptionBudgetsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "pod-disruption-budgets", - parentId: configSidebarItemId, - title: "Pod Disruption Budgets", - onClick: navigateToPodDisruptionBudgets, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 60, - }, - ]); + return { + id: "pod-disruption-budgets", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Pod Disruption Budgets", + onClick: di.inject(navigateToPodDisruptionBudgetsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 60, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default podDisruptionBudgetsSidebarItemsInjectable; +export default podDisruptionBudgetsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-priority-classes/priority-classes-items.injectable.tsx b/packages/core/src/renderer/components/config-priority-classes/priority-classes-items.injectable.tsx index be4ed383a9..9ba31243ea 100644 --- a/packages/core/src/renderer/components/config-priority-classes/priority-classes-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-priority-classes/priority-classes-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import priorityClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/priority-classes/priority-classes-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToPriorityClassesInjectable from "../../../common/front-end-routing/routes/cluster/config/priority-classes/navigate-to-priority-classes.injectable"; -const priorityClassesSidebarItemsInjectable = getInjectable({ - id: "priority-classes-sidebar-items", +const priorityClassesSidebarItemInjectable = getInjectable({ + id: "priority-classes-sidebar-item", instantiate: (di) => { const route = di.inject(priorityClassesRouteInjectable); - const navigateToPriorityClasses = di.inject(navigateToPriorityClassesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "priority-classes", - parentId: configSidebarItemId, - title: "Priority Classes", - onClick: navigateToPriorityClasses, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 70, - }, - ]); + return { + id: "priority-classes", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Priority Classes", + onClick: di.inject(navigateToPriorityClassesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 70, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default priorityClassesSidebarItemsInjectable; +export default priorityClassesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-resource-quotas/resource-quotas-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-resource-quotas/resource-quotas-sidebar-items.injectable.tsx index 51eddb15a4..be84cdf185 100644 --- a/packages/core/src/renderer/components/config-resource-quotas/resource-quotas-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-resource-quotas/resource-quotas-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import resourceQuotasRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/resource-quotas/resource-quotas-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToResourceQuotasInjectable from "../../../common/front-end-routing/routes/cluster/config/resource-quotas/navigate-to-resource-quotas.injectable"; -const resourceQuotasSidebarItemsInjectable = getInjectable({ - id: "resource-quotas-sidebar-items", +const resourceQuotasSidebarItemInjectable = getInjectable({ + id: "resource-quotas-sidebar-item", instantiate: (di) => { const route = di.inject(resourceQuotasRouteInjectable); - const navigateToResourceQuotas = di.inject(navigateToResourceQuotasInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "resource-quotas", - parentId: configSidebarItemId, - title: "Resource Quotas", - onClick: navigateToResourceQuotas, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 30, - }, - ]); + return { + id: "resource-quotas", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Resource Quotas", + onClick: di.inject(navigateToResourceQuotasInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 30, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default resourceQuotasSidebarItemsInjectable; +export default resourceQuotasSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-items.injectable.tsx b/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-items.injectable.tsx deleted file mode 100644 index 7cd7c79663..0000000000 --- a/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-items.injectable.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/** - * 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 { computed } from "mobx"; - -import runtimeClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/runtime-classes-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; -import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; -import navigateToRuntimeClassesInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/navigate-to-runtime-classes.injectable"; - -const runtimeClassesSidebarItemsInjectable = getInjectable({ - id: "runtime-classes-sidebar-items", - - instantiate: (di) => { - const route = di.inject(runtimeClassesRouteInjectable); - const navigateToRuntimeClasses = di.inject(navigateToRuntimeClassesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - - return computed(() => [ - { - id: "runtime-classes", - parentId: configSidebarItemId, - title: "Runtime Classes", - onClick: navigateToRuntimeClasses, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 70, - }, - ]); - }, - - injectionToken: sidebarItemsInjectionToken, -}); - -export default runtimeClassesSidebarItemsInjectable; diff --git a/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-sidebar-items.injectable.tsx new file mode 100644 index 0000000000..b059712b79 --- /dev/null +++ b/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-sidebar-items.injectable.tsx @@ -0,0 +1,33 @@ +/** + * 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 runtimeClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/runtime-classes-route.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; +import navigateToRuntimeClassesInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/navigate-to-runtime-classes.injectable"; + +const runtimeClassesSidebarItemInjectable = getInjectable({ + id: "runtime-classes-sidebar-item", + + instantiate: (di) => { + const route = di.inject(runtimeClassesRouteInjectable); + + return { + id: "runtime-classes", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Runtime Classes", + onClick: di.inject(navigateToRuntimeClassesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 70, + }; + }, + + injectionToken: sidebarItemInjectionToken, +}); + +export default runtimeClassesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-secrets/secrets-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-secrets/secrets-sidebar-items.injectable.tsx index 834f9f756c..51cd1a2f9b 100644 --- a/packages/core/src/renderer/components/config-secrets/secrets-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-secrets/secrets-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import secretsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/secrets/secrets-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToSecretsInjectable from "../../../common/front-end-routing/routes/cluster/config/secrets/navigate-to-secrets.injectable"; -const secretsSidebarItemsInjectable = getInjectable({ - id: "secrets-sidebar-items", +const secretsSidebarItemInjectable = getInjectable({ + id: "secrets-sidebar-item", instantiate: (di) => { const route = di.inject(secretsRouteInjectable); - const navigateToSecrets = di.inject(navigateToSecretsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "secrets", - parentId: configSidebarItemId, - title: "Secrets", - onClick: navigateToSecrets, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 20, - }, - ]); + return { + id: "secrets", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Secrets", + onClick: di.inject(navigateToSecretsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 20, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default secretsSidebarItemsInjectable; +export default secretsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-sidebar-items.injectable.ts b/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-sidebar-items.injectable.ts index 5717be3dd4..875fa3efdf 100644 --- a/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-sidebar-items.injectable.ts +++ b/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-sidebar-items.injectable.ts @@ -3,37 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; -import validatingWebhookConfigurationsRouteInjectable - from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/validating-webhook-configurations-route.injectable"; -import navigateToValidatingWebhookConfigurationsInjectable - from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/navigate-to-validating-webhook-configurations.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; +import validatingWebhookConfigurationsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/validating-webhook-configurations-route.injectable"; +import navigateToValidatingWebhookConfigurationsInjectable from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/navigate-to-validating-webhook-configurations.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; -const validatingWebhookConfigurationsSidebarItemsInjectable = getInjectable({ - id: "validating-webhook-configurations-sidebar-items", +const validatingWebhookConfigurationsSidebarItemInjectable = getInjectable({ + id: "validating-webhook-configurations-sidebar-item", instantiate: (di) => { const route = di.inject(validatingWebhookConfigurationsRouteInjectable); - const navigateToPage = di.inject(navigateToValidatingWebhookConfigurationsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "validating-webhook-configurations", - parentId: configSidebarItemId, - title: "Validating Webhook Configs", - onClick: navigateToPage, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 100, - }, - ]); + return { + id: "validating-webhook-configurations", + parentId: di.inject(configSidebarItemInjectable).id, + title: "Validating Webhook Configs", + onClick: di.inject(navigateToValidatingWebhookConfigurationsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 100, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default validatingWebhookConfigurationsSidebarItemsInjectable; +export default validatingWebhookConfigurationsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vertical-pod-auto-scalers-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vertical-pod-auto-scalers-sidebar-items.injectable.tsx index 0c9835a33c..ead9ccfe07 100644 --- a/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vertical-pod-auto-scalers-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vertical-pod-auto-scalers-sidebar-items.injectable.tsx @@ -3,36 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import verticalPodAutoscalersRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/vertical-pod-autoscalers-route.injectable"; -import { configSidebarItemId } from "../config/config-sidebar-items.injectable"; -import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import configSidebarItemInjectable from "../config/config-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToVerticalPodAutoscalersInjectable from "../../../common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/navigate-to-vertical-pod-autoscalers.injectable"; -const verticalPodAutoScalersSidebarItemsInjectable = getInjectable({ - id: "vertical-pod-auto-scalers-sidebar-items", +const verticalPodAutoScalersSidebarItemInjectable = getInjectable({ + id: "vertical-pod-auto-scalers-sidebar-item", instantiate: (di) => { const route = di.inject(verticalPodAutoscalersRouteInjectable); - const navigateToVerticalPodAutoscalers = di.inject(navigateToVerticalPodAutoscalersInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed((): SidebarItemRegistration[] => [ - { - id: "vertical-pod-auto-scalers", - parentId: configSidebarItemId, - title: "VPA", - onClick: navigateToVerticalPodAutoscalers, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 50, - }, - ]); + return { + id: "vertical-pod-auto-scalers", + parentId: di.inject(configSidebarItemInjectable).id, + title: "VPA", + onClick: di.inject(navigateToVerticalPodAutoscalersInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 50, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default verticalPodAutoScalersSidebarItemsInjectable; +export default verticalPodAutoScalersSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/config/config-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/config/config-sidebar-items.injectable.tsx index 4152869ca4..b642e77afb 100644 --- a/packages/core/src/renderer/components/config/config-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/config/config-sidebar-items.injectable.tsx @@ -5,32 +5,22 @@ import { getInjectable } from "@ogre-tools/injectable"; import { Icon } from "@k8slens/icon"; import React from "react"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; -import { computed } from "mobx"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { noop } from "lodash/fp"; -export const configSidebarItemId = "config"; +const configSidebarItemInjectable = getInjectable({ + id: "config-sidebar-item", -const configSidebarItemsInjectable = getInjectable({ - id: "config-sidebar-items", + instantiate: () => ({ + id: "config", + parentId: null, + title: "Config", + getIcon: () => , + onClick: noop, + orderNumber: 40, + }), - instantiate: () => - computed((): SidebarItemRegistration[] => [ - { - id: configSidebarItemId, - parentId: null, - title: "Config", - getIcon: () => , - onClick: noop, - orderNumber: 40, - }, - ]), - - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default configSidebarItemsInjectable; +export default configSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/custom-resources/crd-list-route-component.injectable.ts b/packages/core/src/renderer/components/custom-resources/crd-list-route-component.injectable.ts index 55e4a21006..be1823e247 100644 --- a/packages/core/src/renderer/components/custom-resources/crd-list-route-component.injectable.ts +++ b/packages/core/src/renderer/components/custom-resources/crd-list-route-component.injectable.ts @@ -4,7 +4,7 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token"; -import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable"; +import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable"; import { CustomResourceDefinitions } from "./crd-list"; const crdListRouteComponentInjectable = getInjectable({ diff --git a/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts b/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts new file mode 100644 index 0000000000..4c68b2dc17 --- /dev/null +++ b/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts @@ -0,0 +1,86 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import type { SidebarItemRegistration } from "@k8slens/cluster-sidebar"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import type { CustomResourceDefinition } from "@k8slens/kube-object"; +import { iter, noop, computedAnd } from "@k8slens/utilities"; +import { getInjectable } from "@ogre-tools/injectable"; +import { matches } from "lodash"; +import { computed } from "mobx"; +import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable"; +import navigateToCustomResourcesInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable"; +import { shouldShowResourceInjectionToken } from "../../../features/cluster/showing-kube-resources/common/allowed-resources-injection-token"; +import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; +import routePathParametersInjectable from "../../routes/route-path-parameters.injectable"; +import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-items.injectable"; +import customResourceDefinitionsInjectable from "./custom-resources.injectable"; + +const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectable({ + id: "custom-resource-definition-groups-sidebar-items-computed", + instantiate: (di) => { + const customResourceDefinitions = di.inject(customResourceDefinitionsInjectable); + const navigateToCustomResources = di.inject(navigateToCustomResourcesInjectable); + const customResourcesRoute = di.inject(customResourcesRouteInjectable); + const pathParameters = di.inject(routePathParametersInjectable, customResourcesRoute); + + const toCustomResourceGroupToSidebarItems = ([group, definitions]: [string, CustomResourceDefinition[]], index: number) => { + const customResourceGroupSidebarItem = getInjectable({ + id: `custom-resource-group-${group}-sidebar-item`, + instantiate: (di): SidebarItemRegistration => ({ + id: `custom-resource-group-${group}`, + parentId: di.inject(customResourcesSidebarItemInjectable).id, + onClick: noop, + title: group, + orderNumber: 10 * index, + }), + injectionToken: sidebarItemInjectionToken, + }); + const customResourceSidebarItems = definitions.map((definition, index) => { + const parameters = { + group: definition.getGroup(), + name: definition.getPluralName(), + }; + + return getInjectable({ + id: `custom-resource-group-${group}/${definition.getPluralName()}-sidebar-item`, + instantiate: (di): SidebarItemRegistration => ({ + id: `custom-resource-group-${group}/${definition.getPluralName()}`, + parentId: di.inject(customResourceGroupSidebarItem).id, + onClick: () => navigateToCustomResources(parameters), + title: definition.getResourceKind(), + isActive: computedAnd( + di.inject(routeIsActiveInjectable, customResourcesRoute), + computed(() => matches(parameters)(pathParameters.get())), + ), + isVisible: di.inject(shouldShowResourceInjectionToken, { + group: definition.getGroup(), + apiName: definition.getPluralName(), + }), + orderNumber: 10 * index, + }), + injectionToken: sidebarItemInjectionToken, + }); + }); + + return [ + customResourceGroupSidebarItem, + ...customResourceSidebarItems, + ]; + }; + + return computed(() => { + const customResourceDefinitionGroups = ( + iter.chain(customResourceDefinitions.get().values()) + .map((crd) => [crd.getGroup(), crd] as const) + .toMap() + ); + + return Array.from(customResourceDefinitionGroups.entries(), toCustomResourceGroupToSidebarItems) + .flat(); + }); + }, +}); + +export default customResourceDefinitionGroupsSidebarItemsComputedInjectable; diff --git a/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-registrator.injectable.ts b/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-registrator.injectable.ts new file mode 100644 index 0000000000..979eb8882d --- /dev/null +++ b/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-registrator.injectable.ts @@ -0,0 +1,29 @@ +/** + * 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 { reaction } from "mobx"; +import { injectableDifferencingRegistratorWith } from "../../../common/utils/registrator-helper"; +import { beforeClusterFrameStartsSecondInjectionToken } from "../../before-frame-starts/tokens"; +import customResourceDefinitionGroupsSidebarItemsComputedInjectable from "./custom-resource-definition-groups-sidebar-items-computed.injectable"; + +const customResourceDefinitionGroupsSidebarItemsRegistratorInjectable = getInjectable({ + id: "custom-resource-definition-groups-sidebar-items-registrator", + instantiate: (di) => ({ + run: () => { + const sidebarItems = di.inject(customResourceDefinitionGroupsSidebarItemsComputedInjectable); + const injectableDifferencingRegistrator = injectableDifferencingRegistratorWith(di); + + reaction( + () => sidebarItems.get(), + injectableDifferencingRegistrator, + { fireImmediately: true }, + ); + }, + }), + injectionToken: beforeClusterFrameStartsSecondInjectionToken, +}); + +export default customResourceDefinitionGroupsSidebarItemsRegistratorInjectable; + diff --git a/packages/core/src/renderer/components/custom-resources/custom-resource-definitions-sidebar-item.injectable.ts b/packages/core/src/renderer/components/custom-resources/custom-resource-definitions-sidebar-item.injectable.ts new file mode 100644 index 0000000000..d32c6026b6 --- /dev/null +++ b/packages/core/src/renderer/components/custom-resources/custom-resource-definitions-sidebar-item.injectable.ts @@ -0,0 +1,30 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import { getInjectable } from "@ogre-tools/injectable"; +import customResourceDefinitionsRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable"; +import navigateToCustomResourcesInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable"; +import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; +import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-items.injectable"; + +const customResourceDefinitionsSidebarItemInjectable = getInjectable({ + id: "custom-resource-definitions-sidebar-item", + instantiate: (di) => { + const customResourceDefinitionsRoute = di.inject(customResourceDefinitionsRouteInjectable); + + return { + id: "custom-resource-definitions", + parentId: di.inject(customResourcesSidebarItemInjectable).id, + title: "Definitions", + onClick: di.inject(navigateToCustomResourcesInjectable), + isActive: di.inject(routeIsActiveInjectable, customResourceDefinitionsRoute), + isVisible: customResourceDefinitionsRoute.isEnabled, + orderNumber: 10, + }; + }, + injectionToken: sidebarItemInjectionToken, +}); + +export default customResourceDefinitionsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/custom-resources/custom-resource-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/custom-resources/custom-resource-sidebar-items.injectable.tsx deleted file mode 100644 index 47746eedec..0000000000 --- a/packages/core/src/renderer/components/custom-resources/custom-resource-sidebar-items.injectable.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/** - * 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 { noop } from "lodash/fp"; -import { computed } from "mobx"; -import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; -import { Icon } from "@k8slens/icon"; -import React from "react"; -import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable"; -import sidebarItemsForDefinitionGroupsInjectable from "./sidebar-items-for-definition-groups.injectable"; -import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; -import navigateToCrdListInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/navigate-to-crd-list.injectable"; - -const customResourceSidebarItemsInjectable = getInjectable({ - id: "custom-resource-sidebar-items", - - instantiate: (di) => { - const navigateToCrdList = di.inject(navigateToCrdListInjectable); - const crdListRoute = di.inject(crdListRouteInjectable); - const crdListRouteIsActive = di.inject(routeIsActiveInjectable, crdListRoute); - const definitionGroupSidebarItems = di.inject(sidebarItemsForDefinitionGroupsInjectable); - - return computed((): SidebarItemRegistration[] => { - const definitionsItem = { - id: "definitions", - parentId: "custom-resources", - title: "Definitions", - onClick: navigateToCrdList, - isActive: crdListRouteIsActive, - isVisible: crdListRoute.isEnabled, - orderNumber: 10, - }; - - const childrenAndGrandChildren = computed(() => [ - definitionsItem, - ...definitionGroupSidebarItems.get(), - ]); - - const parentItem: SidebarItemRegistration = { - id: "custom-resources", - parentId: null, - title: "Custom Resources", - getIcon: () => , - onClick: noop, - isVisible: computed(() => childrenAndGrandChildren.get().some(item => item.isVisible?.get())), - orderNumber: 110, - }; - - return [parentItem, definitionsItem, ...definitionGroupSidebarItems.get()]; - }); - }, - - injectionToken: sidebarItemsInjectionToken, -}); - -export default customResourceSidebarItemsInjectable; diff --git a/packages/core/src/renderer/components/custom-resources/custom-resources-route-component.injectable.ts b/packages/core/src/renderer/components/custom-resources/custom-resources-route-component.injectable.ts index b31c5577d4..9d7d165b74 100644 --- a/packages/core/src/renderer/components/custom-resources/custom-resources-route-component.injectable.ts +++ b/packages/core/src/renderer/components/custom-resources/custom-resources-route-component.injectable.ts @@ -4,7 +4,7 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { CustomResources } from "./crd-resources"; -import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable"; +import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable"; import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token"; const customResourcesRouteComponentInjectable = getInjectable({ diff --git a/packages/core/src/renderer/components/custom-resources/custom-resources-route-parameters.injectable.ts b/packages/core/src/renderer/components/custom-resources/custom-resources-route-parameters.injectable.ts index 2debbe85bd..69368218fd 100644 --- a/packages/core/src/renderer/components/custom-resources/custom-resources-route-parameters.injectable.ts +++ b/packages/core/src/renderer/components/custom-resources/custom-resources-route-parameters.injectable.ts @@ -5,7 +5,7 @@ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; import routePathParametersInjectable from "../../routes/route-path-parameters.injectable"; -import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable"; +import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable"; const customResourcesRouteParametersInjectable = getInjectable({ id: "custom-resources-route-parameters", diff --git a/packages/core/src/renderer/components/custom-resources/custom-resources-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/custom-resources/custom-resources-sidebar-items.injectable.tsx new file mode 100644 index 0000000000..1487d82927 --- /dev/null +++ b/packages/core/src/renderer/components/custom-resources/custom-resources-sidebar-items.injectable.tsx @@ -0,0 +1,24 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import { noop } from "@k8slens/utilities"; +import { getInjectable } from "@ogre-tools/injectable"; +import React from "react"; +import { Icon } from "../icon"; + +const customResourcesSidebarItemInjectable = getInjectable({ + id: "custom-resources-sidebar-item", + instantiate: () => ({ + id: "custom-resources", + parentId: null, + title: "Custom Resources", + getIcon: () => , + onClick: noop, + orderNumber: 110, + }), + injectionToken: sidebarItemInjectionToken, +}); + +export default customResourcesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/custom-resources/sidebar-items-for-definition-groups.injectable.ts b/packages/core/src/renderer/components/custom-resources/sidebar-items-for-definition-groups.injectable.ts deleted file mode 100644 index 895df08dc4..0000000000 --- a/packages/core/src/renderer/components/custom-resources/sidebar-items-for-definition-groups.injectable.ts +++ /dev/null @@ -1,81 +0,0 @@ -/** - * 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 { computed } from "mobx"; -import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable"; -import customResourceDefinitionsInjectable from "./custom-resources.injectable"; -import { groupBy, matches, noop, some, toPairs } from "lodash/fp"; -import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable"; -import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; -import navigateToCustomResourcesInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable"; -import routePathParametersInjectable from "../../routes/route-path-parameters.injectable"; - -const sidebarItemsForDefinitionGroupsInjectable = getInjectable({ - id: "sidebar-items-for-definition-groups", - - instantiate: (di) => { - const customResourceDefinitions = di.inject( - customResourceDefinitionsInjectable, - ); - - const crdRoute = di.inject(customResourcesRouteInjectable); - const crdRouteIsActive = di.inject(routeIsActiveInjectable, crdRoute); - const crdListRoute = di.inject(crdListRouteInjectable); - const pathParameters = di.inject(routePathParametersInjectable, crdRoute); - const navigateToCustomResources = di.inject(navigateToCustomResourcesInjectable); - - return computed((): SidebarItemRegistration[] => { - const definitions = customResourceDefinitions.get(); - - const groupedCrds = toPairs( - groupBy((crd) => crd.getGroup(), definitions), - ); - - return groupedCrds.flatMap(([group, definitions]) => { - const childItems = definitions.map((crd) => { - const title = crd.getResourceKind(); - - const crdPathParameters = { - group: crd.getGroup(), - name: crd.getPluralName(), - }; - - return { - id: `custom-resource-definition-group-${group}-crd-${crd.getId()}`, - parentId: `custom-resource-definition-group-${group}`, - title, - - onClick: () => navigateToCustomResources(crdPathParameters), - - isActive: computed( - () => - crdRouteIsActive.get() && - matches(crdPathParameters, pathParameters.get()), - ), - - isVisible: crdListRoute.isEnabled, - orderNumber: 10, - }; - }); - - return [ - { - id: `custom-resource-definition-group-${group}`, - parentId: "custom-resources", - title: group, - onClick: noop, - isVisible: computed(() => some(item => item.isVisible.get(), childItems)), - orderNumber: 10, - }, - - ...childItems, - ]; - }); - }); - }, -}); - -export default sidebarItemsForDefinitionGroupsInjectable; diff --git a/packages/core/src/renderer/components/entity-settings/active-tabs.injectable.ts b/packages/core/src/renderer/components/entity-settings/active-tabs.injectable.ts index ae488f234e..1dabd579f2 100644 --- a/packages/core/src/renderer/components/entity-settings/active-tabs.injectable.ts +++ b/packages/core/src/renderer/components/entity-settings/active-tabs.injectable.ts @@ -4,7 +4,7 @@ */ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; import { action } from "mobx"; -import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable"; +import { byOrderNumber } from "@k8slens/utilities"; import type { CatalogEntity } from "../../api/catalog-entity"; import { observableHistoryInjectionToken } from "@k8slens/routing"; import type { RegisteredEntitySetting } from "./extension-registrator.injectable"; diff --git a/packages/core/src/renderer/components/entity-settings/settings.injectable.ts b/packages/core/src/renderer/components/entity-settings/settings.injectable.ts index c70063f2b6..dd519351fd 100644 --- a/packages/core/src/renderer/components/entity-settings/settings.injectable.ts +++ b/packages/core/src/renderer/components/entity-settings/settings.injectable.ts @@ -5,7 +5,7 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable"; import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; import { computed } from "mobx"; -import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable"; +import { byOrderNumber } from "@k8slens/utilities"; import type { CatalogEntity } from "../../api/catalog-entity"; import { entitySettingInjectionToken } from "./token"; diff --git a/packages/core/src/renderer/components/events/events-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/events/events-sidebar-items.injectable.tsx index 69283e8016..e3d6eae1fe 100644 --- a/packages/core/src/renderer/components/events/events-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/events/events-sidebar-items.injectable.tsx @@ -3,42 +3,33 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import React from "react"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import eventsRouteInjectable from "../../../common/front-end-routing/routes/cluster/events/events-route.injectable"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToEventsInjectable from "../../../common/front-end-routing/routes/cluster/events/navigate-to-events.injectable"; -const eventsSidebarItemsInjectable = getInjectable({ - id: "events-sidebar-items", +const eventsSidebarItemInjectable = getInjectable({ + id: "events-sidebar-item", instantiate: (di) => { const route = di.inject(eventsRouteInjectable); - const navigateToEvents = di.inject(navigateToEventsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed((): SidebarItemRegistration[] => [ - { - id: "events", - parentId: null, - getIcon: () => , - title: "Events", - onClick: navigateToEvents, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 80, - }, - ]); + return { + id: "events", + parentId: null, + getIcon: () => , + title: "Events", + onClick: di.inject(navigateToEventsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 80, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default eventsSidebarItemsInjectable; +export default eventsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/helm-charts/helm-charts-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/helm-charts/helm-charts-sidebar-items.injectable.tsx index 271826aea7..9798bc5e32 100644 --- a/packages/core/src/renderer/components/helm-charts/helm-charts-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/helm-charts/helm-charts-sidebar-items.injectable.tsx @@ -3,35 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import helmChartsRouteInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/helm-charts-route.injectable"; -import { helmSidebarItemId } from "../helm/helm-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import helmSidebarItemInjectable from "../helm/helm-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable"; -const helmChartsSidebarItemsInjectable = getInjectable({ - id: "helm-charts-sidebar-items", +const helmChartsSidebarItemInjectable = getInjectable({ + id: "helm-charts-sidebar-item", instantiate: (di) => { const route = di.inject(helmChartsRouteInjectable); - const navigateToHelmCharts = di.inject(navigateToHelmChartsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "charts", - parentId: helmSidebarItemId, - title: "Charts", - onClick: navigateToHelmCharts, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 10, - }, - ]); + return { + id: "charts", + parentId: di.inject(helmSidebarItemInjectable).id, + title: "Charts", + onClick: di.inject(navigateToHelmChartsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 10, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default helmChartsSidebarItemsInjectable; +export default helmChartsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/helm-releases/helm-releases-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/helm-releases/helm-releases-sidebar-items.injectable.tsx index 0a47da38ad..0164a04988 100644 --- a/packages/core/src/renderer/components/helm-releases/helm-releases-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/helm-releases/helm-releases-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import helmReleasesRouteInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/helm-releases-route.injectable"; -import { helmSidebarItemId } from "../helm/helm-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import helmSidebarItemInjectable from "../helm/helm-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToHelmReleasesInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable"; -const helmReleasesSidebarItemsInjectable = getInjectable({ - id: "helm-releases-sidebar-items", +const helmReleasesSidebarItemInjectable = getInjectable({ + id: "helm-releases-sidebar-item", instantiate: (di) => { const route = di.inject(helmReleasesRouteInjectable); - const navigateToHelmReleases = di.inject(navigateToHelmReleasesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "releases", - parentId: helmSidebarItemId, - title: "Releases", - onClick: navigateToHelmReleases, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 20, - }, - ]); + return { + id: "releases", + parentId: di.inject(helmSidebarItemInjectable).id, + title: "Releases", + onClick: di.inject(navigateToHelmReleasesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 20, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default helmReleasesSidebarItemsInjectable; +export default helmReleasesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/helm/helm-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/helm/helm-sidebar-items.injectable.tsx index fa82bad5d6..4df7f9386a 100644 --- a/packages/core/src/renderer/components/helm/helm-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/helm/helm-sidebar-items.injectable.tsx @@ -3,34 +3,24 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import React from "react"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import { noop } from "lodash/fp"; -export const helmSidebarItemId = "helm"; +const helmSidebarItemInjectable = getInjectable({ + id: "helm-sidebar-item", -const helmSidebarItemsInjectable = getInjectable({ - id: "helm-sidebar-items", + instantiate: () => ({ + id: "helm", + parentId: null, + getIcon: () => , + title: "Helm", + onClick: noop, + orderNumber: 90, + }), - instantiate: () => - computed((): SidebarItemRegistration[] => [ - { - id: helmSidebarItemId, - parentId: null, - getIcon: () => , - title: "Helm", - onClick: noop, - orderNumber: 90, - }, - ]), - - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default helmSidebarItemsInjectable; +export default helmSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx b/packages/core/src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx index ea49cdbb5f..ad00dba3f5 100644 --- a/packages/core/src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx +++ b/packages/core/src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx @@ -5,8 +5,7 @@ import { getInjectable } from "@ogre-tools/injectable"; import React from "react"; import { extensionRegistratorInjectionToken } from "../../../extensions/extension-loader/extension-registrator-injection-token"; -import type { SidebarItemRegistration } from "./sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "./sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { computed } from "mobx"; import routesInjectable from "../../routes/routes.injectable"; import { matches, noop } from "lodash/fp"; @@ -25,71 +24,66 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({ const routes = di.inject(routesInjectable); const extensionShouldBeEnabledForClusterFrame = di.inject(extensionShouldBeEnabledForClusterFrameInjectable, extension); - const sidebarItemsForExtensionInjectable = getInjectable({ - id: `sidebar-items-for-extension-${extension.sanitizedExtensionId}`, - injectionToken: sidebarItemsInjectionToken, + return computed(() => { + const extensionRoutes = routes.get().filter(matches({ extension })); - instantiate: (di) => { - return computed(() => { - const extensionRoutes = routes.get().filter(matches({ extension })); + return extension.clusterPageMenus.map((registration) => { + const targetRoutePath = getExtensionRoutePath( + extension, + registration.target?.pageId, + ); - return extension.clusterPageMenus.map((registration) => { - const targetRoutePath = getExtensionRoutePath( - extension, - registration.target?.pageId, - ); + const targetRoute = extensionRoutes.find( + matches({ path: targetRoutePath }), + ); - const targetRoute = extensionRoutes.find( - matches({ path: targetRoutePath }), - ); + const isVisible = computed(() => { + if (!extensionShouldBeEnabledForClusterFrame.value.get()) { + return false; + } - const isVisible = computed(() => { - if (!extensionShouldBeEnabledForClusterFrame.value.get()) { - return false; - } + if (!registration.visible) { + return true; + } - if (!registration.visible) { - return true; - } - - return registration.visible.get(); - }); - - const res: SidebarItemRegistration = { - id: `${extension.sanitizedExtensionId}-${registration.id}`, - orderNumber: registration.orderNumber ?? 9999, - - parentId: registration.parentId - ? `${extension.sanitizedExtensionId}-${registration.parentId}` - : null, - - isVisible, - - title: registration.title, - getIcon: registration.components.Icon - ? () => - : undefined, - ...(targetRoute - ? { - onClick: () => navigateToRoute(targetRoute), - - isActive: di.inject( - routeIsActiveInjectable, - targetRoute, - ), - } - : { onClick: noop }), - }; - - return res; - }); + return registration.visible.get(); }); - }, - }); - return [ - sidebarItemsForExtensionInjectable, - ]; + const id = registration.id ? + `${extension.sanitizedExtensionId}-${registration.id}` + : extension.sanitizedExtensionId; + + return getInjectable({ + id: `${id}-sidebar-item`, + instantiate: () => ({ + id, + orderNumber: registration.orderNumber ?? 9999, + + parentId: registration.parentId + ? `${extension.sanitizedExtensionId}-${registration.parentId}` + : null, + + isVisible, + + title: registration.title, + getIcon: registration.components.Icon + ? () => + : undefined, + ...(targetRoute + ? { + onClick: () => navigateToRoute(targetRoute), + + isActive: di.inject( + routeIsActiveInjectable, + targetRoute, + ), + } + : { onClick: noop }), + }), + injectionToken: sidebarItemInjectionToken, + }); + }); + }); }, injectionToken: extensionRegistratorInjectionToken, diff --git a/packages/core/src/renderer/components/layout/siblings-in-tab-layout.tsx b/packages/core/src/renderer/components/layout/siblings-in-tab-layout.tsx index ff32e82794..a69de81c32 100644 --- a/packages/core/src/renderer/components/layout/siblings-in-tab-layout.tsx +++ b/packages/core/src/renderer/components/layout/siblings-in-tab-layout.tsx @@ -8,7 +8,7 @@ import { observer } from "mobx-react"; import React from "react"; import siblingTabsInjectable from "../../routes/sibling-tabs.injectable"; import { TabLayout } from "./tab-layout-2"; -import type { HierarchicalSidebarItem } from "./sidebar-items.injectable"; +import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar"; import type { StrictReactNode } from "@k8slens/utilities"; interface SiblingTabLayoutProps { diff --git a/packages/core/src/renderer/components/layout/sidebar-item.tsx b/packages/core/src/renderer/components/layout/sidebar-item.tsx index 9a77453671..3f4888574d 100644 --- a/packages/core/src/renderer/components/layout/sidebar-item.tsx +++ b/packages/core/src/renderer/components/layout/sidebar-item.tsx @@ -6,15 +6,13 @@ import styles from "./sidebar-items.module.scss"; import React from "react"; -import { computed, makeObservable } from "mobx"; -import { cssNames } from "@k8slens/utilities"; import { observer } from "mobx-react"; import { NavLink } from "react-router-dom"; import { Icon } from "@k8slens/icon"; import { withInjectables } from "@ogre-tools/injectable-react"; import type { SidebarStorageState } from "./sidebar-storage/sidebar-storage.injectable"; import sidebarStorageInjectable from "./sidebar-storage/sidebar-storage.injectable"; -import type { HierarchicalSidebarItem } from "./sidebar-items.injectable"; +import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar"; import type { StorageLayer } from "../../utils/storage-helper"; interface Dependencies { @@ -25,97 +23,73 @@ export interface SidebarItemProps { item: HierarchicalSidebarItem; } -@observer -class NonInjectedSidebarItem extends React.Component< - SidebarItemProps & Dependencies -> { - static displayName = "SidebarItem"; +const NonInjectedSidebarItem = observer((props: SidebarItemProps & Dependencies) => { + const { item, sidebarStorage } = props; + const id = item.id; + const expanded = sidebarStorage.get().expanded[id] ?? false; + const isExpandable = item.children.length > 0 && item.children.some(item => item.isVisible.get()); + const isActive = item.isActive.get(); - constructor(props: SidebarItemProps & Dependencies) { - super(props); - makeObservable(this); - } - - get id(): string { - return this.item.id; - } - - @computed get expanded(): boolean { - return Boolean(this.props.sidebarStorage.get().expanded[this.id]); - } - - @computed get isExpandable(): boolean { - return this.props.item.children.length > 0; - } - - @computed get isActive(): boolean { - return this.props.item.isActive.get(); - } - - get item() { - return this.props.item; - } - - toggleExpand = () => { - this.props.sidebarStorage.merge((draft) => { - draft.expanded[this.id] = !draft.expanded[this.id]; + const toggleExpand = () => { + sidebarStorage.merge((draft) => { + draft.expanded[id] = !draft.expanded[id]; }); }; - - renderSubMenu() { - const { isExpandable, expanded } = this; - + const renderSubMenu = () => { if (!isExpandable || !expanded) { return null; } return ( -
    - {this.props.item.children.map(item => )} -
- ); - } - - render() { - return ( -
- this.isActive} - className={styles.navItem} - onClick={(event) => { - event.preventDefault(); - event.stopPropagation(); - - if (this.isExpandable) { - this.toggleExpand(); - } else { - this.item.onClick(); - } - }} - data-testid={`sidebar-item-link-for-${this.id}`} - > - {this.item.getIcon?.()} - {this.item.title} - {this.isExpandable && ( - - )} - - {this.renderSubMenu()} +
+ {item.children.map((child) => ( + + ))}
); + }; + + if (!item.isVisible.get()) { + return null; } -} + + return ( +
+ isActive} + className={styles.navItem} + onClick={(event) => { + event.preventDefault(); + event.stopPropagation(); + + if (isExpandable) { + toggleExpand(); + } else { + item.onClick(); + } + }} + data-testid={`sidebar-item-link-for-${id}`} + > + {item.getIcon?.()} + {item.title} + {isExpandable && ( + + )} + + {renderSubMenu()} +
+ ); +}); export const SidebarItem = withInjectables(NonInjectedSidebarItem, { getProps: (di, props) => ({ @@ -123,3 +97,5 @@ export const SidebarItem = withInjectables(NonIn sidebarStorage: di.inject(sidebarStorageInjectable), }), }); + +SidebarItem.displayName = "SidebarItem"; diff --git a/packages/core/src/renderer/components/layout/sidebar-items.injectable.ts b/packages/core/src/renderer/components/layout/sidebar-items.injectable.ts deleted file mode 100644 index fdcf985459..0000000000 --- a/packages/core/src/renderer/components/layout/sidebar-items.injectable.ts +++ /dev/null @@ -1,80 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ -import { getInjectable, getInjectionToken } from "@ogre-tools/injectable"; -import type { IComputedValue } from "mobx"; -import { computed } from "mobx"; -import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; -import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable"; -import type { SetRequired } from "type-fest"; -import type { StrictReactNode } from "@k8slens/utilities"; - -export interface SidebarItemRegistration { - id: string; - parentId: string | null; - title: StrictReactNode; - onClick: () => void; - getIcon?: () => StrictReactNode; - isActive?: IComputedValue; - isVisible?: IComputedValue; - orderNumber: number; -} - -export const sidebarItemsInjectionToken = getInjectionToken< - IComputedValue ->({ id: "sidebar-items-injection-token" }); - -export interface HierarchicalSidebarItem extends SetRequired { - children: HierarchicalSidebarItem[]; -} - -const sidebarItemsInjectable = getInjectable({ - id: "sidebar-items", - - instantiate: (di) => { - const computedInjectMany = di.inject(computedInjectManyInjectable); - const sidebarItemRegistrations = computedInjectMany(sidebarItemsInjectionToken); - - return computed((): HierarchicalSidebarItem[] => { - const registrations = sidebarItemRegistrations - .get() - .flatMap(reg => reg.get()); - - const getSidebarItemsHierarchy = (registrations: SidebarItemRegistration[]) => { - const impl = (parentId: string | null): HierarchicalSidebarItem[] => ( - registrations - .filter((item) => item.parentId === parentId) - .map(({ - isActive = computed(() => false), - isVisible = computed(() => true), - ...registration - }) => { - const children = impl(registration.id); - - return { - ...registration, - children, - isVisible, - isActive: computed(() => { - if (children.length === 0) { - return isActive.get(); - } - - return children.some(child => child.isActive.get()); - }), - }; - }) - .filter(({ isVisible }) => isVisible.get()) - .sort(byOrderNumber) - ); - - return impl(null); - }; - - return getSidebarItemsHierarchy(registrations); - }); - }, -}); - -export default sidebarItemsInjectable; diff --git a/packages/core/src/renderer/components/layout/sidebar.tsx b/packages/core/src/renderer/components/layout/sidebar.tsx index f217109515..c13be02961 100644 --- a/packages/core/src/renderer/components/layout/sidebar.tsx +++ b/packages/core/src/renderer/components/layout/sidebar.tsx @@ -12,8 +12,8 @@ import { SidebarItem } from "./sidebar-item"; import type { CatalogEntityRegistry } from "../../api/catalog/entity/registry"; import { SidebarCluster } from "./sidebar-cluster"; import { withInjectables } from "@ogre-tools/injectable-react"; -import type { HierarchicalSidebarItem } from "./sidebar-items.injectable"; -import sidebarItemsInjectable from "./sidebar-items.injectable"; +import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar"; +import { sidebarItemsInjectable } from "@k8slens/cluster-sidebar"; import type { IComputedValue } from "mobx"; import catalogEntityRegistryInjectable from "../../api/catalog/entity/registry.injectable"; diff --git a/packages/core/src/renderer/components/layout/tab-layout-2.tsx b/packages/core/src/renderer/components/layout/tab-layout-2.tsx index eab234ed07..537226b9db 100644 --- a/packages/core/src/renderer/components/layout/tab-layout-2.tsx +++ b/packages/core/src/renderer/components/layout/tab-layout-2.tsx @@ -11,7 +11,7 @@ import type { StrictReactNode } from "@k8slens/utilities"; import { cssNames } from "@k8slens/utilities"; import { Tab, Tabs } from "../tabs"; import { ErrorBoundary } from "@k8slens/error-boundary"; -import type { HierarchicalSidebarItem } from "./sidebar-items.injectable"; +import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar"; export interface TabLayoutProps { tabs?: HierarchicalSidebarItem[]; diff --git a/packages/core/src/renderer/components/namespaces/namespaces-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/namespaces/namespaces-sidebar-items.injectable.tsx index a908e64329..510e649d2f 100644 --- a/packages/core/src/renderer/components/namespaces/namespaces-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/namespaces/namespaces-sidebar-items.injectable.tsx @@ -3,41 +3,32 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import React from "react"; import namespacesRouteInjectable from "../../../common/front-end-routing/routes/cluster/namespaces/namespaces-route.injectable"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToNamespacesInjectable from "../../../common/front-end-routing/routes/cluster/namespaces/navigate-to-namespaces.injectable"; -const namespacesSidebarItemsInjectable = getInjectable({ - id: "namespaces", +const namespacesSidebarItemInjectable = getInjectable({ + id: "namespaces-sidebar-item", instantiate: (di) => { const route = di.inject(namespacesRouteInjectable); - const navigateToNamespaces = di.inject(navigateToNamespacesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed((): SidebarItemRegistration[] => [ - { - id: "namespaces", - parentId: null, - getIcon: () => , - title: "Namespaces", - onClick: navigateToNamespaces, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 70, - }, - ]); + return { + id: "namespaces", + parentId: null, + getIcon: () => , + title: "Namespaces", + onClick: di.inject(navigateToNamespacesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 70, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default namespacesSidebarItemsInjectable; +export default namespacesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/network-endpoints/endpoints-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/network-endpoints/endpoints-sidebar-items.injectable.tsx index 43df72d293..623e419ffb 100644 --- a/packages/core/src/renderer/components/network-endpoints/endpoints-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/network-endpoints/endpoints-sidebar-items.injectable.tsx @@ -3,35 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import endpointsRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/endpoints/endpoints-route.injectable"; -import { networkSidebarItemId } from "../network/network-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToEndpointsInjectable from "../../../common/front-end-routing/routes/cluster/network/endpoints/navigate-to-endpoints.injectable"; -const endpointsSidebarItemsInjectable = getInjectable({ - id: "endpoints-sidebar-items", +const endpointsSidebarItemInjectable = getInjectable({ + id: "endpoints-sidebar-item", instantiate: (di) => { const route = di.inject(endpointsRouteInjectable); - const navigateToEndpoints = di.inject(navigateToEndpointsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "endpoints", - parentId: networkSidebarItemId, - title: "Endpoints", - onClick: navigateToEndpoints, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 20, - }, - ]); + return { + id: "endpoints", + parentId: di.inject(networkSidebarItemInjectable).id, + title: "Endpoints", + onClick: di.inject(navigateToEndpointsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 20, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default endpointsSidebarItemsInjectable; +export default endpointsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/network-ingresses/ingress-class-route-component.injectable.ts b/packages/core/src/renderer/components/network-ingresses/ingress-class-route-component.injectable.ts index fd7a5fbc9c..eda5dd666b 100644 --- a/packages/core/src/renderer/components/network-ingresses/ingress-class-route-component.injectable.ts +++ b/packages/core/src/renderer/components/network-ingresses/ingress-class-route-component.injectable.ts @@ -3,18 +3,15 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { - routeSpecificComponentInjectionToken, -} from "../../routes/route-specific-component-injection-token"; -import ingressClassesesRouteInjectable - from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable"; +import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token"; +import ingressClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable"; import { IngressClasses } from "./ingress-classes"; const ingressClassesRouteComponentInjectable = getInjectable({ id: "ingress-classes-route-component", instantiate: (di) => ({ - route: di.inject(ingressClassesesRouteInjectable), + route: di.inject(ingressClassesRouteInjectable), Component: IngressClasses, }), diff --git a/packages/core/src/renderer/components/network-ingresses/ingress-classes-sidebar-item.injectable.ts b/packages/core/src/renderer/components/network-ingresses/ingress-classes-sidebar-item.injectable.ts new file mode 100644 index 0000000000..75c40dfb47 --- /dev/null +++ b/packages/core/src/renderer/components/network-ingresses/ingress-classes-sidebar-item.injectable.ts @@ -0,0 +1,30 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import { getInjectable } from "@ogre-tools/injectable"; +import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; +import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable"; +import navigateToIngressClassesInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable"; +import ingressClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable"; + +const ingressClassesSidebarItemInjectable = getInjectable({ + id: "ingress-classes-sidebar-item", + instantiate: (di) => { + const ingressClassRoute = di.inject(ingressClassesRouteInjectable); + + return { + id: "ingressclasses", + parentId: di.inject(networkSidebarItemInjectable).id, + title: "Ingress Classes", + onClick: di.inject(navigateToIngressClassesInjectable), + isActive: di.inject(routeIsActiveInjectable, ingressClassRoute), + isVisible: ingressClassRoute.isEnabled, + orderNumber: 31, + }; + }, + injectionToken: sidebarItemInjectionToken, +}); + +export default ingressClassesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.ts b/packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.ts new file mode 100644 index 0000000000..c658ef69d8 --- /dev/null +++ b/packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.ts @@ -0,0 +1,30 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; +import { getInjectable } from "@ogre-tools/injectable"; +import navigateToIngressesInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable"; +import ingressesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/ingresses/ingresses-route.injectable"; +import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; +import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable"; + +const ingressesSidebarItemInjectable = getInjectable({ + id: "ingresses-sidebar-item", + instantiate: (di) => { + const ingressRoute = di.inject(ingressesRouteInjectable); + + return { + id: "ingresses", + parentId: di.inject(networkSidebarItemInjectable).id, + title: "Ingresses", + onClick: di.inject(navigateToIngressesInjectable), + isActive: di.inject(routeIsActiveInjectable, ingressRoute), + isVisible: ingressRoute.isEnabled, + orderNumber: 30, + }; + }, + injectionToken: sidebarItemInjectionToken, +}); + +export default ingressesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.tsx deleted file mode 100644 index b8a90c3960..0000000000 --- a/packages/core/src/renderer/components/network-ingresses/ingresses-sidebar-items.injectable.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/** - * 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 type { IComputedValue } from "mobx"; -import { computed } from "mobx"; -import ingressesRouteInjectable - from "../../../common/front-end-routing/routes/cluster/network/ingresses/ingresses-route.injectable"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; -import { networkSidebarItemId } from "../network/network-sidebar-items.injectable"; -import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; -import navigateToIngressesInjectable - from "../../../common/front-end-routing/routes/cluster/network/ingresses/navigate-to-ingresses.injectable"; -import ingressClassesesRouteInjectable - from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable"; -import navigateToIngressClassesInjectable - from "../../../common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable"; - -const ingressesSidebarItemsInjectable = getInjectable({ - id: "ingresses-sidebar-items", - - instantiate: (di): IComputedValue => { - const ingressRoute = di.inject(ingressesRouteInjectable); - const ingressClassRoute = di.inject(ingressClassesesRouteInjectable); - - return computed(() => [ - { - id: "ingresses", - parentId: networkSidebarItemId, - title: "Ingresses", - onClick: di.inject(navigateToIngressesInjectable), - isActive: di.inject(routeIsActiveInjectable, ingressRoute), - isVisible: ingressRoute.isEnabled, - orderNumber: 30, - }, - { - id: "ingressclasses", - parentId: networkSidebarItemId, - title: "Ingress Classes", - onClick: di.inject(navigateToIngressClassesInjectable), - isActive: di.inject(routeIsActiveInjectable, ingressClassRoute), - isVisible: ingressClassRoute.isEnabled, - orderNumber: 31, - }, - ]); - }, - - injectionToken: sidebarItemsInjectionToken, -}); - -export default ingressesSidebarItemsInjectable; diff --git a/packages/core/src/renderer/components/network-policies/network-policies-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/network-policies/network-policies-sidebar-items.injectable.tsx index 3326594ba4..365f32b618 100644 --- a/packages/core/src/renderer/components/network-policies/network-policies-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/network-policies/network-policies-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import networkPoliciesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/network-policies/network-policies-route.injectable"; -import { networkSidebarItemId } from "../network/network-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToNetworkPoliciesInjectable from "../../../common/front-end-routing/routes/cluster/network/network-policies/navigate-to-network-policies.injectable"; -const networkPoliciesSidebarItemsInjectable = getInjectable({ - id: "network-policies-sidebar-items", +const networkPoliciesSidebarItemInjectable = getInjectable({ + id: "network-policies-sidebar-item", instantiate: (di) => { const route = di.inject(networkPoliciesRouteInjectable); - const navigateToNetworkPolicies = di.inject(navigateToNetworkPoliciesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "network-policies", - parentId: networkSidebarItemId, - title: "Network Policies", - onClick: navigateToNetworkPolicies, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 40, - }, - ]); + return { + id: "network-policies", + parentId: di.inject(networkSidebarItemInjectable).id, + title: "Network Policies", + onClick: di.inject(navigateToNetworkPoliciesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 40, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default networkPoliciesSidebarItemsInjectable; +export default networkPoliciesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/network-port-forwards/port-forwards-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/network-port-forwards/port-forwards-sidebar-items.injectable.tsx index eafcf07ce2..6fe529c0c3 100644 --- a/packages/core/src/renderer/components/network-port-forwards/port-forwards-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/network-port-forwards/port-forwards-sidebar-items.injectable.tsx @@ -3,37 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import portForwardsRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/port-forwards/port-forwards-route.injectable"; -import { networkSidebarItemId } from "../network/network-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToPortForwardsInjectable from "../../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable"; -const portForwardsSidebarItemsInjectable = getInjectable({ - id: "port-forwards-sidebar-items", +const portForwardsSidebarItemInjectable = getInjectable({ + id: "port-forwards-sidebar-item", instantiate: (di) => { const route = di.inject(portForwardsRouteInjectable); - const navigateToPortForwards = di.inject(navigateToPortForwardsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "port-forwards", - parentId: networkSidebarItemId, - - title: "Port Forwarding", - onClick: navigateToPortForwards, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 50, - }, - ]); + return { + id: "port-forwards", + parentId: di.inject(networkSidebarItemInjectable).id, + title: "Port Forwarding", + onClick: di.inject(navigateToPortForwardsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 50, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default portForwardsSidebarItemsInjectable; +export default portForwardsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/network-services/services-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/network-services/services-sidebar-items.injectable.tsx index f25bcaddab..98e54280d2 100644 --- a/packages/core/src/renderer/components/network-services/services-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/network-services/services-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import servicesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/services/services-route.injectable"; -import { networkSidebarItemId } from "../network/network-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToServicesInjectable from "../../../common/front-end-routing/routes/cluster/network/services/navigate-to-services.injectable"; -const servicesSidebarItemsInjectable = getInjectable({ - id: "services-sidebar-items", +const servicesSidebarItemInjectable = getInjectable({ + id: "services-sidebar-item", instantiate: (di) => { const route = di.inject(servicesRouteInjectable); - const navigateToServices = di.inject(navigateToServicesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "services", - parentId: networkSidebarItemId, - title: "Services", - onClick: navigateToServices, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 10, - }, - ]); + return { + id: "services", + parentId: di.inject(networkSidebarItemInjectable).id, + title: "Services", + onClick: di.inject(navigateToServicesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 10, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default servicesSidebarItemsInjectable; +export default servicesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/network/network-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/network/network-sidebar-items.injectable.tsx index 50e6c5d57c..c8be2d682a 100644 --- a/packages/core/src/renderer/components/network/network-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/network/network-sidebar-items.injectable.tsx @@ -3,34 +3,24 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import React from "react"; import { noop } from "lodash/fp"; -export const networkSidebarItemId = "network"; +const networkSidebarItemInjectable = getInjectable({ + id: "network-sidebar-item", -const networkSidebarItemsInjectable = getInjectable({ - id: "network-sidebar-items", + instantiate: () => ({ + id: "network", + parentId: null, + getIcon: () => , + title: "Network", + onClick: noop, + orderNumber: 50, + }), - instantiate: () => - computed((): SidebarItemRegistration[] => [ - { - id: networkSidebarItemId, - parentId: null, - getIcon: () => , - title: "Network", - onClick: noop, - orderNumber: 50, - }, - ]), - - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default networkSidebarItemsInjectable; +export default networkSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/nodes/nodes-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/nodes/nodes-sidebar-items.injectable.tsx index 612ae63ee3..f931092fa1 100644 --- a/packages/core/src/renderer/components/nodes/nodes-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/nodes/nodes-sidebar-items.injectable.tsx @@ -3,12 +3,7 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import React from "react"; @@ -16,29 +11,25 @@ import nodesRouteInjectable from "../../../common/front-end-routing/routes/clust import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToNodesInjectable from "../../../common/front-end-routing/routes/cluster/nodes/navigate-to-nodes.injectable"; -const nodesSidebarItemsInjectable = getInjectable({ - id: "nodes-sidebar-items", +const nodesSidebarItemInjectable = getInjectable({ + id: "nodes-sidebar-item", instantiate: (di) => { const route = di.inject(nodesRouteInjectable); - const navigateToNodes = di.inject(navigateToNodesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed((): SidebarItemRegistration[] => [ - { - id: "nodes", - parentId: null, - getIcon: () => , - title: "Nodes", - onClick: navigateToNodes, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 20, - }, - ]); + return { + id: "nodes", + parentId: null, + getIcon: () => , + title: "Nodes", + onClick: di.inject(navigateToNodesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 20, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default nodesSidebarItemsInjectable; +export default nodesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/pod-security-policies/pod-security-policies-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/pod-security-policies/pod-security-policies-sidebar-items.injectable.tsx index c743a7650c..0c5583fc26 100644 --- a/packages/core/src/renderer/components/pod-security-policies/pod-security-policies-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/pod-security-policies/pod-security-policies-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import podSecurityPoliciesRouteInjectable from "../../../common/front-end-routing/routes/cluster/user-management/pod-security-policies/pod-security-policies-route.injectable"; -import { userManagementSidebarItemId } from "../user-management/user-management-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToPodSecurityPoliciesInjectable from "../../../common/front-end-routing/routes/cluster/user-management/pod-security-policies/navigate-to-pod-security-policies.injectable"; +import userManagementSidebarItemInjectable from "../user-management/user-management-sidebar-items.injectable"; -const podSecurityPoliciesSidebarItemsInjectable = getInjectable({ - id: "pod-security-policies-sidebar-items", +const podSecurityPoliciesSidebarItemInjectable = getInjectable({ + id: "pod-security-policies-sidebar-item", instantiate: (di) => { const route = di.inject(podSecurityPoliciesRouteInjectable); - const navigateToPodSecurityPolicies = di.inject(navigateToPodSecurityPoliciesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "pod-security-policies", - parentId: userManagementSidebarItemId, - title: "Pod Security Policies", - onClick: navigateToPodSecurityPolicies, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 60, - }, - ]); + return { + id: "pod-security-policies", + parentId: di.inject(userManagementSidebarItemInjectable).id, + title: "Pod Security Policies", + onClick: di.inject(navigateToPodSecurityPoliciesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 60, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default podSecurityPoliciesSidebarItemsInjectable; +export default podSecurityPoliciesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/storage-classes/storage-classes-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/storage-classes/storage-classes-sidebar-items.injectable.tsx index 256c913b73..b553652e51 100644 --- a/packages/core/src/renderer/components/storage-classes/storage-classes-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/storage-classes/storage-classes-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import storageClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/storage-classes/storage-classes-route.injectable"; -import { storageSidebarItemId } from "../storage/storage-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import storageSidebarItemInjectable from "../storage/storage-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToStorageClassesInjectable from "../../../common/front-end-routing/routes/cluster/storage/storage-classes/navigate-to-storage-classes.injectable"; -const storageClassesSidebarItemsInjectable = getInjectable({ - id: "storage-classes-sidebar-items", +const storageClassesSidebarItemInjectable = getInjectable({ + id: "storage-classes-sidebar-item", instantiate: (di) => { const route = di.inject(storageClassesRouteInjectable); - const navigateToStorageClasses = di.inject(navigateToStorageClassesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "storage-classes", - parentId: storageSidebarItemId, - title: "Storage Classes", - onClick: navigateToStorageClasses, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 30, - }, - ]); + return { + id: "storage-classes", + parentId: di.inject(storageSidebarItemInjectable).id, + title: "Storage Classes", + onClick: di.inject(navigateToStorageClassesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 30, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default storageClassesSidebarItemsInjectable; +export default storageClassesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/storage-volume-claims/persistent-volume-claims-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/storage-volume-claims/persistent-volume-claims-sidebar-items.injectable.tsx index 9270ade0cc..d4562003a9 100644 --- a/packages/core/src/renderer/components/storage-volume-claims/persistent-volume-claims-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/storage-volume-claims/persistent-volume-claims-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import persistentVolumeClaimsRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volume-claims/persistent-volume-claims-route.injectable"; -import { storageSidebarItemId } from "../storage/storage-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import storageSidebarItemInjectable from "../storage/storage-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToPersistentVolumeClaimsInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volume-claims/navigate-to-persistent-volume-claims.injectable"; -const persistentVolumeClaimsSidebarItemsInjectable = getInjectable({ - id: "persistent-volume-claims-sidebar-items", +const persistentVolumeClaimsSidebarItemInjectable = getInjectable({ + id: "persistent-volume-claims-sidebar-item", instantiate: (di) => { const route = di.inject(persistentVolumeClaimsRouteInjectable); - const navigateToPersistentVolumeClaims = di.inject(navigateToPersistentVolumeClaimsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "persistent-volume-claims", - parentId: storageSidebarItemId, - title: "Persistent Volume Claims", - onClick: navigateToPersistentVolumeClaims, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 10, - }, - ]); + return { + id: "persistent-volume-claims", + parentId: di.inject(storageSidebarItemInjectable).id, + title: "Persistent Volume Claims", + onClick: di.inject(navigateToPersistentVolumeClaimsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 10, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default persistentVolumeClaimsSidebarItemsInjectable; +export default persistentVolumeClaimsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/storage-volumes/persistent-volumes-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/storage-volumes/persistent-volumes-sidebar-items.injectable.tsx index 0e6da86eba..ad4058ebdb 100644 --- a/packages/core/src/renderer/components/storage-volumes/persistent-volumes-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/storage-volumes/persistent-volumes-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import persistentVolumesRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volumes/persistent-volumes-route.injectable"; -import { storageSidebarItemId } from "../storage/storage-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import storageSidebarItemInjectable from "../storage/storage-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToPersistentVolumesInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volumes/navigate-to-persistent-volumes.injectable"; -const persistentVolumesSidebarItemsInjectable = getInjectable({ - id: "persistent-volumes-sidebar-items", +const persistentVolumesSidebarItemInjectable = getInjectable({ + id: "persistent-volumes-sidebar-item", instantiate: (di) => { const route = di.inject(persistentVolumesRouteInjectable); - const navigateToPersistentVolumes = di.inject(navigateToPersistentVolumesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "persistent-volumes", - parentId: storageSidebarItemId, - title: "Persistent Volumes", - onClick: navigateToPersistentVolumes, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 20, - }, - ]); + return { + id: "persistent-volumes", + parentId: di.inject(storageSidebarItemInjectable).id, + title: "Persistent Volumes", + onClick: di.inject(navigateToPersistentVolumesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 20, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default persistentVolumesSidebarItemsInjectable; +export default persistentVolumesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/storage/storage-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/storage/storage-sidebar-items.injectable.tsx index 90a96ebbd3..482d490668 100644 --- a/packages/core/src/renderer/components/storage/storage-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/storage/storage-sidebar-items.injectable.tsx @@ -3,34 +3,24 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import React from "react"; import { noop } from "lodash/fp"; -export const storageSidebarItemId = "storage"; +const storageSidebarItemInjectable = getInjectable({ + id: "storage-sidebar-item", -const storageSidebarItemsInjectable = getInjectable({ - id: "storage-sidebar-items", + instantiate: () => ({ + id: "storage", + parentId: null, + getIcon: () => , + title: "Storage", + onClick: noop, + orderNumber: 60, + }), - instantiate: () => - computed((): SidebarItemRegistration[] => [ - { - id: storageSidebarItemId, - parentId: null, - getIcon: () => , - title: "Storage", - onClick: noop, - orderNumber: 60, - }, - ]), - - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default storageSidebarItemsInjectable; +export default storageSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/user-management/cluster-role-bindings/cluster-role-bindings-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/user-management/cluster-role-bindings/cluster-role-bindings-sidebar-items.injectable.tsx index bb4ed2a928..049a9e4d1d 100644 --- a/packages/core/src/renderer/components/user-management/cluster-role-bindings/cluster-role-bindings-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/user-management/cluster-role-bindings/cluster-role-bindings-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import clusterRoleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-role-bindings/cluster-role-bindings-route.injectable"; -import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../../routes/route-is-active.injectable"; import navigateToClusterRoleBindingsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-role-bindings/navigate-to-cluster-role-bindings.injectable"; +import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable"; -const clusterRoleBindingsSidebarItemsInjectable = getInjectable({ - id: "cluster-role-bindings-sidebar-items", +const clusterRoleBindingsSidebarItemInjectable = getInjectable({ + id: "cluster-role-bindings-sidebar-item", instantiate: (di) => { const route = di.inject(clusterRoleBindingsRouteInjectable); - const navigateToClusterRoleBindings = di.inject(navigateToClusterRoleBindingsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "cluster-role-bindings", - parentId: userManagementSidebarItemId, - title: "Cluster Role Bindings", - onClick: navigateToClusterRoleBindings, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 40, - }, - ]); + return { + id: "cluster-role-bindings", + parentId: di.inject(userManagementSidebarItemInjectable).id, + title: "Cluster Role Bindings", + onClick: di.inject(navigateToClusterRoleBindingsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 40, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default clusterRoleBindingsSidebarItemsInjectable; +export default clusterRoleBindingsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/user-management/cluster-roles/cluster-roles-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/user-management/cluster-roles/cluster-roles-sidebar-items.injectable.tsx index 54ae68ef44..a9de072a7a 100644 --- a/packages/core/src/renderer/components/user-management/cluster-roles/cluster-roles-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/user-management/cluster-roles/cluster-roles-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import clusterRolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-roles/cluster-roles-route.injectable"; -import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable"; +import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../../routes/route-is-active.injectable"; import navigateToClusterRolesInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-roles/navigate-to-cluster-roles.injectable"; -const clusterRolesSidebarItemsInjectable = getInjectable({ - id: "cluster-roles-sidebar-items", +const clusterRolesSidebarItemInjectable = getInjectable({ + id: "cluster-roles-sidebar-item", instantiate: (di) => { const route = di.inject(clusterRolesRouteInjectable); - const navigateToClusterRoles = di.inject(navigateToClusterRolesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "cluster-roles", - parentId: userManagementSidebarItemId, - title: "Cluster Roles", - onClick: navigateToClusterRoles, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 20, - }, - ]); + return { + id: "cluster-roles", + parentId: di.inject(userManagementSidebarItemInjectable).id, + title: "Cluster Roles", + onClick: di.inject(navigateToClusterRolesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 20, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default clusterRolesSidebarItemsInjectable; +export default clusterRolesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/user-management/role-bindings/role-bindings-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/user-management/role-bindings/role-bindings-sidebar-items.injectable.tsx index f2eb240839..18ce36249d 100644 --- a/packages/core/src/renderer/components/user-management/role-bindings/role-bindings-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/user-management/role-bindings/role-bindings-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import roleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/role-bindings/role-bindings-route.injectable"; -import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable"; +import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../../routes/route-is-active.injectable"; import navigateToRoleBindingsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/role-bindings/navigate-to-role-bindings.injectable"; -const roleBindingsSidebarItemsInjectable = getInjectable({ - id: "role-bindings-sidebar-items", +const roleBindingsSidebarItemInjectable = getInjectable({ + id: "role-bindings-sidebar-item", instantiate: (di) => { const route = di.inject(roleBindingsRouteInjectable); - const navigateToRoleBindings = di.inject(navigateToRoleBindingsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "role-bindings", - parentId: userManagementSidebarItemId, - title: "Role Bindings", - onClick: navigateToRoleBindings, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 50, - }, - ]); + return { + id: "role-bindings", + parentId: di.inject(userManagementSidebarItemInjectable).id, + title: "Role Bindings", + onClick: di.inject(navigateToRoleBindingsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 50, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default roleBindingsSidebarItemsInjectable; +export default roleBindingsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/user-management/roles/roles-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/user-management/roles/roles-sidebar-items.injectable.tsx index 97ee9715a2..753fd43f65 100644 --- a/packages/core/src/renderer/components/user-management/roles/roles-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/user-management/roles/roles-sidebar-items.injectable.tsx @@ -3,36 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; - import rolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/roles-route.injectable"; -import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable"; +import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../../routes/route-is-active.injectable"; import navigateToRolesInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/navigate-to-roles.injectable"; -const rolesSidebarItemsInjectable = getInjectable({ - id: "roles-sidebar-items", +const rolesSidebarItemInjectable = getInjectable({ + id: "roles-sidebar-item", instantiate: (di) => { const route = di.inject(rolesRouteInjectable); - const navigateToRoles = di.inject(navigateToRolesInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "roles", - parentId: userManagementSidebarItemId, - title: "Roles", - onClick: navigateToRoles, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 30, - }, - ]); + return { + id: "roles", + parentId: di.inject(userManagementSidebarItemInjectable).id, + title: "Roles", + onClick: di.inject(navigateToRolesInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 30, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default rolesSidebarItemsInjectable; +export default rolesSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/user-management/service-accounts/service-accounts-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/user-management/service-accounts/service-accounts-sidebar-items.injectable.tsx index d01b8d6480..2315cc48f2 100644 --- a/packages/core/src/renderer/components/user-management/service-accounts/service-accounts-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/user-management/service-accounts/service-accounts-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import serviceAccountsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/service-accounts/service-accounts-route.injectable"; -import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable"; +import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../../routes/route-is-active.injectable"; import navigateToServiceAccountsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/service-accounts/navigate-to-service-accounts.injectable"; -const serviceAccountsSidebarItemsInjectable = getInjectable({ - id: "service-accounts-sidebar-items", +const serviceAccountsSidebarItemInjectable = getInjectable({ + id: "service-accounts-sidebar-item", instantiate: (di) => { const route = di.inject(serviceAccountsRouteInjectable); - const navigateToServiceAccounts = di.inject(navigateToServiceAccountsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "service-accounts", - parentId: userManagementSidebarItemId, - title: "Service Accounts", - onClick: navigateToServiceAccounts, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 10, - }, - ]); + return { + id: "service-accounts", + parentId: di.inject(userManagementSidebarItemInjectable).id, + title: "Service Accounts", + onClick: di.inject(navigateToServiceAccountsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 10, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default serviceAccountsSidebarItemsInjectable; +export default serviceAccountsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/user-management/user-management-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/user-management/user-management-sidebar-items.injectable.tsx index 30baf59e3c..1a392d8790 100644 --- a/packages/core/src/renderer/components/user-management/user-management-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/user-management/user-management-sidebar-items.injectable.tsx @@ -3,34 +3,24 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import React from "react"; import { noop } from "lodash/fp"; -export const userManagementSidebarItemId = "user-management"; +const userManagementSidebarItemInjectable = getInjectable({ + id: "user-management-sidebar-item", -const userManagementSidebarItemsInjectable = getInjectable({ - id: "user-management-sidebar-items", + instantiate: () => ({ + id: "user-management", + parentId: null, + getIcon: () => , + title: "Access Control", + onClick: noop, + orderNumber: 100, + }), - instantiate: () => - computed((): SidebarItemRegistration[] => [ - { - id: userManagementSidebarItemId, - parentId: null, - getIcon: () => , - title: "Access Control", - onClick: noop, - orderNumber: 100, - }, - ]), - - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default userManagementSidebarItemsInjectable; +export default userManagementSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-cronjobs/cron-jobs-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-cronjobs/cron-jobs-sidebar-items.injectable.tsx index 290fe5a4d6..d3262e9af5 100644 --- a/packages/core/src/renderer/components/workloads-cronjobs/cron-jobs-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-cronjobs/cron-jobs-sidebar-items.injectable.tsx @@ -3,36 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; - import cronJobsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/cron-jobs-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToCronJobsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/navigate-to-cron-jobs.injectable"; -const cronJobsSidebarItemsInjectable = getInjectable({ - id: "cron-jobs-sidebar-items", +const cronJobsSidebarItemInjectable = getInjectable({ + id: "cron-jobs-sidebar-item", instantiate: (di) => { const route = di.inject(cronJobsRouteInjectable); - const navigateToCronJobs = di.inject(navigateToCronJobsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "cron-jobs", - parentId: workloadsSidebarItemId, - title: "CronJobs", - onClick: navigateToCronJobs, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 80, - }, - ]); + return { + id: "cron-jobs", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "CronJobs", + onClick: di.inject(navigateToCronJobsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 80, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default cronJobsSidebarItemsInjectable; +export default cronJobsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-daemonsets/daemonsets-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-daemonsets/daemonsets-sidebar-items.injectable.tsx index c5442e3642..9ef6a9a434 100644 --- a/packages/core/src/renderer/components/workloads-daemonsets/daemonsets-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-daemonsets/daemonsets-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import daemonsetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/daemonsets/daemonsets-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToDaemonsetsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/daemonsets/navigate-to-daemonsets.injectable"; -const daemonsetsSidebarItemsInjectable = getInjectable({ - id: "daemonsets-sidebar-items", +const daemonsetsSidebarItemInjectable = getInjectable({ + id: "daemonsets-sidebar-item", instantiate: (di) => { const route = di.inject(daemonsetsRouteInjectable); - const navigateToDaemonsets = di.inject(navigateToDaemonsetsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "daemon-sets", - parentId: workloadsSidebarItemId, - title: "DaemonSets", - onClick: () => navigateToDaemonsets(), - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 40, - }, - ]); + return { + id: "daemon-sets", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "DaemonSets", + onClick: di.inject(navigateToDaemonsetsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 40, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default daemonsetsSidebarItemsInjectable; +export default daemonsetsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-deployments/deployments-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-deployments/deployments-sidebar-items.injectable.tsx index 85aed486dc..5d354bbe25 100644 --- a/packages/core/src/renderer/components/workloads-deployments/deployments-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-deployments/deployments-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import deploymentsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/deployments/deployments-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToDeploymentsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/deployments/navigate-to-deployments.injectable"; -const deploymentsSidebarItemsInjectable = getInjectable({ - id: "deployments-sidebar-items", +const deploymentsSidebarItemInjectable = getInjectable({ + id: "deployments-sidebar-item", instantiate: (di) => { const route = di.inject(deploymentsRouteInjectable); - const navigateToDeployments = di.inject(navigateToDeploymentsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "deployments", - parentId: workloadsSidebarItemId, - title: "Deployments", - onClick: navigateToDeployments, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 30, - }, - ]); + return { + id: "deployments", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "Deployments", + onClick: di.inject(navigateToDeploymentsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 30, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default deploymentsSidebarItemsInjectable; +export default deploymentsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-jobs/jobs-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-jobs/jobs-sidebar-items.injectable.tsx index acc788dd2c..57e0edc75a 100644 --- a/packages/core/src/renderer/components/workloads-jobs/jobs-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-jobs/jobs-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import jobsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/jobs/jobs-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToJobsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/jobs/navigate-to-jobs.injectable"; -const jobsSidebarItemsInjectable = getInjectable({ - id: "jobs-sidebar-items", +const jobsSidebarItemInjectable = getInjectable({ + id: "jobs-sidebar-item", instantiate: (di) => { const route = di.inject(jobsRouteInjectable); - const navigateToJobs = di.inject(navigateToJobsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "jobs", - parentId: workloadsSidebarItemId, - title: "Jobs", - onClick: navigateToJobs, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 70, - }, - ]); + return { + id: "jobs", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "Jobs", + onClick: di.inject(navigateToJobsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 70, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default jobsSidebarItemsInjectable; +export default jobsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-overview/workloads-overview-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-overview/workloads-overview-sidebar-items.injectable.tsx index 98efb01c7b..fda9f9eb02 100644 --- a/packages/core/src/renderer/components/workloads-overview/workloads-overview-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-overview/workloads-overview-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import workloadsOverviewRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/overview/workloads-overview-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToWorkloadsOverviewInjectable from "../../../common/front-end-routing/routes/cluster/workloads/overview/navigate-to-workloads-overview.injectable"; -const workloadsOverviewSidebarItemsInjectable = getInjectable({ - id: "workloads-overview-sidebar-items", +const workloadsOverviewSidebarItemInjectable = getInjectable({ + id: "workloads-overview-sidebar-item", instantiate: (di) => { const route = di.inject(workloadsOverviewRouteInjectable); - const navigateToWorkloadsOverview = di.inject(navigateToWorkloadsOverviewInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "overview", - parentId: workloadsSidebarItemId, - title: "Overview", - onClick: navigateToWorkloadsOverview, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 10, - }, - ]); + return { + id: "overview", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "Overview", + onClick: di.inject(navigateToWorkloadsOverviewInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 10, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default workloadsOverviewSidebarItemsInjectable; +export default workloadsOverviewSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-overview/workloads/workloads.injectable.ts b/packages/core/src/renderer/components/workloads-overview/workloads/workloads.injectable.ts index a90e3d63d9..cdd72d9c1b 100644 --- a/packages/core/src/renderer/components/workloads-overview/workloads/workloads.injectable.ts +++ b/packages/core/src/renderer/components/workloads-overview/workloads/workloads.injectable.ts @@ -5,7 +5,7 @@ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; import { shouldShowResourceInjectionToken } from "../../../../features/cluster/showing-kube-resources/common/allowed-resources-injection-token"; -import { byOrderNumber } from "../../../../common/utils/composable-responsibilities/orderable/orderable"; +import { byOrderNumber } from "@k8slens/utilities"; import { workloadInjectionToken } from "./workload-injection-token"; const workloadsInjectable = getInjectable({ diff --git a/packages/core/src/renderer/components/workloads-pods/pods-sidebar-items.injectable.ts b/packages/core/src/renderer/components/workloads-pods/pods-sidebar-items.injectable.ts index 74d8d18538..d509f5ae67 100644 --- a/packages/core/src/renderer/components/workloads-pods/pods-sidebar-items.injectable.ts +++ b/packages/core/src/renderer/components/workloads-pods/pods-sidebar-items.injectable.ts @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import podsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/pods-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToPodsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/navigate-to-pods.injectable"; -const podsSidebarItemsInjectable = getInjectable({ - id: "pods-sidebar-items", +const podsSidebarItemInjectable = getInjectable({ + id: "pods-sidebar-item", instantiate: (di) => { const route = di.inject(podsRouteInjectable); - const navigateToPods = di.inject(navigateToPodsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "pods", - parentId: workloadsSidebarItemId, - title: "Pods", - onClick: navigateToPods, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 20, - }, - ]); + return { + id: "pods", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "Pods", + onClick: di.inject(navigateToPodsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 20, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default podsSidebarItemsInjectable; +export default podsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-replicasets/replicasets-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-replicasets/replicasets-sidebar-items.injectable.tsx index a6745b3759..b94b09b2ce 100644 --- a/packages/core/src/renderer/components/workloads-replicasets/replicasets-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-replicasets/replicasets-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import replicasetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replicasets/replicasets-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToReplicasetsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replicasets/navigate-to-replicasets.injectable"; -const replicasetsSidebarItemsInjectable = getInjectable({ - id: "replicasets-sidebar-items", +const replicasetsSidebarItemInjectable = getInjectable({ + id: "replicasets-sidebar-item", instantiate: (di) => { const route = di.inject(replicasetsRouteInjectable); - const navigateToReplicasets = di.inject(navigateToReplicasetsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "replica-sets", - parentId: workloadsSidebarItemId, - title: "ReplicaSets", - onClick: navigateToReplicasets, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 60, - }, - ]); + return { + id: "replica-sets", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "ReplicaSets", + onClick: di.inject(navigateToReplicasetsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 60, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default replicasetsSidebarItemsInjectable; +export default replicasetsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-replication-controllers/replication-controller-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-replication-controllers/replication-controller-sidebar-items.injectable.tsx index 9108faaabc..6e7005541c 100644 --- a/packages/core/src/renderer/components/workloads-replication-controllers/replication-controller-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-replication-controllers/replication-controller-sidebar-items.injectable.tsx @@ -3,35 +3,30 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import replicationControllersRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replication-controllers/route.injectable"; import navigateToReplicationControllersInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replication-controllers/navigate-to.injectable"; -const replicationControllerSidebarItemsInjectable = getInjectable({ - id: "replication-controller-sidebar-items", +const replicationControllerSidebarItemInjectable = getInjectable({ + id: "replication-controller-sidebar-item", instantiate: (di) => { const route = di.inject(replicationControllersRouteInjectable); - const navigateToPage = di.inject(navigateToReplicationControllersInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "replication-controllers", - parentId: workloadsSidebarItemId, - title: "Replication Controllers", - onClick: navigateToPage, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 61, - }, - ]); + return { + id: "replication-controllers", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "Replication Controllers", + onClick: di.inject(navigateToReplicationControllersInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 61, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default replicationControllerSidebarItemsInjectable; +export default replicationControllerSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads-statefulsets/statefulsets-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads-statefulsets/statefulsets-sidebar-items.injectable.tsx index 2d73309c9d..6797efe17c 100644 --- a/packages/core/src/renderer/components/workloads-statefulsets/statefulsets-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads-statefulsets/statefulsets-sidebar-items.injectable.tsx @@ -3,36 +3,31 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; import statefulsetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/statefulsets/statefulsets-route.injectable"; -import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable"; -import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable"; +import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import routeIsActiveInjectable from "../../routes/route-is-active.injectable"; import navigateToStatefulsetsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/statefulsets/navigate-to-statefulsets.injectable"; -const statefulsetsSidebarItemsInjectable = getInjectable({ - id: "statefulsets-sidebar-items", +const statefulsetsSidebarItemInjectable = getInjectable({ + id: "statefulsets-sidebar-item", instantiate: (di) => { const route = di.inject(statefulsetsRouteInjectable); - const navigateToStatefulsets = di.inject(navigateToStatefulsetsInjectable); - const routeIsActive = di.inject(routeIsActiveInjectable, route); - return computed(() => [ - { - id: "stateful-sets", - parentId: workloadsSidebarItemId, - title: "StatefulSets", - onClick: navigateToStatefulsets, - isActive: routeIsActive, - isVisible: route.isEnabled, - orderNumber: 50, - }, - ]); + return { + id: "stateful-sets", + parentId: di.inject(workloadsSidebarItemInjectable).id, + title: "StatefulSets", + onClick: di.inject(navigateToStatefulsetsInjectable), + isActive: di.inject(routeIsActiveInjectable, route), + isVisible: route.isEnabled, + orderNumber: 50, + }; }, - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default statefulsetsSidebarItemsInjectable; +export default statefulsetsSidebarItemInjectable; diff --git a/packages/core/src/renderer/components/workloads/workloads-sidebar-items.injectable.tsx b/packages/core/src/renderer/components/workloads/workloads-sidebar-items.injectable.tsx index ba34302f9e..b3df7593d8 100644 --- a/packages/core/src/renderer/components/workloads/workloads-sidebar-items.injectable.tsx +++ b/packages/core/src/renderer/components/workloads/workloads-sidebar-items.injectable.tsx @@ -3,34 +3,24 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ import { getInjectable } from "@ogre-tools/injectable"; -import { computed } from "mobx"; -import type { - SidebarItemRegistration } from "../layout/sidebar-items.injectable"; -import { - sidebarItemsInjectionToken, -} from "../layout/sidebar-items.injectable"; +import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar"; import { Icon } from "@k8slens/icon"; import React from "react"; import { noop } from "lodash/fp"; -export const workloadsSidebarItemId = "workloads"; +const workloadsSidebarItemInjectable = getInjectable({ + id: "workloads-sidebar-item", -const workloadsSidebarItemsInjectable = getInjectable({ - id: "workloads-sidebar-items", + instantiate: () => ({ + id: "workloads", + parentId: null, + title: "Workloads", + getIcon: () => , + onClick: noop, + orderNumber: 20, + }), - instantiate: () => - computed((): SidebarItemRegistration[] => [ - { - id: workloadsSidebarItemId, - parentId: null, - title: "Workloads", - getIcon: () => , - onClick: noop, - orderNumber: 20, - }, - ]), - - injectionToken: sidebarItemsInjectionToken, + injectionToken: sidebarItemInjectionToken, }); -export default workloadsSidebarItemsInjectable; +export default workloadsSidebarItemInjectable; diff --git a/packages/core/src/renderer/getDiForUnitTesting.tsx b/packages/core/src/renderer/getDiForUnitTesting.tsx index 0feb093a79..1113cb28b8 100644 --- a/packages/core/src/renderer/getDiForUnitTesting.tsx +++ b/packages/core/src/renderer/getDiForUnitTesting.tsx @@ -21,6 +21,7 @@ import { registerFeature } from "@k8slens/feature-core"; import { messagingFeature, testUtils as messagingTestUtils } from "@k8slens/messaging"; import { routingFeature } from "@k8slens/routing"; import { loggerFeature } from "@k8slens/logger"; +import { clusterSidebarFeature } from "@k8slens/cluster-sidebar"; export const getDiForUnitTesting = () => { const environment = "renderer"; @@ -39,6 +40,7 @@ export const getDiForUnitTesting = () => { routingFeature, loggerFeature, animateFeature, + clusterSidebarFeature, ); }); diff --git a/packages/core/src/renderer/routes/sibling-tabs.injectable.ts b/packages/core/src/renderer/routes/sibling-tabs.injectable.ts index 78c3ba6f58..e35848e217 100644 --- a/packages/core/src/renderer/routes/sibling-tabs.injectable.ts +++ b/packages/core/src/renderer/routes/sibling-tabs.injectable.ts @@ -4,7 +4,7 @@ */ import { computed } from "mobx"; import { getInjectable } from "@ogre-tools/injectable"; -import sidebarItemsInjectable from "../components/layout/sidebar-items.injectable"; +import { sidebarItemsInjectable } from "@k8slens/cluster-sidebar"; const siblingTabsInjectable = getInjectable({ id: "sibling-tabs", @@ -12,11 +12,14 @@ const siblingTabsInjectable = getInjectable({ instantiate: (di) => { const sidebarItems = di.inject(sidebarItemsInjectable); - return computed(() => { - const item = sidebarItems.get().find(({ isActive }) => isActive.get()); - - return item?.children ?? []; - }); + return computed(() => ( + sidebarItems + .get() + .find(({ isActive }) => isActive.get()) + ?.children + .filter(({ isVisible }) => isVisible.get()) + ?? [] + )); }, }); diff --git a/packages/utility-features/utilities/index.ts b/packages/utility-features/utilities/index.ts index 59f90d3da5..8cb46adbeb 100644 --- a/packages/utility-features/utilities/index.ts +++ b/packages/utility-features/utilities/index.ts @@ -5,7 +5,7 @@ export * from "./src/base64"; export * from "./src/buildUrl"; export * from "./src/camelCase"; export * from "./src/collection-functions"; -export * from "./src/computed-or"; +export * from "./src/computed-helpers"; export * from "./src/convertCpu"; export * from "./src/convertMemory"; export * from "./src/cssNames"; @@ -28,6 +28,7 @@ export * from "./src/noop"; export * from "./src/object"; export * from "./src/observable-crate"; export * from "./src/on-keyboard-shortcut"; +export * from "./src/orderable"; export * from "./src/prevDefault"; export * from "./src/readableStream"; export * from "./src/readonly"; diff --git a/packages/utility-features/utilities/src/computed-or.ts b/packages/utility-features/utilities/src/computed-helpers.ts similarity index 73% rename from packages/utility-features/utilities/src/computed-or.ts rename to packages/utility-features/utilities/src/computed-helpers.ts index 4e93394924..5524ce5fe8 100644 --- a/packages/utility-features/utilities/src/computed-or.ts +++ b/packages/utility-features/utilities/src/computed-helpers.ts @@ -9,3 +9,7 @@ import { computed } from "mobx"; export const computedOr = (...values: IComputedValue[]) => computed(( () => values.some(value => value.get()) )); + +export const computedAnd = (...values: IComputedValue[]) => computed(( + () => values.every(value => value.get()) +)); diff --git a/packages/utility-features/utilities/src/iter.ts b/packages/utility-features/utilities/src/iter.ts index b20f48a67a..3d5f8530f5 100644 --- a/packages/utility-features/utilities/src/iter.ts +++ b/packages/utility-features/utilities/src/iter.ts @@ -11,7 +11,7 @@ interface Iterator extends Iterable { find(fn: (val: T) => unknown): T | undefined; collect(fn: (values: Iterable) => U): U; toArray(): T[]; - toMap(): T extends [infer K, infer V] ? Map : never; + toMap(): T extends readonly [infer K, infer V] ? Map : never; toSet(): Set; map(fn: (val: T) => U): Iterator; flatMap(fn: (val: T) => U[]): Iterator; @@ -30,7 +30,22 @@ function chain(src: IterableIterator): Iterator { join: (sep) => join(src, sep), collect: (fn) => fn(src), toArray: () => [...src], - toMap: () => new Map(src as IterableIterator<[any, any]>) as any, + toMap: () => { + const res = new Map(); + + for (const item of src[Symbol.iterator]()) { + const [key, val] = item as [unknown, unknown]; + const existing = res.get(key); + + if (existing) { + existing.push(val); + } else { + res.set(key, [val]); + } + } + + return res as T extends readonly [infer K, infer V] ? Map : never; + }, toSet: () => new Set(src), concat: (src2) => chain(concat(src, src2)), take: (count) => chain(take(src, count)), diff --git a/packages/utility-features/utilities/src/orderable.ts b/packages/utility-features/utilities/src/orderable.ts new file mode 100644 index 0000000000..738808a0e2 --- /dev/null +++ b/packages/utility-features/utilities/src/orderable.ts @@ -0,0 +1,14 @@ +/** + * The Orderable interface is used to define an object that has an order number. + */ +export interface Orderable { + readonly orderNumber: number; +} + +export interface MaybeOrderable { + readonly orderNumber?: number; +} + +export const byOrderNumber = (left: T, right: T) => ( + (left.orderNumber ?? Number.MAX_SAFE_INTEGER) - (right.orderNumber ?? Number.MAX_SAFE_INTEGER) +);