Enforce some naming conventions (#4813)

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<
-  SelectProps & Dependencies
-> {
-  render() {
-    return (
-      <div
-        onKeyUp={this.props.model.onKeyUp}
-        onKeyDown={this.props.model.onKeyDown}
-        onClick={this.props.model.onClick}
-      >
-        <NamespaceSelect
-          isMulti={true}
-          menuIsOpen={this.props.model.menuIsOpen}
-          components={{ Placeholder }}
-          showAllNamespacesOption={true}
-          closeMenuOnSelect={false}
-          controlShouldRenderValue={false}
-          placeholder={""}
-          onChange={this.props.model.onChange}
-          onBlur={this.props.model.reset}
-          formatOptionLabel={formatOptionLabelFor(this.props.model)}
-          className="NamespaceSelectFilter"
-          menuClass="NamespaceSelectFilterMenu"
-          sort={(left, right) =>
-            +this.props.model.selectedNames.has(right.value) -
-            +this.props.model.selectedNames.has(left.value)
-          }
-        />
-      </div>
-    );
-  }
-}
+const NonInjectedNamespaceSelectFilter = observer(({ model }: SelectProps & Dependencies) => (
+  <div
+    onKeyUp={model.onKeyUp}
+    onKeyDown={model.onKeyDown}
+    onClick={model.onClick}
+  >
+    <NamespaceSelect
+      isMulti={true}
+      menuIsOpen={model.menuIsOpen}
+      components={{ Placeholder }}
+      showAllNamespacesOption={true}
+      closeMenuOnSelect={false}
+      controlShouldRenderValue={false}
+      placeholder={""}
+      onChange={model.onChange}
+      onBlur={model.reset}
+      formatOptionLabel={formatOptionLabelFor(model)}
+      className="NamespaceSelectFilter"
+      menuClass="NamespaceSelectFilterMenu"
+      sort={(left, right) =>
+        +model.selectedNames.has(right.value)
+        - +model.selectedNames.has(left.value)
+      }
+    />
+  </div>
+));
+
 
 const formatOptionLabelFor =
   (model: NamespaceSelectFilterModel) =>
@@ -74,54 +69,45 @@ const formatOptionLabelFor =
       return label;
     };
 
-export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(
-  observer(NonInjectedNamespaceSelectFilter),
+export const NamespaceSelectFilter = withInjectables<Dependencies, SelectProps>(NonInjectedNamespaceSelectFilter, {
+  getProps: (di, props) => ({
+    model: di.inject(namespaceSelectFilterModelInjectable),
+    ...props,
+  }),
+});
 
-  {
-    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(
-  ({ namespaceStore, ...props }: CustomPlaceholderProps & PlaceholderDependencies) => {
-    const getPlaceholder = (): React.ReactNode => {
-      const namespaces = namespaceStore.contextNamespaces;
+const NonInjectedPlaceholder = observer(({ namespaceStore, ...props }: CustomPlaceholderProps & PlaceholderDependencies) => {
+  const getPlaceholder = () => {
+    const namespaces = namespaceStore.contextNamespaces;
 
-      if (namespaceStore.areAllSelectedImplicitly || !namespaces.length) {
-        return <>All namespaces</>;
-      }
+    if (namespaceStore.areAllSelectedImplicitly || namespaces.length === 0) {
+      return "All namespaces";
+    }
 
-      if (namespaces.length === 1) {
-        return <>Namespace: {namespaces[0]}</>;
-      }
+    const prefix = namespaces.length === 1
+      ? "Namespace"
+      : "Namespaces";
 
-      return <>Namespaces: {namespaces.join(", ")}</>;
-    };
+    return `${prefix}: ${namespaces.join(", ")}`;
+  };
 
-    return (
-      <components.Placeholder {...props}>
-        {getPlaceholder()}
-      </components.Placeholder>
-    );
-  },
+  return (
+    <components.Placeholder {...props}>
+      {getPlaceholder()}
+    </components.Placeholder>
+  );
+},
 );
 
-const Placeholder = withInjectables<PlaceholderDependencies, CustomPlaceholderProps>(
-  NonInjectedPlaceholder,
-
-  {
-    getProps: (di, props) => ({
-      namespaceStore: di.inject(namespaceStoreInjectable),
-      ...props,
-    }),
-  },
-);
+const Placeholder = withInjectables<PlaceholderDependencies, CustomPlaceholderProps>( 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,
 
   {