Expose reactive way to disable pages in Extension API

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

src/behaviours/cluster/extension-api/reactively-disable-cluster-pages.test.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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 type { IObservableValue } from "mobx";
+import { observable, runInAction, computed } from "mobx";
+import React from "react";
+import type { TestExtensionRenderer } from "../../../renderer/components/test-utils/get-extension-fake";
+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";
+
+describe("reactively disable cluster pages", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let someObservable: IObservableValue<boolean>;
+  let rendererTestExtension: TestExtensionRenderer;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+
+    builder.setEnvironmentToClusterFrame();
+
+    const getExtensionFake = getExtensionFakeFor(builder);
+
+    someObservable = observable.box(false);
+
+    const testExtension = getExtensionFake({
+      id: "test-extension-id",
+      name: "test-extension",
+
+      rendererOptions: {
+        clusterPages: [{
+          components: {
+            Page: () => <div data-testid="some-test-page">Some page</div>,
+          },
+
+          enabled: computed(() => someObservable.get()),
+        }],
+      },
+    });
+
+    rendered = await builder.render();
+
+    builder.extensions.enable(testExtension);
+
+    rendererTestExtension = testExtension.renderer;
+  });
+
+  it("when navigating to the page, does not show the page", () => {
+    rendererTestExtension.navigate();
+
+    const actual = rendered.queryByTestId("some-test-page");
+
+    expect(actual).not.toBeInTheDocument();
+  });
+
+  it("given page becomes enabled, when navigating to the page, shows the page", () => {
+    runInAction(() => {
+      someObservable.set(true);
+    });
+
+    rendererTestExtension.navigate();
+
+    const actual = rendered.queryByTestId("some-test-page");
+
+    expect(actual).toBeInTheDocument();
+  });
+});

src/behaviours/cluster/kube-object-menu/extension-api/reactively-hide-kube-object-menu-item.test.tsx

@@ -13,7 +13,6 @@ import { observable, runInAction, computed } from "mobx";
 import React from "react";
 import { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token";
 import { routeSpecificComponentInjectionToken } from "../../../../renderer/routes/route-specific-component-injection-token";
-import extensionShouldBeEnabledForClusterFrameInjectable from "../../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
 import { KubeObject } from "../../../../common/k8s-api/kube-object";
 import { KubeObjectMenu } from "../../../../renderer/components/kube-object-menu";
 
@@ -27,8 +26,6 @@ describe("reactively hide kube object menu item", () => {
 
     const rendererDi = builder.dis.rendererDi;
 
-    rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
-
     rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
 
     builder.setEnvironmentToClusterFrame();

src/behaviours/routes/extension-api/reactively-disable-global-pages.test.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 type { IObservableValue } from "mobx";
+import { observable, runInAction, computed } from "mobx";
+import React from "react";
+import type { TestExtensionRenderer } from "../../../renderer/components/test-utils/get-extension-fake";
+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";
+
+describe("reactively disable global pages", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let someObservable: IObservableValue<boolean>;
+  let rendererTestExtension: TestExtensionRenderer;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+
+    const getExtensionFake = getExtensionFakeFor(builder);
+
+    someObservable = observable.box(false);
+
+    const testExtension = getExtensionFake({
+      id: "test-extension-id",
+      name: "test-extension",
+
+      rendererOptions: {
+        globalPages: [{
+          components: {
+            Page: () => <div data-testid="some-test-page">Some page</div>,
+          },
+
+          enabled: computed(() => someObservable.get()),
+        }],
+      },
+    });
+
+    rendered = await builder.render();
+
+    builder.extensions.enable(testExtension);
+
+    rendererTestExtension = testExtension.renderer;
+  });
+
+  it("when navigating to the page, does not show the page", () => {
+    rendererTestExtension.navigate();
+
+    const actual = rendered.queryByTestId("some-test-page");
+
+    expect(actual).not.toBeInTheDocument();
+  });
+
+  it("given page becomes enabled, when navigating to the page, shows the page", () => {
+    runInAction(() => {
+      someObservable.set(true);
+    });
+
+    rendererTestExtension.navigate();
+
+    const actual = rendered.queryByTestId("some-test-page");
+
+    expect(actual).toBeInTheDocument();
+  });
+});

src/extensions/registries/page-registry.ts

@@ -2,6 +2,7 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
+import type { IComputedValue } from "mobx";
 import type { PageParamInit, PageParam } from "../../renderer/navigation";
 
 // Extensions-api -> Custom page registration
@@ -14,6 +15,7 @@ export interface PageRegistration {
   id?: string;
   params?: PageParams<string | Omit<PageParamInit<any>, "name" | "prefix">>;
   components: PageComponents;
+  enabled?: IComputedValue<boolean>;
 }
 
 export interface PageComponents {

src/renderer/routes/extension-route-registrator.injectable.tsx

@@ -35,16 +35,22 @@ const extensionRouteRegistratorInjectable = getInjectable({
 
       return [
         ...extension.globalPages.map(
-          toRouteInjectable(
+          toRouteInjectable(false, (registration) =>
-            false,
+            computed(() =>
-            computed(() => true),
+              registration.enabled ? registration.enabled.get() : true,
+            ),
           ),
         ),
 
         ...extension.clusterPages.map(
-          toRouteInjectable(
+          toRouteInjectable(true, (registration) =>
-            true,
+            computed(() => {
-            computed(() => extensionShouldBeEnabledForClusterFrame.value.get()),
+              if (!extensionShouldBeEnabledForClusterFrame.value.get()) {
+                return false;
+              }
+
+              return registration.enabled ? registration.enabled.get() : true;
+            }),
           ),
         ),
       ].flat();
@@ -61,7 +67,7 @@ const toRouteInjectableFor =
     di: DiContainerForInjection,
     extension: LensRendererExtension,
   ) =>
-    (clusterFrame: boolean, isEnabled: IComputedValue<boolean>) =>
+    (clusterFrame: boolean, getIsEnabled: (registration: PageRegistration) => IComputedValue<boolean>) =>
       (registration: PageRegistration) => {
         const routeInjectable = getInjectable({
           id: `route-${registration.id}-for-extension-${extension.sanitizedExtensionId}`,
@@ -69,7 +75,7 @@ const toRouteInjectableFor =
           instantiate: () => ({
             path: getExtensionRoutePath(extension, registration.id),
             clusterFrame,
-            isEnabled,
+            isEnabled: getIsEnabled(registration),
             extension,
           }),