Revert "Allow to quick select/deselect all namespaces in NamespaceSelect (#2068)"

This reverts commit 1b492f27ad.

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

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

@@ -13,14 +13,17 @@ import { kubeWatchApi } from "../../api/kube-watch-api";
 
 interface Props extends SelectProps {
   showIcons?: boolean;
-  showClusterOption?: boolean; // show "Cluster" option on the top (default: false)
+  showClusterOption?: boolean; // show cluster option on the top (default: false)
-  showAllNamespacesOption?: boolean; // show "All namespaces" option on the top (default: false)
+  clusterOptionLabel?: React.ReactNode; // label for cluster option (default: "Cluster")
-  customizeOptions?(options: SelectOption[]): SelectOption[];
+  customizeOptions?(nsOptions: SelectOption[]): SelectOption[];
 }
 
 const defaultProps: Partial<Props> = {
   showIcons: true,
   showClusterOption: false,
+  get clusterOptionLabel() {
+    return `Cluster`;
+  },
 };
 
 @observer
@@ -36,17 +39,13 @@ export class NamespaceSelect extends React.Component<Props> {
   }
 
   @computed get options(): SelectOption[] {
-    const { customizeOptions, showClusterOption, showAllNamespacesOption } = this.props;
+    const { customizeOptions, showClusterOption, clusterOptionLabel } = this.props;
     let options: SelectOption[] = namespaceStore.items.map(ns => ({ value: ns.getName() }));
 
-    if (showAllNamespacesOption) {
+    options = customizeOptions ? customizeOptions(options) : options;
-      options.unshift({ label: "All Namespaces", value: "" });
-    } else if (showClusterOption) {
-      options.unshift({ label: "Cluster", value: "" });
-    }
 
-    if (customizeOptions) {
+    if (showClusterOption) {
-      options = customizeOptions(options);
+      options.unshift({ value: null, label: clusterOptionLabel });
     }
 
     return options;
@@ -65,7 +64,7 @@ export class NamespaceSelect extends React.Component<Props> {
   };
 
   render() {
-    const { className, showIcons, customizeOptions, ...selectProps } = this.props;
+    const { className, showIcons, showClusterOption, clusterOptionLabel, customizeOptions, ...selectProps } = this.props;
 
     return (
       <Select
@@ -81,56 +80,32 @@ export class NamespaceSelect extends React.Component<Props> {
 
 @observer
 export class NamespaceSelectFilter extends React.Component {
-  @computed get placeholder(): React.ReactNode {
-    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]}</>;
-      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.toggleAll(); // "All namespaces" option clicked
-    }
-  };
-
   render() {
+    const { contextNs, hasContext, toggleContext } = namespaceStore;
+    let placeholder = <>All namespaces</>;
+
+    if (contextNs.length == 1) placeholder = <>Namespace: {contextNs[0]}</>;
+    if (contextNs.length >= 2) placeholder = <>Namespaces: {contextNs.join(", ")}</>;
+
     return (
       <NamespaceSelect
-        isMulti={true}
+        placeholder={placeholder}
-        showAllNamespacesOption={true}
         closeMenuOnSelect={false}
         isOptionSelected={() => false}
         controlShouldRenderValue={false}
-        placeholder={this.placeholder}
+        isMulti
-        onChange={this.onChange}
+        onChange={([{ value }]: SelectOption[]) => toggleContext(value)}
-        formatOptionLabel={this.formatOptionLabel}
+        formatOptionLabel={({ value: namespace }: SelectOption) => {
+          const isSelected = 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>
+          );
+        }}
       />
     );
   }

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

@@ -1,4 +1,4 @@
-import { action, comparer, computed, IReactionDisposer, IReactionOptions, observable, reaction, toJS, when } from "mobx";
+import { action, comparer, IReactionDisposer, IReactionOptions, observable, reaction, toJS, when } from "mobx";
 import { autobind, createStorage } from "../../utils";
 import { KubeObjectStore, KubeObjectStoreLoadingParams } from "../../kube-object.store";
 import { Namespace, namespacesApi } from "../../api/endpoints/namespaces.api";
@@ -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 private contextNs = observable.set<string>();
+  @observable contextNs = observable.array<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(() => Array.from(this.contextNs), callback, {
+    return reaction(() => this.contextNs.toJS(), callback, {
       equals: comparer.shallow,
       ...opts,
     });
@@ -79,32 +79,42 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
     });
   }
 
-  @computed get allowedNamespaces(): string[] {
+  get allowedNamespaces(): string[] {
     return toJS(getHostedCluster().allowedNamespaces);
   }
 
-  @computed
   private get initialNamespaces(): string[] {
-    const namespaces = new Set(this.allowedNamespaces);
+    const allowed = new Set(this.allowedNamespaces);
-    const prevSelected = storage.get().filter(namespace => namespaces.has(namespace));
+    const prevSelected = storage.get();
 
-    // return previously saved namespaces from local-storage
+    if (Array.isArray(prevSelected)) {
-    if (prevSelected.length > 0) {
+      return prevSelected.filter(namespace => allowed.has(namespace));
-      return prevSelected;
     }
 
     // otherwise select "default" or first allowed namespace
-    if (namespaces.has("default")) {
+    if (allowed.has("default")) {
       return ["default"];
-    } else if (namespaces.size) {
+    } else if (allowed.size) {
-      return [Array.from(namespaces)[0]];
+      return [Array.from(allowed)[0]];
     }
 
     return [];
   }
 
-  public getContextNamespaces(): string[] {
+  getContextNamespaces(): string[] {
-    return Array.from(this.contextNs);
+    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;
   }
 
   getSubscribeApis() {
@@ -133,46 +143,26 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   }
 
   @action
-  setContext(namespace: string | string[]) {
+  setContext(namespaces: string[]) {
-    const namespaces = [namespace].flat();
-
     this.contextNs.replace(namespaces);
   }
 
-  hasContext(namespaces: string | string[]) {
+  hasContext(namespace: string | string[]) {
-    return [namespaces].flat().every(namespace => this.contextNs.has(namespace));
+    const context = Array.isArray(namespace) ? namespace : [namespace];
-  }
 
-  @computed get hasAllContexts(): boolean {
+    return context.every(namespace => this.contextNs.includes(namespace));
-    return this.contextNs.size === this.allowedNamespaces.length;
   }
 
   @action
   toggleContext(namespace: string) {
-    if (this.hasContext(namespace)) {
+    if (this.hasContext(namespace)) this.contextNs.remove(namespace);
-      this.contextNs.delete(namespace);
+    else this.contextNs.push(namespace);
-    } else {
-      this.contextNs.add(namespace);
-    }
-  }
-
-  @action
-  toggleAll(showAll?: boolean) {
-    if (typeof showAll === "boolean") {
-      if (showAll) {
-        this.setContext(this.allowedNamespaces);
-      } else {
-        this.contextNs.clear();
-      }
-    } else {
-      this.toggleAll(!this.hasAllContexts);
-    }
   }
 
   @action
   async remove(item: Namespace) {
     await super.remove(item);
-    this.contextNs.delete(item.getName());
+    this.contextNs.remove(item.getName());
   }
 }
 

src/renderer/components/item-object-list/page-filters.store.ts

@@ -30,7 +30,7 @@ export class PageFiltersStore {
   protected syncWithContextNamespace() {
     const disposers = [
       reaction(() => this.getValues(FilterType.NAMESPACE), filteredNs => {
-        if (filteredNs.length !== namespaceStore.getContextNamespaces().length) {
+        if (filteredNs.length !== namespaceStore.contextNs.length) {
           namespaceStore.setContext(filteredNs);
         }
       }),