Make EntitySettingRegistry fully injectable (#6604)

* Make EntitySettingRegistry fully injectable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add behavioural tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix lint

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Revert tsconfig change

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix type errors

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Update snapshot

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Improve naming

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/utils/composable-responsibilities/orderable/orderable.ts

@@ -19,3 +19,7 @@ export const orderByOrderNumber = <T extends MaybeOrderable>(maybeOrderables: T[
         : Number.MAX_SAFE_INTEGER,
     maybeOrderables,
   );
+
+export const byOrderNumber = <T extends Orderable>(left: T, right: T) => (
+  left.orderNumber - right.orderNumber
+);

src/extensions/extension-loader/extension-loader.ts

@@ -261,7 +261,6 @@ export class ExtensionLoader {
     return this.autoInitExtensions(async (ext) => {
       const extension = ext as LensRendererExtension;
       const removeItems = [
-        registries.EntitySettingRegistry.getInstance().add(extension.entitySettings),
         registries.CatalogEntityDetailRegistry.getInstance().add(extension.catalogEntityDetailItems),
       ];
 

src/extensions/lens-renderer-extension.ts

@@ -29,6 +29,7 @@ import type { KubeObjectHandlerRegistration } from "../renderer/kube-object/hand
 import type { AppPreferenceTabRegistration } from "../features/preferences/renderer/compliance-for-legacy-extension-api/app-preference-tab-registration";
 import type { KubeObjectDetailRegistration } from "../renderer/components/kube-object-details/kube-object-detail-registration";
 import type { ClusterFrameChildComponent } from "../renderer/frames/cluster-frame/cluster-frame-child-component-injection-token";
+import type { EntitySettingRegistration } from "../renderer/components/+entity-settings/extension-registrator.injectable";
 
 export class LensRendererExtension extends LensExtension<LensRendererExtensionDependencies> {
   globalPages: registries.PageRegistration[] = [];
@@ -38,7 +39,7 @@ export class LensRendererExtension extends LensExtension<LensRendererExtensionDe
   kubeObjectStatusTexts: KubeObjectStatusRegistration[] = [];
   appPreferences: AppPreferenceRegistration[] = [];
   appPreferenceTabs: AppPreferenceTabRegistration[] = [];
-  entitySettings: registries.EntitySettingRegistration[] = [];
+  entitySettings: EntitySettingRegistration[] = [];
   statusBarItems: StatusBarRegistration[] = [];
   kubeObjectDetailItems: KubeObjectDetailRegistration[] = [];
   kubeObjectMenuItems: KubeObjectMenuRegistration[] = [];

src/extensions/registries/entity-setting-registry.ts

@@ -1,54 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type React from "react";
-import type { CatalogEntity } from "../../common/catalog";
-import { BaseRegistry } from "./base-registry";
-
-export interface EntitySettingViewProps {
-  entity: CatalogEntity;
-}
-
-export interface EntitySettingComponents {
-  View: React.ComponentType<EntitySettingViewProps>;
-}
-
-export interface EntitySettingRegistration {
-  apiVersions: string[];
-  kind: string;
-  title: string;
-  components: EntitySettingComponents;
-  source?: string;
-  id?: string;
-  priority?: number;
-  group?: string;
-}
-
-export interface RegisteredEntitySetting extends EntitySettingRegistration {
-  id: string;
-}
-
-export class EntitySettingRegistry extends BaseRegistry<EntitySettingRegistration, RegisteredEntitySetting> {
-  getRegisteredItem(item: EntitySettingRegistration): RegisteredEntitySetting {
-    return {
-      id: item.id || item.title.toLowerCase(),
-      ...item,
-    };
-  }
-
-  getItemsForKind(kind: string, apiVersion: string, source?: string) {
-    let items = this.getItems().filter((item) => {
-      return item.kind === kind && item.apiVersions.includes(apiVersion);
-    });
-
-    if (source) {
-      items = items.filter((item) => {
-        return !item.source || item.source === source;
-      });
-    }
-
-    return items.sort((a, b) => (b.priority ?? 50) - (a.priority ?? 50));
-  }
-}

src/extensions/registries/index.ts

@@ -7,6 +7,5 @@
 
 export * from "./page-registry";
 export * from "./page-menu-registry";
-export * from "./entity-setting-registry";
 export * from "./catalog-entity-detail-registry";
 export * from "./protocol-handler";

src/features/entity-settings/showing-settings-for-correct-entity.test.tsx

@@ -0,0 +1,226 @@
+/**
+ * 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 type { RenderResult } from "@testing-library/react";
+import { KubernetesCluster, WebLink } from "../../common/catalog-entities";
+import getClusterByIdInjectable from "../../common/cluster-store/get-by-id.injectable";
+import type { Cluster } from "../../common/cluster/cluster";
+import navigateToEntitySettingsInjectable from "../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import catalogEntityRegistryInjectable from "../../renderer/api/catalog/entity/registry.injectable";
+import { type ApplicationBuilder, getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import createClusterInjectable from "../../renderer/create-cluster/create-cluster.injectable";
+
+describe("Showing correct entity settings", () => {
+  let builder: ApplicationBuilder;
+  let rendered: RenderResult;
+  let windowDi: DiContainer;
+  let clusterEntity: KubernetesCluster;
+  let localClusterEntity: KubernetesCluster;
+  let otherEntity: WebLink;
+  let cluster: Cluster;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+
+    builder.afterWindowStart((windowDi) => {
+      const createCluster = windowDi.inject(createClusterInjectable);
+
+      clusterEntity = new KubernetesCluster({
+        metadata: {
+          labels: {},
+          name: "some-kubernetes-cluster",
+          uid: "some-entity-id",
+        },
+        spec: {
+          kubeconfigContext: "some-context",
+          kubeconfigPath: "/some/path/to/kubeconfig",
+        },
+        status: {
+          phase: "connecting",
+        },
+      });
+      localClusterEntity = new KubernetesCluster({
+        metadata: {
+          labels: {},
+          name: "some-local-kubernetes-cluster",
+          uid: "some-entity-id-2",
+          source: "local",
+        },
+        spec: {
+          kubeconfigContext: "some-context",
+          kubeconfigPath: "/some/path/to/local/kubeconfig",
+        },
+        status: {
+          phase: "connecting",
+        },
+      });
+      otherEntity = new WebLink({
+        metadata: {
+          labels: {},
+          name: "some-weblink",
+          uid: "some-weblink-id",
+        },
+        spec: {
+          url: "https://my-websome.com",
+        },
+        status: {
+          phase: "available",
+        },
+      });
+      cluster = createCluster({
+        contextName: clusterEntity.spec.kubeconfigContext,
+        id: clusterEntity.getId(),
+        kubeConfigPath: clusterEntity.spec.kubeconfigPath,
+      }, {
+        clusterServerUrl: "https://localhost:9999",
+      });
+
+      // TODO: remove once ClusterStore can be used without overriding it
+      windowDi.override(getClusterByIdInjectable, () => (clusterId) => {
+        if (clusterId === cluster.id) {
+          return cluster;
+        }
+
+        return undefined;
+      });
+
+      // TODO: replace with proper entity source once syncing entities between main and windows is injectable
+      const catalogEntityRegistry = windowDi.inject(catalogEntityRegistryInjectable);
+
+      catalogEntityRegistry.updateItems([clusterEntity, otherEntity, localClusterEntity]);
+    });
+
+    rendered = await builder.render();
+    windowDi = builder.applicationWindow.only.di;
+  });
+
+  it("renders", () => {
+    expect(rendered.baseElement).toMatchSnapshot();
+  });
+
+  it("does not show entity settings page yet", () => {
+    expect(rendered.queryByTestId("entity-settings")).not.toBeInTheDocument();
+  });
+
+  describe("when navigating to non-local cluster entity settings", () => {
+    beforeEach(() => {
+      const navigateToEntitySettings = windowDi.inject(navigateToEntitySettingsInjectable);
+
+      navigateToEntitySettings(clusterEntity.getId());
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("shows entity settings page", () => {
+      expect(rendered.queryByTestId("entity-settings")).toBeInTheDocument();
+    });
+
+    it("does not show the General setting tab header for non-local cluster", () => {
+      expect(rendered.queryByTestId("general-tab")).not.toBeInTheDocument();
+    });
+
+    it("shows Proxy setting tab header", () => {
+      expect(rendered.queryByTestId("proxy-tab")).toBeInTheDocument();
+    });
+
+    it("shows Terminal setting tab header", () => {
+      expect(rendered.queryByTestId("terminal-tab")).toBeInTheDocument();
+    });
+
+    it("shows Namespaces setting tab header", () => {
+      expect(rendered.queryByTestId("namespace-tab")).toBeInTheDocument();
+    });
+
+    it("shows Metrics setting tab header", () => {
+      expect(rendered.queryByTestId("metrics-tab")).toBeInTheDocument();
+    });
+
+    it("shows Node Shell setting tab header", () => {
+      expect(rendered.queryByTestId("node-shell-tab")).toBeInTheDocument();
+    });
+
+    it("shows the setting tabs in the correct order", () => {
+      expect(rendered.getByTestId("proxy-tab").nextSibling).toHaveAttribute("data-testid", "terminal-tab");
+      expect(rendered.getByTestId("terminal-tab").nextSibling).toHaveAttribute("data-testid", "namespace-tab");
+      expect(rendered.getByTestId("namespace-tab").nextSibling).toHaveAttribute("data-testid", "metrics-tab");
+      expect(rendered.getByTestId("metrics-tab").nextSibling).toHaveAttribute("data-testid", "node-shell-tab");
+    });
+  });
+
+  describe("when navigating to local cluster entity settings", () => {
+    beforeEach(() => {
+      const navigateToEntitySettings = windowDi.inject(navigateToEntitySettingsInjectable);
+
+      navigateToEntitySettings(localClusterEntity.getId());
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("shows entity settings page", () => {
+      expect(rendered.queryByTestId("entity-settings")).toBeInTheDocument();
+    });
+
+    it("shows the General setting tab header", () => {
+      expect(rendered.queryByTestId("general-tab")).toBeInTheDocument();
+    });
+
+    it("shows Proxy setting tab header", () => {
+      expect(rendered.queryByTestId("proxy-tab")).toBeInTheDocument();
+    });
+
+    it("shows Terminal setting tab header", () => {
+      expect(rendered.queryByTestId("terminal-tab")).toBeInTheDocument();
+    });
+
+    it("shows Namespaces setting tab header", () => {
+      expect(rendered.queryByTestId("namespace-tab")).toBeInTheDocument();
+    });
+
+    it("shows Metrics setting tab header", () => {
+      expect(rendered.queryByTestId("metrics-tab")).toBeInTheDocument();
+    });
+
+    it("shows Node Shell setting tab header", () => {
+      expect(rendered.queryByTestId("node-shell-tab")).toBeInTheDocument();
+    });
+
+    it("shows the setting tabs in the correct order", () => {
+      expect(rendered.getByTestId("general-tab").nextSibling).toHaveAttribute("data-testid", "proxy-tab");
+      expect(rendered.getByTestId("proxy-tab").nextSibling).toHaveAttribute("data-testid", "terminal-tab");
+      expect(rendered.getByTestId("terminal-tab").nextSibling).toHaveAttribute("data-testid", "namespace-tab");
+      expect(rendered.getByTestId("namespace-tab").nextSibling).toHaveAttribute("data-testid", "metrics-tab");
+      expect(rendered.getByTestId("metrics-tab").nextSibling).toHaveAttribute("data-testid", "node-shell-tab");
+    });
+  });
+
+  describe("when navigating to weblink entity settings", () => {
+    beforeEach(() => {
+      const navigateToEntitySettings = windowDi.inject(navigateToEntitySettingsInjectable);
+
+      navigateToEntitySettings(otherEntity.getId());
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("shows entity settings page", () => {
+      expect(rendered.queryByTestId("entity-settings")).toBeInTheDocument();
+    });
+
+    it("does not show the unrelated settings", () => {
+      expect(rendered.queryByTestId("general-tab")).not.toBeInTheDocument();
+    });
+
+    it("shows no settings page info", () => {
+      expect(rendered.baseElement.querySelector("[data-preference-page-does-not-exist-test='true']")).toBeInTheDocument();
+    });
+  });
+});

src/features/preferences/renderer/preference-navigation/navigate-to-preference-tab/navigate-to-preference-tab.injectable.ts

@@ -6,14 +6,16 @@ import { getInjectable } from "@ogre-tools/injectable";
 import { navigateToRouteInjectionToken } from "../../../../../common/front-end-routing/navigate-to-route-injection-token";
 import preferencesRouteInjectable from "../../../common/preferences-route.injectable";
 
-const navigateToPreferenceTabInjectable = getInjectable({
-  id: "navigate-to-preference-tab-2",
+export type NavigateToPreferenceTab = (tabId: string) => void;
 
-  instantiate: (di) => {
+const navigateToPreferenceTabInjectable = getInjectable({
+  id: "navigate-to-preference-tab",
+
+  instantiate: (di): NavigateToPreferenceTab => {
     const navigateToRoute = di.inject(navigateToRouteInjectionToken);
     const route = di.inject(preferencesRouteInjectable);
 
-    return (preferenceTabId: string) => {
+    return (preferenceTabId) => {
       navigateToRoute(route, {
         withoutAffectingBackButton: true,
         parameters: { preferenceTabId },

src/features/preferences/renderer/preference-navigation/preferences-navigation-tab.tsx

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { Tab } from "../../../../renderer/components/tabs";
-import navigateToPreferenceTabInjectable from "./navigate-to-preference-tab/navigate-to-preference-tab.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { observer } from "mobx-react";
 import type { PreferenceTab } from "../preference-items/preference-item-injection-token";
@@ -12,7 +11,6 @@ import preferenceTabIsActiveInjectable from "./navigate-to-preference-tab/prefer
 import React from "react";
 
 interface Dependencies {
-  navigateToTab: (tabId: string) => void;
   tabIsActive: IComputedValue<boolean>;
 }
 
@@ -20,23 +18,21 @@ interface PreferenceNavigationTabProps {
   tab: PreferenceTab;
 }
 
-const NonInjectedPreferencesNavigationTab = observer(({ navigateToTab, tabIsActive, tab } : Dependencies & PreferenceNavigationTabProps) => (
+const NonInjectedPreferencesNavigationTab = observer(({
+  tabIsActive,
+  tab,
+}: Dependencies & PreferenceNavigationTabProps) => (
   <Tab
-    onClick={() => navigateToTab(tab.pathId)}
     active={tabIsActive.get()}
     label={tab.label}
     data-preference-tab-link-test={tab.pathId}
+    value={tab.pathId}
   />
 ));
 
-export const PreferencesNavigationTab = withInjectables<Dependencies, PreferenceNavigationTabProps>(
-  NonInjectedPreferencesNavigationTab,
-
-  {
+export const PreferencesNavigationTab = withInjectables<Dependencies, PreferenceNavigationTabProps>(NonInjectedPreferencesNavigationTab, {
   getProps: (di, props) => ({
-      navigateToTab: di.inject(navigateToPreferenceTabInjectable),
-      tabIsActive: di.inject(preferenceTabIsActiveInjectable, props.tab.pathId),
     ...props,
+    tabIsActive: di.inject(preferenceTabIsActiveInjectable, props.tab.pathId),
   }),
-  },
-);
+});

src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx

@@ -16,26 +16,33 @@ import { compositeHasDescendant } from "../../../../common/utils/composite/compo
 import type { PreferenceTabsRoot } from "../preference-items/preference-tab-root";
 import { Icon } from "../../../../renderer/components/icon";
 import { checkThatAllDiscriminablesAreExhausted } from "../../../../common/utils/composable-responsibilities/discriminable/discriminable";
+import type { NavigateToPreferenceTab } from "./navigate-to-preference-tab/navigate-to-preference-tab.injectable";
+import navigateToPreferenceTabInjectable from "./navigate-to-preference-tab/navigate-to-preference-tab.injectable";
 
 interface Dependencies {
   composite: IComputedValue<Composite<PreferenceItemTypes | PreferenceTabsRoot>>;
+  navigateToPreferenceTab: NavigateToPreferenceTab;
 }
 
-const NonInjectedPreferencesNavigation = observer(({ composite }: Dependencies) => (
-  <Tabs className="flex column" scrollable={false}>
+const NonInjectedPreferencesNavigation = observer(({
+  composite,
+  navigateToPreferenceTab,
+}: Dependencies) => (
+  <Tabs<string>
+    className="flex column"
+    scrollable={false}
+    onChange={navigateToPreferenceTab}
+  >
     {toNavigationHierarchy(composite.get())}
   </Tabs>
 ));
 
-export const PreferencesNavigation = withInjectables<Dependencies>(
-  NonInjectedPreferencesNavigation,
-
-  {
+export const PreferencesNavigation = withInjectables<Dependencies>(NonInjectedPreferencesNavigation, {
   getProps: (di) => ({
     composite: di.inject(preferencesCompositeInjectable),
+    navigateToPreferenceTab: di.inject(navigateToPreferenceTabInjectable),
   }),
-  },
-);
+});
 
 const toNavigationHierarchy = (composite: Composite<PreferenceItemTypes | PreferenceTabsRoot>) => {
   const value = composite.value;

src/renderer/bootstrap.tsx

@@ -97,9 +97,6 @@ export async function bootstrap(di: DiContainer) {
   logger.info(`${logPrefix} initializing Registries`);
   initializers.initRegistries();
 
-  logger.info(`${logPrefix} initializing EntitySettingsRegistry`);
-  initializers.initEntitySettingsRegistry();
-
   logger.info(`${logPrefix} initializing CatalogEntityDetailRegistry`);
   initializers.initCatalogEntityDetailRegistry();
 

src/renderer/components/+catalog/columns/extensions-registrator.injectable.ts

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import type { ExtensionRegistrator } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
 import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
 import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
 import type { AdditionalCategoryColumnRegistration } from "../custom-category-columns";
@@ -11,12 +10,10 @@ import { customCatalogCategoryColumnInjectionToken } from "./custom-token";
 
 const customCategoryColumnsRegistratorInjectable = getInjectable({
   id: "custom-category-columns-registrator",
-  instantiate: (): ExtensionRegistrator => {
-    return (ext) => {
+  instantiate: () => (ext) => {
     const extension = ext as LensRendererExtension;
 
     return extension.additionalCategoryColumns.map(getInjectableForColumnRegistrationFor(extension));
-    };
   },
   injectionToken: extensionRegistratorInjectionToken,
 });

src/renderer/components/+entity-settings/active-tabs.injectable.ts

@@ -0,0 +1,79 @@
+/**
+ * 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 { action } from "mobx";
+import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
+import type { CatalogEntity } from "../../api/catalog-entity";
+import observableHistoryInjectable from "../../navigation/observable-history.injectable";
+import type { RegisteredEntitySetting } from "./extension-registrator.injectable";
+import catalogEntitySettingItemsInjectable from "./settings.injectable";
+
+export interface SettingTabs {
+  title: string;
+  id: string;
+}
+
+export interface SettingGroup {
+  title: string;
+  tabs: SettingTabs[];
+}
+
+export interface ActiveEntitySettingDetails {
+  tabId: string | undefined;
+  setting: RegisteredEntitySetting | undefined;
+  groups: SettingGroup[];
+}
+
+export interface ActiveEntitySettings {
+  get: () => ActiveEntitySettingDetails;
+  set: (tabId: string) => void;
+}
+
+const settingsGroup = "Settings";
+const defaultExtensionsGroup = "Extensions";
+
+const getSettingGroups = (items: RegisteredEntitySetting[]): SettingGroup[] => {
+  const groupNames = new Set(items.map(({ group }) => group));
+  const titles = [...groupNames].sort((left, right) => {
+    if (left === settingsGroup) return -1;
+    if (left === defaultExtensionsGroup) return 1;
+
+    return left <= right ? -1 : 1;
+  });
+
+  return titles.map(title => ({
+    title,
+    tabs: items
+      .filter(({ group }) => group === title)
+      .sort(byOrderNumber),
+  }));
+};
+
+const activeEntitySettingsTabInjectable = getInjectable({
+  id: "active-entity-settings-tab",
+  instantiate: (di, entity): ActiveEntitySettings => {
+    const observableHistory = di.inject(observableHistoryInjectable);
+    const items = di.inject(catalogEntitySettingItemsInjectable, entity);
+
+    return {
+      get: () => {
+        const defaultTabId = items.get()[0]?.id;
+        const tabId = observableHistory.location.hash.slice(1) || defaultTabId;
+        const setting = items.get().find(({ id }) => id === tabId);
+        const groups = getSettingGroups(items.get());
+
+        return { tabId, setting, groups };
+      },
+      set: action((tabId) => {
+        observableHistory.location.hash = tabId;
+      }),
+    };
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, entity: CatalogEntity) => `${entity.apiVersion}/${entity.kind}[${entity.metadata.source ?? ""}]`,
+  }),
+});
+
+export default activeEntitySettingsTabInjectable;

src/renderer/components/+entity-settings/current-entity.injectable.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { computed } from "mobx";
+import catalogEntityRegistryInjectable from "../../api/catalog/entity/registry.injectable";
+import entitySettingsRouteParametersInjectable from "./route-parameters.injectable";
+
+const currentCatalogEntityForSettingsInjectable = getInjectable({
+  id: "current-catalog-entity-for-settings",
+  instantiate: (di) => {
+    const { entityId } = di.inject(entitySettingsRouteParametersInjectable);
+    const catalogEntityRegistry = di.inject(catalogEntityRegistryInjectable);
+
+    return computed(() => catalogEntityRegistry.getById(entityId.get()));
+  },
+});
+
+export default currentCatalogEntityForSettingsInjectable;

src/renderer/components/+entity-settings/entity-settings.tsx

@@ -7,84 +7,52 @@ import styles from "./entity-settings.module.scss";
 
 import React from "react";
 import type { IComputedValue } from "mobx";
-import { observable, makeObservable, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Tabs, Tab } from "../tabs";
 import type { CatalogEntity } from "../../api/catalog-entity";
-import type { CatalogEntityRegistry } from "../../api/catalog/entity/registry";
-import { EntitySettingRegistry } from "../../../extensions/registries";
-import { groupBy } from "lodash";
 import { SettingLayout } from "../layout/setting-layout";
-import logger from "../../../common/logger";
 import { Avatar } from "../avatar";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import entitySettingsRouteParametersInjectable from "./entity-settings-route-parameters.injectable";
-import type { ObservableHistory } from "mobx-observable-history";
-import catalogEntityRegistryInjectable from "../../api/catalog/entity/registry.injectable";
-import observableHistoryInjectable from "../../navigation/observable-history.injectable";
+import currentCatalogEntityForSettingsInjectable from "./current-entity.injectable";
+import type { ActiveEntitySettings } from "./active-tabs.injectable";
+import activeEntitySettingsTabInjectable from "./active-tabs.injectable";
 
 interface Dependencies {
-  entityId: IComputedValue<string>;
-  entityRegistry: CatalogEntityRegistry;
-  observableHistory: ObservableHistory<unknown>;
+  entity: IComputedValue<CatalogEntity | undefined>;
 }
 
-@observer
-class NonInjectedEntitySettings extends React.Component<Dependencies> {
-  @observable activeTab?: string;
+const NonInjectedEntitySettings = observer((props: Dependencies) => {
+  const entity = props.entity.get();
 
-  constructor(props: Dependencies) {
-    super(props);
-    makeObservable(this);
-
-    const { hash } = this.props.observableHistory.location;
-
-    if (hash) {
-      const menuId = hash.slice(1);
-      const item = this.menuItems.find((item) => item.id === menuId);
-
-      if (item) {
-        this.activeTab = item.id;
-      }
-    }
+  if (!entity) {
+    return null;
   }
 
-  @computed
-  get entityId() {
-    return this.props.entityId.get();
-  }
-
-  get entity() {
-    return this.props.entityRegistry.getById(this.entityId);
-  }
-
-  get menuItems() {
-    if (!this.entity) return [];
-
-    return EntitySettingRegistry.getInstance().getItemsForKind(this.entity.kind, this.entity.apiVersion, this.entity.metadata.source);
-  }
-
-  get activeSetting() {
-    this.activeTab ||= this.menuItems[0]?.id;
-
-    return this.menuItems.find((setting) => setting.id === this.activeTab);
-  }
-
-  onTabChange = (tabId: string) => {
-    this.activeTab = tabId;
-  };
-
-  renderNavigation(entity: CatalogEntity) {
-    const groups = Object.entries(groupBy(this.menuItems, (item) => item.group || "Extensions"));
-
-    groups.sort((a, b) => {
-      if (a[0] === "Settings") return -1;
-      if (a[0] === "Extensions") return 1;
-
-      return a[0] <= b[0] ? -1 : 1;
+  return <CatalogEntitySettings entity={entity} />;
 });
 
-    return (
+export const EntitySettingsRouteComponent = withInjectables<Dependencies>(NonInjectedEntitySettings, {
+  getProps: (di) => ({
+    entity: di.inject(currentCatalogEntityForSettingsInjectable),
+  }),
+});
+
+interface CatalogEntitySettingsProps {
+  entity: CatalogEntity;
+}
+
+interface CatalogEntitySettingsDeps {
+  activeEntitySettingsTab: ActiveEntitySettings;
+}
+
+const NonInjectedCatalogEntitySettings = observer((props: CatalogEntitySettingsProps & CatalogEntitySettingsDeps) => {
+  const {
+    activeEntitySettingsTab,
+    entity,
+  } = props;
+  const { tabId, setting, groups } = activeEntitySettingsTab.get();
+
+  const renderNavigation = () => (
     <>
       <div className={styles.avatarAndName}>
         <Avatar
@@ -101,61 +69,67 @@ class NonInjectedEntitySettings extends React.Component<Dependencies> {
       <Tabs
         className="flex column"
         scrollable={ false }
-          onChange={this.onTabChange}
-          value={this.activeTab}
+        onChange={activeEntitySettingsTab.set}
+        value={tabId}
       >
-          { groups.map((group, groupIndex) => (
-            <React.Fragment key={`group-${groupIndex}`}>
+        {
+          groups.map(({ tabs, title }) => (
+            <React.Fragment key={title}>
               <hr />
-              <div className="header">{group[0]}</div>
-              { group[1].map((setting, index) => (
+              <div className="header">{title}</div>
+              {
+                tabs.map((setting) => (
                   <Tab
-                  key={index}
+                    key={setting.id}
                     value={setting.id}
                     label={setting.title}
                     data-testid={`${setting.id}-tab`}
                   />
-              ))}
+                ))
+              }
             </React.Fragment>
-          ))}
+          ))
+        }
       </Tabs>
     </>
   );
-  }
-
-  render() {
-    const { activeSetting, entity } = this;
-
-    if (!entity) {
-      logger.error("[ENTITY-SETTINGS]: entity not found", this.entityId);
-
-      return null;
-    }
 
   return (
     <SettingLayout
-        navigation={this.renderNavigation(entity)}
+      navigation={renderNavigation()}
       contentGaps={false}
+      data-testid="entity-settings"
     >
       {
-          activeSetting && (
+        tabId && setting
+          ? (
             <section>
-              <h2 data-testid={`${activeSetting.id}-header`}>{activeSetting.title}</h2>
+              <h2 data-testid={`${tabId}-header`}>{setting.title}</h2>
               <section>
-                <activeSetting.components.View entity={entity} key={activeSetting.title} />
+                <setting.components.View entity={entity} />
               </section>
             </section>
           )
+          : (
+            <div
+              className="flex items-center"
+              data-preference-page-does-not-exist-test={true}
+            >
+              No settings found for
+              {" "}
+              {entity.apiVersion}
+              /
+              {entity.kind}
+            </div>
+          )
       }
     </SettingLayout>
   );
-  }
-}
+});
 
-export const EntitySettings = withInjectables<Dependencies>(NonInjectedEntitySettings, {
-  getProps: (di) => ({
-    ...di.inject(entitySettingsRouteParametersInjectable),
-    entityRegistry: di.inject(catalogEntityRegistryInjectable),
-    observableHistory: di.inject(observableHistoryInjectable),
+const CatalogEntitySettings = withInjectables<CatalogEntitySettingsDeps, CatalogEntitySettingsProps>(NonInjectedCatalogEntitySettings, {
+  getProps: (di, props) => ({
+    ...props,
+    activeEntitySettingsTab: di.inject(activeEntitySettingsTabInjectable, props.entity),
   }),
 });

src/renderer/components/+entity-settings/extension-registrator.injectable.ts

@@ -0,0 +1,75 @@
+/**
+ * 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 type { CatalogEntity } from "../../api/catalog-entity";
+import { entitySettingInjectionToken } from "./token";
+
+export interface EntitySettingViewProps {
+  entity: CatalogEntity;
+}
+
+export interface EntitySettingComponents {
+  View: React.ComponentType<EntitySettingViewProps>;
+}
+
+export interface EntitySettingRegistration {
+  apiVersions: string[];
+  kind: string;
+  title: string;
+  components: EntitySettingComponents;
+  source?: string;
+  id?: string;
+  priority?: number;
+  group?: string;
+}
+
+export interface RegisteredEntitySetting {
+  id: string;
+  orderNumber: number;
+  apiVersions: Set<string>;
+  kind: string;
+  title: string;
+  components: EntitySettingComponents;
+  source?: string;
+  group: string;
+}
+
+const entitySettingExtensionRegistratorInjectable = getInjectable({
+  id: "entity-setting-extension-registrator",
+  instantiate: () => (ext) => {
+    const extension = ext as LensRendererExtension;
+
+    return extension.entitySettings.map(getInjectableForEntitySettingRegistrationFor(extension));
+  },
+  injectionToken: extensionRegistratorInjectionToken,
+});
+
+export default entitySettingExtensionRegistratorInjectable;
+
+const getInjectableForEntitySettingRegistrationFor = (extension: LensRendererExtension) => ({
+  apiVersions,
+  components,
+  kind,
+  title,
+  group = "Extensions",
+  id = title.toLowerCase(),
+  priority,
+  source,
+}: EntitySettingRegistration) => getInjectable({
+  id: `${extension.manifest.name}:${group}/${kind}:${id}`,
+  instantiate: () => ({
+    apiVersions: new Set(apiVersions),
+    components,
+    id,
+    kind,
+    orderNumber: priority ?? 50,
+    title,
+    group,
+    source,
+  }),
+  injectionToken: entitySettingInjectionToken,
+});

src/renderer/components/+entity-settings/has-settings.injectable.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 type { CatalogEntity } from "../../api/catalog-entity";
+import catalogEntitySettingItemsInjectable from "./settings.injectable";
+
+export type HasCatalogEntitySettingItems = (entity: CatalogEntity) => boolean;
+
+const hasCatalogEntitySettingItemsInjectable = getInjectable({
+  id: "has-catalog-entity-setting-items",
+  instantiate: (di): HasCatalogEntitySettingItems => (entity) => {
+    const items = di.inject(catalogEntitySettingItemsInjectable, entity);
+
+    return items.get().length > 0;
+  },
+});
+
+export default hasCatalogEntitySettingItemsInjectable;

src/renderer/components/+entity-settings/index.ts

@@ -3,6 +3,4 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "../cluster-settings";
-
 export * from "./entity-settings";

src/renderer/components/+entity-settings/internal-kubernetes-cluster/general-settings.injectable.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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 { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import type { KubernetesCluster } from "../../../../common/catalog-entities";
+import type { GetClusterById } from "../../../../common/cluster-store/get-by-id.injectable";
+import getClusterByIdInjectable from "../../../../common/cluster-store/get-by-id.injectable";
+import { ClusterIconSetting } from "../../cluster-settings/icon-settings";
+import { ClusterKubeconfig } from "../../cluster-settings/kubeconfig";
+import { ClusterNameSetting } from "../../cluster-settings/name-setting";
+import type { EntitySettingViewProps } from "../extension-registrator.injectable";
+import { entitySettingInjectionToken } from "../token";
+
+interface Dependencies {
+  getClusterById: GetClusterById;
+}
+
+function NonInjectedGeneralKubernetesClusterSettings({ entity, getClusterById }: EntitySettingViewProps & Dependencies) {
+  const cluster = getClusterById(entity.getId());
+
+  if (!cluster) {
+    return null;
+  }
+
+  return (
+    <section>
+      <section>
+        <div className="flex">
+          <div className="flex-grow pr-8">
+            <ClusterNameSetting cluster={cluster} entity={entity as KubernetesCluster} />
+          </div>
+          <div>
+            <ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
+          </div>
+        </div>
+      </section>
+      <section className="small">
+        <ClusterKubeconfig cluster={cluster} />
+      </section>
+    </section>
+  );
+}
+
+const GeneralKubernetesClusterSettings = withInjectables<Dependencies, EntitySettingViewProps>(NonInjectedGeneralKubernetesClusterSettings, {
+  getProps: (di, props) => ({
+    ...props,
+    getClusterById: di.inject(getClusterByIdInjectable),
+  }),
+});
+
+const generalKubernetesClusterEntitySettingsInjectable = getInjectable({
+  id: "general-kubernetes-cluster-entity-settings",
+  instantiate: () => ({
+    apiVersions: new Set(["entity.k8slens.dev/v1alpha1"]),
+    kind: "KubernetesCluster",
+    source: "local",
+    title: "General",
+    group: "Settings",
+    id: "general",
+    orderNumber: 0,
+    components: {
+      View: GeneralKubernetesClusterSettings,
+    },
+  }),
+  injectionToken: entitySettingInjectionToken,
+});
+
+export default generalKubernetesClusterEntitySettingsInjectable;

src/renderer/components/+entity-settings/internal-kubernetes-cluster/metrics-settings.injectable.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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 { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import type { GetClusterById } from "../../../../common/cluster-store/get-by-id.injectable";
+import getClusterByIdInjectable from "../../../../common/cluster-store/get-by-id.injectable";
+import { ClusterMetricsSetting } from "../../cluster-settings/metrics-setting";
+import { ClusterPrometheusSetting } from "../../cluster-settings/prometheus-setting";
+import { ShowMetricsSetting } from "../../cluster-settings/show-metrics";
+import type { EntitySettingViewProps } from "../extension-registrator.injectable";
+import { entitySettingInjectionToken } from "../token";
+
+interface Dependencies {
+  getClusterById: GetClusterById;
+}
+
+function NonInjectedMetricsKubernetesClusterSettings({ entity, getClusterById }: EntitySettingViewProps & Dependencies) {
+  const cluster = getClusterById(entity.getId());
+
+  if (!cluster) {
+    return null;
+  }
+
+  return (
+    <section>
+      <section>
+        <ClusterPrometheusSetting cluster={cluster} />
+      </section>
+      <hr/>
+      <section>
+        <ClusterMetricsSetting cluster={cluster} />
+        <ShowMetricsSetting cluster={cluster} />
+      </section>
+    </section>
+  );
+}
+
+const MetricsKubernetesClusterSettings = withInjectables<Dependencies, EntitySettingViewProps>(NonInjectedMetricsKubernetesClusterSettings, {
+  getProps: (di, props) => ({
+    ...props,
+    getClusterById: di.inject(getClusterByIdInjectable),
+  }),
+});
+
+const metricsKubernetesClusterEntitySettingsInjectable = getInjectable({
+  id: "metrics-kubernetes-cluster-entity-settings",
+  instantiate: () => ({
+    apiVersions: new Set(["entity.k8slens.dev/v1alpha1"]),
+    kind: "KubernetesCluster",
+    title: "Metrics",
+    group: "Settings",
+    id: "metrics",
+    orderNumber: 40,
+    components: {
+      View: MetricsKubernetesClusterSettings,
+    },
+  }),
+  injectionToken: entitySettingInjectionToken,
+});
+
+export default metricsKubernetesClusterEntitySettingsInjectable;

src/renderer/components/+entity-settings/internal-kubernetes-cluster/namespace-settings.injectable.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import type { GetClusterById } from "../../../../common/cluster-store/get-by-id.injectable";
+import getClusterByIdInjectable from "../../../../common/cluster-store/get-by-id.injectable";
+import { ClusterAccessibleNamespaces } from "../../cluster-settings/accessible-namespaces";
+import type { EntitySettingViewProps } from "../extension-registrator.injectable";
+import { entitySettingInjectionToken } from "../token";
+
+interface Dependencies {
+  getClusterById: GetClusterById;
+}
+
+function NonInjectedNamespaceKubernetesClusterSettings({ entity, getClusterById }: EntitySettingViewProps & Dependencies) {
+  const cluster = getClusterById(entity.getId());
+
+  if (!cluster) {
+    return null;
+  }
+
+  return (
+    <section>
+      <ClusterAccessibleNamespaces cluster={cluster} />
+    </section>
+  );
+}
+
+const NamespaceKubernetesClusterSettings = withInjectables<Dependencies, EntitySettingViewProps>(NonInjectedNamespaceKubernetesClusterSettings, {
+  getProps: (di, props) => ({
+    ...props,
+    getClusterById: di.inject(getClusterByIdInjectable),
+  }),
+});
+
+const namespaceKubernetesClusterEntitySettingsInjectable = getInjectable({
+  id: "namespace-kubernetes-cluster-entity-settings",
+  instantiate: () => ({
+    apiVersions: new Set(["entity.k8slens.dev/v1alpha1"]),
+    kind: "KubernetesCluster",
+    title: "Namespace",
+    group: "Settings",
+    id: "namespace",
+    orderNumber: 30,
+    components: {
+      View: NamespaceKubernetesClusterSettings,
+    },
+  }),
+  injectionToken: entitySettingInjectionToken,
+});
+
+export default namespaceKubernetesClusterEntitySettingsInjectable;

src/renderer/components/+entity-settings/internal-kubernetes-cluster/node-shell-settings.injectable.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import type { GetClusterById } from "../../../../common/cluster-store/get-by-id.injectable";
+import getClusterByIdInjectable from "../../../../common/cluster-store/get-by-id.injectable";
+import { ClusterNodeShellSetting } from "../../cluster-settings/node-shell-setting";
+import type { EntitySettingViewProps } from "../extension-registrator.injectable";
+import { entitySettingInjectionToken } from "../token";
+
+interface Dependencies {
+  getClusterById: GetClusterById;
+}
+
+function NonInjectedNodeShellKubernetesClusterSettings({ entity, getClusterById }: EntitySettingViewProps & Dependencies) {
+  const cluster = getClusterById(entity.getId());
+
+  if (!cluster) {
+    return null;
+  }
+
+  return (
+    <section>
+      <ClusterNodeShellSetting cluster={cluster} />
+    </section>
+  );
+}
+
+const NodeShellKubernetesClusterSettings = withInjectables<Dependencies, EntitySettingViewProps>(NonInjectedNodeShellKubernetesClusterSettings, {
+  getProps: (di, props) => ({
+    ...props,
+    getClusterById: di.inject(getClusterByIdInjectable),
+  }),
+});
+
+const nodeShellKubernetesClusterEntitySettingsInjectable = getInjectable({
+  id: "node-shell-kubernetes-cluster-entity-settings",
+  instantiate: () => ({
+    apiVersions: new Set(["entity.k8slens.dev/v1alpha1"]),
+    kind: "KubernetesCluster",
+    title: "Node Shell",
+    group: "Settings",
+    id: "node-shell",
+    orderNumber: 45,
+    components: {
+      View: NodeShellKubernetesClusterSettings,
+    },
+  }),
+  injectionToken: entitySettingInjectionToken,
+});
+
+export default nodeShellKubernetesClusterEntitySettingsInjectable;

src/renderer/components/+entity-settings/internal-kubernetes-cluster/proxy-settings.injectable.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import type { GetClusterById } from "../../../../common/cluster-store/get-by-id.injectable";
+import getClusterByIdInjectable from "../../../../common/cluster-store/get-by-id.injectable";
+import { ClusterProxySetting } from "../../cluster-settings/proxy-setting";
+import type { EntitySettingViewProps } from "../extension-registrator.injectable";
+import { entitySettingInjectionToken } from "../token";
+
+interface Dependencies {
+  getClusterById: GetClusterById;
+}
+
+function NonInjectedProxyKubernetesClusterSettings({ entity, getClusterById }: EntitySettingViewProps & Dependencies) {
+  const cluster = getClusterById(entity.getId());
+
+  if (!cluster) {
+    return null;
+  }
+
+  return (
+    <section>
+      <ClusterProxySetting cluster={cluster} />
+    </section>
+  );
+}
+
+const ProxyKubernetesClusterSettings = withInjectables<Dependencies, EntitySettingViewProps>(NonInjectedProxyKubernetesClusterSettings, {
+  getProps: (di, props) => ({
+    ...props,
+    getClusterById: di.inject(getClusterByIdInjectable),
+  }),
+});
+
+const proxyKubernetesClusterEntitySettingsInjectable = getInjectable({
+  id: "proxy-kubernetes-cluster-entity-settings",
+  instantiate: () => ({
+    apiVersions: new Set(["entity.k8slens.dev/v1alpha1"]),
+    kind: "KubernetesCluster",
+    title: "Proxy",
+    group: "Settings",
+    id: "proxy",
+    orderNumber: 10,
+    components: {
+      View: ProxyKubernetesClusterSettings,
+    },
+  }),
+  injectionToken: entitySettingInjectionToken,
+});
+
+export default proxyKubernetesClusterEntitySettingsInjectable;

src/renderer/components/+entity-settings/internal-kubernetes-cluster/terminal-settings.injectable.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { withInjectables } from "@ogre-tools/injectable-react";
+import React from "react";
+import type { GetClusterById } from "../../../../common/cluster-store/get-by-id.injectable";
+import getClusterByIdInjectable from "../../../../common/cluster-store/get-by-id.injectable";
+import { ClusterLocalTerminalSetting } from "../../cluster-settings/local-terminal-settings";
+import type { EntitySettingViewProps } from "../extension-registrator.injectable";
+import { entitySettingInjectionToken } from "../token";
+
+interface Dependencies {
+  getClusterById: GetClusterById;
+}
+
+function NonInjectedTerminalKubernetesClusterSettings({ entity, getClusterById }: EntitySettingViewProps & Dependencies) {
+  const cluster = getClusterById(entity.getId());
+
+  if (!cluster) {
+    return null;
+  }
+
+  return (
+    <section>
+      <ClusterLocalTerminalSetting cluster={cluster} />
+    </section>
+  );
+}
+
+const TerminalKubernetesClusterSettings = withInjectables<Dependencies, EntitySettingViewProps>(NonInjectedTerminalKubernetesClusterSettings, {
+  getProps: (di, props) => ({
+    ...props,
+    getClusterById: di.inject(getClusterByIdInjectable),
+  }),
+});
+
+const terminalKubernetesClusterEntitySettingsInjectable = getInjectable({
+  id: "terminal-kubernetes-cluster-entity-settings",
+  instantiate: () => ({
+    apiVersions: new Set(["entity.k8slens.dev/v1alpha1"]),
+    kind: "KubernetesCluster",
+    title: "Terminal",
+    group: "Settings",
+    id: "terminal",
+    orderNumber: 20,
+    components: {
+      View: TerminalKubernetesClusterSettings,
+    },
+  }),
+  injectionToken: entitySettingInjectionToken,
+});
+
+export default terminalKubernetesClusterEntitySettingsInjectable;

src/renderer/components/+entity-settings/route-component.injectable.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { EntitySettings } from "./entity-settings";
+import { EntitySettingsRouteComponent } from "./entity-settings";
 import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
 import entitySettingsRouteInjectable from "../../../common/front-end-routing/routes/entity-settings/entity-settings-route.injectable";
 
@@ -12,7 +12,7 @@ const entitySettingsRouteComponentInjectable = getInjectable({
 
   instantiate: (di) => ({
     route: di.inject(entitySettingsRouteInjectable),
-    Component: EntitySettings,
+    Component: EntitySettingsRouteComponent,
   }),
 
   injectionToken: routeSpecificComponentInjectionToken,

src/renderer/components/+entity-settings/settings.injectable.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
+import { computed } from "mobx";
+import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
+import type { CatalogEntity } from "../../api/catalog-entity";
+import { entitySettingInjectionToken } from "./token";
+
+const catalogEntitySettingItemsInjectable = getInjectable({
+  id: "catalog-entity-setting-items",
+  instantiate: (di, entity) => {
+    const computedInjectMany = di.inject(computedInjectManyInjectable);
+    const items = computedInjectMany(entitySettingInjectionToken);
+
+    return computed(() => (
+      items.get()
+        .filter(item => (
+          item.apiVersions.has(entity.apiVersion)
+          && item.kind === entity.kind
+          && (!item.source || item.source === entity.metadata.source)
+        ))
+        .sort(byOrderNumber)
+    ));
+  },
+  lifecycle: lifecycleEnum.keyedSingleton({
+    getInstanceKey: (di, entity: CatalogEntity) => `${entity.apiVersion}/${entity.kind}[${entity.metadata.source ?? ""}]`,
+  }),
+});
+
+export default catalogEntitySettingItemsInjectable;

src/renderer/components/+entity-settings/token.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { RegisteredEntitySetting } from "./extension-registrator.injectable";
+
+export const entitySettingInjectionToken = getInjectionToken<RegisteredEntitySetting>({
+  id: "entity-setting",
+});

src/renderer/components/cluster-settings/__tests__/cluster-local-terminal-settings.test.tsx

@@ -5,15 +5,15 @@
 
 import React from "react";
 import { waitFor } from "@testing-library/react";
-import { ClusterLocalTerminalSetting } from "../cluster-local-terminal-settings";
+import { ClusterLocalTerminalSetting } from "../local-terminal-settings";
 import userEvent from "@testing-library/user-event";
 import type { Stats } from "fs";
-import type { Cluster } from "../../../../../common/cluster/cluster";
-import { getDiForUnitTesting } from "../../../../getDiForUnitTesting";
-import type { DiRender } from "../../../test-utils/renderFor";
-import { renderFor } from "../../../test-utils/renderFor";
-import showErrorNotificationInjectable from "../../../notifications/show-error-notification.injectable";
-import statInjectable from "../../../../../common/fs/stat/stat.injectable";
+import type { Cluster } from "../../../../common/cluster/cluster";
+import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
+import type { DiRender } from "../../test-utils/renderFor";
+import { renderFor } from "../../test-utils/renderFor";
+import showErrorNotificationInjectable from "../../notifications/show-error-notification.injectable";
+import statInjectable from "../../../../common/fs/stat/stat.injectable";
 
 describe("ClusterLocalTerminalSettings", () => {
   let render: DiRender;

src/renderer/components/cluster-settings/accessible-namespaces.tsx

@@ -5,11 +5,11 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import type { Cluster } from "../../../../common/cluster/cluster";
-import { SubTitle } from "../../layout/sub-title";
-import { EditableList } from "../../editable-list";
+import type { Cluster } from "../../../common/cluster/cluster";
+import { SubTitle } from "../layout/sub-title";
+import { EditableList } from "../editable-list";
 import { observable, makeObservable } from "mobx";
-import { systemName } from "../../input/input_validators";
+import { systemName } from "../input/input_validators";
 
 export interface ClusterAccessibleNamespacesProps {
   cluster: Cluster;

src/renderer/components/cluster-settings/cluster-settings.tsx

@@ -1,118 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import React from "react";
-import type { KubernetesCluster } from "../../../common/catalog-entities";
-import { ClusterStore } from "../../../common/cluster-store/cluster-store";
-import type { EntitySettingViewProps } from "../../../extensions/registries";
-import type { CatalogEntity } from "../../api/catalog-entity";
-import * as components from "./components";
-
-function getClusterForEntity(entity: CatalogEntity) {
-  return ClusterStore.getInstance().getById(entity.getId());
-}
-
-export function GeneralSettings({ entity }: EntitySettingViewProps) {
-  const cluster = getClusterForEntity(entity);
-
-  if (!cluster) {
-    return null;
-  }
-
-  return (
-    <section>
-      <section>
-        <div className="flex">
-          <div className="flex-grow pr-8">
-            <components.ClusterNameSetting cluster={cluster} entity={entity as KubernetesCluster} />
-          </div>
-          <div>
-            <components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
-          </div>
-        </div>
-      </section>
-      <section className="small">
-        <components.ClusterKubeconfig cluster={cluster} />
-      </section>
-    </section>
-  );
-}
-
-export function ProxySettings({ entity }: EntitySettingViewProps) {
-  const cluster = getClusterForEntity(entity);
-
-  if (!cluster) {
-    return null;
-  }
-
-  return (
-    <section>
-      <components.ClusterProxySetting cluster={cluster} />
-    </section>
-  );
-}
-
-export function TerminalSettings({ entity }: EntitySettingViewProps) {
-  const cluster = getClusterForEntity(entity);
-
-  if (!cluster) {
-    return null;
-  }
-
-  return (
-    <section>
-      <components.ClusterLocalTerminalSetting cluster={cluster} />
-    </section>
-  );
-}
-
-export function NamespacesSettings({ entity }: EntitySettingViewProps) {
-  const cluster = getClusterForEntity(entity);
-
-  if (!cluster) {
-    return null;
-  }
-
-  return (
-    <section>
-      <components.ClusterAccessibleNamespaces cluster={cluster} />
-    </section>
-  );
-}
-
-export function MetricsSettings({ entity }: EntitySettingViewProps) {
-  const cluster = getClusterForEntity(entity);
-
-  if (!cluster) {
-    return null;
-  }
-
-  return (
-    <section>
-      <section>
-        <components.ClusterPrometheusSetting cluster={cluster} />
-      </section>
-      <hr/>
-      <section>
-        <components.ClusterMetricsSetting cluster={cluster} />
-        <components.ShowMetricsSetting cluster={cluster} />
-      </section>
-    </section>
-  );
-}
-
-export function NodeShellSettings({ entity }: EntitySettingViewProps) {
-  const cluster = getClusterForEntity(entity);
-
-  if(!cluster) {
-    return null;
-  }
-
-  return (
-    <section>
-      <components.ClusterNodeShellSetting cluster={cluster} />
-    </section>
-  );
-}

src/renderer/components/cluster-settings/components/index.ts

@@ -1,15 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-export * from "./cluster-accessible-namespaces";
-export * from "./cluster-local-terminal-settings";
-export * from "./cluster-kubeconfig";
-export * from "./cluster-metrics-setting";
-export * from "./cluster-name-setting";
-export * from "./cluster-prometheus-setting";
-export * from "./cluster-proxy-setting";
-export * from "./cluster-show-metrics";
-export * from "./cluster-icon-settings";
-export * from "./cluster-node-shell-setting";

src/renderer/components/cluster-settings/icon-settings.tsx

@@ -4,14 +4,14 @@
  */
 
 import React from "react";
-import type { Cluster } from "../../../../common/cluster/cluster";
-import { autoBind } from "../../../utils";
+import type { Cluster } from "../../../common/cluster/cluster";
+import { autoBind } from "../../utils";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
-import type { KubernetesCluster } from "../../../../common/catalog-entities";
-import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
-import { MenuActions, MenuItem } from "../../menu";
-import { Avatar } from "../../avatar";
+import type { KubernetesCluster } from "../../../common/catalog-entities";
+import { FilePicker, OverSizeLimitStyle } from "../file-picker";
+import { MenuActions, MenuItem } from "../menu";
+import { Avatar } from "../avatar";
 
 enum GeneralInputStatus {
   CLEAN = "clean",

src/renderer/components/cluster-settings/index.ts

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-export * from "./cluster-settings";

src/renderer/components/cluster-settings/kubeconfig.tsx

@@ -4,11 +4,11 @@
  */
 
 import React from "react";
-import type { Cluster } from "../../../../common/cluster/cluster";
+import type { Cluster } from "../../../common/cluster/cluster";
 import { observer } from "mobx-react";
-import { SubTitle } from "../../layout/sub-title";
+import { SubTitle } from "../layout/sub-title";
 import { shell } from "electron";
-import { Notice } from "../../+extensions/notice";
+import { Notice } from "../+extensions/notice";
 
 export interface ClusterKubeconfigProps {
   cluster: Cluster;

src/renderer/components/cluster-settings/local-terminal-settings.tsx

@@ -5,20 +5,20 @@
 
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import type { Cluster } from "../../../../common/cluster/cluster";
-import { Input } from "../../input";
-import { SubTitle } from "../../layout/sub-title";
-import type { ShowNotification } from "../../notifications";
-import { Icon } from "../../icon";
-import { PathPicker } from "../../path-picker";
-import { isWindows } from "../../../../common/vars";
+import type { Cluster } from "../../../common/cluster/cluster";
+import { Input } from "../input";
+import { SubTitle } from "../layout/sub-title";
+import type { ShowNotification } from "../notifications";
+import { Icon } from "../icon";
+import { PathPicker } from "../path-picker";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import showErrorNotificationInjectable from "../../notifications/show-error-notification.injectable";
-import type { ValidateDirectory } from "../../../../common/fs/validate-directory.injectable";
-import validateDirectoryInjectable from "../../../../common/fs/validate-directory.injectable";
-import type { ResolveTilde } from "../../../../common/path/resolve-tilde.injectable";
-import resolveTildeInjectable from "../../../../common/path/resolve-tilde.injectable";
-import Gutter from "../../gutter/gutter";
+import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
+import type { ValidateDirectory } from "../../../common/fs/validate-directory.injectable";
+import validateDirectoryInjectable from "../../../common/fs/validate-directory.injectable";
+import type { ResolveTilde } from "../../../common/path/resolve-tilde.injectable";
+import resolveTildeInjectable from "../../../common/path/resolve-tilde.injectable";
+import Gutter from "../gutter/gutter";
+import isWindowsInjectable from "../../../common/vars/is-windows.injectable";
 
 export interface ClusterLocalTerminalSettingProps {
   cluster: Cluster;
@@ -27,6 +27,7 @@ interface Dependencies {
   showErrorNotification: ShowNotification;
   validateDirectory: ValidateDirectory;
   resolveTilde: ResolveTilde;
+  isWindows: boolean;
 }
 
 const NonInjectedClusterLocalTerminalSetting = observer(({
@@ -34,6 +35,7 @@ const NonInjectedClusterLocalTerminalSetting = observer(({
   showErrorNotification,
   validateDirectory,
   resolveTilde,
+  isWindows,
 }: Dependencies & ClusterLocalTerminalSettingProps) => {
   if (!cluster) {
     return null;
@@ -165,5 +167,6 @@ export const ClusterLocalTerminalSetting = withInjectables<Dependencies, Cluster
     showErrorNotification: di.inject(showErrorNotificationInjectable),
     validateDirectory: di.inject(validateDirectoryInjectable),
     resolveTilde: di.inject(resolveTildeInjectable),
+    isWindows: di.inject(isWindowsInjectable),
   }),
 });

src/renderer/components/cluster-settings/metrics-setting.tsx

@@ -5,13 +5,13 @@
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { onMultiSelectFor, Select } from "../../select/select";
-import { Icon } from "../../icon/icon";
-import { Button } from "../../button/button";
-import { SubTitle } from "../../layout/sub-title";
-import type { Cluster } from "../../../../common/cluster/cluster";
+import { onMultiSelectFor, Select } from "../select/select";
+import { Icon } from "../icon/icon";
+import { Button } from "../button/button";
+import { SubTitle } from "../layout/sub-title";
+import type { Cluster } from "../../../common/cluster/cluster";
 import { observable, reaction, makeObservable } from "mobx";
-import { ClusterMetricsResourceType } from "../../../../common/cluster-types";
+import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 
 export interface ClusterMetricsSettingProps {
   cluster: Cluster;

src/renderer/components/cluster-settings/name-setting.tsx

@@ -4,13 +4,13 @@
  */
 
 import React from "react";
-import type { Cluster } from "../../../../common/cluster/cluster";
-import { Input } from "../../input";
+import type { Cluster } from "../../../common/cluster/cluster";
+import { Input } from "../input";
 import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
-import { SubTitle } from "../../layout/sub-title";
-import { isRequired } from "../../input/input_validators";
-import type { KubernetesCluster } from "../../../../common/catalog-entities";
+import { SubTitle } from "../layout/sub-title";
+import { isRequired } from "../input/input_validators";
+import type { KubernetesCluster } from "../../../common/catalog-entities";
 
 export interface ClusterNameSettingProps {
   cluster: Cluster;

src/renderer/components/cluster-settings/node-shell-setting.tsx

@@ -3,15 +3,15 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import type { Cluster } from "../../../../common/cluster/cluster";
+import type { Cluster } from "../../../common/cluster/cluster";
 import { makeObservable, observable } from "mobx";
-import { SubTitle } from "../../layout/sub-title";
+import { SubTitle } from "../layout/sub-title";
 import React from "react";
-import { Input } from "../../input/input";
+import { Input } from "../input/input";
 import { observer } from "mobx-react";
-import { Icon } from "../../icon/icon";
-import { initialNodeShellImage } from "../../../../common/cluster-types";
-import Gutter from "../../gutter/gutter";
+import { Icon } from "../icon/icon";
+import { initialNodeShellImage } from "../../../common/cluster-types";
+import Gutter from "../gutter/gutter";
 
 export interface ClusterNodeShellSettingProps {
   cluster: Cluster;

src/renderer/components/cluster-settings/prometheus-setting.tsx

@@ -5,17 +5,17 @@
 
 import React from "react";
 import { observer, disposeOnUnmount } from "mobx-react";
-import type { Cluster } from "../../../../common/cluster/cluster";
-import { SubTitle } from "../../layout/sub-title";
-import type { SelectOption } from "../../select";
-import { Select } from "../../select";
-import { Input } from "../../input";
+import type { Cluster } from "../../../common/cluster/cluster";
+import { SubTitle } from "../layout/sub-title";
+import type { SelectOption } from "../select";
+import { Select } from "../select";
+import { Input } from "../input";
 import { observable, computed, autorun, makeObservable } from "mobx";
-import { Spinner } from "../../spinner";
-import type { MetricProviderInfo, RequestMetricsProviders } from "../../../../common/k8s-api/endpoints/metrics.api/request-providers.injectable";
+import { Spinner } from "../spinner";
+import type { MetricProviderInfo, RequestMetricsProviders } from "../../../common/k8s-api/endpoints/metrics.api/request-providers.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import requestMetricsProvidersInjectable from "../../../../common/k8s-api/endpoints/metrics.api/request-providers.injectable";
-import productNameInjectable from "../../../../common/vars/product-name.injectable";
+import requestMetricsProvidersInjectable from "../../../common/k8s-api/endpoints/metrics.api/request-providers.injectable";
+import productNameInjectable from "../../../common/vars/product-name.injectable";
 
 export interface ClusterPrometheusSettingProps {
   cluster: Cluster;

src/renderer/components/cluster-settings/proxy-setting.tsx

@@ -6,9 +6,9 @@
 import React from "react";
 import { observable, autorun, makeObservable } from "mobx";
 import { observer, disposeOnUnmount } from "mobx-react";
-import type { Cluster } from "../../../../common/cluster/cluster";
-import { Input, InputValidators } from "../../input";
-import { SubTitle } from "../../layout/sub-title";
+import type { Cluster } from "../../../common/cluster/cluster";
+import { Input, InputValidators } from "../input";
+import { SubTitle } from "../layout/sub-title";
 
 export interface ClusterProxySettingProps {
   cluster: Cluster;

src/renderer/components/cluster-settings/show-metrics.tsx

@@ -5,11 +5,11 @@
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import type { Cluster } from "../../../../common/cluster/cluster";
+import type { Cluster } from "../../../common/cluster/cluster";
 import { observable, reaction, makeObservable } from "mobx";
-import { Badge } from "../../badge/badge";
-import { Icon } from "../../icon/icon";
-import { Notice } from "../../+extensions/notice";
+import { Badge } from "../badge/badge";
+import { Icon } from "../icon/icon";
+import { Notice } from "../+extensions/notice";
 
 export interface ShowMetricsSettingProps {
   cluster: Cluster;

src/renderer/components/command-palette/registered-commands/get-entity-setting-commands.injectable.ts

@@ -1,21 +0,0 @@
-/**
- * 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 type { RegisteredEntitySetting } from "../../../../extensions/registries";
-import { EntitySettingRegistry } from "../../../../extensions/registries";
-
-export type GetEntitySettingCommands = (kind: string, apiVersion: string, source?: string) => RegisteredEntitySetting[];
-
-const getEntitySettingCommandsInjectable = getInjectable({
-  id: "get-entity-setting-commands",
-  instantiate: (): GetEntitySettingCommands => {
-    const reg = EntitySettingRegistry.getInstance();
-
-    return (kind, apiVersion, source) => reg.getItemsForKind(kind, apiVersion, source);
-  },
-  causesSideEffects: true,
-});
-
-export default getEntitySettingCommandsInjectable;

src/renderer/components/command-palette/registered-commands/internal-commands.injectable.tsx

@@ -4,7 +4,6 @@
  */
 
 import React from "react";
-import type { RegisteredEntitySetting } from "../../../../extensions/registries";
 import { HotbarAddCommand } from "../../hotbar/hotbar-add-command";
 import { HotbarRemoveCommand } from "../../hotbar/hotbar-remove-command";
 import { HotbarSwitchCommand } from "../../hotbar/hotbar-switch-command";
@@ -37,10 +36,11 @@ import navigateToJobsInjectable from "../../../../common/front-end-routing/route
 import navigateToCronJobsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/navigate-to-cron-jobs.injectable";
 import navigateToCustomResourcesInjectable from "../../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable";
 import navigateToEntitySettingsInjectable from "../../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
-import getEntitySettingCommandsInjectable from "./get-entity-setting-commands.injectable";
 
 // TODO: Importing from features is not OK. Make commands to comply with Open Closed Principle to allow moving implementation under a feature
 import navigateToPreferencesInjectable from "../../../../features/preferences/common/navigate-to-preferences.injectable";
+import type { HasCatalogEntitySettingItems } from "../../+entity-settings/has-settings.injectable";
+import hasCatalogEntitySettingItemsInjectable from "../../+entity-settings/has-settings.injectable";
 
 export function isKubernetesClusterActive(context: CommandContext): boolean {
   return context.entity?.kind === "KubernetesCluster";
@@ -48,9 +48,8 @@ export function isKubernetesClusterActive(context: CommandContext): boolean {
 
 interface Dependencies {
   openCommandDialog: (component: React.ReactElement) => void;
-  getEntitySettingItems: (kind: string, apiVersion: string, source?: string) => RegisteredEntitySetting[];
+  hasCatalogEntitySettingItems: HasCatalogEntitySettingItems;
   createTerminalTab: () => DockTabCreate;
-
   navigateToPreferences: () => void;
   navigateToHelmCharts: () => void;
   navigateToHelmReleases: () => void;
@@ -214,8 +213,7 @@ function getInternalCommands(dependencies: Dependencies): CommandRegistration[]
       title: ({ entity }) => `${entity.kind}/${entity.getName()}: View Settings`,
       action: ({ entity }) => dependencies.navigateToEntitySettings(entity.getId()),
       isActive: ({ entity }) => (
-        entity
-        && dependencies.getEntitySettingItems(entity.kind, entity.apiVersion, entity.metadata.source).length > 0
+        entity && dependencies.hasCatalogEntitySettingItems(entity)
       ),
     },
     {
@@ -257,7 +255,7 @@ const internalCommandsInjectable = getInjectable({
 
   instantiate: (di) => getInternalCommands({
     openCommandDialog: di.inject(commandOverlayInjectable).open,
-    getEntitySettingItems: di.inject(getEntitySettingCommandsInjectable),
+    hasCatalogEntitySettingItems: di.inject(hasCatalogEntitySettingItemsInjectable),
     createTerminalTab: di.inject(createTerminalTabInjectable),
     navigateToPreferences: di.inject(navigateToPreferencesInjectable),
     navigateToHelmCharts: di.inject(navigateToHelmChartsInjectable),

src/renderer/components/layout/tab-layout-2.tsx

@@ -43,6 +43,7 @@ export const TabLayout = observer(
                   active={active}
                   data-is-active-test={active}
                   data-testid={`tab-link-for-${registration.id}`}
+                  value={undefined}
                 />
               );
             })}

src/renderer/components/layout/tab-layout.tsx

@@ -39,7 +39,7 @@ export const TabLayout = observer(({ className, contentClass, tabs = [], childre
   return (
     <div className={cssNames("TabLayout", className)}>
       {hasTabs && (
-        <Tabs center onChange={(url) => navigate(url)}>
+        <Tabs<string> center onChange={(url) => navigate(url)}>
           {tabs.map(({ title, routePath, url = routePath, exact }) => (
             <Tab
               key={url}

src/renderer/components/tabs/tabs.tsx

@@ -9,23 +9,23 @@ import React from "react";
 import { autoBind, cssNames } from "../../utils";
 import { Icon } from "../icon";
 
-const TabsContext = React.createContext<TabsContextValue>({});
+const TabsContext = React.createContext<TabsContextValue<unknown>>({});
 
-interface TabsContextValue<D = any> {
+interface TabsContextValue<D> {
   autoFocus?: boolean;
   withBorder?: boolean;
   value?: D;
   onChange?(value: D): void;
 }
 
-export interface TabsProps<D = any> extends TabsContextValue<D>, Omit<DOMAttributes<HTMLElement>, "onChange"> {
+export interface TabsProps<D> extends TabsContextValue<D>, Omit<DOMAttributes<HTMLElement>, "onChange"> {
   className?: string;
   center?: boolean;
   wrap?: boolean;
   scrollable?: boolean;
 }
 
-export class Tabs extends React.PureComponent<TabsProps> {
+export class Tabs<D> extends React.PureComponent<TabsProps<D>> {
   public elem: HTMLDivElement | null = null;
 
   render() {
@@ -49,22 +49,22 @@ export class Tabs extends React.PureComponent<TabsProps> {
   }
 }
 
-export interface TabProps<D = any> extends DOMAttributes<HTMLElement> {
+export interface TabProps<D> extends DOMAttributes<HTMLElement> {
   id?: string;
   className?: string;
   active?: boolean;
   disabled?: boolean;
   icon?: React.ReactNode | string; // material-ui name or custom icon
   label?: React.ReactNode;
-  value?: D;
+  value: D;
 }
 
-export class Tab extends React.PureComponent<TabProps> {
+export class Tab<D> extends React.PureComponent<TabProps<D>> {
   static contextType = TabsContext;
-  declare context: TabsContextValue;
+  declare context: TabsContextValue<D>;
   public ref = React.createRef<HTMLDivElement>();
 
-  constructor(props: TabProps) {
+  constructor(props: TabProps<D>) {
     super(props);
     autoBind(this);
   }

src/renderer/getDiForUnitTesting.tsx

@@ -47,7 +47,6 @@ import setupSystemCaInjectable from "./frames/root-frame/setup-system-ca.injecta
 import extensionShouldBeEnabledForClusterFrameInjectable from "./extension-loader/extension-should-be-enabled-for-cluster-frame.injectable";
 import { asyncComputed } from "@ogre-tools/injectable-react";
 import legacyOnChannelListenInjectable from "./ipc/legacy-channel-listen.injectable";
-import getEntitySettingCommandsInjectable from "./components/command-palette/registered-commands/get-entity-setting-commands.injectable";
 import storageSaveDelayInjectable from "./utils/create-storage/storage-save-delay.injectable";
 import environmentVariablesInjectable from "../common/utils/environment-variables.injectable";
 import type { GlobalOverride } from "../common/test-utils/get-global-override";
@@ -113,9 +112,6 @@ export const getDiForUnitTesting = (
     di.override(requestAnimationFrameInjectable, () => (callback) => callback());
     di.override(lensResourcesDirInjectable, () => "/irrelevant");
 
-    // TODO: remove when entity settings registry is refactored
-    di.override(getEntitySettingCommandsInjectable, () => () => []);
-
     // TODO: Remove after "LensRendererExtension.isEnabledForCluster" is removed
     di.override(extensionShouldBeEnabledForClusterFrameInjectable, () =>
       asyncComputed({ getValueFromObservedPromise: async () => true, valueWhenPending: true }),

src/renderer/initializers/entity-settings-registry.ts

@@ -1,68 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { EntitySettingRegistry } from "../../extensions/registries";
-import * as clusterSettings from "../components/cluster-settings";
-
-export function initEntitySettingsRegistry() {
-  EntitySettingRegistry.getInstance()
-    .add([
-      {
-        apiVersions: ["entity.k8slens.dev/v1alpha1"],
-        kind: "KubernetesCluster",
-        source: "local",
-        title: "General",
-        group: "Settings",
-        components: {
-          View: clusterSettings.GeneralSettings,
-        },
-      },
-      {
-        apiVersions: ["entity.k8slens.dev/v1alpha1"],
-        kind: "KubernetesCluster",
-        title: "Proxy",
-        group: "Settings",
-        components: {
-          View: clusterSettings.ProxySettings,
-        },
-      },
-      {
-        apiVersions: ["entity.k8slens.dev/v1alpha1"],
-        kind: "KubernetesCluster",
-        title: "Terminal",
-        group: "Settings",
-        components: {
-          View: clusterSettings.TerminalSettings,
-        },
-      },
-      {
-        apiVersions: ["entity.k8slens.dev/v1alpha1"],
-        kind: "KubernetesCluster",
-        title: "Namespaces",
-        group: "Settings",
-        components: {
-          View: clusterSettings.NamespacesSettings,
-        },
-      },
-      {
-        apiVersions: ["entity.k8slens.dev/v1alpha1"],
-        kind: "KubernetesCluster",
-        title: "Metrics",
-        group: "Settings",
-        components: {
-          View: clusterSettings.MetricsSettings,
-        },
-      },
-      {
-        apiVersions: ["entity.k8slens.dev/v1alpha1"],
-        kind: "KubernetesCluster",
-        title: "Node Shell",
-        group: "Settings",
-        components: {
-          View: clusterSettings.NodeShellSettings,
-        },
-      },
-    ]);
-}

src/renderer/initializers/index.ts

@@ -5,7 +5,6 @@
 
 export * from "./catalog-entity-detail-registry";
 export * from "./catalog";
-export * from "./entity-settings-registry";
 export * from "./ipc";
 export * from "./registries";
 export * from "./catalog-category-registry";

src/renderer/initializers/registries.ts

@@ -7,5 +7,4 @@ import * as registries from "../../extensions/registries";
 
 export function initRegistries() {
   registries.CatalogEntityDetailRegistry.createInstance();
-  registries.EntitySettingRegistry.createInstance();
 }