chore: Extract sidebar item injection token into separate package

- Add unit tests to cover custom resources sidebar items

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/cluster-sidebar/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: "@k8slens/eslint-config/eslint",
+    parserOptions: {
+      project: "./tsconfig.json",
+    },
+  };

packages/cluster-sidebar/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

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";

packages/cluster-sidebar/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;

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"
+  }
+}

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)$/)],
+    });
+  },
+});

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;

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<boolean>;
+  isVisible?: IComputedValue<boolean>;
+  orderNumber: number;
+}
+
+export interface SidebarItem {
+  id: string;
+  parentId: string | null;
+  title: StrictReactNode;
+  onClick: () => void;
+  getIcon?: () => StrictReactNode;
+  isActive: IComputedValue<boolean>;
+  isVisible: IComputedValue<boolean>;
+}
+
+export interface HierarchicalSidebarItem extends SidebarItem {
+  children: HierarchicalSidebarItem[];
+}
+
+export const sidebarItemInjectionToken = getInjectionToken<SidebarItemRegistration>({
+  id: "sidebar-item-injection-token",
+});

packages/cluster-sidebar/tsconfig.json

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

packages/cluster-sidebar/webpack.config.js

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