Fix releases not reloading when selecting namespaces

- Also changed the tables to show the header even while loading

- Fixed small grammer mistake on 0 items (instead of 0 item)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+apps-releases/release.store.ts

@@ -1,5 +1,5 @@
 import isEqual from "lodash/isEqual";
-import { action, IReactionDisposer, observable, reaction, when } from "mobx";
+import { action, observable, reaction, when } from "mobx";
 import { autobind } from "../../utils";
 import { HelmRelease, helmReleasesApi, IReleaseCreatePayload, IReleaseUpdatePayload } from "../../api/endpoints/helm-releases.api";
 import { ItemStore } from "../../item.store";
@@ -10,57 +10,56 @@ import { Notifications } from "../notifications";
 
 @autobind()
 export class ReleaseStore extends ItemStore<HelmRelease> {
-  @observable releaseSecrets: Secret[] = [];
+  releaseSecrets = observable.map<string, Secret>();
-  @observable secretWatcher: IReactionDisposer;
 
   constructor() {
     super();
     when(() => secretsStore.isLoaded, () => {
-      this.releaseSecrets = this.getReleaseSecrets();
+      this.releaseSecrets.replace(this.getReleaseSecrets());
     });
   }
 
-  watch() {
+  watchAssociatedSecrets(): (() => void) {
-    this.secretWatcher = reaction(() => secretsStore.items.toJS(), () => {
+    return reaction(() => secretsStore.items.toJS(), () => {
       if (this.isLoading) return;
-      const secrets = this.getReleaseSecrets();
+      const newSecrets = this.getReleaseSecrets();
-      const amountChanged = secrets.length !== this.releaseSecrets.length;
+      const amountChanged = newSecrets.length !== this.releaseSecrets.size;
-      const labelsChanged = this.releaseSecrets.some(item => {
+      const labelsChanged = newSecrets.some(([id, secret]) => (
-        const secret = secrets.find(secret => secret.getId() == item.getId());
+        !isEqual(secret.getLabels(), this.releaseSecrets.get(id)?.getLabels())
-
+      ));
-        if (!secret) return;
-
-        return !isEqual(item.getLabels(), secret.getLabels());
-      });
 
       if (amountChanged || labelsChanged) {
         this.loadFromContextNamespaces();
       }
-      this.releaseSecrets = [...secrets];
+      this.releaseSecrets.replace(newSecrets);
     });
   }
 
-  unwatch() {
+  watchSelecteNamespaces(): (() => void) {
-    this.secretWatcher();
+    return reaction(() => namespaceStore.context.contextNamespaces, namespaces => {
+      this.loadAll(namespaces);
+    });
   }
 
-  getReleaseSecrets() {
+  private getReleaseSecrets() {
-    return secretsStore.getByLabel({ owner: "helm" });
+    return secretsStore
+      .getByLabel({ owner: "helm" })
+      .map(s => [s.getId(), s] as const);
   }
 
   getReleaseSecret(release: HelmRelease) {
-    const labels = {
+    return secretsStore.getByLabel({
       owner: "helm",
       name: release.getName()
-    };
+    })
-
+      .find(secret => secret.getNs() == release.getNs());
-    return secretsStore.getByLabel(labels)
-      .filter(secret => secret.getNs() == release.getNs())[0];
   }
 
   @action
   async loadAll(namespaces: string[]) {
+    console.log("reloading releases", namespaces);
     this.isLoading = true;
+    this.isLoaded = false;
 
     try {
       const items = await this.loadItems(namespaces);
@@ -79,17 +78,18 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
   }
 
   async loadFromContextNamespaces(): Promise<void> {
-    return this.loadAll(namespaceStore.contextNamespaces);
+    return this.loadAll(namespaceStore.context.contextNamespaces);
   }
 
   async loadItems(namespaces: string[]) {
-    const isLoadingAll = namespaceStore.allowedNamespaces.every(ns => namespaces.includes(ns));
+    const isLoadingAll = namespaceStore.context.allNamespaces?.length > 1
-    const noAccessibleNamespaces = namespaceStore.context.cluster.accessibleNamespaces.length === 0;
+      && namespaceStore.context.cluster.accessibleNamespaces.length === 0
+      && namespaceStore.context.allNamespaces.every(ns => namespaces.includes(ns));
 
-    if (isLoadingAll && noAccessibleNamespaces) {
+    if (isLoadingAll) {
       return helmReleasesApi.list();
     } else {
-      return Promise
+      return Promise // load resources per namespace
         .all(namespaces.map(namespace => helmReleasesApi.list(namespace)))
         .then(items => items.flat());
     }

src/renderer/components/+apps-releases/releases.tsx

@@ -2,7 +2,7 @@ import "./releases.scss";
 
 import React, { Component } from "react";
 import kebabCase from "lodash/kebabCase";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { RouteComponentProps } from "react-router";
 import { releaseStore } from "./release.store";
 import { IReleaseRouteParams, releaseURL } from "./release.route";
@@ -30,14 +30,11 @@ interface Props extends RouteComponentProps<IReleaseRouteParams> {
 
 @observer
 export class HelmReleases extends Component<Props> {
-
   componentDidMount() {
-    // Watch for secrets associated with releases and react to their changes
+    disposeOnUnmount(this, [
-    releaseStore.watch();
+      releaseStore.watchAssociatedSecrets(),
-  }
+      releaseStore.watchSelecteNamespaces(),
-
+    ]);
-  componentWillUnmount() {
-    releaseStore.unwatch();
   }
 
   get selectedRelease() {
@@ -49,21 +46,16 @@ export class HelmReleases extends Component<Props> {
   }
 
   showDetails = (item: HelmRelease) => {
-    if (!item) {
-      navigation.merge(releaseURL());
-    }
-    else {
     navigation.merge(releaseURL({
       params: {
         name: item.getName(),
         namespace: item.getNs()
       }
     }));
-    }
   };
 
   hideDetails = () => {
-    this.showDetails(null);
+    navigation.merge(releaseURL());
   };
 
   renderRemoveDialogMessage(selectedItems: HelmRelease[]) {
@@ -114,30 +106,22 @@ export class HelmReleases extends Component<Props> {
             { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
             { title: "Updated", className: "updated", sortBy: columnId.updated, id: columnId.updated },
           ]}
-          renderTableContents={(release: HelmRelease) => {
+          renderTableContents={(release: HelmRelease) => [
-            const version = release.getVersion();
-
-            return [
             release.getName(),
             release.getNs(),
             release.getChart(),
             release.getRevision(),
-              <>
+            release.getVersion(),
-                {version}
-              </>,
             release.appVersion,
             { title: release.getStatus(), className: kebabCase(release.getStatus()) },
             release.getUpdated(),
-            ];
+          ]}
-          }}
+          renderItemMenu={(release: HelmRelease) => (
-          renderItemMenu={(release: HelmRelease) => {
-            return (
             <HelmReleaseMenu
               release={release}
               removeConfirmationMessage={this.renderRemoveDialogMessage([release])}
             />
-            );
+          )}
-          }}
           customizeRemoveDialog={(selectedItems: HelmRelease[]) => ({
             message: this.renderRemoveDialogMessage(selectedItems)
           })}

src/renderer/components/context.ts

@@ -4,8 +4,8 @@ import { namespaceStore } from "./+namespaces/namespace.store";
 
 export interface ClusterContext {
   cluster?: Cluster;
-  allNamespaces?: string[]; // available / allowed namespaces from cluster.ts
+  allNamespaces: string[]; // available / allowed namespaces from cluster.ts
-  contextNamespaces?: string[]; // selected by user (see: namespace-select.tsx)
+  contextNamespaces: string[]; // selected by user (see: namespace-select.tsx)
 }
 
 export const clusterContext: ClusterContext = {

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

@@ -293,6 +293,10 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
   }
 
   renderNoItems() {
+    if (!this.isReady) {
+      return <Spinner center />;
+    }
+
     if (this.filters.length > 0) {
       return (
         <NoItems>
@@ -309,6 +313,14 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     return <NoItems/>;
   }
 
+  renderItems() {
+    if (this.props.virtual) {
+      return null;
+    }
+
+    return this.items.map(item => this.getRow(item.getId()));
+  }
+
   renderHeaderContent(placeholders: IHeaderPlaceholders): ReactNode {
     const { isSearchable, searchFilters } = this.props;
     const { title, filters, search, info } = placeholders;
@@ -339,7 +351,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       );
     }
 
-    return allItemsCount <= 1 ? `${allItemsCount} item` : `${allItemsCount} items`;
+    return allItemsCount === 1 ? `${allItemsCount} item` : `${allItemsCount} items`;
   }
 
   renderHeader() {
@@ -415,16 +427,12 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       store, hasDetailsView, addRemoveButtons = {}, virtual, sortingCallbacks, detailsItem,
       tableProps = {}, tableId
     } = this.props;
-    const { isReady, removeItemsDialog, items } = this;
+    const { removeItemsDialog, items } = this;
     const { selectedItems } = store;
     const selectedItemId = detailsItem && detailsItem.getId();
 
     return (
       <div className="items box grow flex column">
-        {!isReady && (
-          <Spinner center/>
-        )}
-        {isReady && (
         <Table
           tableId={tableId}
           virtual={virtual}
@@ -440,12 +448,8 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
           })}
         >
           {this.renderTableHeader()}
-            {
+          {this.renderItems()}
-              !virtual && items.map(item => this.getRow(item.getId()))
-            }
         </Table>
-
-        )}
         <AddRemoveButtons
           onRemove={selectedItems.length ? removeItemsDialog : null}
           removeTooltip={`Remove selected items (${selectedItems.length})`}