diff --git a/src/behaviours/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap b/src/behaviours/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap new file mode 100644 index 0000000000..4cadc0f1e5 --- /dev/null +++ b/src/behaviours/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap @@ -0,0 +1,1554 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`disable-sidebar-items-when-cluster-is-not-relevant given extension should be enabled for the cluster, when navigating renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ + + + security + + + + Access Control + + +
+
+ +
+
+ +
+ Some icon +
+ + Some sidebar item + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + add + +
+ +
+ + + fullscreen + +
+ + + + keyboard_arrow_up + +
+ +
+
+
+
+
+
+ +`; + +exports[`disable-sidebar-items-when-cluster-is-not-relevant given extension shouldn't be enabled for the cluster, when navigating renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ + + + security + + + + Access Control + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + add + +
+ +
+ + + fullscreen + +
+ + + + keyboard_arrow_up + +
+ +
+
+
+
+
+
+ +`; + +exports[`disable-sidebar-items-when-cluster-is-not-relevant given not yet known if extension should be enabled for the cluster, when navigating renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ + + + security + + + + Access Control + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + add + +
+ +
+ + + fullscreen + +
+ + + + keyboard_arrow_up + +
+ +
+
+
+
+
+
+ +`; diff --git a/src/behaviours/cluster/extension-api/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx b/src/behaviours/cluster/extension-api/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx new file mode 100644 index 0000000000..6302b12d71 --- /dev/null +++ b/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: () =>
Some page
, + }, + }], + + clusterPageMenus: [ + { + id: "some-sidebar-item", + title: "Some sidebar item", + + components: { + Icon: () =>
Some icon
, + }, + }, + ], + }, + }); + + 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(); + }); + }); +}); diff --git a/src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx b/src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx index 28c0ed89ed..9792855b07 100644 --- a/src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx +++ b/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