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/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,155 +7,129 @@ 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();
-  }
+  return <CatalogEntitySettings entity={entity} />;
+});
 
-  get entity() {
-    return this.props.entityRegistry.getById(this.entityId);
-  }
+export const EntitySettingsRouteComponent = withInjectables<Dependencies>(NonInjectedEntitySettings, {
+  getProps: (di) => ({
+    entity: di.inject(currentCatalogEntityForSettingsInjectable),
+  }),
+});
 
-  get menuItems() {
-    if (!this.entity) return [];
+interface CatalogEntitySettingsProps {
+  entity: CatalogEntity;
+}
 
-    return EntitySettingRegistry.getInstance().getItemsForKind(this.entity.kind, this.entity.apiVersion, this.entity.metadata.source);
-  }
+interface CatalogEntitySettingsDeps {
+  activeEntitySettingsTab: ActiveEntitySettings;
+}
 
-  get activeSetting() {
-    this.activeTab ||= this.menuItems[0]?.id;
+const NonInjectedCatalogEntitySettings = observer((props: CatalogEntitySettingsProps & CatalogEntitySettingsDeps) => {
+  const {
+    activeEntitySettingsTab,
+    entity,
+  } = props;
+  const { tabId, setting, groups } = activeEntitySettingsTab.get();
 
-    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 (
-      <>
-        <div className={styles.avatarAndName}>
-          <Avatar
-            title={entity.getName()}
-            colorHash={`${entity.getName()}-${entity.metadata.source}`}
-            src={entity.spec.icon?.src}
-            className={styles.settingsAvatar}
-            size={40}
-          />
-          <div className={styles.entityName}>
-            {entity.getName()}
-          </div>
+  const renderNavigation = () => (
+    <>
+      <div className={styles.avatarAndName}>
+        <Avatar
+          title={entity.getName()}
+          colorHash={`${entity.getName()}-${entity.metadata.source}`}
+          src={entity.spec.icon?.src}
+          className={styles.settingsAvatar}
+          size={40}
+        />
+        <div className={styles.entityName}>
+          {entity.getName()}
         </div>
-        <Tabs
-          className="flex column"
-          scrollable={false}
-          onChange={this.onTabChange}
-          value={this.activeTab}
-        >
-          { groups.map((group, groupIndex) => (
-            <React.Fragment key={`group-${groupIndex}`}>
-              <hr/>
-              <div className="header">{group[0]}</div>
-              { group[1].map((setting, index) => (
-                <Tab
-                  key={index}
-                  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)}
-        contentGaps={false}
+      </div>
+      <Tabs
+        className="flex column"
+        scrollable={ false }
+        onChange={activeEntitySettingsTab.set}
+        value={tabId}
       >
         {
-          activeSetting && (
+          groups.map(({ tabs, title }) => (
+            <React.Fragment key={title}>
+              <hr />
+              <div className="header">{title}</div>
+              {
+                tabs.map((setting) => (
+                  <Tab
+                    key={setting.id}
+                    value={setting.id}
+                    label={setting.title}
+                    data-testid={`${setting.id}-tab`}
+                  />
+                ))
+              }
+            </React.Fragment>
+          ))
+        }
+      </Tabs>
+    </>
+  );
+
+  return (
+    <SettingLayout
+      navigation={renderNavigation()}
+      contentGaps={false}
+      data-testid="entity-settings"
+    >
+      {
+        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>
           )
-        }
-      </SettingLayout>
-    );
-  }
-}
+          : (
+            <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",
+});