Enforce some naming conventions (#4813)

.eslintrc.js

@@ -146,6 +146,29 @@ module.exports = {
           "named": "never",
           "asyncArrow": "always",
         }],
+        "@typescript-eslint/naming-convention": ["error",
+          {
+            "selector": "interface",
+            "format": ["PascalCase"],
+            "leadingUnderscore": "forbid",
+            "trailingUnderscore": "forbid",
+            "custom": {
+              "regex": "^Props$",
+              "match": false,
+            },
+          },
+          {
+            "selector": "typeAlias",
+            "format": ["PascalCase"],
+            "leadingUnderscore": "forbid",
+            "trailingUnderscore": "forbid",
+            "custom": {
+              "regex": "^(Props|State)$",
+              "match": false,
+            },
+          },
+        ],
+        "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
         "unused-imports/no-unused-imports-ts": process.env.PROD === "true" ? "error" : "warn",
         "unused-imports/no-unused-vars-ts": [
           "warn", {

docs/extensions/guides/renderer-extension.md

@@ -724,11 +724,11 @@ const {
 
 type Pod = Renderer.K8sApi.Pod;
 
-interface Props {
+interface PodsDetailsListProps {
   pods?: Pod[];
 }
 
-export class PodsDetailsList extends React.Component<Props> {
+export class PodsDetailsList extends React.Component<PodsDetailsListProps> {
   getTableRow = (pod: Pod) => {
     return (
       <TableRow key={index} nowrap>

docs/extensions/guides/resource-stack.md

@@ -109,13 +109,13 @@ To allow the end-user to control the life cycle of this cluster feature the foll
    }
  } = Renderer;
 
- interface Props {
+ interface ExampleClusterFeatureSettingsProps {
    cluster: Common.Catalog.KubernetesCluster;
  }
 
  @observer
- export class ExampleClusterFeatureSettings extends React.Component<Props> {
+ export class ExampleClusterFeatureSettings extends React.Component<ExampleClusterFeatureSettingsProps> {
-  constructor(props: Props) {
+  constructor(props: ExampleClusterFeatureSettingsProps) {
     super(props);
     makeObservable(this);
   }

extensions/metrics-cluster-feature/src/metrics-settings.tsx

@@ -17,13 +17,13 @@ const {
   },
 } = Renderer;
 
-interface Props {
+export interface MetricsSettingsProps {
   cluster: Common.Catalog.KubernetesCluster;
 }
 
 @observer
-export class MetricsSettings extends React.Component<Props> {
+export class MetricsSettings extends React.Component<MetricsSettingsProps> {
-  constructor(props: Props) {
+  constructor(props: MetricsSettingsProps) {
     super(props);
     makeObservable(this);
   }

src/common/__tests__/kube-helpers.test.ts

@@ -43,7 +43,7 @@ users:
       command: foo
 `;
 
-interface kubeconfig {
+interface Kubeconfig {
   apiVersion: string;
   clusters: [{
     name: string;
@@ -66,7 +66,7 @@ interface kubeconfig {
   preferences: {};
 }
 
-let mockKubeConfig: kubeconfig;
+let mockKubeConfig: Kubeconfig;
 
 describe("kube helpers", () => {
   describe("validateKubeconfig", () => {

src/common/app-event-bus/event-bus.ts

@@ -5,10 +5,10 @@
 
 import { EventEmitter } from "../event-emitter";
 
-export type AppEvent = {
+export interface AppEvent {
   name: string;
   action: string;
   params?: object;
-};
+}
 
 export const appEventBus = new EventEmitter<[AppEvent]>();

src/common/catalog-entities/web-link.ts

@@ -14,9 +14,9 @@ export interface WebLinkStatus extends CatalogEntityStatus {
   phase: WebLinkStatusPhase;
 }
 
-export type WebLinkSpec = {
+export interface WebLinkSpec {
   url: string;
-};
+}
 
 export class WebLink extends CatalogEntity<CatalogEntityMetadata, WebLinkStatus, WebLinkSpec> {
   public static readonly apiVersion = "entity.k8slens.dev/v1alpha1";

src/common/k8s-api/endpoints/crd.api.ts

@@ -9,12 +9,12 @@ import { crdResourcesURL } from "../../routes";
 import { isClusterPageContext } from "../../utils/cluster-id-url-parsing";
 import type { KubeJsonApiData } from "../kube-json-api";
 
-type AdditionalPrinterColumnsCommon = {
+interface AdditionalPrinterColumnsCommon {
   name: string;
   type: "integer" | "number" | "string" | "boolean" | "date";
   priority: number;
   description: string;
-};
+}
 
 export type AdditionalPrinterColumnsV1 = AdditionalPrinterColumnsCommon & {
   jsonPath: string;

src/common/k8s-api/kube-api.ts

@@ -216,7 +216,7 @@ export function ensureObjectSelfLink(api: KubeApi<KubeObject>, object: KubeJsonA
 
 export type KubeApiWatchCallback = (data: IKubeWatchEvent<KubeJsonApiData>, error: any) => void;
 
-export type KubeApiWatchOptions = {
+export interface KubeApiWatchOptions {
   namespace: string;
   callback?: KubeApiWatchCallback;
   abortController?: AbortController;
@@ -225,7 +225,7 @@ export type KubeApiWatchOptions = {
 
   // timeout in seconds
   timeout?: number;
-};
+}
 
 export type KubeApiPatchType = "merge" | "json" | "strategic";
 

src/common/utils/index.ts

@@ -40,9 +40,10 @@ export * from "./splitArray";
 export * from "./tar";
 export * from "./toJS";
 export * from "./type-narrowing";
-export * from "./types";
 export * from "./wait-for-path";
 
+export type { Tuple } from "./tuple";
+
 import * as iter from "./iter";
 import * as array from "./array";
 import * as tuple from "./tuple";

src/common/utils/singleton.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-type StaticThis<T, R extends any[]> = { new(...args: R): T };
+interface StaticThis<T, R extends any[]> { new(...args: R): T }
 
 export class Singleton {
   private static instances = new WeakMap<object, Singleton>();

src/common/utils/tuple.ts

@@ -8,8 +8,14 @@ import * as array from "../utils/array";
 /**
  * A strict N-tuple of type T
  */
-export type Tuple<T, N extends number> = N extends N ? number extends N ? T[] : _TupleOf<T, N, []> : never;
+export type Tuple<T, N extends number> = N extends N
-type _TupleOf<T, N extends number, R extends unknown[]> = R["length"] extends N ? R : _TupleOf<T, N, [T, ...R]>;
+  ? number extends N
+    ? T[]
+    : TupleOfImpl<T, N, []>
+  : never;
+type TupleOfImpl<T, N extends number, R extends unknown[]> = R["length"] extends N
+  ? R
+  : TupleOfImpl<T, N, [T, ...R]>;
 
 /**
  * Iterates over `sources` yielding full tuples until one of the tuple arrays

src/common/utils/types.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-/**
- * An N length tuple of T
- */
-export type Tuple<T, N extends number> = N extends N ? number extends N ? T[] : _TupleOf<T, N, []> : never;
-type _TupleOf<T, N extends number, R extends unknown[]> = R["length"] extends N ? R : _TupleOf<T, N, [T, ...R]>;

src/extensions/renderer-api/kube-object-status.ts

@@ -3,11 +3,11 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export type KubeObjectStatus = {
+export interface KubeObjectStatus {
   level: KubeObjectStatusLevel;
   text: string;
   timestamp?: string;
-};
+}
 
 export enum KubeObjectStatusLevel {
   INFO = 1,

src/main/cluster-detectors/base-cluster-detector.ts

@@ -7,10 +7,10 @@ import type { RequestPromiseOptions } from "request-promise-native";
 import type { Cluster } from "../../common/cluster/cluster";
 import { k8sRequest } from "../k8s-request";
 
-export type ClusterDetectionResult = {
+export interface ClusterDetectionResult {
   value: string | number | boolean;
   accuracy: number;
-};
+}
 
 export class BaseClusterDetector {
   key: string;

src/main/lens-binary.ts

@@ -11,13 +11,13 @@ import * as tar from "tar";
 import { isWindows } from "../common/vars";
 import type winston from "winston";
 
-export type LensBinaryOpts = {
+export interface LensBinaryOpts {
   version: string;
   baseDir: string;
   originalBinaryName: string;
   newBinaryName?: string;
   requestOpts?: request.Options;
-};
+}
 
 export class LensBinary {
 

src/main/prometheus/provider-registry.ts

@@ -7,12 +7,12 @@ import type { CoreV1Api } from "@kubernetes/client-node";
 import { inspect } from "util";
 import { Singleton } from "../../common/utils";
 
-export type PrometheusService = {
+export interface PrometheusService {
   id: string;
   namespace: string;
   service: string;
   port: number;
-};
+}
 
 export abstract class PrometheusProvider {
   abstract readonly id: string;

src/renderer/components/+catalog/catalog-add-button.tsx

@@ -15,9 +15,9 @@ import { EventEmitter } from "events";
 import { navigate } from "../../navigation";
 import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
 
-export type CatalogAddButtonProps = {
+export interface CatalogAddButtonProps {
   category: CatalogCategory;
-};
+}
 
 type CategoryId = string;
 

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -16,14 +16,14 @@ import { cssNames } from "../../utils";
 import { Avatar } from "../avatar";
 import { getLabelBadges } from "./helpers";
 
-interface Props<T extends CatalogEntity> {
+export interface CatalogEntityDetailsProps<T extends CatalogEntity> {
   entity: T;
   hideDetails(): void;
   onRun: () => void;
 }
 
 @observer
-export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Props<T>> {
+export class CatalogEntityDetails<T extends CatalogEntity> extends Component<CatalogEntityDetailsProps<T>> {
   categoryIcon(category: CatalogCategory) {
     if (Icon.isSvg(category.metadata.icon)) {
       return <Icon svg={category.metadata.icon} smallest />;

src/renderer/components/+catalog/catalog-menu.tsx

@@ -15,10 +15,10 @@ import { cssNames } from "../../utils";
 import type { CatalogCategory } from "../../api/catalog-entity";
 import { observer } from "mobx-react";
 
-type Props = {
+export interface CatalogMenuProps {
   activeItem: string;
   onItemClick: (id: string) => void;
-};
+}
 
 function getCategories() {
   return catalogCategoryRegistry.filteredItems;
@@ -42,7 +42,7 @@ function Item(props: TreeItemProps) {
   );
 }
 
-export const CatalogMenu = observer((props: Props) => {
+export const CatalogMenu = observer((props: CatalogMenuProps) => {
   return (
     // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
     <StylesProvider injectFirst>

src/renderer/components/+catalog/catalog.tsx

@@ -37,7 +37,7 @@ import type { RegisteredCustomCategoryViewDecl } from "./custom-views.injectable
 import customCategoryViewsInjectable from "./custom-views.injectable";
 import type { CustomCategoryViewComponents } from "./custom-views";
 
-interface Props extends RouteComponentProps<CatalogViewRouteParam> {}
+export interface CatalogProps extends RouteComponentProps<CatalogViewRouteParam> {}
 
 interface Dependencies {
   catalogPreviousActiveTabStorage: { set: (value: string ) => void };
@@ -47,11 +47,11 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedCatalog extends React.Component<Props & Dependencies> {
+class NonInjectedCatalog extends React.Component<CatalogProps & Dependencies> {
   @observable private contextMenu: CatalogEntityContextMenuContext;
   @observable activeTab?: string;
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: CatalogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -305,7 +305,7 @@ class NonInjectedCatalog extends React.Component<Props & Dependencies> {
   }
 }
 
-export const Catalog = withInjectables<Dependencies, Props>( NonInjectedCatalog, {
+export const Catalog = withInjectables<Dependencies, CatalogProps>( NonInjectedCatalog, {
   getProps: (di, props) => ({
     catalogEntityStore: di.inject(catalogEntityStoreInjectable),
     catalogPreviousActiveTabStorage: di.inject(catalogPreviousActiveTabStorageInjectable),

src/renderer/components/+cluster/cluster-issues.tsx

@@ -20,7 +20,7 @@ import { ThemeStore } from "../../theme.store";
 import { kubeSelectedUrlParam, toggleDetails } from "../kube-detail-params";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 
-interface Props {
+export interface ClusterIssuesProps {
   className?: string;
 }
 
@@ -39,14 +39,14 @@ enum sortBy {
 }
 
 @observer
-export class ClusterIssues extends React.Component<Props> {
+export class ClusterIssues extends React.Component<ClusterIssuesProps> {
   private sortCallbacks = {
     [sortBy.type]: (warning: IWarning) => warning.kind,
     [sortBy.object]: (warning: IWarning) => warning.getName(),
     [sortBy.age]: (warning: IWarning) => warning.timeDiffFromNow,
   };
 
-  constructor(props: Props) {
+  constructor(props: ClusterIssuesProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+cluster/cluster-no-metrics.tsx

@@ -7,11 +7,11 @@ import React from "react";
 import { Icon } from "../icon";
 import { cssNames } from "../../utils";
 
-interface Props {
+export interface ClusterNoMetricsProps {
   className: string;
 }
 
-export function ClusterNoMetrics({ className }: Props) {
+export function ClusterNoMetrics({ className }: ClusterNoMetricsProps) {
   return (
     <div className={cssNames("ClusterNoMetrics flex column box grow justify-center align-center", className)}>
       <Icon material="info"/>

src/renderer/components/+config-autoscalers/hpa.tsx

@@ -27,11 +27,11 @@ enum columnId {
   status = "status",
 }
 
-interface Props extends RouteComponentProps<HpaRouteParams> {
+export interface HorizontalPodAutoscalersProps extends RouteComponentProps<HpaRouteParams> {
 }
 
 @observer
-export class HorizontalPodAutoscalers extends React.Component<Props> {
+export class HorizontalPodAutoscalers extends React.Component<HorizontalPodAutoscalersProps> {
   getTargets(hpa: HorizontalPodAutoscaler) {
     const metrics = hpa.getMetrics();
 

src/renderer/components/+config-limit-ranges/limit-range-details.tsx

@@ -14,7 +14,7 @@ import { DrawerItem } from "../drawer/drawer-item";
 import { Badge } from "../badge";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<LimitRange> {
+export interface LimitRangeDetailsProps extends KubeObjectDetailsProps<LimitRange> {
 }
 
 function renderLimit(limit: LimitRangeItem, part: LimitPart, resource: Resource) {
@@ -52,7 +52,7 @@ function renderLimitDetails(limits: LimitRangeItem[], resources: Resource[]) {
 }
 
 @observer
-export class LimitRangeDetails extends React.Component<Props> {
+export class LimitRangeDetails extends React.Component<LimitRangeDetailsProps> {
   render() {
     const { object: limitRange } = this.props;
 

src/renderer/components/+config-limit-ranges/limit-ranges.tsx

@@ -19,11 +19,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<LimitRangeRouteParams> {
+export interface LimitRangesProps extends RouteComponentProps<LimitRangeRouteParams> {
 }
 
 @observer
-export class LimitRanges extends React.Component<Props> {
+export class LimitRanges extends React.Component<LimitRangesProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+config-maps/config-map-details.tsx

@@ -18,15 +18,15 @@ import { ConfigMap } from "../../../common/k8s-api/endpoints";
 import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<ConfigMap> {
+export interface ConfigMapDetailsProps extends KubeObjectDetailsProps<ConfigMap> {
 }
 
 @observer
-export class ConfigMapDetails extends React.Component<Props> {
+export class ConfigMapDetails extends React.Component<ConfigMapDetailsProps> {
   @observable isSaving = false;
   @observable data = observable.map<string, string>();
 
-  constructor(props: Props) {
+  constructor(props: ConfigMapDetailsProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+config-maps/config-maps.tsx

@@ -20,11 +20,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<ConfigMapsRouteParams> {
+export interface ConfigMapsProps extends RouteComponentProps<ConfigMapsRouteParams> {
 }
 
 @observer
-export class ConfigMaps extends React.Component<Props> {
+export class ConfigMaps extends React.Component<ConfigMapsProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets-details.tsx

@@ -14,11 +14,11 @@ import { PodDisruptionBudget } from "../../../common/k8s-api/endpoints";
 import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<PodDisruptionBudget> {
+export interface PodDisruptionBudgetDetailsProps extends KubeObjectDetailsProps<PodDisruptionBudget> {
 }
 
 @observer
-export class PodDisruptionBudgetDetails extends React.Component<Props> {
+export class PodDisruptionBudgetDetails extends React.Component<PodDisruptionBudgetDetailsProps> {
 
   render() {
     const { object: pdb } = this.props;

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx

@@ -23,11 +23,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends KubeObjectDetailsProps<PodDisruptionBudget> {
+export interface PodDisruptionBudgetsProps extends KubeObjectDetailsProps<PodDisruptionBudget> {
 }
 
 @observer
-export class PodDisruptionBudgets extends React.Component<Props> {
+export class PodDisruptionBudgets extends React.Component<PodDisruptionBudgetsProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx

@@ -20,7 +20,7 @@ import { Notifications } from "../notifications";
 import { NamespaceSelect } from "../+namespaces/namespace-select";
 import { SubTitle } from "../layout/sub-title";
 
-interface Props extends DialogProps {
+export interface AddQuotaDialogProps extends DialogProps {
 }
 
 const dialogState = observable.object({
@@ -28,7 +28,7 @@ const dialogState = observable.object({
 });
 
 @observer
-export class AddQuotaDialog extends React.Component<Props> {
+export class AddQuotaDialog extends React.Component<AddQuotaDialogProps> {
   static defaultQuotas: IResourceQuotaValues = {
     "limits.cpu": "",
     "limits.memory": "",
@@ -58,7 +58,7 @@ export class AddQuotaDialog extends React.Component<Props> {
   @observable namespace = this.defaultNamespace;
   @observable quotas = AddQuotaDialog.defaultQuotas;
 
-  constructor(props: Props) {
+  constructor(props: AddQuotaDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+config-resource-quotas/resource-quota-details.tsx

@@ -16,7 +16,7 @@ import { Table, TableCell, TableHead, TableRow } from "../table";
 import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<ResourceQuota> {
+export interface ResourceQuotaDetailsProps extends KubeObjectDetailsProps<ResourceQuota> {
 }
 
 function transformUnit(name: string, value: string): number {
@@ -58,7 +58,7 @@ function renderQuotas(quota: ResourceQuota): JSX.Element[] {
 }
 
 @observer
-export class ResourceQuotaDetails extends React.Component<Props> {
+export class ResourceQuotaDetails extends React.Component<ResourceQuotaDetailsProps> {
   render() {
     const { object: quota } = this.props;
 

src/renderer/components/+config-resource-quotas/resource-quotas.tsx

@@ -20,11 +20,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<ResourceQuotaRouteParams> {
+export interface ResourceQuotasProps extends RouteComponentProps<ResourceQuotaRouteParams> {
 }
 
 @observer
-export class ResourceQuotas extends React.Component<Props> {
+export class ResourceQuotas extends React.Component<ResourceQuotasProps> {
   render() {
     return (
       <>

src/renderer/components/+config-secrets/add-secret-dialog.tsx

@@ -23,7 +23,7 @@ import { Notifications } from "../notifications";
 import upperFirst from "lodash/upperFirst";
 import { showDetails } from "../kube-detail-params";
 
-interface Props extends Partial<DialogProps> {
+export interface AddSecretDialogProps extends Partial<DialogProps> {
 }
 
 interface ISecretTemplateField {
@@ -46,8 +46,8 @@ const dialogState = observable.object({
 });
 
 @observer
-export class AddSecretDialog extends React.Component<Props> {
+export class AddSecretDialog extends React.Component<AddSecretDialogProps> {
-  constructor(props: Props) {
+  constructor(props: AddSecretDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+config-secrets/secret-details.tsx

@@ -20,16 +20,16 @@ import { Secret } from "../../../common/k8s-api/endpoints";
 import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<Secret> {
+export interface SecretDetailsProps extends KubeObjectDetailsProps<Secret> {
 }
 
 @observer
-export class SecretDetails extends React.Component<Props> {
+export class SecretDetails extends React.Component<SecretDetailsProps> {
   @observable isSaving = false;
   @observable data: { [name: string]: string } = {};
   @observable revealSecret = observable.set<string>();
 
-  constructor(props: Props) {
+  constructor(props: SecretDetailsProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+config-secrets/secrets.tsx

@@ -24,11 +24,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<SecretsRouteParams> {
+export interface SecretsProps extends RouteComponentProps<SecretsRouteParams> {
 }
 
 @observer
-export class Secrets extends React.Component<Props> {
+export class Secrets extends React.Component<SecretsProps> {
   render() {
     return (
       <>

src/renderer/components/+custom-resources/crd-details.tsx

@@ -18,11 +18,11 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { MonacoEditor } from "../monaco-editor";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
+export interface CRDDetailsProps extends KubeObjectDetailsProps<CustomResourceDefinition> {
 }
 
 @observer
-export class CRDDetails extends React.Component<Props> {
+export class CRDDetails extends React.Component<CRDDetailsProps> {
   render() {
     const { object: crd } = this.props;
 

src/renderer/components/+custom-resources/crd-list.tsx

@@ -32,7 +32,7 @@ enum columnId {
 }
 
 @observer
-export class CrdList extends React.Component {
+export class CustomResourceDefinitions extends React.Component {
   constructor(props: {}) {
     super(props);
     makeObservable(this);

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -19,7 +19,7 @@ import { parseJsonPath } from "../../utils/jsonPath";
 import { KubeObject, KubeObjectMetadata, KubeObjectStatus } from "../../../common/k8s-api/kube-object";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<KubeObject> {
+export interface CustomResourceDetailsProps extends KubeObjectDetailsProps<KubeObject> {
   crd: CustomResourceDefinition;
 }
 
@@ -44,7 +44,7 @@ function convertSpecValue(value: any): any {
 }
 
 @observer
-export class CrdResourceDetails extends React.Component<Props> {
+export class CustomResourceDetails extends React.Component<CustomResourceDetailsProps> {
   renderAdditionalColumns(resource: KubeObject, columns: AdditionalPrinterColumnsV1[]) {
     return columns.map(({ name, jsonPath: jp }) => (
       <DrawerItem key={name} name={name} renderBoolean>

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -18,7 +18,7 @@ import { apiManager } from "../../../common/k8s-api/api-manager";
 import { parseJsonPath } from "../../utils/jsonPath";
 import type { CRDRouteParams } from "../../../common/routes";
 
-interface Props extends RouteComponentProps<CRDRouteParams> {
+export interface CustomResourceDefinitionResourcesProps extends RouteComponentProps<CRDRouteParams> {
 }
 
 enum columnId {
@@ -28,8 +28,8 @@ enum columnId {
 }
 
 @observer
-export class CrdResources extends React.Component<Props> {
+export class CustomResourceDefinitionResources extends React.Component<CustomResourceDefinitionResourcesProps> {
-  constructor(props: Props) {
+  constructor(props: CustomResourceDefinitionResourcesProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+custom-resources/route.tsx

@@ -7,13 +7,14 @@ import React from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { TabLayout } from "../layout/tab-layout";
 import { crdDefinitionsRoute, crdResourcesRoute, crdURL } from "../../../common/routes";
-import { CrdList, CrdResources } from ".";
+import { CustomResourceDefinitions } from "./crd-list";
+import { CustomResourceDefinitionResources } from "./crd-resources";
 
 export const CustomResourcesRoute = () => (
   <TabLayout>
     <Switch>
-      <Route component={CrdList} {...crdDefinitionsRoute} exact/>
+      <Route component={CustomResourceDefinitions} {...crdDefinitionsRoute} exact/>
-      <Route component={CrdResources} {...crdResourcesRoute}/>
+      <Route component={CustomResourceDefinitionResources} {...crdResourcesRoute}/>
       <Redirect to={crdURL()}/>
     </Switch>
   </TabLayout>

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

@@ -20,14 +20,14 @@ import { SettingLayout } from "../layout/setting-layout";
 import logger from "../../../common/logger";
 import { Avatar } from "../avatar";
 
-interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
+export interface EntitySettingsProps extends RouteComponentProps<EntitySettingsRouteParams> {
 }
 
 @observer
-export class EntitySettings extends React.Component<Props> {
+export class EntitySettings extends React.Component<EntitySettingsProps> {
   @observable activeTab: string;
 
-  constructor(props: Props) {
+  constructor(props: EntitySettingsProps) {
     super(props);
     makeObservable(this);
 

src/renderer/components/+events/event-details.tsx

@@ -19,11 +19,11 @@ import { getDetailsUrl } from "../kube-detail-params";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<KubeEvent> {
+export interface EventDetailsProps extends KubeObjectDetailsProps<KubeEvent> {
 }
 
 @observer
-export class EventDetails extends React.Component<Props> {
+export class EventDetails extends React.Component<EventDetailsProps> {
   render() {
     const { object: event } = this.props;
 

src/renderer/components/+events/events.tsx

@@ -34,18 +34,18 @@ enum columnId {
   lastSeen = "last-seen",
 }
 
-interface Props extends Partial<KubeObjectListLayoutProps<KubeEvent>> {
+export interface EventsProps extends Partial<KubeObjectListLayoutProps<KubeEvent>> {
   className?: IClassName;
   compact?: boolean;
   compactLimit?: number;
 }
 
-const defaultProps: Partial<Props> = {
+const defaultProps: Partial<EventsProps> = {
   compactLimit: 10,
 };
 
 @observer
-export class Events extends React.Component<Props> {
+export class Events extends React.Component<EventsProps> {
   static defaultProps = defaultProps as object;
   now = Date.now();
 
@@ -63,7 +63,7 @@ export class Events extends React.Component<Props> {
     [columnId.lastSeen]: event => this.now - new Date(event.lastTimestamp).getTime(),
   };
 
-  constructor(props: Props) {
+  constructor(props: EventsProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+events/kube-event-icon.tsx

@@ -12,17 +12,18 @@ import { eventStore } from "./event.store";
 import { cssNames } from "../../utils";
 import type { KubeEvent } from "../../../common/k8s-api/endpoints/events.api";
 
-interface Props {
+export interface KubeEventIconProps {
   object: KubeObject;
   showWarningsOnly?: boolean;
   filterEvents?: (events: KubeEvent[]) => KubeEvent[];
 }
 
-const defaultProps: Partial<Props> = {
+
+const defaultProps: Partial<KubeEventIconProps> = {
   showWarningsOnly: true,
 };
 
-export class KubeEventIcon extends React.Component<Props> {
+export class KubeEventIcon extends React.Component<KubeEventIconProps> {
   static defaultProps = defaultProps as object;
 
   render() {

src/renderer/components/+extensions/install.tsx

@@ -17,7 +17,7 @@ import extensionInstallationStateStoreInjectable
   from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 
-interface Props {
+export interface InstallProps {
   installPath: string;
   supportedFormats: string[];
   onChange: (path: string) => void;
@@ -42,7 +42,7 @@ const installInputValidator: InputValidator = {
   ),
 };
 
-const NonInjectedInstall: React.FC<Dependencies & Props> = ({
+const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
   installPath,
   supportedFormats,
   onChange,
@@ -99,7 +99,7 @@ const NonInjectedInstall: React.FC<Dependencies & Props> = ({
   </section>
 );
 
-export const Install = withInjectables<Dependencies, Props>(
+export const Install = withInjectables<Dependencies, InstallProps>(
   observer(NonInjectedInstall),
   {
     getProps: (di, props) => ({

src/renderer/components/+extensions/installed-extensions.tsx

@@ -25,7 +25,7 @@ import extensionInstallationStateStoreInjectable
   from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
 import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
 
-interface Props {
+export interface InstalledExtensionsProps {
   extensions: InstalledExtension[];
   enable: (id: LensExtensionId) => void;
   disable: (id: LensExtensionId) => void;
@@ -45,7 +45,7 @@ function getStatus(extension: InstalledExtension) {
   return extension.isEnabled ? "Enabled" : "Disabled";
 }
 
-const NonInjectedInstalledExtensions : React.FC<Dependencies & Props> = (({ extensionDiscovery, extensionInstallationStateStore, extensions, uninstall, enable, disable }) => {
+const NonInjectedInstalledExtensions = observer(({ extensionDiscovery, extensionInstallationStateStore, extensions, uninstall, enable, disable }: Dependencies & InstalledExtensionsProps) => {
   const filters = [
     (extension: InstalledExtension) => extension.manifest.name,
     (extension: InstalledExtension) => getStatus(extension),
@@ -175,15 +175,10 @@ const NonInjectedInstalledExtensions : React.FC<Dependencies & Props> = (({ exte
   );
 });
 
-export const InstalledExtensions = withInjectables<Dependencies, Props>(
+export const InstalledExtensions = withInjectables<Dependencies, InstalledExtensionsProps>(NonInjectedInstalledExtensions, {
-  observer(NonInjectedInstalledExtensions),
-
-  {
   getProps: (di, props) => ({
     extensionDiscovery: di.inject(extensionDiscoveryInjectable),
     extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
-
     ...props,
   }),
-  },
+});
-);

src/renderer/components/+extensions/notice.tsx

@@ -7,11 +7,11 @@ import styles from "./notice.module.scss";
 import React, { DOMAttributes } from "react";
 import { cssNames } from "../../utils";
 
-interface Props extends DOMAttributes<any> {
+export interface NoticeProps extends DOMAttributes<any> {
   className?: string;
 }
 
-export function Notice(props: Props) {
+export function Notice(props: NoticeProps) {
   return (
     <div className={cssNames(styles.notice, props.className)}>
       {props.children}

src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -21,7 +21,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import createInstallChartTabInjectable from "../dock/install-chart/create-install-chart-tab.injectable";
 import { Notifications } from "../notifications";
 
-interface Props {
+export interface HelmChartDetailsProps {
   chart: HelmChart;
   hideDetails(): void;
 }
@@ -37,14 +37,14 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedHelmChartDetails extends Component<Props & Dependencies> {
+class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Dependencies> {
   @observable chartVersions: HelmChart[];
   @observable selectedChart?: HelmChart;
   @observable readme?: string;
 
   private abortController?: AbortController;
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: HelmChartDetailsProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -197,7 +197,7 @@ class NonInjectedHelmChartDetails extends Component<Props & Dependencies> {
   }
 }
 
-export const HelmChartDetails = withInjectables<Dependencies, Props>(
+export const HelmChartDetails = withInjectables<Dependencies, HelmChartDetailsProps>(
   NonInjectedHelmChartDetails,
 
   {

src/renderer/components/+helm-charts/helm-charts.tsx

@@ -24,11 +24,11 @@ enum columnId {
   repo = "repo",
 }
 
-interface Props extends RouteComponentProps<HelmChartsRouteParams> {
+export interface HelmChartsProps extends RouteComponentProps<HelmChartsRouteParams> {
 }
 
 @observer
-export class HelmCharts extends Component<Props> {
+export class HelmCharts extends Component<HelmChartsProps> {
   componentDidMount() {
     helmChartStore.loadAll();
   }

src/renderer/components/+helm-releases/release-details/release-details.tsx

@@ -34,7 +34,7 @@ import releaseDetailsInjectable from "./release-details.injectable";
 import releaseValuesInjectable from "./release-values.injectable";
 import userSuppliedValuesAreShownInjectable from "./user-supplied-values-are-shown.injectable";
 
-interface Props {
+export interface ReleaseDetailsProps {
   hideDetails(): void;
 }
 
@@ -48,12 +48,12 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
+class NonInjectedReleaseDetails extends Component<ReleaseDetailsProps & Dependencies> {
   @observable saving = false;
 
   private nonSavedValues: string;
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: ReleaseDetailsProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -261,7 +261,7 @@ class NonInjectedReleaseDetails extends Component<Props & Dependencies> {
   }
 }
 
-export const ReleaseDetails = withInjectables<Dependencies, Props>(
+export const ReleaseDetails = withInjectables<Dependencies, ReleaseDetailsProps>(
   NonInjectedReleaseDetails,
 
   {

src/renderer/components/+helm-releases/release-menu.tsx

@@ -14,7 +14,7 @@ import createUpgradeChartTabInjectable from "../dock/upgrade-chart/create-upgrad
 import releaseRollbackDialogModelInjectable from "./release-rollback-dialog-model/release-rollback-dialog-model.injectable";
 import deleteReleaseInjectable from "./delete-release/delete-release.injectable";
 
-interface Props extends MenuActionsProps {
+export interface HelmReleaseMenuProps extends MenuActionsProps {
   release: HelmRelease;
   hideDetails?(): void;
 }
@@ -25,7 +25,7 @@ interface Dependencies {
   openRollbackDialog: (release: HelmRelease) => void;
 }
 
-class NonInjectedHelmReleaseMenu extends React.Component<Props & Dependencies> {
+class NonInjectedHelmReleaseMenu extends React.Component<HelmReleaseMenuProps & Dependencies> {
   remove = () => {
     return this.props.deleteRelease(this.props.release);
   };
@@ -79,7 +79,7 @@ class NonInjectedHelmReleaseMenu extends React.Component<Props & Dependencies> {
   }
 }
 
-export const HelmReleaseMenu = withInjectables<Dependencies, Props>(
+export const HelmReleaseMenu = withInjectables<Dependencies, HelmReleaseMenuProps>(
   NonInjectedHelmReleaseMenu,
 
   {

src/renderer/components/+helm-releases/release-rollback-dialog.tsx

@@ -20,7 +20,7 @@ import releaseRollbackDialogModelInjectable
 import type { ReleaseRollbackDialogModel } from "./release-rollback-dialog-model/release-rollback-dialog-model";
 import rollbackReleaseInjectable from "./rollback-release/rollback-release.injectable";
 
-interface Props extends DialogProps {
+export interface ReleaseRollbackDialogProps extends DialogProps {
 }
 
 interface Dependencies {
@@ -29,12 +29,12 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedReleaseRollbackDialog extends React.Component<Props & Dependencies> {
+class NonInjectedReleaseRollbackDialog extends React.Component<ReleaseRollbackDialogProps & Dependencies> {
   @observable isLoading = false;
   @observable revision: IReleaseRevision;
   @observable revisions = observable.array<IReleaseRevision>();
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: ReleaseRollbackDialogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -114,7 +114,7 @@ class NonInjectedReleaseRollbackDialog extends React.Component<Props & Dependenc
   }
 }
 
-export const ReleaseRollbackDialog = withInjectables<Dependencies, Props>(
+export const ReleaseRollbackDialog = withInjectables<Dependencies, ReleaseRollbackDialogProps>(
   NonInjectedReleaseRollbackDialog,
 
   {

src/renderer/components/+helm-releases/releases.tsx

@@ -37,7 +37,7 @@ enum columnId {
   updated = "update",
 }
 
-interface Props extends RouteComponentProps<ReleaseRouteParams> {
+export interface HelmReleasesProps extends RouteComponentProps<ReleaseRouteParams> {
 }
 
 interface Dependencies {
@@ -46,7 +46,7 @@ interface Dependencies {
   selectNamespace: (namespace: string) => void;
 }
 
-class NonInjectedHelmReleases extends Component<Dependencies & Props> {
+class NonInjectedHelmReleases extends Component<Dependencies & HelmReleasesProps> {
   componentDidMount() {
     const { match: { params: { namespace }}} = this.props;
 
@@ -223,7 +223,7 @@ class NonInjectedHelmReleases extends Component<Dependencies & Props> {
   }
 }
 
-export const HelmReleases = withInjectables<Dependencies, Props>(
+export const HelmReleases = withInjectables<Dependencies, HelmReleasesProps>(
   NonInjectedHelmReleases,
 
   {

src/renderer/components/+namespaces/add-namespace-dialog.tsx

@@ -21,7 +21,7 @@ import addNamespaceDialogModelInjectable
   from "./add-namespace-dialog-model/add-namespace-dialog-model.injectable";
 import type { NamespaceStore } from "./namespace-store/namespace.store";
 
-interface Props extends DialogProps {
+export interface AddNamespaceDialogProps extends DialogProps {
   onSuccess?(ns: Namespace): void;
   onError?(error: any): void;
 }
@@ -32,10 +32,10 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedAddNamespaceDialog extends React.Component<Props & Dependencies> {
+class NonInjectedAddNamespaceDialog extends React.Component<AddNamespaceDialogProps & Dependencies> {
   @observable namespace = "";
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: AddNamespaceDialogProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -93,7 +93,7 @@ class NonInjectedAddNamespaceDialog extends React.Component<Props & Dependencies
   }
 }
 
-export const AddNamespaceDialog = withInjectables<Dependencies, Props>(
+export const AddNamespaceDialog = withInjectables<Dependencies, AddNamespaceDialogProps>(
   NonInjectedAddNamespaceDialog,
 
   {

src/renderer/components/+namespaces/namespace-details.tsx

@@ -29,7 +29,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import kubeWatchApiInjectable
   from "../../kube-watch-api/kube-watch-api.injectable";
 
-interface Props extends KubeObjectDetailsProps<Namespace> {
+export interface NamespaceDetailsProps extends KubeObjectDetailsProps<Namespace> {
 }
 
 interface Dependencies {
@@ -37,10 +37,10 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedNamespaceDetails extends React.Component<Props & Dependencies> {
+class NonInjectedNamespaceDetails extends React.Component<NamespaceDetailsProps & Dependencies> {
   @observable metrics: IPodMetrics = null;
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: NamespaceDetailsProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -132,7 +132,7 @@ class NonInjectedNamespaceDetails extends React.Component<Props & Dependencies>
   }
 }
 
-export const NamespaceDetails = withInjectables<Dependencies, Props>(
+export const NamespaceDetails = withInjectables<Dependencies, NamespaceDetailsProps>(
   NonInjectedNamespaceDetails,
 
   {

src/renderer/components/+namespaces/namespace-select-filter.tsx

@@ -7,7 +7,7 @@ import "./namespace-select-filter.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { components, PlaceholderProps } from "react-select";
+import { components, OptionTypeBase, PlaceholderProps } from "react-select";
 
 import { Icon } from "../icon";
 import { NamespaceSelect } from "./namespace-select";
@@ -23,38 +23,33 @@ interface Dependencies {
   model: NamespaceSelectFilterModel;
 }
 
-class NonInjectedNamespaceSelectFilter extends React.Component<
+const NonInjectedNamespaceSelectFilter = observer(({ model }: SelectProps & Dependencies) => (
-  SelectProps & Dependencies
-> {
-  render() {
-    return (
   <div
-        onKeyUp={this.props.model.onKeyUp}
+    onKeyUp={model.onKeyUp}
-        onKeyDown={this.props.model.onKeyDown}
+    onKeyDown={model.onKeyDown}
-        onClick={this.props.model.onClick}
+    onClick={model.onClick}
   >
     <NamespaceSelect
       isMulti={true}
-          menuIsOpen={this.props.model.menuIsOpen}
+      menuIsOpen={model.menuIsOpen}
       components={{ Placeholder }}
       showAllNamespacesOption={true}
       closeMenuOnSelect={false}
       controlShouldRenderValue={false}
       placeholder={""}
-          onChange={this.props.model.onChange}
+      onChange={model.onChange}
-          onBlur={this.props.model.reset}
+      onBlur={model.reset}
-          formatOptionLabel={formatOptionLabelFor(this.props.model)}
+      formatOptionLabel={formatOptionLabelFor(model)}
       className="NamespaceSelectFilter"
       menuClass="NamespaceSelectFilterMenu"
       sort={(left, right) =>
-            +this.props.model.selectedNames.has(right.value) -
+        +model.selectedNames.has(right.value)
-            +this.props.model.selectedNames.has(left.value)
+        - +model.selectedNames.has(left.value)
       }
     />
   </div>
-    );
+));
-  }
+
-}
 
 const formatOptionLabelFor =
   (model: NamespaceSelectFilterModel) =>
@@ -74,37 +69,32 @@ const formatOptionLabelFor =
       return label;
     };
 
-export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(
+export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(NonInjectedNamespaceSelectFilter, {
-  observer(NonInjectedNamespaceSelectFilter),
-
-  {
   getProps: (di, props) => ({
     model: di.inject(namespaceSelectFilterModelInjectable),
     ...props,
   }),
-  },
+});
-);
 
-type CustomPlaceholderProps = PlaceholderProps<any, boolean>;
+export interface CustomPlaceholderProps extends PlaceholderProps<OptionTypeBase, boolean> {}
 
 interface PlaceholderDependencies {
   namespaceStore: NamespaceStore;
 }
 
-const NonInjectedPlaceholder = observer(
+const NonInjectedPlaceholder = observer(({ namespaceStore, ...props }: CustomPlaceholderProps & PlaceholderDependencies) => {
-  ({ namespaceStore, ...props }: CustomPlaceholderProps & PlaceholderDependencies) => {
+  const getPlaceholder = () => {
-    const getPlaceholder = (): React.ReactNode => {
     const namespaces = namespaceStore.contextNamespaces;
 
-      if (namespaceStore.areAllSelectedImplicitly || !namespaces.length) {
+    if (namespaceStore.areAllSelectedImplicitly || namespaces.length === 0) {
-        return <>All namespaces</>;
+      return "All namespaces";
     }
 
-      if (namespaces.length === 1) {
+    const prefix = namespaces.length === 1
-        return <>Namespace: {namespaces[0]}</>;
+      ? "Namespace"
-      }
+      : "Namespaces";
 
-      return <>Namespaces: {namespaces.join(", ")}</>;
+    return `${prefix}: ${namespaces.join(", ")}`;
   };
 
   return (
@@ -115,13 +105,9 @@ const NonInjectedPlaceholder = observer(
 },
 );
 
-const Placeholder = withInjectables<PlaceholderDependencies, CustomPlaceholderProps>(
+const Placeholder = withInjectables<PlaceholderDependencies, CustomPlaceholderProps>( NonInjectedPlaceholder, {
-  NonInjectedPlaceholder,
-
-  {
   getProps: (di, props) => ({
     namespaceStore: di.inject(namespaceStoreInjectable),
     ...props,
   }),
-  },
+});
-);

src/renderer/components/+namespaces/namespace-select.tsx

@@ -15,14 +15,14 @@ import type { NamespaceStore } from "./namespace-store/namespace.store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import namespaceStoreInjectable from "./namespace-store/namespace-store.injectable";
 
-interface Props extends SelectProps {
+export interface NamespaceSelectProps extends SelectProps {
   showIcons?: boolean;
   sort?: (a: SelectOption<string>, b: SelectOption<string>) => number;
   showAllNamespacesOption?: boolean; // show "All namespaces" option on the top (default: false)
   customizeOptions?(options: SelectOption[]): SelectOption[];
 }
 
-const defaultProps: Partial<Props> = {
+const defaultProps: Partial<NamespaceSelectProps> = {
   showIcons: true,
 };
 
@@ -31,10 +31,10 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedNamespaceSelect extends React.Component<Props & Dependencies> {
+class NonInjectedNamespaceSelect extends React.Component<NamespaceSelectProps & Dependencies> {
   static defaultProps = defaultProps as object;
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: NamespaceSelectProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -88,7 +88,7 @@ class NonInjectedNamespaceSelect extends React.Component<Props & Dependencies> {
   }
 }
 
-export const NamespaceSelect = withInjectables<Dependencies, Props>(
+export const NamespaceSelect = withInjectables<Dependencies, NamespaceSelectProps>(
   NonInjectedNamespaceSelect,
 
   {

src/renderer/components/+network-endpoints/endpoint-details.tsx

@@ -14,11 +14,11 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { EndpointSubsetList } from "./endpoint-subset-list";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<Endpoint> {
+export interface EndpointDetailsProps extends KubeObjectDetailsProps<Endpoint> {
 }
 
 @observer
-export class EndpointDetails extends React.Component<Props> {
+export class EndpointDetails extends React.Component<EndpointDetailsProps> {
   render() {
     const { object: endpoint } = this.props;
 

src/renderer/components/+network-endpoints/endpoint-subset-list.tsx

@@ -14,13 +14,13 @@ import { apiManager } from "../../../common/k8s-api/api-manager";
 import { Link } from "react-router-dom";
 import { getDetailsUrl } from "../kube-detail-params";
 
-interface Props {
+export interface EndpointSubsetListProps {
   subset: EndpointSubset;
   endpoint: Endpoint;
 }
 
 @observer
-export class EndpointSubsetList extends React.Component<Props> {
+export class EndpointSubsetList extends React.Component<EndpointSubsetListProps> {
 
   getAddressTableRow(ip: string) {
     const { subset } = this.props;

src/renderer/components/+network-endpoints/endpoints.tsx

@@ -20,11 +20,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<EndpointRouteParams> {
+export interface EndpointsProps extends RouteComponentProps<EndpointRouteParams> {
 }
 
 @observer
-export class Endpoints extends React.Component<Props> {
+export class Endpoints extends React.Component<EndpointsProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -21,14 +21,14 @@ import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<Ingress> {
+export interface IngressDetailsProps extends KubeObjectDetailsProps<Ingress> {
 }
 
 @observer
-export class IngressDetails extends React.Component<Props> {
+export class IngressDetails extends React.Component<IngressDetailsProps> {
   @observable metrics: IIngressMetrics = null;
 
-  constructor(props: Props) {
+  constructor(props: IngressDetailsProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+network-ingresses/ingresses.tsx

@@ -21,11 +21,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<IngressRouteParams> {
+export interface IngressesProps extends RouteComponentProps<IngressRouteParams> {
 }
 
 @observer
-export class Ingresses extends React.Component<Props> {
+export class Ingresses extends React.Component<IngressesProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+network-policies/network-policies.tsx

@@ -20,11 +20,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<NetworkPoliciesRouteParams> {
+export interface NetworkPoliciesProps extends RouteComponentProps<NetworkPoliciesRouteParams> {
 }
 
 @observer
-export class NetworkPolicies extends React.Component<Props> {
+export class NetworkPolicies extends React.Component<NetworkPoliciesProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+network-policies/network-policy-details.tsx

@@ -17,11 +17,11 @@ import logger from "../../../common/logger";
 import type { LabelMatchExpression, LabelSelector } from "../../../common/k8s-api/kube-object";
 import { isEmpty } from "lodash";
 
-interface Props extends KubeObjectDetailsProps<NetworkPolicy> {
+export interface NetworkPolicyDetailsProps extends KubeObjectDetailsProps<NetworkPolicy> {
 }
 
 @observer
-export class NetworkPolicyDetails extends React.Component<Props> {
+export class NetworkPolicyDetails extends React.Component<NetworkPolicyDetailsProps> {
   renderIPolicyIpBlock(ipBlock: IPolicyIpBlock | undefined) {
     if (!ipBlock) {
       return null;

src/renderer/components/+network-port-forwards/port-forward-details.tsx

@@ -14,12 +14,12 @@ import { podsApi, serviceApi } from "../../../common/k8s-api/endpoints";
 import { getDetailsUrl } from "../kube-detail-params";
 import { PortForwardMenu } from "./port-forward-menu";
 
-interface Props {
+export interface PortForwardDetailsProps {
   portForward: PortForwardItem;
   hideDetails(): void;
 }
 
-export class PortForwardDetails extends React.Component<Props> {
+export class PortForwardDetails extends React.Component<PortForwardDetailsProps> {
 
   renderResourceName() {
     const { portForward } = this.props;

src/renderer/components/+network-port-forwards/port-forward-menu.tsx

@@ -14,7 +14,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardDialogModelInjectable from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 
-interface Props extends MenuActionsProps {
+export interface PortForwardMenuProps extends MenuActionsProps {
   portForward: PortForwardItem;
   hideDetails?(): void;
 }
@@ -24,7 +24,7 @@ interface Dependencies {
   openPortForwardDialog: (item: PortForwardItem) => void;
 }
 
-class NonInjectedPortForwardMenu extends React.Component<Props & Dependencies> {
+class NonInjectedPortForwardMenu extends React.Component<PortForwardMenuProps & Dependencies> {
   @boundMethod
   remove() {
     const { portForward } = this.props;
@@ -109,7 +109,7 @@ class NonInjectedPortForwardMenu extends React.Component<Props & Dependencies> {
   }
 }
 
-export const PortForwardMenu = withInjectables<Dependencies, Props>(
+export const PortForwardMenu = withInjectables<Dependencies, PortForwardMenuProps>(
   NonInjectedPortForwardMenu,
 
   {

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -27,7 +27,7 @@ enum columnId {
   status = "status",
 }
 
-interface Props extends RouteComponentProps<PortForwardsRouteParams> {
+export interface PortForwardsProps extends RouteComponentProps<PortForwardsRouteParams> {
 }
 
 interface Dependencies {
@@ -35,7 +35,7 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedPortForwards extends React.Component<Props & Dependencies> {
+class NonInjectedPortForwards extends React.Component<PortForwardsProps & Dependencies> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
@@ -143,7 +143,7 @@ class NonInjectedPortForwards extends React.Component<Props & Dependencies> {
   }
 }
 
-export const PortForwards = withInjectables<Dependencies, Props>(
+export const PortForwards = withInjectables<Dependencies, PortForwardsProps>(
   NonInjectedPortForwards,
 
   {

src/renderer/components/+network-services/service-details-endpoint.tsx

@@ -12,12 +12,12 @@ import { endpointStore } from "../+network-endpoints/endpoints.store";
 import { Spinner } from "../spinner";
 import { showDetails } from "../kube-detail-params";
 
-interface Props {
+export interface ServiceDetailsEndpointProps {
   endpoint: KubeObject;
 }
 
 @observer
-export class ServiceDetailsEndpoint extends React.Component<Props> {
+export class ServiceDetailsEndpoint extends React.Component<ServiceDetailsEndpointProps> {
   render() {
     const { endpoint } = this.props;
 

src/renderer/components/+network-services/service-details.tsx

@@ -26,7 +26,7 @@ import kubeWatchApiInjectable
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 import type { KubeWatchSubscribeStoreOptions } from "../../kube-watch-api/kube-watch-api";
 
-interface Props extends KubeObjectDetailsProps<Service> {
+export interface ServiceDetailsProps extends KubeObjectDetailsProps<Service> {
 }
 
 interface Dependencies {
@@ -35,7 +35,7 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedServiceDetails extends React.Component<Props & Dependencies> {
+class NonInjectedServiceDetails extends React.Component<ServiceDetailsProps & Dependencies> {
   componentDidMount() {
     const { object: service } = this.props;
 
@@ -137,7 +137,7 @@ class NonInjectedServiceDetails extends React.Component<Props & Dependencies> {
   }
 }
 
-export const ServiceDetails = withInjectables<Dependencies, Props>(
+export const ServiceDetails = withInjectables<Dependencies, ServiceDetailsProps>(
   NonInjectedServiceDetails,
 
   {

src/renderer/components/+network-services/service-port-component.tsx

@@ -25,7 +25,7 @@ import portForwardStoreInjectable from "../../port-forward/port-forward-store/po
 import portForwardDialogModelInjectable from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";
 import logger from "../../../common/logger";
 
-interface Props {
+export interface ServicePortComponentProps {
   service: Service;
   port: ServicePort;
 }
@@ -36,13 +36,13 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedServicePortComponent extends React.Component<Props & Dependencies> {
+class NonInjectedServicePortComponent extends React.Component<ServicePortComponentProps & Dependencies> {
   @observable waiting = false;
   @observable forwardPort = 0;
   @observable isPortForwarded = false;
   @observable isActive = false;
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: ServicePortComponentProps & Dependencies) {
     super(props);
     makeObservable(this);
     this.checkExistingPortForwarding();
@@ -186,7 +186,7 @@ class NonInjectedServicePortComponent extends React.Component<Props & Dependenci
   }
 }
 
-export const ServicePortComponent = withInjectables<Dependencies, Props>(
+export const ServicePortComponent = withInjectables<Dependencies, ServicePortComponentProps>(
   NonInjectedServicePortComponent,
 
   {

src/renderer/components/+network-services/services.tsx

@@ -26,11 +26,11 @@ enum columnId {
   status = "status",
 }
 
-interface Props extends RouteComponentProps<ServicesRouteParams> {
+export interface ServicesProps extends RouteComponentProps<ServicesRouteParams> {
 }
 
 @observer
-export class Services extends React.Component<Props> {
+export class Services extends React.Component<ServicesProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+nodes/details-resources.tsx

@@ -12,12 +12,12 @@ import React from "react";
 import type { Node } from "../../../common/k8s-api/endpoints";
 import { TableCell } from "../table/table-cell";
 
-interface Props {
+export interface NodeDetailsResourcesProps {
   node: Node;
   type: "allocatable" | "capacity";
 }
 
-export class NodeDetailsResources extends React.Component<Props> {
+export class NodeDetailsResources extends React.Component<NodeDetailsResourcesProps> {
   toMi(resource: string) {
     if (resource?.endsWith("Ki")) {
       return `${(parseInt(resource) / 1024).toFixed(1)}Mi`;

src/renderer/components/+nodes/details.tsx

@@ -31,7 +31,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import kubeWatchApiInjectable
   from "../../kube-watch-api/kube-watch-api.injectable";
 
-interface Props extends KubeObjectDetailsProps<Node> {
+export interface NodeDetailsProps extends KubeObjectDetailsProps<Node> {
 }
 
 interface Dependencies {
@@ -39,10 +39,10 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedNodeDetails extends React.Component<Props & Dependencies> {
+class NonInjectedNodeDetails extends React.Component<NodeDetailsProps & Dependencies> {
   @observable metrics: Partial<IClusterMetrics>;
 
-  constructor(props: Props & Dependencies) {
+  constructor(props: NodeDetailsProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -184,7 +184,7 @@ class NonInjectedNodeDetails extends React.Component<Props & Dependencies> {
   }
 }
 
-export const NodeDetails = withInjectables<Dependencies, Props>(
+export const NodeDetails = withInjectables<Dependencies, NodeDetailsProps>(
   NonInjectedNodeDetails,
 
   {

src/renderer/components/+nodes/route.tsx

@@ -37,7 +37,7 @@ enum columnId {
   status = "status",
 }
 
-interface Props extends RouteComponentProps<NodesRouteParams> {
+export interface NodesRouteProps extends RouteComponentProps<NodesRouteParams> {
 }
 
 type MetricsTooltipFormatter = (metrics: [number, number]) => string;
@@ -50,11 +50,11 @@ interface UsageArgs {
 }
 
 @observer
-export class NodesRoute extends React.Component<Props> {
+export class NodesRoute extends React.Component<NodesRouteProps> {
   @observable.ref metrics: Partial<INodeMetrics> = {};
   private metricsWatcher = interval(30, async () => this.metrics = await getMetricsForAllNodes());
 
-  constructor(props: Props) {
+  constructor(props: NodesRouteProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+pod-security-policies/pod-security-policy-details.tsx

@@ -15,7 +15,7 @@ import { Table, TableCell, TableHead, TableRow } from "../table";
 import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<PodSecurityPolicy> {
+export interface PodSecurityPolicyDetailsProps extends KubeObjectDetailsProps<PodSecurityPolicy> {
 }
 
 interface RuleGroup {
@@ -27,7 +27,7 @@ interface RuleGroup {
 }
 
 @observer
-export class PodSecurityPolicyDetails extends React.Component<Props> {
+export class PodSecurityPolicyDetails extends React.Component<PodSecurityPolicyDetailsProps> {
   renderRuleGroup( title: React.ReactNode, group: RuleGroup) {
     if (!group) return null;
     const { rule, ranges } = group;

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -21,8 +21,8 @@ import { Notifications } from "../notifications";
 import { type HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
 import { requestOpenFilePickingDialog } from "../../ipc";
 
-interface Props extends Partial<DialogProps> {
+export interface AddHelmRepoDialogProps extends Partial<DialogProps> {
-  onAddRepo: Function;
+  onAddRepo: () => void;
 }
 
 enum FileType {
@@ -40,11 +40,11 @@ function getEmptyRepo(): HelmRepo {
 }
 
 @observer
-export class AddHelmRepoDialog extends React.Component<Props> {
+export class AddHelmRepoDialog extends React.Component<AddHelmRepoDialogProps> {
   private static keyExtensions = ["key", "keystore", "jks", "p12", "pfx", "pem"];
   private static certExtensions = ["crt", "cer", "ca-bundle", "p7b", "p7c", "p7s", "p12", "pfx", "pem"];
 
-  constructor(props: Props) {
+  constructor(props: AddHelmRepoDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+preferences/extension-settings.tsx

@@ -7,7 +7,7 @@ import type { AppPreferenceRegistration } from "./app-preferences/app-preference
 import React from "react";
 import { cssNames } from "../../../renderer/utils";
 
-interface ExtensionSettingsProps {
+export interface ExtensionSettingsProps {
   setting: AppPreferenceRegistration;
   size: "small" | "normal";
 }

src/renderer/components/+preferences/removable-item.tsx

@@ -9,13 +9,13 @@ import React, { DOMAttributes } from "react";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 
-interface Props extends DOMAttributes<any>{
+export interface RemovableItemProps extends DOMAttributes<any>{
   icon?: string;
   onRemove: () => void;
   className?: string;
 }
 
-export function RemovableItem({ icon, onRemove, children, className, ...rest }: Props) {
+export function RemovableItem({ icon, onRemove, children, className, ...rest }: RemovableItemProps) {
   return (
     <div className={cssNames(styles.item, "flex gaps align-center justify-space-between", className)} {...rest}>
       {icon && (

src/renderer/components/+storage-classes/storage-class-details.tsx

@@ -24,7 +24,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import kubeWatchApiInjectable
   from "../../kube-watch-api/kube-watch-api.injectable";
 
-interface Props extends KubeObjectDetailsProps<StorageClass> {
+export interface StorageClassDetailsProps extends KubeObjectDetailsProps<StorageClass> {
 }
 
 interface Dependencies {
@@ -32,7 +32,7 @@ interface Dependencies {
 }
 
 @observer
-class NonInjectedStorageClassDetails extends React.Component<Props & Dependencies> {
+class NonInjectedStorageClassDetails extends React.Component<StorageClassDetailsProps & Dependencies> {
   componentDidMount() {
     disposeOnUnmount(this, [
       this.props.subscribeStores([
@@ -96,7 +96,7 @@ class NonInjectedStorageClassDetails extends React.Component<Props & Dependencie
   }
 }
 
-export const StorageClassDetails = withInjectables<Dependencies, Props>(
+export const StorageClassDetails = withInjectables<Dependencies, StorageClassDetailsProps>(
   NonInjectedStorageClassDetails,
 
   {

src/renderer/components/+storage-classes/storage-classes.tsx

@@ -21,11 +21,11 @@ enum columnId {
   reclaimPolicy = "reclaim",
 }
 
-interface Props extends RouteComponentProps<StorageClassesRouteParams> {
+export interface StorageClassesProps extends RouteComponentProps<StorageClassesRouteParams> {
 }
 
 @observer
-export class StorageClasses extends React.Component<Props> {
+export class StorageClasses extends React.Component<StorageClassesProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -23,14 +23,14 @@ import { getDetailsUrl } from "../kube-detail-params";
 import { boundMethod } from "../../utils";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
+export interface PersistentVolumeClaimDetailsProps extends KubeObjectDetailsProps<PersistentVolumeClaim> {
 }
 
 @observer
-export class PersistentVolumeClaimDetails extends React.Component<Props> {
+export class PersistentVolumeClaimDetails extends React.Component<PersistentVolumeClaimDetailsProps> {
   @observable metrics: IPvcMetrics = null;
 
-  constructor(props: Props) {
+  constructor(props: PersistentVolumeClaimDetailsProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+storage-volume-claims/volume-claims.tsx

@@ -28,11 +28,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<VolumeClaimsRouteParams> {
+export interface PersistentVolumeClaimsProps extends RouteComponentProps<VolumeClaimsRouteParams> {
 }
 
 @observer
-export class PersistentVolumeClaims extends React.Component<Props> {
+export class PersistentVolumeClaims extends React.Component<PersistentVolumeClaimsProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+storage-volumes/volume-details-list.tsx

@@ -20,7 +20,7 @@ import { TableHead } from "../table/table-head";
 import { volumesStore } from "./volumes.store";
 import kebabCase from "lodash/kebabCase";
 
-interface Props {
+export interface VolumeDetailsListProps {
   persistentVolumes: PersistentVolume[];
 }
 
@@ -31,7 +31,7 @@ enum sortBy {
 }
 
 @observer
-export class VolumeDetailsList extends React.Component<Props> {
+export class VolumeDetailsList extends React.Component<VolumeDetailsListProps> {
   private sortingCallbacks = {
     [sortBy.name]: (volume: PersistentVolume) => volume.getName(),
     [sortBy.capacity]: (volume: PersistentVolume) => volume.getCapacity(),

src/renderer/components/+storage-volumes/volume-details.tsx

@@ -17,11 +17,11 @@ import { KubeObjectMeta } from "../kube-object-meta";
 import { getDetailsUrl } from "../kube-detail-params";
 import logger from "../../../common/logger";
 
-interface Props extends KubeObjectDetailsProps<PersistentVolume> {
+export interface PersistentVolumeDetailsProps extends KubeObjectDetailsProps<PersistentVolume> {
 }
 
 @observer
-export class PersistentVolumeDetails extends React.Component<Props> {
+export class PersistentVolumeDetails extends React.Component<PersistentVolumeDetailsProps> {
   render() {
     const { object: volume } = this.props;
 

src/renderer/components/+storage-volumes/volumes.tsx

@@ -25,11 +25,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<VolumesRouteParams> {
+export interface PersistentVolumesProps extends RouteComponentProps<VolumesRouteParams> {
 }
 
 @observer
-export class PersistentVolumes extends React.Component<Props> {
+export class PersistentVolumes extends React.Component<PersistentVolumesProps> {
   render() {
     return (
       <KubeObjectListLayout

src/renderer/components/+user-management/+cluster-role-bindings/details.tsx

@@ -21,14 +21,14 @@ import { ClusterRoleBindingDialog } from "./dialog";
 import { clusterRoleBindingsStore } from "./store";
 import { hashClusterRoleBindingSubject } from "./hashers";
 
-interface Props extends KubeObjectDetailsProps<ClusterRoleBinding> {
+export interface ClusterRoleBindingDetailsProps extends KubeObjectDetailsProps<ClusterRoleBinding> {
 }
 
 @observer
-export class ClusterRoleBindingDetails extends React.Component<Props> {
+export class ClusterRoleBindingDetails extends React.Component<ClusterRoleBindingDetailsProps> {
   selectedSubjects = new ObservableHashSet<ClusterRoleBindingSubject>([], hashClusterRoleBindingSubject);
 
-  constructor(props: Props) {
+  constructor(props: ClusterRoleBindingDetailsProps) {
     super(props);
     autoBind(this);
   }

src/renderer/components/+user-management/+cluster-role-bindings/dialog.tsx

@@ -25,7 +25,7 @@ import { ObservableHashSet, nFircate } from "../../../utils";
 import { Input } from "../../input";
 import { TooltipPosition } from "../../tooltip";
 
-interface Props extends Partial<DialogProps> {
+export interface ClusterRoleBindingDialogProps extends Partial<DialogProps> {
 }
 
 interface DialogState {
@@ -34,12 +34,12 @@ interface DialogState {
 }
 
 @observer
-export class ClusterRoleBindingDialog extends React.Component<Props> {
+export class ClusterRoleBindingDialog extends React.Component<ClusterRoleBindingDialogProps> {
   static state = observable.object<DialogState>({
     isOpen: false,
   });
 
-  constructor(props: Props) {
+  constructor(props: ClusterRoleBindingDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+user-management/+cluster-role-bindings/view.tsx

@@ -23,11 +23,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<ClusterRoleBindingsRouteParams> {
+export interface ClusterRoleBindingsProps extends RouteComponentProps<ClusterRoleBindingsRouteParams> {
 }
 
 @observer
-export class ClusterRoleBindings extends React.Component<Props> {
+export class ClusterRoleBindings extends React.Component<ClusterRoleBindingsProps> {
   render() {
     return (
       <>

src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx

@@ -16,16 +16,16 @@ import { Notifications } from "../../notifications";
 import { Wizard, WizardStep } from "../../wizard";
 import { clusterRolesStore } from "./store";
 
-interface Props extends Partial<DialogProps> {
+export interface AddClusterRoleDialogProps extends Partial<DialogProps> {
 }
 
 @observer
-export class AddClusterRoleDialog extends React.Component<Props> {
+export class AddClusterRoleDialog extends React.Component<AddClusterRoleDialogProps> {
   static isOpen = observable.box(false);
 
   @observable clusterRoleName = "";
 
-  constructor(props: Props) {
+  constructor(props: AddClusterRoleDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+user-management/+cluster-roles/details.tsx

@@ -13,11 +13,11 @@ import type { KubeObjectDetailsProps } from "../../kube-object-details";
 import { KubeObjectMeta } from "../../kube-object-meta";
 import type { ClusterRole } from "../../../../common/k8s-api/endpoints";
 
-interface Props extends KubeObjectDetailsProps<ClusterRole> {
+export interface ClusterRoleDetailsProps extends KubeObjectDetailsProps<ClusterRole> {
 }
 
 @observer
-export class ClusterRoleDetails extends React.Component<Props> {
+export class ClusterRoleDetails extends React.Component<ClusterRoleDetailsProps> {
   render() {
     const { object: clusterRole } = this.props;
 

src/renderer/components/+user-management/+cluster-roles/view.tsx

@@ -20,11 +20,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<ClusterRolesRouteParams> {
+export interface ClusterRolesProps extends RouteComponentProps<ClusterRolesRouteParams> {
 }
 
 @observer
-export class ClusterRoles extends React.Component<Props> {
+export class ClusterRoles extends React.Component<ClusterRolesProps> {
   render() {
     return (
       <>

src/renderer/components/+user-management/+role-bindings/details.tsx

@@ -21,11 +21,11 @@ import { roleBindingsStore } from "./store";
 import { ObservableHashSet } from "../../../../common/utils/hash-set";
 import { hashRoleBindingSubject } from "./hashers";
 
-interface Props extends KubeObjectDetailsProps<RoleBinding> {
+export interface RoleBindingDetailsProps extends KubeObjectDetailsProps<RoleBinding> {
 }
 
 @observer
-export class RoleBindingDetails extends React.Component<Props> {
+export class RoleBindingDetails extends React.Component<RoleBindingDetailsProps> {
   selectedSubjects = new ObservableHashSet<RoleBindingSubject>([], hashRoleBindingSubject);
 
   async componentDidMount() {

src/renderer/components/+user-management/+role-bindings/dialog.tsx

@@ -26,7 +26,7 @@ import { clusterRolesStore } from "../+cluster-roles/store";
 import { Input } from "../../input";
 import { ObservableHashSet, nFircate } from "../../../utils";
 
-interface Props extends Partial<DialogProps> {
+export interface RoleBindingDialogProps extends Partial<DialogProps> {
 }
 
 interface DialogState {
@@ -35,12 +35,12 @@ interface DialogState {
 }
 
 @observer
-export class RoleBindingDialog extends React.Component<Props> {
+export class RoleBindingDialog extends React.Component<RoleBindingDialogProps> {
   static state = observable.object<DialogState>({
     isOpen: false,
   });
 
-  constructor(props: Props) {
+  constructor(props: RoleBindingDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+user-management/+role-bindings/view.tsx

@@ -23,11 +23,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<RoleBindingsRouteParams> {
+export interface RoleBindingsProps extends RouteComponentProps<RoleBindingsRouteParams> {
 }
 
 @observer
-export class RoleBindings extends React.Component<Props> {
+export class RoleBindings extends React.Component<RoleBindingsProps> {
   render() {
     return (
       <>

src/renderer/components/+user-management/+roles/add-dialog.tsx

@@ -18,17 +18,17 @@ import { Notifications } from "../../notifications";
 import { Wizard, WizardStep } from "../../wizard";
 import { rolesStore } from "./store";
 
-interface Props extends Partial<DialogProps> {
+export interface AddRoleDialogProps extends Partial<DialogProps> {
 }
 
 @observer
-export class AddRoleDialog extends React.Component<Props> {
+export class AddRoleDialog extends React.Component<AddRoleDialogProps> {
   static isOpen = observable.box(false);
 
   @observable roleName = "";
   @observable namespace = "";
 
-  constructor(props: Props) {
+  constructor(props: AddRoleDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+user-management/+roles/details.tsx

@@ -13,11 +13,11 @@ import { DrawerTitle } from "../../drawer";
 import type { KubeObjectDetailsProps } from "../../kube-object-details";
 import { KubeObjectMeta } from "../../kube-object-meta";
 
-interface Props extends KubeObjectDetailsProps<Role> {
+export interface RoleDetailsProps extends KubeObjectDetailsProps<Role> {
 }
 
 @observer
-export class RoleDetails extends React.Component<Props> {
+export class RoleDetails extends React.Component<RoleDetailsProps> {
   render() {
     const { object: role } = this.props;
 

src/renderer/components/+user-management/+roles/view.tsx

@@ -20,11 +20,11 @@ enum columnId {
   age = "age",
 }
 
-interface Props extends RouteComponentProps<RolesRouteParams> {
+export interface RolesProps extends RouteComponentProps<RolesRouteParams> {
 }
 
 @observer
-export class Roles extends React.Component<Props> {
+export class Roles extends React.Component<RolesProps> {
   render() {
     return (
       <>

src/renderer/components/+user-management/+service-accounts/create-dialog.tsx

@@ -19,17 +19,17 @@ import { Notifications } from "../../notifications";
 import { Wizard, WizardStep } from "../../wizard";
 import { serviceAccountsStore } from "./store";
 
-interface Props extends Partial<DialogProps> {
+export interface CreateServiceAccountDialogProps extends Partial<DialogProps> {
 }
 
 @observer
-export class CreateServiceAccountDialog extends React.Component<Props> {
+export class CreateServiceAccountDialog extends React.Component<CreateServiceAccountDialogProps> {
   static isOpen = observable.box(false);
 
   @observable name = "";
   @observable namespace = "default";
 
-  constructor(props: Props) {
+  constructor(props: CreateServiceAccountDialogProps) {
     super(props);
     makeObservable(this);
   }

src/renderer/components/+user-management/+service-accounts/details.tsx

@@ -20,11 +20,11 @@ import { Spinner } from "../../spinner";
 import { ServiceAccountsSecret } from "./secret";
 import { getDetailsUrl } from "../../kube-detail-params";
 
-interface Props extends KubeObjectDetailsProps<ServiceAccount> {
+export interface ServiceAccountsDetailsProps extends KubeObjectDetailsProps<ServiceAccount> {
 }
 
 @observer
-export class ServiceAccountsDetails extends React.Component<Props> {
+export class ServiceAccountsDetails extends React.Component<ServiceAccountsDetailsProps> {
   @observable secrets: Secret[];
   @observable imagePullSecrets: Secret[];
 
@@ -53,7 +53,7 @@ export class ServiceAccountsDetails extends React.Component<Props> {
     ]);
   }
 
-  constructor(props: Props) {
+  constructor(props: ServiceAccountsDetailsProps) {
     super(props);
     makeObservable(this);
   }