Adding package exporting injection tokens for cluster settings (#7395)

* Add clusterIconSettingsComponentInjectionToken

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding tests for new token

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Create cluster-settings package

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix cluster-settings package build process

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Use tolens from @k8slens/cluster-settings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Linter fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove typescript 5.x.x from cluster-settings package

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding prepare:test command to package.json

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Test small cleanup

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix getByText check

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Linter fix

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

---------

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

package-lock.json

@@ -4524,6 +4524,10 @@
       "resolved": "packages/bump-version-for-cron",
       "link": true
     },
+    "node_modules/@k8slens/cluster-settings": {
+      "resolved": "packages/cluster-settings",
+      "link": true
+    },
     "node_modules/@k8slens/computed-channel": {
       "resolved": "packages/technical-features/messaging/computed-channel",
       "link": true
@@ -34142,6 +34146,25 @@
       "integrity": "sha512-ZOzvDRWp8dCVBmgnkIqYCArgdFOO9YzocZp8Ra25N/RStKiWvMOXHMz+GjSeVNe5TstaTmTWPucGJkDw0XXJWA==",
       "dev": true
     },
+    "packages/cluster-settings": {
+      "name": "@k8slens/cluster-settings",
+      "version": "6.5.0-alpha.1",
+      "license": "MIT",
+      "devDependencies": {
+        "@ogre-tools/injectable": "^15.1.2",
+        "@swc/cli": "^0.1.61",
+        "@swc/core": "^1.3.37",
+        "@types/node": "^16.18.11",
+        "@types/semver": "^7.3.13",
+        "rimraf": "^4.1.2"
+      }
+    },
+    "packages/cluster-settings/node_modules/@types/node": {
+      "version": "16.18.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.18.tgz",
+      "integrity": "sha512-fwGw1uvQAzabxL1pyoknPlJIF2t7+K90uTqynleKRx24n3lYcxWa3+KByLhgkF8GEAK2c7hC8Ki0RkNM5H15jQ==",
+      "dev": true
+    },
     "packages/core": {
       "name": "@k8slens/core",
       "version": "6.5.0-alpha.3",
@@ -34150,6 +34173,7 @@
         "@astronautlabs/jsonpath": "^1.1.0",
         "@hapi/call": "^9.0.1",
         "@hapi/subtext": "^7.1.0",
+        "@k8slens/cluster-settings": "^6.5.0-alpha.1",
         "@k8slens/node-fetch": "^6.5.0-alpha.1",
         "@kubernetes/client-node": "^0.18.1",
         "@material-ui/styles": "^4.11.5",

packages/cluster-settings/.swcrc

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2022"
+  }
+}

packages/cluster-settings/README.md

@@ -0,0 +1,3 @@
+# Description
+
+The package exports tokens needed for external configuration of Cluster Settings page.

packages/cluster-settings/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@k8slens/cluster-settings",
+  "version": "6.5.0-alpha.1",
+  "description": "Injection token exporter for cluster settings configuration",
+  "license": "MIT",
+  "private": false,
+  "mode": "production",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist/",
+    "generate-types": "tsc --d --declarationDir ./dist --declarationMap --emitDeclarationOnly",
+    "build": "npm run generate-types && swc ./src/index.ts -d ./dist",
+    "prepare:test": "npm run build"
+  },
+  "devDependencies": {
+    "@ogre-tools/injectable": "^15.1.2",
+    "@swc/cli": "^0.1.61",
+    "@swc/core": "^1.3.37",
+    "@types/node": "^16.18.11",
+    "@types/semver": "^7.3.13",
+    "rimraf": "^4.1.2"
+  }
+}

packages/cluster-settings/src/index.ts

@@ -0,0 +1,30 @@
+import { getInjectionToken } from "@ogre-tools/injectable";
+
+type ClusterPreferences = {
+  clusterName?: string;
+  icon?: string | null;
+}
+
+export interface ClusterIconMenuItem {
+  id: string;
+  title: string;
+  disabled?: (preferences: ClusterPreferences) => boolean;
+  onClick: (preferences: ClusterPreferences) => void;
+}
+
+export interface ClusterIconSettingComponentProps {
+  preferences: ClusterPreferences;
+}
+
+export interface ClusterIconSettingsComponent {
+  id: string;
+  Component: React.ComponentType<ClusterIconSettingComponentProps>;
+}
+
+export const clusterIconSettingsMenuInjectionToken = getInjectionToken<ClusterIconMenuItem>({
+  id: "cluster-icon-settings-menu-injection-token",
+});
+
+export const clusterIconSettingsComponentInjectionToken = getInjectionToken<ClusterIconSettingsComponent>({
+  id: "cluster-icon-settings-component-injection-token",
+});

packages/cluster-settings/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/",
+    "paths": {
+      "*": [
+        "node_modules/*",
+        "types/*"
+      ]
+    },
+  },
+  "include": [
+    "src/**/*",
+  ],
+  "exclude": [
+    "node_modules",
+  ]
+}

packages/core/package.json

@@ -120,6 +120,7 @@
     "@astronautlabs/jsonpath": "^1.1.0",
     "@hapi/call": "^9.0.1",
     "@hapi/subtext": "^7.1.0",
+    "@k8slens/cluster-settings": "^6.5.0-alpha.1",
     "@k8slens/node-fetch": "^6.5.0-alpha.1",
     "@kubernetes/client-node": "^0.18.1",
     "@material-ui/styles": "^4.11.5",

packages/core/src/renderer/components/cluster-settings/__tests__/__snapshots__/icon-settings.test.tsx.snap

@@ -51,3 +51,55 @@ exports[`Icon settings given no external registrations for cluster settings menu
   </div>
 </body>
 `;
+
+exports[`Icon settings given no registrations for cluster settings component injection token renders 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        class="file-loader flex flex-row items-center"
+      >
+        <div
+          class="mr-5"
+        >
+          <div
+            class="FilePicker"
+          >
+            <label
+              class="flex gaps align-center"
+              for="file-upload"
+            >
+              <div
+                class="Avatar rounded"
+                style="width: 53px; height: 53px; background: rgb(9, 124, 92);"
+              >
+                skc
+              </div>
+               
+            </label>
+            <input
+              accept="image/*"
+              id="file-upload"
+              name="FilePicker"
+              type="file"
+            />
+          </div>
+        </div>
+        <i
+          class="Icon material interactive focusable"
+          data-testid="icon-for-menu-actions-for-cluster-icon-settings-for-some-entity-id"
+          id="menu-actions-for-cluster-icon-settings-for-some-entity-id"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="more_horiz"
+          >
+            more_horiz
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/core/src/renderer/components/cluster-settings/__tests__/icon-settings.test.tsx

@@ -2,8 +2,7 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import type { DiContainer } from "@ogre-tools/injectable";
+
-import { getInjectable } from "@ogre-tools/injectable";
 import type { RenderResult } from "@testing-library/react";
 import React from "react";
 import { KubernetesCluster } from "../../../../common/catalog-entities";
@@ -13,13 +12,18 @@ import { renderFor } from "../../test-utils/renderFor";
 import { ClusterIconSetting } from "../icon-settings";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { clusterIconSettingsMenuInjectionToken } from "../cluster-settings-menu-injection-token";
+import type { ClusterIconSettingComponentProps } from "@k8slens/cluster-settings";
+import { clusterIconSettingsComponentInjectionToken, clusterIconSettingsMenuInjectionToken } from "@k8slens/cluster-settings";
 import { runInAction } from "mobx";
+import { getInjectable, type DiContainer } from "@ogre-tools/injectable";
 
 const cluster = new Cluster({
   contextName: "some-context",
   id: "some-id",
   kubeConfigPath: "/some/path/to/kubeconfig",
+  preferences: {
+    clusterName: "some-cluster-name",
+  },
 }, {
   clusterServerUrl: "https://localhost:9999",
 });
@@ -53,6 +57,29 @@ const newMenuItem = getInjectable({
   injectionToken: clusterIconSettingsMenuInjectionToken,
 });
 
+function CustomSettingsComponent(props: ClusterIconSettingComponentProps) {
+  return (
+    <div data-testid="my-react-component">
+      <span>Test React Component</span>
+      <span>
+        Cluster
+        {props.preferences.clusterName}
+      </span>
+    </div>
+  );
+} 
+
+const newSettingsReactComponent = getInjectable({
+  id: "cluster-icon-settings-react-component",
+
+  instantiate: () => ({
+    id: "test-react-component",
+    Component: CustomSettingsComponent,
+  }),
+
+  injectionToken: clusterIconSettingsComponentInjectionToken,
+});
+
 describe("Icon settings", () => {
   let rendered: RenderResult;
   let di: DiContainer;
@@ -98,4 +125,30 @@ describe("Icon settings", () => {
       expect(rendered.getByText("Hello World")).toBeInTheDocument();
     });
   });
+
+  describe("given no registrations for cluster settings component injection token", () => {
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("does not have any external components", async () => {
+      expect(rendered.queryByTestId("test-react-component")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("given registration for cluster settings component injection token", () => {
+    beforeEach(() => {
+      runInAction(() => {
+        di.register(newSettingsReactComponent);
+      });
+    });
+
+    it("renders external component", async () => {
+      expect(rendered.queryByTestId("my-react-component")).toBeInTheDocument();
+    });
+
+    it("external component has cluster preferences in props", async () => {
+      expect(rendered.getByText(/some-cluster-name/)).toBeInTheDocument();
+    });
+  });
 });

packages/core/src/renderer/components/cluster-settings/cluster-settings-menu-clear-item.injectable.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { clusterIconSettingsMenuInjectionToken } from "./cluster-settings-menu-injection-token";
+import { clusterIconSettingsMenuInjectionToken } from "@k8slens/cluster-settings";
 
 const clusterIconSettingsMenuClearItem = getInjectable({
   id: "cluster-icon-settings-menu-clear-item",

packages/core/src/renderer/components/cluster-settings/cluster-settings-menu-injection-token.ts

@@ -1,17 +0,0 @@
-/**
- * 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 { ClusterPreferences } from "../../../common/cluster-types";
-
-export interface ClusterIconMenuItem {
-  id: string;
-  title: string;
-  disabled?: (preferences: ClusterPreferences) => boolean;
-  onClick: (preferences: ClusterPreferences) => void;
-}
-
-export const clusterIconSettingsMenuInjectionToken = getInjectionToken<ClusterIconMenuItem>({
-  id: "cluster-icon-settings-menu-injection-token",
-});

packages/core/src/renderer/components/cluster-settings/icon-settings.tsx

@@ -15,8 +15,8 @@ import { FilePicker, OverSizeLimitStyle } from "../file-picker";
 import { MenuActions, MenuItem } from "../menu";
 import type { ShowNotification } from "../notifications";
 import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
-import type { ClusterIconMenuItem } from "./cluster-settings-menu-injection-token";
+import { clusterIconSettingsComponentInjectionToken, clusterIconSettingsMenuInjectionToken } from "@k8slens/cluster-settings";
-import { clusterIconSettingsMenuInjectionToken } from "./cluster-settings-menu-injection-token";
+import type { ClusterIconMenuItem, ClusterIconSettingsComponent } from "@k8slens/cluster-settings";
 
 export interface ClusterIconSettingProps {
   cluster: Cluster;
@@ -25,6 +25,7 @@ export interface ClusterIconSettingProps {
 
 interface Dependencies {
   menuItems: IComputedValue<ClusterIconMenuItem[]>;
+  settingComponents: IComputedValue<ClusterIconSettingsComponent[]>;
   showErrorNotification: ShowNotification;
 }
 
@@ -95,6 +96,14 @@ const NonInjectedClusterIconSetting = observer((props: ClusterIconSettingProps &
           )}
         </MenuActions>
       </div>
+      {props.settingComponents.get().map(item => {
+        return (
+          <item.Component
+            key={item.id}
+            preferences={cluster.preferences}
+          />
+        );
+      })}
     </div>
   );
 });
@@ -106,6 +115,7 @@ export const ClusterIconSetting = withInjectables<Dependencies, ClusterIconSetti
     return {
       ...props,
       menuItems: computedInjectMany(clusterIconSettingsMenuInjectionToken),
+      settingComponents: computedInjectMany(clusterIconSettingsComponentInjectionToken),
       showErrorNotification: di.inject(showErrorNotificationInjectable),
     };
   },