Kludge "isEnabledForCluster" work again for cluster page menus (sidebar items)

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/behaviours/cluster/extension-api/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { AsyncFnMock } from "@async-fn/jest";
+import asyncFn from "@async-fn/jest";
+import type { RenderResult } from "@testing-library/react";
+import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import { getExtensionFakeFor } from "../../../renderer/components/test-utils/get-extension-fake";
+import type { KubernetesCluster } from "../../../common/catalog-entities";
+import React from "react";
+import extensionShouldBeEnabledForClusterFrameInjectable from "../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
+
+describe("disable-sidebar-items-when-cluster-is-not-relevant", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let isEnabledForClusterMock: AsyncFnMock<(cluster: KubernetesCluster) => boolean>;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+
+    builder.setEnvironmentToClusterFrame();
+
+    builder.dis.rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
+
+    const getExtensionFake = getExtensionFakeFor(builder);
+
+    isEnabledForClusterMock = asyncFn();
+
+    const testExtension = getExtensionFake({
+      id: "test-extension-id",
+      name: "test-extension",
+
+      rendererOptions: {
+        isEnabledForCluster: isEnabledForClusterMock,
+
+        clusterPages: [{
+          components: {
+            Page: () => <div data-testid="some-test-page">Some page</div>,
+          },
+        }],
+
+        clusterPageMenus: [
+          {
+            id: "some-sidebar-item",
+            title: "Some sidebar item",
+
+            components: {
+              Icon: () => <div>Some icon</div>,
+            },
+          },
+        ],
+      },
+    });
+
+    rendered = await builder.render();
+
+    builder.extensions.enable(testExtension);
+  });
+
+  describe("given not yet known if extension should be enabled for the cluster, when navigating", () => {
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("does not show the sidebar item", () => {
+      const actual = rendered.queryByTestId(
+        "sidebar-item-some-extension-name-some-sidebar-item",
+      );
+
+      expect(actual).not.toBeInTheDocument();
+    });
+  });
+
+  describe("given extension shouldn't be enabled for the cluster, when navigating", () => {
+    beforeEach(async () => {
+      await isEnabledForClusterMock.resolve(false);
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("does not show the sidebar item", () => {
+      const actual = rendered.queryByTestId(
+        "sidebar-item-some-extension-name-some-sidebar-item",
+      );
+
+      expect(actual).not.toBeInTheDocument();
+    });
+  });
+
+  describe("given extension should be enabled for the cluster, when navigating", () => {
+    beforeEach(async () => {
+      await isEnabledForClusterMock.resolve(true);
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("shows the sidebar item", () => {
+      const actual = rendered.getByTestId(
+        "sidebar-item-test-extension-some-sidebar-item",
+      );
+
+      expect(actual).toBeInTheDocument();
+    });
+  });
+});

src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx

@@ -14,6 +14,7 @@ import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import { navigateToRouteInjectionToken } from "../../../common/front-end-routing/navigate-to-route-injection-token";
 import { getExtensionRoutePath } from "../../routes/for-extension";
 import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
+import extensionShouldBeEnabledForClusterFrameInjectable from "../../extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
 
 const extensionSidebarItemRegistratorInjectable = getInjectable({
   id: "extension-sidebar-item-registrator",
@@ -22,6 +23,7 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({
     const extension = ext as LensRendererExtension;
     const navigateToRoute = di.inject(navigateToRouteInjectionToken);
     const routes = di.inject(routesInjectable);
+    const extensionShouldBeEnabledForClusterFrame = di.inject(extensionShouldBeEnabledForClusterFrameInjectable, extension);
 
     const sidebarItemsForExtensionInjectable = getInjectable({
       id: `sidebar-items-for-extension-${extension.sanitizedExtensionId}`,
@@ -41,6 +43,18 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({
               matches({ path: targetRoutePath }),
             );
 
+            const isVisible = computed(() => {
+              if (!extensionShouldBeEnabledForClusterFrame.value.get()) {
+                return false;
+              }
+
+              if (!registration.visible) {
+                return true;
+              }
+
+              return registration.visible.get();
+            });
+
             const res: SidebarItemRegistration = {
               id: `${extension.sanitizedExtensionId}-${registration.id}`,
               orderNumber: 9999,
@@ -49,7 +63,7 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({
                 ? `${extension.sanitizedExtensionId}-${registration.parentId}`
                 : null,
 
-              ...(registration.visible ? { isVisible: registration.visible } : {}),
+              isVisible,
 
               title: registration.title,
               getIcon: registration.components.Icon