From f3b1bc565c70440c256a660f5a3024a4c139b825 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 3 May 2023 11:23:00 -0400
Subject: [PATCH] chore: Fix type errors with KubeObjectDetails

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../config-leases/lease-details.tsx           | 55 +++++------
 ...utating-webhook-configurations-details.tsx | 43 ++++----
 .../pod-disruption-budgets-details.tsx        | 24 ++---
 .../priority-classes-details.tsx              | 45 ++++-----
 .../runtime-classes-details.tsx               | 52 ++++------
 ...time-classes-route-component.injectable.ts | 14 +--
 ...idating-webhook-configurations-details.tsx | 47 ++++-----
 ...ter-role-binding-detail-item.injectable.ts |  3 +-
 .../config-map-detail-item.injectable.ts      |  3 +-
 .../cron-job-detail-item.injectable.ts        |  3 +-
 ...urce-definitions-detail-item.injectable.ts |  3 +-
 .../daemon-set-detail-item.injectable.ts      |  3 +-
 .../deployment-detail-item.injectable.ts      |  3 +-
 .../endpoints-detail-item.injectable.ts       |  3 +-
 .../events-detail-item.injectable.ts          |  3 +-
 ...l-pod-autoscaler-detail-item.injectable.ts |  3 +-
 .../ingress-detail-item.injectable.ts         |  3 +-
 .../job-detail-item.injectable.ts             |  3 +-
 .../limit-range-detail-item.injectable.ts     |  3 +-
 .../namespaces-detail-item.injectable.ts      |  3 +-
 .../network-policy-detail-item.injectable.ts  |  3 +-
 .../node-detail-item.injectable.ts            |  3 +-
 ...ent-volume-claim-detail-item.injectable.ts |  3 +-
 ...ersistent-volume-detail-item.injectable.ts |  3 +-
 .../pod-detail-item.injectable.ts             |  3 +-
 ...-security-policy-detail-item.injectable.ts |  3 +-
 .../replica-set-detail-item.injectable.ts     |  3 +-
 ...ation-controller-detail-item.injectable.ts |  3 +-
 .../resource-quota-detail-item.injectable.ts  |  3 +-
 .../role-binding-detail-item.injectable.ts    |  3 +-
 .../secrets-detail-item.injectable.ts         |  3 +-
 .../service-account-detail-item.injectable.ts |  3 +-
 .../service-detail-item.injectable.ts         |  3 +-
 .../stateful-set-detail-item.injectable.ts    |  3 +-
 .../storage-class-detail-item.injectable.ts   |  3 +-
 ...l-pod-autoscaler-detail-item.injectable.ts |  3 +-
 ...ics-kube-object-detail-item.injectable.tsx |  2 +-
 .../cluster-role-bindings/details.tsx         |  2 +-
 .../user-management/cluster-roles/details.tsx | 99 ++++++++-----------
 .../user-management/role-bindings/details.tsx |  2 +-
 .../user-management/roles/details.tsx         | 97 ++++++++----------
 41 files changed, 252 insertions(+), 317 deletions(-)

diff --git a/packages/core/src/renderer/components/config-leases/lease-details.tsx b/packages/core/src/renderer/components/config-leases/lease-details.tsx
index 714d8428bb..793e524309 100644
--- a/packages/core/src/renderer/components/config-leases/lease-details.tsx
+++ b/packages/core/src/renderer/components/config-leases/lease-details.tsx
@@ -9,41 +9,32 @@ import React from "react";
 import { observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { Lease } from "@k8slens/kube-object";
+import type { Lease } from "@k8slens/kube-object";
 
-@observer
-export class LeaseDetails extends React.Component<KubeObjectDetailsProps> {
+export const LeaseDetails = observer((props: KubeObjectDetailsProps) => {
+  const lease = props.object as Lease;
 
-  render() {
-    const { object: lease } = this.props;
+  return (
+    <div className="LeaseDetails">
+      <DrawerItem name="Holder Identity">
+        {lease.getHolderIdentity()}
+      </DrawerItem>
 
-    if (!(lease instanceof Lease)) {
-      return null;
-    }
+      <DrawerItem name="Lease Duration Seconds">
+        {lease.getLeaseDurationSeconds()}
+      </DrawerItem>
 
-    return (
-      <div className="LeaseDetails">
-        <DrawerItem name="Holder Identity">
-          {lease.getHolderIdentity()}
-        </DrawerItem>
+      <DrawerItem name="Lease Transitions" hidden={lease.getLeaseTransitions() === undefined}>
+        {lease.getLeaseTransitions()}
+      </DrawerItem>
 
-        <DrawerItem name="Lease Duration Seconds">
-          {lease.getLeaseDurationSeconds()}
-        </DrawerItem>
+      <DrawerItem name="Acquire Time" hidden={lease.getAcquireTime() === ""}>
+        {lease.getAcquireTime()}
+      </DrawerItem>
 
-        <DrawerItem name="Lease Transitions" hidden={lease.getLeaseTransitions() === undefined}>
-          {lease.getLeaseTransitions()}
-        </DrawerItem>
-
-        <DrawerItem name="Acquire Time" hidden={lease.getAcquireTime() === ""}>
-          {lease.getAcquireTime()}
-        </DrawerItem>
-
-        <DrawerItem name="Renew Time">
-          {lease.getRenewTime()}
-        </DrawerItem>
-
-      </div >
-    );
-  }
-}
+      <DrawerItem name="Renew Time">
+        {lease.getRenewTime()}
+      </DrawerItem>
+    </div >
+  );
+});
diff --git a/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx b/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx
index e9e2eac8c5..5e79f619f3 100644
--- a/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx
+++ b/packages/core/src/renderer/components/config-mutating-webhook-configurations/mutating-webhook-configurations-details.tsx
@@ -6,31 +6,24 @@ import React from "react";
 import { observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { MutatingWebhookConfiguration } from "@k8slens/kube-object";
+import type { MutatingWebhookConfiguration } from "@k8slens/kube-object";
 import { WebhookConfig } from "./webhook-config";
 
-@observer
-export class MutatingWebhookDetails extends React.Component<KubeObjectDetailsProps> {
-  render() {
-    const { object: webhookConfig } = this.props;
+export const MutatingWebhookDetails = observer((props: KubeObjectDetailsProps) => {
+  const webhookConfig = props.object as MutatingWebhookConfiguration;
 
-    if (!(webhookConfig instanceof MutatingWebhookConfiguration)) {
-      return null;
-    }
-
-    return (
-      <div className="MutatingWebhookDetails">
-        <DrawerItem name="API version">
-          {webhookConfig.apiVersion}
-        </DrawerItem>
-        <DrawerTitle>Webhooks</DrawerTitle>
-        {webhookConfig.getWebhooks()?.length == 0 && (
-          <div style={{ opacity: 0.6 }}>No webhooks set</div>
-        )}
-        {webhookConfig.getWebhooks()?.map((webhook) => (
-          <WebhookConfig webhook={webhook} key={webhook.name} />
-        ))}
-      </div >
-    );
-  }
-}
+  return (
+    <div className="MutatingWebhookDetails">
+      <DrawerItem name="API version">
+        {webhookConfig.apiVersion}
+      </DrawerItem>
+      <DrawerTitle>Webhooks</DrawerTitle>
+      {webhookConfig.getWebhooks()?.length == 0 && (
+        <div style={{ opacity: 0.6 }}>No webhooks set</div>
+      )}
+      {webhookConfig.getWebhooks()?.map((webhook) => (
+        <WebhookConfig webhook={webhook} key={webhook.name} />
+      ))}
+    </div >
+  );
+});
diff --git a/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-details.tsx b/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-details.tsx
index 79af5a0289..84209d9b70 100644
--- a/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-details.tsx
+++ b/packages/core/src/renderer/components/config-pod-disruption-budgets/pod-disruption-budgets-details.tsx
@@ -10,20 +10,11 @@ import { observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { PodDisruptionBudget } from "@k8slens/kube-object";
+import type { PodDisruptionBudget } from "@k8slens/kube-object";
 
 export const PodDisruptionBudgetDetails = observer((props: KubeObjectDetailsProps) => {
-  const { object: pdb } = props;
-
-  if (!pdb) {
-    return null;
-  }
-
-  if (!(pdb instanceof PodDisruptionBudget)) {
-    return null;
-  }
-
-  const selectors = pdb.getSelectors();
+  const podDisruptionBudget = props.object as PodDisruptionBudget;
+  const selectors = podDisruptionBudget.getSelectors();
 
   return (
     <div className="PdbDetails">
@@ -34,21 +25,20 @@ export const PodDisruptionBudgetDetails = observer((props: KubeObjectDetailsProp
       )}
 
       <DrawerItem name="Min Available">
-        {pdb.getMinAvailable()}
+        {podDisruptionBudget.getMinAvailable()}
       </DrawerItem>
 
       <DrawerItem name="Max Unavailable">
-        {pdb.getMaxUnavailable()}
+        {podDisruptionBudget.getMaxUnavailable()}
       </DrawerItem>
 
       <DrawerItem name="Current Healthy">
-        {pdb.getCurrentHealthy()}
+        {podDisruptionBudget.getCurrentHealthy()}
       </DrawerItem>
 
       <DrawerItem name="Desired Healthy">
-        {pdb.getDesiredHealthy()}
+        {podDisruptionBudget.getDesiredHealthy()}
       </DrawerItem>
-
     </div>
   );
 });
diff --git a/packages/core/src/renderer/components/config-priority-classes/priority-classes-details.tsx b/packages/core/src/renderer/components/config-priority-classes/priority-classes-details.tsx
index 2cba36d01d..e7d9c9dbdb 100644
--- a/packages/core/src/renderer/components/config-priority-classes/priority-classes-details.tsx
+++ b/packages/core/src/renderer/components/config-priority-classes/priority-classes-details.tsx
@@ -9,35 +9,24 @@ import React from "react";
 import { observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { PriorityClass } from "@k8slens/kube-object";
+import type { PriorityClass } from "@k8slens/kube-object";
 
-@observer
-export class PriorityClassesDetails extends React.Component<KubeObjectDetailsProps> {
-  render() {
-    const { object: pc } = this.props;
+export const PriorityClassesDetails = observer((props: KubeObjectDetailsProps) => {
+  const priorityClass = props.object as PriorityClass;
 
-    if (!pc) {
-      return null;
-    }
+  return (
+    <div className="PriorityClassesDetails">
+      <DrawerItem name="Description">
+        {priorityClass.getDescription()}
+      </DrawerItem>
 
-    if (!(pc instanceof PriorityClass)) {
-      return null;
-    }
+      <DrawerItem name="Value">
+        {priorityClass.getValue()}
+      </DrawerItem>
 
-    return (
-      <div className="PriorityClassesDetails">
-        <DrawerItem name="Description">
-          {pc.getDescription()}
-        </DrawerItem>
-
-        <DrawerItem name="Value">
-          {pc.getValue()}
-        </DrawerItem>
-
-        <DrawerItem name="Global Default">
-          {pc.getGlobalDefault()}
-        </DrawerItem>
-      </div>
-    );
-  }
-}
+      <DrawerItem name="Global Default">
+        {priorityClass.getGlobalDefault()}
+      </DrawerItem>
+    </div>
+  );
+});
diff --git a/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-details.tsx b/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-details.tsx
index b5358e03aa..8f9dda3b91 100644
--- a/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-details.tsx
+++ b/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-details.tsx
@@ -9,43 +9,31 @@ import React from "react";
 import { observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { RuntimeClass } from "@k8slens/kube-object";
+import type { RuntimeClass } from "@k8slens/kube-object";
 import { Badge } from "../badge";
 import { RuntimeClassDetailsTolerations } from "./runtime-classes-details-tolerations";
 
-@observer
-export class RuntimeClassesDetails extends React.Component<KubeObjectDetailsProps> {
+export type RuntimeClassesDetailsProps = KubeObjectDetailsProps<RuntimeClass>;
 
-  render() {
-    const { object: rc } = this.props;
+export const RuntimeClassesDetails = observer((props: KubeObjectDetailsProps) => {
+  const runtimeClass = props.object as RuntimeClass;
+  const nodeSelector = runtimeClass.getNodeSelectors();
 
-    if (!rc) {
-      return null;
-    }
+  return (
+    <div className="RuntimeClassesDetails">
+      <DrawerItem name="Handler">
+        {runtimeClass.getHandler()}
+      </DrawerItem>
 
-    if (!(rc instanceof RuntimeClass)) {
-      return null;
-    }
+      <DrawerItem name="Pod Fixed" hidden={runtimeClass.getPodFixed() === ""}>
+        {runtimeClass.getPodFixed()}
+      </DrawerItem>
 
-    const nodeSelector = rc.getNodeSelectors();
+      <DrawerItem name="Node Selector" hidden={nodeSelector.length === 0}>
+        {nodeSelector.map(label => <Badge key={label} label={label} />)}
+      </DrawerItem>
 
-    return (
-      <div className="RuntimeClassesDetails">
-        <DrawerItem name="Handler">
-          {rc.getHandler()}
-        </DrawerItem>
-
-        <DrawerItem name="Pod Fixed" hidden={rc.getPodFixed() === ""}>
-          {rc.getPodFixed()}
-        </DrawerItem>
-
-        <DrawerItem name="Node Selector" hidden={nodeSelector.length === 0}>
-          {nodeSelector.map(label => <Badge key={label} label={label} />)}
-        </DrawerItem>
-
-        <RuntimeClassDetailsTolerations runtimeClass={rc} />
-
-      </div>
-    );
-  }
-}
+      <RuntimeClassDetailsTolerations runtimeClass={runtimeClass} />
+    </div>
+  );
+});
diff --git a/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-route-component.injectable.ts b/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-route-component.injectable.ts
index 5118cdcc08..6e84515e8b 100644
--- a/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-route-component.injectable.ts
+++ b/packages/core/src/renderer/components/config-runtime-classes/runtime-classes-route-component.injectable.ts
@@ -2,20 +2,14 @@
  * 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 { RuntimeClasses } from "./runtime-classes";
 import runtimeClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/runtime-classes-route.injectable";
-import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+import { getRouteSpecificComponentInjectable } from "../../routes/route-specific-component-injection-token";
 
-const runtimeClassesRouteComponentInjectable = getInjectable({
+const runtimeClassesRouteComponentInjectable = getRouteSpecificComponentInjectable({
   id: "runtime-classes-route-component",
-
-  instantiate: (di) => ({
-    route: di.inject(runtimeClassesRouteInjectable),
-    Component: RuntimeClasses,
-  }),
-
-  injectionToken: routeSpecificComponentInjectionToken,
+  routeInjectable: runtimeClassesRouteInjectable,
+  Component: RuntimeClasses,
 });
 
 export default runtimeClassesRouteComponentInjectable;
diff --git a/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-details.tsx b/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-details.tsx
index ab80845f29..8e86420525 100644
--- a/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-details.tsx
+++ b/packages/core/src/renderer/components/config-validating-webhook-configurations/validating-webhook-configurations-details.tsx
@@ -7,34 +7,23 @@ import { observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { WebhookConfig } from "../config-mutating-webhook-configurations/webhook-config";
-import { ValidatingWebhookConfiguration } from "@k8slens/kube-object";
+import type { ValidatingWebhookConfiguration } from "@k8slens/kube-object";
 
-@observer
-export class ValidatingWebhookDetails extends React.Component<KubeObjectDetailsProps> {
-  render() {
-    const { object: webhookConfig } = this.props;
+export const ValidatingWebhookDetails = observer((props: KubeObjectDetailsProps) => {
+  const webhookConfig = props.object as ValidatingWebhookConfiguration;
 
-    if (!webhookConfig) {
-      return null;
-    }
-
-    if (!(webhookConfig instanceof ValidatingWebhookConfiguration)) {
-      return null;
-    }
-
-    return (
-      <div className="ValidatingWebhookDetails">
-        <DrawerItem name="API version">
-          {webhookConfig.apiVersion}
-        </DrawerItem>
-        <DrawerTitle>Webhooks</DrawerTitle>
-        {webhookConfig.getWebhooks()?.length == 0 && (
-          <div style={{ opacity: 0.6 }}>No webhooks set</div>
-        )}
-        {webhookConfig.getWebhooks()?.map((webhook) => (
-          <WebhookConfig webhook={webhook} key={webhook.name} />
-        ))}
-      </div>
-    );
-  }
-}
+  return (
+    <div className="ValidatingWebhookDetails">
+      <DrawerItem name="API version">
+        {webhookConfig.apiVersion}
+      </DrawerItem>
+      <DrawerTitle>Webhooks</DrawerTitle>
+      {webhookConfig.getWebhooks()?.length == 0 && (
+        <div style={{ opacity: 0.6 }}>No webhooks set</div>
+      )}
+      {webhookConfig.getWebhooks()?.map((webhook) => (
+        <WebhookConfig webhook={webhook} key={webhook.name} />
+      ))}
+    </div >
+  );
+});
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cluster-role-binding-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cluster-role-binding-detail-item.injectable.ts
index 0de5dfb439..2f45629a71 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cluster-role-binding-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cluster-role-binding-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { ClusterRoleBindingDetails } from "../../../user-management/cluster-role-bindings";
@@ -19,7 +20,7 @@ const clusterRoleBindingDetailItemInjectable = getInjectable({
       Component: ClusterRoleBindingDetails,
       enabled: computed(() => isClusterRoleBinding(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/config-map-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/config-map-detail-item.injectable.ts
index 1534ba49cc..1c428cc5ba 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/config-map-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/config-map-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { ConfigMapDetails } from "../../../config-maps";
@@ -19,7 +20,7 @@ const configMapDetailItemInjectable = getInjectable({
       Component: ConfigMapDetails,
       enabled: computed(() => isConfigMap(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cron-job-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cron-job-detail-item.injectable.ts
index f2a28d522a..908b8db6dc 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cron-job-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cron-job-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { CronJobDetails } from "../../../workloads-cronjobs";
@@ -19,7 +20,7 @@ const cronJobDetailItemInjectable = getInjectable({
       Component: CronJobDetails,
       enabled: computed(() => isCronJob(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/custom-resource-definitions-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/custom-resource-definitions-detail-item.injectable.ts
index 7b12847317..1c93278248 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/custom-resource-definitions-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/custom-resource-definitions-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { CustomResourceDefinitionDetails } from "../../../custom-resource-definitions/details";
@@ -19,7 +20,7 @@ const customResourceDefinitionsDetailItemInjectable = getInjectable({
       Component: CustomResourceDefinitionDetails,
       enabled: computed(() => isCustomResourceDefinition(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/daemon-set-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/daemon-set-detail-item.injectable.ts
index 1cdbfe97aa..db3eee0dcd 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/daemon-set-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/daemon-set-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { DaemonSetDetails } from "../../../workloads-daemonsets";
@@ -19,7 +20,7 @@ const daemonSetDetailItemInjectable = getInjectable({
       Component: DaemonSetDetails,
       enabled: computed(() => isDaemonSet(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/deployment-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/deployment-detail-item.injectable.ts
index 54ff6e4d90..2788e27bc2 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/deployment-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/deployment-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { DeploymentDetails } from "../../../workloads-deployments";
@@ -19,7 +20,7 @@ const deploymentDetailItemInjectable = getInjectable({
       Component: DeploymentDetails,
       enabled: computed(() => isDeployment(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/endpoints-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/endpoints-detail-item.injectable.ts
index 3f83cc195b..0b5aff3e99 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/endpoints-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/endpoints-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { EndpointsDetails } from "../../../network-endpoints";
@@ -19,7 +20,7 @@ const endpointsDetailItemInjectable = getInjectable({
       Component: EndpointsDetails,
       enabled: computed(() => isEndpoint(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/events-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/events-detail-item.injectable.ts
index 6c09774627..7c6c2efc4b 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/events-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/events-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { EventDetails } from "../../../events";
@@ -19,7 +20,7 @@ const eventsDetailItemInjectable = getInjectable({
       Component: EventDetails,
       enabled: computed(() => isEvent(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/horizontal-pod-autoscaler-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/horizontal-pod-autoscaler-detail-item.injectable.ts
index 235f321465..27113b52c9 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/horizontal-pod-autoscaler-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/horizontal-pod-autoscaler-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { HorizontalPodAutoscalerDetails } from "../../../config-horizontal-pod-autoscalers";
 import { computed } from "mobx";
@@ -19,7 +20,7 @@ const horizontalPodAutoscalerDetailItemInjectable = getInjectable({
       Component: HorizontalPodAutoscalerDetails,
       enabled: computed(() => isHorizontalPodAutoscaler(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/ingress-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/ingress-detail-item.injectable.ts
index 73206ea219..85832bce83 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/ingress-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/ingress-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { IngressDetails } from "../../../network-ingresses";
@@ -19,7 +20,7 @@ const ingressDetailItemInjectable = getInjectable({
       Component: IngressDetails,
       enabled: computed(() => isIngress(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/job-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/job-detail-item.injectable.ts
index ed1950e8ee..e8342905c2 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/job-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/job-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { JobDetails } from "../../../workloads-jobs";
@@ -19,7 +20,7 @@ const jobDetailItemInjectable = getInjectable({
       Component: JobDetails,
       enabled: computed(() => isJob(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/limit-range-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/limit-range-detail-item.injectable.ts
index 87c1852b15..6f6136dcdc 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/limit-range-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/limit-range-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { LimitRangeDetails } from "../../../config-limit-ranges";
@@ -19,7 +20,7 @@ const limitRangeDetailItemInjectable = getInjectable({
       Component: LimitRangeDetails,
       enabled: computed(() => isLimitRange(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts
index 91f5a8b1c4..30edf029d9 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { NamespaceDetails } from "../../../namespaces";
@@ -19,7 +20,7 @@ const namespacesDetailItemInjectable = getInjectable({
       Component: NamespaceDetails,
       enabled: computed(() => isNamespace(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/network-policy-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/network-policy-detail-item.injectable.ts
index 4b0d274b78..4f191d97ca 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/network-policy-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/network-policy-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { NetworkPolicyDetails } from "../../../network-policies";
@@ -19,7 +20,7 @@ const networkPolicyDetailItemInjectable = getInjectable({
       Component: NetworkPolicyDetails,
       enabled: computed(() => isNetworkPolicy(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/node-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/node-detail-item.injectable.ts
index 6f433a159d..8cf8b20494 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/node-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/node-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { NodeDetails } from "../../../nodes/details";
@@ -19,7 +20,7 @@ const nodeDetailItemInjectable = getInjectable({
       Component: NodeDetails,
       enabled: computed(() => isNode(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-claim-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-claim-detail-item.injectable.ts
index 4c9fb49a37..3226beebd0 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-claim-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-claim-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { PersistentVolumeClaimDetails } from "../../../storage-volume-claims";
@@ -19,7 +20,7 @@ const persistentVolumeClaimDetailItemInjectable = getInjectable({
       Component: PersistentVolumeClaimDetails,
       enabled: computed(() => isPersistentVolumeClaim(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-detail-item.injectable.ts
index 788e9d2974..8c3b27e66a 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { PersistentVolumeDetails } from "../../../storage-volumes";
@@ -19,7 +20,7 @@ const persistentVolumeDetailItemInjectable = getInjectable({
       Component: PersistentVolumeDetails,
       enabled: computed(() => isPersistentVolume(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-detail-item.injectable.ts
index 2d5e9b2c6b..adc9739e47 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { PodDetails } from "../../../workloads-pods";
@@ -19,7 +20,7 @@ const podDetailItemInjectable = getInjectable({
       Component: PodDetails,
       enabled: computed(() => isPod(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-security-policy-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-security-policy-detail-item.injectable.ts
index 90c71eecaa..aec73808a3 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-security-policy-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-security-policy-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { PodSecurityPolicyDetails } from "../../../pod-security-policies";
@@ -19,7 +20,7 @@ const podSecurityPolicyDetailItemInjectable = getInjectable({
       Component: PodSecurityPolicyDetails,
       enabled: computed(() => isPodSecurityPolicy(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replica-set-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replica-set-detail-item.injectable.ts
index d4965d0b59..c388b47c36 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replica-set-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replica-set-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { ReplicaSetDetails } from "../../../workloads-replicasets";
@@ -19,7 +20,7 @@ const replicaSetDetailItemInjectable = getInjectable({
       Component: ReplicaSetDetails,
       enabled: computed(() => isReplicaSet(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts
index 99a6d4223d..b6fbd1009b 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { kubeObjectMatchesToKindAndApiVersion } from "../kube-object-matches-to-kind-and-api-version";
@@ -19,7 +20,7 @@ const replicationControllerDetailItemInjectable = getInjectable({
       Component: ReplicationControllerDetails,
       enabled: computed(() => isReplicationController(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/resource-quota-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/resource-quota-detail-item.injectable.ts
index 72c7648ea8..18b0cefd46 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/resource-quota-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/resource-quota-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { ResourceQuotaDetails } from "../../../config-resource-quotas";
@@ -19,7 +20,7 @@ const resourceQuotaDetailItemInjectable = getInjectable({
       Component: ResourceQuotaDetails,
       enabled: computed(() => isResourceQuota(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-binding-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-binding-detail-item.injectable.ts
index 902254a53f..dcc39fb052 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-binding-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-binding-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { RoleBindingDetails } from "../../../user-management/role-bindings";
@@ -19,7 +20,7 @@ const roleBindingDetailItemInjectable = getInjectable({
       Component: RoleBindingDetails,
       enabled: computed(() => isRoleBinding(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/secrets-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/secrets-detail-item.injectable.ts
index 928a093b4a..fd0aa6ad1c 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/secrets-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/secrets-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { SecretDetails } from "../../../config-secrets";
@@ -19,7 +20,7 @@ const secretsDetailItemInjectable = getInjectable({
       Component: SecretDetails,
       enabled: computed(() => isSecret(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-account-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-account-detail-item.injectable.ts
index 6d7331589a..a88154cc00 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-account-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-account-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { ServiceAccountsDetails } from "../../../user-management/service-accounts";
@@ -19,7 +20,7 @@ const serviceAccountDetailItemInjectable = getInjectable({
       Component: ServiceAccountsDetails,
       enabled: computed(() => isServiceAccount(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-detail-item.injectable.ts
index a3d9a14db7..a57795d0d1 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { ServiceDetails } from "../../../network-services";
@@ -19,7 +20,7 @@ const serviceDetailItemInjectable = getInjectable({
       Component: ServiceDetails,
       enabled: computed(() => isService(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/stateful-set-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/stateful-set-detail-item.injectable.ts
index f7ec891d56..6fbde03e63 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/stateful-set-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/stateful-set-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { StatefulSetDetails } from "../../../workloads-statefulsets";
@@ -19,7 +20,7 @@ const statefulSetDetailItemInjectable = getInjectable({
       Component: StatefulSetDetails,
       enabled: computed(() => isStatefulSet(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/storage-class-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/storage-class-detail-item.injectable.ts
index 39346de410..4c726bff96 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/storage-class-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/storage-class-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { computed } from "mobx";
 import { StorageClassDetails } from "../../../storage-classes";
@@ -19,7 +20,7 @@ const storageClassDetailItemInjectable = getInjectable({
       Component: StorageClassDetails,
       enabled: computed(() => isStorageClass(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/vertical-pod-autoscaler-detail-item.injectable.ts b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/vertical-pod-autoscaler-detail-item.injectable.ts
index 22f9db366d..43ebc801ab 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/vertical-pod-autoscaler-detail-item.injectable.ts
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/vertical-pod-autoscaler-detail-item.injectable.ts
@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import type { KubeObjectDetailItem } from "../kube-object-detail-item-injection-token";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
 import { VpaDetails } from "../../../config-vertical-pod-autoscalers";
 import { computed } from "mobx";
@@ -19,7 +20,7 @@ const verticalPodAutoscalerDetailItemInjectable = getInjectable({
       Component: VpaDetails,
       enabled: computed(() => isVerticalPodAutoscaler(kubeObject.value.get()?.object)),
       orderNumber: 10,
-    };
+    } as KubeObjectDetailItem;
   },
 
   injectionToken: kubeObjectDetailItemInjectionToken,
diff --git a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx
index d3b282c0f0..6082d9877e 100644
--- a/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx
+++ b/packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/metrics/get-metrics-kube-object-detail-item.injectable.tsx
@@ -28,7 +28,7 @@ export const getMetricsKubeObjectDetailItemInjectable = getInjectable({
         Component: (props) => <DetailsMetricsContainer metrics={metrics} {...props} />,
         enabled: di.inject(metricsDetailsComponentEnabledInjectable, metricResourceType),
         orderNumber: -1,
-      };
+      } as KubeObjectDetailItem;
     };
   },
 });
diff --git a/packages/core/src/renderer/components/user-management/cluster-role-bindings/details.tsx b/packages/core/src/renderer/components/user-management/cluster-role-bindings/details.tsx
index c3de111b67..4d66c132ec 100644
--- a/packages/core/src/renderer/components/user-management/cluster-role-bindings/details.tsx
+++ b/packages/core/src/renderer/components/user-management/cluster-role-bindings/details.tsx
@@ -53,7 +53,7 @@ class NonInjectedClusterRoleBindingDetails extends React.Component<KubeObjectDet
     const { selectedSubjects } = this;
 
     openConfirmDialog({
-      ok: () => clusterRoleBindingStore.removeSubjects(clusterRoleBinding, selectedSubjects),
+      ok: () => void clusterRoleBindingStore.removeSubjects(clusterRoleBinding, selectedSubjects),
       labelOk: `Remove`,
       message: (
         <p>
diff --git a/packages/core/src/renderer/components/user-management/cluster-roles/details.tsx b/packages/core/src/renderer/components/user-management/cluster-roles/details.tsx
index 8534237871..008c2dbbfe 100644
--- a/packages/core/src/renderer/components/user-management/cluster-roles/details.tsx
+++ b/packages/core/src/renderer/components/user-management/cluster-roles/details.tsx
@@ -10,62 +10,47 @@ import React from "react";
 
 import { DrawerTitle } from "../../drawer";
 import type { KubeObjectDetailsProps } from "../../kube-object-details";
-import { ClusterRole } from "@k8slens/kube-object";
+import type { ClusterRole } from "@k8slens/kube-object";
 
-@observer
-export class ClusterRoleDetails extends React.Component<KubeObjectDetailsProps> {
-  render() {
-    const { object: clusterRole } = this.props;
+export const ClusterRoleDetails = observer((props: KubeObjectDetailsProps) => {
+  const clusterRole = props.object as ClusterRole;
+  const rules = clusterRole.getRules();
 
-    if (!clusterRole) {
-      return null;
-    }
-
-    if (!(clusterRole instanceof ClusterRole)) {
-      return null;
-    }
-
-    const rules = clusterRole.getRules();
-
-    return (
-      <div className="ClusterRoleDetails">
-        <DrawerTitle>Rules</DrawerTitle>
-        {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
-          return (
-            <div className="rule" key={index}>
-              {resources && (
-                <>
-                  <div className="name">Resources</div>
-                  <div className="value">{resources.join(", ")}</div>
-                </>
-              )}
-              {verbs && (
-                <>
-                  <div className="name">Verbs</div>
-                  <div className="value">{verbs.join(", ")}</div>
-                </>
-              )}
-              {apiGroups && (
-                <>
-                  <div className="name">Api Groups</div>
-                  <div className="value">
-                    {apiGroups
-                      .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
-                      .join(", ")
-                    }
-                  </div>
-                </>
-              )}
-              {resourceNames && (
-                <>
-                  <div className="name">Resource Names</div>
-                  <div className="value">{resourceNames.join(", ")}</div>
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}
+  return (
+    <div className="ClusterRoleDetails">
+      <DrawerTitle>Rules</DrawerTitle>
+      {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => (
+        <div className="rule" key={index}>
+          {resources && (
+            <>
+              <div className="name">Resources</div>
+              <div className="value">{resources.join(", ")}</div>
+            </>
+          )}
+          {verbs && (
+            <>
+              <div className="name">Verbs</div>
+              <div className="value">{verbs.join(", ")}</div>
+            </>
+          )}
+          {apiGroups && (
+            <>
+              <div className="name">Api Groups</div>
+              <div className="value">
+                {apiGroups
+                  .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
+                  .join(", ")}
+              </div>
+            </>
+          )}
+          {resourceNames && (
+            <>
+              <div className="name">Resource Names</div>
+              <div className="value">{resourceNames.join(", ")}</div>
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/packages/core/src/renderer/components/user-management/role-bindings/details.tsx b/packages/core/src/renderer/components/user-management/role-bindings/details.tsx
index 3235d9ae6f..5c07473452 100644
--- a/packages/core/src/renderer/components/user-management/role-bindings/details.tsx
+++ b/packages/core/src/renderer/components/user-management/role-bindings/details.tsx
@@ -46,7 +46,7 @@ class NonInjectedRoleBindingDetails extends React.Component<KubeObjectDetailsPro
     const { selectedSubjects } = this;
 
     openConfirmDialog({
-      ok: () => roleBindingStore.removeSubjects(roleBinding, selectedSubjects.toJSON()),
+      ok: () => void roleBindingStore.removeSubjects(roleBinding, selectedSubjects.toJSON()),
       labelOk: `Remove`,
       message: (
         <p>
diff --git a/packages/core/src/renderer/components/user-management/roles/details.tsx b/packages/core/src/renderer/components/user-management/roles/details.tsx
index 121fe29318..a61eb38090 100644
--- a/packages/core/src/renderer/components/user-management/roles/details.tsx
+++ b/packages/core/src/renderer/components/user-management/roles/details.tsx
@@ -8,64 +8,51 @@ import "./details.scss";
 import { observer } from "mobx-react";
 import React from "react";
 
-import { Role } from "@k8slens/kube-object";
+import type { Role } from "@k8slens/kube-object";
 import { DrawerTitle } from "../../drawer";
 import type { KubeObjectDetailsProps } from "../../kube-object-details";
 
-@observer
-export class RoleDetails extends React.Component<KubeObjectDetailsProps> {
-  render() {
-    const { object: role } = this.props;
+export const RoleDetails = observer((props: KubeObjectDetailsProps) => {
+  const role = props.object as Role;
 
-    if (!role) {
-      return null;
-    }
+  const rules = role.getRules();
 
-    if (!(role instanceof Role)) {
-      return null;
-    }
+  return (
+    <div className="RoleDetails">
+      <DrawerTitle>Rules</DrawerTitle>
+      {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => (
+        <div className="rule" key={index}>
+          {resources && (
+            <>
+              <div className="name">Resources</div>
+              <div className="value">{resources.join(", ")}</div>
+            </>
+          )}
+          {verbs && (
+            <>
+              <div className="name">Verbs</div>
+              <div className="value">{verbs.join(", ")}</div>
+            </>
+          )}
+          {apiGroups && (
+            <>
+              <div className="name">Api Groups</div>
+              <div className="value">
+                {apiGroups
+                  .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
+                  .join(", ")}
+              </div>
+            </>
+          )}
+          {resourceNames && (
+            <>
+              <div className="name">Resource Names</div>
+              <div className="value">{resourceNames.join(", ")}</div>
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+});
 
-    const rules = role.getRules();
-
-    return (
-      <div className="RoleDetails">
-        <DrawerTitle>Rules</DrawerTitle>
-        {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
-          return (
-            <div className="rule" key={index}>
-              {resources && (
-                <>
-                  <div className="name">Resources</div>
-                  <div className="value">{resources.join(", ")}</div>
-                </>
-              )}
-              {verbs && (
-                <>
-                  <div className="name">Verbs</div>
-                  <div className="value">{verbs.join(", ")}</div>
-                </>
-              )}
-              {apiGroups && (
-                <>
-                  <div className="name">Api Groups</div>
-                  <div className="value">
-                    {apiGroups
-                      .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
-                      .join(", ")
-                    }
-                  </div>
-                </>
-              )}
-              {resourceNames && (
-                <>
-                  <div className="name">Resource Names</div>
-                  <div className="value">{resourceNames.join(", ")}</div>
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}