From 3afef111e87bc92d2c3814e5e736dc2e4a3137d2 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Fri, 5 Feb 2021 09:45:29 +0200
Subject: [PATCH] Revert "Allow to quick select/deselect all namespaces in
 `NamespaceSelect` (#2068)"

This reverts commit 1b492f27addee7a5e1a146afea5a0719bd6b665d.

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 .../+namespaces/namespace-select.tsx          | 87 +++++++------------
 .../components/+namespaces/namespace.store.ts | 76 +++++++---------
 .../item-object-list/page-filters.store.ts    |  2 +-
 3 files changed, 65 insertions(+), 100 deletions(-)

diff --git a/src/renderer/components/+namespaces/namespace-select.tsx b/src/renderer/components/+namespaces/namespace-select.tsx
index 5bcf07e1cf..6ee7ea2d57 100644
--- a/src/renderer/components/+namespaces/namespace-select.tsx
+++ b/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)
-  showAllNamespacesOption?: boolean; // show "All namespaces" option on the top (default: false)
-  customizeOptions?(options: SelectOption[]): SelectOption[];
+  showClusterOption?: boolean; // show cluster option on the top (default: false)
+  clusterOptionLabel?: React.ReactNode; // label for cluster option (default: "Cluster")
+  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.unshift({ label: "All Namespaces", value: "" });
-    } else if (showClusterOption) {
-      options.unshift({ label: "Cluster", value: "" });
-    }
+    options = customizeOptions ? customizeOptions(options) : options;
 
-    if (customizeOptions) {
-      options = customizeOptions(options);
+    if (showClusterOption) {
+      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}
-        showAllNamespacesOption={true}
+        placeholder={placeholder}
         closeMenuOnSelect={false}
         isOptionSelected={() => false}
         controlShouldRenderValue={false}
-        placeholder={this.placeholder}
-        onChange={this.onChange}
-        formatOptionLabel={this.formatOptionLabel}
+        isMulti
+        onChange={([{ value }]: SelectOption[]) => toggleContext(value)}
+        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>
+          );
+        }}
       />
     );
   }
diff --git a/src/renderer/components/+namespaces/namespace.store.ts b/src/renderer/components/+namespaces/namespace.store.ts
index 056e1ab24e..63bb7525de 100644
--- a/src/renderer/components/+namespaces/namespace.store.ts
+++ b/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 prevSelected = storage.get().filter(namespace => namespaces.has(namespace));
+    const allowed = new Set(this.allowedNamespaces);
+    const prevSelected = storage.get();
 
-    // return previously saved namespaces from local-storage
-    if (prevSelected.length > 0) {
-      return prevSelected;
+    if (Array.isArray(prevSelected)) {
+      return prevSelected.filter(namespace => allowed.has(namespace));
     }
 
     // otherwise select "default" or first allowed namespace
-    if (namespaces.has("default")) {
+    if (allowed.has("default")) {
       return ["default"];
-    } else if (namespaces.size) {
-      return [Array.from(namespaces)[0]];
+    } else if (allowed.size) {
+      return [Array.from(allowed)[0]];
     }
 
     return [];
   }
 
-  public getContextNamespaces(): string[] {
-    return Array.from(this.contextNs);
+  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;
   }
 
   getSubscribeApis() {
@@ -133,46 +143,26 @@ export class NamespaceStore extends KubeObjectStore<Namespace> {
   }
 
   @action
-  setContext(namespace: string | string[]) {
-    const namespaces = [namespace].flat();
-
+  setContext(namespaces: string[]) {
     this.contextNs.replace(namespaces);
   }
 
-  hasContext(namespaces: string | string[]) {
-    return [namespaces].flat().every(namespace => this.contextNs.has(namespace));
-  }
+  hasContext(namespace: string | string[]) {
+    const context = Array.isArray(namespace) ? namespace : [namespace];
 
-  @computed get hasAllContexts(): boolean {
-    return this.contextNs.size === this.allowedNamespaces.length;
+    return context.every(namespace => this.contextNs.includes(namespace));
   }
 
   @action
   toggleContext(namespace: string) {
-    if (this.hasContext(namespace)) {
-      this.contextNs.delete(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);
-    }
+    if (this.hasContext(namespace)) this.contextNs.remove(namespace);
+    else this.contextNs.push(namespace);
   }
 
   @action
   async remove(item: Namespace) {
     await super.remove(item);
-    this.contextNs.delete(item.getName());
+    this.contextNs.remove(item.getName());
   }
 }
 
diff --git a/src/renderer/components/item-object-list/page-filters.store.ts b/src/renderer/components/item-object-list/page-filters.store.ts
index 8f5fa2c9eb..d931cd2575 100644
--- a/src/renderer/components/item-object-list/page-filters.store.ts
+++ b/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);
         }
       }),