Fix HelmChartDetails and HelmReleaseDetails Menu (#3986)

src/renderer/components/+apps-helm-charts/helm-chart-details.tsx

@@ -23,8 +23,8 @@ import "./helm-chart-details.scss";
 
 import React, { Component } from "react";
 import { getChartDetails, HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
-import { observable, autorun, makeObservable } from "mobx";
+import { observable, makeObservable, reaction } from "mobx";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import { Drawer, DrawerItem } from "../drawer";
 import { boundMethod, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
@@ -64,20 +64,24 @@ export class HelmChartDetails extends Component<Props> {
     this.abortController?.abort();
   }
 
-  chartUpdater = autorun(() => {
+  componentDidMount() {
-    this.selectedChart = null;
+    disposeOnUnmount(this, [
-    const { chart: { name, repo, version } } = this.props;
+      reaction(() => this.props.chart, async ({ name, repo, version }) => {
+        try {
+          const { readme, versions } = await getChartDetails(repo, name, { version });
 
-    getChartDetails(repo, name, { version })
+          this.readme = readme;
-      .then(result => {
+          this.chartVersions = versions;
-        this.readme = result.readme;
+          this.selectedChart = versions[0];
-        this.chartVersions = result.versions;
+        } catch (error) {
-        this.selectedChart = result.versions[0];
+          this.error = error;
-      })
+          this.selectedChart = null;
-      .catch(error => {
+        }
-        this.error = error;
+      }, {
-      });
+        fireImmediately: true,
-  });
+      }),
+    ]);
+  }
 
   @boundMethod
   async onVersionChange({ value: chart }: SelectOption<HelmChart>) {
@@ -135,7 +139,7 @@ export class HelmChartDetails extends Component<Props> {
                 value: chart,
               }))}
               isOptionDisabled={({ value: chart }) => chart.deprecated}
-              value={selectedChart.getVersion()}
+              value={selectedChart}
               onChange={onVersionChange}
             />
           </DrawerItem>
@@ -170,10 +174,6 @@ export class HelmChartDetails extends Component<Props> {
   }
 
   renderContent() {
-    if (!this.selectedChart) {
-      return <Spinner center />;
-    }
-
     if (this.error) {
       return (
         <div className="box grow">
@@ -182,6 +182,10 @@ export class HelmChartDetails extends Component<Props> {
       );
     }
 
+    if (!this.selectedChart) {
+      return <Spinner center />;
+    }
+
     return (
       <div className="box grow">
         {this.renderIntroduction()}

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

@@ -79,6 +79,7 @@ export class HelmReleaseMenu extends React.Component<Props> {
         {...menuProps}
         className={cssNames("HelmReleaseMenu", className)}
         removeAction={this.remove}
+        removeConfirmationMessage={() => <p>Remove Helm Release <b>{release.name}</b>?</p>}
       >
         {this.renderContent()}
       </MenuActions>