fix namespace selector performance issues on large clusters

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

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

@@ -35,6 +35,10 @@ import { isMac } from "../../../common/vars";
 
 const Placeholder = observer((props: PlaceholderProps<any, boolean>) => {
   const getPlaceholder = (): React.ReactNode => {
+    if (props.isFocused) {
+      return <>Search Namespaces ...</>;
+    }
+
     const namespaces = namespaceStore.contextNamespaces;
 
     if (namespaceStore.areAllSelectedImplicitly || !namespaces.length) {
@@ -91,7 +95,11 @@ export class NamespaceSelectFilter extends React.Component<SelectProps> {
     disposeOnUnmount(this, [
       reaction(() => this.isMenuOpen, newVal => {
         if (newVal) { // rising edge of selection
-          this.selected.replace(namespaceStore.selectedNames);
+          if (namespaceStore.areAllSelectedImplicitly) {
+            this.selected.replace([""]);
+          } else {
+            this.selected.replace(namespaceStore.selectedNames);
+          }
           this.didToggle = false;
         }
       }),
@@ -99,19 +107,21 @@ export class NamespaceSelectFilter extends React.Component<SelectProps> {
   }
 
   formatOptionLabel({ value: namespace, label }: SelectOption) {
-    if (namespace) {
+    let isSelected = false;
-      const isSelected = namespaceStore.hasContext(namespace);
 
-      return (
+    if (namespace) {
-        <div className="flex gaps align-center">
+      isSelected = !namespaceStore.areAllSelectedImplicitly && namespaceStore.hasContext(namespace);
-          <Icon small material="layers" />
+    } else {
-          <span>{namespace}</span>
+      isSelected = namespaceStore.areAllSelectedImplicitly;
-          {isSelected && <Icon small material="check" className="box right" />}
-        </div>
-      );
     }
 
-    return label;
+    return (
+      <div className="flex gaps align-center">
+        <Icon small material={ namespace ? "layers" : "panorama_wide_angle" } />
+        <span>{label}</span>
+        {isSelected && <Icon small material="check" className="box right" />}
+      </div>
+    );
   }
 
   @action

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

@@ -53,7 +53,7 @@ export class NamespaceSelect extends React.Component<Props> {
 
   @computed.struct get options(): SelectOption[] {
     const { customizeOptions, showAllNamespacesOption, sort } = this.props;
-    let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName() }));
+    let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName(), label: ns.getName() }));
 
     if (sort) {
       options.sort(sort);
@@ -82,6 +82,24 @@ export class NamespaceSelect extends React.Component<Props> {
     );
   };
 
+  filterOption = (option: SelectOption, rawInput: string) => {
+    if (option.value === "" || (!namespaceStore.areAllSelectedImplicitly && namespaceStore.selectedNames.has(option.value))) {
+      return true;
+    }
+
+    if (namespaceStore.items.length > 500 && rawInput.length < 3) {
+      return false;
+    }
+
+    if (rawInput && !option.value.includes(rawInput)) {
+      return false;
+    }
+
+    console.log("raw", rawInput);
+
+    return true;
+  };
+
   render() {
     const { className, showIcons, customizeOptions, components = {}, ...selectProps } = this.props;
 
@@ -92,6 +110,7 @@ export class NamespaceSelect extends React.Component<Props> {
         formatOptionLabel={this.formatOptionLabel}
         options={this.options}
         components={components}
+        filterOption={this.filterOption}
         {...selectProps}
       />
     );