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>
2025-05-20 05:10:56 +00:00 · 2023-03-23 11:40:56 +03:00
1 parent 4a3f08d798
commit a0d13e8003
@@ -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>
+`;
@@ -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();
+    });
+  });
 });
@@ -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",
@@ -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",
-});
@@ -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 { clusterIconSettingsMenuInjectionToken } from "./cluster-settings-menu-injection-token";
+import { clusterIconSettingsComponentInjectionToken, clusterIconSettingsMenuInjectionToken } from "@k8slens/cluster-settings";
+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),
    };
  },