Fix: preventing namespace filter jumping scroll (#2104)

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* fixes & refactoring

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint, micro-refactoring

Signed-off-by: Roman <ixrock@gmail.com>

* more refactoring, clean up, responding to comments

Signed-off-by: Roman <ixrock@gmail.com>

* fix: remove extra check for cluster.allowedApi from processing buffered watch-api events

Signed-off-by: Roman <ixrock@gmail.com>

* refactoring, detaching NamespaceStore from KubeObjectStore

Signed-off-by: Roman <ixrock@gmail.com>

* fix: wait for contextReady in NamespaceStore

Signed-off-by: Roman <ixrock@gmail.com>

* refactoring & fixes

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* fixes: reloading context stores on NamespaceSelect-change

Signed-off-by: Roman <ixrock@gmail.com>

* optimize loading all resources when "all namespaces" selected -> single request per resource (when have rights)

Signed-off-by: Roman <ixrock@gmail.com>

* use native k8s api watches

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* retry watch when it makes sense

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* workaround for browser connection limits

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* use always random subdomain for getResponse

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* resubscribe stores on contextNamespace change

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* modify watch event before calling callback

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* Replace placeholder component in NamespaceSelectFilter

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Co-authored-by: Roman <ixrock@gmail.com>
Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

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

@@ -0,0 +1,77 @@
+import "./namespace-select.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { components, PlaceholderProps } from "react-select";
+
+import { Icon } from "../icon";
+import { FilterIcon } from "../item-object-list/filter-icon";
+import { FilterType } from "../item-object-list/page-filters.store";
+import { SelectOption } from "../select";
+import { NamespaceSelect } from "./namespace-select";
+import { namespaceStore } from "./namespace.store";
+
+const Placeholder = observer((props: PlaceholderProps<any>) => {
+  const getPlaceholder = (): React.ReactNode => {
+    const namespaces = namespaceStore.contextNamespaces;
+
+    switch (namespaces.length) {
+      case 0:
+      case namespaceStore.allowedNamespaces.length:
+        return <>All namespaces</>;
+      case 1:
+        return <>Namespace: {namespaces[0]}</>;
+      default:
+        return <>Namespaces: {namespaces.join(", ")}</>;
+    }
+  };
+
+  return (
+    <components.Placeholder {...props}>
+      {getPlaceholder()}
+    </components.Placeholder>
+  );
+});
+
+
+@observer
+export class NamespaceSelectFilter extends React.Component {
+  formatOptionLabel({ value: namespace, label }: SelectOption) {
+    if (namespace) {
+      const isSelected = namespaceStore.hasContext(namespace);
+
+      return (
+        <div className="flex gaps align-center">
+          <FilterIcon type={FilterType.NAMESPACE}/>
+          <span>{namespace}</span>
+          {isSelected && <Icon small material="check" className="box right"/>}
+        </div>
+      );
+    }
+
+    return label;
+  }
+
+  onChange([{ value: namespace }]: SelectOption[]) {
+    if (namespace) {
+      namespaceStore.toggleContext(namespace);
+    } else {
+      namespaceStore.resetContext(); // "All namespaces" clicked, empty list considered as "all"
+    }
+  }
+
+  render() {
+    return (
+      <NamespaceSelect
+        isMulti={true}
+        components={{ Placeholder }}
+        showAllNamespacesOption={true}
+        closeMenuOnSelect={false}
+        controlShouldRenderValue={false}
+        placeholder={""}
+        onChange={this.onChange}
+        formatOptionLabel={this.formatOptionLabel}
+      />
+    );
+  }
+}

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

@@ -7,8 +7,6 @@ import { Select, SelectOption, SelectProps } from "../select";
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { namespaceStore } from "./namespace.store";
-import { FilterIcon } from "../item-object-list/filter-icon";
-import { FilterType } from "../item-object-list/page-filters.store";
 import { kubeWatchApi } from "../../api/kube-watch-api";
 
 interface Props extends SelectProps {
@@ -35,7 +33,7 @@ export class NamespaceSelect extends React.Component<Props> {
     ]);
   }
 
-  @computed get options(): SelectOption[] {
+  @computed.struct get options(): SelectOption[] {
     const { customizeOptions, showClusterOption, showAllNamespacesOption } = this.props;
     let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName() }));
 
@@ -78,59 +76,3 @@ export class NamespaceSelect extends React.Component<Props> {
     );
   }
 }
-
-@observer
-export class NamespaceSelectFilter extends React.Component {
-  @computed get placeholder(): React.ReactNode {
-    const namespaces = namespaceStore.contextNamespaces;
-
-    switch (namespaces.length) {
-      case 0:
-      case namespaceStore.allowedNamespaces.length:
-        return <>All namespaces</>;
-      case 1:
-        return <>Namespace: {namespaces[0]}</>;
-      default:
-        return <>Namespaces: {namespaces.join(", ")}</>;
-    }
-  }
-
-  formatOptionLabel = ({ value: namespace, label }: SelectOption) => {
-    if (namespace) {
-      const isSelected = namespaceStore.hasContext(namespace);
-
-      return (
-        <div className="flex gaps align-center">
-          <FilterIcon type={FilterType.NAMESPACE}/>
-          <span>{namespace}</span>
-          {isSelected && <Icon small material="check" className="box right"/>}
-        </div>
-      );
-    }
-
-    return label;
-  };
-
-  onChange = ([{ value: namespace }]: SelectOption[]) => {
-    if (namespace) {
-      namespaceStore.toggleContext(namespace);
-    } else {
-      namespaceStore.resetContext(); // "All namespaces" clicked, empty list considered as "all"
-    }
-  };
-
-  render() {
-    return (
-      <NamespaceSelect
-        isMulti={true}
-        showAllNamespacesOption={true}
-        closeMenuOnSelect={false}
-        isOptionSelected={() => false}
-        controlShouldRenderValue={false}
-        placeholder={this.placeholder}
-        onChange={this.onChange}
-        formatOptionLabel={this.formatOptionLabel}
-      />
-    );
-  }
-}

src/renderer/components/+workloads-overview/overview-statuses.tsx

@@ -6,7 +6,7 @@ import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
 import { workloadURL, workloadStores } from "../+workloads";
 import { namespaceStore } from "../+namespaces/namespace.store";
-import { NamespaceSelectFilter } from "../+namespaces/namespace-select";
+import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 import { isAllowedResource, KubeResource } from "../../../common/rbac";
 import { ResourceNames } from "../../utils/rbac";
 import { autobind } from "../../utils";

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -15,7 +15,7 @@ import { SearchInputUrl } from "../input";
 import { Filter, FilterType, pageFilters } from "./page-filters.store";
 import { PageFiltersList } from "./page-filters-list";
 import { PageFiltersSelect } from "./page-filters-select";
-import { NamespaceSelectFilter } from "../+namespaces/namespace-select";
+import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 import { themeStore } from "../../theme.store";
 import { MenuActions } from "../menu/menu-actions";
 import { MenuItem } from "../menu";