Kludge "isEnabledForCluster" work again for kube object menu items

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

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

@@ -0,0 +1,165 @@
+/**
+ * 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 type { KubernetesCluster } from "../../../../common/catalog-entities";
+import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder";
+import { getExtensionFakeFor } from "../../../../renderer/components/test-utils/get-extension-fake";
+import { getInjectable } from "@ogre-tools/injectable";
+import { frontEndRouteInjectionToken } from "../../../../common/front-end-routing/front-end-route-injection-token";
+import { 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 { KubeObject } from "../../../../common/k8s-api/kube-object";
+import extensionShouldBeEnabledForClusterFrameInjectable from "../../../../renderer/extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
+import { KubeObjectMenu } from "../../../../renderer/components/kube-object-menu";
+import apiManagerInjectable from "../../../../common/k8s-api/api-manager/manager.injectable";
+
+describe("disable kube object menu items when cluster is not relevant", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let isEnabledForClusterMock: AsyncFnMock<
+    (cluster: KubernetesCluster) => boolean
+  >;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+
+    builder.beforeApplicationStart(({ mainDi }) => {
+      mainDi.override(apiManagerInjectable, () => ({}));
+    });
+
+    const rendererDi = builder.dis.rendererDi;
+
+    rendererDi.unoverride(extensionShouldBeEnabledForClusterFrameInjectable);
+
+    rendererDi.register(testRouteInjectable, testRouteComponentInjectable);
+
+    builder.setEnvironmentToClusterFrame();
+
+    const getExtensionFake = getExtensionFakeFor(builder);
+
+    isEnabledForClusterMock = asyncFn();
+
+    const testExtension = getExtensionFake({
+      id: "test-extension-id",
+      name: "test-extension",
+
+      rendererOptions: {
+        isEnabledForCluster: isEnabledForClusterMock,
+
+        kubeObjectMenuItems: [
+          {
+            kind: "some-kind",
+            apiVersions: ["some-api-version"],
+            components: {
+              MenuItem: () => (
+                <div data-testid="some-test-id">Some menu item</div>
+              ),
+            },
+          },
+        ],
+      },
+    });
+
+    rendered = await builder.render();
+
+    const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
+    const testRoute = rendererDi.inject(testRouteInjectable);
+
+    navigateToRoute(testRoute);
+
+    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 kube object menu item", () => {
+      const actual = rendered.queryByTestId("some-test-id");
+
+      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 kube object menu item", () => {
+      const actual = rendered.queryByTestId("some-test-id");
+
+      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 kube object menu item", () => {
+      const actual = rendered.getByTestId("some-test-id");
+
+      expect(actual).toBeInTheDocument();
+    });
+  });
+});
+
+const testRouteInjectable = getInjectable({
+  id: "test-route",
+
+  instantiate: () => ({
+    path: "/test-route",
+    clusterFrame: true,
+    isEnabled: computed(() => true),
+  }),
+
+  injectionToken: frontEndRouteInjectionToken,
+});
+
+const testRouteComponentInjectable = getInjectable({
+  id: "test-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(testRouteInjectable),
+
+    Component: () => (
+      <KubeObjectMenu
+        toolbar={true}
+        object={getKubeObjectStub("some-kind", "some-api-version")}
+      />
+    ),
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+const getKubeObjectStub = (kind: string, apiVersion: string) =>
+  KubeObject.create({
+    apiVersion,
+    kind,
+    metadata: {
+      uid: "some-uid",
+      name: "some-name",
+      resourceVersion: "some-resource-version",
+      namespace: "some-namespace",
+      selfLink: "",
+    },
+  });

src/renderer/components/kube-object-menu/dependencies/kube-object-menu-items/get-kube-object-menu-items.ts

@@ -1,31 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { conforms, includes, eq } from "lodash/fp";
-import type { KubeObject } from "../../../../../common/k8s-api/kube-object";
-import type { LensRendererExtension } from "../../../../../extensions/lens-renderer-extension";
-import { staticKubeObjectMenuItems as staticMenuItems } from "../static-kube-object-menu-items";
-
-interface Dependencies {
-  extensions: LensRendererExtension[];
-  kubeObject: KubeObject | null | undefined;
-}
-
-export const getKubeObjectMenuItems = ({
-  extensions,
-  kubeObject,
-}: Dependencies) => {
-  return [
-    ...staticMenuItems,
-    ...extensions.flatMap((extension) => extension.kubeObjectMenuItems),
-  ]
-    .filter(
-      conforms({
-        kind: eq(kubeObject?.kind),
-        apiVersions: includes(kubeObject?.apiVersion),
-      }),
-    )
-    .map((item) => item.components.MenuItem);
-};
-

src/renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-items.injectable.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
-
-import { getKubeObjectMenuItems } from "./get-kube-object-menu-items";
-import type { KubeObject } from "../../../../../common/k8s-api/kube-object";
-import rendererExtensionsInjectable from "../../../../../extensions/renderer-extensions.injectable";
-
-const kubeObjectMenuItemsInjectable = getInjectable({
-  id: "kube-object-menu-items",
-  instantiate: (di, { kubeObject }: { kubeObject: KubeObject }) =>
-    getKubeObjectMenuItems({
-      extensions: di.inject(rendererExtensionsInjectable).get(),
-      kubeObject,
-    }),
-
-  lifecycle: lifecycleEnum.transient,
-});
-
-export default kubeObjectMenuItemsInjectable;

src/renderer/components/kube-object-menu/dependencies/static-kube-object-menu-items.ts

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { ServiceAccountMenu } from "../../+user-management/+service-accounts/service-account-menu";
-import { CronJobMenu } from "../../+workloads-cronjobs/cron-job-menu";
-import { DeploymentMenu } from "../../+workloads-deployments/deployment-menu";
-import { ReplicaSetMenu } from "../../+workloads-replicasets/replica-set-menu";
-
-export const staticKubeObjectMenuItems = [
-  {
-    kind: "ServiceAccount",
-    apiVersions: ["v1"],
-    components: {
-      MenuItem: ServiceAccountMenu,
-    },
-  },
-  {
-    kind: "CronJob",
-    apiVersions: ["batch/v1beta1"],
-    components: {
-      MenuItem: CronJobMenu,
-    },
-  },
-  {
-    kind: "Deployment",
-    apiVersions: ["apps/v1"],
-    components: {
-      MenuItem: DeploymentMenu,
-    },
-  },
-  {
-    kind: "ReplicaSet",
-    apiVersions: ["apps/v1"],
-    components: {
-      MenuItem: ReplicaSetMenu,
-    },
-  },
-];

src/renderer/components/kube-object-menu/kube-object-menu-item-injection-token.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { IComputedValue } from "mobx";
+import type { KubeObjectMenuProps } from "./kube-object-menu";
+
+export interface KubeObjectMenuItem {
+  kind: string;
+  apiVersions: string[];
+  enabled: IComputedValue<boolean>;
+
+  // TODO: Figure out why "KubeObject" does not work here.
+  Component: React.ElementType<KubeObjectMenuProps<any>>;
+  orderNumber: number;
+}
+
+export const kubeObjectMenuItemInjectionToken = getInjectionToken<KubeObjectMenuItem>({
+  id: "kube-object-menu-item-injection-token",
+});

src/renderer/components/kube-object-menu/kube-object-menu-item-registrator.injectable.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { extensionRegistratorInjectionToken } from "../../../extensions/extension-loader/extension-registrator-injection-token";
+import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
+import getRandomIdInjectable from "../../../common/utils/get-random-id.injectable";
+import extensionShouldBeEnabledForClusterFrameInjectable from "../../extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
+import { kubeObjectMenuItemInjectionToken } from "./kube-object-menu-item-injection-token";
+import { computed } from "mobx";
+
+const kubeObjectMenuItemRegistratorInjectable = getInjectable({
+  id: "kube-object-menu-item-registrator",
+
+  instantiate: (di) => {
+    const getRandomId = di.inject(getRandomIdInjectable);
+
+    const getExtensionShouldBeEnabledForClusterFrame = (
+      extension: LensRendererExtension,
+    ) =>
+      di.inject(extensionShouldBeEnabledForClusterFrameInjectable, extension);
+
+    return (ext) => {
+      const extension = ext as LensRendererExtension;
+
+      const extensionShouldBeEnabledForClusterFrame =
+        getExtensionShouldBeEnabledForClusterFrame(extension);
+
+      return extension.kubeObjectMenuItems.map((registration) => {
+        const id = `kube-object-menu-item-registration-from-${
+          extension.sanitizedExtensionId
+        }-${getRandomId()}`;
+
+        return getInjectable({
+          id,
+
+          instantiate: () => ({
+            kind: registration.kind,
+            apiVersions: registration.apiVersions,
+            Component: registration.components.MenuItem,
+
+            enabled: computed(() =>
+              extensionShouldBeEnabledForClusterFrame.value.get(),
+            ),
+
+            orderNumber: 100,
+          }),
+
+          injectionToken: kubeObjectMenuItemInjectionToken,
+        });
+      });
+    };
+  },
+
+  injectionToken: extensionRegistratorInjectionToken,
+});
+
+export default kubeObjectMenuItemRegistratorInjectable;

src/renderer/components/kube-object-menu/kube-object-menu-items.injectable.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+
+import type { KubeObject } from "../../../common/k8s-api/kube-object";
+import { computed } from "mobx";
+import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import { kubeObjectMenuItemInjectionToken } from "./kube-object-menu-item-injection-token";
+import { filter, map, sortBy } from "lodash/fp";
+import { pipeline } from "@ogre-tools/fp";
+
+const kubeObjectMenuItemsInjectable = getInjectable({
+  id: "kube-object-menu-items",
+
+  instantiate: (di, { kubeObject }: { kubeObject: KubeObject }) => {
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+    const menuItems = computedInjectMany(kubeObjectMenuItemInjectionToken);
+
+    return computed(() =>
+      pipeline(
+        menuItems.get(),
+
+        filter(
+          (item) =>
+            item.kind === kubeObject?.kind &&
+            item.apiVersions.includes(kubeObject?.apiVersion) &&
+            item.enabled.get(),
+        ),
+
+        sortBy((item) => item.orderNumber),
+        map((item) => item.Component),
+      ),
+    );
+  },
+
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, { kubeObject }: { kubeObject: KubeObject }) =>
+      kubeObject?.getId(),
+  }),
+});
+
+export default kubeObjectMenuItemsInjectable;

src/renderer/components/kube-object-menu/kube-object-menu-items/cron-job-menu.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { kubeObjectMenuItemInjectionToken } from "../kube-object-menu-item-injection-token";
+import { computed } from "mobx";
+import { CronJobMenu } from "../../+workloads-cronjobs/cron-job-menu";
+
+const cronJobMenuInjectable = getInjectable({
+  id: "cron-job-menu-kube-object-menu",
+
+  instantiate: () => (  {
+    kind: "CronJob",
+    apiVersions: ["batch/v1beta1"],
+    Component: CronJobMenu,
+    enabled: computed(() => true),
+    orderNumber: 20,
+  }),
+
+  injectionToken: kubeObjectMenuItemInjectionToken,
+});
+
+export default cronJobMenuInjectable;

src/renderer/components/kube-object-menu/kube-object-menu-items/deployment-menu.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { kubeObjectMenuItemInjectionToken } from "../kube-object-menu-item-injection-token";
+import { computed } from "mobx";
+import { DeploymentMenu } from "../../+workloads-deployments/deployment-menu";
+
+const deploymentMenuInjectable = getInjectable({
+  id: "deployment-menu-kube-object-menu",
+
+  instantiate: () => ({
+    kind: "Deployment",
+    apiVersions: ["apps/v1"],
+    Component: DeploymentMenu,
+    enabled: computed(() => true),
+    orderNumber: 30,
+  }),
+
+  injectionToken: kubeObjectMenuItemInjectionToken,
+});
+
+export default deploymentMenuInjectable;

src/renderer/components/kube-object-menu/kube-object-menu-items/replica-set-menu.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { kubeObjectMenuItemInjectionToken } from "../kube-object-menu-item-injection-token";
+import { computed } from "mobx";
+import { ReplicaSetMenu } from "../../+workloads-replicasets/replica-set-menu";
+
+const replicaSetMenuInjectable = getInjectable({
+  id: "replica-set-menu-kube-object-menu",
+
+  instantiate: () => ({
+    kind: "ReplicaSet",
+    apiVersions: ["apps/v1"],
+    Component: ReplicaSetMenu,
+    enabled: computed(() => true),
+    orderNumber: 40,
+  }),
+
+  injectionToken: kubeObjectMenuItemInjectionToken,
+});
+
+export default replicaSetMenuInjectable;

src/renderer/components/kube-object-menu/kube-object-menu-items/service-account-menu.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { kubeObjectMenuItemInjectionToken } from "../kube-object-menu-item-injection-token";
+import { ServiceAccountMenu } from "../../+user-management/+service-accounts/service-account-menu";
+import { computed } from "mobx";
+
+const serviceAccountMenuInjectable = getInjectable({
+  id: "service-account-menu-kube-object-menu",
+
+  instantiate: () => ({
+    kind: "ServiceAccount",
+    apiVersions: ["v1"],
+    Component: ServiceAccountMenu,
+    enabled: computed(() => true),
+    orderNumber: 10,
+  }),
+
+  injectionToken: kubeObjectMenuItemInjectionToken,
+});
+
+export default serviceAccountMenuInjectable;

src/renderer/components/kube-object-menu/kube-object-menu.test.tsx

@@ -8,12 +8,13 @@ import { screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { KubeObject } from "../../../common/k8s-api/kube-object";
 import userEvent from "@testing-library/user-event";
+import { getInjectable } from "@ogre-tools/injectable";
 import type { DiContainer } from "@ogre-tools/injectable";
 import { ConfirmDialog } from "../confirm-dialog";
 import type { AsyncFnMock } from "@async-fn/jest";
 import asyncFn from "@async-fn/jest";
 import { getDiForUnitTesting } from "../../getDiForUnitTesting";
-
+import { computed } from "mobx";
 import clusterInjectable from "./dependencies/cluster.injectable";
 import type { DiRender } from "../test-utils/renderFor";
 import { renderFor } from "../test-utils/renderFor";
@@ -21,12 +22,9 @@ import type { Cluster } from "../../../common/cluster/cluster";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import { KubeObjectMenu } from "./index";
-import type { KubeObjectMenuRegistration } from "./kube-object-menu-registration";
-import { computed } from "mobx";
-import { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
-import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
 import createEditResourceTabInjectable from "../dock/edit-resource/edit-resource-tab.injectable";
 import hideDetailsInjectable from "../kube-detail-params/hide-details.injectable";
+import { kubeObjectMenuItemInjectionToken } from "./kube-object-menu-item-injection-token";
 
 // TODO: Make tooltips free of side effects by making it deterministic
 jest.mock("../tooltip/tooltip");
@@ -35,59 +33,21 @@ jest.mock("../tooltip/withTooltip", () => ({
 }));
 
 // TODO: make `animated={false}` not required to make tests deterministic
-
-class SomeTestExtension extends LensRendererExtension {
-  constructor(
-    kubeObjectMenuItems: KubeObjectMenuRegistration[],
-  ) {
-    super({
-      id: "some-id",
-      absolutePath: "irrelevant",
-      isBundled: false,
-      isCompatible: false,
-      isEnabled: false,
-      manifest: { name: "some-id", version: "some-version", engines: { lens: "^5.5.0" }},
-      manifestPath: "irrelevant",
-    });
-
-    this.kubeObjectMenuItems = kubeObjectMenuItems;
-  }
-}
-
 describe("kube-object-menu", () => {
   let di: DiContainer;
   let render: DiRender;
 
   beforeEach(() => {
-    const MenuItemComponent = () => <li>Some menu item</li>;
-    const someTestExtension = new SomeTestExtension([
-      {
-        apiVersions: ["some-api-version"],
-        kind: "some-kind",
-        components: { MenuItem: MenuItemComponent },
-      },
-
-      {
-        apiVersions: ["some-unrelated-api-version"],
-        kind: "some-kind",
-        components: { MenuItem: MenuItemComponent },
-      },
-
-      {
-        apiVersions: ["some-api-version"],
-        kind: "some-unrelated-kind",
-        components: { MenuItem: MenuItemComponent },
-      },
-    ]);
-
     di = getDiForUnitTesting({ doGeneralOverrides: true });
 
-    render = renderFor(di);
-
-    di.override(rendererExtensionsInjectable, () =>
-      computed(() => [someTestExtension]),
+    di.register(
+      someMenuItemInjectable,
+      someOtherMenuItemInjectable,
+      someAnotherMenuItemInjectable,
     );
 
+    render = renderFor(di);
+
     di.override(
       clusterInjectable,
       () =>
@@ -318,3 +278,47 @@ describe("kube-object-menu", () => {
     });
   });
 });
+
+const MenuItemComponent = () => <li>Some menu item</li>;
+
+const someMenuItemInjectable = getInjectable({
+  id: "some-menu-item",
+
+  instantiate: () => ({
+    apiVersions: ["some-api-version"],
+    kind: "some-kind",
+    Component: MenuItemComponent,
+    enabled: computed(() => true),
+    orderNumber: 1,
+  }),
+
+  injectionToken: kubeObjectMenuItemInjectionToken,
+});
+
+const someOtherMenuItemInjectable = getInjectable({
+  id: "some-other-menu-item",
+
+  instantiate: () => ({
+    apiVersions: ["some-unrelated-api-version"],
+    kind: "some-kind",
+    Component: MenuItemComponent,
+    enabled: computed(() => true),
+    orderNumber: 1,
+  }),
+
+  injectionToken: kubeObjectMenuItemInjectionToken,
+});
+
+const someAnotherMenuItemInjectable = getInjectable({
+  id: "some-another-menu-item",
+
+  instantiate: () => ({
+    apiVersions: ["some-api-version"],
+    kind: "some-unrelated-kind",
+    Component: MenuItemComponent,
+    enabled: computed(() => true),
+    orderNumber: 1,
+  }),
+
+  injectionToken: kubeObjectMenuItemInjectionToken,
+});

src/renderer/components/kube-object-menu/kube-object-menu.tsx

@@ -13,13 +13,14 @@ import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import clusterNameInjectable from "./dependencies/cluster-name.injectable";
 import createEditResourceTabInjectable from "../dock/edit-resource/edit-resource-tab.injectable";
-import kubeObjectMenuItemsInjectable from "./dependencies/kube-object-menu-items/kube-object-menu-items.injectable";
+import kubeObjectMenuItemsInjectable from "./kube-object-menu-items.injectable";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import type { HideDetails } from "../kube-detail-params/hide-details.injectable";
 import hideDetailsInjectable from "../kube-detail-params/hide-details.injectable";
 import type { OnKubeObjectContextMenuOpen } from "./on-context-menu-open.injectable";
 import onKubeObjectContextMenuOpenInjectable from "./on-context-menu-open.injectable";
 import type { KubeObjectContextMenuItem } from "../../kube-object/handler";
+import type { IComputedValue } from "mobx";
 import { observable, runInAction } from "mobx";
 import type { WithConfirmation } from "../confirm-dialog/with-confirm.injectable";
 import type { Navigate } from "../../navigation/navigate.injectable";
@@ -36,7 +37,7 @@ export interface KubeObjectMenuProps<TKubeObject extends KubeObject> extends Men
 
 interface Dependencies {
   apiManager: ApiManager;
-  kubeObjectMenuItems: React.ElementType[];
+  kubeObjectMenuItems: IComputedValue<React.ElementType[]>;
   clusterName: string | undefined;
   hideDetails: HideDetails;
   createEditResourceTab: (kubeObject: KubeObject) => void;
@@ -73,7 +74,7 @@ class NonInjectedKubeObjectMenu<Kube extends KubeObject> extends React.Component
   private renderMenuItems() {
     const { object, toolbar } = this.props;
 
-    return this.props.kubeObjectMenuItems.map((MenuItem, index) => (
+    return this.props.kubeObjectMenuItems.get().map((MenuItem, index) => (
       <MenuItem
         object={object}
         toolbar={toolbar}