fixes & refactoring

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

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

@@ -13,6 +13,8 @@ import { kubeWatchApi } from "../../api/kube-watch-api";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
+  showClusterOption?: boolean; // show "Cluster" option on the top (default: false)
+  showAllNamespacesOption?: boolean; // show "All namespaces" option on the top (default: false)
   customizeOptions?(options: SelectOption[]): SelectOption[];
 }
 
@@ -34,9 +36,15 @@ export class NamespaceSelect extends React.Component<Props> {
   }
 
   @computed get options(): SelectOption[] {
-    const { customizeOptions } = this.props;
+    const { customizeOptions, showClusterOption, showAllNamespacesOption } = this.props;
     let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName() }));
 
+    if (showAllNamespacesOption) {
+      options.unshift({ label: "All Namespaces", value: "" });
+    } else if (showClusterOption) {
+      options.unshift({ label: "Cluster", value: "" });
+    }
+
     if (customizeOptions) {
       options = customizeOptions(options);
     }
@@ -57,7 +65,7 @@ export class NamespaceSelect extends React.Component<Props> {
   };
 
   render() {
-    const { className, showIcons, showClusterOption, clusterOptionLabel, customizeOptions, ...selectProps } = this.props;
+    const { className, showIcons, customizeOptions, ...selectProps } = this.props;
 
     return (
       <Select
@@ -77,12 +85,14 @@ export class NamespaceSelectFilter extends React.Component {
     const namespaces = namespaceStore.getContextNamespaces();
 
     switch (namespaces.length) {
+      case namespaceStore.allowedNamespaces.length:
+        return <>All namespaces</>;
+      case 0:
+        return <>Select a namespace</>;
       case 1:
         return <>Namespace: {namespaces[0]}</>;
-      case 2:
-        return <>Namespaces: {namespaces.join(", ")}</>;
       default:
-        return "All Namespaces";
+        return <>Namespaces: {namespaces.join(", ")}</>;
     }
   }
 
@@ -102,13 +112,6 @@ export class NamespaceSelectFilter extends React.Component {
     return label;
   };
 
-  customizeOptions = (options: SelectOption[]): SelectOption[] => {
-    return [
-      { value: "", label: "All Namespaces" },
-      ...options
-    ];
-  };
-
   onChange = ([{ value: namespace }]: SelectOption[]) => {
     if (namespace) {
       namespaceStore.toggleContext(namespace);
@@ -121,13 +124,13 @@ export class NamespaceSelectFilter extends React.Component {
     return (
       <NamespaceSelect
         isMulti={true}
-        placeholder={this.placeholder}
+        showAllNamespacesOption={true}
         closeMenuOnSelect={false}
         isOptionSelected={() => false}
         controlShouldRenderValue={false}
+        placeholder={this.placeholder}
         onChange={this.onChange}
         formatOptionLabel={this.formatOptionLabel}
-        customizeOptions={this.customizeOptions}
       />
     );
   }

src/renderer/components/+namespaces/namespace.store.ts

@@ -6,7 +6,7 @@ import { createPageParam } from "../../navigation";
 import { apiManager } from "../../api/api-manager";
 import { clusterStore, getHostedCluster } from "../../../common/cluster-store";
 
-const storage = createStorage<string[]>("context_namespaces");
+const storage = createStorage<string[]>("context_namespaces", []);
 
 export const namespaceUrlParam = createPageParam<string[]>({
   name: "namespaces",
@@ -34,7 +34,7 @@ export function getDummyNamespace(name: string) {
 export class NamespaceStore extends KubeObjectStore<Namespace> {
   api = namespacesApi;
 
-  @observable contextNs = observable.array<string>();
+  @observable private contextNs = observable.set<string>();
   @observable isReady = false;
 
   whenReady = when(() => this.isReady);
@@ -57,7 +57,7 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   }
 
   public onContextChange(callback: (contextNamespaces: string[]) => void, opts: IReactionOptions = {}): IReactionDisposer {
-    return reaction(() => this.contextNs.toJS(), callback, {
+    return reaction(() => Array.from(this.contextNs), callback, {
       equals: comparer.shallow,
       ...opts,
     });
@@ -85,37 +85,26 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
 
   @computed
   private get initialNamespaces(): string[] {
-    const allowed = new Set(this.allowedNamespaces);
-    const prevSelected = storage.get();
+    const namespaces = new Set(this.allowedNamespaces);
+    const prevSelected = storage.get().filter(namespace => namespaces.has(namespace));
 
-    if (Array.isArray(prevSelected)) {
-      return prevSelected.filter(namespace => allowed.has(namespace));
+    // return previously saved namespaces from local-storage
+    if (prevSelected.length > 0) {
+      return prevSelected;
     }
 
     // otherwise select "default" or first allowed namespace
-    if (allowed.has("default")) {
+    if (namespaces.has("default")) {
       return ["default"];
-    } else if (allowed.size) {
-      return [Array.from(allowed)[0]];
+    } else if (namespaces.size) {
+      return [Array.from(namespaces)[0]];
     }
 
     return [];
   }
 
-  getContextNamespaces(): string[] {
-    const namespaces = this.contextNs.toJS();
-
-    // show all namespaces when nothing selected
-    if (!namespaces.length) {
-      if (this.isLoaded) {
-        // return actual namespaces list since "allowedNamespaces" updating every 30s in cluster and thus might be stale
-        return this.items.map(namespace => namespace.getName());
-      }
-
-      return this.allowedNamespaces;
-    }
-
-    return namespaces;
+  public getContextNamespaces(): string[] {
+    return Array.from(this.contextNs);
   }
 
   getSubscribeApis() {
@@ -144,41 +133,46 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   }
 
   @action
-  setContext(namespaces: string[]) {
+  setContext(namespace: string | string[]) {
+    const namespaces = [namespace].flat();
+
     this.contextNs.replace(namespaces);
   }
 
-  hasContext(namespace: string | string[]) {
-    const context = Array.isArray(namespace) ? namespace : [namespace];
+  hasContext(namespaces: string | string[]) {
+    return [namespaces].flat().every(namespace => this.contextNs.has(namespace));
+  }
 
-    return context.every(namespace => this.contextNs.includes(namespace));
+  @computed get hasAllContexts(): boolean {
+    return this.contextNs.size === this.allowedNamespaces.length;
   }
 
   @action
   toggleContext(namespace: string) {
-    if (this.hasContext(namespace)) this.contextNs.remove(namespace);
-    else this.contextNs.push(namespace);
+    if (this.hasContext(namespace)) {
+      this.contextNs.delete(namespace);
+    } else {
+      this.contextNs.add(namespace);
+    }
   }
 
   @action
   toggleAll(showAll?: boolean) {
     if (typeof showAll === "boolean") {
       if (showAll) {
-        this.contextNs.replace(this.initialNamespaces);
+        this.setContext(this.allowedNamespaces);
       } else {
         this.contextNs.clear();
       }
     } else {
-      const showAll = this.contextNs.length < this.initialNamespaces.length;
-
-      this.toggleAll(showAll);
+      this.toggleAll(!this.hasAllContexts);
     }
   }
 
   @action
   async remove(item: Namespace) {
     await super.remove(item);
-    this.contextNs.remove(item.getName());
+    this.contextNs.delete(item.getName());
   }
 }