chore: Fix type errors with KubeObjectDetails

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

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 const LeaseDetails = observer((props: KubeObjectDetailsProps) => {
-export class LeaseDetails extends React.Component<KubeObjectDetailsProps> {
+  const lease = props.object as Lease;
 
-  render() {
+  return (
-    const { object: lease } = this.props;
+    <div className="LeaseDetails">
+      <DrawerItem name="Holder Identity">
+        {lease.getHolderIdentity()}
+      </DrawerItem>
 
-    if (!(lease instanceof Lease)) {
+      <DrawerItem name="Lease Duration Seconds">
-      return null;
+        {lease.getLeaseDurationSeconds()}
-    }
+      </DrawerItem>
 
-    return (
+      <DrawerItem name="Lease Transitions" hidden={lease.getLeaseTransitions() === undefined}>
-      <div className="LeaseDetails">
+        {lease.getLeaseTransitions()}
-        <DrawerItem name="Holder Identity">
+      </DrawerItem>
-          {lease.getHolderIdentity()}
-        </DrawerItem>
 
-        <DrawerItem name="Lease Duration Seconds">
+      <DrawerItem name="Acquire Time" hidden={lease.getAcquireTime() === ""}>
-          {lease.getLeaseDurationSeconds()}
+        {lease.getAcquireTime()}
-        </DrawerItem>
+      </DrawerItem>
 
-        <DrawerItem name="Lease Transitions" hidden={lease.getLeaseTransitions() === undefined}>
+      <DrawerItem name="Renew Time">
-          {lease.getLeaseTransitions()}
+        {lease.getRenewTime()}
-        </DrawerItem>
+      </DrawerItem>
-
+    </div >
-        <DrawerItem name="Acquire Time" hidden={lease.getAcquireTime() === ""}>
+  );
-          {lease.getAcquireTime()}
+});
-        </DrawerItem>
-
-        <DrawerItem name="Renew Time">
-          {lease.getRenewTime()}
-        </DrawerItem>
-
-      </div >
-    );
-  }
-}

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 const MutatingWebhookDetails = observer((props: KubeObjectDetailsProps) => {
-export class MutatingWebhookDetails extends React.Component<KubeObjectDetailsProps> {
+  const webhookConfig = props.object as MutatingWebhookConfiguration;
-  render() {
-    const { object: webhookConfig } = this.props;
 
-    if (!(webhookConfig instanceof MutatingWebhookConfiguration)) {
+  return (
-      return null;
+    <div className="MutatingWebhookDetails">
-    }
+      <DrawerItem name="API version">
-
+        {webhookConfig.apiVersion}
-    return (
+      </DrawerItem>
-      <div className="MutatingWebhookDetails">
+      <DrawerTitle>Webhooks</DrawerTitle>
-        <DrawerItem name="API version">
+      {webhookConfig.getWebhooks()?.length == 0 && (
-          {webhookConfig.apiVersion}
+        <div style={{ opacity: 0.6 }}>No webhooks set</div>
-        </DrawerItem>
+      )}
-        <DrawerTitle>Webhooks</DrawerTitle>
+      {webhookConfig.getWebhooks()?.map((webhook) => (
-        {webhookConfig.getWebhooks()?.length == 0 && (
+        <WebhookConfig webhook={webhook} key={webhook.name} />
-          <div style={{ opacity: 0.6 }}>No webhooks set</div>
+      ))}
-        )}
+    </div >
-        {webhookConfig.getWebhooks()?.map((webhook) => (
+  );
-          <WebhookConfig webhook={webhook} key={webhook.name} />
+});
-        ))}
-      </div >
-    );
-  }
-}

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;
+  const podDisruptionBudget = props.object as PodDisruptionBudget;
-
+  const selectors = podDisruptionBudget.getSelectors();
-  if (!pdb) {
-    return null;
-  }
-
-  if (!(pdb instanceof PodDisruptionBudget)) {
-    return null;
-  }
-
-  const selectors = pdb.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>
   );
 });

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 const PriorityClassesDetails = observer((props: KubeObjectDetailsProps) => {
-export class PriorityClassesDetails extends React.Component<KubeObjectDetailsProps> {
+  const priorityClass = props.object as PriorityClass;
-  render() {
-    const { object: pc } = this.props;
 
-    if (!pc) {
+  return (
-      return null;
+    <div className="PriorityClassesDetails">
-    }
+      <DrawerItem name="Description">
+        {priorityClass.getDescription()}
+      </DrawerItem>
 
-    if (!(pc instanceof PriorityClass)) {
+      <DrawerItem name="Value">
-      return null;
+        {priorityClass.getValue()}
-    }
+      </DrawerItem>
 
-    return (
+      <DrawerItem name="Global Default">
-      <div className="PriorityClassesDetails">
+        {priorityClass.getGlobalDefault()}
-        <DrawerItem name="Description">
+      </DrawerItem>
-          {pc.getDescription()}
+    </div>
-        </DrawerItem>
+  );
-
+});
-        <DrawerItem name="Value">
-          {pc.getValue()}
-        </DrawerItem>
-
-        <DrawerItem name="Global Default">
-          {pc.getGlobalDefault()}
-        </DrawerItem>
-      </div>
-    );
-  }
-}

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 type RuntimeClassesDetailsProps = KubeObjectDetailsProps<RuntimeClass>;
-export class RuntimeClassesDetails extends React.Component<KubeObjectDetailsProps> {
 
-  render() {
+export const RuntimeClassesDetails = observer((props: KubeObjectDetailsProps) => {
-    const { object: rc } = this.props;
+  const runtimeClass = props.object as RuntimeClass;
+  const nodeSelector = runtimeClass.getNodeSelectors();
 
-    if (!rc) {
+  return (
-      return null;
+    <div className="RuntimeClassesDetails">
-    }
+      <DrawerItem name="Handler">
+        {runtimeClass.getHandler()}
+      </DrawerItem>
 
-    if (!(rc instanceof RuntimeClass)) {
+      <DrawerItem name="Pod Fixed" hidden={runtimeClass.getPodFixed() === ""}>
-      return null;
+        {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 (
+      <RuntimeClassDetailsTolerations runtimeClass={runtimeClass} />
-      <div className="RuntimeClassesDetails">
+    </div>
-        <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>
-    );
-  }
-}

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",
-
+  routeInjectable: runtimeClassesRouteInjectable,
-  instantiate: (di) => ({
+  Component: RuntimeClasses,
-    route: di.inject(runtimeClassesRouteInjectable),
-    Component: RuntimeClasses,
-  }),
-
-  injectionToken: routeSpecificComponentInjectionToken,
 });
 
 export default runtimeClassesRouteComponentInjectable;

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 const ValidatingWebhookDetails = observer((props: KubeObjectDetailsProps) => {
-export class ValidatingWebhookDetails extends React.Component<KubeObjectDetailsProps> {
+  const webhookConfig = props.object as ValidatingWebhookConfiguration;
-  render() {
-    const { object: webhookConfig } = this.props;
 
-    if (!webhookConfig) {
+  return (
-      return null;
+    <div className="ValidatingWebhookDetails">
-    }
+      <DrawerItem name="API version">
-
+        {webhookConfig.apiVersion}
-    if (!(webhookConfig instanceof ValidatingWebhookConfiguration)) {
+      </DrawerItem>
-      return null;
+      <DrawerTitle>Webhooks</DrawerTitle>
-    }
+      {webhookConfig.getWebhooks()?.length == 0 && (
-
+        <div style={{ opacity: 0.6 }}>No webhooks set</div>
-    return (
+      )}
-      <div className="ValidatingWebhookDetails">
+      {webhookConfig.getWebhooks()?.map((webhook) => (
-        <DrawerItem name="API version">
+        <WebhookConfig webhook={webhook} key={webhook.name} />
-          {webhookConfig.apiVersion}
+      ))}
-        </DrawerItem>
+    </div >
-        <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>
-    );
-  }
-}

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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;
     };
   },
 });

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>

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 const ClusterRoleDetails = observer((props: KubeObjectDetailsProps) => {
-export class ClusterRoleDetails extends React.Component<KubeObjectDetailsProps> {
+  const clusterRole = props.object as ClusterRole;
-  render() {
+  const rules = clusterRole.getRules();
-    const { object: clusterRole } = this.props;
 
-    if (!clusterRole) {
+  return (
-      return null;
+    <div className="ClusterRoleDetails">
-    }
+      <DrawerTitle>Rules</DrawerTitle>
-
+      {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => (
-    if (!(clusterRole instanceof ClusterRole)) {
+        <div className="rule" key={index}>
-      return null;
+          {resources && (
-    }
+            <>
-
+              <div className="name">Resources</div>
-    const rules = clusterRole.getRules();
+              <div className="value">{resources.join(", ")}</div>
-
+            </>
-    return (
+          )}
-      <div className="ClusterRoleDetails">
+          {verbs && (
-        <DrawerTitle>Rules</DrawerTitle>
+            <>
-        {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
+              <div className="name">Verbs</div>
-          return (
+              <div className="value">{verbs.join(", ")}</div>
-            <div className="rule" key={index}>
+            </>
-              {resources && (
+          )}
-                <>
+          {apiGroups && (
-                  <div className="name">Resources</div>
+            <>
-                  <div className="value">{resources.join(", ")}</div>
+              <div className="name">Api Groups</div>
-                </>
+              <div className="value">
-              )}
+                {apiGroups
-              {verbs && (
+                  .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
-                <>
+                  .join(", ")}
-                  <div className="name">Verbs</div>
+              </div>
-                  <div className="value">{verbs.join(", ")}</div>
+            </>
-                </>
+          )}
-              )}
+          {resourceNames && (
-              {apiGroups && (
+            <>
-                <>
+              <div className="name">Resource Names</div>
-                  <div className="name">Api Groups</div>
+              <div className="value">{resourceNames.join(", ")}</div>
-                  <div className="value">
+            </>
-                    {apiGroups
+          )}
-                      .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
+        </div>
-                      .join(", ")
+      ))}
-                    }
+    </div>
-                  </div>
+  );
-                </>
+});
-              )}
-              {resourceNames && (
-                <>
-                  <div className="name">Resource Names</div>
-                  <div className="value">{resourceNames.join(", ")}</div>
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}

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>

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 const RoleDetails = observer((props: KubeObjectDetailsProps) => {
-export class RoleDetails extends React.Component<KubeObjectDetailsProps> {
+  const role = props.object as Role;
-  render() {
-    const { object: role } = this.props;
 
-    if (!role) {
+  const rules = role.getRules();
-      return null;
-    }
 
-    if (!(role instanceof Role)) {
+  return (
-      return null;
+    <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>
-    );
-  }
-}